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

Assignments

ICE

• Hello Canvas - topics:
  • get reference to canvas drawing API
  • set the fill and stroke colors
  • stroke and fill rectangles
  • fill text
  • set the current font and text alignment
  • shadows
  • lines
  • simple polygonal shapes
• Shape Viewer

Links

HTML Review

• blog.udemy.com - HTML Review

DOM Links

• MDN - API Reference
• MDN - window.alert()
• MDN - console.log()
• MDN - window
• 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
• More Canvas:
  • Methods:
    • ctx.arc()
    • ctx.strokeText()
  • State Properties:
    • ctx.globalAlpha
• Buttons Sending Data:
  • event.target
  • anonymous functions
  • Custom Data

Assignments

ICE

• - Shape Viewer (Buttons drawing rects, triangles, arcs)
• - Speed Circles - optional
• - Canvas Paint-1

Links

• HTML5 Custom Data attributes
• Canvas Cheat Sheet

Demos

• Speed Circles-1
• Speed Circles-2

Topics

• More Canvas:
  • ctx.clearRect()
  • ctx.drawImage()
  • Gradients:
    • ctx.createLinearGradient()
    • gradient.addColorStop()
• More JS:
  • element.addEventListener()
  • element.removeEventListener()
• Canvas Grapher ICE:
  • arrays and array.push
  • for loops
  • Math.sin

Assignments

• Canvas Paint-2
• Audio Visualizer

Links

Canvas Paint-2 Links

• ctx.drawImage() example
• Linear Gradient Example

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

• Canvas Visualizer ICE:
  • file reader
  • array buffers/typed arrays
  • web audio API
  • request animation frame
  • callbacks

Assignments

• ...

Links

• ...

Topics

• JS Design Patterns

Assignments

• ...

Links

• ...

Topics

• Canvas Transforms & Animations

Assignments

• ...

Links

• ...

Topics

• Canvas Wrap-up

Assignments

• ...

Links

• ...

Topics

• Midterm Written Exam

Assignments

• ...

Links

• ...

Enjoy your time off!

Topics

• Web Services:
  • Web Services
  • GET/POST
  • URI / URL Syntax
  • Query Strings
  • REST
  • XHR
  • JSON
  • JSONP
  • Ajax
  • JQuery

Assignments

• ...

Links

• ...

Topics

• Web Services Continued

Assignments

• ...

Links

• ...

Topics

• Intro to PHP
• PHP Forms

Assignments

• ...

Links

• ...

Topics

• PHP:
  • Web Services
  • JSON API
  • Simple RSS Proxy

Assignments

• ...

Links

• ...

Topics

• Storing data in the cloud with the Parse Service
• Client/Server Project

Assignments

• ...

Links

• ...

Topics

• ...

Assignments

• ...

Links

• ...

Topics

• ...

Assignments

• ...

Links

• ...

You will present your final projects during finals week: Time/Date TBA