WNM 608 Rewrite Spring 2012: Outline

Goals for Rewrite:

Module Outcomes Demos Assignments Projects Notes

Welcome to the Web


  • About this course
  • Grading: demo files & projects explained


  • Domaine name, ISP and FTP
  • Tag based languages
  • Code styles
  • Tool set up


  • file names & code style
  • Introduction to HTML5
  • Code a template page
  • Two page site
  • Validation


  • First template page
  • Mini site: two pages

Concepts covered:

  • Doctype
  • tags: html, head, meta, title, body, h, p, a and img, style
  • validation
  • Template page & two page site
  • Upload to server
  • Screen shots of: FireFTP, Firebug, text editor, validation badge
  Partial re-write

Structure & Directories

  • HTML5: The Outline Algorithm
  • block level vs inline
  • Absolute paths vs relative
  • Navigating directory structures
  • What is color?
    • Base 16
    • VRam
    • Web safe color
  • There are no secrets on the web
  • Firebug & exploring other people's code

Color Site: traversing directories

Nested directories with an assets folder

  • relative URLs

Make it look a bit better: CSS

  • border (turn off for images)
  • text-decoration (a tags)


h tags

lists: ul & ol

img in detail

Mini site: Resources page, images & color??
  • Describe Recipe site
  • Describe library

The Cascade & Web Typography

  • Structure -- High school English -- outlining for structure
  • What can you control? (Serenity Prayer) -- when to impose your will as a designer when to leave the user in control!
    • Gama Settings
    • Resolution
    • Browser differences (how browsers display type)
  • Simplicity to display best across a variety of platforms. Web Standards.
  • Introduction to web typography
    • System fonts
    • Fonts & Browsers & Platforms
    • Browsers and type
    • Platform difference -- Web Kit type vs PC type
    • Character entities
  • Firebug!!!

Recipe Site


div & span

header, hgroup, figure and fig caption


strong, em, pre...


More about links



Recipe: as text Gather recipes partial

CSS & Page Layout

  • Introduction to CSS (explain the mechanics that they've been using)
  • Selectors, Classes & IDs
  • where do I put my code? Inline, head, external
  • The Cascade: inheritance
  • Styling tags
  • Pseudo-selectors and modifiying the behavior of tags: Love, HA! (links)
  • Color
  • Philosophy: Jurassic Park -- just because you can doesn't mean you should
  • What size is my font? (to control or not control?) -- Sizes in CSS
    • CSS -- pt, px, percents, em, cm, inches
    • When should you control it?
    • Relative solution.

Single column

Radius corners

background images

list styles: custom bullets

font styles

type styles

styling links with psuedo classes

widths & measurements in CSS

Recipe: design treatment

Lincoln's Second Inaugural Speech

Design recipe site partial

Float Theory

  • ids, classes & psuedo classes
  • inheritance
  • Page layouts
  • Float
  • Escaping floats
  • Multicolumn layouts
  • Liquid pages
  • Introduction to positioning

Blocks vs inline styles

two column layouts

overflow: hidden, clear: left, etc...

How big is my page? Resolution

Recipe: full layout

code and production

demonstration library

Total re-write

Data Tables

  • use and misuse of tables
  • constructing tables, breaking tables
  • styling tables
  • images in tables
  • more psuedo classes

border collapse

zebra striping with CSS (nth-child)

css & tables

table of measurements or herbs

code and production

demonstration library

partial re-write

7 Site Structure, Page Types & Navigation Lecture only  

Recipe site due

Library due

partial re-write

Advanced Topics in CSS

  • Position is everything
  • Multiple background images
  • CSS3 effects
  • liquid layouts

absolut vs relative


parallax backgrounds

CSS transitions

3 col layout with animated pill buttons


Personal portfolio Total re-write


  • Design considerations for forms
  • Diferences between forms for desktops and for mobile
  • Scripts and alternatives
  • Get/Post


  • form
  • action
  • input
  • password
  • text area
  • check boxes
  • radio
  • submit
  • options list
Fancy form page with lots of style! Gather & wireframe Partial re-write

JS: Review Basics

  • DOM
  • variables, function & conditionals
  • events & event handlers
  • Javascript objects: methods & properties
  • getElementById(), setInterval()


Exquisite Corpse


Toggle buttons


Begin design


Walking the DOM

  • Deeper understanding of Javascript objects
  • Deeper review of user events
  • Complex descision making: nested conditionals
  • Controlling movement

Style changer (Readability knock off)

Text Scroller?

pop over tool tip?


refine design Partial re-write

Intro to jQuery

  • selectors & wrappers
  • toggling
  • show/hide transitions
  • working with css
  • adding and subtracting classes
  • this

Image sorter

Content Expanders

code & production Partial re-write

jQuery unleashed

  • manipulating the DOM
  • attr()
  • fadeIn/fadeOut
  • review string parsing
  • Building up logic using trace statements
  • appendTo() -- adding nodes in trace statements
  • wildcard selectors
  • wrapped sets as arrays: length property
  Image gallery

code & production

update library


jQuery UI

  • the library

Scrollers & carousels



True color mixer

Scrolling page

code & production

update library

Total rewrite.
15 Next Steps: future proof!

Learn to learn

self assessment of mastery


Personal portfolio due

Library due

Total re-write