Masarykova univerzita Filozofická fakulta. Kabinet informačních studií a knihovnictví. Informační studia a knihovnictví

Transkript

1 Masarykova univerzita Filozofická fakulta Kabinet informačních studií a knihovnictví Informační studia a knihovnictví Jakub Horák Stávající možnosti použití technologií HTML5 při tvorbě webové prezentace knihovny Bakalářská práce Vedoucí práce: PhDr. Petr Škyřík, Ph.D. 2014

2 Bibliografický záznam HORÁK, Jakub. Stávající možnosti použití technologií HTML5 při tvorbě webové prezentace knihovny. Brno: Masarykova univerzita, Filozofická fakulta, Ústav české literatury a knihovnictví. Kabinet informačních studií a knihovnictví, 2014, 67 s. Vedoucí bakalářské práce PhDr. Petr Škyřík, Ph.D. Anotace Bakalářská práce Stávající možnosti použití technologií HTML5 při tvorbě webové prezentace se zabývá novými možnostmi vyvíjeného značkovacího jazyka HTML5. Práce je rozdělena na teoretickou a praktickou část. Teoretická část pojednává o historii a vývoji HTML, dále přibližuje a popisuje novinky oproti předchozí verzi. Praktická část se zaměřuje na konkrétní webovou prezentaci knihovny, která je komparována s novými možnostmi HTML5. Cílem práce je seznámit s novými prvky pro tvorbu webové prezentace a zhodnotit jejich přínos. Klíčová slova HTML5, HTML, web, webová prezentace, internet, microsite, značkovací jazyk, sémantika, knihovna Annotation The bachelor thesis entitled Current Possibilities of Using HTML5 Technology for Creating Websites deals with new possibilities of the developed HTML5 markup language. The thesis is divided into a theoretical part and a practical part. The theoretical part deals with the history and development of HTML. It further specifies and describes innovations to the previous version. The practical part is focused on a specific library website which is compared with new possibilities of HTML5. The aim of the thesis is to present new features for website creation and evaluate their benefits. Keywords HTML5, HTML, web, website, internet, microsite, markup language, semantics, library

3 Prohlašuji, že jsem diplomovou práci vypracoval samostatně s využitím uvedených pramenů a literatury... Podpis autora práce

4 Poděkování Mé poděkování patří PhDr. Petru Škyříkovi Ph.D. především za užitečné rady, kterými k této práci přispěl.

5 Obsah 1 ÚVOD TEORETICKÁ ČÁST Historie a vývoj HTML Struktura HTML dokumentu Sémantika Rozdělení stránky Webové formuláře Microdata (metadata) ARIA (Accessible Rich Internet Applications) Multimédia Grafika Canvas Off-line úložiště AppCache Web Storage Web Database (Indexed DB) Komunikace/Konektivita WebSockets Web Workers Přístupový bod Geolokace Drag and drop Speech Input API Page Visibility API FileSystem API Podpora webových prohlížečů Informační architektura a UX... 38

6 3 PRAKTICKÁ ČÁST Metodologie O knihovně Analýza a komparace Struktura Nadpis Napište nám Vyhledávání Microdata (metadata) Validace W3C validátor Český validátor Zhodnocení ZÁVĚR LITERATURA... 58

7 1 ÚVOD Moderní technologie, v čele s vysokorychlostním internetem, představují nedílnou součást dnešní doby. Stále více služeb se přesouvá do virtuálního prostředí. Z toho důvodu je kladen rostoucí důraz na sémantiku a vzájemnou kompatibilitu jednotlivých zařízení. Vývoj webových stránek a aplikací není výjimkou. Stávající standardy se mohou jevit jako nedostatečné, poslední schválená verze značkovacího jazyka HTML vyšla v roce Konsorcium W3C usiluje o vytvoření nové specifikace HTML5, který má naplňovat současné požadavky pro tvorbu webu. Bakalářská práce se zaměřuje především na tuhle vyvíjenou specifikaci. Teoretická část má za úkol seznámit čtenáře s novými možnostmi vyvíjeného značkovacího jazyka HTML5. Dále se zabývá historií a vývojem internetu obecně, v kontextu s historií značkovacích jazyků a vývojem webových stránek. Jsou zde představeny a popsány hlavní novinky a jejich funkce. Praktická část se stává z případové studie zaměřené na konkrétní webovou prezentaci knihovny, která je analyzována a komparována s novou HTML5 verzí na jednotlivých příkladech. Praktická část se snaží najít odpověď na otázku, zda HTML5 nabízí tolik výhod, aby přechod na novou verzi byl vhodný i pro malou microsite městské knihovny. Cílem práce je seznámení s novými možnostmi značkovacího jazyka na poli webových technologií, a také poskytnutí dostatečného množství informací pro zhodnocení přínosu nové HTML verze, oproti verzím předchozím. 7

8 2 TEORETICKÁ ČÁST Daná kapitola obsahuje úvod do světa internetu a moderních technologií. Čtenář je zde ve zkratce seznámen s vývojem internetu, webových stránek a jejich důležitostí v dnešní době. Nacházíme se v éře moderních technologií. Pro dnešní populaci je existence bez moderních technologií téměř nepředstavitelná. Naprostá většina procesů ve všech odvětvích je zautomatizována a řízena počítači. Počítače a moderní technologie nejsou záležitostí pouze nadnárodních firem, ale staly se běžnou součástí v domácnostech. 1 Mimo osobních nebo přenosných počítačů, dochází k nárůstu počtu chytrých mobilních telefonů a tabletů. 2,3 Mezi další samozřejmost v dnešní době patří internet. 4,5 Slovo internet je skloňováno lidmi napříč všemi generacemi, od malých dětí až po občany důchodového věku. 6 Internet, nebo také síť sítí, je označením pro celosvětovou síť, kde jsou vzájemně propojené počítače, které mezi sebou mohou komunikovat. Častým synonymem internetu je slovo web. Avšak tohle spojení není přesné, web je především nejvýznamnějším nástrojem internetu. Dalším významným nástrojem je například nebo ftp. V roce 2010 se Finsko stalo první zemí světa, kde byl prosazen zákon, který zaručuje občanům přístup na internet. 7 1 Zatímco v roce 2005 bylo v ČR zhruba 30% domácností s počítačem, v roce 2013 jich bylo již 68%. (ČSÚ: Informační společnost v číslech 2014: B Domácnosti, 2014) 2 JAUME J., Mobile Technology Fact Sheet, V roce 2005 bylo v ČR 19% domácností s připojením na internet, v roce 2013 je to 67%. V roce 2003, z celkových výdajů domácnosti v ČR na ICT představovaly výdaje na internet 3%, v roce 2012 výdaje vzrostly na 27%. (Tamtéž.) 5 V roce 2010 používaly 4% populace v ČR připojení k internetu v mobilu, v roce 2013 jich bylo 21%. (ČSÚ: Informační společnost v číslech 2014: C Jednotlivci, 2014) 6 Počet celosvětových uživatelů internetu v roce 1995 byl odhadován na 16 milionů. V březnu 2014 je počet odhadován na 2,93 miliardy. (Internet growth statistics, 2014) 7 SAEED A.,

9 Avšak internet ani web tu nebyl vždy. Počátky internetu sahají do poloviny 20. století, kdy vznikaly konflikty mezi velmocemi USA a SSSR, hrozilo zničení komunikační infrastruktury. V USA proto vznikl armádní projekt ARPANET, který měl za cíl komunikační infrastrukturu decentralizovat. V roce 1969 došlo k propojení 4 počítačů napříč Spojenými státy. Poté, co válečná hrozba pominula, začal být internet využíván především vědeckými institucemi pro sdílení informací a výsledků výzkumů. Postupem času se k síti připojuje většina významných vzdělávacích institucí a výzkumných laboratoří. 8 Jak se ARPANET rozrůstá, tak je potřeba definovat protokoly a standardy pro datové přenosy. Na začátku 70. Let vzniká protokol FTP 9, v 80. a 90. letech vznikají protokoly TCP/IP a DNS V roce 1987 vzniká pojem internet, rok poté se objevuje první virus šířený po síti a díky tomu se začíná myslet i na bezpečnost. Síť ARPANET zaniká v roce Po roce 1990 se pomalu začíná formovat internet, jak jej známe dnes. Velkou revoluci v masovém rozšíření přináší Tim Berners-Lee a jeho služba WWW, následně standardizovaný protokol HTTP, a v neposlední řadě vznik prvního grafického webového prohlížeče Mosaic. 13 V roce 1991 internet přestává být používán pouze v akademickém prostředí a koncept se přesunuje ke komerčnímu využití a zábavnímu průmyslu. Dochází k nárůstu webových stránek, vzniku internetových obchodů, služeb, webových aplikací, chatů, instant messagingu, ových klientů a dalších služeb. 14 Zatímco v roce 1987 bylo k síti připojeno na 27 tisíc počítačů, v roce 1996 to bylo již 55 milionů. V roce 2011 byly vyčerpány adresy protokolu IPv4, tedy přes 4 miliardy. IPv4 nahrazuje další generace, protokol IPv LUKASIK S., FTP je podle TDKIV definováno jako: Protokol aplikační vrstvy TCP/IP pro archivaci, distribuci a předávání souborů mezi síťovými uzly. (SKLENÁK V., 2003-) 10 DNS podle TDKIV: Distribuovaná datová služba, prostředek pro fungování hierarchického systému domén. Zajišťuje decentralizovaným způsobem překlad jména hostitele (počítače) na jeho IP adresu a naopak. (SKLENÁK V., 2003-) 11 Internet history, FRITZINGER S., FRANCIS M., CAMPBELL-KELLY M., CUI Y.,

10 Během posledních dvou desetiletí došlo výraznému rozvoji nejen na poli webových stránek 16, ale především u informačních technologií obecně. ICT jsou součástí domácností stejně jako vysokorychlostní připojení k internetu 17. Spolu s vývojem moderních technologií, vzrůstala dostupnost i rychlost připojení, mimo jiné vzrůstala i náročnost jednotlivých uživatelů. V důsledku vývoje technologií se vyvíjí i web. Uživatelé, pro připojení k internetu, nepoužívají jen počítače, ale stále více například mobilní telefony, nebo tablety. Dnes webové stránky nejsou pouhou statickou prezentací, ale spíše dynamickou webovou aplikací. Díky tomu se rozšiřuje nejen funkčnost stránek, ale i zefektivňuje a zjednodušuje se uživatelské prostředí. V době plné moderních technologií lidé mají paradoxně pocit, že je na vše méně času. Je třeba co nejvíce usnadnění a zautomatizování základních činností. Dnešní uživatelé nestojí o uploadování jednotlivých fotografií nebo dokumentů, pokud současně nemohou s webovou stránkou pracovat. Zavedené standardy se tak stávají nedostatečnými jak pro uživatele, tak pro potenciál daných zařízení. Internet představuje zásobu obrovského množství informací a služeb. Od akademických informací, firemních prezentací, sociálních sítí, osobních blogů uživatelů a mnoho dalšího. V počátečním rozmachu se web stal velice nepřehledným a nesrozumitelným bez znalosti přesné adresy. 18 Problém se podařilo řešit nejdříve pomocí vyhledávacích serverů s katalogy, kam se mohly registrovat jednotlivé firmy a objevit se tak na seznamu daného katalogu. Později se začalo přecházet na fulltextové vyhledávání, které v dnešní době dominuje. Celosvětovým lídrem ve vyhledávání je především portál od společnosti Google. Fulltextové vyhledávání je dalším impulzem pro vývojáře webových stránek. Ty musejí být validní a klade se stále větší důraz na strojovou čitelnost. Což mimo jiné prosazuje i 16 Do roku 1993 se počet webových stránek dal počítat na stovky. V dubnu 2014 je odhadovaný počet přes 950 milionů. (April 2014 Web server survey, 2014). 17 V roce 2007 z celkových domácností připojených k internetu, jich bylo připojeno 25,6% pomocí vysokorychlostního připojení. V roce 2013 jich bylo připojeno 64% pomocí vysokorychlostního připojení. (ČSÚ: Tabulka 11, 2013). Počet domácností s vysokorychlostním připojení v zemích EU je 71,9% (V roce 2012). V roce 2007 to bylo jen 42,4%. (ČSÚ: Tabulka 12, 2013). 18 CAMPBELL-KELLY M.,

