Home / Teaching / New Media Production

Information and Syllabus

New Media Production -- Fall '15


Time & Location:
M  9:00–10:50 pm — Comm Studio A
W  9:00–10:50 pm — Comm 1021

Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: MCMA 1121E

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

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

Course Listings:
New Media Production - 66890 - CP 440 - 001
New Media Production - 69041 - MCMA 511 - 001

Required Text:

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

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

Assange, Julian & Applebaum, Jacob & Muller-Maguhn, Andy. Cypherpunks: Freedom and the Future of the Internet, The Times Group Books

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 24
Introductions, The Internet, Basic Markup, HTML5

Lecture Notes:
Speedviewer's Guide to New Media
Internet - Basic HTML

Resources:
Free/Open Source Software for New Media Production
Setup SIU website space

Code Example:
Basic HTML template
Sample Layout Template

To Be Viewed In Class:
Darth Vader Feels Blue, 1:46
Meet Amazon's robot army, 1:38
GNU User Lib video, 2:53
BigDog Overview (Updated March 2010), 03:35
The Great Gatsby (2013) Visual Effects Before & After Clip [HD], 3:57
USAF MQ-1 Predator Drone Engage Insurgents & Insurgent Vehicle. Afghanistan, 3:05
PressTV News: US drone strike kills 5 in Pakistan's tribal region, 3:25
Casey Neistat: Snapchat Murders Facebook, 5:46
Sebastian Deterding: What your designs say about you, 12:24


Aug 26
Lab
Assignment:
Compare & Contrast Exercise


Aug 31
HTML Basics, Tables & CSS Style Basics
Compare & Contrast Exercise is due.

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

Reading:
Castro: HTML & CSS - Chapters 1-4, 6
Dive Into HTML5: How Did We Get Here?
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
Kevin Kelly on the next 5,000 days of the web, 19:29

Resources:
Marshall Brain: How Web Servers Work
Jeff Tyson: How Internet Infrastructure Works


Sep 02
Lab


Sep 07
Labor Day - No Class Meeting


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

Resources:
Gif.tv
HTML5 Template
http://www.modernizr.com/
easy-html5-template
designing-a-html-5-layout-from-scratch
Creating a Cinemagraph in Gimp 2.8

Reading:
Castro: HTML & CSS - Chapters 5, 17
Dive Into HTML5: What Does It All Mean?
Dive Into HTML5: Video On The Web


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 14
Advanced Layout Using CSS

Code Examples:
CSS Layout - Position Absolute
CSS Layout - Position Relative
CSS Layout - Position Float Left
CSS rollover image example
CSS navigation bar

Reading:
Castro: HTML & CSS - Chapters 11, 14
Rebecca Solnit: Who will stop Google?, Jun 25, 2013
Thought Questions

Resources:
The Simpsons in CSS
CSS Zen Garden


Sep 16
Presentations / Critique of Project #1
Project One is due.

Reading:
Kelly: The Technium - Better Than Free
Thought Questions

To Be Viewed In Class:
Blaise Aguera y Arcas demos Photosynth, 07:33
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002, 31:40
Free software, free society: Richard Stallman at TEDxGeneva 2014, 13:39


Sep 21
Tactical Media, Hacktivism & Net.Art

Reading:
Mark Tribe: Introduction to New Media Art
Thought Questions

To Be Viewed In Class:
Eli Pariser: Beware online "filter bubbles" 09:05


Sep 23
Lab


Sep 28
Free / Open Source Software (FOSS), Validators & Browser Testing
Proposal for Project #2 is due by email.

Reading:
Dive Into HTML5: Detecting HTML5 Features
Richard Stallman: The GNU Manifesto, March 1985
Lawrence Lessig: The Internet Under Siege, November 1, 2001
Thought Questions

To Be Viewed In Class:
ESR cathedral and the bazaar 1:06
Free software, free society: Richard Stallman at TEDxGeneva 2014 13:39
Marcin Jakubowski: Open-sourced blueprints for civilization 04:11
Everything is a Remix Part 1 07:18

