Studijní program: N6209 – Systémové inženýrství a informatika Studijní obor: 6209T021 – Manažerská informatika Autor práce: Bc. Jana Dlasková Vedoucí práce: Ing. Petr Weinlich, Ph.D.

(1)

(2)

Studijní program: N6209 – Systémové inženýrství a informatika Studijní obor: 6209T021 – Manažerská informatika

Autor práce: Bc. Jana Dlasková Vedoucí práce: Ing. Petr Weinlich, Ph.D.

(3)

(4)

(5)

Prohlášení

Byla jsem seznámena s tím, že na mou diplomovou práci se plně vztahuje zákon č.

121/2000 Sb., o právu autorském, zejména § 60 – školní dílo.

Beru na vědomí, že Technická univerzita v Liberci (TUL) nezasahuje do mých autorských práv užitím mé diplomové práce pro vnitřní potřebu TUL.

Užiji-li diplomovou práci nebo poskytnu-li licenci k jejímu využití, jsem si vědoma povinnosti informovat o této skutečnosti TUL; v tomto případě má TUL právo ode mne požadovat úhradu nákladů, které vynaložila na vytvoření díla, až do jejich skutečné výše.

Diplomovou práci jsem vypracovala samostatně s použitím uvedené literatury a na základě konzultací s vedoucím mé diplomové práce a konzultantem.

Současně čestně prohlašuji, že tištěná verze práce se shoduje s elektronickou verzí, vloženou do IS STAG.

V Liberci dne 7. května 2014 Jana Dlasková

(6)

Poděkování

Ráda bych touto cestou poděkovala Ing. Petru Weinlichovi, Ph.D. za cenné rady a připomínky při zpracování této diplomové práce. Děkuji také svému nejbližšímu okolí a rodině za podporu během celé doby studia.

(7)

Anotace

Diplomová práce se zabývá novou verzí značkovacího jazyka HTML5 a kaskádovými styly CSS3, které slouží pro tvorbu webových stránek. V práci jsou shrnuty novinky a výhody, které tyto jazyky přináší oproti verzím minulým. Jednotlivé elementy jsou popsány, je zde ukázána jejich syntaxe a podpora v internetových prohlížečích. Následuje průzkum, jehož cílem bylo zjistit, jak jsou jednotlivé prvky webovými vývojáři skutečně využívány. V poslední části práce je využití HTML5 a CSS3 prakticky demonstrováno při tvorbě webových stránek pro společnost Czech-us, které následuje shrnutím přínosů těchto technologií.

Klíčová slova

HTML5, CSS3, webové stránky, grafický design, stylování

(8)

Annotation

This thesis describes new versions of markup language HTML5 and style sheet language CSS3, which are used for creation of web pages. Thesis summarizes the news and the benefits that these languages bring compared to previous versions. Each element is described, shown its syntax and support in web browsers. The following is a survey that aimed to determine how new elements are actually used in practice. In the last part is the use of HTML5 and CSS3 practically demonstrated on creation of websites for company Czech-us. At the end of thesis is a summary of the benefits of these technologies.

Key Words

HTML5, CSS3, Websites, web design, styling

(9)

Obsah

Seznam zkratek ... 10

Seznam tabulek ... 11

Seznam obrázků ... 12

Úvod ... 14

Literární rešerše ... 15

1. HTML5 ... 16

1.1 Co je HTML5 ... 16

1.2 Specifikace HTML5 ... 17

1.3 Podpora HTML5 a CSS3 ... 18

1.4 Nové prvky HTML5 ... 20

1.5 Audio a video ... 29

1.6 SVG a Canvas ... 37

2. CSS3 ... 42

2.1 Co je CSS3 ... 42

2.2 Vendor prefixy ... 43

2.3 Alternativní řešení ... 44

2.4 Nové prvky CSS3 ... 45

3. Využívání HTML5 a CSS3 webovými designéry ... 69

3.1 Vyhodnocení dotazníkového průzkumu ... 69

3.2 Shrnutí výsledků průzkumu ... 75

4. Praktické využití HTML5 a CSS3 při tvorbě multimediální prezentace ... 77

4.1 Popis postupu tvorby stránek ... 77

4.2 Přínosy HTML5 a CSS3 ... 92

Závěr ... 93

Seznam použité literatury ... 95

Seznam příloh ... 100

(10)

Seznam zkratek

API Application Programming Interface CSS Cascading Style Sheets

DTD Document Type Declaration

EOT Embedded OpenType

FAQ Frequently Asked Questions GIF Graphics Interchange Format HTML HyperText Markup Language

IE Internet Explorer

JS JavaScript

MP3 MPEG-1 nebo MPEG-2 Audio Layer III

MP4 MPEG-4 Part 14

MPEG Moving Picture Experts Group

OGV Ogg Video

SVG Scalable Vector Graphics

TTF TrueType

URL Uniform Resource Locator W3C World Wide Web Consortium WAV Waveform audio file format

WHATWG Web Hypertext Application Technology Working Group WOFF Web Open Font Format

XHTML Extensible Hypertext Markup Language XML Extensible Markup Language

(11)

Seznam tabulek

Tab. 1: HTML5 grafický a vložený obsah - podpora internetovými prohlížeči... 19

Tab. 2: Oblíbenost prohlížečů v ČR napříč lety. Údaje jsou v %. ... 30

Tab. 3: Multimediální kontejnery a kodeky v nich obsažené. ... 30

Tab. 4: Audio kodeky podporované prohlížeči ... 32

Tab. 5: Prvky video a audio s jejich atributy ... 32

Tab. 6: Video kodeky podporované prohlížeči ... 33

Tab. 7: Podpora SVG a Canvas v internetových prohlížečích ... 41

Tab. 8: Podpora border-radius, box-shadow a border-image v internetových prohlížečích 48 Tab. 9: Podpora RGBA a HSLA v internetových prohlížečích ... 51

Tab. 10: Podpora gradientů v internetových prohlížečích ... 53

Tab. 11: Podpora mnohonásobného pozadí v internetových prohlížečích ... 55

Tab. 12: Podpora font face a text-shadow v internetových prohlížečích ... 57

Tab. 13: Logické operátory, vlastnosti médií a jejich funkce ... 58

Tab. 14: Podpora media queries v internetových prohlížečích ... 59

Tab. 15: Podpora animation, transition a transform v internetových prohlížečích ... 68

(12)

Seznam obrázků

Obr. 1: Ukázka použití tagu section ... 23

Obr. 2: Ukázka použití tagů figure a figcaption ... 24

Obr. 3: Formulář Google Docs ... 26

Obr. 4: SVG maska na videu - zobrazení při 100% zvětšení a při 125% zvětšení webové stránky ... 39

Obr. 5: Canvas - vykreslení obdélníku ... 40

Obr. 6: Borders: zakulacené rohy – box1, box2, box3 ... 46

Obr. 7: Box-shadow - několikanásobný stín ... 47

Obr. 8: Border-image - zdrojový obrázek, rám s opakováním výstřižku a rám s natažením výstřižku ... 48

Obr. 9: RGBA - ukázka různých stupní průhlednosti ... 49

