Rich Media Web App Dev

Topics

• Review of Basic Web App Structure:
  • HTML/CSS
  • JS
  • Detecting page load
  • Selecting HTML elements on the page
  • Event handlers
• JS Review:
  • Did the page load?
    • window.onload - Window Event Handlers
  • Selecting elements on the page:
    • Properties and methods of a DOM element - Element
    • document.querySelector()
    • document.querySelectorAll()
    • document.getElementsByTagName()
    • document.getElementById()
  • Handling Events:
    • element.onclick
  • "Caveman" Debugging:
    • console.log()
• Intro Canvas:
  • Methods:
    • canvas.getContext('2d')
    • ctx.fillRect(x,y,w,h)
    • ctx.beginPath()
    • ctx.closePath()
    • ctx.moveTo(x,y)
    • ctx.lineTo(x,y)
    • ctx.stroke()
    • ctx.fill()
    • ctx.fillText("text")
    • ctx.measureText("text")
  • Canvas State attributes (Canvas Spec)
    • ctx.fillStyle
    • ctx.strokeStyle
    • ctx.lineWidth
    • ctx.shadowBlur
    • ctx.shadowColor
    • ctx.shadowOffsetX
    • ctx.shadowOffsetY
    • ctx.font
    • ctx.textAlign
    • ctx.textBaseline

Links

HTML and JavaScript Review

We assume you learned basic HTML/CSS and JavaScript in your previous web courses. If you feel you need some review, check out these resources:

• IGME-230 :: Spring 2018
• Web App Tutorial Series (Chapters 1-5)
• IGME-110 Web-Review
• If necessary, review the content in Lynda.com HTML Essential Training, Lessons 1-7

DOM Links

• MDN - API Reference
• MDN - window.alert()
• MDN - console.log()
• MDN - window
• MDN - let
• MDN - var
• MDN - Element
• MDN - HTMLElement
• MDN - Global Event Handlers
• MDN - document.querySelector()

Canvas Reference

• w3.org - Canvas API
• Safari HTML5 Canvas Guide - Apple Inc.
• HTML Canvas Deep Dive

Topics

• JavaScript Debugger
• Javascript Objects
• More Canvas:
  • Methods:
    • ctx.arc()
    • ctx.strokeText()
  • State Properties:
    • ctx.globalAlpha
• Buttons Sending Data:
  • event.target
  • anonymous functions
  • Custom Data

Links

• HTML5 Custom Data attributes
• Canvas Cheat Sheet
• JS Object Class
• Working with Objects in JS

Demos

• Speed Circles-1
• Speed Circles-2

Topics

• More Canvas:
  • ctx.clearRect()
  • ctx.drawImage()
  • Gradients:
    • ctx.createLinearGradient()
    • gradient.addColorStop()
  • Canvas Transforms & Animations
• More JS:
  • element.addEventListener()
  • element.removeEventListener()
  • Arrays
  • Hoisting
  • Closure

Links

Canvas Paint-2 Links

• ctx.drawImage() example
• Linear Gradient Example

JS

• Arrays
• Hoisting
• Closure
• Chrome Debugging

Web Audio Links

• MDN - Web Audio API
• MDN - Using Web Audio API
• w3c - Web Audio Spec
• html5rocks.com - Web Audio Intro
• Web Audio and SoundCloud Demo
• canvas deep dive - Web Audio
• developer.apple.com - using WebAudio

Topics

• JS:
  • JS Object Literals
  • Immediately Invoked Function Expressions (IIFE or "iffy")
  • Callbacks
  • Function Constructors
• Canvas Visualizer ICE:
  • file reader
  • array buffers/typed arrays
  • web audio API
  • request animation frame
  • offscreen canvas
  • global composite operation
  • pixel filters

Links

JS

• Typed Arrays
• Immediately Invoked Function Expressions (IIFE or "iffy")
• Callback (Concept)
• Callbacks in JS Explained
• Declaring & using JS Callbacks
• Demystifying Closures, Callbacks & IIFEs.
• JS Promises (Advanced)

Canvas

• window.requestAnimationFrame()
• canvas.globalCompositeOperation

Topics

• Canvas
  • getImageData() & putImageData()
  • getUserMedia()

Links

• canvas.getImageData()
• canvas.putImageData()
• canvas.getUserMedia()

Topics

• Object.seal()
• Object.freeze()
• Object.defineProperty()
• Object.keys()
• Canvas Demos

Links

• Object.seal()
• Object.freeze()
• Object.keys()
• Object.defineProperty()

Topics

• JS
  • Apply, Bind & Call
  • JS Design Patterns
  • Facade Pattern
  • PubSub Pattern
• Canvas Wrap Up
• More Canvas Demos

Links

• function.apply()
• function.bind()
• function.call()
• JS Design Patterns Book
• JS Design Patterns Book - Facade Pattern
• PubSub Pattern

Topics

• Midterm Review
• Midterm Exam

Links

Enjoy your time off!

Topics

• Web Services:
  • URI & URL Format
  • Query Strings
  • REST
  • XHR / Ajax
  • File Loading

Links

• URI Format
• Query String Format
• REST
• Ajax (Concept)
• Ajax Getting Started
• XHR

Topics

• Web Services:
  • Ajax with XML
  • Ajax JSON

Links

• XML
• JSON
• JSON Validator

Topics

• Web Services:
  • More JSON
  • JSON-P (JSON-Padded)
  • Web Services

Links

• JSON-P (JSON-Padded)
• JSON-P Demystified

Topics

• Node:
  • Node Intro
  • Simple HTTP Servers

Links

• Node.js
• Node Documentation (choose the right version)
• Web Servers
• Web Server Explanation

Topics

• HTTP & Proxies
• oAuth
• Platform as a Service (Paas using Heroku)

Links

• Proxy Server
• oAuth
• Platform as a Service (Paas)
• Heroku Description
• Heroku

Topics

• Course Wrap Up
• Final Exam Review

Links

We will meet during finals week - Tuesday 5/8 from 8:00AM-10:00AM - where you all will present your final projects.