Univerzita Hradec Králové Fakulta informatiky a managementu Katedra informatiky a kvantitativních metod
Tvorba webových aplikací v jazyce HTML5 Bakalářská práce
Autor: Jana Macháčková Studijní obor: Informační management Vedoucí práce: Ing. Pavel Janečka
Hradec Králové
srpen 2013
Prohlášení Prohlašuji, že jsem bakalářskou práci zpracovala samostatně a s použitím uvedené literatury.
V Hradci Králové dne 19. 8. 2013
klllllllllllllllllvvvvv Jana Macháčková
Poděkování Ráda bych poděkovala vedoucímu této bakalářské práce panu Ing. Pavlu Janečkovi za jeho čas a ochotu při konzultacích nad vznikajícím textem této práce. Dále bych ráda poděkovala celé své rodině za podporu po celou dobu studia.
Anotace Bakalářská práce představuje ucelený pohled na nově vznikající značkovací jazyk HTML5. Zabývá se důležitými částmi specifikace HTML5, jako rozhraním pro formuláře, multimédia, grafiku, rozhraním využívající JavaScript. Poukazuje i na to, jak se s touto novou specifikací vypořádávají webové prohlížeče prostřednictvím nástrojů, které tyto prohlížeče testují z hlediska podpory nového standardu. Na závěr tato práce představuje aplikaci založenou na prvcích rozhraní Canvas a jazyka JavaScript, která napomůže ke zhodnocení přínosu této nové specifikace.
Annotation The Thesis provides a complex view on an innovative markup language of HTML5 whose popularity has been rapidly growing recently. A significant part of the Thesis covers fundamental specification of the language as a core interface for multimedia, graphics, forms and JavaScript usage. Another part points out the way how the contemporary web browsers can handle the new specification and which tools are used to achieve this goal with regards to the support of the new standards. The last part is dedicated to the demonstration of the principles of HTML5 through a web application using the Canvas interface and JavaScript in order to help to understand the benefits of this state-of-the-art specification.
Obsah 1. Úvod _______________________________________________________________________ 1 2. HTML ______________________________________________________________________ 2 2.1 Počátky HTML_____________________________________________________________ 2 2.2 Kaskádové styly ___________________________________________________________ 3 2.3 JavaScript ________________________________________________________________ 4 3. Specifikace HTML5 ____________________________________________________________ 5 3.1 Podpora HTML5 ___________________________________________________________ 5 3.1.1 Nástroje pro porovnání výkonu prohlížečů se zaměřením na HTML5 ______________ 6 3.1.1.1 Zhodnocení prohlížečů ve vybraných testech _____________________________ 9 3.1.2 Nástroje pro optimalizaci webových stránek ________________________________ 12 3.2 Zjednodušení prvků oproti starším specifikacím _________________________________ 14 3.3 Nové sémantické elementy _________________________________________________ 15 4. Existující API ve specifikaci HTML5 _______________________________________________ 17 4.1 API Formuláře ____________________________________________________________ 17 4.1.1 Formulářové elementy _________________________________________________ 17 4.1.2 Nové formulářové atributy ______________________________________________ 21 4.2 API geolokace ____________________________________________________________ 26 4.3 API Canvas ______________________________________________________________ 28 4.4 API WebSocket ___________________________________________________________ 37 4.5 API Web Workers _________________________________________________________ 40 4.6 API Web Storage__________________________________________________________ 42 4.7 Audio a video v HTML5 ____________________________________________________ 43 4.7.1 Element audio ______________________________________________________ 43 4.7.2 Element video ______________________________________________________ 44 4.8 Off-line API ______________________________________________________________ 45 4.8.1 Technologie Off-line ___________________________________________________ 45
5. Implementace vybrané úlohy___________________________________________________ 48 6. Závěr ______________________________________________________________________ 52 7. Zdroje _____________________________________________________________________ 53 Seznam použité literatury _____________________________________________________ 53 Seznam ilustrací _____________________________________________________________ 57 Seznam grafů _______________________________________________________________ 58 Seznam tabulek _____________________________________________________________ 59 8. Přílohy ____________________________________________________________________ 60 8.1 Příloha č.1: Ukázka HTML5 dokumentu ________________________________________ 60 8.2 Příloha č.2: Ukázka využití metody transform() __________________________________ 61 8.3 Příloha č.3: Zdrojový kód hry JessGame ________________________________________ 62
1. Úvod Uživatelů přistupujících dnes a denně k webovým stránkám různého obsahu neustále přibývá. Prostředí webu již není doménou pouze počítačových nadšenců, ale poskytuje nepřeberné množství informací, komunikaci v reálném čase a mnoho hodin zábavy i běžným uživatelům. Tyto možnosti by nebyly, nebýt neustálého vývoje webových stránek. Také vývojářům a designérům webových stránek musí být poskytnuty dostatečné nástroje pro rozvinutí a ztvárnění jejich představ a záměrů. Možnosti webových stránek jsou odjakživa v rukou prohlížečů, jelikož webový prohlížeč je tu od toho, aby zobrazoval a interpretoval obsah kódu webové stránky. Rivalita, snaha o maximální pokrytí uživatelů, je mezi webovými prohlížeči obrovská, proto se jejich vývojáři snaží o implementaci vlastností, kterými jejich konkurence nedisponuje. Aby však všechny prohlížeče dokázaly interpretovat webové stránky v jejich základní podobě stejně, vznikly specifikace jazyka HTML, jazyka pro tvorbu webových stránek. Se zvyšujícím se počtem uživatelů však narůstají i nároky na obsah specifikace. Jasnou reakcí na tyto zvyšující se nároky byl příchod HTML5, který se v mnohém zjednodušil či vytvořil pomocné rozhraní, jež napomáhají vývojářům vyzdvihnout jejich webové aplikace nad ostatními. Tato práce nabízí ucelený pohled na nově vznikající značkovací jazyk HTML5, který prošel řadou změn a inovací. Představuje důležité části specifikace HTML5, jako rozhraní pro formuláře, multimédia, grafiku, rozhraní využívající JavaScript a poukazuje i na to, jak se s touto novou specifikací vypořádávají webové prohlížeče prostřednictvím nástrojů, které tyto prohlížeče testují z hlediska podpory nového standardu. Nakonec tato práce představuje aplikaci založenou na prvcích rozhraní Canvas a jazyka JavaScript, která napomůže ke zhodnocení přínosu této nové specifikace.
1
2. HTML Pod zkratkou HTML neboli HyperTextMarkupLanguage se skrývá mocný nástroj pro tvorbu a formátování dokumentů webových stránek. Stejně jako všechny ostatní značkovací jazyky vychází z předpokladu označkování samotného textu párovými a nepárovými tagy (značkami) pro jejich snadné strojové zpracování při zachování čitelnosti. Jde tedy o textový formát.
2.1 Počátky HTML První definici značkovacího jazyka HTML vytvořil v roce 1990 Timothy John BernersLee při vytváření informačního systému pro CERN1. Timothy John Berners-Lee navrhl systém, dnes znám pod zkratkou WWW2. A právě pro tento systém v roce 1991 vytvořil HTML, který se v kombinaci s protokolem HTTP3 a hypertextovými odkazy URL4 stal základem dnešních webových stránek. Postupem času po zveřejnění první verze s označením HTML 0.9 v roce 1991 se požadavky uživatelů na WWW navýšily, a tak vývojáři webových prohlížečů obohacovali HTML o nové prvky. Pro zachování kompatibility vytvořil Timothy john Berners-Lee pod hlavičkou IETF5 návrh standardu HTML2.0, který zahrnoval všechny, v té době běžně používané prvky HTML a navíc přidával formuláře pro interakci s webovou stránkou a podporu jednoduché grafiky. Roku 1995 vznikl nový návrh standardu HTML 3.0, který byl rozšířen o vytváření tabulek, matematických vzorců a o prvky, kterými lze lépe kontrolovat výsledný vzhled textu. Verze HTML 3.0 však nikdy nebyla přijata jako standard, jelikož byla příliš složitá a nenašel se nikdo, kdo by dokázal naprogramovat její podporu. Následující verze 3.2 vydaná v lednu 1997 se již standardem stala. Byla to první standardizovaná verze vydána mezinárodním konsorciem W3C (World Wide Web Consortium). W3C založil roku 1994 Timothy John Berner-Lee, jehož členové společně s veřejností dodnes vyvíjejí webové standardy pro WWW v podobě W3C Recommendation. HTML 3.2 byla rozšířena o tabulky, zarovnávání textu a o stylové elementy pro ovlivňování vzhledu. CERN – výzkumné centrum fyziky poblíž Ženevy ve Švýcarsku WWW – World Wide Web 3 HTTP - Hyper Text Transfer Protocol – internetový protokol pro výměnu hypertextových dokumentů 4 URL – Uniform Resource Locator – řetězec znaků, který definuje umístění zdroje 5 IETF - Internet Engineering Task Force – organizace, která vydávala standardy v podobě Request For Comments 1 2
2
V prosinci 1997 vznikl nový a na dlouhou dobu také poslední standard W3C verze 4.0. Do specifikace značkovacího jazyka přibyly nové prvky pro tvorbu tabulek, formulářů a nově byly standardizovány rámy (frames). Tato verze se snažila dosáhnout toho, aby prvky vyznačovaly význam (sémantiku) jednotlivých částí dokumentu a aby vzhled byl ovlivňován především připojovanými styly. Nová verze s označením 4.01 byla vydána až v roce 1999. Opravovala pouze chyby v předchozí specifikaci. Podle původní domněnky měla tato verze být tou poslední, po niž by se přešlo na XHTML6. V roce 2004 byla založena pracovní skupina WHATWG7, jejímž cílem je vývoj nové verze HTML5. Kromě rozšíření specifikace značkovacího jazyka HTML zahrnovala i definice důležitých rozhraní pro využití ve skriptovacím jazyku JavaScript. V květnu 2007 bylo odhlasováno, že základem nové specifikace HTML5 se stanou Web Applications 1.0 a Web Forms 2.0 ze specifikace WHATWG [1]. V roce 2008 Ian Hickson vytvořil první návrh specifikace HTML5, která navazuje na HTML4.01. Přidává mnoho užitečných funkcí a zároveň zachovává možnost používat pro zápis stránek XML8 syntaxi a používat tak de facto tagy XHTML. Nicméně, vývoj HTML5 stále neskončil. Plán konečné specifikace HTML 5.0 a verze HTML 5.1 je k dispozici ve [2].
2.2 Kaskádové styly Silným nástrojem v rukou webdesignerů pro popis vzhledu webových stránek se staly kaskádové styly (CSS), neboť mají za úkol popis vzhledu elementů stránky, na rozdíl od značkovacích jazyků HTML, XHTML, které mají obsahu dodávat význam. Použití CSS ve srovnání se samotným HTML přináší řadu výhod, jako jsou oddělení struktury a stylu a tím i jednodušší údržba webové prezentace, možnost definice různých stylů pro různé vstupní zařízení (mobil, PDA, tisk, hlasový syntetizátor, hmatová čtečka) nebo možnost měnit CSS vlastnosti jednotlivých elementů dynamicky pomocí JavaScriptu.
XHTML – eXtensible HyperText Markup Language – značkovací jazyk vycházející z HTML a XML, jehož cílem je zobrazit dokumenty nezávisle na platformě a interpretoru. 7 WHATWG – The Web Hypertext Application Technology Working Group 8 XML – eXtensible Markup Language – značkovací jazyk, jehož cílem je definovat logickou strukturu dat. 6
3
2.3 JavaScript JavaScript je objektově skriptovací jazyk, který se používá jako doplněk webových stránek. Pomocí jazyka JavaScript se stávají webové stránky dynamické, neboť pomocí tohoto nejmodernějšího způsobu tvorby RIA9 aplikací, z nudných statických stránek lze vytvořit stránky, které jsou v prostředí uživatelsky komfortnější se svou funkčností blížící se k desktopovým programům.
RIA – Rich Internet Application – principy uživatelského rozhraní desktopové aplikace použité v prostředí internetového prohlížeče 9
4
3. Specifikace HTML5 Specifikaci HTML5 vyvíjejí dvě různé organizace zmíněné v kapitole 2.1 WHATWG a W3C. Existují tedy dvě verze této specifikace, nicméně běžný vývojář v praxi na rozdíl ve specifikacích nenarazí, neboť jsou tyto specifikace velmi podobné, takže jako základnu pro studium nových prvků HTML5 a souvisejících technologií lze použít kteroukoli z nich. Kapitola představuje současný stav podpory specifikace HTML5 ve webových prohlížečích, dále představuje změny, kterými specifikace HTML5 prošla a na závěr této kapitoly jsou zmíněny nové sémantické elementy.
3.1 Podpora HTML5 Metod jak zjistit, zdali prohlížeč podporuje HTML5 je mnoho. Například lze nalézt na webových stránkách souhrnné informace o konkrétní instanci prohlížeče, na kterém se stránka se souhrnnými informacemi zobrazila. Je zde možnost zjistit verzi daného prohlížeče a výčet podpory elementů a jednotlivých API specifikace HTML5. Na těchto webových stránkách lze taktéž nalézt i ostatní prohlížeče a stav jejich podpory. Mezi nejznámější takto zaměřené webové stránky patří [3, 4]. Další metodou jak zjistit podporu HTML5 může být například použitím DOM10 modelu, kde pomocí globálního objektu window lze zjistit, zdali se v něm vybraný element nachází.
10
DOM – Document Object Model – seznam všech objektů a elementů v prohlížeči
5
Obrázek 1: Zjednodušený pohled dokumentu DOM [autor] V současné době je HTML5 takřka plně podporován v prohlížečích Chrome, Safari a Opera. S horší podporou HTML5 se lze setkat v prohlížeči Internet Explorer, avšak od verze 9 se začíná tento webový prohlížeč vůči HTML5 zlepšovat. 3.1.1 Nástroje pro porovnání výkonu prohlížečů se zaměřením na HTML5 HTML prochází významnou inovací. Proto řada vývojářů řeší otázky zabývající se funkčností na cílových zařízeních. Pro zodpovězení těchto otázek vznikla řada nástrojů pro porovnání kompatibility a výkonu prohlížečů se zaměření na specifikace HTML5. V době psaní této bakalářské práce bylo k nalezení velké množství různě zaměřených nástrojů na testování podpory HTML5. Mezi nejvýznamnější zástupce patří Peacekeeper, WebXPRT a CanvasMark. Peacekeeper je volně dostupný nástroj, který provádí řadu testů týkajících se specifikace HTML5. Test probíhá pět minut, během něhož se přehrávají animace a 6
videa v různých formátech. Na konci testu je vyhodnocení kompatibility prohlížeče a jeho kompatibilita se specifikací HTML5. Jednotlivé testy, mají navíc svá dílčí hodnocení. Jedná se o testy kompatibility se specifikací HTML5, dále o test implementace HTML5 Canvas, operací s DOM, parsování textu, vykreslování a další. Tyto dílčí testy jsou k dispozici po rozkliknutí celkového hodnocení. Celkové hodnocení je počítáno jako geometrický průměr výsledků testovaných skupin vlastností, které jsou zároveň geometrickým průměrem jejich individuálních testů. Test lze nalézt v [5].
Obrázek 2: Zobrazení průběhu testu v nástroji Peacekeeper, převzato z [5] WebXPRT 2013 je zaměřen na kancelářsky orientované webové aplikace. Obsahuje test manipulace fotografií, detekci tváře, off-line aplikace poznámky a zásoby přístrojové desky obsahující tabulky a grafy využívající HTML5 a JavaScript. Uživatel si může vybrat, který z těchto testů chce spustit. Během testu se několikrát načte stránka s testovacím obsahem. Pokud si uživatel spustí všechny čtyři testy, musí počítat s tím, že test poběží kolem třinácti minut. Na konci je zobrazeno vyhodnocení zvoleného testu včetně zhodnocení kompatibility HTML5. Tato sada testů lze nalézt v [6].
7
Obrázek 3: Zobrazení průběhu testu manipulace fotografií v nástroji WebXPRT, převzato z [6] CanvasMark 2013 zkoumá element canvas, hlavně pak výkon vykreslování běžně prováděných operací u her v HTML5, jako jsou vykreslování bitmap, možností výplní, stínů a vykreslení textu. Pro co nejlepší hodnocení benchmarku je zde upozornění pro prohlížeč Chrome, ve kterém je vhodné deaktivovat GPU VSync. To odstraní problém s implementací Chrome z requestAnimationFrame(), která se snaží udržet 60 snímků za sekundu. Tato výjimka poukazuje na fakt, že i specifikaci HTML5 si každý prohlížeč přizpůsobuje po svém. Tento nástroj lze nalézt v [7].
8
Obrázek 4: Zobrazení průběhu testu v CanvasMark 2013, převzato z [8]
3.1.1.1 Zhodnocení prohlížečů ve vybraných testech V následujících řádcích budou použity výše popsané nástroje pro porovnání výkonu prohlížečů se zaměřením na HTML5 za účelem zjištění, jaký je stav jejich kompatibility se specifikací v době psaní této bakalářské práce. K testování byly vybrány prohlížeče Chrome 28, Opera 15, Firefox 23 a Internet Explorer 10. Všechny tyto testy byly prováděny na stolním počítači se systémem Windows 7 s procesorem Intel Core i5 a 8 GB RAM. WebXPRT 2013 ukazuje, že Chrome 28 je prohlížeč nejlépe se hodící na kancelářsky orientované webové aplikace, využívající HTML5. Na druhém místě se umístil Internet Explorer 10. Třetí místo obsadil prohlížeč Firefox 23, po kterém následuje Opera 15, která se umístila na posledním čtvrtém místě.
9
Graf 1: Výsledek testování vybraných prohlížečů ve WebXPRT [autor] V obecném testu, prováděný nástrojem Peacekeeper dopadl nejlépe prohlížeč Chrome 28, který obsadil první místo. Druhé místo patří prohlížeči Opera 15. Na posledním třetím a čtvrtem místě, jsou těsně za sebou Internet Explorer 10 a Firefox 23.
Graf 2: Výsledek testování vybraných prohlížečů v Peacekeeper [autor] Pro vykreslování běžně prováděných operací u her v HTML5 ukazuje nástroj CanvasMark 2013, že Opera 15 má rozhodující náskok v tomto testu. Na druhém místě se umístil Chrome 28 a těsně za ním je Internet Explorer 10, který se umístil na třetím místě. Na posledním místě skončil Firefox 23. 10
Graf 3: Výsledek testování vybraných prohlížečů v CanvasMark 2013 [autor] Pro celkové hodnocení bylo použito měřítko od nuly do jedné, kde jedna náleží vítězi testu. Ostatní prohlížeče jsou počítány jako procentuální část od vítěze testu. V tomto hodnocení zvítězil prohlížeč Opera 15, který se umístil ve všech třech testech na vysokém stupni. Těsně za ním se umístil Chrome 28, kterému prvenství pokazil test v CanvasMark 2013. Na třetím a čtvrtém místě se umístil Internet Explorer 10 a Firefox 23.
Graf 4: Celkové hodnocení prohlížečů v jednotlivých testech [autor]
11
Z provedených testů vyplívá, že prohlížeč Chrome 28 se nejvíce hodí pro kancelářsky orientované webové aplikace a jako prohlížeč, který nejlepe reaguje se specifikací HTML5. Jako univerzální prohlížeč hodící se jak pro kancelářsky orientované webové aplikace tak i pro herní aplikace se stal Opera 15. Internet Explorer 10 dopadl velmi dobře v testu pro kancelářské webové aplikace a Firefox 23 rovněž dosáhl v tomto testu vysokého hodnocení. Nicméně pro hraní her v HTML5 se prohlížeč Firefox 23 hodí již méně.
Graf 5: Celkové hodnocení prohlížečů [autor] 3.1.2 Nástroje pro optimalizaci webových stránek Během vývoje webových stránek lze zhodnotit a zkontrolovat jejich funkčnost přímo v prohlížeči vývojovými nástroji dodávané společně s nimi. Lze tak snadněji zjistit jak optimalizovat rychlost načítání webových stránek v prohlížeči nezávisle na výkonnosti cílového serveru. Mezi zásady jak urychlit načítání patří:
odesílání HTML obsahu prohlížeči postupně, nikoli až potom, co se vygeneruje celá odpověď
11
komprimování textového obsahu pomocí gzip11
asynchronní výměna dat se serverem
spojování obrázků grafického designu do CSS sprites12
gzip – kompresní formát
12
minimalizace velikosti JavaScript kódu pomocí nástrojů jako je Google Closure Compiler nebo YUI Compressor
asynchronní načítání externích knihoven JavaScriptu, jež nejsou nezbytně důležité pro funkčnost stránky (Facebook, Skype)
V následujících řádcích budou krátce představeny dva nejznámější nástroje pro optimalizaci webových stránek. Jedním ze zástupců nástrojů pro optimalizaci je rozšíření Page Speed od společnosti Google, které je dostupné pro prohlížeče Chrome a Firefox. Lze jej také využít online, bez nutnosti instalace doplňků prohlížeče [8]. Nástroj nabízí dva druhy funkcí, a to analýzu webové stránky, kde upozorní na případné problémy a navrhne možnosti, jak tyto problémy odstranit a minimalizovat. Další funkcí je optimalizace, kde nabídne rovněž řadu testů, a pak zpracuje problémové soubory do minimální zátěžové formy s možností okamžitého použití. Bližší informace o nástroji Page Speed jsou dostupné v [9]
Obrázek 5: Ukázka zobrazení PageSpeed v prohlížeči Chrome 28 [autor] Dalším dostupným nástrojem je rozšířením do prohlížeče Firefox nazvané Firebug. Nabízí širší spektrum vývojových nástrojů než jen kontrolu a optimalizaci kódu. Díky nástroji Firebug lze sledovat síťovou aktivitu a přenášené soubory, ladit, upravovat a 12
CSS sprites – umístění většího množství obrázků do jednoho souboru
13
mnoho dalšího. Umožňuje pokročilé vyhledávání v kódu, trasování vyjímek a mnoho dalších užitečných funkcí. Více o nástroji Firebug lze nalézt v [10].
Obrázek 6: Firebug – síťový panel moniturující HTTP komunikaci, převzato z [11] Ulehčení vývoje webových stránek a aplikací je vzhledem k jejich vzrůstající složitosti velmi žádaný a proto vzniká i množství dalších, často úzce specializovaných nástrojů. Výčet dalších, které nebyly zmíněny v předchozím textu lze nalézt v [12].
3.2 Zjednodušení prvků oproti starším specifikacím U HTML5 došlo v mnoha případech ke zjednodušení. První změnou je nová specifikace typu dokumentu. HTML 4.01
HTML5
“http://www.w3.org/TR/html4/loose.dtd“>
Použití nové deklarace DOCTYPE HTML5 přiměje prohlížeč k tomu, aby stránku zobrazil v režimu vyhovujícím standardům, neboť stránky se mohou zobrazovat v různém režimu, jako je například nestandardní quick režim, ve kterém se webový prohlížeč snaží zobrazit stránku i přesto, že není zcela validní nebo například standardní režim (ne-quirk). Deklarace DOCTYPE říká webovému prohlížeči, jaký režim a jaká pravidla se mají použít pro validaci dané stránky [13]. 14
Dále došlo ke zjednodušení a zkrácení znakové sady.
Detailnější výklad vztahující se ke kódování znaků je k dispozici v [14]. Mezi další zjednodušení patří odstranění nutnosti uvádět atribut type během připojování externího skriptu k webové stránce. HTML 4.01
3.3 Nové sémantické elementy Novinkou v HTML5 jsou sémantické elementy, které usnadňují strojům i lidem pochopit smysl a kontext obsahu. Výčet jednotlivých sémantických elementů se nachází v následující tabulce. Element
Popis
header
Definuje záhlaví dokumentu nebo sekce stránky a je možné ho zařazovat jako úvod ke každé sekci svého obsahu (hlavička každého komentáře či novinky).
footer section article
Definuje zápatí dokumentu nebo sekce stránky. Slouží k logickému seskupování obsahu, například rozdělení na sekce rozhraní se záložkami (různé části dlouhé stránky s obchodními podmínkami). Definuje nezávislý obsah článku, (komentáře, články do časopisu nebo novin, položky blogu).
aside
Poznámka stranou (údaje o autorovi, blok reklam).
nav
Definuje oblast s navigací dokumentu nebo její části.
hgroup
Tento element je určen pro seskupení více nadpisů
až
Tabulka 1: Sémantické elementy HTML5 [autor] 15
Na obrázku níže je možné vidět, jak by se daly sémantické elementy použít. Ukázka kompletního dokumentu je k dispozici v příloze č.1: Ukázka HTML5 dokumentu.
Obrázek 7: Zobrazení sémantických elementů v prohlížeči [autor]
16
4. Existující API ve specifikaci HTML5 API ve specifikaci HTML5 existuje celá řada. V této kapitole jsou představena některá API využívající JavaScript, API pro snadnější vkládání multimédií, tvorbu grafiky a další.
4.1 API Formuláře Formulářové API je základním stavebním kamenem webových aplikací. Je však stále ve vývoji a tudíž je obtížné nalézt nové formulářové ovládací prvky, které jsou funkční ve všech cílových prohlížečích. Zda prohlížeč daný element či atribut podporuje, je možné nalézt například v [15]. 4.1.1 Formulářové elementy Výhodou nových HTML5 formulářových elementů je především automatická, nativní validace hodnoty zapsaná do prvku. Nativní validace probíhá i při vypnutém JavaScriptu. Požadavek na provedení validace určuje atribut required zapsaný do formulářového elementu. Tím se značně zjednodušuje tvorba formulářů, jelikož zprávy o chybném obsahu formulářového pole zajistí prohlížeč a tak není potřeba psát validační funkce na straně klienta. Mezi další výhody patří například akceptace zápisu pouze konkrétních platných znaků. Např. do elementu number nelze zapisovat jakékoli písmena. Tuto vlastnost opět nativně zajišťuje webový prohlížeč. Na mobilních zařízeních s dotykovým displejem by měla být nabídnuta omezená klávesnice, obsahující pouze znaky povolené v daném typu elementu. Nicméně formulářové elementy jsou stále ve stadiu vývoje a hledání optimální funkčnosti [16]. 4.1.1.1 Přehled nových input elementů Element email zobrazí odlišné ovládací prvky, pokud je toho prohlížeč schopný (prohlížeč mobilního telefonu nabídne klávesnici uzpůsobenou pro zadání e-mailové adresy) a současně ověří syntax emailové adresy ze zadané hodnoty, před odesláním formuláře. Podobné změny v rozložení klávesnice se nacházejí i u elementů url a search. Naproti tomu ve verzích prohlížeče pro běžné počítače, které explicitně nepodporují typy email,url, search a tel, se zobrazí pouze běžné textové pole.
17
Element range umožňuje uživateli výběr z určitého číselného rozsahu. Lze u něj nastavit atributy max, min, step, určující přípustný rozsah čísla a hodnotu přírůstku. Vnitřní hodnota je číslo ve stanoveném rozmezí a ta závisí na poloze jezdce. Pro jeho nastavení není potřeba mít zapnutý JavaScript. Hodnota nastaveného čísla není přímo viditelná, hodnotu zobrazuje samotná poloha ukazatele. Vhodným elementem pro zobrazení konkrétní hodnoty je pak například output. Níže je možné shlédnout zobrazení elementu range v prohlížečích Opera verze 15, Chrome verze 28 a Internet Explorer (IE) verze 10.
Obrázek 8: Zobrazení elementu range v prohlížeči Opera 15, IE 10 a Chrome 28 [autor] Tento element je vhodné použít v aplikacích, kde není důležitá znalost konkrétní hodnoty. Například u hlasitosti a podobně. Element url umožňuje zápis adresy webové stránky. Například prohlížeč Opera při validaci automaticky doplní http://,pokud ještě není zapsán. Zde se testuje, zda je adresa správně zapsaná, ale již ne, zda adresa existuje. Element search je výraz, který se předá vyhledávači, například vyhledávací pole v horní části prohlížeče. Rozdíl mezi elementem text a search je pouze stylistický. Element search poskytuje lepší vizuální vodítko, a tak uživatel hned ví, kam má zamířit, pokud potřebuje něco vyhledat.
Obrázek 9: Zobrazení elementu search v prohlížeči Chrome 28 [autor] Element color umožňuje výběr barvy ve formě vzorníku.
18
Tento element však v poslední době upadá, neboť v době psané této bakalářské práce je podporovaný již pouze v jednom prohlížeči a to Chrome 28. Byl podporovaný v prohlížeči Opera verze 12, nicméně v nové verzi prohlížeče Opera již element color podporovaný není.
Obrázek 10: Zobrazení elementu color v prohlížeči Chrome 28 [autor] Element tel má význam pro mobilní zařízení, kde nabízí speciální číslicovou klávesnici pro dotykový displej. Element number je pole obsahující číselnou hodnotu. Atributy min, max, step, určují přípustný rozsah čísla a hodnotu přírůstku. Číselnou hodnotu je možné zapsat z klávesnice, nebo nastavit hodnotu pomocí kurzorových kláves. Čísla jsou odeslána na server jako textový řetězec obsahující číslice. Element output zobrazuje výsledky nějakého výpočtu např. výsledek v kalkulačce. Tento prvek lze nahradit prvky div, nebo input s atributem readonly, nicméně za cenu porušení sémantických pravidel specifikace HTML5. Element meter reprezentuje prvek, jehož rozsah je předem znám tj. má pevnou minimální a maximální hodnotu. Příkladem může být třeba velikost obsazení disku. Element meter zobrazuje vodorovný sloupec podle nastavených atributů. Délka sloupce odpovídá poměru aktuální a maximální hodnoty. Je možné nastavit horní a
19
dolní limity, kdy nastane změna barvy sloupce jako upozornění na nízkou, nebo vysokou aktuální hodnotu.
Teplota plotny <meter min="0" max="200" value="100">100°C.
hodnotě. Informuje uživatele o stavu probíhajícího úkolu, aniž by byl definován stav dokončení. Například nahrávání souboru, importu dat. Slouží pro zobrazení postupu v řešení nějakého úkolu, např. stupně vyplnění rozsáhlého formuláře. <progress value="70" max="100">70 %
Obrázek 12: Zobrazení elementu progress v prohlížeči Chrome 28 a IE 10 [autor] Na závěr této podkapitoly bude představena série elementů pro výběr data a času. date umožňuje výběr data. Všechny vstupní elementy pro datum a čas jsou naformátované podle formy ISO 8601. [17] month – umožňuje výběr měsíce v daném roce, př. 2013-07 week – umožňuje výběr týdne (1-52) v daném roce, př. 2012-W02 nebo 28. týden, 2013 datetime – umožňuje specifikovat přesný datum a čas včetně zóny, př. 2012-07-10 13:45 UTC datetime-local – umožňuje určení data a času bez udání časového pásma 20
Obrázek 13: Zobrazení elementu date v prohlížeči Opera 15 a Chrome 28 [autor] 4.1.2 Nové formulářové atributy Atribut autocomplete říká prohlížeči, zda se má zadaná hodnota uložit pro budoucí použití nebo ne. Například když uživatel začne vyplňovat formulářová pole, prohlížeč nabídne seznam dříve vložených textů. Tento atribut by měl fungovat u elementů: form, text, search, url, tel, email, password, range, color a u všech variant elementů pro zadávání data a času. Neměl by se používat u polí, do kterých uživatel zadává citlivé údaje, aby nedocházelo k jejich ukládání v nezabezpečeném lokálním uložišti prohlížeče.
Hodnota
Popis
on
Nejedná se o pole pro citlivé údaje a jeho hodnotu je možné uložit a později znovu použít
off
Jedná se o pole pro citlivé údaje a jeho hodnota by se neměla ukládat.
Odpovídá nastavení nadřazeného formuláře. Pokud takový unspecified formulář neexistuje anebo tento atribut nenastavuje, použije se jako výchozí hodnota on. Tabulka 2: Hodnoty atributu autocomplete [autor] Atribut autofocus umožňuje určit element formuláře, který má získat fokus hned poté, co se načte stránka. Atribut autofocus by měl mít nastavený pouze jeden element v rámci stránky, jelikož chování není definované, pokud by specifikoval tento 21
atribut více elementů. Tento atribut je vhodné použít pouze tam, kde je hlavním cílem vyhledávat, či zadávat hodnoty do formuláře. Atribut placeholder slouží ke specifikaci popisného či alternativního textu vstupního pole, který se v něm zobrazuje, dokud toto vstupní pole není aktivováno. Tento atribut je velkým zjednodušením dříve obcházeného prostřednictvím JavaScriptu. Uplatní se v typech prvků: search,
url,
tel,
email
a
password. Zápis atributu placeholder:
Obrázek 14: Zobrazení atributu placeholder v Internet Explorer verze 10 [autor] Atribut pattern definuje JavaScriptový regulární výraz13, který umožňuje specifikovat vzor, jemuž musí vyhovovat vstup od uživatele, aby byl platný. Příklad využití atributů pattern, placeholder a required zmíněný na začátku této kapitoly: V tomto příkladu je využit atribut pattern pro vynucení požadavku na heslo, které by mělo mít alespoň šest znaků bez mezer. Znaky \S znamenají jakýkoli neprázdný znak a {6,}znamená alespoň šestkrát.
Obrázek 15: Zobrazení atributů pattern a placeholder v Chrome 28 [autor]
Regulární výraz slouží k porovnávání řetězců (textu) proti určitým vzorům. Lze jej využít například ke kontrole formátu PSČ, telefonu a podobně. 13
22
U starších prohlížečů, které nepodporují atribut pattern, je možné tento atribut využít jako základ pro validaci pomocí JavaScriptu. Podobně jako tomu bylo u atributů placeholder nebo required. Více příkladů použití atributu pattern je k dispozici v [18]. Atribut list a datalist element. Element datalist slouží jako tzv. našeptávač. Umožňuje uživateli výběr ze seznamu možností, které jsou definovány pomocí prvku option. Samotný element datalist nic nedělá, proto musí být spojen s atributem list prvku input. Hodnota atributu list musí být stejná jako ID elementu datalist. Rozdíl mezi elementem datalist a v předchozích specifikacích obsaženého elementu select je ten, že u elementu datalist může uživatel zadat různá data. Nemusí se limitovat pouze seznamem předem definovaných možností, jako to umožňuje element select, ale může zadat vlastní hodnotu, pokud mu daný seznam nevyhovuje. V následujícím příkladu je využit prvek list s elementem datalist.
23
Obrázek 16: Zobrazení použití atributu list a elementu datalist v prohlížeči Firefox 23 a Chrome 28 [autor] Atribut multiple umožňuje zadávat do ovládacího prvku formuláře více hodnot, které jsou oddělovány čárkou. Dříve bylo možné tento typ zadávání aplikovat pouze na prvek select, avšak v HTML5 je možné ho přidat i do vstupních typů email a file. Atribut formnovalidate a novalidate jsou logické atributy, které indikují, že odeslaný formulář se nemá na straně prohlížeče validovat. Čili nastaví/zruší nativní validaci formuláře. Atribut novalidate může být aplikován v následujících elementech: form, input type: search, url, tel, password, color, range, email a všechny varianty pro zadávání datumu a času. Atribut formnovalidate může být aplikován na submit nebo na image tlačítka Příkladem použití formnovalidate je situace, kdy uživatel spíše ukládá data, než je publikuje. Údaje mohou být neúplné a neplatné. Nevyžaduje ověření.
24
Atribut novalidate lze využít například v případě, kdy má vývojář v plánu vytvořit si vlastní ověření na straně klienta.
Obrázek 17: Zobrazení kódu s použitím atributů novalidate a formnovalidate [autor] Atribut form nemusí být umístěn uvnitř tagů formuláře. To znamená, že elementy, které bylo dříve možno použít jen v kontextu elementu form je již možné použít i v jiné části dokumentu. Lze jej využít například pro tlačítka v tabulce, které jsou pak propojené s formulářem. Atributy
formaction,
formenctype,
formmethoda,
formtarget
korespondují s atributy definovanými na elementu form. Tyto nové atributy slouží k tomu, aby bylo možné napojit různé akce na různá tlačítka, namísto toho, aby bylo v dokumentu více formulářů. Ukázku a přesný popis fungování lze nalézt v [19], na následujících řádcích budou jednotlivé atributy krátce představeny. formaction - specifikuje soubor nebo aplikaci, která bude předkládat formulář. Má stejný efekt jako atribut action elementu form.
25
(Element form atributu action je nastaven na adresu http://example.com. Atribut formaction přinutí formulář, aby byl odeslán na adresu http://jana.com přes adresu URL zadanou v elementu form).
Obrázek 18: Zobrazení kódu s využitím atributu formaction [autor] formenctype - specifikuje způsob kódování formulářových dat. formmethod - udává způsob odeslání formuláře (get/post). formtarget - udává okno, ve kterém se otevře stránka po odeslání formuláře. Všechny tyto čtyři atributy mohou být použity pouze u submit nebo image tlačítka.
4.2 API geolokace Geolokační API umožňuje uživatelům sdílet informace o jejich poloze prostřednictvím webové aplikace, která poskytuje služby o zjišťování polohy. Se svolením uživatele lze buď jednorázově nebo opakovaně získat jeho aktuální polohu pomocí dat z Wi-Fi, mobilních sítí, GPS a podobně. Uživatel musí ve výchozím nastavení u většiny prohlížečů nejprve dát souhlas k odeslání své současné polohy. Pokud se tak stane, zařízení (například notebook nebo mobilní telefon) získá a odešle polohu uživatele zpět do webové aplikace. Informace o poloze obsahují zejména zeměpisnou šířku a délku, která se reprezentuje dvěma různými způsoby:
Desetinný formát – př. 38,18555
Formát DMS14 - př. 38° 20´ 30´
Toto aplikační rozhraní pracuje jen s desetinným formátem souřadnic. Geolokační API může kromě šířky a délky udávat také informace o přesnosti udávaných souřadnic. Aplikace na základě typu zařízení může obdržet další metadata. Jimi jsou například: altitude vyjadřující nadmořskou výšku, altitudeAccuracy vyjadřující přesnost údaje o výšce, heading směr nebo speed rychlost.
14
DMS - DegreeMinuteSecond
26
Geolokace HTML5 nemá za úkol lokalizaci jako takovou, obstarává pouze cestu pro získání informací. Jejich obstarávání provádí samotné zařízení, na kterém běží prohlížeč, který zachytil požadavek o poskytnutí polohy. Metody, kterými lze určit polohu jsou: Adresa IP – Tento zdroj je dostupný kdekoli, je ovšem také velmi nepřesný. Lokalizace podle adresy IP probíhá na základě dohledání informace o fyzické adrese registrátora této IP. To znamená, že pokud má uživatel poskytovatele, který mu přidělí adresu IP na druhé straně státu, tak výsledkem lokalizace bude zpravidla fyzická adresa tohoto poskytovatele. GPS (GlobalPositioningSystem) – Díky GPS lze získat velmi přesné údaje. Nicméně tento způsob lokalizace nelze použít v budovách, ale jen na takovém prostranství, kde je přímý výhled na oblohu. Jedná se o velice přesnou metodu lokalizace, může však trvat dlouhou dobu než dojde k jejímu zjištění. Podle MAC adresy Wi-Fi, RFID nebo Bluetooth, mobilních sítí a podobně – Lokalizace pomocí Wi-Fi či mobilní sítě funguje na bázi triangulace polohy podle vzdálenosti uživatele od několika dostupných bodů v oblasti, respektive Wi-Fi zařízení a vysílacích stanic. Tato lokalizace je nepřesná, ale funguje i v budovách. Základní metodou pro získání polohy je metoda getCurrentPosition(), která přebírá jednu, dva nebo tři parametry. Povinným je však pouze callback funkce. Ta je zavolána poté, jakmile je určena poloha. Objekt Position má celkem dva atributy: coords, který souřadnice polohy a timestamp, který obsahuje datum a čas zaměření. Zeměpisná šířka a délka je potom uložena uvnitř objektu Coordinates, který definuje následující atributy:
27
Atribut latitude longitude altitude accuracy altitudeAccuracy heading speed
Popis zeměpisná šířka zeměpisná délka nadmořská výška přesnost hodnot pro zeměpisné šířky a délky přesnost nadmořské výšky směr pohybu uživatele (úhel, který svírá směr pohybu se směrem k severu) rychlost pohybu
Tabulka 3: Seznam atributů objektu Coordinates [autor] Metoda getCurrentPosition() může mít další parametr a tím je objekt s doplňkovými volbami enableHighAccuracy, který spouští vyšší přesnost zjištění polohy, timeout pro udávání počet milisekund, který chce aplikace věnovat zjištění polohy a maximumAge pro určení práce s cache polohy. Další informace o API Geolokace s příkladem jejího využití je v [20].
4.3 API Canvas V počátcích sítě internet bylo nutné vkládat do webových aplikací obrázky již hotové, vytvořené v rastrových grafických editorech v několika málo podporovaných formátech. K vkládání rastrových obrázků od počátku sloužil element . Pokud bylo potřeba vytvořit animaci, byla nejčastěji použita technologie Flash nebo animovaný obrazový formát GIF. V současné době je díky API Canvas umožněno pomocí jazyka JavaScript dynamicky generovat a vykreslovat grafické prvky jako například animace, obrázky či grafy, bez nutnosti využívat potřebné knihovny na straně serveru při generování webové stránky, Flash nebo jiné zásuvné moduly využívané na straně klienta. Element canvas se zobrazuje na webové stránce a zabírá prostor, který je definován určitou výškou a šířkou.
28
Vytvořené plátno se ve webovém prohlížeči zobrazí jako obdélník o rozměrech 300x300 pixelů, ohraničený souvislou čárou o tloušťce jednoho pixelu. Canvas nemá žádné výchozí stylování, takže aby byl na stránce vizuálně rozpoznatelný, je třeba mu specifikovat kolem plátna rámeček pomocí jazyka CSS. Text mezi začínajícím a ukončovacím tagem canvas se objeví pouze tehdy, pokud daný prohlížeč tento prvek nepodporuje. Aby bylo možné začít kreslit je třeba pomocí atributu id vyhledat grafický kontext plátna, tedy plochu, kam se bude realizovat samotné kreslení. Tento grafický kontext lze získat metodou getContext()prvku canvas, do které je jako parametr přidán řetězec 2d. Pokud by bylo třeba kreslit v trojrozměrném prostoru, lze využít WebGL API. Tuto specifikaci spravuje Khronos Group společně s pracovní skupinou, která zahrnuje společnosti Apple, Mozilla, Google a Opera. Bližší informace o WebGL lze nalézt v [21]. functionMyCanvas() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext ("2d"); } Získaný kontext je nyní možné použít ke kreslení na grafické plátno. Nejdříve je třeba nadefinovat barvu pro obrys a výplň obrazce. Atributy funkcí strokeStyle() pro ohraničení obrazce a fillStyle() pro výplň nastavují následující hodnoty: řetězec reprezentující barvu, instanci třídy CanvasGradient, nebo CanvasPattern. Barva obrysu nebo výplně může být určena prostřednictvím libovolné platné hodnoty CSS pro barvu, která se specifikuje jako řetězec. Může být použita hexadecimální hodnota, jako je #3300CC, slovní název barvy, RGB15 či RGBA16 hodnota. RGBA formát zápisu hodnoty se používá v případě, pokud je potřeba nastavit průhlednost dané barvy. Posledním typem jak určit hodnotu barvy je pomocí barevného modelu HSL17, kde odstín je definován od 0 do 360 a sytost a světlost má hodnoty v rozsahu 0 až 100 (procent).
Ke kreslení obdélníku, který bude mít určitou barvu ohraničení a výplně by byly využity metody fillRect()a strokeRect(), kde obě tyto metody přebírají souřadnice X a Y, které specifikují, kde začít kreslit a dále šířku a výšku obdélníku (v pixelech). Kromě zadávání barvy je možné pro atribut fillStyle() použít jako parametr instanci třídy CanvasGradient, definující barevný přechod postupnou změnou barvy po ploše objektu. Pokud jsou zadány při vytváření objektu přechodu souřadnice bodů A a B jako parametry, dojde k vytvoření přechodu barvy směřující od bodu A do bodu B. API obsahuje dva typy gradientů a to lineární a radiální gradient. U linearGradient() reprezentují x0, y0 počáteční umístění gradientu, x1 a y1 pak reprezentují koncové umístění gradientu. Použití gradientu vyžaduje vytvoření objektu samotného přechodu, nastavení barevných mezí objektu přechodu určujících změny barvy přechodů a nastavení přechodu jako hodnoty atributům fillStyle(), resp. strokeStyle(), instance kontextu. K určení toho, jaké barvy se mají zobrazit, je možné použít metodu addColorStop() objektu přechodu. Tato metoda bere dva parametry, kterými jsou pozice a barva. Barvou se zde rozumí barva, která se má aplikovat na tah nebo výplň na zadané pozici. Pozice se zadává jako hodnota v rozmezí 0.0 až 1.0, která určuje, jak daleko má přechod sahat. RadialGradient() pak umožňuje specifikovat dvě kruhové oblasti, ve kterých se aplikují barevné meze na oblast mezi dvěma kruhy. Radiální přechod používá stejné barevné meze jako lineární přechod, avšak přijímá odlišné parametry. V metodě radialGradient() reprezentují první tři parametry kruh se středem na pozici x0, y0 a poloměrem r0, poslední tři parametry reprezentují druhý kruh na pozici x1, y1 s poloměrem r1. Přechod se vykreslí v oblasti nacházející se mezi dvěma kruhy. Jako příklad je vykreslen obdélník, jenž využívá linearGradient(). Nejprve je definován linearGradient() popsaný výše, poté jsou definovány příslušné barvy objektu přechodu. Dále je spojena výplň objektu s gradientem a na závěr je vykreslen samotný obdélník pomocí metod fillRect() a strokeRect(). $('document').ready(function(){ draw(); });
30
function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // Určení lineárního přechodu createLinearGradient(začátekX, začátekY, konecX, konecY) var gradient = context.createLinearGradient(0, 0, 80, 100); // Určení barev přechodu gradient.addColorStop(0,"#009933"); gradient.addColorStop(0.5,"white"); gradient.addColorStop(1,"FF0000"); // vykreslení obdélníku, kde fillRect (x, y, šířka, výška), strokeRect(x, y, šířka, výška) context.fillStyle = gradient; context.fillRect(10,10,100,50); context.strokeStyle = "FF6600"; context.strokeRect(10,10,100,50); }
Obrázek 19: Zobrazení výsledku obdélníku [autor] Ukázka využití metody radialGradient() z předchozího příkladu. // Radiální přechod - createRadialGradient(začátekX, začátekY, začátekPoloměru, konecX, konecY, konecPoloměru) var gradient = context.createRadialGradient(60, 35, 40, 60, 35, 0); // Určení barev přechodu gradient.addColorStop(0,"#009933"); gradient.addColorStop(0.5,"white"); gradient.addColorStop(1,"FF0000");
31
// vykreslení obdélníku, kde fillRect (x, y, šířka, výška), strokeRect(x, y, šířka, výška) context.fillStyle = gradient; context.fillRect(10,10,100,50); context.strokeStyle = "FF6600"; context.strokeRect(10,10,100,50);
Obrázek 20: Zobrazení výsledku obdélníku s použitím metody radialGradient() [autor] Pro další stylizaci by mohl být použit efekt vrženého stínu. Stín se aplikuje na každou cestu, text či obrázek, má-li vlastnost shadowColor, který je nastaven dříve než samotný obrazec. Kvůli zachování konzistence je vhodné kreslit stíny v rámci plátna pouze jedním způsobem. Pro stínování je využita zmíněná vlastnost shadowColor, která může obsahovat alfa složku, dále shadowOffsetX, kde kladné hodnoty posunují stín doprava a záporné doleva, shadowOffsetY, kde kladné hodnoty posunují stín dolů, záporné nahoru a v neposlední řadě shadowBlur, kde vyšší hodnoty způsobují větší rozmazání hran stínu. K obdélníku z předchozího příkladu bude připojen následující kód pro vytvoření modrého stínu. Nejprve je definována barva stínu, poté jeho rozostření. Dále je třeba nadefinovat posunutí stínu a na závěr je nadefinováno jeho vykreslení. context.shadowColor = "#9999FF"; context.shadowBlur = 10; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.fillRect(10,10,100,50);
32
Obrázek 21: Zobrazení výsledku obdélníku s použitím metody stínu [autor] Obrázek je již nakreslen se všemi barevnými efekty a stíny. Někdy je nutné provést s hotovým obrázkem dodatečné transformace, jako otočení, naklonění či změnu velikosti. Na systém transformací lze nahlížet jako na modifikační vrstvu nacházející se mezi zadanými příkazy a výstupem na plátno. Tato vrstva se v objektu plátna nachází vždy, i když se s ní zrovna nepracuje. Objekt transformace má řadu metod: rotate() – otočení souřadnicového systému, zadává se v radiánech transform() – vytvoření stínu jeho nakloněním scale() – změna velikosti obrazu na ose x a y restore() – obnovení stavu kontextu translate() – posunutí o offset na osách x a y save() – uložení aktuálního stavu transformace do zásobníku restore() – obnovení původního nastavení V následujícím příkladu je použit obdélník vykreslený jako první v této kapitole a ke kopiím tohoto původního obrázku je připojena metoda transform(). V následujícím kódu je pouze jeden obdélník s transformací. Druhý obdélník s transformací je totožný s tímto. context.transform(1,0.5,-0.5,1,30,10); var gradient = context.createLinearGradient(0, 0, 80, 100); gradient.addColorStop(0,"#009933"); gradient.addColorStop(0.5,"white"); gradient.addColorStop(1,"FF0000"); 33
context.fillStyle = gradient; context.fillRect(10,10,100,50); context.strokeStyle = "FF6600"; context.strokeRect(10,10,100,50); Celý zdrojový kód nacházející se v elementu script se nachází v příloze č.2: Ukázka využití metody transform()
Obrázek 22: Zobrazení výsledku obdélníku s použitím metody transform() [autor] Ke kreslení čar lze využit metody beginPath(), moveTo(), lineTo() a stroke(). Metoda beginPath() nebere žádné parametry, pouze signalizuje plátnu úmysl vytvořit popis nového obrysu. Tato metoda určuje vnitřní a vnější část vytvářeného obrysu pro pozdější výplně a výtahy. Metoda moveTo() přesune bez kreslení aktuální pozici do nového umístění, resp. přesune pero do určeného počátečního bodu. Metoda lineTo() pak přesune aktuální pozici do nového umístění a nakreslí čáru z aktuální do nové pozice. Na plátně se úsečka nezobrazí, dokud se cesta nevytáhne anebo nevyplní. Zatím se pouze definují jednotlivé pozice cesty, aby je bylo možné posléze vykreslit. Další metoda je metoda closePath(). Tato metoda se svým chováním podobá metodě lineTo(), pouze s tím rozdílem, že se za cílovou pozicí automaticky považuje počáteční pozice cesty. Metoda 34
closePath() navíc také informuje plátno, že došlo k uzavření daného obrysu, případně k vytvoření zcela samostatné oblasti. Tato informace je využita pro budoucí výplně a výtahy. Pokud by bylo potřeba nakreslit křivku, lze využít metody quadraticCurveTo(), bezierCurveTo(), arcTo() a arc(). Metoda quadraticCurveTo() začíná na aktuální pozici a jako parametry bere souřadnice dvou pozic. Druhý parametr představuje koncový bod křivky, první řídící bod. Řídící bod se nachází vedle křivky a chová se v podstatě jako gravitační táhlo bodů tvořících křivku. Změnou umístění řídícího bodu je možné upravit zakřivení kreslené cesty. Metoda bezierCurveTo() má podobné parametry jako kvadratická křivka, s tím rozdílem, že pro její vytvoření je potřeba určit dva kontrolní body. U dalších dvou metod, arcTo() a arc() se určují souřadnice středu X a Y, rádius, počáteční a konečný úhel a logická proměnná pravda/nepravda určující, zda má dojít k vykreslení po nebo proti směru hodinových ručiček. Hodnota false tedy znamená, že oblouk bude vykreslen po směru hodinových ručiček. Na následujících řádcích je představen příklad s využitím metody quadraticCurveTo(). // signál začátku kreslení context.beginPath(); // definování místa začátku kreslení context.moveTo(30,10); // definování křivky - quadraticCurveTo (kontrolníBodX, kontrolníBodY, konecX, konecY) context.quadraticCurveTo(20,150,300,50); // tloušťka čáry context.lineWidth = 5; //barva context.strokeStyle = "CC3300"; // vytažení cesty context.stroke();
35
Obrázek 23: Zobrazení výsledku s využitím metody quadraticCurveTo() [autor] Kromě kreslení čar lze vykreslit na plátno i text. Vykreslování textu na plátně se provádí stejným způsobem jako v případě jakékoli jiné cesty – text je možné vytáhnout, vyplnit nebo je možné na něj aplikovat transformace a styly. Kreslení textu je v režii dvou metod kontextu fillText() a strokeText(). Obě metody berou jako své parametry text, společně s pozicí, na které se má nakreslit. Volitelně je možné zadat také parametr maxwidth, který omezuje velikost textu a automaticky zmenšuje velikost písma tak, aby se text vešel do vyhrazeného prostoru. K dispozici je také metoda measureText(), která vrací objekt obsahující informaci o šířce zadaného textu, vykreslí-li se s použitím aktuálního nastavení kontextu. Vzhled textu lze nadefinovat s použitím vlastností objektu kontextu. Příklad využití metody strokeText(): function draw() { // velikost a typ písma context.font="65px Cambria"; // barva obrysu context.strokeStyle = "#0066CC"; // text a jeho umístění – strokeText("Text", x, y) context.strokeText("UHK",10,50); }
Obrázek 24: Zobrazení příkladu s využitím metody strokeText() [autor] Příklad využití metody fillText(): function draw() { // velikost a typ písma context.font = "65px Cambria"; // barva výplně 36
context.fillStyle = "#990066"; // text a jeho umístění - fillText("Text", x, y) context.fillText("UHK",10,150); }
Obrázek 25: Zobrazení příkladu s využitím metody fillText() [autor] Před tím, než se začne kreslit, je důležité si uvědomit, že souřadnicový systém plátna má jiný počátek než běžně matematicky využívaný kartézský souřadnicový systém. V souřadnicovém systému prvku canvas je počátek umístěn v levém horním rohu, oproti běžně používanému levému dolnímu rohu.
4.4 API WebSocket Mít aktuální data v reálném čase bylo něco, o co se weboví vývojáři pokoušeli řadu let. Technologie využívaná za tímto účelem se nazývá AJAX18. Na něm je založeno velké množství interaktivních webových aplikací, jako Gmail, Google Maps a další. AJAX využívají i mnohé varianty komunikace směrem od serveru na klienta, jako aplikační model Comet [22]. Rozdíl mezi technologii AJAX a Comet spočívá v tom, že AJAX umí inicializovat požadavek pouze ze strany klienta. Server, pokud k němu není klient připojen, neumí zasílat data na stranu klienta. To se obchází různými způsoby19 a jedním z těchto způsobů je právě Comet.
Technologie pro vývoj interaktivních webových aplikací, které umožňují měnit obsah stránek bez nutnosti jejich znovunačtení. 19 Perzistentní připojení ze strany klienta na server, pravidelné dotazování ze serveru na nová data, a podobně. 18
37
Obrázek 26: Rozdíl mezi technologií AJAX a Comet, převzato z [23] API WebSocket je novou technologii specifikace HTML5, která definuje obousměrnou komunikaci mezi klientem a serverem. Díky WebSocket je mnohem snazší vytvářet realtimové aplikace, jako jsou online chaty, multiplayer online hry a další. Data lze odeslat bez režie hlavičky HTTP protokolu, a tím se výrazně snižuje velikost přenášených dat.
38
Obrázek 27: Zjednodušení realtimové komunikace pomocí WebSocket, převzato z [24] Spuštění API WebSocket se provádí pouhým voláním konstruktoru WebSocketu: var connection = new WebSocket(’ws://localhost:9394/’); Prefix „ws://” je nové schéma URL pro WebSocket. Lze použít i „wss://“, které slouží pro bezpečné připojení pomocí SSL. V následující tabulce je výčet atributů, metod a událostí objektu, které se v API WebSocket používají.
39
Atributy objektu readyState
bufferedAmount Metody objektu send() close()
Události objektu onopen() onmessage() onclose()
Popis vyjadřuje stav připojení. Má hodnoty: CONNECTING - 0 - připojení nebylo dosud navázáno, OPEN - 1 navázání spojení a komunikace je možné, CLOSED - 2 Spojení bylo ukončeno, nebo nelze otevřít vrací počet bajtů, které jsou ve frontě, ale dosud nebyly odeslány. slouží k posílání zpráv slouží k zavření připojení WebSocketu nebo pokus o připojení. je volána po ustanovení spojení se serverem se spouští ve chvíli, kdy ze serveru přijde zpráva se spouští při ztrátě spojení
Tabulka 4: Výčet atributů, metod a událostí, které WebSocket využívá [autor] Tento výčet vystihuje pouze spojení na straně klienta, neboť WebSockets jsou implementovány v JavaScriptu jako třída WebSocket. Vývojář tak může vytvořit instanci této třídy, a pokud server tuto technologii podporuje, může tak navázat spojení se serverem. Pro spojení na straně serveru je nutné implementovat jedno z již existujících řešení, jako je například .NET, Ruby, nebo Node.js které dokáže udržet velký počet připojení, otevřených současně, při nízkých nákladech na výkon. Více o API WebSocket lze nalézt v [25].
4.5 API Web Workers API Web Workers umožňuje webovým aplikacím provádět operace na pozadí. Tyto operace je zpravidla možné spouštět v samostatných vláknech, proto se používá na provádění dlouho trvající operace, aniž by zablokoval obsluhu události uživatelského rozhraní. JavaScript neumožňuje psaní vícevláknových aplikací. Web Workers však dovolují, aby JavaScript zpracováva více operací najednou. Díky tomu je například možné načíst soubor JavaScript kódu, který se samostatně vykoná na pozadí, aniž by se blokovalo uživatelské rozhraní při jeho běhu. Web Workers má však omezení v podobě zamezení přístupu k prvkům na webové stránce a rozhraní DOM.
40
Obrázek 28: Porovnání DOM webové stránky a Web Worker, převzato z [26] K využití API Web Workers je třeba vytvořit objekt Web Worker a zadat mu soubor s kódem v jazyce JavaScript, který se má spustit. worker = new Worker("worker.js "); Ve stránce je dále zapotřebí nastavit obsluhu několika událostí (message, error) a zajistit zpracování příchozích a odchozích zpráv a chyb. Komunikaci s hlavní stránkou a instancí Web Worker provádí metoda postMessage(). document.getElementById("result ").onclick = function() { worker.postMessage("WebWorker dokončil úlohu "); } Ve výše uvedené ukázce kódu dojde po stisknutí uživatelem určeného tlačítka k tomu, že webová stránka odešle zprávu instanci Web Worker. Registrace obsluhy události message, která zajišťuje příjem zpráv od instance Web Worker, se provádí takto. worker.addEventListener("message", messageHandler, true); function messageHandler(e) { // zpracování zprávy od instance Web Worker } Poté je třeba dalších úkonů jako je vytvoření skriptu instance Web Worker, ošetření chyb ve skriptu instance Web Worker a následně je třeba ukončit danou instanci.
41
Tyto a další úkony je třeba provést pro správné fungování Web Worker. Bližší informace o Web Worker lze nalézt v [27, 28].
4.6 API Web Storage Za předchůdce API Web Storage lze považovat Cookies, které umožňují ukládání krátkých textových hodnot na klientovi. Jejich nevýhody jsou omezená velikost (nanejvýš okolo 4 KB dat), zvyšování síťového provozu a viditelnost pro všechny webové stránky (pokud nejsou šifrovány). API Web Storage tyto nevýhody odstraňuje. Pomocí API Web Storage lze snadno ukládat data do webového prohlížeče. Je bezpečnější a rychlejší, neboť data nejsou součástí každého požadavku na server jako tomu je u Cookie, [29] navíc, umožňují ukládání dat o velikosti až několika megabajtů. API Web Storage má k dispozici dva nové objekty pro ukládání dat na straně klienta: SessionStorage - slouží pro ukládání krátkodobých dat. Toto uložiště není trvalé, trvá pouze po dobu relace s webovou aplikací. Pokaždé, když uživatel otevře stránku v novém okně/záložce, bude mít svůj vlastní objekt SessionStorage. LocalStorage – je funkčně shodný se SessionStorage, ale umožňuje ukládat data dlouhodobě. Data zůstávají k dispozici i ukončení a znovuspuštění webového prohlížeče či okna s danou webovou aplikací. Metoda setItem() getItem() clear() removeItem() key() parseInt()
Popis přidá pár (klíč / hodnota) do objektu sessionStorage načte hodnotu pro daný klíč odstraní všechny páry (klíč / hodnota) pro objekt sessionStorage odstraní konkrétní položku. Odstraní se (klíč / hodnota) z objektu sessionStorage načte hodnotu klíče. převod hodnoty jako řetězce na hodnotu jako číslo
Tabulka 5: Přehled metod, které se využívají v API WebStorage, převzato z [30] Bližší informace lze nalézt v [31].
42
4.7 Audio a video v HTML5 Elementy audio a video patří mezi hlavní novinky HTML5, neboť díky nim není již nutné instalovat software či ovladače cizí firmy (Adobe Media, Microsoft Silverlight, Flash Player), aby si uživatel mohl přehrát video nebo audio na webové stránce. Multimédia se tak stala bezproblémovou součástí webové stránky. 4.7.1 Element audio V první řadě je třeba zmínit podporu jednotlivých kodeků20 elementu audia ve vybraných prohlížečích. Kodek AAC MP3 Ogg Vorbis Ogg Opus WebM
Opera 15 ne ne ano ne ano
Chrome 28 ano ano ano ne ano
IE 10 ano ano ne ne ne
Firefox 22 ano ano ano ano ano
Safari 6.0 Ano Ano Ne Ne Ne
Tabulka 6: Přehled podpory kodeků elementu audia v prohlížečích [autor] Jak je z tabulky patrné, element audio nemá základní kodek, který by byl univerzální pro všechny prohlížeče. Proto je třeba publikovat zvukový soubor přinejmenším ve dvou formátech. Z tohoto důvodu specifikace HTML5 obsahuje prvek source, který umožňuje prohlížeči vybrat si zdroj, jenž nejlépe vyhovuje možnostem přehrávání, jimiž oplývá. Pokud prohlížeč podporuje více zdrojů, vybere si první podporovaný kodek. Prvek source má atributy type a media. Atribut type, jehož hodnota obsahuje MIME typ s nepovinným parametrem codecs, specifikuje mediální typ odkazovaného mediálního zdroje. Díky tomuto atributu může prohlížeč spolehlivěji určit, zdali dokáže přehrát odkazovaný mediální zdroj, aniž by tyto mediální data musel načíst. Atribut media pomáhá prohlížeči vybrat první přijatelný mediální zdroj, resp. zdroj ušitý na míru z uvedeného seznamu zdrojů. Na následujících řádcích je ukázka využití prvku source a jeho atributu type, který vyjadřuje vložení audia ve formátech MP3 a Ogg Vorbis.
Kodek – slouží ke kódování dat za účelem přenosu, uložení nebo zašifrování a dekódování za účelem přehrávání nebo editování audia či videa do nebo z určitého formátu za účelem snížení objemu dat 20
43
V následující tabulce je k dispozici výčet atributů využívající element audio. Atribut
Popis
autoplay
Začne hrát automaticky, hned jak prohlížeč stáhne a dekóduje dostatek audio dat. Audio soubor se přehraje pouze jednou.
Použití atributu loop spolu s atributem autoplay vede k neustálému přehrávání hudby. Akceptuje jednu ze tří hodnot: none - nepředpokládá se, že by uživatel skutečně přehrál mediální zdroj. Minimalizace obsazení šířky pásma (například: archiv zvukových souborů). preload metadata - nepředpokládá se, že by se daný mediální zdroj přehrál, ale informace, které jsou uloženy v metadatech (doba trvání) je žádoucí. auto - předpokládá se, že se zdroj audia skutečně přehraje. Slouží k co nejrychlejšímu využití šířky pásma, aby se audio spustilo co nejdříve. (například: stránka podestu). Src Odkaz na mediální zdroj, hodnotou je URL adresa. muted Slouží ke ztlumení právě přehrávaného mediálního zdroje. mediagroup Slouží pro spojení souborů stejného typu do jednoho celku. controls Zobrazení ovládacích prvků. Look
Tabulka 7: Přehled atributů využívajících element audio [autor] 4.7.2 Element video Ani element video nemá žádný základní společný kodek. Proto je třeba brát v úvahu alespoň dva formáty, pokud chce vývojář pokrýt všechny prohlížeče, jenž element video podporují. Kodek MPEG-4 H.264 Ogg Theora WebM
Opera 15 Chrome 28 ne ne ne ano ano ano ano ano
IE 10 ne ano ne ne
Firefox 22 ne ano ano ano
Safari 6.0 ano ano ne ne
Tabulka 8: Přehled podpory kodeků elementu video v prohlížečích [autor]
44
Stejně jako u elementu audio, i zde lze použít prvek source s jeho atributy src a type, který umožní prohlížeči vybrat si zdroj, jenž mu vyhovuje. Atributy src, autoplay, loop, controls, preload zmíněné v podkapitole o elementu audio se využívají i pro element video. Element video je dále rozšířen o následující atributy: Atribut
Popis Umožňuje specifikovat explicitní obrázek, který bude sloužit jako Poster obrázek reprezentativní. Hodnotou je URL směřující na daný obrázek. Width Šířka videa v pixelech. Height Výška videa v pixelech. Umožňuje nastavit způsob, jakým bude element video řídit crossorigin požadavky z jiného zdroje, než je doména webové aplikace. Tabulka 9: Přehled atributů využívajících element video [autor] Více informací k elementům audio a video HTML5 lze nalézt v [32].
4.8 Off-line API Čím dál více je využíván přístup k Internetu, ať už doma na svém počítači či venku přes mobilní telefon. Jsou však i nadále místa, kde internetové připojení k dispozici není (v metru, na palubě letadla, …). A tak jsou uživatelé využívající mobilní zařízení s přístupem na Internet nuceni na takovýchto místech přerušit svou činnost. Díky offline webové aplikaci HTML5 již lze vytvářet obsah e-mailů, editovat či zobrazovat dokumenty a prezentace, vytvářet poznámky či pracovat s on-line seznamy úkolů v době, kdy uživatel není připojen k Internetu. 4.8.1 Technologie Off-line Off-line webové aplikace využívají takzvanou aplikační cache. Co má být v aplikační cache uloženo, deklaruje autor webové aplikace v manifest souboru. Pokud by uživatele zajímalo, která data se nacházejí v aplikační cache, lze tuto informaci získat v prohlížeči Firefox verze 22 a výš, kde na stránce about:cache nalezne detailní informace o jejím obsahu a využití.
45
Obrázek 29: Obsah aplikační cache v prohlížeči Firefox verze 22 [autor] Vytváření webové aplikace, aby fungovala v režimu off-line, se provádí ve třech krocích. Nejprve je vytvořen soubor manifest, do kterého se uvádí seznam všech souborů webových aplikací na straně klienta, které mají existovat v aplikační cache klientského prohlížeče pro případ práce ve stavu off-line, např. application.manifest. Tento soubor má tři části: cache, za kterým následuje seznam všech souborů, které je třeba ukládat na pevný disk návštěvníka, network, za kterým následuje seznam všech souborů, které se budou načítat vždy ze serveru, a tudíž nebudou nikdy dostupné v režimu off-line a v části fallback se uvádí alternativní cesty k souborům, které nejsou dostupné. Obsah tohoto souboru by mohl vypadat následovně: CACHE MANIFEST CACHE: #soubory, které se uloží do aplikační cache# index.html styly.css bobik.jpg /javascript/app.js NETWORK: #soubory, které nejsou nikdy načítány z aplikační cache, tudíž nebudou k dispozici off-line# script.js obrazek.jpg prihlaseni.html 46
FALLBACK: #alternativní cesty k souborům, které se nepodařilo načíst# přihlaseni.html offline.html Dále je třeba zajistit, aby soubor manifestu byl obsluhován se správným MIME typem. Posledním bodem je připojení manifest souboru k webové stránce jako atribut do elementu html. V okamžiku, kdy webový prohlížeč načte stránku, která obsahuje soubor manifest, zavolá řadu událostí na objekt window.applicationCache. Objekt zpřístupněný pod proměnnou applicationCache nabízí vlastnost status, která indikuje aktuální stav obsahu aplikační cache. Vrací následující numerické hodnoty: 0
UNCACHED
Stránka nemá přiřazen manifest, nebo ještě nebyla načtena
1
IDLE
Aplikační cache je aktuální a kompletní
2
CHECKING
Prohlížeč posuzuje aktuálnost manifestu
3
DOWNLOADING
Stahování nového obsahu do aplikační cache
4
UPDATEREADY
Připraveno pro update
5
OBSOLETE
Manifest nenalezen, aplikační cache bude vyprázdněna
Tabulka 10: Možné stavy aplikační cache, převzato z [33] Celý průběh událostí po zavolání na object window.applicationCache je popsán v [34].
47
5. Implementace vybrané úlohy Pro předvedení některých prvků ze specifikace HTML5 byla zvolena webová aplikace založená na plošinové hře, jež dostala název JessGame. Prostředí této plošinové hry je typické ostatním hrám tohoto žánru. Herní prostředí obsahuje cesty, po kterých se herní avatar pohybuje a úskalí, které musí překonávat.
Obrázek 30: Hra JessGame [autor] Tato webová aplikace je vytvořena pomocí jazyka JavaScript a rozhraní canvas ze specifikace HTML5. Rozhraní canvas zde hraje důležitou roli pro vykreslení překážek, herního avatara a také pro vykreslení textu, pokud hráč dovede hru do úspěšného či neúspěšného konce. Následující kód metody createPattern() vkládá vzor trávníčku do hracího světa, fillStyle() jej vykresluje a clearRect() zajišťuje vyčištění herní plochy. var image = new Image(); function drawPattern(){ ctx.fillStyle = ctx.createPattern(image, "repeat"); ctx.clearRect(0, 0, width, height); ctx.beginPath(); } image.src = "images/pole2.png"; image.onload = drawPattern;
48
Herní avatar je definován svou výškou, šířkou, horizontální a vertikální rychlostí pohybu. Ty určují, jak rychle se herní avatar pohybuje po herním světě. Pro jeho pohyb je pomocí kláves nejdříve nutné definovat událost stisknutí kláves pomocí metody eventListener() a poté je třeba přidat aktuální interakce. Ty kontrolují, jaká tlačítka jsou opravdu stisknuta uživatelem a následně zvyšují nebo snižují rychlost pohybu avatara. K dispozici je rovněž kontrola, která omezuje rychlost, aby se nepohyboval moc rychle. Pohyb pomocí kláves je definovány v této hře následujícím kouskem zdrojového kódu. // kontrola if (keys[38]) { // šipka nahoru if (!player.jumping && player.grounded) { player.jumping = true; player.grounded = false; // nejsme ještě na zemi player.velY = -player.speed * 2; } } if (keys[39]) { // šipka vpravo if (player.velX < player.speed) { player.velX++; } } if (keys[37]) { // šipka vlevo if (player.velX > -player.speed) { player.velX--; } } player.velX *= friction; player.velY += gravity; Během pohybu avatara po herním světě, je nutné řešit kolize s objekty v herní scéně. Detekce kolizí je řešena pomocí výpočtu vzdálenosti herního avatara od každého z herních objektů. Pokud je tato vzdálenost menší než součet polovin rozměru řešeného objektu a herního avatara, je detekována kolize. function colCheck(shapeA, shapeB) { // kontrola kolize var vX = (shapeA.x + (shapeA.width / 2)) (shapeB.x + (shapeB.width / 2)), vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)), 49
// přidání poloviční šířky a poloviční výšky objektů hWidths = (shapeA.width / 2) + (shapeB.width / 2), hHeights = (shapeA.height / 2) + (shapeB.height / 2), colDir = null; // pokud jsou x a y vektory menší než je polovina šířky nebo polovina výšky, způsobí kolizi if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) { // řeší, na které straně se objekty střetli.(nahoře, dole, vpravo,vlevo) var oX = hWidths - Math.abs(vX), oY = hHeights - Math.abs(vY); if (oX >= oY) { if (vY > 0) { colDir = "t"; shapeA.y += oY; } else { colDir = "b"; shapeA.y -= oY; } } else { if (vX > 0) { colDir = "l"; shapeA.x += oX; } else { colDir = "r"; shapeA.x -= oX; } } } return colDir; } Po vykreslení objektů, přidání kolize a funkčnosti herního avatara je třeba přidat objekty nepřátel a rozpohybovat je. Následující ukázka kódu představuje pohyb nepřátel v herním světě. // změna pohybu příšer po 100-250 pohybech if(currentIteration == 0 || currentIteration > monsterMoves) { // každá příšera má nastaven pohyb doleva nebo doprava, náhodně moveMonster1 = Math.round(Math.random()*2) + 1; monsterMoves = Math.round(Math.random()*150) + 100; currentIteration = 0; } 50
// volání pohybu příšery moveMonster(monster1, moveMonster1, 1); Pokud dojde ke kolizi herního avatara s nepřítelem, dojde ke změně stavu hry na neúspěšné ukončení. Herní avatar je změněn na obrázek ducha a herní obrazovka je vyplněna textem o neúspěšné hře. Následující kód ukazuje změnu ikony herního avatara při kolizi s nepřítelem. / některá z příšer koliduje s hráčem = smrt var dir = colCheck(player, monster1); if(dir == null) { dir = colCheck(player, monster2); } if(dir != null) { // smrt hráče = změna v ducha death = true; player.width = 64; player.height = 64; player.speed = 1; } // duch letí nahoru if(death) { player.velY -= 1; }
Kompletní kód je k dispozici v příloze č.3: Zdrojový kód hry JessGame
51
6. Závěr Je zřejmé, že nová specifikace HTML5 v sobě skrývá velký potenciál budoucího uplatnění. I když dokončení tohoto značkovacího jazyka se očekává kolem roku 2014, vývojáři webových prohlížečů nelení a snaží se o implementaci vlastností, kterými jejich konkurence nedisponuje. Komunita webových vývojářů proto vytvořila nástroje pro testování webových prohlížečů vůči specifikaci HTML5. Testy ukázaly, že současná verze prohlížeče Chrome (verze 28) je již se specifikací HTML5 kompatibilní z 93% [4]. Podle statistik [35], si tak prohlížeč Chrome 28 udržuje prvenství v pokrytí mezi uživateli. I ostatní současné prohlížeče neustále zvyšují míru kompatibility, a tak celkově lze HTML5 využít v široké míře u většiny webových prohlížečů z 80%. Vývoj HTML5 ještě nekončí, a tak je třeba soustavně a průběžně sledovat změny, které mohou nastat. Přínos specifikace HTML5 spočívá především v jeho jednoduchosti a odstranění zbytečné složitosti. Zjednodušuje DOCTYPE, deklaraci znakové sady a mnoho dalších často používaných zápisů. Obsahuje mocná a přitom jednoduchá rozhraní jako je například rozhraní pro multimédia, díky kterým již není potřeba instalovat software či ovladače cizí firmy. V neposlední řadě zjednodušuje vývoj formulářově zaměřených webových aplikací, kdy je část ošetřování uživatelského vstupu přenesena na samotný webový prohlížeč. Práce představuje nejdůležitější části specifikace HTML5, zaobírá se otázkou, zdali specifikace HTML5 pokrývá to, co většina webu bude potřebovat. Dále objasňuje základní elementy a atributy, které jsou v HTML5 novinkou. Zejména popisuje jednotlivá rozhraní a seznamuje s některými úskalími, které z nich vyplívají. Na závěr byla vytvořena aplikace využívající elementy rozhraní canvas, audia a jazyka JavaScript, jejíž zdrojové kódy jsou součástí práce, pro ukázku, jak se vývoj těchto webových aplikací zjednodušil oproti dřívějším specifikacím HTML.
52
7. Zdroje Seznam použité literatury [1] KOSEK, Jiří. Historie a vývoj HTML[online]. c1997-2013 [cit. 2013-06-26]. Dostupný z WWW: [2] W3C. Plan 2014 [online]. 1/10/2012 [cit. 2013-07-05]. Dostupný z WWW: [3] Bath & Bristol Web Design Agency. HTML5 & CSS3 Support [online]. [cit. 201307-14]. Dostupný z WWW: [4] LEENHEER, Niels. The HTML5 test – how well does your browser support HTML5 [online]. c2010-2012 [cit. 2013-07-14]. Dostupný z WWW: [5] Futuremark Corporation. Peacekeeper [online]. [cit.2013-08-03]. Dostupný z WWW: [6] Principled Technologies. WebXPRT 2013 [online]. c2003-2013[cit.2013-08-03]. Dostupný z WWW: [7] ROAST, Kevin. CanvasMark 2013 [online]. c2013[cit.2013-08-03]. Dostupný z WWW: [8] Google Developers. PageSpeed Insights [online]. [cit.2013-08-04]. Dostupný z WWW: [9] Google Developers. PageSpeed [online]. 08/01/2013 [cit.2013-08-04]. Dostupný z WWW: [10] Mozilla. Firebug [online]. c2005-2010 [cit.2013-08-04]. Dostupný z WWW: [11] Mozilla. Firebug 1.11.4 [online]. [cit.2013-08-04]. Dostupný z WWW:
53
[12] Six Revisions. 15 Google Chrome Extensions for People Who Build Websites [online]. c2008-2013 [cit.2013-08-04]. Dostupný z WWW: [13] LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: programujeme moderní webové aplikace. Vyd. 1. Brno: ComputerPress, 2011, 304 s. ISBN 978-80251-3539-6. [14] W3C. HTML: The Markup Language [online]. [cit. 2013-07-05]. Dostupný z WWW: [15] Wufoo. The Current State of HTML5 Forms [online]. c2006-2013 [cit. 2013-0701]. Dostupný z WWW: [16] BAROŠ, Josef. Formulářové elementy podle HTML5[online]. 10/03/2013 [cit. 2013-07-01]. Dostupný z WWW: [17] ISO. Numeric representation of date and time [online]. [cit. 2013-07-01]. Dostupný z WWW: [18] HTML5 Pattern. HTML5 Pattern [online] [cit.2013-07-02]. Dostupný z WWW: [19] VELEŠNÍK, Oldřich. Formuláře v HTML5 a nové atributy [online]. 25/03/2013 [cit. 2013-07-08]. Dostupný z WWW: [20] ŠŤASTNÝ, Jiří, ŠIMEČEK, Martin. HTML5 – geolokační rozhraní[online]. 27/08/2012 [cit. 2013-07-08]Dostupný z WWW: [21] KHRONOS group. OpenGL ES 2.0 for the Web [online]. c2013[cit.2013-07-01] Dostupný z WWW:
54
[22] PICHLÍK, Roman. Komety přilétají [online]. 15/04/2007 [cit.2013-07-02] Dostupný z WWW: [23] PICHLÍK, Roman. Komety přilétají [online]. 15/04/2007 [cit.2013-07-02] Dostupný z WWW: [24] WEBSOCKET-SAMPLE. Diference wetween websocket and websocket [online]. 20/01/2010 [cit. 2013-07-02]. Dostupný z WWW: [25]WebSocket.org. About HTML5 WebSockets [online]. c2013[cit. 2013-07-02]. Dostupný z WWW: < http://www.websocket.org/aboutwebsocket.html> [26] LEITHEAD, Travis. Web Workers in IE10: Background JavaScript Makes Web Apps Faster [online]. 2012, 02/07/2011 [cit.2013-07-11] Dostupný z WWW: [27] W3C. Web Workers [online]. 01/05/2012 [cit.2013-08-10]. Dostupný z WWW: < http://www.w3.org/TR/workers/#the-event-loop> [28]Mozilla. Using web workers [online]. 02/07/2013 [cit.2013-08-10]. Dostupný z WWW: [29]W3SCHOOL. HTML5 Web Storage [online]. c1999-2013 [cit.2013-07-11]. Dostupný z WWW: [30] JANÁČEK, Patrik. Web Storage (lokální uložiště) – HTML5 [online]. 26/03/2012 [cit.2013-07-12]. Dostupný z WWW: [31] W3C. Web Storage [online]. 30/07/2013 [cit.2013-08-15]. Dostupný z WWW: < http://www.w3.org/TR/2013/REC-webstorage-20130730/>
55
[32] PFEIFFER, Silvia. HTML5 - audio a video: kompletní průvodce. Vyd. 1. Brno: Zoner Press, 2011, 350 s. Encyklopedie webdesignera. ISBN 978-80-7413-147-9 [33] SALVET, Pavel. HTML5: Offline webové aplikace a aplikační cache [online]. 25/09/2011 [cit. 2013-07-14]. Dostupný z WWW: < http://interval.cz/clanky/html5-offline-webove-aplikace-a-aplikacni-cache/> [34] PILGRIM, Mark. Dive into HTML5 [online]. c2009-2011 [cit.2013-07-14]. Dostupný z WWW: [35] StatCounter. StatCounter Global Stats [online]. c1999-2013 [cit.2013-08-17]. Dostupný z WWW:
56
Seznam ilustrací Obrázek 1: Zjednodušený pohled dokumentu DOM [autor] Obrázek 2: Zobrazení průběhu testu v nástroji Peacekeeper, převzato z [5] Obrázek 3: Zobrazení průběhu testu manipulace fotografií v nástroji Web XPRT, převzato z [6] Obrázek 4: Zobrazení průběhu testu v CanvasMark 2013, převzato z [8] Obrázek 5: Ukázka zobrazení PageSpeed v prohlížeči Chrome 28 [autor] Obrázek 6: Firebug – síťový panel monitorující HTTP komunikaci, převzato z [11] Obrázek 7: Zobrazení sémantických elementů v prohlížeči [autor] Obrázek 8: Zobrazení elementu range v prohlížeči Opera, IE 10 a Chrome 28 [autor] Obrázek 9: Zobrazení elementu search v prohlížeči Chrome 28 [autor] Obrázek 10: Zobrazení elementu color v prohlížeči Chrome 28 [autor] Obrázek 11: Zobrazení elementu meter v prohlížeči Firefox 23 a IE 10 [autor] Obrázek 12: Zobrazení elementu progress v prohlížeči Chrome 28 a IE 10 [autor] Obrázek 13: Zobrazení elementu date v prohlížeči Opera 15 a Chrome 28 [autor] Obrázek 14: Zobrazení atributu placeholder v Internet Explorer verze 10 [autor] Obrázek 15: Zobrazení atributů pattern a placeholder v Chrome 28 [autor] Obrázek 16: Zobrazení použití atributu list a elementu datalist v prohlížeči Firefox 23 a Chrome 28 [autor] Obrázek 17: Zobrazení kódu s použitím atributů novalidate a formnovalidate [autor] Obrázek 18: Zobrazení kódu s využitím atributu formaction [autor] Obrázek 19: Zobrazení výsledku obdélníku [autor] Obrázek 20: Zobrazení výsledku obdélníku s použitím metody radialGradient() [autor] Obrázek 21: Zobrazení výsledku obdélníku s použitím metody stínu [autor] Obrázek 22: Zobrazení výsledku obdélníku s použitím metody transform() [autor] Obrázek 23: Zobrazení výsledku s využitím metody quadraticCurveTo() [autor] Obrázek 24: Zobrazení příkladu s využitím metody strokeText() [autor] Obrázek 25: Zobrazení příkladu s využitím metody fillText() [autor] Obrázek 26: Rozdíl mezi technologií AJAX a Comet, převzato z [23] Obrázek 27: Zjednodušení realtimové komunikace pomocí WebSocket, převzato z [24] Obrázek 28: Porovnání DOM webové stránky a Web Worker, převzato z [26] Obrázek 29: Obsah aplikační cache v prohlížeči Firefox verze 22 [autor] Obrázek 30: Obrázek 30: Hra JessGame [autor]
Seznam grafů Graf 1: Výsledek testování vybraných prohlížečů ve WebXPRT [autor] Graf 2: Výsledek testování vybraných prohlížečů v Peacekeeper [autor] Graf 3: Výsledek testování vybraných prohlížečů v CanvasMark 2013 [autor] Graf 4: Celkové hodnocení prohlížečů v jednotlivých testech [autor] Graf 5: Celkové hodnocení prohlížečů [autor]
58
10 10 11 11 12
Seznam tabulek Tabulka 1: Sémantické elementy HTML5 [autor] Tabulka 2: Hodnoty atributu autocomplete [autor] Tabulka 3: Seznam atributů objektu Coordinates [autor] Tabulka 4: Výčet atributů, metod a událostí, které WebSocket využívá [autor] Tabulka 5: Přehled metod, které se využívají v API WebStorage, převzato z [30] Tabulka 6: Přehled podpory kodeků elementu audia v prohlížečích [autor] Tabulka 7: Přehled atributů využívajících element audio [autor] Tabulka 8: Přehled podpory kodeků elementu video v prohlížečích [autor] Tabulka 9: Přehled atributů využívajících element video [autor] Tabulka 10: Možné stavy aplikační cache, převzato z [33]
