Live Web - Spring 2022 - Syllabus

Instructor: Shawn Van Every
Email: Shawn.Van.Every@nyu.edu
Office Hours: Signup for an appointment
Location: 370 Jay St. Room 410
Zoom Room
Presentation Groups

Description

The World Wide Web is a great platform for asynchronous communication such as email and message boards and extended into media posting and sharing. With the rise of broadband, more powerful computers, always on and connected mobile devices, synchronous communications have become more viable. Streaming media, audio and video conferencing and realtime 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:

Blog

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 on this Google Doc. (Note: You must be using Google Docs with your NYU login in order to edit this document).

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

Class Schedule

Class 1:

Introductions What is the "live" web? (Synchronous vs. Asynchronous)
HTML5 and Client Side JavaScript: JavaScript 101 and Media Elements
Videos:
HTML Basics
CSS Basics
CSS Basics - Better Organization
JavaScript DOM Basics

Class Recording
Assignments:
  • Add your name, preferred email address, and blog URL to this Google Doc. (Note: You must be using Google Docs with your NYU login in order to edit this document).
  • If you want more basic JavaScript, go through lynda.com's JavaScript Essential Training
  • Using HTML5's video or audio tags along with JavaScript, create an interactive self portrait. Link to it on your blog.
  • Write a blog post detailing the last “live” media you consumed. Answer these questions: What was it? Why did you consume it “live” or in real time? How was your relationship to the media or others affected through the “live” consumption of it? What was missing in your experience?

  • Class 2:

    JavaScript 102: Becoming Live AJAX, and WebSockets
    Serverside JavaScript: Node.js
    The foundation: Chat
    Class Recording
    Forever - (Will make your life better!)
    Virtual Private Servers with Digital Ocean
    Unix Essential Training: Logging in and using the command prompt
    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.
  • Put your self-portrait up on the server as well. Link to it from a blog post so we can all look at them in class.

  • Class 3:

    Transmitting Other Data Types: Collaborative Drawing, Mouse Events, Other data: Notes
    The Canvas
    JavaScript 103: Objects and JSON
    p5.js with Sockets
    Class Recording
    Example code from class
    p5 Socket Example
    Assignments:
  • Improve on the example, send a different type of event to the server and to the clients. This could be a collaborative drawing program or a means to control other people's experience.
  • 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 so the sooner the better!

  • Class 4:

    The Live AV Web: HTML5 Audio and Video with WebRTC and HTTPS
    Code from class
    Class Recording Assignments:
  • Get up and running with HTTPS
  • Enhance one of your last 2 assignments with data persistance (store the data from users on the server so that when the page is refreshed or a new person joins, the previous content is shared.)

  • Class 5:

    The AV Web Part 2: Involving Everyone: Multiuser Audio/Video
    Notes
    Class Recording
    Assignments:
  • Get up and running with Live Audio/Video
  • Come up with an idea for a midterm project, blog about it, prepare to discuss in class.

  • Class 6:

    Midterm Project Ideas
    Review - Extra Help - Misc Topics
    Web Audio API
    Assignments:
  • Midterm Project: Choose a presentation slot and link to your project site/documentation

  • Class 7:

    Midterms Due
    Assignments:
  • Document your midterm, link to it in your blog but also make sure the documentation link is up to date.
  • Class 8:

    Guest Presentation: Aidan Nelson - three.js with Sockets and WebRTC
    Peer to Peer Data and Live Media Manipulation
    Class Recording
    Aidan’s Template for Three.js + Sockets + WebRTC
    p5 + p5LiveMedia + DataChannels + 3D: Example 1, Example 2
    Assignments:
  • Create a video chat application in 3D (with three.js or p5).
  • Try out datachannels – port one of your existing Socket based projects to work without sockets using p5livemedia.

  • Class 9:

    Recording
    Guest Presentation: Jesse Boyes from Here.fm
    Simple Server Side Databases and Chat + Database Example
    MediaRecorder
    Saving Files on Node.js
    Class Recording
    Assignments:
  • Update an earlier project or create something new that utilizes MediaRecorder and/or NeDB.

  • Class 10:

    Mobile and AI
    Mobile and Live Data from other sources (Web Services) Notes
    Class Recording
    p5 Example from Class
    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:

    Final Project Proposals
    Physical: Live Data from the physical world (Arduino) Example


    Class 12:

    Traditional Streaming + OBS

    Class 13:

    Traditional Streaming + OBS
    SFUs
    Class Recording

    Class 14:

    Final Project Presentations - Expect Guests Final Project Presentation Schedule Documentation due TBD. Update link in document.