Live Web

Instructor: Shawn Van Every
Office Hours: Wednesdays from 4 to 5 and Thursdays from 3 to 5. Signup:
Google Site:


The World Wide Web has grown up to be a great platform for asynchronous communication such as email and message boards which has extended into media posting and sharing. Recently, with the rise of broadband, more powerful computers and the prevalence of networked media devices, synchronous communications have become more viable. Streaming media, audio and video conference rooms and text based chat give us the ability to create new forms of interactive content for live participants.

In this course, we'll focus on the types of content and interaction that can be supported through web based and live interactive technologies as well as explore new concepts around participation. Specifically, we’ll look at new and emerging platforms on the web such as HTML5, WebSockets and WebRTC using JavaScript and Node.js.

Experience with web technologies are (HTML and JavaScript) are helpful but not required. ICM level programming experience is required.


Grades will be determined according to the following breakdown:


It is expected that everyone in the class will create and maintain a blog for their assignments.

Be sure to enter your name, preferred email address and the URL to your blog (you can always edit this later) on the class wiki.


This class is very participatory in nature and discussions will certainly take place outside of the classroom. Along with the blog, one of the primary vehicles for these discussions (as well as administrative issues) will be the listserv.

Laptops and WiFi

I love having WiFi available and I think it is a valuable tool for use in the classroom. Unfortunately, it can very easily be a distraction as well. We are going to be exploring a variety of models for live interaction online and therefore laptops will prove very useful. We should though be courteous to one another and when we have outside guests, during discussion or student presentations laptops use should be curtailed.

Weekly Assignments

We will have weekly assignments that are relevant to material from the previous class. Due to the nature of the assignments, it is likely that you will want to work with other students as well as participate with the projects of your fellow students as "audience" members.


Attendance is mandatory. Please inform me via email if you are going to miss a class. Habitually showing up late for class or an excessive number of absences will adversely affect your grade.

Class Participation

As if I haven't said this enough. This class will be participatory, you are expected to participate in discussions and give feedback to other students both in class and participate with their projects. This (along with attendance) is 20% of your overall grade.

Group Project

Starting on the 4th class, we will have weekly student projects. I will divide the class up into groups and each week one or two groups will give a 15 minute demonstration utilizing technology from the previous class (chat, audio streaming, video streaming and so on).

Final Projects

Class will culminate final projects. It is expected that these will be both technology and content driven. Projects such as the development of a tool or a vehicle for live interaction will be considered but should be used in combination with content elements.


I will periodically assign readings (handouts and/or online articles). I will be updating the delicious tag "liveweb" (my liveweb bookmarks) with various sites and articles. Please feel free to use this tag as well. These bookmarks should make good material for further study, papers and presentations.

Class Schedule

Class 1

Introductions What is the "live" web? (Synchronous vs. Asynchronous)
HTML5 and Client Side JavaScript: JavaScript 101, Media Elements and the Canvas
  • Email me ( your blog URL and your preferred email address.
  • Signup for the Listserv
  • Go through jQuery's JavaScript 101. If you want more, go through Codeacademy's JavaScript Course
  • Using HTML5's video or audio and canvas tags along with JavaScript, create an interactive self portrait. Link to it on your blog.
  • Read Traveling Without Seeing and respond on your blog.

  • Class 2

    Some Live History/Live Storytelling: IRC
    JavaScript 102: Becoming Live - AJAX, and WebSockets
    Serverside JavaScript: Node.js
    The foundation: Web Based Chat
    Notes (HTML version with screencast to follow)
    Sam Slover's Improved/Updated Notes
  • Get up and running with AWS/EC2, Node and the demo Chat. If you can, try to extend it a bit, make it better.
  • Tell your story via a text based synchronous medium online: IRC, Twitter, A public web chat room or IM. Write up your experiences in a blog entry. Pay particular attention to what worked and what didn't. Who was your audience? How big was it? How did you respond to them? What did you do differently than you would have done in person? How does the medium you choose to work with modify what you can and how you do?

  • Class 3

    Transmitting Other Data Types: Collaborative Drawing, Mouse Events, Other data
  • Improve on the chat or canvas drawing examples. What else could be shared this way? Could documents be collaborative edited?

  • Class 4

    The Live AV Web: HTML5 Audio and Video with WebRTC
  • Enhance one of your last 2 assignments with the ability to send images and/or camera images.

  • Class 5

    The AV Web Part 2: Involving Everyone: Multiuser Audio/Video
  • Try out audio/video chat with WebRTC/Peer.js
  • Come up with ideas to discuss in class next week related to the midterm. Post them to your blog.

  • Class 6

    Midterm Discussion
  • MIDTERM PROJECT: Work individually or in groups. We will do show and tell next week so be prepared with what the overall idea is, why you are doing it, be able to show the project in action and produce documentation on your blog.

  • Class 7

    Midterms Due

    Class 8

    More with Node and WebRTC: Audio, File System, and more

    Class 9 - 11/5

    Review: Building Karoke
    Going Beyond: Mobile and Live Data from other sources (Web Services)
  • Integrate an external data feed into a web socket server. Perhaps update an existing project with this functionality. Have the external data affect the client.

  • Class 10 - 11/12

    Guest: Ankur Oberoi from Tokbox
    Going Beyond: Live Data from the physical world (Arduino)
  • Make sure you are caught up with your homework and documentation. If you are interested in the pcomp side of things, give the Yun example a try. If you are more interested in what is possible with OpenTok, go through their Quick Start document.

  • Class 11 - 11/19

    Field Trip to LiveStream
    Additional Topics

    Class 12 - 11/26

    Final Project Proposals

    Class 13 - 12/3

    Final Project Workshop

    Class 14 - 12/10

    Final Project Presentations - Expect Guests