Univerzita Hradec Králové. Fakulta informatiky a managementu

Transkript

1 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

2 Prohlášení Prohlašuji, že jsem bakalářskou práci zpracovala samostatně a s použitím uvedené literatury. V Hradci Králové dne klllllllllllllllllvvvvv Jana Macháčková

3 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.

4 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.

5 Obsah 1. Úvod 1 2. HTML Počátky HTML Kaskádové styly JavaScript 4 3. Specifikace HTML Podpora HTML Nástroje pro porovnání výkonu prohlížečů se zaměřením na HTML Zhodnocení prohlížečů ve vybraných testech Nástroje pro optimalizaci webových stránek Zjednodušení prvků oproti starším specifikacím Nové sémantické elementy Existující API ve specifikaci HTML API Formuláře Formulářové elementy Nové formulářové atributy API geolokace API Canvas API WebSocket API Web Workers API Web Storage Audio a video v HTML Element audio Element video Off-line API Technologie Off-line 45

6 5. Implementace vybrané úlohy Závěr Zdroje 53 Seznam použité literatury 53 Seznam ilustrací 57 Seznam grafů 58 Seznam tabulek Přílohy Příloha č.1: Ukázka HTML5 dokumentu Příloha č.2: Ukázka využití metody transform() Příloha č.3: Zdrojový kód hry JessGame 62

7 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

8 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 Berners- Lee při vytváření informačního systému pro CERN 1. Timothy John Berners-Lee navrhl systém, dnes znám pod zkratkou WWW 2. A právě pro tento systém v roce 1991 vytvořil HTML, který se v kombinaci s protokolem HTTP 3 a hypertextovými odkazy URL 4 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 IETF 5 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. 1 CERN výzkumné centrum fyziky poblíž Ženevy ve Švýcarsku 2 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 2

9 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 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 XHTML 6. V roce 2004 byla založena pracovní skupina WHATWG 7, 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 XML 8 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. 6 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. 3

10 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 RIA 9 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. 9 RIA Rich Internet Application principy uživatelského rozhraní desktopové aplikace použité v prostředí internetového prohlížeče 4

11 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 DOM 10 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

12 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 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

13 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

14 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

15 Obrázek 4: Zobrazení průběhu testu v CanvasMark 2013, převzato z [8] 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

16 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

17 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 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

18 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] 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ěď komprimování textového obsahu pomocí gzip 11 asynchronní výměna dat se serverem spojování obrázků grafického designu do CSS sprites gzip kompresní formát 12

19 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

20 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > HTML5 <!DOCTYPE html> 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

21 Dále došlo ke zjednodušení a zkrácení znakové sady. HTML 4.01 <meta http-equiv= Content-Type content= text/html; charset=utf-8 > HTML5 <meta charset= utf-8 > 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 <script src="js/script.js" type="text/javascript" /> HTML5 <script src="js/script.js" /> 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 header footer section article aside nav hgroup Popis 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). 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). Poznámka stranou (údaje o autorovi, blok reklam). Definuje oblast s navigací dokumentu nebo její části. Tento element je určen pro seskupení více nadpisů <h1> až <h6> Tabulka 1: Sémantické elementy HTML5 [autor] 15

22 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

23 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] 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] Přehled nových input elementů Element 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í ové adresy) a současně ověří syntax ové 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 ,url, search a tel, se zobrazí pouze běžné textové pole. 17

24 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. <input type="range" min="0" max="120" step="1" > 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í 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

25 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

26 dolní limity, kdy nastane změna barvy sloupce jako upozornění na nízkou, nebo vysokou aktuální hodnotu. <p>teplota plotny <meter min="0" max="200" value="100">100 C</meter>.</p> <p>kapacita disku <meter low="69" high="80" max="100" value="84">84 %</meter></p> Obrázek 11: Zobrazení elementu meter v prohlížeči Firefox 23 a IE 10 [autor] Element progress zobrazuje grafický sloupec odpovídající aktuální číselné 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 %</progress> 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 [17] month umožňuje výběr měsíce v daném roce, př week umožňuje výběr týdne (1-52) v daném roce, př W02 nebo 28. týden, 2013 datetime umožňuje specifikovat přesný datum a čas včetně zóny, př :45 UTC datetime-local umožňuje určení data a času bez udání časového pásma 20

27 Obrázek 13: Zobrazení elementu date v prohlížeči Opera 15 a Chrome 28 [autor] 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, , 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 on off unspecified Popis Nejedná se o pole pro citlivé údaje a jeho hodnotu je možné uložit a později znovu použít 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ý 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

28 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, a password. Zápis atributu placeholder: <input placeholder = "toto je placeholder" /> Obrázek 14: Zobrazení atributu placeholder v Internet Explorer verze 10 [autor] Atribut pattern definuje JavaScriptový regulární výraz 13, 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: <label>heslo: <input pattern="\s{6,"type="password" placeholder="min 6 znaku bez mezer" id="password" name="password" size="20" required /> </label> 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] 13 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ě. 22

29 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. <label> Jakou značku preferujete: <datalist id="brand"> <option value="nokia">nokia</option> <option value="htc">htc</option> <option value="asus">asus</option> <option value="sony">sony</option> <option value="samsung">samsung</option> </datalist> <input type="text" name="brand" list="brand" > <input type="submit"> </label> 23

30 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ů 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, 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í. <form> <input type="text" name=" " value="jana@example.com"> <input type="submit" formnovalidate value="save"> <input type="submit" value="submit"> </form> 24

31 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. <form novalidate> <input type="text" name=" " value="jana@example.com"> <input type="submit" value="submit"> </form> 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. <form id="example"> <input type="number" required> <input type="submit"> </form> <input type="text" form="example"> 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. <form action=" <input type= "submit" value="odeslat Jana" formaction=" </form> 25

32 (Element form atributu action je nastaven na adresu Atribut formaction přinutí formulář, aby byl odeslán na adresu 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 DMS 14 - př 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

33 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

34 Atribut Popis latitude zeměpisná šířka longitude zeměpisná délka altitude nadmořská výška accuracy přesnost hodnot pro zeměpisné šířky a délky altitudeaccuracy přesnost nadmořské výšky směr pohybu uživatele (úhel, který svírá směr heading pohybu se směrem k severu) speed 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 <img>. 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. <canvas width="300" height="300"style="border:1px solid;"> Váš prohlížeč nepodporuje Canvas. </canvas> 28

35 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, RGB 15 či RGBA 16 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 HSL 17, kde odstín je definován od 0 do 360 a sytost a světlost má hodnoty v rozsahu 0 až 100 (procent). 15 RGB red, green, blue 16 RGBA red, green, blue, alpha 17 HSL hue, saturation, light 29

36 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

37 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

38 // 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

39 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

40 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

41 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

42 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

43 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á AJAX 18. 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ůsoby 19 a jedním z těchto způsobů je právě Comet. 18 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ě. 37

44 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

45 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

46 Atributy objektu readystate bufferedamount Metody objektu send() close() Události objektu onopen() onmessage() onclose() Popis vyjadřuje stav připojení. Má hodnoty: CONNECTING připojení nebylo dosud navázáno, OPEN navázání spojení a komunikace je možné, CLOSED 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

47 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