View source for Workshop Games in Html5

{{Event
|Name=Workshop Games in html5
|Contact=Hfmanson
|DateStart=2011/11/19
|DateEnd=2011/11/19
|Info=Games maken in html5
|InfoLocation=TkkrLab
|InfoOpen=14:00
}}
Gegeven door [[User:Hfmanson|Henri Manson]] in het Nederlands

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

Om mee te doen vul dit [https://docs.google.com/spreadsheet/viewform?formkey=dC1fSlBwZlZJb2FkeHpxOWpzcTg5ZEE6MQ 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.

<paypal></paypal>

===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 [http://dev.w3.org/html5/spec/Overview.html HTML5]: [http://www.w3.org/TR/SVG/ SVG] en [http://dev.w3.org/html5/2dcontext/Overview.html Canvas]

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

* HTML + JavaScript demo: [http://www.mansoft.nl/dobbelsteen/raden.html dobbelstenen] zie [http://dev.w3.org/html5/spec/Overview.html#dom-tree-accessors DOM tree accessors]

* Beschikbaarheid HTML5 op mobiele apparaten
- iPhone/iPad: Canvas + SVG<br/>  
- Android: Canvas

* HTML5: Conventioneel of XHTML
- Bij embedding van andere XML talen zoals SVG en MathML is XHTML vereist!<br/>
Je kunt daarom het beste altijd XHTML gebruiken.<br/>
- Demo [http://mansoft.nl/html5/mixedhtml5.xhtml HTML5 met geembed SVG en MathML]

* Javascript aanrader: [http://oreilly.com/catalog/9780596517748 Javascript: The Good Parts]
- Intro van dezelfde auteur: [http://javascript.crockford.com/javascript.html Javascript: The World's Most Misunderstood Programming Language]<br/>
- En deze [http://www.youtube.com/watch?v=v2ifWcnQs6M YouTube presentatie], duurt 1:50 uur maar is absoluut de moeite waard!<br/>
- Het is totaal anders dan Java, gebaseerd op prototypes en niet op classes<br/>
- Elementen uit functioneel programmeren<br/>
- Functies zijn echte variabelen<br/>
- Officiele naam ECMAScript

* Workshop gereedschap: [http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro w3schools TryIt editor] in de revisie
- Henri's [http://www.mansoft.nl/try-it/try-it.html TryIt]: geen advertenties, geen netwerkverkeer en illustratief ;)<br/>
- Illustreert het werken met DOM i.c.m. XML en XML namespaces<br/>
- Parseert de ingevoerde tekst als XML document. Daarvan wordt het documentElement in 1 keer wordt toegevoegd aan het resultaat.<br/>
- kan slechts 1 element bevatten. Dat element mag uiteraard kinderen hebben.<br/><br/>
- Enkele veelgebruikte Javascript DOM instructies:
<table border="1"  style="border-collapse:collapse;">
<tr><th>Actie</th><th>Javascript DOM instructie</th></tr>
<tr><td>Element creeren</td><td>document.createElement("div");</td></tr>
<tr><td>Element creeren in namespace</td><td>document.createElementNS("namespaceURI", "elementnaam");</td></tr>
<tr><td>Element attribuut instellen</td><td>svgElement.setAttribute("fill", "red");</td></tr>
<tr><td>Element attribuut instellen in namespace</td><td>svgElement.setAttributeNS(xlinkns, "href", href);</td></tr>
<tr><td>Element opvragen aan de hand van zijn id attribuut</td><td>document.getElementById("mijnid");</td></tr>
<tr><td>Element toevoegen aan ouder</td><td>parent.appendChild(newElement);</td></tr>
</table>
- Experimenteren met [http://www.mansoft.nl/try-it/puntsample.svg Punt!] source bekijken en plakken in TryIt<br/>
Daarna 'pielen' en kijken wat er gebeurt!<br/>
- Probeer eens een stuk gewone XHTML toe te voegen bv. &lt;i&gt;scheef&lt;/i&gt;. Waarom werkt het niet zonder meer?

* Michails tip in zijn iOS workshop: HTML5 als iPhone/iPad applicatie
- &lt;meta name='apple-mobile-web-app-capable' content='yes'&gt; toevoegen aan &lt;head&gt;
Daarna kun je via Safari het spel in het beginscherm zetten

* Uitleg SVG
- Vector georienteerd (a la Illustrator)<br/>
- Manipulatie via [http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ DOM]<br/>
- 'state'. SVG afbeelding zijn mogelijk met alleen markup, inclusief animaties via SMIL<br/>
- Demo's: [http://mansoft.nl/svg/set/set.svg Set!], [http://www.mansoft.nl/svg/chainreaction/chainreaction.svg?level=3300rBRbRbBbr%3B Chainreaction]

* Uitleg Canvas
- Bitmap georienteerd (a la Photoshop)<br/>
- Manipulatie via Canvas context<br/>
- Geen 'state'. Tekenen gaat altijd via Javascript<br/>
- Demo [http://www.mansoft.nl/html5/canvas/spiro.html Spirograaf met Canvas], [http://www.mansoft.nl/html5/canvas/sprite_animation_demo/canvas.html Larry Adventure like]<br/>
- Canvas [http://mansoft.nl/html5/OMaze.html OMaze] gebaseerd op het [http://www.clickmazes.com/ clickmazes] spel [http://www.clickmazes.com/orient/ixorient.htm Orientation mazes]

* Voorbeeld: Punt Maze van HTML naar SVG
- Origineel: [http://mansoft.nl/punthtml/rmgame.html?9,6,YEWW.BEEW.EBEE.HEBE.EHEB.WEHE.WWEH Punt in HTML tabel + javascript + .png plaatjes]<br/>
- Puzzelsite waar  het allemaal is ontstaan: [http://www.greylabyrinth.com/discussion/viewtopic.php?t=8206&view=next&sid=f9662739055c1cf76fd16f253b0f3018 The Grey Labyrinth]<br/>
- SVG versie: [http://www.mansoft.nl/svg/punt/punt.svg?9,6,YEWW.BEEW.EBEE.HEBE.EHEB.WEHE.WWEH Punt in SVG]

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

* Het gamen voorbij: Demo [http://mansoft.nl:8080/sse/osc.html Gogbot databender] d.m.v. [http://dev.w3.org/html5/eventsource/ Server Sent Events] en [http://tomcat.apache.org/ Java Tomcat server]

= wie =
* Lizzie
* Frank
* stelt
* .. vul je naam in dit [https://docs.google.com/spreadsheet/viewform?formkey=dC1fSlBwZlZJb2FkeHpxOWpzcTg5ZEE6MQ formulier]