-
Notifications
You must be signed in to change notification settings - Fork 18
Home
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 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”.
It is expected that everyone in the class will create and maintain a blog for their assignments.
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 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.
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 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.
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.
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.
- 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.
- HTML and CSS
- Using Node to serve static HTML, CSS, and images
Details: Week 2 Notes
Assignment
-
Technical Reading/Tutorials
-
Read Intro to HTML and Intro to CSS on this wiki.
-
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:
-
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.
-
Reading. Write a short response on your blog to As We May Think, Vannevar Bush, 1945
-
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.
- 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.
- Drawing to Canvas with P5
- Manipulating the DOM with P5
Details: Week 4 Notes
Assignment
-
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.
-
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.
- Web Services, APIs: AJAX and JSON
Assignment
- 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.
- 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.
- 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.
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
- Lynda.com Video courses in HTML, CSS, Javascript -- for access, log in through NYU at http://www.nyu.edu/lynda
- CodeAcademy: JavaScript
- How to learn JavaScript properly
- JavaScript the right way
- Code School
- JavaScript garden
- A re-introduction to JS by Mozilla
- JavaScript 101 from JQuery
- book JavaScript: The Definitive Guide
- book HTML and CSS Visual Quickstart Guide, Elizabeth Castro
- e-book Eloquent JavaScript, Marijn Haverbeke
- book Beginning JavaScript, Paul Wilton and Jeremy McPeak
###Tools
- Github student developer pack - includes Digital Ocean $100 credit and more!
- Checking code: JSLint / JSHint
- Browser debugging: Chrome Developer Tools (tutorial) / Firebug (tutorial)
- Sharing code snippets (useful for asking questions): gist.github.com
- Running Javascript snippets in browser: http://jsfiddle.net/