novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers

Rozměr: px

Začít zobrazení ze stránky:

Download "novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers"

Marcela Havlová
před 8 lety
Počet zobrazení:

1 HTML5 1

2 novinky v HTML5 nové sémantické tagy canvas video geolocation local storage web workers 2

3 nové tagy <section> <nav> <article> <header> <footer> <time> 3

4 nové tagy 4

5 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=" ">my birthday</time> </body> </html> 5

6 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=" ">my birthday</time> </body> </html> 6

font-style: italic; } </style> <script>document.

7 canvas kreslící plátno veškerá 2D grafika 7

8 canvas var context = canvas.getcontext("2d"); context.fillstyle = "rgba(0, 0, 200, 0.5)"; context.fillrect(40, 30, 500, 360); 8

9 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

10 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

textalign = "right"; context.textbaseline = "bottom"; context.

11 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

12 canvas IE 7, IE 8 samotné IE canvas nepodporuje lze obejít pomocí explorercanvas 12

13 canvas IE 7, IE 8 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>page title</title>  </head> <body>... </body> </html> 13

14 canvas podpora základní 2D objekty cesty text gradienty IE8 IE7 FX3.5 FX3 SAF4 SAF3 CHROME OPERA 14

15 video <video src="videosource.ogv"></video> width, height controls preload autoplay <video src="videosource.ogv" width="320" height="240" controls autoplay></video> 15

16 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

ogv" type='video/ogg; codecs="theora, vorbis"'> <source

17 video IE 7, IE 8 lze obejít pomocí kombinace FlowPlayer ( html5-video.js ( HTML5 enabling script ( 17

js (http://diveintohtml5.org/j/html5-video.

18 video IE 7, IE 8 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ie video</title>  </head> <body>... <script src="flowplayer.min.js"></script> <script src="html5-video.js"></script> </body> </html> 18

--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.

19 video podpora OPERA CHROME SAFARI FIREFOX IE9? Theora H

20 geolocation zjistí aktuální polohu využitelné pro mobilní zařízení 20

21 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

22 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

23 geolocation podpora FIREFOX IPHONE 3.0 ANDROID 2.0 geolocation 23

24 local storage možnost uložení dat u klienta v mnoha ohledech lepší než cookies 24

25 local storage využití <!DOCTYPE html> <html lang="en"> <head> <script class="jsbin" src=" <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

26 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

27 web workers javascript na pozadí zpracování více vláken 27

28 odkazy

Podobné dokumenty

Kreslíme do webu. Canvas

Kreslíme do webu. Canvas Kreslíme do webu Canvas Počítačová grafika Bitmapy vs Vektory Bitmapy: - obraz je složen z bodů (pixelů), které mají definované vlastnosti Vektory: - obraz je složen z grafických prvků (primitiv), které