Obr. 10: Ukázka gradientů - linear, radial, repeating-linear, repeating-radial a gradient s closest-side ... 52

Obr. 11: Ukázka použití více gradientů pro tvorbu textury připomínající papír ... 53

Obr. 12: Vícenásobné pozadí ... 54

Obr. 13: Text-shadow - text s vícenásobným stínem ... 56

Obr. 14: Loga vytvořená pomocí 2D transformace a dalších CSS3 vlastností ... 60

Obr. 15: 2D transformace - skew, rotate, translate, scale ... 61

Obr. 16: 3D transformace perspective - perspective (220px) / perspective (300px) / perspective (900px) ... 62

Obr. 17: Ukázka 3D transformace - "proplouvající stránka" ... 62

Obr. 18: Ukázka 3D transformace - sbírka knih ... 63

Obr. 19: Transition po najetí myší na prvek ... 65

Obr. 20: Transition a transform ... 65

Obr. 21: Animation - průběh jednoduché animace ... 66

Obr. 22: Míra znalosti HTML a CSS ... 69

Obr. 23: Nejčastěji využívaná verze HTML ... 70

Obr. 24: Optimalizace webových stránek pro internetové prohlížeče... 70

Obr. 25: Sledovanost HTML5 a CSS3 aktualit ... 71

(13)

Obr. 27: Způsob vkládání videí na webové stránky ... 73

Obr. 28: Způsob tvorby webových formulářů ... 74

Obr. 29: Způsob vkládání fontů na webové stránky ... 74

Obr. 30: Rozložení stránky “Jazykové kurzy v Anglii“ ... 78

Obr. 31: Social buttons menu ... 79

Obr. 32: Logo stránky v prohlížeči IE 10 a IE 7 ... 80

Obr. 33: Položka menu v prohlížečích: Chrome, Mozilla, IE 10 a IE 7... 81

Obr. 34: Najetí myši na položku sekundárního menu ... 83

Obr. 35: Element audio v prohlížeči Chrome, Mozilla, IE 10 a IE 7 ... 85

Obr. 36: Element video v prohlížeči Chrome a alternativní zobrazení pro prohlížeč IE 7 . 87 Obr. 37: Validační zpráva v prohlížeči Chrome ... 88

Obr. 38: Animace "flip" u tlačítka formuláře ... 89

Obr. 39: Komentář s avatarem ... 89

Obr. 40: Windows Phone - IE, úhlopříčka obrazovky 4 palce - vertikální náhled vs. iOS - Safari, úhlopříčka obrazovky 3,5 palce... 91

(14)

Úvod

HTML a CSS jsou technologie používané pro tvorbu webových prezentací, které jsou denně využívány moderními společnostmi. Tyto technologie se neustále vyvíjí, přičemž nejnovější verzí jsou HTML5 a CSS3, které přináší spoustu zásadních změn ve vývoji webových stránek. Na specifikacích HTML5 a CSS3 se stále pracuje. Jednotlivé části však mohou být již dnes využívány a jsou pro vývojáře doporučovány. Jiné prvky jsou stále ve stádiu vývoje a není známo, zda budou někdy doporučeny a schváleny v oficiální specifikaci.

Obsah této práce je zaměřen na nové prvky HTML5 a CSS3, které jsou již podporovány nejběžněji používanými webovými prohlížeči, a možnosti jejich využití v praxi. Nebudou zde naopak zmiňovány nové prvky, které mají zatím minimální podporu v internetových prohlížečích.

V první části práce je popsán vývoj jazyka HTML. Následuje popis nových prvků ve verzi HTML5, jejich podpora ve vyhledávačích a případné alternativní řešení při nepodpoře prvku, ale bez nutnosti použití jiné technologie jako například JavaScriptu. Jsou zde zhodnoceny přínosy nových elementů a srovnání se staršími technologiemi. Následuje kapitola zaměřená na CSS3 a jeho vlastnosti usnadňující tvorbu multimediálních stránek.

Jsou zde popsány prvky podporované větší částí prohlížečů a jejich výhody. V další kapitole je proveden průzkum mezi webovými vývojáři - profesionály i laiky a zhodnocení výsledků tohoto průzkumu. Cílem bylo zjistit, jak je HTML5 a CSS3 využíváno vývojáři v praxi. V poslední části je popsán postup tvorby multimediálních stránek při využití HTML5 a CSS3.

Cílem práce je shrnout situaci v oblasti vývoje HTML5 a CSS3. Ukázat, že v současnosti je možné větší část nové verze tohoto jazyka a jeho stylování využívat při tvorbě webových stránek. Dále je cílem předvést, že používání HTML5 a CSS3 umožňuje jednodušší zápis kódu, lepší stylování stránek a zároveň snižuje nutnost používat obrázky a skripty, které načítání stránek prodlužují.

(15)

Literární rešerše

V diplomové práci je čerpáno z několika zdrojů. Mezi hlavní patří odborná literatura, odborné články, online knihovny a weby. Jelikož HTML5 a CSS3 jsou standarty, které jsou stále ve vývoji, hlavním zdrojem byla oficiální webová stránka W3C, na které je možné najít nejaktuálnější specifikace ke každému prvku HTML nebo modulu CSS: CSS SPECIFICATIONS. W3C [online]. 2014 [cit. 2014-02-27]. Dostupné z: http://www.w3.org/Style/CSS/specs. Mezi další důležitý online zdroj patří W3schools, kde jsou nové prvky srozumitelně vysvětleny a jejich funkčnost je možné si přímo vyzkoušet: CSS3 Animations. W3schools [online]. 2014 [cit. 2014-03-07]. Dostupné z: http://www.w3schools.com/css/css3_animations.asp.

Díky možnosti přístupu do placených databází poskytovaných Univerzitní knihovnou TUL byla použita nejznámější databáze ProQuest Central. Příkladem je možné uvést článek z časopisu „Training & Development“ od Jorge Reyna pojednávající o vývoji technologií:

REYNA, Jorge. From Flash to HTML5: the eLearning evolution. Training & Development [online]. 2012, Issue: 5, 2012-11-07 [cit. 2014-01-22]. DOI: 18398561. Dostupné z: http://search.proquest.com/docview/1140333316?accountid=17116.

Technologie HTML5 a CSS3 jsou dobře vysvětleny v knižní publikaci od Alexis Goldsteinové: GOLDSTEINOVÁ, Alexis, Louis LAZARIS a Estelle WEYLOVÁ.

HTML5 a CSS3 pro webové designéry. 1. vydání. Jan Pokorný. Brno: Zoner Press, 2011, 286 s. ISBN 978-80-7413-166-0. Kniha se zabývá novými prvky těchto jazyků a dokonce novými specifikacemi, mezi něž patří Drag and Drop, Web Storage a off-line webové aplikace, které nebudou v této práci popisovány. Speciálně na multimediální prvky audio a video a jejich praktické použití s názornými příklady je zaměřena kniha od Silvie Pfeiffer:

PFEIFFER, Silvia. HTML5 - audio a video : kompletní průvodce. Jan Pokorný. Brno:

