Rich Media Web App Dev

IGME-330

Topics and Outcomes

I. Course Learning Outcomes
(at the end of this course, the student will be able to ...)

  1. JavaScript and W3C DOM (most of this is now covered in IGME-230 - Web Site Design and Implementation)
    • discuss the following web standards entities: W3C, WHATWG, ECMA
    • discuss the following browser engines: Webkit, Blink, Mozilla, IE
    • explain what the W3C DOM is
    • explain what it means when we say that JS variables are "dynamically typed"
    • declare JS variables in the local or global scope.
    • write both named and anonymous functions
    • work with the following built-in JS classes: Array, Date, Function, Math, Number, Object
    • write JS that detects when a web page has completely loaded
    • write JS that is able to get a reference to one or more DOM elements on the page.
    • write event handling JS code that responds to mouse and button clicks and utilizes the JS Event object
    • write JS that can modify the text and attributes of existing HTML elements
    • write JS that can create new HTML elements, set their text and attributes, and add them to the page DOM
    • utilize each of these W3C DOM methods: getElementsByTagName(), getElementById(), querySelector(), querySelectorAll(), getAttribute(), setAttribute(), appendChild(), removeChild()
    • store application data in arrays and a JS Object literal
    • explain what "use strict"; does - see ejohn.org and developer.mozilla.org
    • explain what the this keyword represents in JS
  2. Advanced JS
    • define and discuss JS closures - see Stack Overflow and developer.mozilla.org
    • write OOP JS code utilizing function constructors
    • write JS code utilizing the module pattern
    • write JS code that utilizes timer functions such as setInterval() or requestAnimationFrame()
    • Polling Keyboard/Keyboard Events
    • Accessing Mouse Position
  3. <canvas> tag and Canvas 2D API:
    • Getting a reference to 2D context - canvasElement.getContext("2d")
    • Canvas drawing state attributes - strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign,textBaseline, globalAlpha, globalCompositeOperation
    • Drawing state stack management - save(), restore()
    • Transformation methods - scale(), rotate(), translate(), transform(), setTransform()
    • Transformation concepts - matrix, identity
    • Rectangles - clearRect(), strokeRect(),fillRect() in conjunction with applicable state attributes
    • Text - fillText(), strokeText(), measureText() in conjunction with applicable state attributes
    • Image drawing -drawImage(), createPattern()
    • Composing modes - set with globalCompositeOperation, possible values include: source-over, source-in, source-out and others
    • Gradients - createRadialGradient(), createLinearGradient()
    • Pixel Manipulation - createImageData(), getImageData(), putImageData(), canvas.toDataURL()
  4. "Read Only" Web Applications
    • utilize HTML form elements and jQuery.ajax() to load JSON-P web service data from another domain.
    • validate user input for appropriate values
    • dynamically modify the ajax query string to change the results returned by the web service.
    • write code that parses the JSON-P data returned by the web service.
    • write code that modifies the page DOM in order to display the data in a meaningful way
  5. Server-side programming PHP:
    • HTTP Protocol, status codes, headers
    • PHP Language Concepts:
      • Variables and Scope
      • Data types - int, string, float, boolean
      • Operators
      • Writing Functions
      • Indexed and associative arrays
      • require/include
      • Superglobals - $_SERVER, $_GET, $_POST
  6. Creating Read/Write Web Apps:
    • Creating a read-only XML & JSON web service with PHP
    • Utilizing the Parse service (or Azure) to read/write data to the cloud.

II. Course Outline by Topic

  • Module 1 - Canvas Weeks: Weeks 1-7
  • Module 2 - JS Single Page Web App: Weeks 8-11
  • Module 3 - PHP, data modeling, creating web services: Weeks 12-15

III. Course Outline by Exercises/Projects

  • Drawing App Exercise
  • Audio Visualizer Mini-project
  • Canvas Game ICEs (Space Shooter, Breakout)
  • Canvas Game or Interactive Experience Project
  • Web Service App Project
  • Web App with Cloud Storage Mini-project