Interactive Media & Publishing 2

GD5450.01 Spring 2013

First Day

  • Intro / Syllabus / My plan
  • how the internet and servers work…
    • HTML, CSS, JS, PHP, etc.
    • LAMP stack
    • MAMP or WAMP for local working…
  • How to proceed for the term?
  • Decipher different skill levels…
  • Hosting.
    • Options.
    • Github pages for free hosting?
    • SuperSimpleSites for hosting?
  • What kind of stuff do people want to build? It's probably useful for you to have something you can keep adding onto for most of these assignments and demos so that by the end you have one big
  • HTML/CSS proficiency test (Download Reference Files)

Current Project

For January 30, 2013, please complete the “4 Examples” project.

This Week

January 23, 2013

  • Go over the "test" from last week
  • look at examples people have brought in.
  • Lecture on a web process …
  • deeper discussion of site-maps / architecture
  • Homework! Site-map for something…
  • Discuss personal chronology assignment
  • For those of you who thought last week was easy, well then you're pretty set — just work on a site-map and start thinking about the "personal chronology" assignment. For those of you that felt like it was a struggle, or you couldn't quite figure everything out, reviewing some basic HTML and CSS through either or Lynda — or anywhere else you prefer — will be useful.



4 Examples from students

  1. A work you like and think is good.
  2. A work you do not like and do not think is good.
  3. A work you like, but suspect might not be good.
  4. A work you don't like, but have to admit is good.

    Jackie Littman

  1. Studio Nudge
  2. Surfing Museum
  3. SPTNK

    Julie Sayo

  1. LOV
  2. DataVeyes
  3. RVLT
  4. JK Keller

    Bonnie Silverberg

  1. Dominos
  2. Penn State
  4. BHLDN

    Rachel Ventura

  1. Pinkberry
  2. WWWSE
  3. Lisa Frank
  4. Pinterest

    Nour Tabet

  1. Living Social
  2. Visit Baltimore
  3. Milwaukee Police
  4. Craigslist

    Qian Li

  1. Artless
  2. Nine
  3. Destroid
  4. The Wilderness Downtown

    Sara Barnes

  1. How Do They Make $
  2. Book1One
  3. Craigslist
  4. Rosso Carmilla

    Alejandro Salinas

  1. Built by Buffalo and Black Negative
  2. Deadline
  3. Wash. Post
  4. HBS and Nelly Rodi

    Amanda Allen

  1. Sagmeister & Walsh
  2. Campus Kitchens Project
  3. Good
  4. Craigslist

    Nicki Dlugash

  1. Food Sense
  2. Pioneer Woman
  3. Smitten Kitchen
  4. Design Sponge

    Storm Sebastian

  1. Stop at Never
  2. Synergy Women's Fitness
  3. Nine Lion
  4. Post Type

    Sarah Robertson

  1. Kinfolk
  2. U of Kentucky
  3. Petfinder
  4. Craigslist

    Jamie Carusi

  1. Sweet Basil Vail
  2. Lings Cars
  3. Lost Ate Minor
  4. and Get Going Today


Complete a basic sitemap for a site of your choosing... more constraints/criteria found on the projects page.

Also, start finding material for the personal chronology project. If you are working on your thesis, or have some other body of work please feel free to find a way to make this project work in a different context. The goal here is to deal with a variety of kinds of content, then build a site-plan for said material, and lastly, find an interesting way to display it all... Sort of just create a collection and a system for its display...


  • Positioning Excercise: turn this into this (download files)
  • Intro to CSS3 animations (Demo Files)
  • Questions so far?
  • Look at some timeline website examples
  • Discuss project as a group — any new info or questions?
  • HTML and CSS file pointers
  • Server Space and URLs
  • Any requests?

Example Timelines and Chronologies...

From Nour




Please read this essay by Robin Sloan, House of Cards, and prepare some notes and talking points for next week — what do you think, do you agree with his point of view or not, etc. — We'll discuss it 2/13/2013

Begin work on Chronology project

Continue to look over and review what we've done and talked about thus far... I can provide links to tutorials or you can try to work with some of the demo files we've played with on your own.


  • Discuss due date for Chronology projects
  • Any review from last week?
  • FTP nonsense
  • Domain Management
  • Any Questions?
  • Work Day!


Continue to work on the Chronology projects. We will look at them in class on the 27th of February.

Bring questions and problems with you again next week.


  • Any review from last week?
  • Grid System Basics - Download Demo Files
  • Various existing frameworks
  • Questions? Problems?
  • Work Day!


Continue to work on the Chronology projects. We will look at them in class next week. Please be prepared to discuss and defend your work.

Have your site hosted on the server of your choice at a live URL for next week. Please email me the URL where it can be found before the start of class on 2/27 so that I can compile them all on the class website.


CSS/HTML posters & Type references

Font-Squirrel and Google Fonts offer free options. For more high quality options there are TypeKit, Typotheque, and HFJ (their service is coming soon) who offer “real” typefaces at different pay structures.

Poster-like websites

Missed due to Weather


  • Web-Pub/Wiki project.
  • HTML5 tags
  • HTML Entities for proper punctuation
  • Various jQuery plugins
  • Typographic Grids
  • Assign Web-Pub/Wiki project.
  • If time:
  • Discuss CMSs — how do you pick one, how to decide if you need one, etc.
  • View Web-posters

Download baseline grid files

What we'll try to build today

Some Images for More Demos!

Download actual class example grid files



Baseline Grids

Tools of Change for Publishing is an interesting blog around ebooks and web publishing from O'reilly

And, here is a collection of type resources from Smashing Magazine that have some good web-references in them

jQuery Plugins


Please figure out what content you want to be working with for the Wiki project. Like always the prompt is broad, and though focussed on "Wikipedia pages" is really about publishing in general. If you have any content you want to turn into a webpage that in general is a) mainly text, b) has some accompanying figures, quotes, videos, or any other addendum information that must be treated specially, and c) could be seen as part of a flexible system that you'd like to be able to rollout across many pages quickly and consistently please present that to me for this project instead. (for example, Rachel could continue to work on her choose your own adventure piece if desired).

Spring Break


  • Discuss CMSs
  • Vote on Whats next
  • Coding Errors Quiz
  • Discuss Project ideas

Picking a CMS PDF

Homework (for 4/3/2013

Please to work on the Wiki project.

View Web-Pub/Wiki project.

Work on Touch integration projects

Package your website as an “App.”

Other requested demos?

View Web-Pub/Wiki project.

Work on touch projects

Assign Final Project & perhaps more CSS Animations...

View / interact with touch projects

Work on final projects. Any other requested short demos?

Work on final projects. Any other requested short demos?

Mini Crits. Work day for final projects. Any other requested short demos?

Last Day