11 specifikace HTML5. Díky tomu mohou vyhledávače uživatelům zobrazovat relevantnější výsledky. Stále více firem a služeb se přesouvá do prostředí internetu, 19,20 právě z důvodu rychlejšího a snadnějšího přístupu uživatelů. Webové prezentace dnes nepředstavují jen konzumní obsah firem, e-shopů, nebo jednotlivců. Snaží se být různě přizpůsobovány a zapadat především do pojmu web 2.0. Jedná se o nový způsob chápání webové prezentace. Dřívější koncept webu, dnes označován jako web 1.0, byl především komerční a uživatel v roli pouhého konzumenta. Oproti tomu, web 2.0 je tvořen společně s uživatelskou komunitou. Nejlepším příkladem jsou sociální sítě, kde je obsah tvořen především uživateli. Mimo navázání vztahů, mezilidské komunikace, zábavy a sdílení obsahu, přináší sociální sítě útočiště i pro řadu firem. Ať už je to dolování dat, cílená reklama, nabízení služeb a dalších produktů. 21 Publikovat a šířit informace na webu dnes může zkrátka každý, kdo má dostatečné vybavení a připojení k internetu. Díky tomu dochází k duplikacím, dezinformacím, zahlcením a neuspořádanosti celého systému. Jedná se o neorganizovaný systém. Proto je potřeba strojově čitelných informací, aby je mohl vyhledávač relevantně filtrovat a zároveň šetřit čas uživatelů. Každé webové stránky by měly mít svůj účel vzniku. Je důležité rozlišovat cíl webové prezentace. Pro koho jsou určeny, co na nich uživatel bude hledat a co od nich očekává. 2.1 Historie a vývoj HTML Kapitola se podrobněji zaměřuje na vývoj HTML jazyka. Nejprve je jazyk definován, poté následuje popis historie a časový vývoj jednotlivých verzí. Následuje uvedení do souvislosti s metajazyky GML, SGML a XML. Dále je čtenáři popsán proces 19 V roce 2002 bylo v ČR 56% podniků, které měli webové stránky. V roce 2013 to bylo již 80% podniků. (ČSÚ: Informační společnost v číslech 2014: D Podniky, 2014). 20 Zatímco v ČR v roce 2003 nakupovala na internetu pouze 3% jednotlivců, v roce 2013 počet vzrostl na 34%. (ČSÚ: Informační společnost v číslech 2014: C Jednotlivci, 2014). 21 RUDMAN R.,

12 jednotlivých fází při schvalování specifikace. Nakonec jsou zde představeny Javascript, CSS a DOM, které jsou s jazykem spojeny. Definice HTML podle TDKIV: Značkovací jazyk pro vyjádření struktury dokumentu, který má být prezentován v rámci služby WWW. V dokumentu jsou značky (tagy) přisuzující vymezenému textu určitý význam (např. nadpis nejvyšší úrovně), vizuální naformátování a interpretace značek je základní funkcí klienta. Umožňuje vytvářet hypertextové vztahy buď v rámci téhož dokumentu, nebo mezi různými dokumenty (nezávisle na jejich umístění). Výchozí principy HTML jsou odvozeny z obecného značkovacího jazyka SGML HTML (HyperText Markup Language) je zkratka pro hypertextový značkovací jazyk, který se používá při tvorbě dokumentů. Vychází z metajazyka SGML. Vytvořené dokumenty jsou ve formě webových stránek určeny pro obsah World Wide Web (WWW), obsahují nejen text, ale i formuláře, multimédia, hypertext. Dokumenty mohou být doplněny o kaskádový styl, nebo o různé skripty (JavaScript, AJAX, PHP a další). Úplné základy HTML spadají až do roku 1945, kdy americký vědec Vannevar Bush ve svém článku As we may think 24 navrhuje zařízení Memex, které funguje na principu hypertextu. Zařízení bylo navrženo v důsledku informační exploze, kdy docházelo k informačnímu přetížení a vědci tak nebyli schopni zpracovávat záplavu informací k jednotlivým oborům. Návrh Memex, jakožto zařízení pro zvětšení kapacity lidské paměti, mělo plnit funkci uložení a zpětné vyhledání informace. 22 Standardní zobecněný značkovací jazyk, norma ISO-8879 pro strukturování elektronických textů. Značky umožňují elektronické zpracování dokumentu, publikování a tisk v různých formátech. Pomocí tzv. definic typu dokumentu (DTD) lze definovat vlastní strukturní značkovací jazyk. Jazyk HTML je definován pomocí SGML. Vzhledem ke značné obecnosti a současné složitosti se v praxi uplatňuje více jeho podmnožina jazyk XML. (SKLENÁK V., 2003). 23 SKLENÁK V., BUSH V.,

13 V roce 1963 Ted Nelson, průkopník informačních technologií, poprvé použil termín hypertext v projektu, který měl za cíl vytvořit počítačovou síť včetně jednoduchého uživatelského prostředí. 25 Tím byly položeny základy pro programátora Tima Berners-Leeho, pracovníka výzkumného centra CERN, který v roce vytváří projekt World Wide Web (WWW). Projekt WWW měl pomoci řešit komunikaci, sdílení informací a výsledků výzkumů mezi vědci. Součástí projektu byla také specifikace jazyka HTML a protokolu HTTP 26. Verze HTML, popsána v dokumentu HTML Tags, uměla základní funkce, jako jsou: členění textu do úrovní, řazení obrázků a odkazů do textu, možnost použití zvýraznění textu. Tim Berners-Lee svým projektem zefektivňuje vzdálenou komunikaci mezi vědci a vzájemné sdílení souborů. 27 V 90. letech dochází k rychlému rozvoji webu, striktní akademické prostředí střídá ekonomické a v neposlední řadě zábavní užití. Vzhledem k vzrůstajícím uživatelským požadavkům, vznikají v letech HTML verze , kde jsou definovány nové standardy. V roce 1993 vzniká verze 2.0, která podporuje grafické rozhraní. HTML se nejdříve vyvíjí pod záštitou CERN. Později přechází pod organizaci IETF (Internet Engineering Task Force), která se zabývá podporou a vývojem internetových standardů. V roce 1994 je zveřejněn grafický prohlížeč Netscape. Ve stejném roce Tim Berners- Lee odchází z výzkumného centra CERN a zakládá konsorcium World Wide Web Consortium (W3C), které má za cíl především rozvoj webu a vývoj internetových standardů. Zároveň IETF 28 vytváří pracovní HTML skupinu HTMLWG a v roce 1995 vydávají oficiální verzi 2.0, včetně grafického rozhraní. V roce 1996 je skupina HTMLWG ukončena a vývoj HTML se přesouvá pod W3C. 25 Hypertext, Protokol pro přenos HTML dokumentů mezi servery a klienty služby WWW. Server, který umožňuje přístup k souborům pomocí HTTP, se nazývá HTTP server, nebo častěji WWW server. Klientem je internetový prohlížeč. (SKLENÁK V., 2003-). 27 CAILLIAU R., Internet Engineering Task Force sdružení, které se zabývá rozvojem a podporou internetu a internetových standardů. 13

14 Verze 3.2 přichází v roce 1997, která je první standardizovanou verzí W3C. Značkovací jazyk obohacuje o tabulky, zarovnání textu a stylové prvky. 29,30 Ve stejném roce je vydána i verze 4.0, která je doplněna o další prvky pro tvorbu tabulek a formulářů. Jsou standardizovány rámy (frames). V roce 1999 je vydána verze 4.01, která opravuje chyby z verze předchozí. Verze 4.01 existují tři Strict, Transitional, Frameset. Verze Strict upřednostňuje strukturu nad formátem. Neobsahuje tagy, které definují formát dokumentu, jako jsou <center>, <b>, <font> a také definující formát jako color, background, border. Verze je určena pro psaní přístupného a srozumitelného kódu s důrazem na sémantiku. Verze Transitional už není tak striktní, dovoluje užívání parametrů definující formát dokumentu. Nedovoluje použití rámů (framů). Verze Frameset umožňuje používat tagy definující formát dokumentu a navíc umožňuje použití rámů. Rámy se používaly převážně v raných dobách internetu. Přenos dat dosahoval nižších rychlostí, mohl být placen podle přeneseného objemu či stráveného času. Rámy rozdělily stránku na jednotlivé části (hlavička, navigace, hlavní dokument, vedlejší panel, ). Při první návštěvě se stránka načetla celá, ale při pohybu po stránce se měnily pouze nutné rámy, nenačítala se znovu celá stránka. Tím nedocházelo k opětovnému přenosu nezměněných dat, čímž se šetřila spotřeba datového toku, času i zatížení hardware. V dnešní době se použití rámů nedoporučuje, lze nahradit pomocí CSS a dalších. 31 Verze 4.01 byla na dlouhou dobu poslední, vývoj se začat ubírat směrem XHTML, který používá univerzální jazyk XML. Hlavním rozdílem oproti jazyku HTML je ten, že XHTML neakceptuje chyby ve zdrojovém kódu. Pokud se vyskytla nějaká drobná chyba v HTML kódu, většina prohlížečů si s ní poradila a stránku dokázala zobrazit. XHTML namísto toho zobrazí chybovou hlášku. XHTML je tedy velice striktním jazykem, oproti HTML. Dalším rozdílem je například v párování tagů. V XHTML musí mít každý počáteční tag zároveň i svůj ukončovací, což u HTML neplatí. Dále je 29 LONGMAN A., SHANNON R., KURMAN N.,

15 nutnost psaní tagů a jejich atributů pouze malými písmeny a další. 32,33 striktních pravidel není XHTML jazyk u vývojářů moc oblíbeným. Z důvodu Historie značkovacích jazyků Principy značkovacích jazyků vychází ze standardních obecných jazyků (metajazyků). První značkovací jazyk se datuje do roku 1969, kdy jej trojice zaměstnanců IBM vyvíjela pod pojmem GML (Generalized Markup Language). GML byl představen v roce Jedná se o jednoduchý jazyk založen na DTD (Document Type Definition), kde je stanovena struktura, tvar značek a posloupnost. Tagy jsou ohraničeny dvojtečkou na začátku a tečkou na konci. Po osvědčeném GML přichází na řadu SGML. 34 SGML (Standard Generalized Markup Language) by se dalo označit za nesprávné pojmenování, jelikož se nejedná o značkovací jazyk, ale především o standardizovaný metajazyk, který umožňuje definovat (právě pomocí DTD) vlastní značkovací jazyky. SGML byl v roce 1986 standardizován ISO normou Jako příklad SGML je možné uvést HTML, který z něj vychází. Avšak průběhem času se metajazyk SGML díky své univerzálnosti ukázal být zbytečně komplikovaný. 35 Po metajazyku SGML, který se nepodařilo dostatečně rozšířit mimo jiné z důvodu obtížnějšího parsování, vyvinulo konsorcium W3C, jazyk XML. Specifika byla vydána v roce Jazyk XML měl být stejně univerzálním metajazykem jako SGML, ale současně řešil jeho hlavní nedostatky. 36 XML nemá žádný konkrétní soubor značek, ale představuje pravidla, jak je vytvářet. Lze jej podle potřeby rozšířit, snadno strukturovat, zajistit validitu. A také je nezávislý na médiu, dodavateli i platformě. Navíc se díky své jednoduchosti stal daleko rozšířenějším a používanějším. Z XML vychází například XHTML XHTML 1.0, XHTML 1.1, GOLDFARB C.F., KOSEK J., Extensible Markup Language (XML), IZSO J.,

