Home / Teaching / New Media Production

Information and Syllabus

New Media Production -- SUMMER '14

Time & Location:
MTWR  9:00 am – 12:20 pm — Communications 0009E

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

Office Hours:
MTWR  12:00pm - 1:00pm & by appt.

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

Course Listings:
New Media Production - 42680 - CP 440 - 301
Media Arts Studio Seminar: New Media Production - MCMA 543 - 301

Required Text:

Castro, Elizabeth. HTML & CSS Visual QuickStart Guide (8th 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

Free Online: Multimedia From Wagner to Virtual Reality

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.


Jun 09
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
Thought Question Discussion Leaders
Setup SIU website space
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
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

Jun 10
HTML Basics, Tables & CSS Style Basics
Lecture Notes: HTML Basics, Tables & Lists
Lecture Notes: CSS - Style
Compare & Contrast Exercise

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)

Jun 11
HTML5, Visual Organization, Images, Typography, & Multimedia
Lecture Notes: HTML5
Lecture Notes: Visual Organization, Images, Typography & Multimedia
HTML5 Template

Compare & Contrast Exercise is due.

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)
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)

Web Resources:

Jun 12
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

Web Resources:
The Simpsons in CSS
CSS Zen Garden

Jun 16
Project #1 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

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

Jun 17
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

Jun 18
Free / Open Source Software (FOSS), Validators & Browser Testing
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

Proposal for Project #2 is due by email.

To Be Viewed In Class:
ESR cathedral and the bazaar 1:06
Stallman interview on free software 09:31
Net Neutrality Open Source Documentary, 10:26
Marcin Jakubowski: Open-sourced blueprints for civilization 04:11
Everything is a Remix Part 1 07:18
Everything is a Remix Part 2 09:48
Everything is a Remix Part 3 11:17

Suggested Viewing:
RiP! A Remix Manifesto 87:00

Jun 19
Midterm Exam
Sample Exam #1

Jun 23
Studio Day
Work on Project #2.

Jun 24
Project #2 Due
Student Presentations / Critique of Project #2
Questions for Website Critiques

Proposal for Project #3 is due by email.

Jun 25
Templates, Usability & Search Engine Optimization (SEO)
Lecture Notes: Templates, Usability & Search Engine Optimization

Lecture Notes: Javascript
Javascript Examples

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

Favicon Information:

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

Jun 30
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

Jul 01
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

Web Resources:
Software That Protects Your Private Bits

Jul 02
Studio Day

Jul 03
Project #3 Due
Student Presentations / Critique of Project #3
Questions for Website Critiques

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
View the completed 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

View completed Project 2

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.

View completed Project 3


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