• Ê
  • Â

å Friday, February 13th, 2015

Outline

  1. Syntax: declaration blocks
  2. Properties: Units, Background, Color, Margin, Padding, Border, Width, Height
  3. Classes, divs
  4. The natural flow of a page
  5. Floats and Clear
  6. multiple classes, nesting divs
  7. Absolute, Relative and Fixed Positioning (z-index)
  8. View source and Inspector

In-class examples

Session 2: css basics
three.html
Session 1: Positioning
Session 2: Positioning
Session 3 floating, classes
Session 3: Positioning

CSS Basics

Support links are here

CSS Positioning

Support links are here

4 Week 1: Concrete Forms   b Add comment

Leave a Reply

You must be logged in to post a comment.

Outline

  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Block elements: headers, paragraphs, lists, nesting
  5. Inline elements: anchor, strong, em, img

John’s example from class

To come

Links

Support links are here

4 Week 1: Concrete Forms   b Add comment

Leave a Reply

You must be logged in to post a comment.

( Getting setup: Add users, bios and avatars

Welcome, everyone.

    1. We’ll enter you into the WordPress system one by one.
    2. While you wait, you can set up your avatar and download Textwrangler. Use whatever image you’d like for your avatar. You’ll need to set up a wordpress.com account at gravatar.com and use your risd email address.
    3. Once you’re set-up, add a nickname (case sensitive), an optional bio and URL. Note, you may keep your identity private by choosing an avatar that isn’t a portrait.

• RISD GRAPH-3188-03 (20882) WKSHP: WEB PROGRAMMING
• Spring 2015, 1:10–6:10pm, Fridays
• 1 credit
• wp15.risd.gd

John Caserta, instructor; jcaserta@risd.edu; DC105, Mondays 10:30am–1:30pm
Brian Hicks, teaching assistant

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. Tight technical HTML drawings in week one give way to full-screen abstract compositions 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.

Although written with HTML/CSS, the assignments are inspired by the contemporary and historical print works of Bradbury Thomspon, Karel Martens and Paul Elliman. Paramount is that students become attuned to the vocabulary and possibilities of graphic form in the digital age. The digital age, similar to the era before in its capacity to precisely arrange or playfully experiment.

Course objectives

  1. Be introduced to HTML and CSS syntax to help conceptualize future projects
  2. Encourage use of the browser for experimentation
  3. Introduce both analytical and playful working methods
  4. Be introduced to instructions-based making — HTML being one of many coding methods.
  5. Be comfortable editing existing themes or websites.
  6. Learn to work collaboratively in an open-source model

Week One: Concrete Forms

  • Assignment 1: Drawing exercise
  • Assignment 2: Found object drawings

Week Two: Abstract Forms

  • Assignment 3: Abstract compositions
  • Assignment 4: Patterns

Week Three: Active Forms

  • Assignment 5: Movement and interaction
  • Assignment 6: Responsive animation

Week Four: Final Project

  • Review assignment 6
  • Lecture: From sketch to code
  • In-class activity: Putting it all together

Software needed

  • Textwrangler or other HTML editor
  • Safari or Chrome browser

Grading

  • 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.
Drawing at top: YooJin Jang, 2012
4 Week 1: Concrete Forms   b Add comment

Leave a Reply

You must be logged in to post a comment.