HTML 5 Johdanto Antti-Jussi Lakanen Mikä on HTML 5 HTML 5 on uusistandardihtml-, XHTML-ja HTML DOM-määrittelyille HTML 4 tuliulosvuonna1999. Webbion muuttunut paljon niistä ajoista HTML 5:n speksion kesken. Kuitenkin, modernit selaimet tukevat melko hyvin uusia ominaisuuksia 1
HTML 5:n lyhyt historia HTML 4 12/1997 HTML 4.01 Strict 05/2000 XHTML 1.1 05/2001 HTML 5 (draft) W3C(World Wide Web Consortium) WHATWG(Web Hypertext Application Technology Working Group) HTML 5 vsnatiivi Mukaillen Brad Neuberg, 2009 2
HTML 5 sovelluskehittäjille Grafiikka Paikkatieto Tiedon tallennus Nopeus Mukaillen Brad Neuberg, 2009 JavaScriptin tuunaus 3
Miksi mobiilikäyttäjiäkiinnostaisi HTML5? Natiivisovellusten"tuntuisia" sovelluksia ilman asennusta selaimessa Miksi mobiilikehittäjiäkiinnostaisi HTML5? 1. Alustariippumattomuus 2. Alustariippumattomuus 3. Alustariippumattomuus 4. Alustariippumattomuus 4
HTML 5 vshtml 4 Uusi <canvas> elementti piirtämiseen Uudet <video> ja <audio> elementit medialle Parempi tuki paikalliselle offline-varastoinnille Paikkatieto Sisältöön erikoistuneita elementtejä, esim. <article>, <footer>, <header>, <nav>, <section> Lomakekontrolleja, esim. calendar, date, time, email, url, search "Hello world" Tässä esityksessä Vektorigrafiikka ja piirtäminen: SVG, Canvas Video Paikkatieto (geolocation) Offline-sovelluksetja paikallinen tietovaranto (App cache& database) Web workers 5
HTML4 "Hello world" HTML5 "Hello world" 6
HTML4 vs HTML5 "Hello world" Ihan kaikki ei ole lyhentynyt HTML 4 <div class="entry"> <p class="postdate">october 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this post"> Travel day</a> </h2> </div> HTML 5 <article> <header> <time datetime="2009-10-22" pubdate> October 22, 2009</time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> </article> 7
Selaintuki http://en.wikipedia.org/wiki/comparison_of_l ayout_engines_(html5) HTML5 ei ole vielä virallinen standardi Kaikki selaimet eivät tue kaikkia tämänhetkisiä ominaisuuksia Tekevät sitä kuitenkin ripeään tahtiin SVG 8
Piirtäminen webissä Tähän asti ei varsinaisesti voinut piirtää aikaisemmin Tavallisia kiertoteitä Flash VML Silverlight 9
Canvasja SVG ovat osa webbiä! DOM HTML HTTP Scalable Vector Graphics (SVG) <!doctype html> <html> <head> <meta charset="utf-8"> <title>svg</title> </head> <body> <svg width="200" height="200"> <rect x="10" y="10" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="5" ry="5" id="myrect" class="chart" /> </svg> </body> </html> 10
Scalable Vector Graphics (SVG) <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> Skaalautuvaa grafiikkaa http://users.jyu.fi/~anlakane/html5/svg- 1.html 11
CANVAS Canvas API JavaScript API ("skriptattavatagipiirtämistä varten") <canvas id="a" width="100" height="100" style="border: 1px dotted black;"></canvas> var canvas = document.getelementbyid("a"); var context = canvas.getcontext("2d"); context.fillstyle="#ff0000"; context.fillrect(20, 15, 50, 25); context.fillstyle="rgba(0, 0, 200, 0.5)"; context.fillrect(30, 20, 20, 40); 12
Canvas <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>canvas-esimerkki 0</title> <script> function piirra() { var canvas = document.getelementbyid("a"); var context = canvas.getcontext("2d"); context.fillstyle="#ff0000"; context.fillrect(20, 15, 50, 25); context.fillstyle="rgba(0, 0, 200, 0.5)"; context.fillrect(30, 20, 20, 40); } </script> </head> <body> <canvas id="a" width="100" height="100" style="border: 1px dotted black;"></canvas> <script> piirra(); </script> </body> </html> Canvas 13
Esimerkkejä http://users.jyu.fi/~anlakane/html5/ http://htmlfive.appspot.com/static/gifter.html http://www.destatis.de/bevoelkerungspyrami de/ Esimerkki: canvas1.html <canvas id="a" width="500" height="400" style="border: 1px dotted black;" onclick="draw_a(); return false"> </canvas> 14
Esimerkki: canvas1.html function draw_a() { var a_canvas = document.getelementbyid("a"); var a_context = a_canvas.getcontext("2d"); } var x = 250; var y = 300; var r = 100; piirrapallo(a_context, x, y, r, "#ff0000"); y -= r; r /= 2; y -= r; piirrapallo(a_context, x, y, r, "#00ff00"); y -= r; r /= 2; y -= r; piirrapallo(a_context, x, y, r); Esimerkki: canvas1.html function piirrapallo(context, x, y, r, color) { if(color == undefined) color = "#000000"; context.beginpath(); context.arc(x, y, r, 0, 2*Math.PI); context.fillstyle=color; context.fill(); } 15
Canvas vai SVG? SVG Käyttöliittymät: tapahtumien, kuuntelijoiden jne. lisääminen helpompaa, koska kaikki menee puurakenteeseen Interaktiivisuus Skaalautuva Canvas Rasterigrafiikkaa -> ei skaalaudu JS-keskinen Vaikeahko hiirenkuuntelu VIDEO 16
Formaattisota MP4 (H.264 Baseline, AAC LC) Ogg(Theora, Vorbis) WebM(VP8, Vorbis) Selaintuki (joulukuu 2011) http://en.wikipedia.org/wiki/html5_video 17
http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html <video> <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>html5 video</title> </head> <body> <video width="320" height="240" controls> <source src="video.mp4"> <source src="video.ogg"> <source src="video.webm"> Your browser does not support the video tag. </video> </body> </html> http://users.jyu.fi/~anlakane/html5/video.html 18
Video Formaatit 19
Formaatit Video for everybody http://camendesign.com/code/video_for_eve rybody 20
<video> + JS <video width="320" height="240" controls> <source src="video.mp4"> <source src="video.ogg"> <source src="video.webm"> Your browser does not support the video tag. </video> var v = document.getelementsbytagname("video")[0]; v.play(); Esimerkki http://www.dailymotion.com/html5 http://www.youtube.com/html5 21
PAIKKATIETO (GEOLOCATION) IP WLAN GPS GSM/CDMA solu ID Ja vielä Bluetooth MAC RFID Monta lähdettä 22
Peruskäyttö navigator.geolocation.getcurrentposition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showlocation(lat, lon); } ); http://users.jyu.fi/~anlakane/html5/geo.html 23
Esimerkkejä Google Maps Geolocation 24
App cache& database OFFLINE-SOVELLUKSET Esimerkki http://www.webkit.org/demos/sticky-notes/ 25
Sovellusvälimuisti (app cache) (StickyNotes.manifest) CACHE MANIFEST deletebutton.png deletebuttonpressed.png (index.html) <html manifest="stickynotes.manifest"> http://www.w3.org/tr/html5/offline.html 26
Paikallinen tietokanta IndexedDB (osittain FF4, Chrome11) Aiemmin Web SQL (Safari, Chrome 4, Opera) Indexed DB X X X X X X? X? 27
WEB WORKERS Enemmän tehoa Enemmän vastuuta JavaScriptin hyödyntämispaikat Paikat missä voi mennä pieleen 28
Web workers API, jonka avulla JavaScriptiä voi pyörittää taustalla Esimerkkejä http://htmlfive.appspot.com/static/primesbad.html http://htmlfive.appspot.com/static/primesgood.html 29
Esimerkki: alkuluvut <script> function findprimes() { var worker = new Worker('../js/prime.js'); worker.onmessage = function (event) { document.getelementbyid('result').textcontent = event.data; }; } </script> Esimerkki: alkuluvut <input type="button" value="go!" onclick="findprimes()"> <p>the highest prime number discovered so far is:</p> <output id="result"></output> 30
Esimerkki: alkuluvut (prime.js) var n = 1; search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postmessage(n); } Web workers 31
Web workers X X X Muuta Uudet tyypit syötteelle Microdata API History API Paljon kaikenlaista muuta kivaa 32
Lähteet http://diveintohtml5.info Brad Neuberg: Introductionto HTML 5 (http://vimeo.com/6691519) http://www.html5canvastutorials.com http://en.wikipedia.org/wiki/comparison_of_l ayout_engines_(html5) 33