- Workshop: WEB PROGRAMMING; RISD GRAPH-3188 (26268)
- Fall 2017, 1:10pm–6:10pm, Fridays. Room 404
- 1 credit
- Instructor: Marie Otsuka ([email protected]) (cell: 617-852-8392)
This three-session workshop combines the tactical skills needed to structure web pages with a looser more playful compositional mindset. Students are introduced to writing 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
- Continue with the in-class exercise to practice formatting content. Try to use semantic elements (
<section> <h1> <p> <em>) as appropriate.
- Continue with the in-class exercise to practice formatting content. Try to use semantic elements (
- Assignment 2: Create a multi-page website
- Create a website that consists of at least 3 different pages, linking them together with relative paths. You should use a single stylesheet for all your pages.
Week two encourages a different mindset, using code and the browser to discover designs as you make.
- Assignment 3: Shapes
- a)draw concrete objects using CSS shapes
- b)repeat abstract shapes to create a pattern
- Play with CSS properties, positioning, z-index, overflows to "draw" in the browser
- Assignment 4: Compose a web poster — use abstract shapes / grids
- Apply your understanding of "chunks" and sectioning to create a one-page layout with graphics and text. You may use Muller-Brockman posters as a guide, or one of your own.
Week three delves into designing with time, adding interactivity and motion.
- Assignment 5: Animate your web poster
- Play with CSS transitions and animations to incorporate motion into your poster
- Assignment 6 / Final: Combine your skills to make a responsive and interactive website
- Use Media Queries to adapt your website at different screen-widths
- Incorporate at least one user-triggered event using jQuery
Putting it all together
- From sketch to code
- Review examples
- Individual meetings
- Possible explorations
- Download Sublime Text or other HTML editor, such as Atom
- Join GitHub and we'll add you to the team!
- Download GitHub Mac client and clone the class repository
- Test in Google Chrome, Safari, and/or Firefox — assignments will be evaluated in Chrome
- Clone/sync the Demos Repository
- Review the lectures on Google Drive
- Check out the Wiki on the Github page for useful resources
- Quick reference when Troubleshooting
- Check out & add to Sites for inspiration
- Clone the Github Repo from the previous 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 reuse 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.
It is important to me that students from all diverse backgrounds and perspectives are well-served by this course, that students’ learning needs are addressed both in and out of class, and that the diversity students bring to this class are viewed as a resource, strength, and benefit. I strive to present materials and activities that challenge accepted canons and are respectful and representative of diversity: gender, sexual orientation, disability, age, socioeconomic status, ethnicity, race, culture, perspective, and other background characteristics. Your suggestions about how to improve the value of diversity in this course are always encouraged and appreciated. Please let me know how I might improve the effectiveness of the course for you personally or for other students or student groups.