Home

Comm Lab Networked Media Syllabus

Fall 2014

Monday 3:20 - 5:50pm, Oct. 27 - Dec. 8 (7 weeks)

Instructor: Robyn Overstreet, robynover at gmail

Office Hours: Tuesdays 12:30 - 2:30pm or by appointment. Sign up for Office Hours or email me to schedule a different time.

Google Group: https://groups.google.com/a/itp.nyu.edu/forum/#!forum/networkedmedia

Jump to Weekly Schedule

The network is one of our most fundamental mediums for interactivity. It makes possible our interaction with machines, data, and, most importantly, other people. Though the base interaction it supports is simple, a client sends a request to a server, which replies; an incredible variety of systems can be and have been built on top of it.

In this course, students will utilize JavaScript as both a client and server side programming language to build creative network systems. Additionally, HTML and CSS will be used to define the structure and visual interface.

Grades

Grades will be determined according to the following breakdown:

Regular Assignments 40%
Participation and Attendance 40%
Final Project 20%
Please see ITP’s statement on Pass/Fail which states that a “Pass” is equivalent to an “A” or a “B” while anything less would be considered a “Fail”.

Blogs

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

Listserv (Google Group)

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 Google group / listserv. Use the listserv to ask questions about homework assignments and try to answer other people’s questions when you can.

Laptops and WiFi

Laptops and WiFi available are valuable tools for use in the classroom. Unfortunately, they can very easily be a distraction as well. Since this class is technical in nature and we’ll likely be trying code and looking at online resources laptops use will likely be very useful. We should though be courteous to one another and 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. These assignments are required and you should be prepared to show/talk about them in class. This is 40% of your grade.

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

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. Be cognizant of how you interact in class discussions. If you find yourself commenting more frequently than most other people in the class, step back and give others a chance to contribute (even if you have something to say). If you tend to hesitate to join discussions, challenge yourself to jump in. Check out the ITP Rules of Play for more info on the participation philosophy.

Class participation (along with attendance) is 40% of your grade.

Final Projects

Class will culminate final projects. You are expected to push your abilities to produce something that utilizes what you have learned in the class that is useful in some manner to yourself or the world. This will comprise 20% of your grade.

Weekly Schedule

Week 1: Client and Server

What is "networked media"?
Client-Server and HTTP
Introduction to HTML and CSS

Details: Week 1 Notes

Assignment

Add the URL to your blog for this class to the Class Blogs page in this wiki.
Join the Google Group: https://groups.google.com/a/itp.nyu.edu/forum/#!forum/networkedmedia
Write a short response to the reading on your blog.
- As We May Think, Vannevar Bush, 1945
Make some hypertext art. Create a basic web server with Servi, following the instructions in the notes, and publish some HTML and CSS. You can be as practical or as silly as you like; playfulness is encouraged. Make a blog post that briefly describes and links to your work.

What's hypertext art? Check out this networked art inspiration
Link to your assignment blog post(s) to on the Homework Week 1 page.

Week 2: Beginning Javascript

HTML and CSS continued
Programming in JavaScript
JavaScript Basics with p5.js

Details: Week 2 Notes -- read and follow the steps

Assignment

Read and write a short blog response to Long Live the Web, Tim Berners-Lee, 2010
Create an animation using JavaScript and p5.js. Allow the user some ability to interact with the animation. You might start with a Processing sketch you've made in ICM and convert it to run in p5.js. Put your p5 project online and link to it from your blog

Week 3: HTML meets Javascript: the DOM

Manipulating the Document Object Model with Javascript
The P5 DOM library
JavaScript Events

Details: Week 3 Notes

Assignment

Read Art and the API, by Jer Thorpe. For further context, take a look at some of the art projects that use APIs at Google's Dev Art. Write a blog post that discusses Thorpe's piece and/or one or more DevArt projects and/or other projects you know about that make use of APIs.
Create an HTML/CSS page that can be manipulated with Javascript. Make it interactive, animated, or otherwise responsive to the user using event listeners and DOM manipulation. You can create it with or without p5.js and p5.dom.js. You are welcome to incorporate other javascript libraries as well.

Week 4: Consuming Data

Web Services, APIs: AJAX and JSON

Details: Week 4 Notes

Assignment

Read The Web We Lost and Rebuilding the Web We Lost by Anil Dash. Write a brief response on your blog. (There's also a video version if you prefer)
Publish some JSON data online that your classmates can access. It can be anything: a list of classic movies, statistics on global warming, the number of steps you took in a day. It should be in valid JSON. Use http://www.jsoneditoronline.org/ to validate your JSON. Link your JSON document from your blog.
Create a page that uses JSON data from an outside source, like OpenWeatherMap, NYC Open Data, or Instagram, and manipulates DOM elements based on the data. For example, show images of snow when it's snowing outside.

Week 5: Server-side Javascript

Server Side Javascript
Writing basic HTTP servers with Servi and Node.js
HTML Forms

Details: Week 5 Notes

Assignment

Create a server in Servi to manage a simple web site.

The focus of this assignment is process over product. You will build out the site using an iterative process, starting small and adding new features to your project as you go. Instead of turning in a URL to a live server, as we've done in previous assignments, you'll turn in a link to a gist project containing 3 files.

To complete this assignment, go to the following gist and follow the instructions there: https://gist.github.com/robynitp/4b3dd24b348c32fb1423
Write a blog post that explores ideas for projects that incorporate the technologies we've been using in this class. Start by thinking big: what could you imagine building on the web, regardless of practical considerations like time and skills? Then propose a final project for this class. Discuss the process you'll follow to complete the project: what technologies will you use? What will you need to figure out how to do that you don't currently know how to do? What steps are involved in making the project work?

Week 6: Server-side Data Storage

Servi database
Query Strings, GET vs. POST
Project proposals

Assignment

Prepare a final project presentation (informal) for next week's class period.
Document your final project on your blog. Start with the idea, include some visual documentation (screenshots/video), describe how you feel about the project and where you want to go with it next. Link to the live version.