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.
Sign up for the Github student developer pack - includes Digital Ocean $100 credit and more.
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:
- 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.
Intro to JS
Intro to p5.js and canvas
Tutorial: Getting started with p5.js - Set up your files for editing and viewing.
Processing ~ p5.js transition - Learn to convert a sketch from Processing to p5.js.
(Optional) FYI: HTML5Canvas without p5.js - See how canvas drawing is done in plain JS without using p5.js.
Week 2 (10/29): HTML+CSS+JS, servers
Intro to HTML and CSS
Tutorial: Digital Ocean setup - Follow the steps to create an account, a new droplet, and connect with Cyberduck.
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.
Tutorial: 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.
Week 3 (11/5): Events and media
- 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).
- 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.
- Notes: Intro to CSS and layouts - Create an external stylesheet and layout an HTML page.
Week 4 (11/12): Servi, review
Week 5 (11/19): APIs, AJAX, JSON
- 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
Week 6 (12/3): Server-side JS
Week 7 (12/10)
Final project presentations
JS Learning / Intro
- Code School
- A re-introduction to JS by Mozilla
- http://www.nyu.edu/lynda - lots of great tutorials here. Log in with your normal nyu net-id/password for full access.
- Checking code: JSLint / JSHint
- 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
mkdir. Basic unix commands.
- Browser debugging: Chrome Developer Tools (tutorial) / Firebug (tutorial)
- Mobile debugging jsconsole.com
- Sharing code snippets (useful for asking questions): gist.github.com