Zoner Press, 2011. ISBN 978-80-7413-147-9. V neposlední řadě je důležitá publikace od Elizabeth Castro: CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3 : názorný průvodce tvorbou WWW stránek. 1. vydání. Ondřej Baše. Brno: Computer Press, 2012, 439 s. ISBN 978-80-251-3733-8. Kniha se zabývá kompletním vysvětlením všech prvků HTML a CSS a ne jen novými specifikacemi. Je spíše vhodná pro začínající webový

(16)

1. HTML5

HTML5 je zkratka pro HyperText Markup Language neboli značkovací jazyk pro hypertext. Jak je dnes již všeobecně známo jedná se o jazyk pro vytváření webových stránek a HTML5 je pátou revizí HTML standardů.

1.1 Co je HTML5

HTML5 stejně jako jeho předchozí verze není úplné přeformulování jazyka, ale obsahuje prvky z předchozích verzí a nové prvky, kupříkladu: article, header, footer, video a audio.

K tomu byl tento jazyk navržen tak, aby splňoval určité principy a to: kompatibilitu, užitečnost, spolupráci a univerzální přístup.¹ Co tyto principy konkrétně znamenají, bude zřejmé s vysvětlením nových prvků HTML5.

Vývoj webového značkování probíhal od prvních verzí HTML přes HTML4 a XHTML (Extensible Hypertext Markup Language) až k HTML5, které se začíná postupně prosazovat. Zkrácená historie vývoje HTML:

 1991 – první vývoj HTML 1.0 – textový režim – Tim Berners-Lee

 1992 – první webový prohlížeč

 1993 – HTML 2.0 – neoficiální verze, první grafický prohlížeč

 1995 – HTML 2.0 – oficiální verze, HTML 3.0 – neoficiální rozšíření

 1996 – HTML3.2 – přidání tabulek, vznik prohlížeče Internet Explorer – pod hlavičkou W3C (World Wide Web Consortium)

 1997 – HTML 4.0 – vylepšení a rozšíření tabulek, přidání formulářů, rámů, kaskádových stylů a skriptování, mělo se jednat o poslední verzi HTML a následníkem měl být jazyk XHTML (rozdíl byl ve striktnějším zápisu tagů)

 1999 – HTML 4.1

1 HTML Design Principles. W3C [online]. 2007 [cit. 2013-10-28]. Dostupné z: http://www.w3.org/TR/html- design-principles/

(17)

 2012 – HTML 5 „Candidate Recommendation“ - vývojáři již mohou využívat tuto verzi²

HTML5 vzniklo z důvodu potřeby efektivnějších, rychlejších a lépe udržovatelných webových aplikací. A jelikož jsou formuláře a funkcionalita podobná aplikacím tím hlavním u webových aplikací, byly nejdříve vytvořeny dvě různé specifikace: Web Forms 2.0 a Web Apps 1.0. Obě specifikace se sloučily a vzniklo HTML5³.

Jak již bylo řečeno, HTML5 obsahuje na rozdíl od starší verze nové prvky jako je: header, footer, article a další. Velkou novinkou jsou prvky video a audio, které nyní umožňují přehrávat videa a hudbu bez nutnosti instalace přídavných modulů. Kromě nových prvků jsou v HTML5 zahrnuty také nové související technologie a API (Application Programming Interface). API označuje rozhraní pro programování aplikací. Je to sbírka funkcí, procedur a tříd nějaké knihovny, které může programátor využívat. V HTML5 jsou zahrnuty Drag and Drop, Offline Web Applications, History, Canvas 2D Context, Microdata a spoustu dalších.

1.2 Specifikace HTML5

Je důležité zdůraznit, že HTML5 má dvě různé specifikace, jelikož je vyvíjeno dvěma různými organizacemi – WHATWG (Web Hypertext Application Technology Working Group) a W3C.

W3C je mezinárodní organizace, která udržuje původní specifikace HTML a CSS. Pracují v ní členové organizace společně s veřejností na vývoji webových standardů. Ve vedení je zakladatel Webu Tim Berners-Lee a generální ředitel Jeffrey Jaffe. Jejich úkolem je doslovně: „The W3C mission is to lead the World Wide Web to its full potential by

2 První díl o HTML – Historie. PHGAME [online]. 2010 - 2013 [cit. 2013-10-28]. Dostupné z:

http://phgame.cz/PHGame_serialy/serialy/html/prvni-dil-o-html-historie

3 GOLDSTEINOVÁ, Alexis, Louis LAZARIS a Estelle WEYLOVÁ. HTML5 a CSS3 pro webové designéry. 1. vydání. Jan Pokorný. Brno: Zoner Press, 2011, 286 s. ISBN 978-80-7413-166-0.

(18)

developing protocols and guidelines that ensure the long-term growth of the Web.“⁴ tedy:

Rozvíjet World Wide Web do jeho plného potenciálu vývojem protokolů a směrnic, které zajistí dlouhodobý růst Webu.

WHATWG založila skupina lidí od společností Apple, Mozilly a Opery na základě jejich nespokojenosti s výsledky porady W3C v roce 2004. Organizace W3C se soustřeďovala na vývoj XHTML 2.0 a WHATWG mezitím vytvořila specifikace Web Forms 2.0 a Web Apps 1.0, jak bylo zmíněno víše, které poté sloučili do jedné specifikace s názvem HTML5. W3C nakonec vzdala snahu o vývoj XHTML 2.0 a vydala vlastní specifikaci HTML5 na základě té od WHATWG.⁵ Specifikace od WHATWG byla přejmenována na pouhé HTML, ke kterému se už nebude přidávat číslice. Byla totiž označena jako „living standard“, což znamená, že se neustále vyvíjí podpora jednotlivých prvků HTML5 pro různé prohlížeče a nemělo by smysl ji s každým updatem přejmenovávat.⁶

Obě specifikace se dají nalézt na webových stránkách těchto organizací a jsou si podobné, pro účely této práce bude ale využívána převážně specifikace od W3C.

1.3 Podpora HTML5 a CSS3

HTML5 a CSS3 se skládají z jednotlivých modulů. Podpora těchto modulů se liší s každým internetovým prohlížečem. Aktuálně podporované prvky v daném prohlížeči lze zjistit například využitím JavaScriptové knihovny Modernizr⁷ nebo na stránce FindmebyIP⁸, kde jsou informace pravidelně aktualizovány. Je možné zde zjistit, které

4 W3C MISSION. W3C [online]. 2012 [cit. 2013-10-28]. Dostupné z:

http://www.w3.org/Consortium/mission

5 GOLDSTEINOVÁ, Alexis, Louis LAZARIS a Estelle WEYLOVÁ. HTML5 a CSS3 pro webové designéry. 1. vydání. Jan Pokorný. Brno: Zoner Press, 2011, 286 s. ISBN 978-80-7413-166-0.

6 tamtéž

7 Modernizr [online]. 2014 [cit. 2014-04-08]. Dostupné z: http://modernizr.com/

8 HTML5 & CSS3 Support. FindmebyIP [online]. 2013 [cit. 2013-10-30]. Dostupné z:

http://fmbip.com/litmus

(19)

prohlížeče podporují jaké CSS3 vlastnosti, CSS3 selektory, HTML5 API nebo HTML5 kodeky audia a videa.