16 XHTML (extended Hypertext Markup Language), vzniklo z důvodu náhrady původního HTML. První verze XHTML 1.0 je uvedena v roce 2000, obsahuje stejné tagy jako zatím poslední verze HTML, ale díky XML je striktnější. Navíc vychází také ve třech verzích strict, transitional a frameset. V roce 2001 vychází verze 1.1, která zakazuje používání dokumentu s MIME typem text/html. Díky změně MIME typu se bylo možné vyhnout chybné hlášce při chybě ve zdrojovém kódu. Specifikace verze 2.0 se objevuje v roce Daná verze neměla být zpětně kompatibilní, její vývoj nikdy nedošel do finální fáze a v roce 2009 byl ukončen. Poslední plánovaná verze HTML 4.01 vyšla v roce Od té chvíle se ale pokrok v ICT ani webu nezastavil. S narůstajícími požadavky a nedostatky přestala být daná verze dostatečná, její součástí se stala řada pluginů pro doplnění požadovaných funkcí. A tak, v roce 2004, pracovní skupina WHATWG (Web Hypertext Application Technology Group) začíná s vývojem Web Applications 1.0. Specifikace měla přinést především nové funkce do HTML a řešit tak vznikající nedostatky během dynamického vývoje ICT. V roce 2007 projekt převzala W3C a přejmenovala na HTML5. Komplexnější návrh HTML5 byl zveřejněn v roce Konečná specifikace by měla být schválena do konce roku HTML5 má za cíl nejdůležitější funkce standardizovat a zmodernizovat. 38 Specifikace je dokument, kde jsou popsány přesné definice a funkce HTML jazyka. Je dostupná na což jsou webové stránky konsorcia, které jazyk vyvíjí. Než jazyk dosáhne finální verze, musí projít vývojovými fázemi. Finální specifikace dosud není schválená. U jednotlivých elementů může dojít ke změnám, nebo úpravám. Proto je vhodné ověřit si, v jaké fázi se použitý element nachází. Před popisem jednotlivých fází je potřeba upozornit, že HTML5 není pouhou aktualizací předchozí verze, ale přináší i řadu každodenně používaných technologií, pomocí kterých lze vytvářet interaktivnější webové aplikace. Kromě nových elementů a tagů, jsou zde například nové API pro tvorbu grafiky přímo v prohlížeči, nebo možnost přehrávání audia/videa v prohlížeči bez nutnosti pluginů. V předchozích verzích bylo potřeba instalovat pluginy jakou jsou Flash nebo Silverlight pro přehrání videí. HTML5 38 HTML,

17 již není tvořeno v rámci SGML jazyka, ale jedná se o nový jazyk. Cílem konsorcia je definovat všechny důležité prvky tak, aby byly zpětně kompatibilní. Proto specifikace, kromě definicí jednotlivých značek, obsahuje i popis pro spolupráci s jinými jazyky a rozhraními, jako je například IDL, API apod. Z toho důvodu proces vývoje trvá více než šest let. V případě započtení i projektu Web Applications 1.0, je to již desátý rok. Jednotlivé fáze, kterými specifikace musí projít: FPWD (First Public Working Draft) Zveřejněná pracovní verze dokumentu, která není kompletní. Její specifikace se může kdykoliv změnit nebo zrušit, jelikož je v počátečním vývoji. WD (Working Draft) Pokud verze projde FPWD, dostane se do fáze WD, kde začne její detailní vývoj. Nese s sebou řadu změn. LCWD (Last Call Working Draft) Označená specifikace je považována za kompletní. Pokud se neobjeví závažné chyby, přesune se do další fáze. CR (Candidate Recommendation) Dostatečně upravený dokument, splňuje technické požadavky. Publikován k získání zkušeností k implementaci. Schválen pro používání vývojáři. PR (Proposed Recommendation) Pro ukončení CR fáze je vydána technická zpráva shrnující testování, opravy a implementace. Navrhuje konečné schválení. REC (Recommendation) Schválená specifikace. Finální fáze, která již nebude měněna. 39 Verze HTML5 se nyní (únor 2014) nachází ve fázi CR. FPWD verze byla vydána 22. ledna roku Zde bylo upozorněno na fakt, že vývoj může být ovlivněn návrhy veřejnosti, nejde pouze o striktní projekt skupiny vývojářů. Verze obsahuje rozsáhlou specifikaci, včetně zásadních změn oproti předchozí verzi HTML Další fáze, WD, byla vydána 10. června, roku 2008, následně vycházely další WD v průběhu roku 2009 (12. února, 23. dubna a 25. srpna), 2010 (4. března, 24. června a 19. října) a 2011 (13. ledna a 5. dubna). Při vydávání daných verzí docházelo k jednotlivým změnám. Například v přidávání nových, nebo naopak odebírání původních elementů. 39 W3C,

18 Následující fázi, LCWD, vydalo W3C V danou chvíli byla specifikace považována za kompletní. Avšak objevily se nové námitky a problémy, které byly vyřešeny v následujících WD, 29. března a 25. října přechází vývoj do další fáze CR. V tomto okamžiku je již verze považována za stabilní a je schválena pro použití. Specifikace stále upozorňuje na funkce, které mají nejistou budoucnost a mohou být odstraněny. Další verze CR se objevují 6. sprna 2013 a 4. února Přechod do fáze PR je předpokládán nejdříve na začátek září Do té doby, je očekávána a vítána zpětná vazba od vývojářů, nebo uživatelů. Z předchozího popisu je tedy zřejmé, že HTML5 není pouhou aktualizací. Je zde snaha o vytvoření nového jazyka, který má za cíl nejen splňovat nejdůležitější požadavky dnešní doby, ale také vytvořit rezervy pro budoucí vývoj. Nové vlastnosti, zpětná kompatibilita a řešení nově se objevujících požadavků je jistě časově náročnou záležitostí, proto vývoj nelze uspěchat a ještě nějaký čas potrvá. Mezi základní stavební kameny HTML5 patří především kompatibilita, přínos, interoperabilita a obecný přístup. 41 Kompatibilita zajišťuje plynulý přechod a spolupráci mezi jednotlivými verzemi. Je zde kladen důraz na podporu stávajícího obsahu. HTML5 ve svých specifikacích zohledňuje především přínos pro uživatele. Uživatelům byla dána možnost vyjadřovat se během vývoje k jednotlivým nedostatkům. Autoři se tak snažili vycházet vstříc a vytvořit tak co nejvíce přínosný jazyk. Důraz je také kladen na bezpečnost a oddělení formy od obsahu. Co se týče interoperability, tak byly odstraněny zbytečné složitosti a tím došlo k zajištění jednoduchosti. Obecným přístupem se rozumí především nezávislost na médiu, podpora světových jazyků a přístupnost pomocí WAI-ARIA. S HTML také úzce souvisí CSS, JavaScript a DOM. Díky kterým je možné odlišovat dynamické webové stránky od statických. V následujících řádcích budou jednotlivé zkratky krátce představeny. 40 HTML5 PUBLICATION HISTORY, LUBBERS P.,

19 CSS (Cascading Style Sheets), neboli kaskádové styly. Technologie, pomocí které lze definovat vzhled vytvořených dokumentů. HTML, XML nebo XHTML dokument se zaměřuje především na obsah webových stránek, naopak CSS dodává prezentaci vzhled. Díky tomu je zajištěna větší přehlednost zdrojových kódů a snadnější změny vzhledů webových prezentací. 42 Vývoj CSS spadá pod konsorcium W3C. V současné chvíli je vyvíjena verze CSS3, která je vyvíjena tak, aby splňovala a doplňovala požadavky HTML5. JavaScript je programovací jazyk od firmy Netscape. Je často vkládán přímo do HTML kódu. Slouží k ovládání interaktivních prvků. 43 JavaScript je většinou spouštěn až na straně klienta, nikoliv na serveru, proto může při zobrazování náročných operací docházet k zpomalení, nebo zamrznutí prohlížeče. DOM (Document Object Model), neboli objektový model dokumentu. Standardizován organizací W3C. Jazykově neutrální rozhraní, sloužící k modifikaci webové stránky. Disponuje funkcemi, které umožňují přístup k jednotlivým objektům dokumentu a následnou práci s nimi. 44 Následující kapitola se věnuje porovnáním s přechozí verzí a popisem nových funkcí. 2.2 Struktura HTML dokumentu Kapitola popisuje základní prvky dokumentu a změny HTML5 oproti předchozímu HTML Struktura HTML se vytváří pomocí elementů, atributů a tagů. Každý prvek má svoji specifickou funkci a je ohraničen v ostrých závorkách. Vše, co není uzavřeno v závorkách, bude na webu zobrazeno. Díky tomu mohou prohlížeče rozeznat prvky od prostého textu a správně je zobrazit. 42 CSS Introduction, [2012]. 43 JavaScript Introduction, [2012]. 44 DOCUMENT OBJECT MODEL,

20 Tag je základní značkou, která se používá pro označení elementu. Tagy se dále dělí na párové a nepárové. V případě párového tagu je použití na začátku a konci elementu, viz: počáteční tag = <p>, ukončovací tag = </p>. V případě nepárového tagu je použit pouze na začátku, viz tag <br> (koncový tag </br> neexistuje). Atribut je specifikován tagem a hodnotou, definuje určitou vlastnost prvku. Například <p class="info">. Element je označení pro vše, co tagem začíná a končí ukončovacím tagem, včetně vnořeného obsahu mezi tagy. <a href="index.htm">odkaz na titulní stranu</a>. 45 V HTML jsou základní značky, které formují celý dokument. Je to především doctype, html, head, title a body. HTML5 přináší jednodušší zápis. Doctype, tímto elementem začíná každý HTML dokument. Element prohlížeči říká, o jakou verzi HTML se jedná. Například verze HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Oproti tomu zápis verze HTML5 vypadá následovně: <!DOCTYPE html> Navíc je zpětně kompatibilní, takže není potřeba měnit zbytek kódu. Prvek <html> je párový tag, který začíná a ukončuje každý dokument. <head> představuje hlavičku dokumentu. Zde jsou obsaženy informace o stránce, může být doplněn o title, meta, style, link, script a další. K hlavičce patří <title>, neboli název stránky. Zobrazuje se ve výsledcích vyhledávání. Název je zobrazen v horní liště prohlížeče. Zjednodušení prvku <meta>, nepovinný tag, který definuje znakovou sadu: 46 HTML4.01 <meta http-equiv="content-type" content="text/html"; charset=utf-8> HTML5 <meta charset="utf-8"> 45 HTML syntax, [2012]. 46 Differences from HTML4,

21 Zjednodušení vložení CSS stylu pomocí prvku <style>, atribut type již není třeba zapisovat, prohlížeče jej dokáží rozpoznat: HTML 4.01 <style type="text/css"></style> HTML5 <style></style> Prvek <link> spojuje stránku s dalším souborem, například načítá externí CSS styl: HTML 4.01 <link rel="stylesheet" type="text/css" href="styl.css"> HTML5 <link rel="stylesheet" href="styl.css"> Stejným zkrácením prošel i prvek <script> (například pro JavaScript): HTML 4.01 <script type="text/javascript"> </script> HTML5 <script></script> Tag <body> slouží k zobrazení obsahu stránky. Zde se definují odrážky, barvy písem, odkazů, pozadí a další. Pomocí tagu body se zajistí stejné zobrazení u ostatních uživatelů, kteří mají rozdílné nastavení parametrů rozlišení. 2.3 Sémantika V dané kapitole je čtenář seznámen se základními změnami v členění webových stránek, a také se zastaralými tagy. Dále jsou zde popsány zásadní změny v oblasti webových formulářů, mikrodat a ARIA prvků. Sémantice na webu je kladen stále větší důraz. Zvyšuje se potřeba vytvářet srozumitelný web nejen pro uživatele, ale také pro webové prohlížeče a aplikace, které budou moci pracovat s obsahem samostatně. 47 V specifikaci HTML5 je na sémantiku myšleno, proto vznikla řada tagů a atributů, které přiřazují zadávaným datům význam. Dále se specifikace HTML5 soustředí na popis dokumentu a jeho zpětnou kompatibilitu. Specifikace obsahuje popis pravidel chování parserů při zobrazování DOM i u nevalidních dokumentů. Pomocí toho je zajištěna správná kompatibilita jak 47 KEITH J.,

