Home / Teaching / New Media Production

Information and Syllabus

New Media Production -- Fall '17

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

Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: Northwest Annex, B213

Office Hours:
T  09:00am - 12:00pm
R  09:00am - 12:00pm
and by appointment

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

Download: Syllabus and Lecture Notes

Course Listings:
New Media Production - 68611 - CP 440 - 001
New Media Production - 66042 - MCMA 511 - 001

Suggested Text:

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

Pilgrim, Mark. FREE Online Version: Dive into HTML5.

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


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 21
Classes are canceled.

Aug 23
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
Development Web Server for the Class
Optional: Setup SIU website space

Code Example:
Basic HTML template
Sample Layout Template

To Be Viewed In Class:
Gotye - Somebody That I Used to Know - Old School Computer Remix, 04:04
Darth Vader Feels Blue, 1:46
Amazon Has 45,000 Robot Employees, 1:15
GNU User Lib video, 2:53
BostonDynamics: Introducing Handle, 01:36
The Great Gatsby (2013) Visual Effects Before & After Clip [HD], 3:57
Facebook A.I. Robots shut down after creating their own language, 2:38
The Future of Cyberwarfare | Origins: The Journey of Humankind, 4:48
Wisconsin Company Is The First U.S. Business To Implant Chips In It's Employees, 1:17
Sebastian Deterding: What your designs say about you, 12:24

Aug 28
Open Studio
Assignment: Compare & Contrast Exercise

Aug 30
HTML Basics, Tables & CSS Style Basics
Compare & Contrast Exercise is due.
Assignment: Project #1

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

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

Marshall Brain: How Web Servers Work
Jeff Tyson: How Internet Infrastructure Works
Kevin Kelly on the next 5,000 days of the web, 19:29

Sep 04
Labor Day - No Class Meeting

Sep 06
Open Studio
T. S. Eliot reads The Love Song of J. Alfred Prufrock

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

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

HTML5 Template
Creating a Cinemagraph in Gimp 2.8

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

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 13
Advanced Layout Using CSS
Secure File Transfer Protocol (SFTP)

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 18
Presentations / Critique of Project #1
Project One is due.

Kelly: The Technium - Better Than Free
Thought Questions

Sep 20
Free / Open Source Software (FOSS), Encryption, & Privacy

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
Eben Moglen: The alternate net we need, and how we can build it ourselves 15:12
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 87:00

Sep 25
Tactical Media, Hacktivism & Net.Art
Assignment: Project #2

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

Sep 27
CSS Layout continued
Proposal for Project #2 is due by email.

Oct 02
CSS Layout continued
HTML5 Templates

Oct 04
Open Studio

Oct 09
Fall Break - No Class Meeting

Oct 11
Open Studio

Oct 16
Midterm Exam
Sample Exam

Oct 18
Open Studio

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

Assignment: Project #3

Questions for Website Critiques

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

Info on Africa Week, 10/29-11/04

Oct 30
Visiting Artist: Preston Rescigno's Workshop (part one)
The ephemeral and ethereal are explored using the smartphone’s ability to record moving and still images and sound. Either or all mediums can be used, but the piece has to have a short life, existing for a short period. Any platform can be used, but a digital platform is preferred. (Instagram, Snapchat, website etc.)
Please bring a camera to class. (cell phone camera preferred)
1-2:50pm, Comm rm 1021


*** 5 points extra credit for attending the artist talk ***

Visiting Artist: Preston Rescigno's Artist Talk
The intersection of my working method now with how images were/are made and consumed. Examples of early/current influences along with my images from recent projects.
7pm Cinema Soundstage
Preston Rescigno - Poster
Preston Rescigno - More Information


Nov 01
Visiting Artist: Preston Rescigno's Workshop (part two)

Nov 06
PHP Server Side Scripting &Responsive Web Design
Javascript, JQuery, Templates, Usability & Search Engine Optimization (SEO)
Raspberry Pi Computers & Networking

Javascript Examples
jQuery Javascript Library

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

Nov 08
Open Studio

Nov 13
Open Studio

Nov 15
Open Studio
responsive page
responsive grid page

Nov 20
Open Studio

Nov 22-26
Thanksgiving Holiday - No Class Meeting

Nov 27
Open Studio

Nov 29
Open Studio
Responsive Youtube Video

Dec 04
Project #3 is due. - Student Presentations

Dec 06
Student Presentations of Project #3 continued.

Dec 13 - 10:15am-12:15pm
University Scheduled Final

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
Students assigned lines for Project #1
View Completed Project One (must be on the SIU network)

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 out class webserver (GrandpaJoe).

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 the class web server. 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: 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 the class web server (GrandpaJoe), a zipped file should be included in the root of your web site which will 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


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.

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.

Web Resources:

Free / Open Source Software for this Class

Software for New Media Production

Technical Skills

Marshall Brain: How Web Servers Work

Jeff Tyson: How Internet Infrastructure Works

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

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

Nielson Norman Group: Articles on Web User Experience Research

Controlling the Network & Intellectual Property

Prism Break

Youtube video: Net Neutrality

History of the World Wide Web

Open Source/Free Software Movement

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

Open Source Definition

SIU Syllabus Attachment

SIU Syllabus Attachment - Fall 2017 - PDF