Tab. 1: HTML5 grafický a vložený obsah - podpora internetovými prohlížeči Prohlížeč Chrome Firefox Opera Internet

Explorer

Podpora v %

Verze 25 15 12 6 7 8 9 10

Canvas A A A N N N A A 91%

Canvas

Text A A A N N N A A 90%

SVG A A A N N N A A 90%

SVG Clipping

Paths A A A N N N A A 90%

SVG

Inline A A A N N N A A 64%

SMIL A A A N N N A A 75%

WebGL A A A N N N A A 70%

Audio A A A N N N A A 90%

Video A A A N N N A A 90%

Zdroj: vlastní zpracování podle HTML5 & CSS3 Support. FindmebyIP [online]. 2013 [cit. 2013- 10-30]. Dostupné z: http://fmbip.com/litmus

Dalším řešením jak již bylo napsáno je Modernizr. Je to open source knihovna JavaScriptu, umožňující mimo jiné detekovat jednotlivé funkce HTML5 v prohlížečích uživatelů.

Pokud se přidá tato knihovna do webové stránky, po jejím načtení se do tagu html zapíší všechny funkce, které jsou a nejsou podporovány daným prohlížečem.⁹ Html tag pak může vypadat například takto:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients

cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

9 GOLDSTEINOVÁ, Alexis, Louis LAZARIS a Estelle WEYLOVÁ. HTML5 a CSS3 pro webové designéry.

1. vydání. Jan Pokorný. Brno: Zoner Press, 2011, 286 s. ISBN 978-80-7413-166-0.

(20)

Název nepodporovaných prvků poté obsahuje předponu no, například no-touch.

Nevýhodou použití JavaScriptu ovšem je, že někteří uživatelé mohou mít JavaScript zakázaný. Nejlepším kompromisem v dnešní době tedy pravděpodobně je, používat takové HTML5 a CSS3 prvky, které podporuje většina prohlížečů. Toto bude dodržováno i v praktické ukázce této práce.

Prvky pro definici struktury stránky (například: header, article, footer), podporuje zpětně každý prohlížeč. Je to dáno tím, že pokud by se do závorek zapsalo cokoliv jiného než html, head, body apod., ale například <mujelement>, prohlížeč by tuto značku sice neznal, ale chápal by ji jako obyčejný inline element bez sémantického významu. Webovému vývojáři by stačilo tento element už pouze nastylovat. To je důvod proč i starší prohlížeče nemají problém s novými elementy.

1.4 Nové prvky HTML5

V této kapitole budou zmíněny nejdůležitější nové elementy v HTML5 a bude vysvětlena jejich funkce.

Nové prvky HTML5 pro definici struktury stránky byly vytvořeny intuitivně na základě nejčastějšího pojmenování divů před příchodem HTML5. Dříve se tedy téměř na každé stránce nacházel div s id header nebo hlavička, obdobně to tak bylo s prvkem footer a dalšími. Proto lze nové prvky snadno pochopit a použít.

Odlišná sémantika

S příchodem HTML5 se zjednodušil i zápis doctypu, kódování dokumentu a další.

Syntaxe

Syntaxe HTML5 se od starších verzí neliší, právě naopak povoluje zápis značek prvků podle toho, jak byl webdesigner zvyklý. Prvky mohou být psány velkým nebo malým písmem, mohou být uzavřeny zpětným lomítkem nebo nemusí, hodnoty se mohou zapisovat s i bez uvozovek a přitom kód bude stále validní.

(21)

Doctype

Definice DTD (Document Type Declaration) neboli doctype ohlašuje prohlížeči, na jaký typ dokumentu právě nahlíží. Doctype musí být na prvním řádku HTML souboru.

V předchozích verzích byl doctype těžko zapamatovatelný a pokud měly být stránky validní, musela se dodržovat přesná syntaxe podle verze doctypu jakou jsme si zvolili.

Vypadala například takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3c.org/TR/xhtml/DTD/xhtml-strict.dtd">

Nový zápis je velice zjednodušen: <!doctype html>

Je vidět, že prohlížeč už nepozná, o jakou verzi značkovacího jazyka se jedná, jelikož to pro něj není podstatné. Nově to ovšem není důležité ani pro validaci stránky pokud se použije validátor pro HTML5.

Kódování dokumentu

Dále byl zjednodušen zápis kódování dokumentu. Dříve vypadal například takto:

Nový zápis: <meta charset="windows-1250">

Načítání kaskádových stylů

Načítání kaskádových stylů bylo zjednodušeno z <link rel="stylesheet"

type="text/css" href="style.css"> na ^<link rel="stylesheet"

href="soubor.css">, jak je vidět odstraněna byla definice type, jelikož se ve většině případů pro stylování stránky používá css soubor.

Vkládání skriptů

Bez JavaScriptu se webdesigner téměř neobejde a jelikož je to dnes na webu nejpoužívanější skriptovací jazyk, vkládání se zjednodušilo z <script src=“js/script.js“ type=“text/javascript“></script> na pouhé <script src=“js/script.js“></script>. Vypuštěn byl opět atribut type.

(22)

Tag a

S příchodem HTML5 se zjednodušilo použití tagu a. Dříve mohl obsahovat pouze neblokové značky, nyní může i blokové. Může se tedy jednodušeji vytvořit například logo s textovým popiskem, které bude blokové a přitom bude fungovat jako odkaz na hlavní stránku.

Tag strong

V předešlých verzích HTML byl tag b zavržen a nahrazen strong, nyní je opět povolen společně s tagem strong, každý z nich má ovšem trochu odlišný význam. Atribut b slouží pouze k vizuálnímu zvýraznění textu, strong se naopak použije, pokud je text skutečně důležitý.

Tag em

Obdobně je to v případě značek em a i. Značka em dává textu významnost, i text pouze vizuálně odliší.

Tag cite

Tag cite má také nový význam. Dříve znamenal citování jiných zdrojů. V HTML5 označuje ale název filmu, knihy, divadelní hry apod. Zakazuje tedy obsahovat uvnitř citace jména lidí.

Prvek header

Header je první z nových prvků, který definuje strukturu stránky. Podle specifikace W3C element header představuje úvodní obsah pro nejbližší sekční obsah, typicky obsahuje úvodní nebo navigační pomůcky. To tedy znamená, že se do něj vloží stejný obsah, jaký se vkládal do divů s id header, například název webu, navigační menu, logo apod. Header se může na stránce vyskytovat i několikrát, třeba jako hlavička celého webu a potom hlavička jednotlivých sekcí.

Prvek section

Element section představuje část dokumentu, která tematicky seskupuje i obsah s vlastní hlavičkou. Nenahrazuje div, který by obaloval celý textový obsah stránky, ale rozděluje ji

(23)

naopak do sekcí. Konkrétním příkladem použití může být webová stránka, na které je číslovaný obsah eseje následovaný textem eseje. Každá kapitola této eseje poté může být obalena prvkem section. Tento element může v praxi sloužit například k lepšímu ostylování jednotlivých částí dokumentu.

Obr. 1: Ukázka použití tagu section Zdroj: vlastní

Prvek article

