NYU ITP Spring 2014
Class: Thursdays 6:30 - 9pm
Instructor: Craig Protzel
Email: [email protected]
Office Hours: Thursdays 10:30am - 2:30pm
Class Email List
Class Blog List
Office Hours Sign-Ups
Much data and many services are now accessible through public APIs - Application Programming Interfaces - from sites such as YouTube, Google Maps, Twitter, and Xively. But how can we access these datasets and services? How can we transfer, store, initialize, and display this data on our own pages? And how might we use the data to create unique and creative web experiences of our own?
This class is about building interactive single-page web applications that leverage public data from a range of existing web services. The overall goal of the class will be for each student to have 3 functional well-designed single-page web applications by end of semester. Much of class time will be spent reviewing and writing code, mostly Javascript, for front-end (in-browser) web development. We will use a number of frameworks, including JQuery, Underscore, PaperJs, and D3. Where backend work is required, we will use Node-Express. Students should have some programming experience (ICM) as well as a basic understanding of web development (Comm Lab Web). Experience with Javascript is a plus.
- Develop an understanding of front-end web development and the roles of client-side technologies, specifically HTML, CSS, Javascript, and public web APIs.
- Develop a basic understanding of Javascript and the world of open source (client-side) Javascript libraries
- Learn how to work with a variety of data-serving public web APIs
- Learn how to create web pages in modern browsers that leverage data from web services via public web APIs
- Gain exposure to server-side web development
- Be empowered to produce compelling single page web experiences
- Sign up for class email list - ITP Mashups Google Group
- Attend all classes, no more than 2 absences allowed
- Arrive on time to the start of class or office hour appointment
- Complete all homework exercises and assignments on time
- Post homework exercises and assignments to your blog at least one hour prior to class
- Participate in class through presentations, discussion, questions, and feedback
- Respect fellow students' work, questions, and comments
- Communicate with me if you need to miss class, would like extra help, or schedule additional office hours
25% Attendance & Class Participation
25% Homework
25% Assignments #1 & #2
25% Final Project
- PART I: Weeks 1 - 5 Client-Side Web + API Fundamentals
- PART II: Weeks 6 - 9 Client-Side Javascript Frameworks
- PART III: Weeks 10 - 14 Server-Side Web + Final Project
- ITP Mashups - Remixing the Web by Dan Aminzade
- ITP Write Once Access Anywhere by Corey Menscher
- ITP Dynamic Web Development by John Schimmel
- StoryScramble
- VimeoLabs
- Lecture Slides
- References
- Sign Up - for class email list ITP Mashups Google Group
- Add - your blog URL to the class blog list
- Read - Ch.3 of Interactive Data Viz for the Web by Scott Murray up to but not including the section on Javascript
- Download - a text editor
- Donwload - a JSON formatter extension for the browser (I use JSON Formatter in Chrome)
- Explore - ProgrammableWeb
- Find, Post, & Describe - a url that returns JSON data from an Open API
- Create & Upload - a single web page that displays (some of) the data you found with some basic css styling. The upload should include a .html file and .css file. Feel free to copy and paste your data into the DOM, no need to programatically connect your page to the data
- Additional Readings
Mashup of the Day - Spell with Flickr
- Setting up your page(s)
- Adding Elements
- Basic Styling
- Pair Programming Exercise
- Review
- Using the Browser Console
- Playing with Data Types
- The Window and the DOM
- Google Maps API Example
- Create a single web page experience that, upon user input, responds with data from at least 2 web apis. One possible approach to this assignment would be to design the experience around answering a question for the user. An example of this is doineedanumbrella.com. An example of a mashup that pulls together data from two different apis is the InstaTimes example provided here in the class repo. Ulitmately, it's up to you what you want to build. But (1) a user needs to "trigger" an event, (2) data needs to be requested via AJAX from two APIs, (3) and the page should update appropriately. Your completed assignment should include a .html file, a .css file, and a .js file.
- Read - Javascript section of Ch.3 - Interactive Data Viz for the Web by Scott Murray up to but not including the section on SVGs
- Read - Javascript 101 up through the section on Functions
- Complete & Upload - the 3 code exercises at the end of Eloquent JS 2nd Edition Preview Ch.2 - Looping A Triangle, FizzBuzz, & ChessBoard
- Think & Post - idea(s) for Assignment #1
- Additional Readings
- References
- Loops
- Functions
- Selectors
- Events
- AJAX with jQuery
- WikiSearch API
- WikiSearch Example 1
- WikiSearch Example 2
- WikiSearch Example 4
- Multiple API calls
- Review - jQuery - Selecting Elements
- Review - jQuery - Manipulating Elements
- Review - JQuery - Introducing Events
- Watch - Lynda.com: Javascript Essential Training - Ch.13 Advanced Javascript Features - Working With Objects and Prototypes (9min)
- Get API Keys for both the NY Times API and the Instagram API
- Create & Upload - a single web page that uses AJAX to load and display data from a public web api, your work should include a .html file, a .css file, and a .js file
- Additional Readings
- Creating Our Own Objects
- Understanding the Prototype
- Local Web Server
- NY Times + Instagram API Mashup
- DUE - Assignment #1
- Watch - The Definitive Guide to Object-Oriented Javascript (27 min) (Note - we will be implementing the "Classical" pattern in class)
- Read - Getting Cozy with Underscore JS
- Read - An Undesrcore Templates Primer
- Additional Reading
- Friend Forecast - A Facebook Weather Mashup
- Process
- Development Tips
- Underscore Data Manipulation
- Underscore Templates
- Additional Examples
- Manipulating Strings
- MDN - String Methods
- Regular Expressions
- MDN - Regular Expression Guide
- Regular Expression Cheat Sheet
- Rubular & Scriptular - web-based regular expression editors
- Stack Overflow - Don't Parse HTML with RegEx
- Wotking with Arrays & Objects
- Using Underscore
- Managing Asynchronicity
- WhatsUpCongress Examples
Jeremy Scott Diamond - "Working With D3"
- D3JS
- Sunlight Labs - Congress Example Click HERE to download the example code)
- Additional Tools
- Create a single web page experience that leverages data from at least one public api and incorporates the use of at least one "interaction" library (i.e. D3, P5, Popcorn, etc.)
- Play with D3
- Look at the P5js & PaperJS libraries
- Play with an Animation Library
- Look at the Web Audio API and Video Libraries
- Web Audio API
- HTML5 Rocks: Getting Started With Web AUdio API
- CreativeJS: Web Audio API - Getting Started
APIs - Youtube & Vimeo
- DUE - Assignment #2
- References
API - Twitter
- References
- Mozilla Web Tutorials
- JS Fiddle - web-based tool to share code
- 11 Phases of a Web Developer's Career
- Wappalyzer - browser plug-in to quickly identify a site's software
- URL Encoding or 'What are those "%20" codes in URLs'?
- Favicon Generator
- Can I Use
- CSS Tricks - Set Page Background to a Full Image
- Little CSS Stuff Newcomers Get Confused ABout
- CSS Positioning 101
- "If Hemingway Wrote Javascript" by Angus Croll
- Airbnb Javascript Style Guide
- A Drip of JS - Archive
- 45 Useful JS Tips, Tricks, & Best Practices
- Mozilla - JS Guide
- Lear X in Y Minutes - Javascript
- Javascript Garden - a collection of documentation about the most quirky parts of JS
- Javascript - Function Declaration Ambiguity
- Sublime Linter
- Drag and Drop Tutorial - Native HTML5
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent