- WKSHP: WEB PROGRAMMING; RISD GRAPH-3188 (20880)
- Spring 2017, 8:00am–1:00pm, Fridays. Room 404
- 1 credit
- Instructor: Marie Otsuka (motsuka@risd.edu)
- TA: Eury Kim (ekim06@risd.edu)
This three-session workshop combines the tactical skills needed to structure web pages with a looser more playful compositional mindset. Students are introduced to the structural elements and properties of HTML and CSS through hands-on demos, in-class exercises and take-home assignments. Typographic markup and hierarchy establishes the basis for more abstract form making in week two. Week three incorporates interaction, introducing CSS3 transform, animation, and other user-controlled properties. The final assignment for week four will allow you to combine what you learned in the first three weeks.
- Be introduced to HTML and CSS syntax to help conceptualize future projects
- Encourage use of the browser as a place for experimentation
- Introduce both analytical and playful working methods
- Be introduced to instructions-based making — HTML being one of many coding methods
- Be comfortable editing existing themes or websites
- To learn how to find answers online to coding problems
- Learn to work collaboratively in an open-source model
Week one emphasizes the strategic and deliberate construction of space on a web page, working with content.
- Assignment 1: Semantically markup and style some text
- Assignment 2: Create a multi-page website
Week two encourages a different mindset, using code and the browser to discover designs as you make.
- Assignment 3: Draw concrete objects using CSS shapes
- Assignment 4: Web Poster — use abstract shapes / grids (Muller-Brockman)
- Assignment 5: Pattern — incorporate the work of peers / repeat shapes to develop patterns
Week three delves into designing with time, adding interactivity and motion.
- Assignment 6: Create a responsive animation using media queries
- Assignment 7: Animate your web poster and set triggers with jQuery
- Final: Combine your skills to make a responsive website
Putting it all together
- From sketch to code
- Review examples
- Possible explorations
- Sublime Text or other HTML editor, such as Atom or Text Wrangler
- Join GitHub and let's add you to the team!
- Download GitHub Mac client and clone class repo
- Google Chrome browser or Safari
- Lectures are available on Google Drive
- Sample web planning docs
- Be sure to refer to the Wiki on the Github page for useful resources
- Check out & add to Examples for inspiration
- Clone the Github Repo from last year's class
- 40% attendance, 40% completion of all assignments
- 20% risk-taking/quality of end forms: you are expected to experiment, iterate and form innovate designs with the coding that you’ve been shown. Because work from previous sessions is available, you are able to appropriate code, but in service of your own ideas and forms.
- Missing one class without permission fails the course
- Although we are “wired” throughout the workshop, avoid being plugged into Facebook, email, etc.