Article podle definice W3C představuje část v dokumentu, na stránce nebo aplikaci, která by měla zůstat samostatně distribuovatelná tzn., že ji dále můžeme celou sdílet a čtenář pochopí obsah článku. Jako příklad se uvádí běžný článek, příspěvek na fóru nebo interaktivní gadget. Zjednodušeně tedy article může obalovat celý text eseje zmíněné výše.

Prvek nav

Prvek nav je část stránky, která odkazuje na jiné stránky nebo na obsah na dané stránce.

Primárně slouží pro hlavní navigaci neboli menu webových stránek. Neměl by se tedy používat například v patičce stránky a to z důvodu toho, aby zdravotně postižení uživatelé, kteří používají screen readery bezpečně poznali, co je hlavní navigační menu.

Prvek aside

Aside v překladu znamená „stranou“. Měl by jim být obalen prvek, který nesouvisí s vlastním obsahem stránky, většinou se nachází po straně internetové prezentace. Jedná se v podstatě o sidebar, který běžně obsahuje reklamu, nejnovější příspěvky a podobně. Může sloužit i jako zvýraznění citace na stránce.

(24)

Prvek footer

Footer, jak název napovídá, bude prvek obalující patičku stránky. Většinou obsahuje informace o copyrightu, o provozovateli webu a tak dále. I když by patička měla být na konci stránky, specifikace nezakazuje ji umístit kamkoli jinam. Footer může obsahovat každá jednotlivá stránka webu a zároveň celý web.

Prvek figure, figcaption

Figure a figcaption jsou první z elementů, které neurčují strukturu stránky.

Element figure by měl obsahovat plovoucí obsah, který následně může mít popisek a dokáže být oddělitelný od obsahu. Může obsahovat odstavec textu, obrázek nebo například video. Oddělitelnost od obsahu znamená, že by stránka neměla obsahovat větu typu: „Na obrázku výše můžete vidět…“. Tento popisek by měl naopak být v elementu figcaption, který je k tomu určen a v elementu figure by mohl být zmíněný obrázek. Kód a výsledek bude vypadat takto:

Obr. 2: Ukázka použití tagů figure a figcaption Zdroj: vlastní

(25)

Prvek time

Do prvku time se ukládá čas. Slouží webovým vyhledávačům filtrovat výsledky podle času. Tento element řeší problém s tím, že lidé píší čas jinak než stroje a proto ho nebylo vždy snadné identifikovat. Nový zápis času podle HTML5 bude vypadat například takto:

<p>Schůzka se koná příští čtvrtek <time datetime="2013-11-21">21. 11.

2013. </time> </p>

Kde čas v závorkách nebude uživateli zobrazen, ale prohlížeči pochopitelně ano.

Prvek details

Details slouží ke skrytí a následnému zobrazení dodatečných informací. Dříve se pro skrývání musel použít JavaScript, což v budoucnu už nebude zapotřebí. Kód může vypadat například takto:

<summary>Související články</summary>

<ul>

<li><a href="#">Článek 1</a></li>

<li><a href="#"> Článek 2</a></li>

<li><a href="#"> Článek 3</a></li>

</ul>

</details>

V elementu details musí být obalen i prvek summary, který slouží jako nadpis pro details.

Pokud uživatel klikne na summary, zobrazí se mu skrytý obsah. Jako skvělé použití se nabízí například FAQ (Frequently Asked Questions) neboli nejčastěji tázané otázky, kde by byly při načtení stránky zobrazeny pouze otázky a při jejich rozkliknutí by se zobrazily odpovědi. Tento element ovšem musí být podporován prohlížeči, jinak se obsah v details standardně zobrazí celý, přičemž podpora je zatím bohužel velice malá. Details je podporován prohlížeči Chrome a Safari, pro ostatní prohlížeče je možné použít JavaScript a nebo nechat obsah v details viditelný.

Formuláře

Prvky pro vytvoření formulářů doznaly značných změn. Dříve bylo potřeba pro validaci formulářů použít JavaScript nyní základní validaci provádí samotný prohlížeč na straně klienta. HTML5 nabízí i nové vstupní typy například pro datumy, čísla, e-mailové adresy

(26)

a adresy URL (Uniform Resource Locator). Dále byly přidány atributy, které je možné používat se starými i novými vstupními typy. Těmito atributy se dá označit například pole za povinné nebo přidat zástupný text a to vše stále bez JavaScriptu. Někteří webdesigneři používali nebo stále používají různé pluginy například Google Docs, který formulář naprogramuje místo vývojáře. Použitím nových formulářových prvků v HTML5 už ovšem formulář může vypadat jednotněji a stránky se bez JavaScriptu budou načítat rychleji.¹⁰

Obr. 3: Formulář Google Docs Zdroj: Czech-us.cz

Do specifikace formulářů bylo přidáno mnoho prvků a atributů, ale zdaleka ne všechny jsou podporovány všemi prohlížeči. Jelikož se tato práce zabývá aktuálně použitelnými prvky, bude zde uveden vzorový formulář pouze s takovými prvky, které jsou v současnosti podporovány napříč všemi prohlížeči.

<form autocomplete="off">

<h1>Registrace</h1>

<legend>Osobní informace</legend>

<label>Křestní jméno

<input id="jmeno-kr" name="jmeno-kr" type="text"

placeholder="Pouze křestní jméno" required autofocus>

10 LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: programujeme moderní webové aplikace.

Vyd. 1. Brno: Computer Press, 2011. ISBN 978-80-251-3539-6.

(27)

</label>

<label>Příjmení

<input id="prijmeni" name="prijmeni" type="text"

placeholder="Pouze příjmení" required>

</label>

<label>Email

<input id="email" name="email" type="email"

placeholder="priklad@email.cz" required>

</label>

<label>URL

<input id="url" name="url" type="url"

placeholder="http://mojestranka.cz">

</label>

<label>Telefon

<input id="phone" name="phone" type="tel" placeholder="Př. 777 000 000" required>

</label>

<label>Počet kusů

<input id="kusy" name="kusy" type="number" min="1" max="20"

step="1" value="20">

</label>

<legend>Informace o kartě</legend>

<legend>Typ karty</legend>

<input id="visa" name="karta" type="radio">

<label for="mastercard">Mastercard</label>

</div>

</fieldset>

<button type=submit>Registrovat</button>

</form>

V ukázkovém kódu jsou použity známé prvky. Form ohraničuje formulář a prvky s ním spojené, fieldset seskupuje části formuláře a je nepovinný, do legend se zapisuje název této skupiny, label ohraničuje pole s prvkem input a zapisuje se zde název tohoto pole a input je pole, do kterého je možné zapisovat data, která se následně odešlou tlačítkem button.

Atributy formulářových prvků

V ukázce jsou použity nové atributy. Jedním z nich je atribut required, který povoluje prohlížeči odeslat formulář, pouze pokud není pole prázdné a pokud obsahuje správný typ hodnot. Pokud nejsou splněny tyto podmínky, formulář se neodešle a v závislosti na prohlížeči se uživateli zobrazí chybová zpráva, aby vyplnil dané políčko.

(28)

