Free text:

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]

Summary:

This is a minor edit Watch this page

Cancel