Event Workshop Games in html5
Name	Workshop Games in html5
Contact	Hfmanson
Duration	2011/11/19 - 2011/11/19
Information	Games maken in html5 * Location: TkkrLab * Open from: 14:00

Gegeven door Henri Manson in het Nederlands

We starten om 14:00 en eindigen rond 17:00

Om mee te doen vul dit formulier in.

Deze workshop is open voor iedereen, je hoeft geen lid te zijn van TkkrLab.

De workshop is gratis, een kleine donatie wordt wel gewaardeerd.

Voorkennis:

basis Javascript
basis HTML
Laptop met daarop een moderne brower (Firefox,Chrome,Opera,IE9)

Programma:

Inleiding

- Dit is meer een Cruijf dan een van Gaal workshop.

Onder andere nieuw in HTML5: SVG en Canvas

Eindelijk Javascript HTML objecten en methods opgenomen in de specificatie! Ze bestaan nog maar 10 jaar;)

HTML + JavaScript demo: dobbelstenen zie DOM tree accessors

Beschikbaarheid HTML5 op mobiele apparaten

- iPhone/iPad: Canvas + SVG
- Android: Canvas

HTML5: Conventioneel of XHTML

- Bij embedding van andere XML talen zoals SVG en MathML is XHTML vereist!
Je kunt daarom het beste altijd XHTML gebruiken.
- Demo HTML5 met geembed SVG en MathML

Javascript aanrader: Javascript: The Good Parts

- Intro van dezelfde auteur: Javascript: The World's Most Misunderstood Programming Language
- En deze YouTube presentatie, duurt 1:50 uur maar is absoluut de moeite waard!
- Het is totaal anders dan Java, gebaseerd op prototypes en niet op classes
- Elementen uit functioneel programmeren
- Functies zijn echte variabelen
- Officiele naam ECMAScript

Workshop gereedschap: w3schools TryIt editor in de revisie

- Henri's TryIt: geen advertenties, geen netwerkverkeer en illustratief ;)
- Illustreert het werken met DOM i.c.m. XML en XML namespaces
- Parseert de ingevoerde tekst als XML document. Daarvan wordt het documentElement in 1 keer wordt toegevoegd aan het resultaat.
- kan slechts 1 element bevatten. Dat element mag uiteraard kinderen hebben.

- Enkele veelgebruikte Javascript DOM instructies:

Actie	Javascript DOM instructie
Element creeren	document.createElement("div");
Element creeren in namespace	document.createElementNS("namespaceURI", "elementnaam");
Element attribuut instellen	svgElement.setAttribute("fill", "red");
Element attribuut instellen in namespace	svgElement.setAttributeNS(xlinkns, "href", href);
Element opvragen aan de hand van zijn id attribuut	document.getElementById("mijnid");
Element toevoegen aan ouder	parent.appendChild(newElement);

- Experimenteren met Punt! source bekijken en plakken in TryIt
Daarna 'pielen' en kijken wat er gebeurt!
- Probeer eens een stuk gewone XHTML toe te voegen bv. <i>scheef</i>. Waarom werkt het niet zonder meer?

Michails tip in zijn iOS workshop: HTML5 als iPhone/iPad applicatie

- <meta name='apple-mobile-web-app-capable' content='yes'> toevoegen aan <head> Daarna kun je via Safari het spel in het beginscherm zetten

Uitleg SVG

- Vector georienteerd (a la Illustrator)
- Manipulatie via DOM
- 'state'. SVG afbeelding zijn mogelijk met alleen markup, inclusief animaties via SMIL
- Demo's: Set!, Chainreaction

Uitleg Canvas

- Bitmap georienteerd (a la Photoshop)
- Manipulatie via Canvas context
- Geen 'state'. Tekenen gaat altijd via Javascript
- Demo Spirograaf met Canvas, Larry Adventure like
- Canvas OMaze gebaseerd op het clickmazes spel Orientation mazes

Voorbeeld: Punt Maze van HTML naar SVG

- Origineel: Punt in HTML tabel + javascript + .png plaatjes
- Puzzelsite waar het allemaal is ontstaan: The Grey Labyrinth
- SVG versie: Punt in SVG

Tip: Java games porteren m.b.v. Google Web Toolkit

Het gamen voorbij: Demo Gogbot databender d.m.v. Server Sent Events en Java Tomcat server

wie

Lizzie
Frank
stelt
.. vul je naam in dit formulier

Workshop Games in Html5

From

Voorkennis:

Programma:

wie