Home / Teaching / New Media Production

Information and Syllabus

New Media Production -- Fall '14

Time & Location:
M  12:00–02:50 pm — Comm 1116
W  12:00–01:45 pm — Comm 1116
W  02:00–02:50 pm — Comm 1021

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

Office Hours:
W  03:00pm - 05:00pm
R  11:00am - 03:00pm
and by appointment

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

Course Listings:
New Media Production - 66890 - CP 440 - 001
New Media Production - 69041 - MCMA 511 - 001

Required Text:

Castro, Elizabeth. HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide). Peachpit Press

Online Version: 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 authoring, Cascading Style Sheets, Javascript, open source software, as well as incorporating sound, video, and images into web pages. We will also explore issues of privacy 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.


Please note syllabus is subject to change with notice.

Aug 18
Introductions, The Internet, Basic Markup, HTML5

Lecture Notes:
Speedviewer's Guide to New Media
Internet - Basic HTML

Free/Open Source Software for New Media Production
Thought Question Discussion Leaders
Setup SIU website space

Code Example:
Basic HTML template
Sample Layout Template

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
DARPA Legged Squad Support System (LS3), 1:29
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
Humans Need Not Apply, 15:00
Sebastian Deterding: What your designs say about you, 12:24

Aug 20

Compare & Contrast Exercise

Aug 25
HTML Basics, Tables & CSS Style Basics
Compare & Contrast Exercise is due.
Completed Compare & Contrast

Lecture Notes:
HTML Basics, Tables & Lists
CSS - Style

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
Ten years of Internet (Infographic)

Marshall Brain: How Web Servers Work
Jeff Tyson: How Internet Infrastructure Works

Aug 27

Sep 01
Labor Day - No Class Meeting

Sep 03
HTML5, Visual Organization, Images, Typography, & Multimedia

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
Kutiman-Thru-you - 01 - Mother of All Funk Chords
Kutiman-Thru-you - 03 - I'm New
Lead Breakfast ('Pulp Fiction' Remix)

Sep 08
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

Rebecca Solnit: Who will stop Google?, Jun 25, 2013
Thought Questions

The Simpsons in CSS
CSS Zen Garden

Sep 10

Sep 15
Presentations / Critique of Project #1
Project One is due.

Kelly: The Technium - Better Than Free
Thought Questions

To Be Viewed In Class:
Blaise Aguera y Arcas demos Photosynth, 07:33
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002, 31:40
Free software, free society: Richard Stallman at TEDxGeneva 2014, 13:39

Extra Videos:
Theo Jansen creates new creatures
John Underkoffler points to the future of UI

Sep 17

Sep 22
Tactical Media, Hacktivism & Net.Art

Lecture Notes:
Tactical Media, Hactivism, Net.Art

Mark Tribe: Introduction to New Media Art
Thought Questions

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

Sep 24

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

Lecture Notes:
FOSS, Validators & Browser Testing

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:
ESR cathedral and the bazaar 1:06
Free software, free society: Richard Stallman at TEDxGeneva 2014 13:39
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

Oct 01

Oct 06
Midterm Exam
Sample Exam

Oct 08

Oct 13
Fall Break - No Class Meeting

Oct 15
Project #2 - Student Presentations / Critique
Project #2 is due

Questions for Website Critiques

Oct 20
Project #2 - Student Presentations / Critique - continued
Proposal for Project #3 is due by email.

Oct 22
Javascript, Templates, Usability & Search Engine Optimization (SEO)

Lecture Notes:
Templates, Usability & Search Engine Optimization

Javascript Examples
Favicon Information

Shirky: Newspapers and Thinking the Unthinkable, March 2009
Jakob Nielsen: How Users Read on the Web, October 1997.
Thought Questions

To Be Viewed In Class:
Casey Neistat: Snapchat Murders Facebook, 5:46

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

Oct 29

Nov 03
Forms, CGI, Client vs. Server

Lecture Notes:
Forms, CGI, Client vs. Server

Sample Basic Form
Sample HTML5 Form

65 Things We Know About NSA Surveillance That We Didn’t Know a Year Ago, June 2014
Thought Questions

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

Nov 05

Nov 10
Current Trends, Social Media, Web 2.0 & Privacy

Lecture Notes:
Current Trends, Social Media, Web 2.0 & Privacy

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

Nov 12

Nov 17
TBD - based on class interests
Possible topics may include: Processing, Raspberry Pi, Linux, PHP & MySQL

Nov 19

Nov 24

Nov 26-30
Thanksgiving Holiday

Dec 01

Dec 03
Project #3 - Student Presentations / Critique
Project #3 due

Questions for Website Critiques

Dec 10 - 12:00-1:45PM
University Scheduled Final
Project #3 - Student Presentations / Critique - 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
Undergraduate students assigned lines for Project #1
Graduate students 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.)

Please note graduate students page naming convention vary slightly. To be discussed in class.

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

Examples of previous students work:
Video Art
Locative Art
Typeface Designers Internet Collaborations

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.

Examples of previous students Net.Art:
Allie Lee: Tape
Derek Dadian-Smith: 108 Koans
Nichole Nicholson: Net.Art


Your final grade will be determined by the following:

  • 15% Participation / Thought Questions
  •   5% Project #1
  • 25% Project #2
  • 40% Project #3
  • 15% Midterm Exam

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.

Late projects or late reading responses will not be accepted.

Thought Questions should be submitted at the beginning of class, typed, and no longer than one printed page. At the top of each document place your name, the class name, the date, and the title of the reading.

Students will be assigned specific days to lead the Thought Question discussions.

Web Resources:

Technical Skills
Controlling the Network &Intellectual Property
Open Source/Free Software Movement

Technical Skills

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

Modeernizr: 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

HTML Advanced Tutorial

CSS Basics

Zen Garden - The Beauty of CSS Design

CSS How-to

Web Page Design for Designers: Typography

Image Map for Detailed Information

Hackers and Painters

useit.com: Jakob Nielsen's Website

IE8 Version Targeting causes quite a stir

Controlling the Network & Intellectual Property

Prism Break

Youtube video: Net Neutrality

Wired.com: Military and Social Networking

Kelly: The Technium - Better Than Free

Web search for bomb recipes should be blocked: EU

History of the World Wide Web

The End of the Internet?

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

Open Source/Free Software Movement

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