(Created page with "== MIT IAP, January 10-14, 2011 == * Name of the class: IAP HTML5 Game Programming Course and Competition * Coursework Component: 5 sessions, 2 hours each (total instruction ti...")
 
No edit summary
 
(41 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== MIT IAP, January 10-14, 2011 ==
= Mozilla Community Workshops =
[[Community Workshops|Overview of the Community Workshops]]


=<b>MIT IAP, January 10-14, 2011</b>=


==Overview==
* Name of the class: IAP HTML5 Game Programming Course and Competition
* Name of the class: IAP HTML5 Game Programming Course and Competition
* Coursework Component: 5 sessions, 2 hours each (total instruction time 10 hours)
* Coursework Component: 5 sessions, 2 hours each (total instruction time 10 hours)
*Schedule, everyday 11.30-1.30pm EST
*Schedule, everyday 11.30-1.30pm EST
*Room is 32-141 (http://whereis.mit.edu/). Brad/BZ -- where is that?
*Room is 32-141 (32 Vassar St, room #141 (first floor) (http://whereis.mit.edu/)
**<b>January 10, 2011</b>
*Onsite support:
***Lecturer: Dave Herman
**mitcho (Michael Erlewine), mitcho@mit.edu
***Contact info:
**office: 32-D866, Mondays during IAP or by appointment
****Email: dherman@mozilla.com
*Online support:
****IRC: dherman -- available on irc.mozilla.org at #jslang and #jsapi
**[http://irc.mozilla.org/ IRC] #mitiap2011
****Twitter: @littlecalculist
**Feel free to email anyone from the group of the lecturers in case you have any specific question related to the course
***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)
**Julie Deroche: jgoulie(IRC) or julie@mozilla.com
***Resources:
*Here's a list of some [http://en.wikipedia.org/wiki/IRC#Client_software IRC clients] depending on your OS.<br>
****https://developer.mozilla.org/en/JavaScript/Guide
*<b>Emergency line for the Stata Center</b>: 617-253-7669 || Please call on Wednesday to make sure the center is open!<br><br>
****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).<br>
**<b>January 11, 2011</b>  
***Lecturer: Boris Zbarsky
***Contact info
****Email: bzbarsky@mozilla.com
****IRC: bz -- available on irc.mozilla.org at #developers
***Topics covered: The Document Object Model (DOM), the canvas element, resource loading (graphics)<br>
**<b>January 12, 2011</b>
***Lecturers: Benoit Jacob and Andor Salga
***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
***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/


Some links I may refer to:
==Layout of the week==
WebGL point cloud renderer: http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream
===January 10, 2011===
Data visualizer library which uses WebGL: www.processingjs.org
*Lecturer: Dave Herman
WebGL library: www.c3dl.org
*<b>Lecture notes</b>: http://www.ccs.neu.edu/home/dherman/mit-iap-2011/
**<b>January 13, 2011</b>
*Contact info:
***Lecturer: Chris Heilmann
**Email: dherman@mozilla.com
***Topics covered: Audio tag and foundations of audio programming/mixing. Chris to spend time on video too?
**IRC: dherman -- available on irc.mozilla.org at #jslang and #jsapi
**<b>January 14, 2011</b>
**Twitter: @littlecalculist
***Lecturer: Andreas? Pascal Rettig?
*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)
***Topics covered: Offline web applications, local storage, debugging and performance tuning
*Resources:
*Competition
**https://developer.mozilla.org/en/JavaScript/Guide
**After the course work component, students compete in a HTML5 game programming competition. The competition will run for 4 weeks. Mozilla will host a discussion forum for students to communicate and collaborate and ask and answer questions amongst each other. 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.
**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.)
**Swag: Team (4 team members max) to come to Mountain View, spend a w/e in SF with a 1/K stipend, come to Mozilla, present their game, and have lunch with Brendan Eich.
**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).


*Things to do
===January 11, 2011===
**Make hands out for first day (julie?)
*Lecturer: Boris Zbarsky
***IRC
*Contact info
***Email students this week so we're on the same page (julie)
**Email: bzbarsky@mit.edu
***requirements for the class = browser that supports WebGL (open it to Chrome too)
**IRC: bz -- available on irc.mozilla.org at #developers
***Gaming competition prizes (to talk about it on day#1)
*Topics covered: The Document Object Model (DOM), the canvas element, resource loading (graphics)<br>
**Add content on MDN (julie to send email to Jay Patel to see how easy we can edit MDN). Make sure we document everything so we can reuse it later on.
*Resources:
**Lecturers to prepare a set of links to send out to the students
**Presentation: http://web.mit.edu/bzbarsky/www/IAP-2011-DOM-talk/intro.html
**Brad to follow up with the HTML5 gaming company. Are we going to have them present in the class?
**HTML5 (draft): http://www.whatwg.org/specs/web-apps/current-work/multipage/
**Create support for the class: MDN, IRC channel (#mitiap)
**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


*Further info
===January 12, 2011===
Class: 321-41
*Lecturers: Benoit Jacob and Andor Salga
Email Anne Hunter
*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<br>
*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<br>
*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<br><br>
 
===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 [http://cykod.com/ 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. <br>
===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: [http://jsninja.com/ 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]] <br> [[HTML5 Demo - Team Tom]]<br> [[QRticullis - Team Viral Ecology]]

Latest revision as of 20:21, 29 November 2011

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:

January 11, 2011

January 12, 2011

January 13, 2011

January 14, 2011

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