Suggested Viewing:
RiP! A Remix Manifesto 87:00
Everything is a Remix Part 2 09:48
Everything is a Remix Part 3 11:17

Sep 30
Lab


Oct 05
Responsive Web Design

Reading:
Castro: HTML & CSS - Chapters 12


Oct 07
Midterm Exam
Sample Exam


Oct 12
Fall Break - No Class Meeting


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

Resources:
Questions for Website Critiques


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


Oct 21
Javascript, Templates, Usability & Search Engine Optimization (SEO)
Reading:
Castro: HTML & CSS - Chapters 19

Resources:
Javascript Examples
http://script.aculo.us/
Favicon Information

Reading:
Castro: HTML & CSS - Chapters 19
Shirky: Newspapers and Thinking the Unthinkable, March 2009
Jakob Nielsen: How Users Read on the Web, October 1997.
Thought Questions


Oct 26
Introduction to jQuery - Javascript Library
jQuery Javascript Library
16 Examples of jQuery Image Galleries
Examples of Slide Out Boxes with jQuery and CSS3


Oct 28
Lab


Nov 02
Forms, CGI, Client vs. Server

Resources:
Sample Basic Form
Sample HTML5 Form

Reading:
Castro: HTML & CSS - Chapters 16, 20

To Be Viewed In Class:
Tim Berners-Lee on the next Web 16:20


Nov 04
Lab


Nov 09
Current Trends, Social Media, Web 2.0 & Privacy

Reading:
Assange: Cypherpunks: Freedom and the Future of the Internet
Thought Questions


Nov 11
Veterens Day - No Class Meeting


Nov 16
Raspberry Pi Networking


Nov 18
Lab


Nov 23
Lab


Nov 25-29
Thanksgiving Holiday


Nov 30
TBD


Dec 02
Lab


Dec 07
Project #3 - Student Presentations / Critique
Project #3 due

Resources:
Questions for Website Critiques


Dec 09
Project #3 - Student Presentations / Critique - continued
Project #3 due


Dec 18 - 08:00-10:00AM
University Scheduled Final
Project #3 - Student Presentations / Critique - continued




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
Undergraduate students assigned lines for Project #1
Graduate 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.

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

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

Please note graduate students page naming convention vary slightly. To be discussed in class.

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 an online web server (mypage.siu.edu, or your own hosted web site), as well as copied to a USB flash drive.

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 copied to a USB flash drive. 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
installation
open-source, free culture & ownership
search engines
tactical media
non-linear media
databases
social networks / social software
surveillance
video games
artificial intelligence


Examples of previous students work:
Video Art
Locative Art
Typeface Designers
Internet Collaborations

Project 3: Personal Portfolio
(or an alternative individual project, such as Net.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 copied to a USB flash drive. 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
Nichole Nicholson: Net.Art


Evaluation:

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.


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



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.

Students With a Disability:

Instructors and students in the class will work together as a team to assist students with a disability safely out of the building. Students with a disability 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. 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. 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:

If it is safe to leave, move to a safe area far from the building away from where the shooter is located.  If anyone has any information about the shooter, please contact the police after they have gone someplace safe.  

If it is not safe to leave, go into a room, lock the door and turn out the lights. Everyone should spread out and not huddle together as a group. Don't stand in front of the door or in line of fire with the door. Students' chair and desks should be piled in front of the glass and door as a barricade and the teacher's desk, podium and anything movable can be pushed against the door. This is intended to slow down any attempts to enter the classroom. If it looks like the shooter is persistent and able to enter, make a lot of noise and have the students use everything in their backpacks to throw at the shooter to distract him.

Silence all cell phones after one person in the room calls the police and informs them of their location and how many people are in the room. 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 people are hiding in.   For this 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 crouch near an interior wall or corner and cover your head 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 Classes are offered to female students faculty and staff by the Department of SIU Public Safety. For more information, contact Officer Mary Stark marys@dps.siu.edu.

SIU Syllabus Attachment

SIU Syllabus Attachement Fall 2015