User:Jgoulie

Mozilla Community Workshops

Overview of the Community Workshops

MIT IAP, January 10-14, 2011

Overview

• Name of the class: IAP HTML5 Game Programming Course and Competition
• Coursework Component: 5 sessions, 2 hours each (total instruction time 10 hours)
• Schedule, everyday 11.30-1.30pm EST
• Room is 32-141 (32 Vassar St, room #141 (first floor) (http://whereis.mit.edu/)
• Onsite support:
  • mitcho (Michael Erlewine), mitcho@mit.edu
  • office: 32-D866, Mondays during IAP or by appointment
• Online support:
  • IRC #mitiap2011
  • Feel free to email anyone from the group of the lecturers in case you have any specific question related to the course
  • Julie Deroche: jgoulie(IRC) or julie@mozilla.com
• Here's a list of some IRC clients depending on your OS.
  
• Emergency line for the Stata Center: 617-253-7669 || Please call on Wednesday to make sure the center is open!
  
  

Layout of the week

January 10, 2011

• Lecturer: Dave Herman
• Lecture notes: http://www.ccs.neu.edu/home/dherman/mit-iap-2011/
• Contact info:
  • Email: dherman@mozilla.com
  • IRC: dherman -- available on irc.mozilla.org at #jslang and #jsapi
  • Twitter: @littlecalculist
• Topics covered: Foundations of JavaScript programming in the browser. Language syntax and concepts. Browser environment, events. (object and prototype, scope and global object, closures, events and call backs, numbers, XHR)
• Resources:
  • https://developer.mozilla.org/en/JavaScript/Guide
  • https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest //documentation on XHR, which Dave will be talking a bit during his lecture (Students may or may not need it for their games, but it's a good way to learn about using callbacks for event handling without having to learn all the complications of DOM events.)
  • http://www.squarefree.com/shell/shell.html //Students can use it to test out JS commands in any browser. But the more recommended way would be to use the built-in developer tools of their browser (FF4 console or Firebug, Chrome console, Safari console).

January 11, 2011

• Lecturer: Boris Zbarsky
• Contact info
  • Email: bzbarsky@mit.edu
  • IRC: bz -- available on irc.mozilla.org at #developers
• Topics covered: The Document Object Model (DOM), the canvas element, resource loading (graphics)
  
• Resources:
  • Presentation: http://web.mit.edu/bzbarsky/www/IAP-2011-DOM-talk/intro.html
  • HTML5 (draft): http://www.whatwg.org/specs/web-apps/current-work/multipage/
  • XMLHttpRequest (close to final): http://www.w3.org/TR/XMLHttpRequest/
  • XMLHttpRequest extensions (draft): http://dev.w3.org/2006/webapi/XMLHttpRequest-2/
  • CORS (for cross-site XMLHttpRequest, draft): http://www.w3.org/TR/cors/
  • CSS 2.1 (close to final): http://www.w3.org/TR/CSS21/
  • Canvas (mix of close to final and draft): http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
  • DOM Core: http://www.w3.org/TR/DOM-Level-3-Core/core.html
  • DOM Events: http://www.w3.org/TR/DOM-Level-2-Events/events.html

January 12, 2011

• Lecturers: Benoit Jacob and Andor Salga
• Lecture notes: http://people.mozilla.org/~bjacob/iap2011/slides
• Contact info (Benoit)
  • Email: bjacob@mozilla.com
  • IRC: bjacob -- available on irc.mozilla.org at #developers #gfx #audio
• Contact info (Andor)
  • Email: andor.salga@senecac.on.ca
  • IRC: nick:asalga -- available on irc.mozilla.org on #Seneca #Processing.js and #C3DL Also avaiable on irc.freenode.net on #WebGL
  • Twitter: @asalga
  • Wordpress: http://asalga.wordpress.com
    
• Topics covered: Introduction to 3D graphics with OpenGL/WebGL. Basics of shader programming
• Notes from the lecture: https://github.com/bjacob/webgl-lessons/tree/master/iap2011
  
• Useful links
  • WebGL specification: https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html
  • WebGL tutorials: http://www.learningWebGL.com
  • http://www.doesmybrowsersupportwebgl.com/
  • http://learningwebgl.com/lessons/
• Further links
  • WebGL point cloud renderer: http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream
  • Data visualizer library which uses WebGL: www.processingjs.org
  • WebGL library: www.c3dl.org
    
    

January 13, 2011

• Lecturer: Chris Heilmann
• Topics covered: Multimedia on the web - audio and video
• Notes from the lecture:http://www.wait-till-i.com/2011/01/16/lecturing-at-mit-about-html5-video-slides-and-lots-of-notes/

January 14, 2011

• Lecturer: Pascal Rettig from Cykod
• Topics covered: Offline web applications, local storage, debugging and optimizing JS performance. Also to be discussed: server side Javascript (node.js) and Web sockets.
• Resources:
  • Offline storage - http://diveintohtml5.org/offline.html
  • Local storage - http://diveintohtml5.org/storage.html
  • JS Debugging /w Firebug - http://getfirebug.com/javascript
  • Node.js - http://nodejs.org/
  • Node Package Manager - http://npmjs.org/
  • Node Realtime Sockets Module - http://socket.io/
• Notes from the lecture: http://www.slideshare.net/cykod/javascript-everywhere
• Further notes from the class: http://www.slideshare.net/cykod/vector-graphics-on-the-web-svg-canvas-css3

Competition

Summary

After the course work component, students will compete in a HTML5 game programming competition. Mozilla will host a discussion forum for students to communicate and collaborate and ask and answer questions amongst each other (irc.mozilla.org, #mitiap2010). The goal is for students to implement an interesting HTML5 game or visual demonstration. Whether its a create re-implementation of existing games (HTML5 pong?), or a full fledge 3D game, anything goes.

Prize

The winning team (up to 4 team members max) will come to Mountain View and spend a w/e in SF. During their time at Mozila, the team will present its demo/game and spend some time with Brendan Eich. We will also offer a 1K stipend to the winning team to make sure you enjoy your time in sunny California. One last piece of swag will be a signed copy of John Resig's latest book: Secrets of the JavaScript Ninja

Criteria for the competition

• Deadline is February 20, 2011
• Teams composition: up to 4 students
• Use of existing libraries allowed, but you may not copy existing games

Games Gallery

Dots - Team Blobby
HTML5 Demo - Team Tom
QRticullis - Team Viral Ecology