Skip to content
Robyn Overstreet edited this page Jan 29, 2016 · 117 revisions

Networked Media Syllabus

New York University, Interactive Telecommunications Program

Spring 2015

Thursday 6:30 - 9pm, Jan. 29 - Mar. 12 (7 weeks)

Instructor: Robyn Overstreet, robynover at gmail

Office Hours: Tuesdays 12:30 - 2:30pm. Sign up for appointment slots: https://www.google.com/calendar/selfsched?sstoken=UUZlS25Jb1FWMUQzfGRlZmF1bHR8Mzc0YTU1MmZkM2EwNzBiNjNiYjM3YmU5NGZjNDk3NGQ or email me if you'd like 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
  • Building simple servers: Introducing client-side Javascript with Node and Servi

Details: Week 1 Notes

Assignment

This week's assignment involves a lot of piecemeal set-up tasks. Please see Week 1 Notes, where they are described in detail.

Week 2: The front end

  • HTML and CSS
  • Using Node to serve static HTML, CSS, and images

Details: Week 2 Notes

Assignment

  1. Technical Reading/Tutorials

  2. Read Intro to HTML and Intro to CSS on this wiki.

  3. Access the Lynda.com training courses in HTML and CSS via the NYU Library. Based on your existing knowledge of HTML & CSS, you can decide which sections to follow. You don't have to go through the entire courses, but use them to orient yourself as needed. Log-in with your NYU netid through http://www.nyu.edu/lynda and it will take you to lynda.com. See the following courses:

  4. If the lynda courses don't suit you, there are many other tutorials on the web available. For a general reference, see HTML Documentation at Mozilla Developers Network, as well as their CSS Reference.

  5. Reading. Write a short response on your blog to As We May Think, Vannevar Bush, 1945

  6. Production. Build a 1 - 2 page (min) website using HTML and CSS and host it on your Digital Ocean account using Node and Servi.

    Because we don't delve deeply into HTML and CSS in this class, take the opportunity to experiment with simplicity. Use the constraints of a limited technical vocabulary to create something unusual, unexpected, or contemplative. Your site can be as abstract and experimental as you like; you are also welcome to create a more standard "normal" site. The only technical requirements is that it must contain at least one link, at least one image, and at least one CSS selector.

Week 3: Client-side Javascript

  • Manipulating elements on a page (the DOM)
  • Event Listeners

Details: Week 3 Notes

Assignment

Create an interactive HTML/CSS page using Javascript. It should incorporate event listeners to respond to user actions, and manipulate the DOM elements in order to change the original HTML. You are free to make something practical or something conceptual. Examples: a quiz, a game, an interactive photo gallery, an ambient piece that algorithmically generates colors, then changes colors in response to mouse movement.

Week 4: The P5.js Javascript Library

  • Drawing to Canvas with P5
  • Manipulating the DOM with P5

Details: Week 4 Notes

Assignment

  1. Reading 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. Your blog post response can address Thorpe's piece, any of the Dev Art projects, and/or reflect on the concept of making art with APIs, and/or discuss your understanding of or questions about APIs in general. Include in your response at least one unique idea for an interesting art piece that utilizes an API. Think big: this doesn't have to be something you'd be able to create in the next few weeks; just something that inspires you.

  2. Production Create an animation using JavaScript and p5.js. Allow the user some ability to interact with the animation. If you like, you may take a Processing sketch you've made and convert it to run in p5.js. Optionally, you can use the p5-dom library to make your sketch interact with other elements on the page. Put your sketch online and link to it from your blog, along with a short description.

Week 5: Consuming Data with APIs

  • Web Services, APIs: AJAX and JSON

Assignment

  1. Publish some JSON data of your own by forking this gist. Delete my example data and add your own. It can be anything: a list of your favorite songs, statistics on global warming, the number of steps you took in a day. It should be in valid JSON. Use JSON Editor Online to check if your JSON is valid.
  2. 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 6: Server-side Data & Data Storage

  • GET, POST, and Forms
  • Servi database
  • Data storage options

Details: Week 6 Notes

Assignment Your final project may focus on server-side or client-side programming or both.

Please email me your (informal) project proposal by Tuesday March 10 at 12 noon. If you are not sure what direction to go with your project, I am happy to help you figure out a plan, either in person or over email.

Week 7: Presentations

Assignment Document your final project in a blog post. If your project uses backend code, include that code in your post (or link to a gist or other code file).

##Resources

###p5.js

###Servi.js

###Tutorials, Books, Online Courses

###Tools

Clone this wiki locally