22 s JavaScriptem, tak i s kaskádovými styly. Díky stanoveným pravidlům již nebude docházet k možným odlišným zobrazení DOM při rozlišných použití prohlížečů Rozdělení stránky Ve verzi 4.01 a starší, se webová stránka rozdělovala především pomocí elementu <div>, například <div id="info">. Jeho hlavní nevýhodou je, že stroje, které webové stránky indexují, nedokáží správně pochopit strukturu dokumentu a díky tomu nedokáží správně nabídnout relevantní výsledky. V HTML5 je element <div> nahrazen nově vzniklými elementy, které lze využít při rozdělování obsahu stránky. Jsou to: <article>, <aside>, <nav>, <section>, <header>, <footer>, <figure>, <figcaption>, <hgroup>. Dané elementy efektivně zpřehledňují zdrojový kód. Nejen, že se v nich uživatel může snadněji orientovat, ale hlavně jsou strojově zpracovatelné, na rozdíl od předchozího elementu <div>. 48 Proč zrovna tyhle názvy elementů a ne jiné? Při tvorbě HTML5, editor pracovní skupiny W3C, Ian Hickson za pomocí Google nástrojů provedl analýzu více než miliardy webových stránek, ve které zjišťoval nejčastěji používané elementy div id a class. Na základě výsledné statistiky byly dané elementy zvoleny. Podobnou studii vytvořila i společnost Opera. 49 Význam jednotlivých elementů: <article> samostatný a nezávislý obsah, lze použít například pro RSS. <section> obecná část dokumentu, například článek. Může být rozdělen do více sekcí. <aside> například boční panel, může být spojen s hlavní stránkou, nebo zobrazovat reklamu. <nav> zastává funkci navigace (menu), převážně bývá použit na levé straně, nebo pod hlavičkou. <header> zastává funkci hlavičky stránky mimo jiné může sloužit i pro označení úvodu článků, nebo kapitol. Může být použit vícekrát (oproti <div id="header">). <footer> zastává funkci patičky stránky obsahuje např. info o autorovi, odkazy nebo copyright. Může být použito vícekrát jako patička sekce článku, nebo jako patička celého dokumentu. 48 Tamtéž. 49 MILLS CH.,

23 <mark> párový prvek sloužící pro označení textu. Zvyšuje význam dané části dokumentu. <figure> a <figcaption> prvky slouží pro popis specifického objektu. Například pro popis obrázku, tabulky, grafu apod. Prvek figure slouží jako kontejner obrázku, pomocí vnořeného prvku figcaption je obrázek detailněji popsán. Vhodné pro osoby se zrakovým postižením. <hgroup> seskupuje víceúrovňové nadpisy. Rozdělení obsahu porovnání s předchozí verzí: 50 Obrázek č. 1: Verze HTML Obrázek č. 2: Verze HTML5 52 Kromě novinek zde jsou i tagy, které se naopak v nové verzi používat nedoporučuje. Proto je lepší je při tvorbě webu vynechat. Mezi nejčastější patří: <acronym> slouží pro označení akronymu, doporučeno používat <abbr>. <applet> představuje vložené okno aplikace, nahrazeno <object>. <basefont> definuje základní písmo na stránce, nyní pomocí CSS. <big> zvětšuje písmo v textu, nyní pomocí CSS. <center> centruje text na střed, nyní pomocí CSS. <dir> vytváří adresářový seznam, nahrazeno <ul>. <font> styl textu, nyní pomocí CSS. <frame> rozděluje stránky na rámce, nyní pomocí <iframe>. <strike> přeškrtnutý text, nyní pomocí CSS. <tt> styl písma, nyní pomocí CSS. Ve specifikaci HTML5 zůstávají, ale jsou označeny jako obsolete (zastaralé) HUNT L., Tamtéž. 52 Tamtéž. 23

24 2.3.2 Webové formuláře Webové formuláře jsou nedílnou součástí HTML. Využívají se například při registraci uživatele, vyhledávání na webu, vkládání komentáře, nebo při objednávkách v e- shopech. Také slouží pro sběr dat, jako jsou například kontaktní údaje ( ová adresa, telefonní číslo, nebo adresa bydliště). Pro správnou funkci je třeba ukládat pouze data validní. HTML5 proto přináší nové atributy. Při webové prezentaci knihovny je lze použít především při registraci, vyhledávání v katalogu nebo pro zasílání uživatelských dotazů. Při použití nových formulářových atributů je vhodné zkontrolovat podporu u jednotlivých prohlížečů. Nové HTML5 atributy: 54 Placeholder pomocí placeholder lze zadat text, který se zobrazí uvnitř prázdného pole (může sloužit jako nápověda). Při zadávání textu do daného pole, nápověda zmizí. Obrázek č. 3: Placeholder (Zdroj: vlastní) Autofocus po načtení stránky se automaticky nastaví kurzor do daného pole. Příkladem je vyhledávač Google, kde při načtení stránky lze ihned psát hledaný výraz, bez nutnosti kliku do vyhledávacího pole. Autocomplete atribut nabízí automatické vyplnění polí na základě předchozích dat. 53 W3C, GOLDSTEIN A.,

25 Obrázek č. 4: Autocomplete (Zdroj: vlastní) Required atribut určuje, že dané pole je povinné a bez vyplnění nemůže být formulář odeslán. Obrázek č. 5: Required (Zdroj: vlastní) Pattern slouží ke kontrole formátu. Například pro pole telefonní číslo, PSČ, apod. Zajišťuje správnost formátu. Obrázek č. 6: Pattern (Zdroj: vlastní) List nabízí volbu našeptávače, nabízí předdefinovaný seznam, který se zobrazuje podle zadaných písmen do pole. Hodnota atributu list musí odpovídat elementu datalist ve stejném dokumentu. Obr. č. 7: List (Zdroj: vlastní) 25

26 Multiple povolení zadání více hodnot do pole. Například zadání více ových adres. Novalidate daný atribut vypíná automatickou validaci. Formnovalidate atribut indukuje nevalidaci formuláře. Umístěn na submit tlačítka. Form atribut, kterým lze propojit formulářový prvek s formulářem (například tlačítka v tabulce). Formaction specifikuje soubor, kam bude výsledný formulář odeslán. Formenctype specifikuje, jakou způsobem budou odesílané data kódována. Formmethod udává metodu, kterou bude formulář odeslán. Formtarget udává, kde se má výsledek zpracování zobrazit. Datalist definuje seznam položek, ze kterých je možné vybrat. Pokud si uživatel nevybere, jednoduše napíše svoji vlastní (reaguje na tag selectbox, kde si uživatel musel vybrat jednu z nabízených položek bez možnosti zadání vlastní). Keygen slouží k ověření uživatelů. Při odeslání formuláře generuje klíč, který je použit k ověření při dalším přístupu. Inputy Krom atributů, přináší formuláře i nové vstupní prvky. Ve verzích předchozích, se u uživatelských vstupů formulářů používalo převážně typu text <input type="text">, kam je možné vložit libovolný údaj. Z daného pole však není jasné, jaký formát zadat, třeba u telefonního čísla. Nově se ale objevují typy jako search, , url, tel, number, date, time, color, range apod. Vstupní pole search <input type="search" name="vyhledávání">, udává danému poli jednoznačný význam, jež libovolný prohlížeč může rozlišit od prostého pole text. 26

27 Přidáním atributu results (results="5") se zobrazí historie pěti posledních vyhledávaných výrazů. Rozlišení vstupních typů je usnadněním například pro uživatele, kteří se k webu připojují přes dotyková zařízení. Možnosti využití inputů Pro vyplnění inputu tel prohlížeč rovnou zobrazí numerickou klávesnici pro zadání tel. čísla. Při použití inputu date prohlížeč uživateli při zadávání nabídne kalendář, apod. Input number přidá k poli šipky pro možnost zadání požadovaného čísla klikáním na šipku nahoru, nebo dolů. Lze zde nastavit i maximální a minimální hodnotu. Pomocí prvku range se klasické pole změní na posuvník, kterým lze nastavit danou hodnotu. Díky daným atributům a inputům je možné usnadnit si práci při tvorbě formulářů, které jistě přináší i pozitivní vnímání ze strany uživatelů. Pro správnou funkčnost je třeba ověřit podporu u jednotlivých prohlížečů Microdata (metadata) Microdata umožnují tvůrcům webů označovat obsah tak, aby mohl být strojově zpracován a díky tomu pochopitelný pro vyhledávače. Tím se zásadně zvyšuje relevance výsledků. Kromě použití atribut pro vymezení struktury, které zajišťují soudružnost dokumentu, specifikace HTML5 přináší řadu atribut, díky kterým lze přidat microdata k libovolnému elementu. Microdata fungují pomocí označení název/hodnota, jména jsou definována ve slovnících. Pro microdata existují slovníky, které definují jednotlivé vlastnosti názvů. 55 Například pro popis osoby na webové stránce, je potřeba vytvořit slovník, který bude definovat sadu vlastností. Pro popis osoby lze definovat vlastnosti, jako jsou fotografie, jméno, titul, datum narození, pracovní pozice, kontakt, adresa apod. Definované slovníky mají svojí webovou adresu, kde jsou umístěny (namespace). Microdata fungují na principu zanořování. Tedy pro vytvoření se použije element osoba, do kterého se vloží potřebné hodnoty RONALLO,

28 Jednoduchý zápis pro osobu s vlastnostmi jména a fotografie může vypadat následovně: <section itemscope itemtype=" <h1 itemprop="name">petr Novák</h1> <p><img itemprop="image" src=" alt="[petr Novák]"></p> </section> Použité atributy: Itemscope označuje novou položku, která má určité vlastnosti. Položky lze zanořovat. Itemtype odkazuje na slovník, který musí mít platnou URL adresu, specifikuje schéma objektu. Itemid označuje identifikátor položky. Itemprop označení pro detailní popis objektu. Itemref umožňuje přiřadit vlastnosti, které nejsou spojeny v jednom elementu, ale jsou přiřazeny jinde v dokumentu. 57 Microdata API Díky strojové zpracovatelnosti dochází, kromě relevantnějších výsledků při vyhledávání, i k výrazným zjednodušením na straně uživatele. Možnosti použití pokud je správně označeno datum libovolné události, prohlížeč může uživateli nabídnout přidání události do kalendáře bez nutnosti manuálního přepisování. To stejné platí například v případě sdílení adresy a kontaktů. Pokud uživatel potřebuje vyhledat recept, tak je možné vytvořit aplikaci, která na základě metadat implementuje nutné suroviny přímo do nákupního seznamu ARIA (Accessible Rich Internet Applications) ARIA je rozšíření HTML5, které se snaží zlepšit přístupnost webu. Cílem je vytvořit přístupnější webový obsah a webové aplikace především pro osoby se zdravotním postižením. Aria obsahuje prvky, díky kterým lze detailněji popsat strukturu webové stránky, včetně ovládacích prvků. Tím, že bude strojově čitelná, napomůže uživateli 56 PILGRIM M., MILLS CH.,

29 k lepší orientaci. Jednotlivé atributy pomáhají popsat stav a vlastnosti ovládacích prvků uživatelského rozhraní. Mimo jiné také zlepšuje přístupnost z klávesnice. 58 Aria řeší: Přístupnost uživatel se musí k informacím dostat. Ovladatelnost uživatel, který se na web dostane, musí mít možnost jej ovládat. Srozumitelnost obsah musí být pro uživatele srozumitelný. Orientace uživatel musí mít možnost pohybovat se a dostat se kam potřebuje. Čas uživatel musí být schopen dané úkony udělat v rozumném čase Multimédia Mezi nové rozšiřující prvky, které nebylo možné v předchozí verzi použít, patří elementy audio a video, díky kterým získal jazyk nové multimediální možnosti. Ve specifikaci HTML5 se nachází řada prvků, které umožňují vkládání multimédií bez potřeby rozšiřujících pluginů v prohlížeči, a také obsahují API pro přehrávání. Video, či audio se vkládá pomocí prvku <video>, nebo <audio>. Možné atributy: Audio možno nastavit na muted, aby bylo video bez zvuku. Autoplay zajistí, aby se audio/video spustilo ihned po načtení stránky. Controls zobrazí defaultní prvky přehrávače pro ovládání audia/videa. Loop přehrávání ve smyčce. Poster zobrazí URL obrázku během načítání. Preload audio/video se začne samo načítat. Může obsahovat hodnoty none (nenačítat), auto (začne audio/video načítat do vyrovnávací paměti), metadata (stáhne pouze informace o souboru, jako jsou rozměry, délka, úvodní snímek apod.). Width a height nastavení výšky a šířky videa. 60 Zásadní problém však nastává u multimediální podpory webových prohlížečů. U multimédia je důležitý kontejnerový formát a kodek. Existuje řada možných formátů a 58 Accesible Rich Internet Applications (WAI-ARIA) 1.0, PAVLÍČEK R., PFEIFFER S.,

