Next »

DHTML & CSS3

  • Podpora skrz všechny platformy (mobilní, desktopy)
  • HTML DOM elementy
  • CSS 3
Next »

Canvas

Ultimátní rastrová plocha schopná vykreslovat dynamickou bitmapu a obrázky.

  • Nemá objekty ‑ rastrová plocha
  • Chová se jako obrázek (png)
  • Image data
  • Transformace ‑ posun, meřítko, natočení, zkosení + jejich kombinace
  • Výkon
Next »

Audio

							
    <script>
        var audio = new Audio();
        audio.src = "audio.mp3";
        audio.play();
    </script>
							
						
  • Formáty ‑ ogg, mp3, wav
  • canPlayType() vs. <audio>
  • Každý prohlížeč má vlastní interpret ovladacích prvků
  • Metody - play(), pause() a currentTime (non‑read)
  • Události - onplay, onpause, onended, onseeking, oncanplay, ...
Next »

WebStorage ( localStorage )

Prostor prohlížeče pro ukládání key‑value hodnot v rámci domény

							
    <script>
    	var storage = window.localStorage;
        storage.setItem("game", "{
            hp : Infinity,
            score : 0,
            ...
        }");
    </script>
							
						
  • Drží hodnoty po restartu prohlížeče
  • Omezení 5MB
  • Události při zmeně hodnoty
  • setItem(), removeItem(), clear()
  • localStorage vs. Cookie
Next »

WebSocket & AJAX

Vlastní TCP protokol, komunikaci začíná HTTP požadavkem s hlavičkou "Upgrade:"

							
    <script>
        var socket;
        if(window["MozWebSocket"]){
            socket = new MozWebSocket("ws://domena.cz:[PORT]");
        } else {
            socket = new WebSocket("ws://domena.cz:[PORT]");
        }

        /* ... */
        socket.send("{ a : 1 }");

        /* ... */
        socket.onmessage = function(event){
            var data = event.data;
        }

    </script>
							
						
  • Podpora ‑ Chrome4+, Firefox4+, Safari5
  • WebSocket vs. AJAX
  • Spousta knihoven pro podporu WebSocketů (PHP, Python, v8cgi, nodejs, ...)
Next »

Herni JS knihovny

Placené

Neplacené

Animační

Next »

Ukazky her

Canvas Rider

Emberwinds

Fieldrunners

Onslaught! Arena

Angry Birds

Next »

HTML 5 nativne

iOS

  • Xcode
  • WebView
  • Webkit framework
  • Struktura souboru
článek č.1 | článek č.2

Android

Next »

Konec

Děkuji za pozornost.