Creating with Web APIs
Switch branches/tags
Nothing to show
Clone or download
Latest commit 52ef3ee Nov 13, 2018

Mashups: Creating with Web APIs

(NB: always subject to change)

School: NYUAD Program: Interactive Media
Course Number: IM-UH 2110 (Formerly MDMED-AD 116)
Semester: Fall 2018
Class: Tues 2:40pm - 3:55pm & Thurs 2:40pm - 5:20pm
Room: Arts Center IM Lab (Rm.029)
IM Lab Access Form

Instructor: Craig Protzel
Office: Arts Center Rm.191
Office Hours: TBD

Course Description

As the World Wide Web continues to grow and permeate our everyday lives, an ever-increasing amount of data and digital services are accessible to us through public web APIs - Application Programming Interfaces. Common to many web sites, including YouTube, Twitter, Google Maps, Wikipedia and more, web APIs offer a means to programmatically request and re-purpose endless troves of information. But how exactly do we access these datasets and services? How can we write code to transfer, store, and display this content on our own web sites? And how might we use these available resources to design unique, creative, and compelling web experiences of our own.

This class is about creating interactive single-page web applications that leverage public data and digital services from a wide range of existing web products. The overall goal of the class will be for each student to have 3 well-designed functional single-page web applications by end of semester. Subscribing to a project-oriented approach, a majority of class time will be spent reviewing and writing code, primarily Javascript, for client-side (front-end) web development. We will use a number of Javascript libraries, including jQuery, Underscore, D3,p5, Three and more, to help build a diversity of web experiences. Where server-side (back-end) development is required, we will use the Node-Express framework. Students should have some programming experience as well as an exposure to basic client-side web development, specifically HTML and CSS. Experience with Javascript is a plus.



  • PART I: Weeks 1 - 5 (Classes 01 - 10) Client-Side Web Development + API Fundamentals
  • PART II: Weeks 6 - 9 (Classes 11 - 18) Client-Side Javascript Libraries
  • PART III: Weeks 10 - 14 (Classes 19 - 28) Server-Side Web Development

WEEK 1 (09/04 & 09/06): Introduction to the Web, APIs & Data

WEEK 2 (09/11 & 09/13): Web Dev 101

WEEK 3 (09/18 & 09/20): Making Things Happen On The Page

WEEK 4 (09/25 & 09/27): Structuring Your App

WEEK 5 (10/02 & 10/04): Dealing with Data + Project #1 DUE

WEEK 6 (10/09 & 10/11): Graphs on Graphs on Graphs with D3

WEEK 7 (10/16 & 10/18): Animation Playstation with p5 and Three

Fall Break - NO CLASSES 10/23 & 10/25

WEEK 8 (10/30 & 11/01): Extra Dimensions with Sound and ml5

WEEK 9 (11/06 & 11/08): User Ready + Project #2 DUE

WEEK 10 (11/13 & 11/15): Back To The Server

WEEK 11 (11/20 & 11/22): The Server Plus Storage

WEEK 12 (11/27 & 11/29): Realtime Data + Authentication

WEEK 13 (12/04 & 12/06): Running Wild with Git and Heroku

WEEK 14 (12/11 & 12/13): Final Project DUE + End-of-Semester Show

Learning Outcomes

  • Develop a clear understanding of client-side (front-end) web development and the roles of client-side web technologies, specifically HTML, CSS, Javascript, and public web APIs
  • Develop a basic understanding of the Javascript language as well as the ecosystem 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 for modern browsers that leverage data and services from public web APIs
  • Gain exposure to server-side (back-end) web development and data storage
  • Become empowered to produce compelling well-designed single page web experiences

Teaching Methodology

This is a production-based course that involves programming work both inside and outside of the classroom. During class, code examples will be presented, written, and reviewed. Examples will iteratively build off lessons learned in preceding classes and students will be encouraged to write code, ask questions, and engage in both creative and technical discussion. The course embraces a process-oriented philosophy believing that programming, design, and web development are best learned by doing. Thus, much of class time will be spent doing hands-on workshop-style lessons and exercises.

Course Mission: L.E.G.S.

  • Learn - skills, tools, processes, techniques, resources
  • Explore - challenges, risks, failures, adventures, dreams
  • Grow - advance, empower, progress, reflect, repeat
  • Share - describe, document, communicate, contribute, participate


10% Attendance
15% Participation
20% Homework Assignments
30% Projects #1 & #2 (15% each)
25% Final Project

Homework Assignments

Each class there will be homework assignments. Homework may include reading, writing, watching videos, doing code exercises, creating web prototypes, and completing projects. Feel free to collaborate with your classmates and work together on any assignment(s), but everyone must share/submit their own individual work.