30 kodeků, ale není zde určen žádný standard. Ne všechny prohlížeče podporují všechny kontejnerové formáty a kodeky. Nejlepším řešením je pomocí elementu source definovat více formátů, aby byla zajištěna funkčnost ve většině prohlížečů. Viz: <video controls> <source src=" type='video/mp4; codecs="avc1, mp4a"'> <source src=" type='video/ogg; codecs="theora, vorbis"'> <p>your user agent does not support the HTML5 Video element.</p> </video> Zdroj: Následující tabulky zobrazují nejpoužívanější webové prohlížeče a jejich multimediální podporu. Chrome Firefox Opera Safari Internet Expoler (verze) OGG ANO ANO ANO NE NE NE NE H.264 ANO NE NE ANO NE ANO ANO WebM ANO ANO ANO NE NE NE NE Tabulka č. 1: Přehled video podpory (Převzato z: HTML5 Video, 2013) Chrome Firefox Opera Safari Internet Expoler (verze) MP3 ANO NE NE ANO NE NE ANO WAV ANO ANO ANO ANO NE ANO NE OGG ANO ANO NE NE NE NE NE Tabulka č. 2: Přehled audio podpory (Převzato z: HTML5 Audio, 2013) Videosoubory a audiosoubory jsou takzvaným kontejnerem, který obsahuje videostopu, audiostopu a metadata. Nejznámější kontejnerové formáty jsou například mp3 (MPEG), mp4 (MPEG-4), mkv (Matroska), avi a další. 30

31 Kodeky (kodér a dekodér) jsou algoritmy určené ke kódování nebo dekódování konkrétního (audio/video) souboru. Jsou nezbytné pro správné přehrání daných souborů. Vznikly převážně z důvodu zmenšení datových objemů u multimediálního obsahu. Mezi nejznámější kodeky patří například AAC, MPEG-3, H.264, Theora a další. Jak již bylo napsáno výše, zatím neexistuje formát ani kodek, který by se stal standardem. Z toho důvodu je vhodné použití více formátů. Element video je zobrazován jako box element, tedy je možné ho libovolně stylovat pomocí CSS zaoblení rohů, ohraničení apod. 2.5 Grafika Canvas Novým grafickým prvkem HTML5 je canvas, plátno, na které lze kreslit obrazce za použití JavaScriptu. Kromě jednotlivých obrazců, grafů, diagramů, nebo animovaného pozadí, lze pomocí canvas vytvářet webové hry, které fungují jak v online, tak i v off-line režimu. Canvas je vhodné použít převážně tam, kde je nutná interakce uživatele. Pokud by měl canvas zobrazovat pouze statické obrazy, může se tohle použití jevit jako zbytečné. Vykreslování grafiky je zdlouhavé a zatěžuje procesor a paměť více, než při načtení standartního obrázku. 61 O rozhraní canvas toho lze napsat daleko více než pouhých pár řádků. Avšak tahle práce se více rozsáhlou specifikací nebude zabývat. 2.6 Off-line úložiště V dnešní době jsou stále populárnější webové aplikace, které fungují bez nutnosti instalace v osobním počítači. Data jsou tak uložena v cloudu a uživatel k nim nemusí mít přístup, pokud není připojen k internetu. Daný problém lze řešit právě pomocí HTML5. Off-line úložiště umožňují ukládat data z webu na uživatelský počítač. Díky tomu je možné k nim přistupovat a pracovat s nimi bez nutnosti připojení k internetu. V momentě opětovného připojení dochází k datové synchronizaci. 61 PILGRIM M.,

32 2.6.1 AppCache HTML5 ve své specifikaci představuje AppCache, neboli aplikační cache 62. AppCache se snaží řešit funkci online aplikací v off-line prostředí. Nástroj při online režimu uloží cache potřebné k funkci webové aplikace na lokální úložiště a následně je při off-line režimu poskytuje prohlížeči. Lze využít především při cestování, nebo když nemá uživatel možnost připojení k internetu. 63 Nezbytné soubory pro správnou funkčnost, které se uloží na straně uživatele, určuje soubor manifest Web Storage Lokální úložiště, zde se ukládají vytvořená data. Lokální úložiště se dělí na LocalStorage ( dlouhodobá data v prohlížeči) a SessionStorage ( krátkodobá data, uložená na dobu sezení session například dokud se nezavře okno prohlížeče). 64 Fungují jako jednoduché databáze, indexovány obecným klíčem. Na podobném principu funguje v prohlížeči cookies s rozdílem, že cookies data si ke klientovi ukládá server pro pozdější účely, kdežto web storage data jsou ukládány uživatelem a v prohlížeči zůstávají. Umožnuje uložit data o velikosti 5 MB, oproti tomu Cookies mají maximální velikost 4 KB. 65 V kombinaci s AppCache lze použít k vytvoření off-line aplikací. Při následném připojení k internetu se potřebná data aktualizují Web Database (Indexed DB) Specifikace HTML5 nabízí webové databáze pro prohlížeč, které ocení především vývojáři webových stránek. Web Database je rozhraní k databázi SQLite. Podporují ji prohlížeče Chrome, Safari, Opera. 66 Indexed DB prosazují prohlížeče Firefox a Internet Explorer. 62 Cache - mezipaměť, označení pro vyrovnávací paměť. 63 BILDEMAN E., WAYNER P., WISNIEWSKI J., SAHRP R.,

33 2.7 Komunikace/Konektivita Kapitola komunikace seznamuje uživatele s novými možnostmi HTML5, které umožňují plynulejší a snadnější konektivitu. Jsou to web sockets a web workers WebSockets Mezi další novinku ve specifikaci HTML5 jsou tzv. WebSockets. Pod názvem se skrývá technologie, která slouží na podporu oboustranné komunikace mezi klientem a serverem. 67 Předchůdcem byla například technologie AJAX, která umožňovala asynchronní komunikaci mezi serverem a klientem. Tedy komunikaci na pozadí bez nutnosti aktualizace stránky. Avšak ke komunikaci zde byla nutná interakce uživatele. Změnu přináší WebSockets. API umožňuje vytvořit stálé spojení se serverem, kdy mohou obě strany současně odesílat data. WebSockets slouží pro vývoj real-time aplikací a zajišťují rychlejší komunikaci. 68 Možnosti využití jsou například v instant messagingu, online multiplayerových hrách, online sázení, burzách a dalších webových aplikací, které běží v reálném čase. Díky použití WebSockets může docházet k dramatickému snížení zbytečného síťového provozu během uživatelského dotazování Web Workers Scripty webových stránek se načítají a fungují pomocí JavaScriptu. Jehož největší nevýhodou je pouze jednovláknová implementace. Pokud vývojář tvoří složité stránky, kde je řada skriptů, může web přestat reagovat, nebo na chvíli zamrznout. K tomu dochází z důvodu, že JavaScript neprovádí výpočty současně, ale pouze jeden po druhém. 69 Daný nedostatek řeší právě Web Workers. Takoví weboví pomocníci, kteří vykonávají více procesů zároveň. Většina skriptovacích jazyků je vícevláknová (multi-threaded), tedy podporují více operací zároveň. Pokud se vytváří náročnější webové prostředí, je vhodné zvážit použití právě Web Workers. 67 W3C, HOGAN B., WHATWG,

34 2.8 Přístupový bod Přístupový bod představuje řadu novinek, díky kterým lze usnadnit práci nejen uživatelům, ale také vývojářům Geolokace S rostoucím počtem přenosných zařízení narůstá počet aplikací s určováním zeměpisné polohy. Pomocí jednoduché API Geolokace lze zjistit polohu přímo pomocí prohlížeče. Geolokace umožňuje získat informace o aktuální poloze uživatele. Aby se předcházelo porušování ochrany soukromí, uživatel nejdříve prohlížeči musí ke zjištění polohy dát souhlas. 70 Při implementaci na webových stránkách libovolné knihovny může uživatel zjistit například nejbližší trasu do dané knihovny ze své aktuální pozice. Možnosti využití může být například při marketingové strategii ze strany obchodů, pokud se nachází v blízkosti prodejny. Další využití je v herním průmyslu, kdy se při hraní hry uživatelé pohybují v reálném prostředí a mají za úkol navštívit a lokalizovat různé budovy nebo cíle. Další využitím mohou být aplikace na jízdní řády, kdy mohou uživateli nabídnout nejbližší zastávku a podle toho vyhledat nejlepší spojení. Geolokaci například využívá aplikace Foursquare, které umožňuje označit, kde se uživatel právě nachází, nebo zjistit kde se nachází jeho přátelé a známí. Také může být použita pro měření uběhnuté trasy a podobně Drag and drop Další API novinkou v HTML5 je právě možnost přetažení a uspořádání objektů, neboli táhni (chyť) a pusť. V předchozí verzi se k funkci drag and drop používaly například knihovny JQuery, nebo Dojo. Avšak zde se nejednalo o nativní implementace webového prohlížeče. DnD je nyní součástí HTML5, díky tomu mohou být aplikace rychlejší a spolehlivější. Pohyblivost prvku se definuje pomocí atributu draggable, který se nastaví na hodnotu true. 70 W3C,

35 Během přetahování dochází k určitým situacím, které prohlížeči sdělují, v jaké fázi se proces nachází a podle toho reaguje. Jednotlivé fáze jsou: Dragstart událost začíná, když uživatel začne přetahovat prvek. Drag událost nastává, když je prvek chycen. Dragenter událost začíná, když uživatel dostane prvek nad cílový element. Dragover událost nastává během přesouvání prvku nad cílovým elementem. Dragleave událost nastává, když uživatel upustí prvek. Drop událost nastává, když je prvek upuštěn. Dragend událost se vyvolá po ukončení procesu (nezáleží, jestli úspěšném, či nikoliv). 71 Možnosti použití jsou například libovolné přeskládání prvků na stránce, možnosti nakupování vzít objekt a vložit jej do košíku, možnost odstranění vzít objekt a vhodit jej do koše. Možnost přeskládání prvků v tabulkách, nebo stromových adresářích. Možnost přetahování objektů z prohlížeče přímo na pracovní plochu, nebo naopak upload objektů na web Speech Input API Specifikace W3C zveřejnila Speech input API, aneb rozpoznávání hlasu a ovládání aplikací a webových prohlížečů právě pomocí hlasu. API nahrazuje vstup klávesnice a nahrazuje ho vstupem řeči Page Visibility API API se stará o to, aby stránka pracovala pouze, když je prohlížena. Jednotlivé webové stránky obsahují řadu skriptů, animací nebo videí, které více či méně zatěžují procesor. Pokud uživatel běžně v prohlížeči používá více panelů více webových stránek, zatěžuje tak procesor více než je nezbytné. Což má za následek například rychleji vybitou baterii v notebooku, nebo tabletu. Stránky v pozadí běží, i když se na ně uživatel nedívá. Tuhle problematiku řeší právě Page Visibility API. 72 API je již implementováno v prohlížeči Google Chrome od verze 13. Objektu jsou přidány dva atributy. Hidden a visibilitystate. 71 WHATWG, W3C,

36 Hidden určuje, zda je daná stránka viditelná, nebo skrytá. Může nabývat hodnot true (stránka není vidět minimalizována, zamknutý PC, stránka v panelu na pozadí, minimalizace prohlížeče) a false (stránka je zobrazena na popředí). VisibilityState udává přesnější stav dané stránky. Může nabývat hodnot: Hidden stránka je skrytá. Visible stránka je viditelná. Prerender stránka byla vykreslena, ale ještě se nezobrazila. Preview stránka se zobrazuje pouze v náhledu. VisibilityChange událost, která indikuje změnu viditelnosti. Další příklad, při přepnutí ze stránky, na které běží video, se video zastaví + úspora baterie u notebooku, tabletu, nebo mobilu FileSystem API API řeší problematiku webových aplikací a jejich práci se soubory v PC uživatele. Uživatel může pro nahrání vybrat více souborů najednou, dříve bylo možné vybírat jen po jednom, což celý proces zpomalovalo. Další novinkou je možnost zobrazení informací o souborech, které mají být nahrány, nebo možnost sledování procesu nahrávání. Díky API může webová aplikace využívat vymezenou část souborového systému uživatele. Lze data vytvářet, procházet, číst nebo zapisovat. 73 API je rozdělena do tří částí: manipulace a čtení (File/Blob, FileReader, FileList), zapisování a vytváření (FileWriter, BlobBuilder), přístup a adresář k souborovému systému (LocalFileSystem, DirectoryReader). Možnosti využití například pro multimediální obsah, off-line (stahování a ukládání příloh), off-line přehrávač (stáhnutí větších souborů pro pozdější přehrání), hry a jiné aplikace, stálý upload, foto editor s off-line přístupem. 73 BIDELMAN E.,

