Introduction To Computational Media on the Web (ICM-W)

Shawn Van Every
Office Hours: Mondays, Tuesdays and Wednesdays from 4PM to 5PM or by appointment
Room 447
Fall 2009

What can a global network of interconnected computers add to art, culture, humanity? Creating web based applications, rather than just being a user of them, will provide you a deeper understanding of the possibilities available through networking and computation. The course focuses on the fundamentals of programming (variables, conditionals, iteration, functions, and objects) and touches on some more advanced topics such as user interface, text parsing, databases, and communicating through and with the physical world. PHP (Hypertext Preprocessor) and JavaScript are the primary programming vehicles for the class. The course is designed for programming novices. In particular it is geared towards those with no programming or web development experience. Those whom already have web development experience should consider taking ICM instead as it will open up a different set of tools and capabilities. Weekly assignments are required throughout the semester and the end of the semester is spent developing and executing an idea for a web based application. This course fulfills the computational media foundation requirement and should not be taken together with ICM.

Important Resources:

Syllabus (this page):
Homework Wiki:


There are probably a thousand books that cover some aspect of this course: JavaScript, PHP, programming concepts, HTML, CSS and so on. For this course, I do not have a recommendation on which might be suitable for you. I will not be assigning any particular assignments nor will I be going according to any one text. Having said that, a book can be a very valuable tool and very worthwhile. Books from O'Reilly and the "Head First" series generally come recommended.

Before purchasing, I would try the following: Browse the available books at your favorite bookseller, identifying potential winners. After making a short list, open up to a random section of the book (half way through or more) and start reading. If the text is comprehensible, looks useful and feels right, that is probably the book for you. I would also make sure I looked at customer reviews online and so forth before buying.


Office Hours:

Mondays, Tuesdays and Wednesdays from 4PM to 5PM or by appointment

Additionally, two of the residents, Kacie Kinzer and Corey Menscher have office hours available that you should take advantage of.
Kacie's Office Hours
Corey's Office Hours


20% Assignments
20% Class Participation
30% Final Project
15% Paper
15% Midterm

(75% or less is a failing grade. See Pass/Fail for more info.


Mandatory, unexcused absences will effect your final grade. If you are going to be absent, please let me know ahead of time if you can.


Excessive lateness will effect your grade. Don't be late.


Laptop use is prohibited while other students are presenting or during discussion. While I am lecturing you may use them for note taking or class related work. In other words, respect your fellow students and don't check your email.

Weekly Rundown:

Week 1 - September 8

Introductions, Syllabus, Programming in English and Intro to HTML
  • Signup for the mailing list
  • Create a series of web pages using HTML and CSS that describe/detail/explain/illustrate a portion of your summer.
    (Be sure to upload your assignment and post it to the wiki)
  • Reading:
  • As We May Think, Vannevar Bush

  • Week 2 - September 15

    Intro to JavaScript
    Basic Constructs: Loops, Conditionals, Variables and Basic Functions
    HTML Forms
    Notes (up through "while loops")
    Additional Loop Examples (don't forget to view source): Example 1, Example 2, Example 3, Example 4
  • Review the notes up to "while loops" and look over the new loop examples posted above.
  • Modify one of the loop examples to include different content inside the <div> that is being written out. You will have to pay attention to "escaping the quotes", string concatenation and how the loop is executed.
  • I would like you to work with a partner on this. I have assigned partners on the homework wiki
  • Reading:
  • Read Handout: The Graphical Revolution, Chapter 25 of CODE The Hidden Language of Computer Hardware and Software

  • Week 3 - September 22

    Modularity: Functions and Objects
  • Jazz up your website from week 1 homework with JavaScript interaction. Make it all function on one page.
  • Build something else using JavaScript and HTML. Try out modifying the elements on the page using various style attributes with changes triggered by form elements.
  • Reading:
  • Read Handout: Pattern on the Stone, W. Daniel Hillis: Chapter 9, Beyond Engineering

  • Week 4 - September 29

    Many of the same: Arrays and Iteration
  • Create an Object that moves on the screen in some manner (you will probably need setInterval). Then using an Array, create multiples of that object.
  • Extra Credit: Try creating a Tic-Tac-Toe game

  • Week 5 - October 6

    Intro to PHP
    Strings and Networking
  • Using PHP and HTML/JavaScript, create a guest book for your site. Take it to the next step, allow users to leave comments for an individual piece of content (image or text or the like).
  • Using PHP and HTML/JavaScript, create a page that pulls data from another source (RSS/XML/HTML) on the web and visualize that information in some manner.

  • Week 6 - October 13

    Hooking up with Devices: Serial
    Embedding and Controlling Media (Audio/Video)
  • (Build something in JavaScript that is controlled by or controls a physical device (taken loosely but other than the mouse or keyboard) OR Build a Video DJ System in JavaScript and/or PHP
  • Come up with a mid-term idea. I am looking for concept, background and some thoughts about how you are going to implement it. We will be going over the ideas next class.

  • Week 7 - October 20

    Review and Midterm Workshop
  • Canvas Test
  • Example Site (with separate files)

  • Week 8 - October 27

    Show Midterms
  • Paper: Write a short 2 to 3 page story about a day in your life 10 years in the future.
    Some suggestions: Citizen journalists swarm you after finding out about your new dream control software; Cyborg has become the fashion and you need some body work before you go to a party; Your video databank has been corrupted and you have a deadline in the morning.

    Week 9 - November 3

    Web Services, XML, AJAX
    Example from class
  • AJAXify an existing project (midterm, comment form, saving state)
  • Try out a webservice of your choosing for a purpose of your choosing

  • Week 10 - November 10

    Prepare your final project proposal (in the form of a website)
    It should include the following:
  • Project name or title
  • Short description
  • Materials: References such as other software, code, video, websites and so on.
  • Development plan: Pseudo code, diagram or other documents that you can start with

  • Week 11 - November 17

    Final Project Proposals

    Week 12 - November 24

    Do it again, Intro to Processing and Processing.js
    Additional Topics: File Uploads, Tagging/Rating, Cron

    Week 13 - December 1

    Final Project Workshop
    Additional Topics: Mobile, Web based Operating Systems

    Week 14 - December 8

    Let's See it! Show final projects