HTML5 1
novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers 2
nové tagy <section> <nav> <article> <header> <footer> <time> 3
nové tagy 4
nové tagy IE 7, IE 8 nebude fungovat <!DOCTYPE html> <html> <head> <title>header test</title> <style> time { font-style: italic; } </style> </head> <body> <time datetime="2009-09-13">my birthday</time> </body> </html> 5
nové tagy IE 7, IE 8 musíme doplnit o document.createelement('time'); <!DOCTYPE html> <html> <head> <title>header test</title> <style> time { font-style: italic; } </style> <script>document.createelement('time');</script> </head> <body> <time datetime="2009-09-13">my birthday</time> </body> </html> 6
canvas kreslící plátno veškerá 2D grafika 7
canvas var context = canvas.getcontext("2d"); context.fillstyle = "rgba(0, 0, 200, 0.5)"; context.fillrect(40, 30, 500, 360); 8
canvas cesty context.fillstyle = '#00f'; context.strokestyle = '#f00'; context.linewidth = 4; context.beginpath(); context.moveto(10, 10); context.lineto(100, 10); context.lineto(10, 100); context.lineto(10, 10); context.fill(); context.stroke(); context.closepath(); 9
canvas text context.font = "bold 12px sans-serif"; context.filltext("x", 248, 43); context.filltext("y", 58, 165); context.textalign = "right"; context.textbaseline = "bottom"; context.filltext("( 500, 375 )", 500, 375); context.fillrect(499, 374, 3, 3); 10
canvas gradienty var my_gradient = context.createlineargradient(0, 0, 300, 225); my_gradient.addcolorstop(0, "black"); my_gradient.addcolorstop(1, "white"); context.fillstyle = my_gradient; context.fillrect(0, 0, 300, 225); 11
canvas IE 7, IE 8 samotné IE canvas nepodporuje lze obejít pomocí explorercanvas http://code.google.com/p/explorercanvas/ 12
canvas IE 7, IE 8 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>page title</title> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head> <body>... </body> </html> 13
canvas podpora základní 2D objekty cesty text gradienty IE8 IE7 FX3.5 FX3 SAF4 SAF3 CHROME OPERA 14
video <video src="videosource.ogv"></video> width, height controls preload autoplay <video src="videosource.ogv" width="320" height="240" controls autoplay></video> 15
video mime type / kodeky musí být uveden mime type a použité kodeky <video width="320" height="240" controls> <source src="videosource.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="videosource.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"'> </video> 16
video IE 7, IE 8 lze obejít pomocí kombinace FlowPlayer (http://flowplayer.org/) html5-video.js (http://diveintohtml5.org/j/html5-video.js) HTML5 enabling script (http://html5shiv.googlecode.com/svn/trunk/html5.js) 17
video IE 7, IE 8 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ie video</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body>... <script src="flowplayer.min.js"></script> <script src="html5-video.js"></script> </body> </html> 18
video podpora OPERA CHROME SAFARI FIREFOX IE9? Theora H.264 19
geolocation zjistí aktuální polohu využitelné pro mobilní zařízení 20
geolocation využití function get_location() { } navigator.geolocation.getcurrentposition(show_map); function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; alert(latitude + longitude); } 21
geolocation využití navigator.geolocation.getcurrentposition( success_callback, error_callback, {maximumage: time in ms}); function get_location() { } navigator.geolocation.getcurrentposition( show_map, handle_error, {maximumage: 75000}); function handle_error(err) { if (err.code == 1) { // uživatel odmítl } } 22
geolocation podpora FIREFOX IPHONE 3.0 ANDROID 2.0 geolocation 23
local storage možnost uložení dat u klienta v mnoha ohledech lepší než cookies 24
local storage využití <!DOCTYPE html> <html lang="en"> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>local storage</title> </head> <body> <section> <ul id="edit" contenteditable="true"> <li></li> </ul> </section> </body> </html> 25
local storage využití $(function() { }); var edit = document.getelementbyid('edit'); $(edit).blur(function() { localstorage.setitem('tododata', this.innerhtml); }); if ( localstorage.getitem('tododata') ) { edit.innerhtml = localstorage.getitem('tododata'); } // localstorage.clear(); 26
web workers javascript na pozadí zpracování více vláken 27
odkazy http://www.w3.org/tr/html5/ http://diveintohtml5.org/ http://validator.w3.org/ 28