New Media Production -- Fall '17
Time & Location:
M 01:00pm – 02:50pm — Comm 1021
W 01:00pm – 02:50pm — Comm 1021
Professor: Robert Spahr
Office: Northwest Annex, B213
T 09:00am - 12:00pm
R 09:00am - 12:00pm
and by appointment
Course Syllabus Location: http://www.robertspahr.com/nmp/
New Media Production - 68611 - CP 440 - 001
New Media Production - 66042 - MCMA 511 - 001
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. ***
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. ###
Classes are canceled.
Introductions, The Internet, Basic Markup, HTML5
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
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
Assignment: Compare & Contrast Exercise
HTML Basics, Tables & CSS Style Basics
Compare & Contrast Exercise is due.
Assignment: Project #1
HTML Basics, Tables & Lists
CSS - Style
Vannevar Bush: As We May Think, Jul 1945
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
Labor Day - No Class Meeting
T. S. Eliot reads The Love Song of J. Alfred Prufrock
HTML5, Visual Organization, Images, Typography, & Multimedia
Typography, Images, & Multimedia
Elements of Art & Principles of Organization
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.
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)
Advanced Layout Using CSS
Secure File Transfer Protocol (SFTP)
CSS - Layout
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
The Simpsons in CSS
CSS Zen Garden
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
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
Tactical Media, Hacktivism & Net.Art
Assignment: Project #2
Tactical Media, Hacktivism, Net.Art
Mark Tribe: Introduction to New Media Art
NYTimes: How Facebook is Changing Your Internet, 09:50
NY Times: How China is Changing Your Internet, 05:57
CSS Layout continued
Proposal for Project #2 is due by email.
CSS Layout continued
Fall Break - No Class Meeting
Project #2 - Student Presentations / Critique - continued
Proposal for Project #3 is due by email.
Visiting Artist: Preston Rescigno Workshop
7pm Cinema Soundstage
More information about Preston Rescigno
PHP Server Side Scripting
Responsive Web Design
Raspberry Pi Computers & Networking
Shirky: Newspapers and Thinking the Unthinkable, March 2009
Jakob Nielsen: How Users Read on the Web, October 1997.
Thanksgiving Holiday - No Class Meeting
Project #3 is due. - Student Presentations
Student Presentations of Project #3 continued.
Dec 13 - 10:15am-12:15pm
University Scheduled Final
Project 1: Collaborative Hyper-NarrativeWe 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:
- Mark Amerika's Grammatron
- Ben Benjamin's Superbad
- Olia Lialina's My Boyfriend Came Back From the War
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
software / programming
open-source, free culture & ownership
social networks / social software
Examples of previous students work:
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.
Free / Open Source Software for this ClassSoftware for New Media Production
Controlling the Network & Intellectual Property
Open Source/Free Software Movement