Aug 30 & Sep 1
Topics Covered
- Introduction to Connections Lab
- Making a simple webpage
- Making wireframes
- Looking at the developer tools on the Chrome browser
- Intro to HTML and CSS
- INSTALL VS Code on your system
Resources
- Exploring the Developer Tools
- Chrome DevTools
- MDN What Are Browser Developer Tools?
- Khan Academy Tutorial - Intro to HTML & CSS
- Flexbox Froggie
Assignments
- READ The Elements of User Design Chapter 6 - The Skeleton Plane
- READ Scott Murray’s Interactive Data Visualisation for the Web “Ch.3 Technology Fundamentals - Part 1” pp. 15-34
- MAKE a simple wireframe of one of your present/past projects.
- MAKE a webpage version of the wireframe you have designed. Your assignment should include a .html file and a .css file. You could do this in a number of ways. For example, if your slide has a colored background, you could either implement the same background through CSS or you could upload an image and set that as the background for your web page.
- DOCUMENT your progress and learnings from the making of the webpage
Sep 6 & Sep 8
Topics Covered
- JS & the DOM
- Selectors, Events & Callbacks
- jQuery & the Event Object
Resources
- MDN - Javascript Basics
- MDN - A Re-Introduction to JS
- “JS for Cats” by Max Ogden
- ITP Live Web Class - JS 101 by Shawn Van Every
Assignment
- READ Scott Murray’s “Ch.3 Technology Fundamentals - Part 2” pp. 35-45
- READ Steve Krug’s “Don’t Make Me Think” Ch. 1-5
- READ MDN Manipulating Documents (No need to do the exercises, just read through it.)
- READ MDN Introduction to Events (Up to “Other Event Concepts”. You’re welcome to read on, but you can stop when you get to this part.)
- INSTALL the “Live Server” extension in VSCode. The “Auto-Save” extension is optional.
- MAKE a webpage that has at least two event-driven user interactions that are handled in a script.js file. Examples of events include mouse clicks, key presses, window scrolls and many others. A possible approach to this assignment is to create two buttons on your page that, when clicked by a user, affect what is seen and/or heard on the page. You are welcome to continue working with your page that you did for the Week 1 homework or you can create an entirely new web page. Your submission should include a .html file, a .css file and a .js file.
- DOCUMENT your progress and learnings from the making of the webpage
Sep 13 & Sep 15
Topics Covered
- What is JSON Data
- Requesting JSON Data with Fetch
- Making a Web Page with JSON Data & Fetch
- Overview of APIs & the Web
- Moving from Processing to p5
Resources
- Web APIs
- Open APIs From Space - Astronauts JSON
- How Many People Are In Space Right Now?
- WikiSearch API
Assignment
- READ Janet Murray “Inventing the Medium - Ch.2 Affordances of the Digital Medium”
- READ the Project #1 brief
- SHARE and DOCUMENT your Project #1 ideas with the class via discord. Be ready to talk about your ideas in class next week.
- MAKE an initial version of your project where data is displayed on the page either on page load or as a result of a user interaction. You are welcome to go further than this and start to incorporate p5, but you should at least have identified a data set that you intend to use and be able to properly display relevant info on the page.
- DOCUMENT your progress and learnings from the making of the your initial version of the project
Sep 20 & Sep 22
Topics Covered
- Basics of JSON to p5 with Fetch
- Introduction to Git & Github
- Working with Git on the Command Line
- Github for Collaboration
Assignment
- MAKE your Project #1 web application, and push it to your github account. Be ready to present it in class next week.
- DOCUMENT your progress and learnings from the making of the your version of the project
- DOCUMENT your git and github setup
Sep 27 & Sep 29
Topics Covered
- Using Github to Serve Pages
- Project presentations!
Resources https://nodejs.org/en/
Assignment
- DOCUMENT your Project #1 by end of the week. Your documentation should include your project process, progress, wireframes, challenges, and next steps. Make sure to link to the working application, and the github repository as well. Remember to link to code snippets as required.
- INSTALL Node on your system
Oct 4 & Oct 6
Topics Covered
- What is the server
- Introduction to NodeJS
- Making a server with NodeJS and Express
- Creating routes on an Express App
- GET requests
- Serving a static site using Express
Resources
- Chrome Experiments - Music Lab Shared Piano
- https://nodejs.org/en/
Homework for Week 7
- MAKE a Node-Express app that serves an .html page. A good exercise would be to try and serve your Project #1. You should be able to launch your app from the command line using node, open your web browser, and see your project running.
- DOCUMENT your progress and learnings from the making your first server in this class
Oct 11 & Oct 13
Topics
- POST Requests
- Storing Data in the server
- Data persistence using NeDB (Note: NeDB is not a maintained library, but works as a wonderful introduction to the topics of how a noSQL DB works. We will also look into alternatives for NeDB)
Resources
- Steps to make a “Chirp” application
Assignment
- MAKE a Node-Express app that stores/displays data using NeDB. Your homework should include the following:
- The use of fetch() on the client to make a POST request to your server to send JSON
- An app.post() route on the server to listen for a POST request and store data in a .db file
- An app.get() route to send all of the data stored in a .db file to the client
- OPTION: You can check out the steps in README.md for making your own “Chirp” app.
- READ the Project #2 Brief and come to class prepared to share at least one project idea in class
- DOCUMENT your progress and learnings from the making your assignment
Oct 25 & Oct 27
Topics Covered
- Intro to Sockets & Socket.io
- Making a Chat App with Socket.io
- Making a Drawing App with Socket.io
- Project #2 discussion
Assignment
- MAKE a simple connected application using sockets.io. (Not, a chat app, or a drawing app). You can look at making an emoji-sharing app, a game, or a music app. This would be just so that you can practice using socket.io, you will not be graded on the UI or UX of this page.
- MAKE - Start working on your Project #2
- DOCUMENT your learnings of making your own socket.io app, and start documenting your project work and progress.
Nov 1 & Nov 3
Topics Covered
- Namespaces in socket.io
- Rooms in socket.io
- Making a chat app with private rooms
- Making a Trivia app that uses namespaces
Assignment
- MAKE - Continue working on your Project #2 Idea.
- DOCUMENT your learning and progress on you project #2 application
Nov 8 & Nov 10
Topics Covered
- Using Glitch/Heroku to Serve web applications
- Project presentations!
Assignment
- DOCUMENT your Project #2 by the end of the week. Your documentation should include your project process, progress, wireframes, challenges, and next steps. Make sure to link to the working application, and the github repository as well. Remember to link to code snippets as required.
Nov 15 & Nov 17
Topics Covered
- Look at different client side libraries and look at how we can integrate them with what we have learnt so far
- Introduction to Data Viz and D3
- Three.js
- Ml5.js
- AFrame
Resources
- Client-Side Javascript Libraries
- D3
- Three
- Ml5
- Workshop with AFrame
Assignment
- READ the Final Project Brief and come to class prepared to share at least one project idea
- DOCUMENT your final project idea
- BEGIN working on your final project
- MAKE a simple page with one of the following libraries - D3, Three.js, Ml5, Aframe. Ensure that you work with a library that you have not worked with before
- DOCUMENT your progress and learnings from the making of the webpage
Nov 22 & Nov 24
Topics Covered
- Look at additional ways to stream video and data across systems and applications. Students are not required to use this in their projects, but are required to make simple applications in class using these libraries.
- Intro to Web RTC & MediaStream
- Working with SimplePeerJS
- Building a Video Chat App
- Share Final Project Idea & Plans + Feedback
Homework for Week 13
- MAKE a working prototype of your final project to play-test during class. You must be able to share your project with your classmates so that you can solicit feedback. Below are more play-testing details and expectations.
- While testing YOUR project :
- Come to class with a link that can be shared with a tester.
- Allow the tester to load the page on their computer and share their screen.
- Let the tester navigate the project on their own.
- Allow the tester to work with your project and listen to them using it
- Have a list of 5-10 questions that you would like to be answered during play-testing. You don't have to ask all of them every time, but you should have a prepared list to reference.
- While being a tester ANOTHER persons project:
- Talk out loud the entire time
- Keep speaking your thought process so that notes can be taken
- Once you are done, provide feedback - highlight points of confusion or intrigue, note anything that surprised you, ask questions, resist talking about your own project
Nov 29
Topic Covered
- Play-test Final Projects
- While testing YOUR project :
- Come to class with a link that can be shared with the class
- Have a list of 5-10 questions that you would like to be answered during playtesting
- Come in with these questions, but allow the users to work with your project and listen to them using it
- While testing ANOTHER persons project:
- Talk out loud the entire time
- Keep speaking your thought process so that notes can be taken
- Once you are done using, ask a lot of questions, provide feedback
Assignment
- MAKE and continue working on your final project
Dec 6 & Dec 8
Work on Projects in Class
Dec 12 - [Mon] – Class meets on Tuesday schedule
Final Project Presentations