Class time will be spent going over homework assignments. Expect to be asked to share your work every class. Some classes everyone may demonstrate their work, other classes only a few students will, but always be prepared to do so. Regardless, your work must be completed by prior to class and ready to be shared, discussed, presented, and critiqued in class

Homework will be evaluated on a 3 point scale:

  • 1: Technical - completion of the technical task
  • 1: Creative - demonstration of creative expression
  • 1: Usability - attempt to make the work usable

Projects 1 & 2

These two projects can be thought of as mini-mid terms. Both will build off preceding homework assignments thus allowing you to iteratively build towards their completion. Project 1 will involve creating a single page (client-side only) web experience that, upon user input, responds with data from at least 2 public web APIs. Project 2 will involve creating a single page (client-side only) web experience leverages data from at least one public web API (or a queryable dataset) and incorporates the use of at least one Javascript “interaction” library, such as D3, p5, Three, ml5, etc. For both projects, you will be expected to present your site, discuss your work, articulate your creative process, and document the entire project.

Final Project

Your final project will require developing a comprehensive single page web experience that includes:

  • client-side and server-side web development
  • at least one public web API (or queryable data set) as a data source
  • at least one javascript “interaction” library
  • database storage
  • public web API routes to serve and share your stored data
  • documentation for both the project and the open web API


Required Text

  • Croll, Angus, "If Hemingway Wrote Javascript" (No Starch Press, 2015)

Supplemental Texts (These readings will either be distributed or available at the library)

  • Fuller, Matthew "Software Studies - A Lexicon" (MIT Press, 2008)
  • Harrison, Nate & Navas, Eduardo, "Mashup" Essay from "Keywords in Remix Studies"
  • Krug, Steve, "Don't Make Me Think" (New Riders, 2000)
  • Lanier, Jaron, "Who Owns the Future" (Simon & Shuster, 2013)
  • Murray, Janet H, "Inventing the Medium" (MIT Press, 2012)


  • Attendance is mandatory. Every class builds off the previous one so it is vital to be present for every lesson. Unexcused absences or habitual lateness will negatively impact your final grade for the class. If you are going to be late or absent, please email me in advance. If you have an emergency, please let me know as soon as you can.
  • If you are more than 20 minutes late to class with no excuse, it will count as an unexcused absence.
  • Two unexcused absences will result in a decrease in your overall final grade (i.e. B+ to B). Three will result in an entire letter grade drop (i.e. from A to B). Four will result in two letter grade drops (i.e. from A to C). More than four unexcused absences will result in an F.
  • Show up on time, we have a lot of material to cover and we'll need all of the class time.


  • Engaging in the class discussion, offering feedback to peers, and "being present" is a major part of your grade. Participating in class is helpful for me to get to know you as an individual and keep track of your progress, but most importantly, it provides you and your classmates the opportunity to share failures, successes, and insights on the work you are doing.
  • You are expected to show work in class. This includes a working web site, a kind-of working web site, a non-working web site, a failed web site, a web site that works but not the way you expected it to work, and so on. Basically, don’t be afraid to volunteer to show what you did do or failed to do. Explaining your work to other people is a great way to better understand the material and answer questions for yourself. Plus, showing work that did not function as expected is not a sign of failure, it is an opportunity to learn.
  • Ask questions. If you do not ask questions, I can only assume you understand the material completely.
  • Respect the "Laptops" and "Mobiel Phones" policy described below.


Laptop use will be expected in class, but should be focused on class-specific material, applications, and research. Whenever classmates are presenting please keep your laptop closed unless directed otherwise. The quality of the class depends in large part on your attention and active participation, so please respect your fellow classmates and close your lid.

Mobile Phones

Please put them on vibrate or turn them off before you come to class. If you have an emergency that requires you to answer your phone during class, please let me know me ahead of time or quietly step out of class to take the call. Otherwise, please refrain from using your mobile phone during class for emailing, messaging, or any other non-class work.


If you have any questions, would like extra help, or need further instruction, please reach out to me. You can communicate with me via e-mail, sign up for ofice hours, speak with me before class, after class or during break, but please let me know if you have any concerns pertaining to the course.

Academic Integrity

As set forth in NYU Abu Dhabi's Academic Integrity Policy, the relationship between students and faculty at NYU Abu Dhabi is defined by a shared commitment to academic excellence and is grounded in an expectation of fairness, honesty, and respect, which are essential to maintaining the integrity of the community. Every student who enrolls and everyone who accepts an appointment as a member of the faculty or staff at NYU Abu Dhabi agrees to abide by the expectation of academic honesty.

The full policies and procedures relating to Academic Integrity may be found on the NYUAD Student Portal: