Workshop Games in Html5

From

Jump to: navigation, search
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.

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

  • Eindelijk Javascript HTML objecten en methods opgenomen in de specificatie! Ze bestaan nog maar 10 jaar;)
  • 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

- 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

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

ActieJavascript DOM instructie
Element creerendocument.createElement("div");
Element creeren in namespacedocument.createElementNS("namespaceURI", "elementnaam");
Element attribuut instellensvgElement.setAttribute("fill", "red");
Element attribuut instellen in namespacesvgElement.setAttributeNS(xlinkns, "href", href);
Element opvragen aan de hand van zijn id attribuutdocument.getElementById("mijnid");
Element toevoegen aan ouderparent.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

wie

  • Lizzie
  • Frank
  • stelt
  • .. vul je naam in dit formulier