HTML 5 Historie HTML5 Co je HTML5 Přehled novinek Tomáš Hejl Miroslav Štufka
HTML 5 - Historie Zima 2003 Snaha rozšířit formuláře HTML4 o vlastnosti XForms 1.0 (Opera Software) Jaro 2004 Opera+Mozilla, návrh zamítnut (W3C připravuje zpětně nekompatibilní XHTML2.0) Léto 2004 WHATWG (Web Hypertext Application Technology Working Group) Mozilla+Opera+Apple 2006/2007 Počátek spolupráce WHATWG a W3C, zapojení Microsoftu First Working Draft 22.1. 2008, aktuálně 23.4. 2009 HTML5 Tomáš Hejl, Miroslav Štefka 2
HTML 5 Cíle WHATWG Původní cíle WHATWG: 1) Zdokumentovat existující chování prohlížečů. 2) Navrhnout rozšíření HTML především s ohledem na webové aplikace. This specification is intended to replace what was previously the HTML4, XHTML 1.x, and DOM2 HTML specifications. Původně Web Applications 1.0 + Web Forms 2.0 HTML5 Tomáš Hejl, Miroslav Štefka 3
HTML 5 Aktuální vývoj W3C HTML WG 422 nezávislých expertů a 70 expertů zastupujících 27 dalších organizací (Mozilla, Opera, Apple, Microsoft, AOL, Cisco, Google, Kongres.knihovna USA, MIT, IBM, Nokia, Mezinárodní asociace tvůrců webů,...) editor Ian Hickson (autor Acid testů, dříve Mozilla, Opera, dnes Google, editor CSS2.1...) HTML5 Tomáš Hejl, Miroslav Štefka 4
HTML 5 Co to je? není založeno na SGML, je ale zpětně kompatibilní na rozdíl od původního HTML a XHTML není definován syntaxí, ale DOMem jazyk sám může být definován nezávisle na syntaxi v současnosti dvě syntaxe HTML serializace (HTML 5, inspirována SGML, ale kompatibilnější se současnými prohlížeči) XML serializace (XHTML 5, syntax XML 1.0 a namespaces, stejně jako XHTML 1.0.) HTML5 Tomáš Hejl, Miroslav Štefka 5
HTML 5 HTML5 vs. XHTML5 rozlišení podle MIME typu (text/html resp. application/xhtml+xml) HTML5 tolerantní k chybám zpětně kompatibilní prakticky stejná jako HTML4, včetně vynechávání tagů a atributů XHTML5 striktní XML well formed kód přímá integrace s derivacemi XML (SVG, MathML) využití mechanismů pro zpracování XML HTML5 Tomáš Hejl, Miroslav Štefka 6
HTML 5 Cíle HTML5 přiblížení HTML současným potřebám webových aplikací a schopnostem prohlížečů nástroje pro práci s formuláři práce s různými API, multimédii, strukturami oživení sémantiky větší flexibilita HTML5 Tomáš Hejl, Miroslav Štefka 7
HTML 5 Novinky HTML5 Tomáš Hejl, Miroslav Štefka 8
HTML 5 Struktura webu dnes HTML5 Tomáš Hejl, Miroslav Štefka 9
HTML 5 Struktura webu 2 HTML5 HTML5 Tomáš Hejl, Miroslav Štefka 10
HTML 5 Struktura webu 3 <header> - hlavička webu nebo sekce, například nadpis+podnadpis <footer> - patička webu, sekce nebo článku <nav> - hlavní navigace <aside> - postranní panel <article> - článek textu <section> - viz dále HTML5 Tomáš Hejl, Miroslav Štefka 11
HTML 5 Sekce <section> - spolu s nadpisy dělí web do sekcí <section> <h1>úroveň 1</h1> <section> <h1>úroveň 2</h1> <section> <h1>úroveň 3</h1> </section> </section> </section> prolomení hranice šesté úrovně zanoření HTML5 Tomáš Hejl, Miroslav Štefka 12
HTML 5 Dialog <dialog> - rozhovor, recyklace definičního seznamu <dialog> <dt>romeo</dt> <dd>má drahá Julie, jak se ti daří?</dd> <dt>julie</dt> <dd>romeo, ach můj Romeo, to jsem ráda, že jsi opět online.</dd> <dt>romeo</dt> <dd>vůbec si nedovedu představit, jak by náš vztah mohl po mém vyhoštění z města pokračovat, kdyby nebyl internet.</dd> </dialog> HTML5 Tomáš Hejl, Miroslav Štefka 13
HTML 5 Figure <figure> - spojuje multimediální obsah s textem <figure> <img src="obrazek.jpg" /> <legend>example</legend> </figure> nepovinný atribut alt (nepotřebný) HTML5 Tomáš Hejl, Miroslav Štefka 14
HTML 5 Menu <menu> - rozšíření možností současného tagu atribut type list (defaultní, jako dnes) context vlastní kontextové menu, například vyskakující navigace apod. navěšeno na jiný tag pomocí atributu contextmenu toolbar HTML5 Tomáš Hejl, Miroslav Štefka 15
HTML 5 Audio a video Video dnes <embed type="application/x-shockwaveflash" src="/static/cz/shared/app/mediacenter.s wf" quality="high" wmode="transparent" allowfullscreen="true" flashvars="media_id=431380&bit=122547 3403624233743826&color=#000000&aut ostart=true" width="440" height="288"> Video v HTML5 <video src="soubor.ogg"> </video> HTML5 Tomáš Hejl, Miroslav Štefka 16
HTML 5 Audio a video 2 <video>, <audio> <video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio> <source> - alternativní obsah, podle schopností prohlížeče HTML5 Tomáš Hejl, Miroslav Štefka 17
HTML 5 Audio a video 3 jednoduché ovládání bez flashe <video src="video.ogg" id="film"></video> <script> var film = document.getelementbyid("film"); </script> <p> <button type="button" onclick="film.play();">play</button> <button type="button" onclick="film.pause();">stop</button> <button type="button" onclick="film.currenttime = 0;">Přetočit </button> </p> HTML5 Tomáš Hejl, Miroslav Štefka 18
HTML 5 Formuláře - Input nové typy (kromě stávajících text, checkbox, radio...) datetime, datetime-local, date, month, week, time number, range email, url search color nové atributy placeholder text, zobrazený v prázdném inputu required povinný prvek autocomplete povolení samovyplňování prohlížečem multiple upload více souborů najednou, zadání více e-mailů HTML5 Tomáš Hejl, Miroslav Štefka 19
HTML 5 Formuláře atribut pattern místo typu zadání správného obsahu přímo regulárním výrazem interaktivní změny formulářů přidávání, mazání a přesouvání prvků ukázka (funkční pouze v Opeře) Web Forms 2.0 zahrnuty do specifikace HTML 5 teprve v únoru 2009, proto nejsou zatím více implementovány HTML5 Tomáš Hejl, Miroslav Štefka 20
HTML 5 Canvas <canvas> kreslení grafiky pomocí javascriptu objekt context s metodami pro kreslení více různých contextů s různými metodami většina prohlížečů implementuje 2D context (kromě IE), Opera a FF experimentálně i 3D context ukázka 2D canvas rozsáhlý tutorial na root.cz HTML5 Tomáš Hejl, Miroslav Štefka 21
HTML 5 Drag and drop nové eventy dragstart drag dragenter dragleave dragover drop dragend podle návrhu vývojářů IE Ukázka (pouze IE a Safari) HTML5 Tomáš Hejl, Miroslav Štefka 22
HTML 5 Offline-storage Dovoluje používání webových aplikací offline (např. přístup k dříve došlým e-mailům, psaní v Google Docs, prohlížení událostí v Google Kalendáři atp.), ale také lokální ukládání dat (košík v e-shopu) SQL-based database API vlastní databáze v prohlížeči vyjmuto 23.4. z HTML 5 localstorage, sessionstorage obdoba sessions, vyjmuto 23.4. z HTML5 offline application HTTP cache (soubor.manifest) určení, které soubory se mají cachovat HTML5 Tomáš Hejl, Miroslav Štefka 23
HTML 5 Cross-document messaging V současnosti není komunikace mezi doménami (crosssite scripting) možná z bezpečnostních důvodů umožňuje zasílat zprávy přátelskému webu i na jiné domény metoda postmessage(...) na objektu Window stačí získat window např. přes iframe přijetí zprávy pomocí listeneru události message na objektu window (událost nebublá, nedá se zrušit, nemá výchozí akci) ukázka (pouze Firefox a IE8) HTML5 Tomáš Hejl, Miroslav Štefka 24
HTML 5 Browser history management umožňuje do historie procházení webu (v současnosti pouze seznam URL) přidat tzv. State object state object se může uložit typicky např. při navigaci v rámci jedné stránky (např. AJAXem) po stisknutí tlačítka Zpět v prohlížeči se vyvolá poslední URL nebo State object, ze kterého se zrekonstruuje předchozí stav user-friendly navigace i v rámci one-page aplikace interface History na objektu window.history HTML5 Tomáš Hejl, Miroslav Štefka 25
HTML 5 MIME type and protocol handler registration umožňuje zaregistrovat do systému klienta nový protokol a webovou aplikaci, která bude tento protokol odchytávat a zpracovávat jen s potvrzením klienta po zaregistrování se bude požadavek na nový protokol předávat určené webové stránce jako parametr metodou GET podobně pro nové MIME typy HTML5 Tomáš Hejl, Miroslav Štefka 26
HTML 5 Odebrané elementy a atributy Elementy Atributy basefont, big, center, font, s, strike, tt, u frame, frameset, noframes acronym, applet, isindex, dir noscript nyní pouze v HTML syntaxi např. acceskey; rev a charset na elementech link a a; shape a coords na a; target; name na img a a; language na script, summary na table; scope na td; obecně všechny atributy, nahrazené vlastnostmi CSS (align, valign, border atd); a další HTML5 Tomáš Hejl, Miroslav Štefka 27
HTML 5 Ostatní Standardizace zavedených proprietárních řešení innerhtml, contenteditable, designmode, getelementsbyclassname parametr sandbox elementu iframe umožňuje v iframe zakázat formuláře, skriptování, navigaci mimo frame atd. parametr seamless elementu iframe alternativa PHP funkce include iframe se bude tvářit jako součást stránky jeho obsah bude formátován CSS jako zbytek stránky atp. HTML5 Tomáš Hejl, Miroslav Štefka 28
HTML 5 Odkazy http://html5.validator.nu/ - HTML 5 validátor http://en.wikipedia.org/wiki/comparison_of_layout_engines_( - přehled současné podpory HTML 5 Zdroje http://interval.cz/clanky/seznameni-s-html-5/ http://www.lupa.cz/clanky/whatwg-budoucnost-webu/ http://en.wikipedia.org/wiki/html_5 http://dev.w3.org/html5/spec/overview.html http://zdrojak.root.cz/clanky/zaciname-z-html5-canvasem/ http://interval.cz/clanky/html-nbsp-5-a-semantika/ http://a.met.cz/juniorinternet/2008/ obecně http://www.w3.org/ HTML5 Tomáš Hejl, Miroslav Štefka 29