Skip to main content
Yale School of Art
1156 Chapel Street, POB 208339
New Haven, Connecticut, 06520-8339

Schedule

WEEK 1

Monday, 5 July
General class introduction
Tutorial: HTML structure & tags
Assign: Project #1

Wednesday, 7 July
Review: Project #1 Dirt Styel
Tutorial: CSS advanced HTML
Lecture: Graphic designz on the internetz!
Assign: Project #2
Assign: Readings (Baines, Kinross)

WEEK 2

Monday, 12 July
Discuss: Readings from last Wednesday
Review: Project #2-A Index (3 directions)
Tutorial: Just a little more HTML CSS

Wednesday, 14 July
Review: Project #2-B Index (final)
Tutorial: Image preparation
Lecture: Hyperlinking and the aesthetics of the web
Assign: Project #3
Assign: Readings (Haley, Rock, Warde)

WEEK 3

Monday, 19 July
Discuss: Readings from last Wednesday
Review: Project #3 Comparate (initial design)
Workshop: Code issues

Wednesday, 21 July
Review: Project #3 Comparate (final)
Tutorial: Blog engine
Assign: Project #4
Assign: Readings (Helfand, Shirky, Zeldman)

Last edited by: Mike Gallagher

Edit access: Everybody

In-class demos

Class #1, Monday, 5 July
HTML Structure & Tags

Class #2, Wednesday, 7 July
CSS, Divs, Spans

Class #3, Monday, 12 July
Grouping, Nesting, Pseudo classes

Class #4, Wednesday, 14 July
Multi-part sites, image prep, transparency

Class #6, Wednesday, 21 July
Multi-part sites, image prep, transparency

Last edited by: Mike Gallagher

Edit access: Everybody

Readings

Readings #1, Baines Kinross
Readings #2, Helfand, Rock, Warde
Readings #3, Graham, Zeldman, Helfand

Last edited by: Mike Gallagher

Edit access: Everybody

Syllabus & Project Briefs

Last edited by: Mike Gallagher

Edit access: Staff, Faculty

Project files

Last edited by: Mike Gallagher

Edit access: Staff, Faculty

Resources

Last edited by: Mike Gallagher

Edit access: Staff, Faculty

Examples of PHP projects involving the weather (& more)

Now Screening

Weather Patterns

Clear Night

Windy City

Relative Weather

& more

Alteration/Iteration

Finnegan’s Wake

The Garden of Forking Paths

Fragmentr

Last edited by: Aurora Robles

Edit access: Everybody

Software

Last edited by: Mike Gallagher

Edit access: Staff, Faculty

<!DOCTYPE …

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Last edited by: Mike Gallagher

Edit access: Everybody

List icon removal and/or replacement

One potential problem with lists is the bullet character that is automatically generated by the browser. The browser doesn’t give you a choice of symbol and these things are kind of ungraceful as symbols. But! we can change it! with a little CSS magic.

For starters, you can turn off the bullet symbol entirely with a line of code that says:

ul {
list-style: none;
}

However, we may want to add a different symbol of our own choosing. This can be done using the pseudo element :before, and ‘nested’ so that the new style only applies to list items under unordered lists (list items under ordered lists will not be affected):

ul li:before {
content: “00D7 0020”;
}

Note here that we have Note here that the character we want to add has been written in its ‘escaped hex’ form. This is just a different computer language that CSS uses here to know what you mean. A list of characters/glyphs and their hex codes can be found here

After that, you can use positioning and all the other methods we discussed earlier to style to your heart’s content. For instance: giving the

  • a negative indent so that the symbols hang off the side of the column.

    • Last edited by: Mike Gallagher

    Edit access: Everybody

    Design about design

    The sites we looked at today (Wednesday, 7 July) in class:

    http://www.philbaber.com/
    http://www.jetset.nl/
    http://www.ourpolitesociety.net/
    http://blog.linkedbyair.net/
    http://www.jeremyjansen.nl/
    http://www.radimpesko.com/
    http://www.gerritrietveldacademie.nl/en/
    http://www.dextersinister.org/
    http://www.catalogtree.net/

    Last edited by: Mike Gallagher

    Edit access: Everybody

    Web fonts

    A specimen for web fonts

    Last edited by: Mike Gallagher

    Edit access: Everybody

    Lectures

    A very brief typographic history

    Last edited by: Mike Gallagher

    Edit access: Everybody

    Tumblr pages

    Some Tumblr pages for reference regarding the possibilities of configuration:

    You might find yourself
    Bobulate
    Design tumble log
    Soup
    Domonomnom
    Heather Rivers
    Just watch the sky
    Karen Abad
    Matthew Buchanan
    It’s the interweb
    Paul Giacherio

    Last edited by: Mike Gallagher

    Edit access: Everybody