Home / Teaching / New Media Production

Information and Syllabus

New Media Production -- CP440 - S21

Days: Thursdays
Time:  02:00pm – 04:50pm
Location: Online Scheduled Distance Learning

Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: MCMA 1056B

Office Hours:
T  01:00pm - 04:00pm
W  09:00am - 12:00pm
and by appointment

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

Course Listings:
New Media Production - 24429 - CP 440 - 001
(co-convened with New Media Production - 24664 - MCMA 511 - 001)

Suggested Text:

Casabona, Joe. HTML and CSS, Ninth Edition (Visual Quickstart Guide). Peachpit Press

*** All other readings will be distributed in class or available online. ***


"Any sufficiently advanced technology is indistinguishable from magic."
    — Arthur C. Clarke, Profiles of the Future: An Inquiry Into the Limits of the Possible

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.


  • Students will develop a deeper understanding of the history and theory of the Internet and World Wide Web.
  • Students will speak and write critically about the arts and networked culture.
  • Students will develop new production skills, and apply this knowledge in critiques and in the creation of individual and collaborative studio projects.


### Please note syllabus is subject to change with notice. ###

Jan 21
Introductions, The Internet, & Basic HTML Markup
Lecture Notes:
Speedviewer's Guide to New Media
Internet - Basic HTML

Code Example: Basic HTML template

Free/Open Source Software for New Media Production

Assignment: Compare & Contrast Exercise

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

Due: Compare & Contrast Exercise

Marshall Brain: How Web Servers Work
Vannevar Bush: As We May Think, Jul 1945
Thought Questions

The Simpsons in CSS
CSS Zen Garden
The First Computer Bug
Douglas Engelbart : The Mother of All Demos (1/9), Dec 1968
Douglas Engelbart: The First Mouse, Dec 1968

Feb 04
HTML5, Images, Typography, & Multimedia
Lecture Notes:
Typography, Images, & Multimedia
Elements of Art & Principles of Organization

Code Example: HTML5 Template

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

Creating a Cinemagraph in Gimp
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)

Assignment: Project #1

Feb 11
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

Adrienne LaFrance: Facebook is a Doomsday Machine, Dec 2020
Rebecca Solnit: Who will stop Google?, Jun 25, 2013
Thought Questions

Feb 18
Open Studio
TEDxMidAtlantic 2011 - Vint Cerf - Interplanetary Internet Dec 1, 2011
7 Minutes to Mars: NASA's Perseverance Rover Attempts Most Dangerous Landing Yet Feb 12, 2021

Feb 25
Presentations / Critique of Project #1
Project One is due.

Assignment: Project #2

Kelly: The Technium - Better Than Free
Thought Questions

Mar 04
Free / Open Source Software (FOSS), Privacy & Remix
Lecture Notes: Software That Protects Your Private Bits

Bill Gates: Open Letter to Hobbyists, February 1976
Richard Stallman: The GNU Manifesto, March 1985
Lawrence Lessig: The Internet Under Siege, November 1, 2001
Thought Questions

ESR cathedral and the bazaar 1:06
Free software, free society: Richard Stallman at TEDxGeneva 2014 13:39
Everything is a Remix Part 1 07:18
Everything is a Remix Part 2 09:48
Everything is a Remix Part 3 11:17
Marcin Jakubowski: Open-sourced blueprints for civilization 04:11
RiP! A Remix Manifesto 1:26:24

Mar 11
Tactical Media, Hacktivism & Net.Art
Lecture Notes: Tactical Media, Hacktivism, Net.Art

Mark Tribe: Introduction to New Media Art
Thought Questions

NYTimes: How Facebook is Changing Your Internet, 09:50
NY Times: How China is Changing Your Internet, 05:57

Proposal for Project #2 is due by email.

Mar 18
Open Studio

Mar 25
Open Studio
Assignment: Project #3
Geany Snippets: snippets.conf

Apr 01
Project #2 - Student Presentations / Critique
Project #2 is due

