Course Description
As the World Wide Web continues to grow and pervade our everyday lives, an ever-increasing amount of data and digital services are becoming 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 functional well-designed single-page web applications by end of semester. Subscribing to a process-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, Paper, Popcorn, D3 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 a basic understanding of web development, specifically exposure to HTML and CSS. Experience with Javascript is a plus.
Schedule
Overview
- PART I: Weeks 1 - 5 Client-Side Web + API Fundamentals
- PART II: Weeks 5 - 9 Client-Side Javascript Frameworks
- PART III: Weeks 9 - 12 Server-Side Web + Final Project
Week 1 (09/02 + 09/04): Introduction to the Web, APIs, & Data
No Class 09/04 - Reschedule Date TBD
Week 2 (09/09 + 09/11): Web Dev 101
Week 3 (09/16 + 09/18): Making Things Happen On The Page
Week 4 (09/23 + 09/25): Structuring Your App
Week 5 (09/30 + 10/2): Project #1 DUE + Dealing with Data
No Class 10/7 + 10/9 - Holiday
Week 6 (10/14 + 10/16): Graphs on Graphs on Graphs
Week 7 (10/21 + 10/23): Animation Buffet
Week 8 (10/28 + 10/30): Moving Pictures & Sound
Week 9 (11/4 + 11/6): Project #2 DUE + Back to the Server
Week 10 (11/11 + 11/13): The Server Plus Storage
Week 11 (11/18 + 11/20): Re-Introduce Ourselves with OAuth + Final Project Proposals
Week 12 (11/25 + 11/27): Running Wild with Git and Heroku
Week 13 (11/29 + 12/4) Final Project Workshop & User Testing
Week 14 (12/9 + 12/11): Final Project Presentations
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
Grading
20% Attendance & Participation
25% Weekly Homework Assignments + Online Journal
30% Projects #1 & #2
25% Final Project
Weekly Homework
Each week there will be a homework assignment. Homework may include reading, watching videos, doing code exercises, creating web prototypes, and completing projects. Feel free to collaborate with your classmates and work together on any assignments, but everyone must submit their own individual work.
Class time will be spent each week going over the homework assignments. Expect to be asked to show your work every week. Some classes everyone may demonstrate their work, other classes only a few students will share, but always be prepared to do so. All of your weekly work must be completed on time prior to class, uploaded to the web, and documented on your online journal (see below for details).
Online Journal
You are expected to keep some form of an online journal or web blog. For each assignment, you must:
- provide a direct hyperlink to the work
- describe the assignment
- discuss what you chose to do and why
- document any resources/research/inspiration
- explain your process
- highlight both successes and failures
The purpose of the journal is twofold. First, it is a valuable way for you to communicate that you are keeping up with the work in the class and that you are grasping the material. I read the journals to see how you are doing.
Second, the journal is a way to document your work for your own use and that of others. You must update the journal each week with the work you have done for class. You should use the journal as an opportunity to write clear, concise thoughts, questions, and analysis based on the weekly assignments. The writing is expected to be well reasoned and grammatically correct. You should link to any relevant sources, and provide context, such as images, video or audio, when appropriate. Whether this is a tumblr, a Wordpress site, a static HTML page, or even a Google doc does not matter. What does matter is that it is online and publicly accessible.
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 that leverages data from at least one public web API and incorporates the use of at least one Javascript “interaction” library, such as Paper, D3, Popcorn, etc. For both projects, you will be expected to present your site, discuss your work, and clearly articulate your process for creating it.
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 as a data source
- at least one javascript “interaction” library
- database storage
- a public web API to access stored data
Attendance & Participation
- 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.
- Showing up on time, engaging in the class discussion, and offering advice and input during class 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.
- Please turn in all assignments on time.
- 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.
Laptops
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. 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.
Communicate
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.