Atribut autofocus určuje, že se danému formulářovému prvku má přiřadit focus jakmile se načte stránka. Autofocus může být přiřazen pouze u jednoho prvku na stránce.

Zjednodušeně to znamená, že se do daného pole umístí kurzor.

Atribut placeholder zobrazí v poli input nápovědu pro uživatele, co má být zapsáno do daného pole. Například, že v poli určeném pro PSČ mají být pouze čísla.

Autocomplete slouží pro automatické doplňování formulářových polí. Standardně je tento atribut nastaven na zapnutý, vývojář může ale automatické doplňování zakázat například pokud se jedná o citlivá data.¹¹

Vstupní typy formulářových prvků

Je možné si všimnout, že u pole se jménem je vstupní typ - type nastaven na text. To je jeden z už známých typů, mezi další patří button, file, checkbox, radio, image, hidden, password, reset a submit. HTML5 přináší další vstupní typy a to: email, url, tel, date, number, datetime, month, week, time, datetime-local, range, search a color.

Typ email povoluje zapsat do pole emailovou adresu, ta se dříve zapisovala do textového pole a ověření, že je adresa platná se provádělo pomocí skriptu. Nyní tuto kontrolu provádí samotný prohlížeč, na základě toho, zda adresa obsahuje znak pro „zavináč“. Navíc se klávesnice na přenosných zařízeních (mobilní telefony, tablety, atp.) sama přizpůsobí pro zápis adresy.

Podobně funguje typ url, tel a number. U url prohlížeč kontroluje formát zadané adresy, ne ale její funkčnost, a klávesnice se na přenosných zařízeních přizpůsobí zapsání adresy. Typ tel nepožaduje určitou syntaxi, jelikož telefonní číslo se v každém státě liší. Pokud je požadováno číslo v určitém formátu je možné to vyřešit přidáním placeholderu, který byl zmíněn výše. Typ number se liší v tom, že je možné přidat minimální a maximální hodnotu čísla a také určit po kolika bodech nebo v tomto případě kusech má číselník růst. To se provede přidáním atributu step.

11 HTML 5.1 Nightly: A vocabulary and associated APIs for HTML and XHTML Editor's Draft 23 January 2014. W3C [online]. 2014 [cit. 2014-01-23]. Dostupné z: http://www.w3.org/html/wg/drafts/html/master/

(29)

Zbylé typy jako například date je možné použít, ale nemají podporu ve všech prohlížečích proto, je potřeba použít alespoň placeholder, aby uživatel věděl, v jakém formátu má datum zadat.

1.5 Audio a video

Prvky audio a video jsou jednou z největších změn v HTML5. Standardizují způsob vkládání multimediálních souborů do stránek. Před HTML5 bylo hlavní alternativou použití Flash Playeru nebo Quick Time Playeru, což vyžadovalo instalaci přídavného modulu do prohlížeče a jeho pravidelnou aktualizaci. S příchodem dotykových zařízení začal být Flash spíše záporem, jelikož spotřebovává příliš mnoho energie u zařízení, která jsou navržena pro nízkou spotřebu a i některé funkce jako „hover“ nebo„mouse-over“

přestaly mít význam. Proto samotný Adobe (firma vlastnící technologii Flash) začíná více podporovat HTML5 ve svých programech od verze Adobe CS6¹².

Nemělo by být ovšem zapomínáno na starší prohlížeče, které jsou stále využívány a nepodporují prvky video ani audio. Popularita internetových prohlížečů v České republice je zobrazena v tabulce níže. Je patrné, že se zvyšuje popularita Chromu, který podporuje prvky audio a video. Počet uživatelů používajících Internet Explorer, jehož starší verze video a audio nepodporují, naopak klesá. Stále se ale jedná o 19% uživatelů webu, kteří mohou mít prohlížeč bez podpory prvků audio a video. Pokud chce tedy webový designer opravdu přístupný web, měl by využít alternativní zobrazení mediálního obsahu, což bude podrobněji popsáno dále.

12 REYNA, Jorge. From Flash to HTML5: the eLearning evolution. Training & Development [online]. 2012, Issue: 5, 2012-11-07 [cit. 2014-01-22]. DOI: 18398561. Dostupné z:

http://search.proquest.com/docview/1140333316?accountid=17116

(30)

Tab. 2: Oblíbenost prohlížečů v ČR napříč lety. Údaje jsou v %.

Rok Internet Explorer Firefox Chrome Safari Opera

2009 38 45 7 1,3 9,6

2010 29 41 16 2 9

2011 25 36 25 2,5 8

2012 22 31 32 3 6

2013 19 28 38 4 5

Zdroj: Top 9 Desktop, Mobile & Tablet Browsers in Czech Republic from Q1 2009 to Q1 2014. StatCounter [online]. 2014 [cit. 2014-02-20]. Dostupné z:

http://gs.statcounter.com/#desktop+mobile+tablet-browser-CZ-quarterly-200901-201401

Kontejnery a kodeky

S prvky video a audio vyvstala i důležitá otázka, jaký kodek bude ten, jenž bude podporován napříč všemi prohlížeči. Kodek je algoritmus, který je použit pro zakódování a dekódování proudu multimediálních dat. Kodek je může kódovat za účelem uložení, přenosu nebo zašifrování, nebo je naopak dekódovat za účelem přehrávání nebo editování.

Kodeky se doručují v kontejnerových formátech, které zapouzdřují kódované video a audio do struktury, která umožňuje následné dekódování. Nejznámější formáty zapouzdření jsou v následující tabulce.

Tab. 3: Multimediální kontejnery a kodeky v nich obsažené.

DŮVODY PRO ZACHOVÁNÍ PODPORY KODEKŮ

MULTIMEDIÁL

NÍ KONTEJNER VÝROBCE KODEK PRO PROTI

QuickTime Apple MOV  dobrá kódovací

kvalita

 malá podpora u SW i HW zařízení

MP4 MPEG MP3 (audio),

AAC (audio) , H.264 (video)

 dobrá kódovací kvalita

 používáno společností YouTube

 podpora pro mobilní zařízení

 poplatky za patenty

WMV Microsoft WAV (audio)  často používaný kodek mezi běžnými uživateli

 WAV je

nekomprimovaný formát = příliš velký soubor

FLV Adobe FLV (video)  otevřený formát  nepodporovaný formát u některých mobilních zařízení

(31)

Ogg Xiph Ogg: Theora (video), Vorbis

(audio)

 skvělá kódovací kvalita

 open source

 ztrátový formát

WebM Google VP8, Vorbis

(audio)

 open source

 podpora u

mobilních zařízení

 nepodporován společností Apple

Zdroj: vlastní zpracování podle PFEIFFER, Silvia. HTML5 - audio a video : kompletní průvodce.

Jan Pokorný. Brno: Zoner Press, 2011. ISBN 978-80-7413-147-9.

