Home / Teaching / New Media Production

Information and Syllabus

New Media Production CP 440 -- FALL '13

Time & Location:
M  11am-12:50pm in Comm 1116
W  11am-12:30pm in Comm 1021

Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: MCMA 1121E

Office Hours:
Mon  10am-11am, 1pm-3pm
Wed  10am-11am, 2pm-4pm
and by appointment

Course Syllabus Location: http://www.robertspahr.com/nmp/

Course Listings:
New Media Production - CP 440 001 - CRN: 68712

Required Text:

Castro, Elizabeth. HTML5 & CSS3 Visual QuickStart Guide (7th Edition) . Peachpit Press

Free Online:
Pilgrim, Mark. Dive into HTML5.


Suggested Further Reading:

Wardrip-Fruin, Noah & Montfort, Nick. The New Media Reader. Cambridge, MA: MIT Press

Packer, Randall & Jordan, Ken. Multimedia From Wagner to Virtual Reality. New Yok, NY, W. W. Norton & Company

Manovich, Lev. The Language of New Media. Cambridge, MA: MIT Press


The Internet is revolutionizing the way the world communicates. In this studio course, students will investigate how the Internet works, as well as explore relationships among design, technology, and user experience while developing web sites, information architectures, interface behaviors, and navigation systems. Topics include: HTML5, Cascading Style Sheets (CSS3), Javascript, free/open source software, as well as incorporating sound, video, and images into web pages. We will also explore issues of privacy, surveillance and social networking as well as the legal and ethical responsibilities of being a consumer and producer of web content.

Upon successful completion of this course, students will have developed a deeper understanding of the history and theory of the Internet and World Wide Web. They will have developed new production skills, and applied this knowledge in critiques and the creation of individual and collaborative studio projects.


Aug 19
Introductions, The Internet, Basic Markup, HTML5
Lecture Notes: Speedviewer's Guide to New Media
Lecture Notes: Internet - Basic HTML
Free/Open Source Software for New Media Production
Requesting SIUC website space
Basic HTML template
Sample Layout Template
Compare & Contrast Exercise

To Be Viewed In Class:
Darth Vader Feels Blue, 01:46
3D Printer replicates a wrench, 04:27
A Day in the Life of a Kiva Robot, 03:36
Blaise Aguera y Arcas demos Photosynth, 03:38 - 06:10
Alex Roman: The Third and The Seventh
Alex Roman: Compositing BreakDown (T&S)
NSA whistleblower Edward Snowden, 2:13-3:40
Sebastian Deterding: What your designs say about you, 12:24

Aug 21

Aug 26
HTML Basics, Tables & CSS Style Basics
Lecture Notes: HTML Basics, Tables & Lists
Lecture Notes: CSS - Style
Compare & Contrast Exercise is due.

Dive Into HTML5: How Did We Get Here?
Vannevar Bush: As We May Think, Jul 1945
Thought Questions

To Be Viewed In Class:
Douglas Engelbart : The Mother of All Demos (1/9), Dec 1968
Douglas Engelbart: The First Mouse, Dec 1968
Memex animation - Vannevar Bush's diagrams made real, 2:33
Kevin Kelly on the next 5,000 days of the web, 19:29

Aug 28

Sep 02
Labor Day – No Class Meeting

Sep 04

Sep 09
HTML5, Visual Organization, Images, Typography, & Multimedia
Lecture Notes: HTML5
Lecture Notes: Visual Organization, Images, Typography & Multimedia
HTML5 Template

Dive Into HTML5: What Does It All Mean?
Dive Into HTML5: Video On The Web
Joe Gillespie: Typography, Feb 2000
Luigi Russolo: The Art of Noises, July 1, 1913.
(Listen to Intonarumori)
F.T. Marinetti, et al: The Futurist Cinema, November 15, 1916.
Thought Questions

Suggested further reading:
Futurism (art)

To Be Viewed In Class:
John Cage about silence, 04:17
Kutiman-Thru-you - 01 - Mother of All Funk Chords
Kutiman-Thru-you - 03 - I'm New
Lead Breakfast ('Pulp Fiction' Remix)

Web Resources:

Sep 11

Sep 16
Advanced Layout Using CSS
Lecture Notes: CSS - Layout
Code Examples:
CSS Layout - Position Absolute
CSS Layout - Position Relative
CSS Layout - Position Float Left
CSS rollover image example
CSS navigation bar

Mark Tribe: Introduction to New Media Art
Kelly: The Technium - Better Than Free
(No Thought Questions)

Web Resources:
Rebecca Solnit: Who will stop Google?, Jun 25, 2013

Sep 18
Project #1 is due
Student Presentations / Critique of Project #1

Sep 23
Free / Open Source Software (FOSS), Validators & Browser Testing
Lecture Notes: FOSS, validators & Browser Testing
Proposal for Project #2 is due by email.

Dive Into HTML5: Detecting HTML5 Features
Richard Stallman: The GNU Manifesto, March 1985
Lawrence Lessig: The Internet Under Siege, November 1, 2001
Thought Questions

