Live Web
Instructor: Shawn Van Every
Email: Shawn.Van.Every@nyu.edu
Office Hours: By appointment; Signup here by clicking on an "Office Hours" slot: https://calendar.google.com/calendar/selfsched?sstoken=UURiM21GUFRTUjFLfGRlZmF1bHR8NTJhYjQ3M2JmODJhNDVjMTY3YTQ3MTMzMjA0MzI4N2Y
Mattermost: https://talk.itp.io/signup_user_complete/?id=pynkzr74cfbafmrfn8y9bmt7yr
Group/Listserv: https://groups.google.com/a/itp.nyu.edu/d/forum/liveweb-fall2016
Class Wiki: https://itp.nyu.edu/~sve204/cgi-bin/pwiki/wiki.pl?Live_Web_Fall_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 live interactive experiences for 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:
- Regular Assignments 25%
- Mid-Term Project 15%
- Participation 20%
- Presentation 15%
- Final Project 25%
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. This semester we'll also be experimenting with a Mattermost server (an open source Slack alternative).
Laptops and Mobile Devices
I think laptops and mobile devices are a valuable tool for use in the classroom; unfortunately, they can very easily be a distraction. We are going to be exploring a variety of models for live interaction online and therefore laptops and mobile devices will prove very useful not to mention for taking notes and following along with examples. We should though be courteous to one another though and when we have outside guests, during discussion or student presentations laptop and phone use should be avoided.
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 testers.
Attendance and Tardiness
Attendance is mandatory. Please inform me via email if you are going to miss a class. Habitually showing up late for class or absences will adversely affect your grade. Two lates equals one absence and two unexcused absences will lead to a failing 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 3rd class, we will have weekly group project presentations. I will divide the class up into groups and each week one or two groups will be expected to present and have the class test a project utilizing technology from the previous class. Some ideas are to reimagine chat with emoji, develop a multiplayer game, put on a live interactive game show, and so on.
Final Projects
Class will culminate final projects. It is expected that these will be both technology and concept driven.
Books/Websites
I will periodically assign readings (handouts and/or online articles). The listserve and mattermost server will provide a valuable tool for link sharing as well.
Class Schedule
Class 1: September 6
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.
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? Come to class prepared to discuss.
Class 2: September 13
JavaScript 102: Becoming Live AJAX, and WebSockets
Serverside JavaScript: Node.js
The foundation: Chat
Assignments:
Get up and running with Node.js on Digital Ocean and the example Chat Application. Try to extend it a bit, make it better, more fun.
Class 3: September 20
The Canvas
Transmitting Other Data Types: Collaborative Drawing, Mouse Events, Other data: Notes
JavaScript 103: Objects and JSON
Examples from Class
Assignments:
Improve on the canvas drawing examples. What kind of visual collaboration would you like to see? What else could be shared this way?
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: September 27
The Live AV Web: HTML5 Audio and Video with WebRTC and HTTPS
Field Trip - CultureHub to meet with Billy Clark and Jesse Ricke and to checkout LiveLab
Assignments:
Enhance one of your last 2 assignments (or create a new one) with the ability to share camera images.
Class 5: October 4
The AV Web Part 2: Involving Everyone: Multiuser Audio/Video
Notes
Running your own Peer JS Server
Assignments:
Get up and running with Live Audio/Video using Peer JS
Come up with an idea for a midterm project, blog about it, prepare to discuss in class.
Class 6: October 11
Midterm Project Ideas
Review - Extra Help - Misc Topics
Manipulating Video and Saving Files on Node.js,
Simple Server Side Databases and Chat + Database Example,
MediaRecorder
Assignments:
Midterm Project: Choose a presentation slot and link to your project site/documentation
Class 7: October 18
Midterms Due
Class 8: October 25
WebRTC Data Channels: Notes
Streaming Kinect Data: Special Guest, Lisa Jamhoury, Kinectron
Assignments:
Recreate an earlier project using WebRTC Data Channels OR build a new simple peer to peer data sharing project OR build something off of Kinectron.
Class 9: November 1
Going Beyond: Mobile and Live Data from other sources (Web Services) Notes
Going Beyond: Live Data from the physical world (Arduino) Example
Assignments:
Try using data from mobile, physical, or web sources
Start thinking about final project ideas.
Class 10: November 8
Traditional Streaming: Notes
Assignments:
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: November 15
Final Project Proposals
Special Guests, Marc Abbey and Rubin; the Teleroomba and Svrround
Class 12: November 22
Final Project Workshop, Additional Topics:
Fun with Surveillance Cameras
Guest: Sam Gregory from WITNESS
Class 13: November 29
Final Project Workshop, Additional Topics:
Desktop Apps with Electron (Node.js + Chromium) and Chrome Extensions (Special Guests!!)
Assignments:
Sign up for a presentation slot
Class 14: December 6
Final Project Presentations - Expect Guests