37 2.9 Podpora webových prohlížečů Jak již bylo v předchozích částech u vybraných novinek zmíněno, HTML5 je stále v testovací verzi a proto je třeba ověřit podporu u prohlížečů. Mezi nejrozšířenější prohlížeče v dnešní době patří (v závorkách uveden podíl na trhu): Google Chrome (37,2%), Microsoft Internet Explorer (18,3%), Mozilla Firefox (18,1%), Safari (16,6%) a Opera (2,9%). Těchto 5 prohlížečů ovládá většinu trhu 74. Na následujících obrázcích je znázorněna podpora HTML5 k listopadu Obrázek č. 8: Podpora webových aplikací Podle statistik W3Counter z březnu (March 2014 Market Share, 2014) 75 Převzato z: HTML5 Browser Support,

38 Obrázek č. 9: Podpora grafiky a vloženého obsahu 76 Z ukázek je patrné, že většina prohlížečů se již dokázala přizpůsobit. Největší nevýhodu mají uživatelé používající starší verze Internet Explorer Informační architektura a UX S tvorbou webových prezentací úzce souvisí pojmy informační architektura a user experience. Informační arichtektura se rozvíjí s velkým nárůstem počtu webových stránek a soustředí se především na design webu. Cílem informační architektury je návrh takové webové prezentace, aby byla pro uživatele co nejpříznivější. Definice Informační architektury podle L. Rosenfelda a P. Morvilla: 1. Konstrukční řešení sdíleného informačního prostředí. 2. Umění a věda vytvářet informace tak, aby byly podporovaly nalezitelnost a použitelnost obsahu. 3. Kombinace organizačních, popisných, vyhledávacích a navigačních systémů v rámci webových stránek a internetů. 4. Rozvíjející se disciplína a praktické seskupení zaměřené na přínos principů designu a architektury do digitálního prostředí Převzato z: Tamtéž. 38

39 Hlavními body informační architektury jsou podle prof. Makulové především nalezitelnost, použitelnost, přístupnost a kredibilita. 78 Nalezitelnost představuje náročnost/snadnost pro nalezení dané webové stránky v prostředí internetu. S tím souvisí optimalizace pro vyhledávače a také dostupnost obsahu. Velké procento uživatelů se soustředí pouze na první výsledky vyhledávače a nedostane se dále, jak na třetí stranu. Kromě nalezitelnosti webové prezentace, je také důležitá nalezitelnost dané informace. Proto jsou důležité navigační prvky stránek a možnosti smysluplného pohybu. Navigace by měla uživatelům srozumitelně objasnit, kde se právě nachází a kde mohou požadované informace vyhledat. K tomu může pomoci vyhledávací pole. Použitelnost je spojena s rychlým pochopením struktury webu, orientací v navigaci a použití funkcí, které daný web poskytuje. Pokud se uživatel dokáže rychle zorientovat a bezproblémově s webem pracovat, je to jistě velmi přínosné. Přístupnost určuje, komu jsou webové stránky přístupné. Může to být jak z pohledu jednotlivých zařízení, jako je například počítač, tablet, nebo mobilní telefon. Zde je důležité přizpůsobení například rozdílným rozlišením, velikostem displeje, prohlížečům, grafickému rozhraní při pomalejším připojení k internetu. Dále z pohledu rozlišení uživatelů, kde jde o přístup sluchově nebo zrakově postižených a možnému přizpůsobení obsahu. Kredibilita pojem spojený s důvěryhodností webových stránek. Je ovlivněn především kvalitou a přesností informací. Pro zvýšení kredibility je třeba uvedení kontaktů, relevantních odkazů, referencí apod. 77 Překlad z originálu: 1. The structural design of shared information environments. 2. The combination of organization, labeling, search, and navigation systems within web sites and intranets. 3. The art and science of shaping information products and experiences to support usability and findability. 4. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape. (ROSENFELD P., 2008, s.4) 78 MAKULOVÁ S.,

40 Mimo jiné je při návrhu potřeba klást důraz také na uživatele, obsah a kontext. 79 Proto je při tvorbě důležité zamyslet se nad tím, pro koho je web určen jací uživatelé jej budou navštěvovat a co na nich budou hledat. U obsahu je důležité schopnost data zpracovat a následně uživatelům zajistit přístup. U kontextu se jedná o poznání uživatelských požadavků a přizpůsobení cílům a zaměření. Webová prezentace by měla především splňovat účel, pro který byla stvořena. Dalším důležitým bodem při tvorbě webové prezentace je user experience. Pojem user experience, zkráceně UX, lze přeložit jako uživatelský prožitek, nebo uživatelská zkušenost. Tedy něco, co získává uživatel během interakce s určitou službou, nebo produktem. Výzkum UX je směřován především na uživatele. Pojem nemá jednoznačnou definici. Například ISO normou je definována jako: Uživatelské vnímání a reakce, které vyplívají z použití, nebo z předpokládaného použití produktu, systému nebo služby. 80 Další možnou UX definicí, jež uvádí Mike Kuniavsky ve své knize Smart Things: Ubiquitous Computing User Experience Design, může být: Uživatelský požitek je souhrn vjemů koncových uživatelů, které jsou ovlivněny produkty, nebo službou. Tyto vjemy jsou tvořeny účinností (jak dobrý je výsledek?), efektivností (jak je rychlý, nebo levný?) a kvalitou vztahu s osobou, který produkt nebo službu vytvořila (jaké to vytvořilo očekávání pro budoucí interakci?). 81 Při návrhu webová prezentace by mělo být usilováno mimo jiné o to, aby zanechala při interakci s uživatelem pozitivní dojem. A aby web pro uživatele nepředstavoval zbytečné komplikace. 79 ROSENFELD, Překlad z originálu: A person s perceptions and responses that result from the use or anticipated use of a product, system or service. (ISO :2010) 81 Překlad z originálu: The user experience is the totality of end users perceptions as they interact with a product or service. These perceptions include effectiveness ( how good is the result?), efficiency (how fast or cheap is it?), emotional satisfaction (how good does it feel?) and the quality of the relationship with the entity that created the product or service (what expectations does it create for subsequent interactions?). (KUNIAVSKY M., 2010) 40

41 Témata informační architektury a user experience jsou zde ve zkratce zmíněna především z důvodu nedílné součásti při tvorbě webových aplikací. Jedná se o rozsáhlou problematiku, která zde více nebude rozebírána. 41

42 3 PRAKTICKÁ ČÁST Předchozí kapitola ve zkratce uvedla čtenáře do historie a vývoje internetu, dále seznámila s aktuální situací na poli moderních technologií a internetu a v neposlední řadě zhodnotila největší rozdíly a novinky HTML5 oproti starší verzi. Následující kapitola se věnuje případové studii konkrétní webové prezentace. 3.1 Metodologie Případová studie je zaměřena na analýzu a komparaci titulní strany webové prezentace Městské knihovny v Dobříši. Zde jsou popsány vybrané části, nedostatky a možná řešení. Mimo jiné, s přihlédnutím k novým možnostem HTML5. Konkrétní microsite knihovny byla vybrána náhodně z oblasti místních knihoven, které jsou na území České republiky zastoupeny v největším množství. Cílem praktické části je komparace webové prezentace knihovny s novými možnostmi HTML5 a také odpověď na otázku: Přináší HTML5 tolik nových možností oproti stávající verzi, které jsou dostatečným důvodem pro změnu a přechod na nově vyvíjenou verzi HTML5? Čtenář bude nejdříve seznámen se základními údaji o knihovně. Dále následuje popis a komparace vybraných prvků úvodní strany s verzí HTML5. Nakonec je úvodní strana webové prezentace podrobena analýze pomocí HTML validátorů. 3.2 O knihovně Město Dobříš leží v Středočeském kraji, okres Příbram. Počet obyvatel obce je necelých 9 tisíc. Městská knihovna v Dobříši, v roce 2012, registrovala přes 1800 čtenářů a půjčila přes knih. Počet přístupů na webové stránky od se pohybuje kolem 67 tisíc. Webová prezentace do konce roku 2010 byla napsána pomocí verze HTML 4.01 Frameset. Prezentace je stále dostupná na internetové adrese: < Bylo zde použito tří rámů. První rám představuje hlavičku, kde je obsažen název knihovny. Na levé straně prezentace se nachází druhý 42

43 rám, který představuje navigační menu. Třetí rám, který je největší, je určen pro zobrazení obsahu. V listopadu 2010 webová prezentace prošla rekonstrukcí a nyní využívá nových webových stránek. Nová adresa webových stránek je < Stránky jsou napsány ve verzi HTML 4.01 Transitional. Oproti předchozí verzi obsahují pokročilejší grafiku za použití stylů CSS a JavaScriptu. Navíc jsou vynechány rámy, které se ostatně v dnešní době již nedoporučují. I přesto, že Městská knihovna Dobříš používá sociální síť Facebook.com, kde má vytvořenou svoji stránku (ke dni , čítá 228 uživatelů), není žádným způsobem provázána se svojí oficiální webovou prezentací. Čtenáři tak na webové prezentaci nemohou jednoduše sdílet nové události, nebo je jakýmkoliv způsobem komentovat. Web Městské knihovny Dobříš, i přes aktualizované stránky z podzimu roku 2010, zůstává především webem Analýza a komparace Kapitola popisuje rozložení titulní strany knihovny. Dále představuje a porovnává jednotlivé prvky, které zde jsou obsaženy, za pomocí HTML kódu. Webová prezentace je rozdělena na několik částí, jak je patrné z následujícího obrázku: 43

44 Obrázek č. 10: Titulní strana webové prezentace Městské knihovny Dobříš Zdroj: < [cit ]. 44

45 V horní části se nachází hlavička, která obsahuje název knihovny a je k ní připojeno i logo. Nad hlavičkou je lišta, kde se nachází možnosti vypnutí grafiky, mapy stránek, tisku a doporučení. Levá část webové prezentace představuje menu, pod kterým je anketa a další zdroje. V pravé části je pole pro vyhledávání, kontakt a možnost vložení dotazu. Střed stránek, vyhrazený pro obsah, zobrazuje aktuality a nové dokumenty. Ve spodní části prezentace je patička, věnována tvůrci webu, možnosti přihlásit se a zobrazení počtu přístupů. Zdrojový kód titulní strany obsahuje 348 řádků Struktura Struktura webové prezentace zapsána ve zdrojovém kódu vypadá následovně: <div id="celek"> - obaluje celou webovou prezentaci <div id="lista"> </div> - text nad hlavičkou <div id="telo"> - tělo stránek <div id="hlavaobr"></div> - hlavička <div id="hlava"></div> <div id="dvasloupce"> - střed a pravá strana <div id="stred"></div> - střed (hlavní obsah) <div id="vpravo"> - pravá strana (vyhledávání, kontakty) <div id="napiste"></div> - pravá strana (napište nám) </div> </div> <div id="vlevo"> - levá strana (menu, anketa, bannery) <div id="nadmenu"> </div> <div id="menu"></div> - menu <div id="anketa"></div> - anketa <div id="bannery"></div> - bannery <div id="pata"> - patička <div id="pocitadlo"></div> - počítadlo </div> - ukončení patičky </div> - ukončení těla </div> - ukončení celku 45

46 Vizuální nákres titulní strany webové prezentace je následující: Obrázek č. 11: Struktura webové prezentace knihovny (Zdroj: vlastní) Ze zobrazené struktury je jasně patrné, že je zde obsažena spousta divů, které jsou čitelné pro vývojáře, ale nikoliv strojově. Zápis lze zjednodušit za použití HTML5, pomocí nových prvků. Zápis pomocí HTML5: <body> <header></header> - hlavička <nav></nav> - menu <article></article> - ankety + bannery <section></section> - hlavní obsah <aside></aside> - vyhledávání + kontakty 46