Resources: Questions for Website Critiques
Proposal for Project #3 is due by email.

Apr 08
Javascript, Templates, Usability & Search Engine Optimization (SEO)
Lecture Notes:
Templates, Usability & Search Engine Optimization
Javascript & JQuery

Javascript Examples
jQuery Javascript Library

Apr 15
Responsive Web Design & Open Studio
Lecture Notes:
Code Examples:
Responsive Page
Responsive Grid Page
Responsive Youtube Video

Apr 22
Open Studio
Class will begin at 3pm on Zoom.

Apr 29
Open Studio

May 04
Finals Week - Tuesday, May 04 @ 2:45-4:45PM
Student presentations of Project 3 works-in-progress.

May 07
Project 3 is due no later than 11:59PM CDT
Please submit Project 3 as a zipped file by email.

Project 1: Collaborative Hyper-Narrative

We will be creating an experimental hyper-narrative based on the poem:
Read: T.S. Eliot: The Love Song of J. Alfred Prufrock
Listen: T. S. Eliot reads The Love Song of J. Alfred Prufrock

View the completed Project One - Spring '21

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

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 your neocities website.

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 web. A zipped file of the project, and all source materials, notes, sketches and documentation in a folder labeled "source" should be emailed to the instructor.

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: Individual Project.

In consultation with the instructor, each student will propose and develop an individual project.

Students are encouraged to imagine project ideas that match their interests, but possible projects could be a personal portfolio web site, a net.art project, a dynamic web project using PHP, or a physical computing project using Raspberry Pi computers. Further discussion will take place in class and in one-on-one conversations with the instructor.

The final project will be uploaded to web. A zipped file of the project, and all source materials, notes, sketches and documentation in a folder labeled "source" should be emailed to the instructor.

Details regarding this project will be discussed in class.

Examples of previous students Net.Art:
Allie Lee: Tape
Sarah Mitchell: Dress Me Up
Derek Dadian-Smith: 108 Koans


The work in this course requires motivation, exploration, risk-taking, and most importantly, an openness to new ideas. The grading policy of this class is meant to encourage you to explore new ideas and take chances. Do not think in terms of "What must I do to receive an A grade", but think in terms of what you would like to learn.

Attendance: 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. Students are expected to be at all scheduled 'studio days' working on their projects.

Assignments: All assignments and projects are due at the beginning of class. Late projects will not be accepted.

Thought Questions: Should be in PDF format, no longer than one printed page, and emailed to the professor before the beginning of class. At the top of each document place your name, the class name, the date, and the title of the reading.

Required Equipment: Students are required to bring a wifi enabled laptop to class. The laptop should be no older than 5 years, and can run Mac OS, Windows or Linux. All required software is free and open source (FOSS), and will be downloaded and installed in class.


A 95-100,   A- 92-95
Outstanding work.
Solution shows excellent depth of understanding and innovation. The solution has been fully developed in form and concept.

B+ 88-91,   B 85-87,   B- 82-84
Good work.
Solution exceeds all requirements and shows above average depth of understanding. Demonstrates more than adequate clarity of idea and execution.

C+ 78-81,   C 75-77,   C- 72-74
Average work.
Problem has been solved adequately, but the solution lacks depth of understanding, development and innovation.

D+ 68-71,   D 65-67,   D- 62-64
Poor work.
Solution is extremely weak and lacks understanding and innovation. Technical skills are weak.

F 61 or less
Unacceptable work.
Solution to the problem is unresolved and incomplete resulting in a failing grade.

Each Project will be graded on artistic, creative and intellectual merit.

Grades will be based on the following:

  • 20% Originality of concept
  • 20% Delivery (execution of the concept)
  • 20% Documentation / Process
  • 20% Craft
  • 20% Critique & participation

Your final grade will be determined by the following:

  • 25% Participation / Thought Questions
  •   5% Project #1
  • 30% Project #2
  • 40% Project #3

SIU Syllabus Attachment

SIU Syllabus Attachment -Spring '21 - PDF