Ogg Theora a Vorbis byly původně zahrnuty do HTML5 specifikace jako základní kodeky pro audio a video, jelikož s nimi nejsou spojeny žádné licenční poplatky. Ne všichni výrobci prohlížečů však chtěli implementovat podporu Ogg a to například z důvodu špatné kvality nebo nepodpory pro mobilní zařízení. Proto vznikl nový souborový formát WebM od Googlu, který splňoval všechna kritéria výrobců. Google tedy začal spolupracovat s Operou, Mozillou, Adobe i Microsoftem, aby byla docílena větší podpora v jejich prohlížečích. Apple ale zatím spolupráci odmítl. WebM dále začaly používat některé větší společnosti jako YouTube, Wikimedia nebo Skype ve zkušební verzi, což podpořilo další rozšířená tohoto formátu.¹³

Nejlépe využitelnými formáty jsou v současnosti tedy WebM a Ogg Theora, webdesigneři ovšemmusí stále používat minimálně MP4 (MPEG-4 Part 14), Ogg Theora nebo WebM, pokud chtějí, aby jejich multimediální soubory byly dostupné všem uživatelům.

V budoucnu se snad vývojáři jednou dočkají jednotného kodeku pro všechny prohlížeče.

Audio

Audio element slouží k přehrávání zvuku nebo zvukového streamu přímo v internetovém prohlížeči.

V tabulce jsou znázorněny kodeky a jejich podpora v prohlížečích. Jak už bylo řečeno, zatím neexistuje kodek, který by byl podporován všemi prohlížeči, je proto nutné vkládat video i audio soubory na stránky v různých formátech. U audio souborů to budou alespoň soubory MP3 (MPEG-1 nebo MPEG-2 Audio Layer III) a OggVorbis.

13 PFEIFFER, Silvia. HTML5 - audio a video : kompletní průvodce. Jan Pokorný. Brno: Zoner Press, 2011.

ISBN 978-80-7413-147-9.

(32)

Tab. 4: Audio kodeky podporované prohlížeči

Kodeky WAV Ogg Vorbis MP3

Firefox 15 x

Safari 5.1 x

Opera 12 x

Chrome 25

Internet Explorer 9 x x

Zdroj: HTML5 & CSS3 Support. FindmebyIP [online]. 2013 [cit. 2013-10-30]. Dostupné z:

Vložení audia na stránku s různými zdroji vypadá následovně:

</audio>

Takto vložený zvuk nebude dělat nic, pokud by se měl zvuk hned po načtení stránky například přehrát nebo začít načítat bude ho potřeba doplnit atributy, jako jsou: autoplay, preload, controls a další. Audio má většinu atributů společných s prvkem video. Všechny atributy a hodnoty, které nabývají, jsou přehledně znázorněny v následující tabulce.

Tab. 5: Prvky video a audio s jejich atributy

PRVEK ATRIBUTY NABÝVANÉ HODNOTY POPIS

VIDEO autoplay autoplay, "prázdná hodnota" automatické přehrávání videa

preload none, metadata, auto určení jak se mají začít načítat data ze zdroje

controls controls, "prázdná hodnota" zobrazení ovládacích prvků videa loop loop, "prázdná hodnota" přehrávání do smyčky

poster url adresa odkaz na obrázek videa

height, width délka v px nebo % výška a šířka videa

mediagroup text přiřazení videa do skupiny

muted muted, "prázdná hodnota" ztlumení zvuku u videa

src url adresa odkaz na zdroj videa

track subtitles, captions, descriptions, chapters, metadata

přidání textové nebo zvukové stopy k video

AUDIO autoplay autoplay, "prázdná hodnota" automatické přehrávání audia

preload none, metadata, auto určení jak se mají začít načítat data ze

(33)

controls controls, "prázdná hodnota" zobrazení ovládacích prvků audia loop loop, "prázdná hodnota" přehrávání do smyčky

mediagroup text přiřazení audia do skupiny

muted muted, "prázdná hodnota" ztlumení zvuku

src url adresa odkaz na zdroj audia

Zdroj: vlastní zpracování podle HTML: The Markup Language - video. W3C [online]. 2013 [cit.

2014-02-21]. Dostupné z: http://dev.w3.org/html5/markup/video.html a W3C. HTML: The Markup Language - audio [online]. 2013 [cit. 2014-02-21]. Dostupné z:

http://dev.w3.org/html5/markup/audio.html

Video

Element video slouží k přehrávání videí nebo filmů. Stejně jako u audia neexistuje kodek, který by byl podporován všemi nejpoužívanějšími prohlížeči, proto je třeba video vystavovat v různých formátech, nejlépe opět v Ogg Theora a MP4.

Tab. 6: Video kodeky podporované prohlížeči

Kodeky WebM Ogg Theora MP4 H.264

Firefox 15 x

Safari 5.1 x x

Opera 12 x

Chrome 25

Internet Explorer 9 x x

Zdroj: HTML5 & CSS3 Support. FindmebyIP [online]. 2013 [cit. 2013-10-30]. Dostupné z:

Vložení videa do stránek z různých zdrojů bude vypadat následovně:

</video>

Na tomto příkladu má video tři zdroje, z nichž se přehraje ten, který bude jako první podporovaný prohlížečem.

Prvek source obsahuje atribut src, který ukazuje cestu k souboru a atribut type, který blíže specifikuje formát kontejneru zdrojového videa.

(34)

Atribut controls zobrazí ovládací prvky videa nebo audia. Vzhled ovládacích prvků se liší s každým prohlížečem. Dají se nastylovat pomocí CSS a JavaScriptu například v případě, kdy má být vzhled přehrávače jednotný se vzhledem stránky.

U prvku video se musí také uvádět atributy width a height, které určují výšku a šířku videa a tato čísla jsou pixely. Další atributy jsou už nepovinné.

Atributem poster, jak název napovídá, vloží k videu jeho náhledový obrázek a to takový, jaký určí designer. Hodí se například v případě, že je u videa zakázáno stahování jeho metadat.

Dalším atributem je autoplay. Ten spouští audio nebo video hned po načtení stránky.

I když tento atribut existuje, není z hlediska přístupnosti stránek doporučováno ho používat.

Podobným atributem je loop. Ten způsobuje, že se soubory budou přehrávat stále dokola.

Atribut muted spustí video či audio bez zvuku, kdy uživatel tento zvuk, může opět zapnout.

Atribut preload nahrazuje atribut autobuffer. Na rozdíl od autobufferu může obsahovat více hodnot: auto, none nebo metadata.

Při nastavené hodnotě auto se video či audio začnou načítat do mezipaměti, ještě předtím než bude samotný mediální soubor spuštěn. Zdroj může být načten celý až do konce, ale bez hodnoty autoplay nebude spuštěn. Uživatel tedy bude na přehrání mediálního souboru čekat nejkratší dobu. Bude vědět, jak dlouho bude trvat přehrávání videa nebo audia a uvidí náhledový obrázek i v případě, že není nastavena hodnota poster. Designer by měl hodnotu auto použít v případě, kdy ví, že časté načítání mediálních soborů nebude problém na daném serveru.

Hodnota none naopak dává pokyny prohlížeči, aby se žádná data nenačítala. Buď v případě, že designér předpokládá, že uživatelé nebudou tak často spouštět mediální soubor nebo v případě, že server požaduje minimální načítání dat. Příkladem je stránka s mnoha mediálními prvky, u kterých je malá pravděpodobnost, že je uživatel přehraje.

