New Media Production -- Fall '12
Time & Location:
T 12:00pm-2:50pm in Comm 1116
R 12:00pm-1:50pm in Comm 1021
Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: MCMA 1121E
Office Hours:
T 9:00am-10:00am
W 10:00am-2:00pm
R 9:00am-10:00am
Course Listings:
New Media Production - 61074 - CP 440 001
Media Arts Studio Seminar: New Media Production - 67599 - MCMA 543 005
Required Text:
Castro, Elizabeth. HTML5 & CSS3 Visual QuickStart Guide (7th Edition) . Peachpit Press
Online:
Pilgrim, Mark. Dive into HTML5.
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: HTML & XHTML 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:
Aug 21
Introductions, The Internet, Basic Markup, HTML5
Lecture Notes: Speedviewer's Guide to New Media
Lecture Notes: Internet - Basic HTML
Basic HTML template
To Be Viewed In Class:
Kevin Kelly on the next 5,000 days of the web, 19:29
Sebastian Deterding: What your designs say about you, 12:24
3D Printer replicates a wrench, 4:27
Darth Vader Feels Blue, 1:46
Aug 23
Lab
Aug 28
HTML Basics, Tables & CSS Style Basics
Lecture Notes: HTML Basics, Tables & Lists
Lecture Notes: CSS - Style
Reading:
Mark Tribe: Introduction to New Media Art
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
Web Resources:
Ten years of Internet (Infographic)
Flong - Interactive Art by Golan Levin and Collaborators
Aug 30
Lab
Sep 04
Principles of Visual Organization, Images, Typography, & Multimedia
Lecture Notes: Principles of Visual Organization, Images, Typography & Multimedia
Requesting SIUC website space
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
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
Alohomora
Scrumdiddlyumptious
Lead Breakfast ('Pulp Fiction' Remix)
Sep 06
Lab
Sep 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
Project #1 is due.
Sep 13
Lab
Sep 18
Javascript
Lecture Notes - Javascript
Javascript Examples
http://script.aculo.us/
CSS rollover image example
CSS navigation bar
Favicon Information:
http://en.wikipedia.org/wiki/Favicon
Reading:
Kelly: The Technium - Better Than Free
(No thought questions)
To Be Viewed In Class:
Douglas Engelbart: The First Mouse, Dec 1968
Blaise Aguera y Arcas demos Photosynth, 07:33
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002, 31:40
Extra videos:
Douglas Engelbart : The Mother of All Demos (1/9), Dec 1968
Theo Jansen creates new creatures
John Underkoffler points to the future of UI
Sep 20
Lab
Sep 25
Free / Open Source Software (FOSS), Validators & Browser Testing
Lecture Notes: FOSS, 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 In Class:
Browser Wars Chart (2005)
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
Sep 27
Lab
Oct 02
Templates, Usability & Search Engine Optimization (SEO)
Lecture Notes: Templates, Usability & Search Engine Optimization
Reading:
Shirky: Newspapers and Thinking the Unthinkable, March 2009
Jakob Nielsen: How Users Read on the Web, October 1997.
(No thought questions)
Web Resources:
After Words with Eli Pariser (interviewed by Clay Shirky) 01:01:14
Oct 04
Lab
Oct 09
Fall Break
Oct 11
Exam #1
Sample Exam #1
Oct 16
Introduction to Tactical Media & Hacktivism
Oct 18
Project #2 Due
Student Presentations / Critique of Project #2
Questions for Website Critiques
Oct 23
Student Presentations / Critique of Project #2 continued
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 03
Reading:
Paul Graham: Taste For Makers, February 2002
Thought Questions
Oct 25
Guest Lecture: Mobile Media
Dr. Angela Aguayo
Oct 30
Lab
Nov 01
Lab
Nov 06
Frames, Forms, CGI, Client vs. Server
Lecture Notes: Frames
Lecture Notes: Forms, CGI, Client vs. Server
HTML Forms Examples Using PHP
Sample Form
To Be Viewed In Class:
Tim Berners-Lee on the next Web 16:20
Nov 08
Lab
Nov 13
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.
Thought Questions
Nov 15
Lab
Nov 20
HTML5
Lecture Notes: HTML5
HTML5 Forms
HTML5 Template
http://www.modernizr.com/
Reading:
Pilgrim, Mark. Dive into HTML5.
Web Resources:
easy-html5-template
designing-a-html-5-layout-from-scratch
Nov 22
Thanksgiving Break
Nov 27
Exam #2
Sample Exam #2
Nov 29
Lab
Dec 04
Project #3 Due
Student Presentations / Critique of Project #3
Questions for Website Critiques
Dec 06
Student Presentations / Critique of Project #3 continued
Dec 12 Wed @ 12:50pm-02:50pm
Write a short (2 page maximum) essay describing, and critiquing your final project.
What are the strengths of your project?
What are the weaknesses of your project?
What are some of the technical challenges you were able to overcome during the time you worked on this project?
Outline a brief summary of your technical growth since the beginning of the semester. Do you see yourself continuing to code for the web? If so, briefly describe your future plans?
Email this essay in PDF, MSWord, or OpenOffice format to: rspahr@siu.edu, with the email subject: "NMP FINAL ESSAY"
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
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.)
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 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
animated gifs
software / programming
installation
open-source, free culture & ownership
search engines
tactical media
non-linear media
databases
social networks / social software
surveillance
video games
artificial intelligence
Project 3: Personal Portfolio
(or an alternative individual project, such as New Media 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 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
- 20% Project #2
- 30% 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 projects or late reading responses will not be accepted.
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
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
Web search for bomb recipes should be blocked: EU
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002
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
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.