ITP Networked Media

Repository for ITP Comm Lab: Networked Media, Fall 2014

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 look.

• Networked media google group
• Lauren office hours
• Resident office hours
• Assignments page
• Inspiration page

##Evaluation

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".

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. It is expected that everyone in the class will create and maintain a blog for their assignments.

Attendance is mandatory. Please inform your teacher 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. This (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.

##Syllabus

###Week 1 (10/28): Intro, HTML, CSS, client-server

Intro to HTML and CSS

1. Download a code editor like TextWrangler or Sublime Text.

2. Notes: Intro to HTML and beginning CSS

Server setup

1. Sign up for Digital Ocean, you can use this referral code or the code from the Github student developer pack.

2. Download an FTP client like Cyberduck, Filezilla, Fetch - mac only, etc.

3. Download servi.

4. Tutorial: Digital Ocean setup - Follow the steps to create an account, a new droplet, and connect with Cyberduck.

5. Tutorial: Setting up a web server with Servi - Create a basic file server using these instructions. Upload your files to your Digital Ocean account via Cyberduck.

• Basic servi server example

6. Installing forever - The default behavior of Node is to kill the script when you log out of ssh or quit Terminal. That's fine for short-term use, but to keep your web site up and persistent, install forever.

Assignment 1 (DUE 11/4)

###Week 2 (11/4)

Intro to JS

• Notes: JS basics

Intro to p5.js and canvas

1. Download p5.js. The download comes with a copy of p5.js, you can also use a statically hosted version from the CDN, more info on that here.

2. Tutorial: Getting started with p5.js - Set up your files for editing and viewing.

3. Processing ~ p5.js transition - Learn to convert a sketch from Processing to p5.js.

• p5.js in-class examples
• More p5.js examples
• p5.js reference

5. (Optional) FYI: HTML5Canvas without p5.js - See how canvas drawing is done in plain JS without using p5.js.

Assignment 2 (DUE 11/11)

###Week 3 (11/11)

0. Notes: Objects and Arrays

• Array examples
• Objects examples

1. Notes: Intro to CSS and layouts - Create an external stylesheet and layout an HTML page.

• CSS examples

2. (Optional) Tutorial: p5.dom library - You can also use the p5.dom library to handle HTML manipulation and events.

• p5.dom.js reference
• p5.dom.js examples

3. (Optional) JQuery is (probably the most) popular JS Library for client-side stuff. We won't use it much in our examples, but it's work examining and thinking about.

• Quick and dirty hello world DOM manipulation with JQuery

4. Running a local server. If you are doing things like loading images, working with webcam, or interfacing with other external files or inputs, you will need to run a local server to view the HTML and JS files you are editing. Here are two methods:

• SimpleHTTPServer
• node server with servi.js - If you already have a folder with a servi project in it, you can skip to just put your HTML/JS/CSS files in the public/ folder and skip to step 5.

Assignment 3 (DUE 11/18)

###Week 4 (11/18)

1. Notes: Intro to DOM manipulation and events - Use JS to manipulate the HTML page and make it react to events (mouse, keyboard, touch, page load).

• Reference for all DOM events
• DOM manipulation with no libraries examples

2. Tutorial: p5.dom library - You can also use the p5.dom library to handle HTML manipulation and events.

• p5.dom.js reference
• p5.dom.js examples

3. JQuery is (probably the most) popular JS Library for client-side stuff. We won't use it much in our examples, but it's work examining and thinking about.

• Quick and dirty hello world DOM manipulation with JQuery

4. In addition to the ones in week4/ there are more examples here.

Assignment 4 (DUE 11/25)

###Week 5 (11/25): APIs, AJAX, JSON

1. Notes: Web services, AJAX and JSON

• p5.js AJAX examples
• jQuery AJAX examples

2. Tutorial: Instagram API how-to
3. Chrome extension for viewing JSON
4. More resources:

• What is an API? - video on Lynda.com (2m 43sec)
• Using APIs
• Sunlight Foundation example API - an overview of the info available through their API

Final Project (DUE 12/9)

###Week 6 (12/2): Server-side JS

1. Tutorial: creating a servi server
2. Notes: server-side with Servi

• Servi examples
• Servi reference
• Notes: GET and POST request

###Week 7 (12/9)

Final project presentations

##Resources

###p5.js

• p5.js reference
• p5.js forum
• p5.js on GitHub
• p5.js CDN

###Servi.js

• servi.js documentation

###JS Learning / Intro

• 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
• JavaScript: The Definitive Guide
• Eloquent JavaScript, Marijn Haverbeke
• Beginning JavaScript, Paul Wilton and Jeremy McPeak
• HTML & CSS book
• JavaScript book

###General

• http://www.nyu.edu/lynda - lots of great tutorials here. Log in with your normal nyu net-id/password for full access.
• CodeAcademy
• Flat Iron School

###Tools

• Github student developer pack - includes Digital Ocean $100 credit and more!
• Basic unix commands - We'll be using the command line regularly in this class. Nothing too fancy; just the basics. Get familiar, at the very least, with the commands ls, cd, and mkdir.
• Checking code: JSLint / JSHint
• Browser debugging: Chrome Developer Tools (tutorial) / Firebug (tutorial)
• Mobile debugging jsconsole.com
• Sharing code snippets (useful for asking questions): gist.github.com