New Media Production
Lecture: T @ 10:00am-11:50am - RM 1122
Lab Section 001: W @ 11:00am-12:50pm - RM 0009A
Lab Section 002: R @ 10:00am-11:50am - RM 1122
Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: MCMA 1121E
Office Hours:
T 9am-10am
W 9am-11am & 1pm-3pm
R 2pm-3pm
Course Syllabus Location: http://www.robertspahr.com/nmp/
Course Information:
New Media Production - CP 440 001 CRN: 66858
New Media Production - CP 440 002 CRN: 68095
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
Description:
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.
Syllabus:
Please note syllabus is subject to change with notice.
Aug 23
Introductions, The Internet, Basic Markup, XHTML
Lecture Notes - Speedviewer's Guide to New Media
Lecture Notes - Internet/XHTML
Aug 24
Lab 1
Aug 25
Lab 2
Aug 30
XHTML Basics, Tables & CSS Basics
Lecture Notes - Tables & Lists
Lecture Notes - CSS - Style
Reading:
Mark Tribe: Introduction to New Media Art
Jeff Tyson: How Internet Infrastructure Works
Thought Questions
Aug 31
Lab 1
Sep 01
Lab 2
Sep 06
Images, Typography, Wire Frames & Multimedia
Lecture Notes - Images, Typography & Multimedia
Reading:
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)
Intonarumori
Mashups:
Kutiman-Thru-you - 01 - Mother of All Funk Chords
Kutiman-Thru-you - 03 - I'm New
Alohomora
Scrumdiddlyumptious
Sep 07
Lab 1
Sep 08
Lab 2
Sep 13
Advanced Layout Using CSS
Lecture Notes - Advanced Layout Using CSS
Code Examples:
CSS Layout - Position Absolute
CSS Layout - Position Relative
CSS Layout - Position Float Left
Sep 14
Lab 1
Sep 15
Lab 2
Sep 20
Project #1 is due.
Javascript
Lecture Notes - Javascript
Javascript Examples
CSS rollover image example
CSS navigation bar
Favicon Information:
http://en.wikipedia.org/wiki/Favicon
Reading:
Vannevar Bush: As We May Think, Jul 1945
Thought Questions
To Be Viewed In Class:
Douglas Engelbart: The First Mouse, Dec 1968
Extra Video:
Douglas Engelbart : The Mother of All Demos (1/9), Dec 1968
Sep 21
Lab 1
Requesting SIUC website space
Sep 22
Lab 2
Requesting SIUC website space
Sep 27
Open Source/Free Software, Validators & Browser Testing
Lecture Notes - Open Source/Free Software, Validators & Browser Testing
Reading:
Richard Stallman: The GNU Manifesto, March 1985
Lawrence Lessig: The Internet Under Siege, November 1, 2001
Thought Questions
To be viewed and discussed in class:
Browser Wars Chart (2005)
ESR cathedral and the bazaar 1:35
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
Sep 28
Lab 1
Sep 29
Lab 2
Oct 04
Templates, Usability & Search Engines
Lecture Notes - Templates, Usability & Search Engines
Reading:
Shirky: Newspapers and Thinking the Unthinkable, March 2009
Jakob Nielsen: How Users Read on the Web, October 1997.
(No thought questions)
To be viewed and discussed in class:
What Google and Facebook Are Hiding 09:05
Web Resources:
After Words with Eli Pariser (interviewed by Clay Shirky) 01:01:14
Oct 05
Lab 1
Oct 06
Lab 2
Oct 11
FALL BREAK
Oct 12
Lab 1 - Project #2 due
Student Presentations / Critique of Project #2
Questions for Website Critiques
Oct 13
Lab 2 - Project #2 due
Student Presentations / Critique of Project #2
Questions for Website Critiques
Oct 18
Exam #1
Sample Exam #1
Oct 19
Lab 1
Introduction to jQuery - Javascript Library
jQuery Javascript Library
16 Examples of jQuery Image Galleries
Examples of Slide Out Boxes with jQuery and CSS3
Sample Gallery 01 (simple)
Sample Gallery 02 (more features)
Sample Gallery 03
Oct 20
Lab 2
Introduction to jQuery - Javascript Library
jQuery Javascript Library
16 Examples of jQuery Image Galleries
Examples of Slide Out Boxes with jQuery and CSS3
Sample Gallery 01 (simple)
Sample Gallery 02 (more features)
Sample Gallery 03
Oct 25
Current Trends, Social Media, Web 2.0
Lecture Notes - Current Trends, Social Media, Web 2.0
Reading:
Tim O'Reilly: What Is Web 2.0, September 2005.
Web Squared: Web 2.0 Five Years On, October 2009.
Marc Andreessen: Why Software Is Eating The World
Thought Questions
RSS:
RSS 2.0 Specification
Sample RSS Feed (right-click and save as, then open in a text editor)
To be viewed and discussed in class:
Tim Berners-Lee on the next Web 16:20
Oct 26
Lab 1
Oct 27
Lab 2
Nov 01
Frames, Forms, CGI, Client vs. Server
Sample Form
Lecture Notes - Frames
Lecture Notes - Forms, CGI, Client vs. Server
Reading:
Jaron Lanier: The Local-Global Flip, or, "The Lanier Effect", August 2011
Kelly: The Technium - Better Than Free, January 2008
(No thought questions)
To be viewed and discussed in class:
Tim Berners-Lee on the next Web 16:20
Nov 02
Lab 1
Nov 03
Lab 2
Nov 08
HTML5
Lecture Notes: HTML5
HTML5 Template
http://www.modernizr.com/
Reading:
Mark Pilgrim: Dive into HTML5.
Web Resources:
easy-html5-template
designing-a-html-5-layout-from-scratch
Nov 09
Lab 1
Nov 10
Lab 2
Nov 15
Review
Nov 16
Lab 1
Nov 17
Lab 2
Nov 22
WordPress, Installation and Templates
WordPress Lessons
Wire Frames and Mock-ups of Project #3 are due
Reading:
Paul Graham: Taste For Makers, February 2002
Thought Questions
Nov 23-25
Thanksgiving Holiday
Nov 29
Exam #2
Sample Exam #2
Nov 30
Lab 1
Dec 01
Lab 2
Dec 06
Guest Lecture: Derek Smith - HTML5 Forms & PHP
HTML5 Forms
HTML Forms Examples Using PHP
Dadafier
Dec 07
No Lab this week
Dec 08
No Lab this week.
Dec 15 - 12:50-2:50PM
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 - LAB 1
Assigned lines for Project #2 - LAB 2
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.
Examples
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
Requirements
You should use at least two images per page.
Be sure to use CSS styled text using an internal stylesheet.
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.)
View Project #1 - LAB 1
View Project #1 - LAB 2
Project 2: Gallery Portfolio
Explore the artbase at http://www.rhizome.org/. 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.
The second project will be uploaded to an online web server, as well as burned to a CD-ROM. Include all source materials, notes, sketches and documentation on the CD 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
databases
non-linear media
surveillance
social networks / social software
ownership
installation
tactical media
video games
search engines
artificial intelligence
Video Art
Locative Art
Internet Collaborations
Project 3: Personal Portfolio (or alternative individual project)
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. Students will be required to produce design mock-ups and wireframes for Project #3.
The final project will be uploaded to an online web server, as well as burned to a CD-ROM. Include all source materials, notes, sketches and documentation on the CD in a folder labeled "source."
Details regarding this project will be discussed in class.
Evaluation:
Your final grade will be determined by the following:
- 15% Participation
- 5% Project #1
- 25% Project #2
- 25% Project #3
- 15% Exam #1
- 15% Exam #2
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. All reading responses should be submitted at the beginning of class, typed, and no longer than one page in length.
Late reading responses will not be accepted. Late projects will not be accepted.
Web Resources:
Technical Skills
Controlling the Network &Intellectual Property
Open Source/Free Software Movement
Web 2.0 (Wiki, RSS, AJAX, Social Networking)
Art and Design Glossary
Technical Skills
Setting Type on the Web to a Baseline Grid
The Elements of Typographic Style Applied to the Web
Zen Garden - The Beauty of CSS Design
Web Page Design for Designers: Typography
Image Map for Detailed Information
useit.com: Jakob Nielsen's Website
IE8 Version Targeting causes quite a stir
Controlling the Network & Intellectual Property
Wired.com: Military and Social Networking
Kelly: The Technium - Better Than Free
All your Internets are belong to ATT & the NSA
Schoolkid chipping trial 'a success'
Comcast Actively Hinders Subscribers' File-Sharing Traffic, AP Testing Shows
Law Firm Uses Copyright Claim To Say You Can't View Its Website's HTML Source
Free speech could lead to online disconnect
MySpace Censors Anti-War Websites
US cities' Wi-Fi dreams fading fast
Web search for bomb recipes should be blocked: EU
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002
The future of HTML, Part 1: WHATWG
EU says internet could fall apart
Summary Of The World: Googlezon And The Newsmasters EPIC
Open Source/Free Software Movement
Stallman: If you want freedom don't follow Linus Torvalds
Free as in Freedom
Richard Stallman's Crusade for Free Software
Web 2.0 (Wiki, RSS, AJAX, Social Networking)
Could Twitter become the ultimate buzz tracker?
The Ethics of Web 2.0: YouTube vs. Flickr, Revver, Eyespot, blip.tv, and even Google
A personal NON server wiki using XHTML, CSS and Javascript
AJAX Web Applications
NYtimes - Web Tools Blaze Trail To The Past
Google Labs Mirror (Demo of AJAX)
Why Ajax Sucks (Most of the Time)
Video Distribution Platform Aiming to Kill TV
Art & Design Glossary
Art & Design Glossary
(HTML)
Art and Design Glossary (PDF)
Sound
John Cage: Experimental Music, Winter 1957Fontana Mix by John Cage realized by Max Neuhaus
John Cage:Prepared Piano
Steve Reich:Come Out
Steve Reich: Drumming (Part 1)
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.
Disabled Students:
Instructors and students in the class will work together as a team to assist disabled students out of the building safely. Disabled students will stay with the instructor and communicate with the instructor what is the safest way to assist them.
Tornado:
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 calls. 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.
Fire:
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 calls. 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:
When it is safe to leave, move to a safe area far from the building where the shooter is located. If you have any information about the shooter, please contact the police after you return home. If you cannot leave, go into a room, lock the door, turn out the lights, and if possible, cover the glass on the door. Silence all cell phones after you call the police and inform them of your location. 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 with you. For that 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.
Earthquake:
In the event of an earthquake you are advised to take cover quickly under heavy furniture or near an interior wall, a corner, 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 Class:
For interested female students and female faculty and staff, the SIU Public Safety Department sets up free self-defense classes. The SIU Public Safety Department will be teaching this class. They teach a free class in the fall and spring at the Rec Center. In the fall you would register at the Rec Center for the Women's Self-Defense Class or RAD (Rape Aggression Defense) as it is sometimes called. If you have questions about registering for the class, you can send an email to lavong@siu.edu. LaVon is the contact in the Dean's Office in the Communications building that will assist you to try to find the class you need.