Mozilla 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
- 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