(35)

Pokud přiřadíme hodnotu none k video, je důležité, aby mělo nastavený také poster. Pokud by tomu tak nebylo, video soubor by nezobrazoval náhledový obrázek, který se běžně dekóduje z videa. Místo náhledového obrázku by zde bylo jen černé okno. Hodnota none způsobí i to, že se nebudou stahovat žádná metadata, tím pádem uživatel před zpuštěním videa nebude například vědět, jak dlouho trvá přehrávání videa.

Hodnota metadata bude načítat pouze metadata souboru, ale ne celý zdroj. Je to výchozí hodnota atributu preload. Dává pokyny prohlížeči, aby načetl pouze rozměry videa, seznam skladeb, délku přehrávání a pár prvních snímků videa. Praktické využití je opět například u stránky s mnoha videi. Běžně je doporučováno nastavovat preload na hodnotu metadata. Pokud je stránka ovšem určena především pro mobilní zařízení doporučuje se hodnota none, která nebude zatěžovat datový tok.¹⁴^,¹⁵

Poslední atribut mediagroup umožňuje přehrávat dvě videa, která jsou ze stejného zdroje.

Pokud jsou videa přidána do stejné skupiny, přehrávají se synchronně při pokliku na kterékoli video, pokud jsou v jiné skupině, přehrává se pouze zvolené video. V praxi to může sloužit například v případě, kdy designer chce použít to samé video na stránce několikrát. Mediagroup tedy umožní přehrávání několika videí, ale z jednoho zdroje. Tím se snižuje datová náročnost na rozdíl od případu, kdy by na stránce v minulosti musela být použita videa z různých zdrojů.

Před uzavírací značku videa může být dále přidán prvek track následovně:

</video>

14 HTML. WHATWG [online]. 2014 [cit. 2014-02-24]. Dostupné z: http://www.whatwg.org/specs/web- apps/current-work/multipage/the-video-element.html

15HOGAN, Brian P. a Jakub URBAN. HTML5 a CSS3 : výukový kurz webového vývojáře. Vyd. 1. Brno:

Computer Press, 2011. ISBN 978-80-251-3576-1.

(36)

Track umožňuje zobrazovat například překlad přehrávaného videa. Jeho atribut kind může nabývat hodnot: subtitles, captions, descriptions, chapters a metadata.

Hodnota subtitles se používá pro vložení překladu nebo přepisu dialogu, například pokud zvuk není uživateli zcela srozumitelný. Přepis se zobrazí jako text překrývající video.

Caption slouží pro přepis zvuků nebo hudby v případě, že není zvuk k dispozici, je špatně slyšitelný nebo je uživatel sluchově postižený.

Description se používá jako zvukový popis videa pokud video není viditelné nebo pokud je uživatel slepý.

Chapters slouží pro rozdělení videa na kapitoly, které pak slouží k navigaci v mediálním souboru. Kapitoly se zobrazí jako interaktivní menu.

A metadata slouží pro skladby přehrávané pomocí skriptu. Nejsou zobrazena v prohlížeči.¹⁶

Atribut src, který je dále v zápisu prvku track, ukazuje cestu k souboru například s překladem a atribut srclang určuje jazyk. Atribut label je nadpis stopy.¹⁷ Track jen na rozdíl od ostatních výše zmíněných prvků a atributů podporován zatím pouze v prohlížeči IE10 (Internet Explorer) a Chrome.¹⁸

Vložením videa ve formátu mp4, webm a ogv (Ogg Video) je zajištěno přehrávání ve většině prohlížečů. 19% lidí ale stále používá Internet Explorer a z toho někteří verzi 8, která nepodporuje prvek video. Pokud má být tedy video přístupné i starším prohlížečům vloží se do prvku video i odkaz na flashovou verzi nebo na odkaz s videem pro jeho

16 HTML. WHATWG [online]. 2014 [cit. 2014-02-24]. Dostupné z: http://www.whatwg.org/specs/web- apps/current-work/multipage/the-video-element.html

17 GOLDSTEINOVÁ, Alexis, Louis LAZARIS a Estelle WEYLOVÁ. HTML5 a CSS3 pro webové designéry. 1. vydání. Jan Pokorný. Brno: Zoner Press, 2011, 286 s. ISBN 978-80-7413-166-0.

18 Getting Started With the Track Element. HTML5 ROCKS [online]. 2013 [cit. 2014-01-29]. Dostupné z:

http://www.html5rocks.com/en/tutorials/track/basics/

(37)

stáhnutí. Starší prohlížeč tento odkaz rozpozná a video přehraje ve Flash Playeru.

Kompletní kód bude poté vypadat následovně:

width="600" height="400">

</object>

</video>

1.6 SVG a Canvas

Jádro HTML5 kromě nové sémantiky tvoří i několik souvisejících technologií. SVG a Canvas jsou dvě z nich určené pro kreslení a zobrazování grafiky.

SVG

SVG (Scalable Vector Graphics) je jazyk pro popis vektorové grafiky založený na XML (Extensible Markup Language). SVG je vhodný formát pro vytváření grafiky, která se zobrazuje vícekrát a v různých velikostech, například loga a ikony. Jelikož se jedná o vektorovou grafiku, která si i při zvětšení zanechává svůj tvar, může se použít i pro kvalitní rozprostření obrázku na pozadí, anebo se dá využít jako maska přes obrázky nebo HTML5 video.¹⁹^,²⁰

K tvorbě SVG obrázků pomáhají editory jako například Inkscape.²¹ Hotový kód obrázku poté vypadá například následovně:

19 SVG v roce 2010: fakta, souvislosti, názory. SALVET, Pavel. Interval [online]. 2010 [cit. 2014-03-11].

Dostupné z: http://interval.cz/clanky/svg-v-roce-2010-fakta-souvislosti-nazory/

20PFEIFFER, Silvia. HTML5 - audio a video : kompletní průvodce. Jan Pokorný. Brno: Zoner Press, 2011.

ISBN 978-80-7413-147-9.

21 Draw Freely. Inkscape [online]. 2014 [cit. 2014-03-11]. Dostupné z: http://inkscape.org/cs/

(38)

code_c5_6.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

<mask id="c1" maskUnits="userSpaceOnUse"

maskContentUnits="userSpaceOnUse">

<linearGradient id="grad" gradientUnits="objectBoundingBox"

x2="0" y2="1">

</linearGradient>

</g>

</mask>

</defs>

</svg>²²

Tento kód se vloží na webovou stránku například jako maska k videu pomocí CSS stylování. Používá se k tomu CSS vlastnost mask, která odkazuje na prvek mask uvnitř SVG kódu.

video {

mask: url("http://html5videoguide.net/code_c5_6.svg#c1")}

Video nyní překrývá maska SVG obrázku, která si i při zvětšení nebo zmenšení webové stránky zanechá svůj tvar. Pokud by se místo SVG obrázku použil bitmapový obrázek například ve formátu PNG, maska by měla rozostřené hrany.

22 Code examples. PFEIFFER, Silvia. The Definitive Guide to HTML5 Video [online]. 2011 [cit. 2014-03- 11]. Dostupné z: http://html5videoguide.net/