47 <footer></footer> - patička </body> Vizuální zobrazení struktury titulní strany pomocí HTML5: Obrázek č. 12: Struktura pomocí HTML5 (Zdroj: vlastní) Kromě zjednodušení, dojde i k lepší sémantice, jelikož se struktura stane strojově čitelná. Díky tomu se zlepší jednak nalezitelnost pomocí webových vyhledávačů, tak i orientace uživatelů, využívajících specifických aplikací pro navigaci po webové stránce, jako jsou například zrakově postižení uživatelé Nadpis Nadpis knihovny, obsažen v hlavičce webové prezentace, je vytvořen pomocí obrázku. Což znamená, že není strojově čitelný. 47

48 Obrázek č. 12: Hlavička 83 Nadpis sestává z hlavního nadpisu Městská knihovna Dobříš a podnadpisu Oficiální web. Pomocí elementu pro hlavičku, <header> a elementu pro sjednocení nadpisů, <hgroup>, lze opět dosáhnout lepší sémantiky. Zdrojový kód hlavičky po přepsání pomocí HTML5 vypadá následovně: <header> <hgroup> <h1>městská KNIHOVNA DOBŘÍŠ</h1> <h3>oficiální WEB</h3> </hgroup> </header> Napište nám Ve spodní části pravého panelu se nachází formulář pro zanechání vzkazu, viz obrázek č. 13. Obrázek č. 13: Napište nám Zdroj: < [cit ]. 48

49 Formulář obsahuje čtyři pole, jsou to: text zprávy, jméno, , kód z obrázku. Jméno a jsou nevhodně nadepsány nad jedním polem. Z čehož nemusí být na první pohled patrné, který údaj kam patří. Za použití formulářového atributu <placeholder>, lze tento nedostatek lépe specifikovat. Část zdrojového kódu bude vypadat následovně: <input type="text" name="jmeno" placeholder="zadejte jméno"><br> <input type="text" name=" " placeholder="zadejte "><br> <input type="submit" value="odeslat"> Vizuální podoba: Obrázek č. 14: Formulář včetně placeholder (Zdroj: vlastní) U kolonky pro kód obrázku chybí obnovovací tlačítko pro nečitelný kód. Je zde připsán dodatek (pro jiný obrázek obnovte stránku) 85, což mimo jiné znamená, že se s obnovením kódu smaže i celý text zprávy včetně vyplněného jména a u. Tohle lze řešit přidáním JavaScriptu pro obnovovací tlačítko, do zdrojového kódu. <form> <input type=button value="obnovit" onclick="window.location.reload()"> <a href="javascript:;" title="reload Image" onclick="document.getelementbyid('captcha').src = 'cimage.php?' + Math.random(); return false"> <img src="captchazdroj" alt="enter captcha" title="enter captcha" id="captcha"/> </a> </form> 85 Zdroj: Tamtéž. 49

50 3.3.4 Vyhledávání V pravé části webové prezentace se nachází vyhledávací pole. Avšak zde není patrné, zda se jedná pouze o vyhledávací pole pro běžné informace, nebo uživatel může vyhledávat i knihy, autory apod. Vyhledávací pole lze upřesnit pomocí atributu placeholder. <form> <input type="text" name="vyhledavac" placeholder="zadejte výraz, knihu, autora,..." size="25"> <input type="submit" value="vyhledat"> </form> Obrázek č. 15: Vyhledávač (Zdroj: vlastní) Microdata (metadata) V prostřední části webové prezentace se nachází sekce pro aktuality. Jsou zde vypsány nadcházející události, soutěže, probíhající akce a fotogalerie. Události zde představují pouze odkaz na další podrobnosti. Jak již bylo popsáno v teoretické části, za použití HTML5 a nových prvků pro microdata, lze zpřístupnit informace i pro vyhledávače a zajistit tak jejich strojovou čitelnost. Díky čemu se stanou snáze vyhledatelná. Zdrojový kód pro přidání metadat může vypadat následovně: <article itemscope itemtype=" <h2 itemprop="name"> Pohádková babička Katica to zvládne</h2> <img itemprop="image" width="300" height="200" src="pohadkova_babicka.jpg" alt="pohádková babička"> <p itemprop="description"> Ve Švédsku v dětském domově žije sedmiletá romská holčička. Jednoho dne si pro ni přijede její tatínek a malou Katici čeká nový život pestrý, ale těžký. Jestlipak se jí vyplní i v nových podmínkách její 50

51 touha naučit se číst a psát? Vstup volný. 86 <span itemprop="typicalagerange" content= 5- > Vhodné pro děti od 5 let </span> <p> <time itemprop="startdate" datetime=" t15:30+01:00"> :30</time> <time itemprop="enddate" datetime=" t17:00+01:00">18:00</time> </p> <p itemprop="location" itemscope itemtype=" <span itemprop="name">městská knihovna Dobříš</span><br> <span itemprop="address" itemscope itemtype=" <span itemprop="street-adress">školní 36</span><br> <span itemprop="addresslocality">dobříš</span><br> <span itemprop="postalcode">263 01</span> </span> </article> Tímto způsobem lze popsat všechny probíhající akce a události. Zobrazení textu zůstane pro čtenáře nezměněno (Jak je patrné z obrázků č. 16 a 17). S tím rozdílem, že bude obsahovat i metadata pro strojovou čitelnost. Díky tomu se mohou zobrazit ve vyhledávači už včetně data a adresy konání. Další výhodou pro uživatele může být, pokud si událost chce poznamenat do kalendáře v mobilu. Chytrá aplikace by měla zvládnout metadata přečíst a vyplnit vše potřebné, jako je název, místo konání i datum tak, aniž by jej uživatel musel zadávat ručně. Podobným způsobem lze popsat i kontakty, otevírací dobu, nebo fotogalerii. 86 Zdroj: < dobris.cz/pohadkova-babicka-katica-to-zvladne/d-1409> [cit ]. 51

