Stažení souboru - Open edu - Univerzita Hradec Králové

Stažení souboru - Open edu - Univerzita Hradec Králové

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
<!DOCTYPE html>
“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.
HTML 4.01
HTML5
<meta http-equiv=“Content-Type“
content=“text/html; charset=utf-8“>
<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
HTML5
<script src="js/script.js"
type="text/javascript" />
<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
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ů
<h1> až <h6>
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.
<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í 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.
<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 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:
<input placeholder = "toto je 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:
<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]
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.
<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
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í.
<form>
<input type="text" name="email"
value="[email protected]">
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">
</form>
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.
<form novalidate>
<input type="text" name="email"
value="[email protected]">
<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="http://example.com">
<input type= "submit" value="Odeslat Jana"
formaction="http://jana.com">
</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 <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
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).
RGB – red, green, blue
RGBA – red, green, blue, alpha
17 HSL – hue, saturation, light
15
16
29
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
<audio controls>
<source src="rock.mp3" type="audio/mpeg">
<source src="rock.ogg" type="audio/ogg;
codecs=vorbis">
<p> Váš prohlížeč nepodporuje element audio.</p>
</audio>
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.
<!DOCTYPE html>
<html manifest=”application.manifest”>
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: <http://htmlguru.cz/uvod-historie.html>
[2] W3C. Plan 2014 [online]. 1/10/2012 [cit. 2013-07-05]. Dostupný z WWW:
<http://dev.w3.org/html5/decision-policy/html5-2014-plan.html>
[3] Bath & Bristol Web Design Agency. HTML5 & CSS3 Support [online]. [cit. 201307-14]. Dostupný z WWW: <http://fmbip.com/>
[4] LEENHEER, Niels. The HTML5 test – how well does your browser support HTML5
[online]. c2010-2012 [cit. 2013-07-14]. Dostupný z WWW:
<http://html5test.com/results/desktop.html>
[5] Futuremark Corporation. Peacekeeper [online]. [cit.2013-08-03]. Dostupný
z WWW: <http://peacekeeper.futuremark.com/run.action>
[6] Principled Technologies. WebXPRT 2013 [online]. c2003-2013[cit.2013-08-03].
Dostupný z WWW: <http://principledtechnologies.com/benchmarkxprt/webxprt/>
[7] ROAST, Kevin. CanvasMark 2013 [online]. c2013[cit.2013-08-03]. Dostupný
z WWW: <http://www.kevs3d.co.uk/dev/canvasmark/>
[8] Google Developers. PageSpeed Insights [online]. [cit.2013-08-04]. Dostupný
z WWW: <http://developers.google.com/speed/pagespeed/insights/>
[9] Google Developers. PageSpeed [online]. 08/01/2013 [cit.2013-08-04]. Dostupný
z WWW:
<https://developers.google.com/speed/pagespeed/insights_extensions?hl=cs>
[10] Mozilla. Firebug [online]. c2005-2010 [cit.2013-08-04]. Dostupný z WWW:
<http://getfirebug.com/whatisfirebug>
[11] Mozilla. Firebug 1.11.4 [online]. [cit.2013-08-04]. Dostupný z WWW:
<https://addons.mozilla.org/en-us/firefox/addon/firebug/>
53
[12] Six Revisions. 15 Google Chrome Extensions for People Who Build Websites
[online]. c2008-2013 [cit.2013-08-04]. Dostupný z WWW:
<http://sixrevisions.com/tools/chrome-extensions-developers-designers/>
[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: <http://www.w3.org/TR/html-markup/syntax.html#character-encoding>
[15] Wufoo. The Current State of HTML5 Forms [online]. c2006-2013 [cit. 2013-0701]. Dostupný z WWW: <http://www.wufoo.com/html5/>
[16] BAROŠ, Josef. Formulářové elementy podle HTML5[online]. 10/03/2013 [cit.
2013-07-01]. Dostupný z WWW:
<http://swatelier.info/at/formulare/html5inputs.asp>
[17] ISO. Numeric representation of date and time [online]. [cit. 2013-07-01].
Dostupný z WWW:
<http://web.archive.org/web/20110614235056/http://www.iso.org/iso/support/f
aqs/faqs_widely_used_standards/widely_used_standards_other/date_and_time_form
at.htm#what-iso-8601-covers>
[18] HTML5 Pattern. HTML5 Pattern [online] [cit.2013-07-02]. Dostupný
z WWW:<http://html5pattern.com/>
[19] VELEŠNÍK, Oldřich. Formuláře v HTML5 a nové atributy [online]. 25/03/2013
[cit. 2013-07-08]. Dostupný z WWW:<http://www.zdrojak.cz/clanky/formulare-vhtml5-a-nove-atributy/#novalidate>
[20] ŠŤASTNÝ, Jiří, ŠIMEČEK, Martin. HTML5 – geolokační rozhraní[online].
27/08/2012 [cit. 2013-07-08]Dostupný z WWW:
<http://programujte.com/clanek/2011052400-html5-geolokacni-rozhrani/>
[21] KHRONOS group. OpenGL ES 2.0 for the Web [online]. c2013[cit.2013-07-01]
Dostupný z WWW: <http://www.khronos.org/webgl/>
54
[22] PICHLÍK, Roman. Komety přilétají [online]. 15/04/2007 [cit.2013-07-02]
Dostupný z WWW: <http://www.dagblog.cz/2007/04/komety-piltaj-pokud-jste-iliv-domnn-e.html>
[23] PICHLÍK, Roman. Komety přilétají [online]. 15/04/2007 [cit.2013-07-02]
Dostupný z WWW: <http://www.dagblog.cz/2007/04/komety-piltaj-pokud-jste-iliv-domnn-e.html>
[24] WEBSOCKET-SAMPLE. Diference wetween websocket and websocket [online].
20/01/2010 [cit. 2013-07-02]. Dostupný z WWW:
<https://code.google.com/p/websocket-sample/wiki/Tips>
[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:
<http://blogs.msdn.com/b/ie/archive/2011/07/01/web-workers-in-ie10background-javascript-makes-web-apps-faster.aspx>
[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: <https://developer.mozilla.org/enUS/docs/Web/Guide/Performance/Using_web_workers>
[29]W3SCHOOL. HTML5 Web Storage [online]. c1999-2013 [cit.2013-07-11].
Dostupný z WWW: <http://www.w3schools.com/html/html5_webstorage.asp>
[30] JANÁČEK, Patrik. Web Storage (lokální uložiště) – HTML5 [online]. 26/03/2012
[cit.2013-07-12]. Dostupný z WWW: <http://programujte.com/clanek/2012022801web-storage-lokalni-uloziste-html5/>
[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: <http://kniha.html5.cz/offline.html>
[35] StatCounter. StatCounter Global Stats [online]. c1999-2013 [cit.2013-08-17].
Dostupný z WWW: <http://gs.statcounter.com/#browser-ww-monthly-201308201308-bar>
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]
57
6
7
8
9
13
14
16
18
18
19
20
20
21
21
22
24
25
26
31
32
33
34
36
36
37
38
39
41
46
48
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]
59
15
21
28
40
42
43
44
44
45
47
Příloha č.1
8. Přílohy
8.1 Příloha č.1: Ukázka HTML5 dokumentu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="styly.css">
</head>
<body>
<header>
<h2>Záhlaví stránky</h2>
</header>
<div id="container">
<nav>
<h2>Navigace</h2>
<a href="">Odkaz</a>
</nav>
<section>
<article>
<header>
<h1>Záhlaví samostatné části obsahu</h1>
</header>
<p>Text</p>
<footer>
<h1>Zápatí samostatné části obsahu</h1>
</footer>
</article>
</section>
<aside>
<h2>Poznámka stranou</h2>
</aside>
<footer>
<h2>Zápatí stránky</h2>
</footer>
</div>
</body>
</html>
60
Příloha č.2
8.2 Příloha č.2: Ukázka využití metody transform()
<script>
$('document').ready(function(){
draw();
});
function draw() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0, 0, 80,
100);
gradient.addColorStop(0,"#009933");
gradient.addColorStop(0.5,"white");
gradient.addColorStop(1,"FF0000");
context.fillStyle = gradient;
context.fillRect(10,10,100,50);
context.strokeRect(10,10,100,50);
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");
context.fillStyle = gradient;
context.fillRect(10,10,100,50);
context.strokeRect(10,10,100,50);
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");
context.fillStyle = gradient;
context.fillRect(10,10,100,50);
context.strokeRect(10,10,100,50);
}
</script>
61
Příloha č.3
8.3 Příloha č.3: Zdrojový kód hry JessGame
(function(){
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
width = 1300,
height = 600,
player = {
x: width / 2,
y: height - 70,
width: 37,
height: 52,
speed: 5,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
monster1 = {
x: 650,
y: 40,
width: 48,
height: 48,
speed: 2,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
monster2 = {
x: 1200,
y: height - 80,
width: 48,
height: 48,
speed: 2,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
monster3 = {
x: 150,
y: height - 100,
width: 48,
height: 48,
speed: 2,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
monster4 = {
x: 900,
62
Příloha č.3
y: 80,
width: 48,
height: 48,
speed: 2,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
monster5 = {
x: 800,
y: 340,
width: 48,
height: 48,
speed: 2,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
monster6 = {
x: 0,
y: 130,
width: 48,
height: 48,
speed: 2,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
gate = {
x: 15,
y: 20,
width: 64,
height: 64,
speed: 0,
velX: 0,
velY: 0,
jumping: false,
grounded: false
},
keys = [],
friction = 0.8,
// tření
gravity = 0.4;
// gravitace
var boxes = [];
// boxy, které ohraničí herní plochu
boxes.push({
// kraj rámu vlevo
x: 0,
y: 0,
width: 3,
height: height
});
boxes.push({
// kraj rámu dole
x: 0,
y: height - 20,
width: width,
height: 50
63
Příloha č.3
});
boxes.push({
x: width - 3,
y: 0,
width: 50,
height: height
});
// kraj rámu vpravo
// boxy které tvoří cesty
boxes.push({
x: 450,
y: 540,
width: 30,
height: 40
});
boxes.push({
x: 0,
y: 520,
width: 80,
height: 20
});
boxes.push({
x: 180,
y: 420,
width: 100,
height: 20
});
boxes.push({
x: 400,
y: 360,
width: 100,
height: 20
});
boxes.push({
x: 600,
y: 400,
width: 400,
height: 20
});
boxes.push({
x: 600,
y: 395,
width: 5,
height: 5
});
boxes.push({
x: 995,
y: 395,
width: 5,
height: 5
});
boxes.push({
x: 600,
y: 300,
width: 100,
height: 20
});
boxes.push({
x: 1050,
y: 340,
width: 50,
64
Příloha č.3
height: 20
});
boxes.push({
x: 1100,
y: 300,
width: 50,
height: 20
});
boxes.push({
x: 1150,
y: 260,
width: 50,
height: 20
});
boxes.push({
x: 1200,
y: 220,
width: 100,
height: 20
});
boxes.push({
x: 1180,
y: 100,
width: 50,
height: 20
});
boxes.push({
x: 1050,
y: 120,
width: 50,
height: 20
});
boxes.push({
x: 800,
y: 180,
width: 200,
height: 20
});
boxes.push({
x: 800,
y: 175,
width: 5,
height: 5
});
boxes.push({
x: 995,
y: 175,
width: 5,
height: 5
});
boxes.push({
x: 600,
y: 120,
width: 200,
height: 20
});
boxes.push({
x: 600,
y: 115,
width: 5,
height: 5
65
Příloha č.3
});
boxes.push({
x: 795,
y: 115,
width: 5,
height: 5
});
boxes.push({
x: 0,
y: 160,
width: 170,
height: 20
});
boxes.push({
x: 165,
y: 155,
width: 5,
height: 5
});
boxes.push({
x: 300,
y: 180,
width: 50,
height: 20
});
boxes.push({
x: 380,
y: 140,
width: 50,
height: 20
});
boxes.push({
x: 450,
y: 80,
width: 100,
height: 20
});
boxes.push({
x: 200,
y: 220,
width: 100,
height: 20
});
boxes.push({
x: 0,
y: 80,
width: 100,
height: 20
});
canvas.width = width;
canvas.height = height;
var monsterMoves = 150; // kolik opakování pohybu příšery než se
změní
var currentIteration = 0;
var moveMonster1 = 0;
var moveMonster2 = 0;
var moveMonster3 = 0;
66
Příloha č.3
var death = false;
function update() {
// klávesy
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;
// 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;
moveMonster2 = Math.round(Math.random()*2) + 1;
moveMonster3 = Math.round(Math.random()*2) + 1;
moveMonster4 = Math.round(Math.random()*2) + 1;
moveMonster5 = Math.round(Math.random()*2) + 1;
moveMonster6 = Math.round(Math.random()*2) + 1;
monsterMoves = Math.round(Math.random()*150) + 100;
currentIteration = 0;
}
// volání pohybu příšery
moveMonster(monster1, moveMonster1,
moveMonster(monster2, moveMonster2,
moveMonster(monster3, moveMonster3,
moveMonster(monster4, moveMonster4,
moveMonster(monster5, moveMonster5,
moveMonster(monster6, moveMonster6,
1);
2);
3);
4);
5);
6);
// nákres překážek
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;
if(!death) {
67
Příloha č.3
// nastavení hodnoty uzemění, díky tomu může človík spadnout
z římsy
player.grounded = false;
// ohraničení herní plochy koliduje s hráčem
for (var i = 0; i < boxes.length; i++) {
ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width,
boxes[i].height);
var dir = colCheck(player, boxes[i]);
if (dir === "l" || dir === "r") {
player.velX = 0;
player.jumping = false;
} else if (dir === "b") {
player.grounded = true;
player.jumping = false;
} else if (dir === "t") {
player.velY *= -1;
}
}
}
// 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) {
dir = colCheck(player, monster3);
}
if(dir == null) {
dir = colCheck(player, monster4);
}
if(dir == null) {
dir = colCheck(player, monster5);
}
if(dir == null) {
dir = colCheck(player, monster6);
}
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;
}
// když není mrtvý, ale padá
if(!death && player.grounded){
player.velY = 0;
}
player.x += player.velX;
player.y += player.velY;
68
Příloha č.3
ctx.fill();
// když duch uletí mimo obrazovku => konec hry
if(death && player.y < 0) {
ctx.font="50px Arial";
ctx.fillStyle="red";
ctx.fillText("KONEC HRY",500,300);
}
// když cíl => výhra
if(player.x < 40 && player.y < 40) {
ctx.font="50px Arial";
ctx.fillStyle="cyan";
ctx.fillText("MISE DOKONČENA",450,300);
player.width=0;
player.height=0;
}
//nákres hráče
var playerimage = new Image();
playerimage.src = death ? "images/duch.png" :
"images/clovik2.png";
ctx.drawImage(playerimage, player.x, player.y);
//nákres brány
var gateimage = new Image();
gateimage.src = "images/door.png";
ctx.drawImage(gateimage, gate.x, gate.y);
//příšery
var monsterimage = new Image();
monsterimage.src = "images/prisera.png";
ctx.drawImage(monsterimage, monster1.x, monster1.y);
ctx.drawImage(monsterimage, monster2.x, monster2.y);
ctx.drawImage(monsterimage, monster3.x, monster3.y);
ctx.drawImage(monsterimage, monster4.x, monster4.y);
ctx.drawImage(monsterimage, monster5.x, monster5.y);
ctx.drawImage(monsterimage, monster6.x, monster6.y);
requestAnimationFrame(update);
currentIteration++;
}
function moveMonster(monster, moveMonster, which) {
if (moveMonster == 1) {
// šipka vpravo
if (monster.velX < monster.speed) {
monster.velX++;
}
}
if (moveMonster == 2) {
// šipka vlevo
if (monster.velX > -monster.speed) {
monster.velX--;
}
}
monster.velX *= friction;
monster.velY += gravity;
69
Příloha č.3
monster.grounded = false;
// příšera - kolize
for (var i = 0; i < boxes.length; i++) {
ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width,
boxes[i].height);
var dir = colCheck(monster, boxes[i]);
if (dir === "l" || dir === "r") {
monster.velX = 0;
monster.jumping = false;
if(dir === "l") {
if(which == 1) moveMonster1
if(which == 2) moveMonster2
if(which == 3) moveMonster3
if(which == 4) moveMonster4
if(which == 5) moveMonster5
if(which == 6) moveMonster6
}
if(dir === "r") {
if(which == 1) moveMonster1
if(which == 2) moveMonster2
if(which == 3) moveMonster3
if(which == 4) moveMonster4
if(which == 5) moveMonster5
if(which == 6) moveMonster6
}
} else if (dir === "b") {
monster.grounded = true;
monster.jumping = false;
} else if (dir === "t") {
monster.velY *= -1;
}
=
=
=
=
=
=
1;
1;
1;
1;
1;
1;
=
=
=
=
=
=
2;
2;
2;
2;
2;
2;
}
if(monster.grounded){
monster.velY = 0;
}
monster.x += monster.velX;
monster.y += monster.velY;
}
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)),
// 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) {
70
Příloha č.3
// řeší, na které straně jsme se 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;
}
//události klávesnice
document.body.addEventListener("keydown", function (e) {
keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
keys[e.keyCode] = false;
});
window.addEventListener("load", function () {
update();
});
71