Skip to content
Repository for ITP Networked Media, Fall 2014
JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
imgs
week1
week2
week3
week4
week5
week6
.gitignore
README.md

README.md

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.

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

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

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.

  1. (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)

  1. Notes: Objects and Arrays
  1. Notes: Intro to CSS and layouts - Create an external stylesheet and layout an HTML page.
  1. (Optional) Tutorial: p5.dom library - You can also use the p5.dom library to handle HTML manipulation and events.
  1. (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.
  1. 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:

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).
  1. Tutorial: p5.dom library - You can also use the p5.dom library to handle HTML manipulation and events.
  1. 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.
  1. 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
  1. Tutorial: Instagram API how-to
  2. Chrome extension for viewing JSON
  3. More resources:

Final Project (DUE 12/9)

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

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

###Week 7 (12/9)

Final project presentations

##Resources

###p5.js

###Servi.js

###JS Learning / Intro

###General

###Tools

You can’t perform that action at this time.