To Be Viewed In Class:
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002 31:40
ESR cathedral and the bazaar 1:06
Richard Stallman: Why is free software important? 07:29
Net Neutrality Open Source Documentary, 10:26
Marcin Jakubowski: Open-sourced blueprints for civilization 04:11
Everything is a Remix Part 1 07:18

Suggested Viewing:
RiP! A Remix Manifesto 87:00
Everything is a Remix Part 2 09:48
Everything is a Remix Part 3 11:17
Theo Jansen creates new creatures

Sep 25

Sep 30
Templates, Usability & Search Engine Optimization (SEO)
Lecture Notes: Templates, Usability & Search Engine Optimization

Shirky: Newspapers and Thinking the Unthinkable, March 2009
Jakob Nielsen: How Users Read on the Web, October 1997.
(No thought questions)

To Be Viewed In Class:
Eli Pariser: Beware online "filter bubbles" 09:05

Oct 02

Oct 07
Tactical Media, Hacktivism & Net.Art
Lecture Notes: Tactical Media, Hactivism, Net.Art

Paul Graham: Taste For Makers, February 2002
Thought Questions
Armory Show Events - Oct 07-11

Oct 09
Midterm Exam
Sample Midterm Exam

Oct 14 - No Class Meeting — Fall Break (10/12 – 10/15)

Oct 16
Project #2 Due
Student Presentations / Critique of Project #2
Questions for Website Critiques
Proposal for Project #3 is due by email.

Oct 21
Lecture Notes: Javascript
Javascript Examples
Favicon Information:

Oct 23

Oct 28
Introduction to jQuery - Javascript Library
jQuery Javascript Library
16 Examples of jQuery Image Galleries
Examples of Slide Out Boxes with jQuery and CSS3

Oct 30

Nov 04
Forms, CGI, Client vs. Server
Lecture Notes: Forms, CGI, Client vs. Server
Sample Basic Form
Sample HTML5 Form

To Be Viewed In Class:
Tim Berners-Lee on the next Web 16:20

Nov 06

Nov 11 - No Class Meeting – Veterans Day

Nov 13

Nov 18
Current Trends, Social Media, Web 2.0
Lecture Notes: Current Trends, Social Media, Web 2.0

Tim O'Reilly: What Is Web 2.0, September 2005.
Web Squared: Web 2.0 Five Years On, October 2009.
Thought Questions

To Be Viewed In Class:
Shai Avidan: Infinite Images, 5:38

Nov 20

Nov 25
Review / Studio

Nov 27 - No Class Meeting – Thanksgiving Break (11/27 – 12/01)

Dec 02
Project #3 Due
Student Presentations / Critique of Project #3
Questions for Website Critiques

Dec 04
Student Presentations / Critique of Project #3 - Continued

Dec 10 – 12:50pm-02:50pm - Comm 1116
Final — Student Presentations / Critique of Project #3 - Continued

Project 1: Collaborative Hyper-Narrative

We will be creating an experimental hyper-narrative based on the poem:
T.S. Eliot: The Love Song of J. Alfred Prufrock
Assigned lines for Project #1

Each student in the class will create two web pages which will have at least one text or image link. Your link will connect to the next page in the sequence.

Keep it simple, and make the narrative linear. I want you to create an impressionistic page that captures the dream-like qualities of the poem. I do not want you to illustrate the text. Everyone will be assigned a specific section of the poem. You will build two pages that (in some form) convey your section of the poem using HTML/CSS: Images, Links, Text formatting, Paragraphs, Alignment, Page Titles, etc.

A viewer of our group collage will click through a series of web pages that will have an impressionistic narrative loosely following the poem.

For inspiration, take a look at some of these pioneering Hypertext narratives: Consider how they use Photomontage, and the way they combine text with image to create meaning.

1) You should use at least two images per page. To avoid naming conflicts, be sure to include your last name in the file name of your image. For example: "chairspahr.jpg"

2) Be sure to use CSS styled text using an internal stylesheet.

3) One or more of your images/text links should link to the next page. (This will be a relative link.)

