Live Web


Instructor: Shawn Van Every
Email: Shawn.Van.Every@nyu.edu
Office Hours: Mondays from 3 to 5 and Thursdays from 1 to 2 or by appointment. Signup: https://itp.nyu.edu/inwiki/Signup/Shawn
Group/Listserv: https://groups.google.com/a/itp.nyu.edu/d/forum/liveweb-spring2016
Class Wiki: https://itp.nyu.edu/~sve204/cgi-bin/pwiki/wiki.pl?Live_Web_Spring_2016_Wiki

Description

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

Grades will be determined according to the following breakdown:

Weblog

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.

Listserv

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

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 Storytelling Project

Starting on the 3rd 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 storytelling demonstration utilizing technology from the previous class (chat, live drawing, audio, video conferencing, 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.

Books/Websites

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: January 27

Introductions What is the "live" web? (Synchronous vs. Asynchronous)
HTML5 and Client Side JavaScript: JavaScript 101 and Media Elements
Example from Class
Assignments:
  • Add your name, preferred email address, and blog URL to the class wiki
  • Signup for the Listserv
  • If you want more basic JavaScript, go through Codeacademy's JavaScript Course, Also, lynda.com's JavaScript Essential Training looks pretty good as well
  • Using HTML5's video or audio tags along with JavaScript, create an interactive self portrait. Link to it on your blog.
  • Read Living on a Stream: The Rise of Real-Time Video, bet against or for it on your blog. Explain why.

    • Class 2: February 3

    JavaScript 102: Becoming Live AJAX, and WebSockets
    Serverside JavaScript: Node.js
    The foundation: Chat
    Chat Example from Class 3
    Assignments:
  • Get up and running with Node.js on Digital Ocean and the example Socket.io Chat Application. Try to extend it a bit, make it better, more fun.
  • Find a live or synchronous site or platform online. Try it out. Describe it on your blog. How is it used? What do you find interesting about it?

    • Class 3: February 10

    The Canvas
    Transmitting Other Data Types: Collaborative Drawing, Mouse Events, Other data: Notes
    JavaScript 103: Objects and JSON
    Canvas Example from Class 3
    Assignments:
  • Improve on the chat or canvas drawing examples. What else could be shared this way? Could documents be collaborative edited?
  • Email me your NetID and Digital Ocean Server IP and I'll setup YOURNETID.itp.io to point to your server. We'll need this done for next class!

    • Class 4: February 17

    The Live AV Web: HTML5 Audio and Video with WebRTC and HTTPS
    Example from Class
    Assignments:
  • Enhance one of your last 2 assignments with the ability collaboratively draw and/or to share camera images.

    • Class 5: February 24

    The AV Web Part 2: Involving Everyone: Multiuser Audio/Video
    Notes
    Example from class
    Running your own Peer JS Server
    Assignments:
  • Get up and running with Live Audio/Video using Peer JS and WebRTC
  • Come up with an idea for a midterm project, blog about it, prepare to discuss in class.
  • Have a listen to this interview with Jaron Lanier

    • Class 6: March 2

    Midterm Project Ideas Manipulating Video and Saving Files on Node.js: Notes | Simple Server Side Databases and Chat + Database Example
    Web Audio API: Notes | Push to talk example
    Assignment
  • Midterm Project


    • Class 7: March 9

    Midterms Due

    SPRING BREAK

    Class 8: March 23

    WebRTC Data Channels: Notes
    MediaRecorder: Notes
    Assignments:
  • Recreate an earlier project using WebRTC Data Channels or build a new simple peer to peer data sharing project.

    • Class 9: March 30

    Streaming Kinect Data: Sockets and DataChannel
    Assignments:
  • Make sure your website is up to date with your work from this semester.
  • Start thinking about final project ideas.

    • Class 10: April 6

    Going Beyond: Mobile and Live Data from other sources (Web Services) Notes
    Going Beyond: Live Data from the physical world (Arduino) Example
    Assignments:
  • Create a simple project which involves using data from mobile device sensors or is developed for "mobile first" and uses live audio/video/data OR a simple project which uses an Arduino with a simple sensor to display data in a browser.
  • Prepare a final project proposal; in a blog post include a short description of the idea, a bit of background (why you want to make it), include any references, and start thinking about how you will develop it.

    • Class 11: April 13

    Final Project Proposals

    Class 12: April 20

    CultureHub Field Trip

    Class 13: April 27

    Guest: Adi Sideman from YouNow.com
    Assignments:
  • Sign up for a presentation slot

    • Class 14: May 4

    Final Project Presentations - Expect Guests