prezentace

Transkript

prezentace

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
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
4
HTML 5 – Co
●
●
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
➔
●
to je?
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
5
HTML 5 – HTML5
●
vs. XHTML5
rozlišení podle MIME typu (text/html resp. application/xhtml+xml)
●
●
HTML5
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
6
HTML 5 – Cíle
●
HTML5
přiblížení HTML současným potřebám webových aplikací
a schopnostem prohlížečů
●
●
●
●
HTML5
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
7
HTML 5
Novinky
HTML5
8
HTML 5 – Struktura
●
webu
dnes
HTML5
9
●
webu 2
HTML5
HTML5
10
●
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
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>
HTML5
●
prolomení
hranice šesté
úrovně zanoření
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
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
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
●
●
HTML5
toolbar
15
HTML 5 – Audio
a video
Video dnes
Video v HTML5
<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">
HTML5
<video
src="soubor.ogg">
</video>
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
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
18
HTML 5 – Formuláře
●
nové typy (kromě stávajících text, checkbox, radio...)
●
●
●
●
●
●
- Input
datetime, datetime-local, date, month, week, time
number, range
email, url
search
color
nové atributy
●
●
●
●
HTML5
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ů
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
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
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
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
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
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
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
26
HTML 5 – Odebrané
●
elementy a atributy
Elementy
basefont, big, center, font, s, strike, tt, u
● frame, frameset, noframes
● acronym, applet, isindex, dir
● noscript nyní pouze v HTML syntaxi
Atributy
● 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
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
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
●
●
●
●
●
●
●
●
HTML5
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/
29

prezentace

Transkript

Podobné dokumenty

Zobrazit celý článek - JTIE - Journal of Technology and Information

Doporučení pro tvorbu HTML5 reklamy