52 Obr. č. 16: Bez metadat (Zdroj: vlastní) Obr. č. 17: Včetně metadat (Zdroj: vlastní) 3.4 Validace Titulní stránka webová prezentace byla analyzována pomocí dvou validátorů. Prvním je oficiální validátor w3 konsorcia, který se specializuje na kontrolu správnosti a platnosti zdrojového kódu. Druhým validátorem je neoficiální Český validátor, který se prezentuje jako přísnější, oproti oficiálnímu W3C validátoru. Před samotnou analýzou validátoru, lze nastavit, s jakou verzí má být zdrojový kód komparován. Byly zde nastaveny dvě hodnoty. Nejdříve validace s verzí, ve které byl kód napsán. Poté s novou verzí HTML5, pro možný přechod na danou verzi W3C validátor Validace verzí HTML 4.01 Transitional Obrázek č. 18: Screen z W3C Validátoru ( 52

53 W3C Validátor 87 nalezl 1 chybu a 1 varování. Za chybu byl označen nedefinovaný prvek <o:p>. Daný prvek není ve specifikaci definován. Za varování byl označen prvek <br />. Tag <br> označuje konec řádku a jeho zalomení. Tag <br /> označuje ukončovací tag v XHTML specifikaci. Avšak v HTML je <br> specifikován jako nepárový prvek, který ukončovací tag nemá. Tudíž je zde použití ukončovacího tagu chybné. Validace verzí HTML5 (Označena jako experimentální) Obrázek č. 19: Screen z W3C Validátoru ( W3C Validátor nalezl 66 chyb a 6 varování. Za převážnou většinu chyb, byly označeny opakující se prvky, které jsou v HTML5 specifikaci označeny za zastaralé. Zde je jejich výpis: Element font je označen jako zastaralý, používá se v kaskádových stylech Atribut align je označen jako zastaralý, používá se v kaskádových stylech Atribut name je označen jako zastaralý Nesprávný doctype lze očekávat, jelikož byla provedena validace pomocí jiného doctype. Dále označeny chyby <o:p> a <br />, stejně jako při předchozí validaci. Jak již bylo zmíněno v teoretické části, HTML je určeno především pro tvorbu obsahu dokumentu. Pro formátování designu a vzhledu jsou určeny kaskádové styly. Z toho 87 Dostupný na adrese: < 53

54 důvodu jsou prvky upravující vzhled a změnu písma označeny jako zastaralé a doporučuje se použití právě kaskádových stylů Český validátor Validace verzí HTML 4.01 Transitional Obrázek č. 20: Screen z Českého validátoru ( Český validátor 88 nalezl 1 chybu, 47 varování a dokument byl označen jako nevalidní. Za chybu byl označen nedefinovaný element <o:p>. Dále se ve varování objevil ukončovací tag <br />. Následující varování se týkají: Nevyplněná hodnota atributu title na řádku č. 74. Neurčený stylovací jazyk atributu style. Je doporučeno v části <head> použít meta element, který určí, v jakém stylovacím jazyce jsou hodnoty psány. Neurčený skriptovací jazyk ovladačů událostí Je doporučeno v části <head> použít meta element, který určí, v jakém skriptovacím jazyce jsou hodnoty psány. Validace verzí HTML5 (označena jako experimentální) Obrázek č. 21 : Screen z Českého validátoru ( 88 Dostupný na adrese: < 54

55 Český validátor nalezl 62 chyb, 4 varování a dokument byl označen jako nevalidní. Za chybu byl označen nesprávný doctype, jak se opět dalo očekávat. Dále opakující se prvky font, align a name označeny jako zastaralé, stejně jako u předchozího validátoru. Následuje nedefinovaný prvek <o:p>. Změnou oproti ostatním validacím je neoznačení ukončovací prvku <br /> jako chybného. I když se Český validátor označuje za přísnější verzi validátoru oficiálního. Přestože validátory při testování webové prezentace knihovny pro verzi HTML5 odhalily poměrně vysoké číslo nedostatků, nejedná se o nic zásadního, co by bylo s verzí nekompatibilní, nebo nečitelné pro prohlížeče. Pokud se pominou dvě zásadní chyby (<o:p> a <br />), tak je doporučeno pouze nahradit zastaralé prvky pomocí kaskádových stylů a webová prezentace se pro verzi HTML5 stane validní. 3.5 Zhodnocení Z praktické části je patrné, že i u jednodušší webové microsite městské knihovny lze využít řadu nových možností, které HTML5 přináší. Za použití nových prvků dojde ke značnému zjednodušení struktury, která se stane strojově čitelnou. Dále se zvýší sémantika webu, zpřehlední se popis formulářů pro uživatele a přibydou metadata pro jednotlivé události, nebo kontakty. Díky těmto změnám se webová prezentace stane dohledatelnější a přístupnější. A to jak pro uživatele, tak i pro vyhledávače. Je zde představena řada konkrétních příkladů, ze kterých vyplývá jednoznačný pozitivní přínos pro danou webovou stránku, při přechodu na novou verzi HTML5. 55

56 4 ZÁVĚR Cílem bakalářské práce bylo představit nové možnosti a využití vyvíjeného HTML5 jazyka oproti předchozí verzi. Tahle část byla splněna v teoretické části. V práci je také zobrazena historie a vývoj HTML jazyka a dána do souvislosti s vývojem internetu a rostoucími požadavky ze strany uživatelů. V závěru teoretické části ve zkratce představena informační architektura a UX (User Experience), které tvoří nedílnou součást při návrhu webových stránek. Dalším cílem bylo poskytnutí dostatečného množství informací pro zhodnocení přínosu nové HTML verze, oproti předchozím. Tento cíl se podařilo naplnit v praktické části, kde byla nová verze komparována s microsite konkrétní webové knihovny, vytvořené pomocí starší verze HTML. Zde byla zobrazena řada příkladů, která demonstrovala přínos HTML5. HTML5 je sice výraznou změnou, která oproti předchozí verzi HTML přináší nové funkce. Nevýhodou však zatím může být nekompatibilita starších verzí běžně používaných prohlížečů, což pro uživatele může mít negativní dopad. Na druhou stranu, z hlediska dohledatelnosti webu, doporučuji zvážit přechod na verzi HTML5. Strukturovací a sémantické prvky jsou zde klíčovým nástrojem pro indexovací roboty, kteří na jejich základě snadněji dokáží rozlišit obsah. Díky tomu se web stává pochopitelnějším a čitelnějším pro stroje. Dle mého názoru, právě tohle je klíčová funkce, kterou HTML5 přináší. Jak je patrné v praktické části, i jednoduchou webovou prezentaci lze dostatečně obohatit sémantickou strukturou, tak i pomocí metadat a dalších prvků. Díky tomu se stává přijatelnější pro uživatele i pro vyhledávací roboty. Na základě ukázek z praktické části by čtenář měl získat dostatečnou představu o tom, jaké výhody HTML5 přináší. V neposlední řadě je třeba nezapomínat na fakt, že specifikace dosud vyvíjí a stále není dokončena. Dalším aspektem jsou webové prohlížeče, které zatím nemusí být plně kompatibilní se všemi novými prvky vyvíjeného jazyka. Tyto fakta je nutné brát v potaz. 56

57 Bakalářská práce je prostým představením možností, které HTML5 přináší. Do budoucna tahle studie může sloužit jako základní kámen pro následnou magisterskou práci. Navazující práce se může detailněji zabývat vybranými možnostmi, nebo se například pokusit o vytvoření šablony či vzoru webové prezentace za použití dostupných možností, která bude sloužit jako ukázka stávajících možností pro tvorbu webových prezentací knihoven. V práci by při návrhu mělo být bráno v potaz nejen HTML5, ale také s ním spojené prvky spadající do konceptu tvorby webových prezentací, jako je informační architektura, user experience nebo webdesign. 57

58 LITERATURA Accessible Rich Internet Applications (WAI-ARIA) 1.0. W3C [online] [cit ]. Dostupné z: April 2014 Web Server Survey. Netcraft [online] [cit ]. Dostupné z: BILDEMAN, Eric. A Beginner's Guide to Using the Application Cache. HTML5Rocks [online] [cit ]. Dostupné z: BILEDMAN, Eric. Exploring the FileSystem APIs. In: HTML5Rocks [online] [cit ]. Dostupné z: BUSH, V. As we may Think. Library Computing [online]. 1999, vol. 18, no. 3. pp ProQuest Central; ProQuest Technology Collection. [cit ]. ISSN Dostupné z: D7408EPQ/18 CAILLIAU, Robert. A Little History of the World Wide Web. In: W3C [online] [cit ]. Dostupné z: CAMPBELL-KELLY, Martin a GARCIA-SWARTZ. The history of the internet: the missing narratives. Journal of Information Technology [online]. 2013, roč. 28, č. 1, s ProQuest Central; ProQuest Technology Collection [cit ]. ISSN Dostupné z: CSS Introduction. W3schools.com [online]. [2012] [cit ]. Dostupné z: 58

59 CUI, Yong, Peng WU, Mingwei XU, Jianping WU, Yiu LEE, Alain DURAND a Chris METZ. 4over6: network layer virtualization for IPv4-IPv6 coexistence. IEEE Network [online]. 2012, vol. 26, issue 5, s [cit ]. DOI: /MNET Dostupné z: ČSÚ: Informační společnost v číslech 2014: B Domácnosti. Český statistický úřad [online] [cit ]. Dostupné z: ČSÚ: Informační společnost v číslech 2014: C Jednotlivci. Český statistický úřad [online] [cit ]. Dostupné z: ČSÚ: Informační společnost v číslech 2014: D Podniky. Český statistický úřad [online] [cit ]. Dostupné z: ČSÚ: Tabulka 11: Hlavní typy používaného připojení domácností k internetu*, vývoj v letech 2007 až Český statistický úřad [online] [cit ]. Dostupné z: ČSÚ: Tabulka 12: Domácnosti s vysokorychlostním připojením k internetu v zemích EU, vývoj v letech 2007 až Český statistický úřad [online] [cit ]. Dostupné z: Differences from HTML4. W3C [online] [cit ]. Dostupné z: Document Object Model (DOM). W3C [online] [cit ]. Dostupné z: 59

60 Extensible Markup Language (XML). W3C [online] [cit ]. Dostupné z: FRANCIS, Mark. 2: The history of the Internet and the web, and the evolution of web standards. In:Dev.opera.com [online] [cit ]. Dostupné z: FRITZINGER, S. How Government Sort of Created the Internet [online]. 2012, Irvington-on-Hudson: Foundation for Economic Education, Incorporated, 10, ProQuest Central. [cit ]. Dostupné z: APQ/11 GOLDFARB, C.F. The Roots of SGML: A Personal Recollection. Technical Communication [online]. 1990, 02, vol. 46, no. 1. pp , ProQuest Central [cit ]. ISSN Dostupné z: ADE4328PQ/1 GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: Zoner Press, 2011, 286 s. ISBN HOGAN, Brian P. HTML5 a CSS3: výukový kurz webového vývojáře. Vyd. 1. Brno: Computer Press, 2011, 272 s. ISBN HTML syntax. W3C [online]. [2012] [cit ]. Dostupné z: HTML5: 1.4 History. In: W3C [online] [cit ]. Dostupné z: HTML5 Audio. W3schools.com [online] [cit ]. Dostupné z: 60

61 HTML5 Browser Support. Davinci SDK [online] [cit ]. Dostupné z: HTML5 PUBLICATION HISTORY. W3C [online] [cit ]. Dostupné z: HTML5 Video. W3schools.com [online] [cit ]. Dostupné z: HUNT, Lachlan. Structure-div. In: A preview of HTML 5: Structure [online] [cit ]. Dostupné z: HUNT, Lachlan. Structure-html5. In: A preview of HTML 5: Structure [online] [cit ]. Dostupné z: Hypertext.[online]. 2006, London: Reed Business Information UK, ProQuest Central; ProQuest Hospital Collection;ProQuest Science Collection Natural; ProQuest Science Journals; ProQuest Technology Collection [cit ]. Dostupné z: Q/12 Internet growth statistics. Internet World Stats [online] [cit ]. Dostupné z: Internet History From ARPANET to Broadband. Congressional Digest [online]. 2007, vol. 86, issue 2, s [cit ]. Dostupné z:

62 ISO :2010. Ergonomics of human-system interaction: Part 210: Humancentred design for interactive systems. Switzerland: International Organization for Standardization, IZSO, Jozef. XML v desiatich bodoch. W3C [online] [cit ]. Dostupné z: JAUME, Jasmine. Smartphone and Tablet Use Continues to Rise: The Stats. Bandwatch [online] [cit ]. Dostupné z: JavaScript Introduction. W3schools.com [online]. [2012] [cit ]. Dostupné z: KEITH, Jeremy. HTML5 for web designers [online] New York: A book apart, 87 s. Book apart, no. 1. [cit ] ISBN Dostupné z: KUMAR, Naresh. DocType: Strict, Transitional and Frameset. In: The Professionals Point [online] [cit ]. Dostupné z: KUNIAVSKY, Mike. Smart things ubiquitous computing user experience design [online]. Amsterdam: Morgan Kaufmann Publisher, 2010, s. 14 [cit ]. ISBN Dostupné z: WLyUCBBUVAC&printsec=frontcover&hl=cs#v=onepage&q&f=false LONGMAN, Addison. 2 A history of HTML. In: W3.org [online] [cit ]. Dostupné z: 62

63 LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: programujeme moderní webové aplikace. Vyd. 1. Brno: Computer Press, 2011, s ISBN LUKASIK, Stephen. Why the Arpanet Was Built. IEEE Annals of the History of Computing [online]. 2011, vol. 33, issue 3, s [cit ]. DOI: /MAHC Dostupné z: MAKULOVÁ, Soňa. Návrh metodológie na tvorbu používateľsky prívetivých, prístupných a nájditeľných webových sídiel. In:Nová paradigma spracovania a využívania informácií. Bratislava: Univerzita Komenského, 2007, s ISBN Dostupné z: March 2014 Market Share: Web Browser Market Share. W3Counter [online] [cit ]. Dostupné z: MILLS, Chris. New structural elements in HTML5. In: DEV.OPERA [online] [cit ]. Dostupné z: Mobile Technology Fact Sheet. Pew Research Internet Project [online] [cit ]. Dostupné z: PAVLÍČEK, Radek. Přístupnost HTML5 v kombinaci s WAI-ARIA. [online] [cit ]. Dostupné z: PFEIFFER, Silvia. HTML5 - audio a video: kompletní průvodce. Vyd. 1. Brno: Zoner Press, 2011, 350 s. ISBN

64 PILGRIM, Mark. DISTRIBUTED, EXTENSIBILITY, & OTHER FANCY WORDS: What is microdata?. In: Dive into HTML5 [online] [cit ]. Dostupné z: PILGRIM, Mark. LET S CALL IT A DRAW(ING SURFACE). Dive into HTML5 [online] [cit ]. Dostupné z: RONALLO. HTML5 Microdata and Schema.org. Code4lib Journal [online]. 2011, č. 16 [cit ]. Dostupné z: &lang=cs&site=ehost-live ROSENFELD, Peter Morville and Louis. Information Architecture for the World Wide Web Designing Large-Scale Web Sites [online]. 3rd ed. Sebastopol: O'Reilly Media, Inc, 2008 [cit ]. ISBN Dostupné z: age&q&f=false RUDMAN, Riaan. WEB 2.0 THE INTERNET IS VERSIONING , 2.0. In: Accountancy SA = Rekeningkunde SA [online] [cit ]. ISSN Dostupné z: SAEED, Ahmed. Fast Internet access becomes a legal right in Finland. CNN.com [online] [cit ]. Dostupné z: SHANNON, Ross. The History of HTML. HTML Source [online] [cit ]. Dostupné z: SHARP, Remy. Introducing Web SQL Databases. HTML5Doctor [online] [cit ]. Dostupné z: 64

65 SKLENÁK, Vilém. HTML. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha: Národní knihovna ČR, [cit ]. Dostupné z: SKLENÁK, Vilém. HTTP. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha: Národní knihovna ČR, [cit ]. Dostupné z: SKLENÁK, Vilém. Protokol pro přenos souborů. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha : Národní knihovna ČR, [cit ]. Dostupné z: SKLENÁK, Vilém. SGML. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha: Národní knihovna ČR, [cit ]. Dostupné z: SKLENÁK, Vilém. Systém pojmenování počítačů. In: KTD: Česká terminologická databáze knihovnictví a informační vědy (TDKIV) [online]. Praha : Národní knihovna ČR, [cit ]. Dostupné z: SRINISAVAN, Kanya. HTML5 Web Storage. Sitepoint [online] [cit ]. Dostupné z: W3C. Cascading Style Sheets (CSS) Snapshot 2010: 1.1 The W3C Process and CSS. In: W3C [online] [cit ]. Dostupné z: 65

66 W3C. Geolocation API Specification. W3C [online] [cit ]. Dostupné z: W3C. HTML5: Obsolete features. In: W3C [online] [cit ]. Dostupné z: W3C. Page Visibility (Second Edition). W3C [online] [cit ]. Dostupné z: W3C. The Web Sockets API. W3C [online] [cit ]. Dostupné z: WAYNER, Peter. HTML5 in the browser: Local data storage. InfoWorld.com [online] [cit ]. Dostupné z: WHATWG. HTML: 8.7 Drag and drop. WHATWG [online] [cit ]. Dostupné z: WHATWG. HTML: 10 Web Workers. WHATWG [online] [cit ]. Dostupné z: WISNIEWSKI, Jeff. HTML5. Online [online]. 2011, roč. 35, č. 6, s [cit ]. Dostupné z: XHTML 1.0 The Extensible HyperText Markup Language (Second Edition). W3C [online] [cit ]. Dostupné z: 66

67 XHTML Module-based XHTML - Second Edition. W3C [online] [cit ]. Dostupné z: 67

68 FILOZOFICKÁ FAKULTA, MASARYKOVA UNIVERZITA, BRNO Kabinet informačních studií a knihovnictví Akademický rok: 2013/14 PROJEKT BAKALÁŘSKÉ DIPLOMOVÉ PRÁCE Jméno a příjmením Jakub Horák UČO Imatrikulační ročník 2011 Kontaktní údaje @mail.muni.cz Název tématu: Stávající možnosti použití technologií HTML5 při tvorbě webové prezentace knihovny Rozpracovat osnovu (jako přílohu) 1. Popis problému, který bude v práci řešen 2. Současný stav řešené problematiky 3. Cíl diplomové práce 4. Metody zpracování diplomové práce 5. Základní odborná literatura