Fridays 12:10 - 2:40pm, Oct 24 - Dec 12 (7 weeks)
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.
- main Networked Media google group - this is for questions.
- Friday section google group - this is for announcements related to our section only.
- Office Hours
- Resident office hours
- Help Sessions: Thursdays from 2:00 - 3:00 in room 15
- Assignments page
- What is "networked media"?
- Getting Started
- Github student developer pack - includes Digital Ocean $100 credit and more.
- Download a code editor like TextWrangler or Sublime Text.
- 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, andmkdir. Basic unix commands.
- Intro to HTML and CSS
- Server setup
- Shawn's notes
- Robyn's notes
- Assignment 1 (DUE 11/4)
- Intro to JS basics
- Intro to p5.js and canvas
- 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.
- Getting started with p5.js
- Processing <> p5.js transition
- Since we have servi.js up and running we can host and test our p5 sketches that way. However, another option since we are focusing this week more on client-side is to set up a local web server with python or apache.
- FYI: HTML5Canvas without p5.js
- Shawn's notes for this week
- Robyn's notes
- Assignment 2 (DUE 11/7)
- Intro to DOM manipulation and events - Use JS to manipulate the HTML page and make it react to events (mouse, keyboard, touch, page load).
- Tutorial: p5.dom library - You can also use the p5.dom library to handle HTML manipulation and events.
- 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.
- Intro to CSS and layouts. This week might be a good time to start working with external stylesheets.
- Some more notes from Shawn
- Assignment 3 (DUE 11/21)
- Review of DOM elements from last week
- Events and callbacks
- Loading local files
- Query strings
- Web services: AJAX, JSON, and APIs
- Assignment 4 (DUE 12/2)
- Server-side JavaScript: writing basic HTTP servers with Servi and Node.js
- Hello world server
- Storing data in a variable
- Serving files
- Routes
- Routes with Query String
- 'RESTian' routes
- Searching data with a route
- Basic database
- Adding to database with a route
- Searching database, forms and GET requests
- Building your own API
- more on forms
- GET vs POST
- serving up JSON
- requesting data from yourself
- Notes on GET vs. POST
- Shawn's notes
- Robyn's notes
- Project Proposals (due 12/5)
- Bonus topics
- D3 and p5
- Pixels, capture, and video
- User file selection
- Sound
- Twitter API, bots
- requires
npm Twit - server side image stuff uses node-canvas which requires:
- install homebrew
- install xquartz
brew install cairoexport PKG_CONFIG_PATH=/opt/X11/lib/pkgconfignpm install canvas- additional install info
- requires
- Socket
- Touch / mobile
- Present Wrap-up Assignment 12/12
For step-by-step tutorials, we have access to Lynda.com training courses via the NYU Library. If you're new to HTML and/or CSS, I highly recommend watching these.
Request a Lynda.com account. (It’s in the "Make an Appointment" form, but you don’t actually make an appointment. On the form, check "Instructional Video Modules". It may take a day or two to get approved.)
- 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
- Github student developer pack - includes Digital Ocean $100 credit and more!
- Checking code: JSLint / JSHint
- Browser debugging: Chrome Developer Tools (tutorial) / Firebug (tutorial)
- Mobile debugging http://jsconsole.com
- Sharing code snippets (useful for asking questions): http://gist.github.com
-
You are required to attend all class meetings and submit all weekly assignments and a final project. It is expected that everyone in the class will create and maintain a blog for their assignments.
-
Grading (pass/fail) will be based on a combination of factors:
- Attendance, participation in class discussion, and engagement in other students' projects (40%)
- Quality of weekly assignments (40%)
- Final Project (20%)
- Personal progress; how much did you advance from your initial state in this class.
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.