Your pages should link with the following logic:
If you are doing pages 7 and 8, they should be called page07.html, page08.html.
page07.html should link to page08.html,
page08.html should link to page09.html (which will be someone else's page.)

At a minimum, you will create two HTML pages using internal stylesheets, each page will have at least two images, and at least one link to the next page.

This project will be uploaded to an online web server (mypage.siu.edu, or your own hosted web site), as well as copied to a USB flash drive.

Project 2: Gallery Portfolio

You will curate an online exhibition by selecting at least 5 works organized with a specific theme. Design and develop the look and feel of your gallery portfolio site. Consider the audience and the purpose of the site. Develop a navigation convention and interface that successfully presents the work. A good place to start is to explore the artbase at http://www.rhizome.org/.

The second project will be uploaded to an online web server, as well as copied to a USB flash drive. Include all source materials, notes, sketches and documentation in a folder labeled "source."

Details regarding this project will be discussed in class.

Potential Themes to Explore
hypertext mark-up languages
animated gifs
software / programming
open-source, free culture & ownership
search engines
tactical media
non-linear media
social networks / social software
video games
artificial intelligence

Project 3: Personal Portfolio
(or an alternative individual project, such as Net.Art)

Design and develop the look and feel of your personal portfolio site. Consider the audience and the purpose of the site. Develop a navigation convention and interface that successfully presents your work.

The final project will be uploaded to an online web server, as well as copied to a USB flash drive. Include all source materials, notes, sketches and documentation in a folder labeled "source."

Details regarding this project will be discussed in class.


Your final grade will be determined by the following:

  • 15% Participation
  •   5% Project #1
  • 15% Midterm Exam
  • 20% Project #2
  • 45% Project #3

Attendance to all classes is expected. You are allowed up to TWO unexcused absences. Unexcused absence beyond this threshold may result in failing this course.

All assignments and projects are due at the beginning of class. All thought question/reading responses should be submitted at the beginning of class, typed, and no longer than one page in length.

Late projects or late reading responses will not be accepted.

Web Resources:

Look up HTML5, CSS3, etc features, know if they are ready for use

Modernizr: Front-end development done right - an online course

Setting Type on the Web to a Baseline Grid

The Elements of Typographic Style Applied to the Web

CSS Basics

Zen Garden - The Beauty of CSS Design

Hackers and Painters

Prism Break

History of the World Wide Web

Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002

The Origins of Linux [Video]

Stallman: If you want freedom don't follow Linus Torvalds

Free as in Freedom
Richard Stallman's Crusade for Free Software

Open Source Definition

Building Emergency Response Protocols

University’s Emergency Procedure Clause:

Southern Illinois University Carbondale is committed to providing a safe and healthy environment for study and work. Because some health and safety circumstances are beyond our control, we ask that you become familiar with the SIUC Emergency Response Plan and Building Emergency Response Team (BERT) program. Emergency response information is available on posters in buildings on campus, available on BERT's website at www.bert.siu.edu, Department of Public Safety's website www.dps.siu.edu (disaster drop down) and in the Emergency Response Guideline pamphlet. Know how to respond to each type of emergency.

Instructors will provide guidance and direction to students in the classroom in the event of an emergency affecting your location. It is important that you follow these instructions and stay with your instructor during an evacuation or sheltering emergency. The Building Emergency Response Team will provide assistance to your instructor in evacuating the building or sheltering within the facility.

Students With a Disability:

Instructors and students in the class will work together as a team to assist students with a disability safely out of the building. Students with a disability will stay with the instructor and communicate with the instructor what is the safest way to assist them.


During the spring semester we have a Storm Drill.

Pick up your belongings and your instructor will lead you to a safe area of the basement. No one will be allowed to stay upstairs. Stay away from windows. The drill should not last more than 10 minutes. You must stay with your instructor so he/she can take roll. Students need to be quiet in the basement as the BERT members are listening to emergency instructions on handheld radios and cannot hear well in the basement.


During the fall semester we have a Fire Drill.

Pick up your belongings and your instructor will lead you to either the North or South parking lot depending on what part of the building your class is in. You must stay with your instructor so he/she can take roll. As soon as the building is all clear, you will be allowed to return to class.

These drills are to train instructors and the Building Emergency Response Team to get everyone to a safe place during an emergency.

Bomb Threat:

If someone calls in a bomb threat, class will be suspended and students will be asked to pick up their belongings, evacuate the building and leave the premises. Do not leave anything that is yours behind. We will not allow anyone back into the building until the police and bomb squad give us an all clear. DO NOT USE YOUR CELL PHONES. Some bombs are triggered by a cell phone signal.

Shooter in the Building:

If it is safe to leave, move to a safe area far from the building away from where the shooter is located.  If anyone has any information about the shooter, please contact the police after they have gone someplace safe.  

If it is not safe to leave, go into a room, lock the door and turn out the lights. Everyone should spread out and not huddle together as a group. Don't stand in front of the door or in line of fire with the door. Students' chair and desks should be piled in front of the glass and door as a barricade and the teacher's desk, podium and anything movable can be pushed against the door. This is intended to slow down any attempts to enter the classroom. If it looks like the shooter is persistent and able to enter, make a lot of noise and have the students use everything in their backpacks to throw at the shooter to distract him.

Silence all cell phones after one person in the room calls the police and informs them of their location and how many people are in the room. Be quiet and wait for the police to arrive.  The police are looking for one or more shooters, and they have no way of knowing if the shooter is in the room people are hiding in.   For this reason, when the police enter the room, no one should have anything in his/her hands and each person MUST raise his/her hands above his/her head.  


In the event of an earthquake, you are advised to take cover quickly under heavy furniture or crouch near an interior wall or corner and cover your head to avoid falling debris. Outside the building are trees and power lines and debris from the building itself that you will need to stay away from. In the building, large open areas like auditoriums are the most dangerous. Do not try to escape on a stairway or elevator. Do not hide under a stairway. We do not recommend that you stand in a doorway because the door could shut from the vibrations and crush your fingers trapping you there.

Women's Self Defense Classes are offered to female students faculty and staff by the Department of SIU Public Safety. For more information, contact Officer Russell Thomas russellt@dps.siu.edu.

SIU Syllabus Attachment