UNICORN COLLEGE. Katedra informačních technologií BAKALÁŘSKÁ PRÁCE. Selftest systém v ASP.NET. Autor BP: Milan Klapač

Transkript

1 UNICORN COLLEGE Katedra informačních technologií BAKALÁŘSKÁ PRÁCE Autor BP: Milan Klapač Vedoucí BP: Ing. David Hartman Ph.D Praha

2

3 Čestné prohlášení Prohlašuji, že jsem svou bakalářskou práci na téma vypracoval samostatně, pod vedením vedoucího bakalářské práce a s použitím výhradně odborné literatury a dalších informačních zdrojů, které jsou v práci citovány a jsou také uvedeny v seznamu literatury a použitých zdrojů. Jako autor této bakalářské práce dále prohlašuji, že v souvislosti s jejím vytvořením jsem neporušil autorská práva třetích osob a jsem si plně vědom následků porušení ustanovení 11 a následujících autorského zákona č. 121/2000 Sb. V Praze dne (Milan Klapač)

4 Poděkování Děkuji vedoucímu bakalářské práce Ing. Davidu Hartmanovi Ph.D. za účinnou metodickou, pedagogickou a odbornou pomoc a další cenné rady při zpracování mé bakalářské práce.

5 Selftest systém v ASP.NET Self test system in ASP.NET 5

6 Abstrakt Tato práce se zabývá návrhem a vývojem testovacího systému pro výukové a školící účely poskytující automatickou zpětnou vazbu uživatelům. Systém je realizován pomocí technologie ASP.NET. Je zde ukázáno jedno z možných řešení takovéto webové aplikace a možnosti jejího použití a dalšího rozšiřování. Kromě samotného návrhu a vývoje se práce zabývá popisem a analýzou změn, které přineslo HTML5, a možnostmi a výhodami jejich využití v kombinaci s ASP.NET. První část je věnována právě HTML5 a jeho použití v ASP.NET. Druhá část se pak zabývá návrhem a popisem aplikace. Na konci druhé části se nachází popis ovládání aplikace. Klíčová slova: HTML5, ASP.NET, JSON, RGraph, webová aplikace, návrh aplikace Abstract This paper describes the design and development of a test system for educational and training purposes providing automatic feedback to users. The system is implemented using the ASP.NET technology. One of the possible solutions for such web applications and possibilities of their use and further dissemination is shown here. In addition to the design and development, this paper deals with the description and analysis of the changes, which HTML5 brought and the opportunities and benefits of their use in combination with ASP.NET. The first part is devoted to HTML5 and its application in ASP.NET. The second part deals with the design and description of the application. At the end of the second part, there is a description of how to work with the application. Keywords: HTML5, ASP.NET, JSON, RGraph, web application, application design 6

7 Obsah 1. Úvod Popis technologií ASP.NET Webforms MVC Srovnání WebForms a MVC JavaScript JSON Ajax Další pojmy použité v práci Code-behind ADO.NET Entity Framework Session Cookies Flash BTS Unicorn Universe HTML Historie HTML Seznámení s HTML Syntaxe HTML Struktura HTML Prvek header Prvek nav Prvek aside

8 Prvek article Prvek section Prvek footer Formuláře Nové atributy Nové formulářové vstupní typy a prvky Audio/Video Canvas a SVG Canvas SVG Geolokace WebWorkers Drag and Drop Offline aplikace a WebStorage Offline aplikace Web Storage Ostatní nové HTML5 prvky Prvek hgroup Prvek figure a figcaption Prvek progress a meter Prvek mark Prvek time Prvek details Style a atribut scope Atribut async HTML5 v ASP.NET Nové strukturální prvky

9 4.2. Validátory Nové vstupní typy Drag and Drop Audio a Video Canvas Návrh aplikace Zadání Role Funkční požadavky Nefunkční požadavky Use case model Nepřihlášený uživatel a Public/Student Teacher Admin Seznam případů užití High level pohled Použité technologie Knihovny třetích stran Popis komponent systému KlapacBP hlavní projekt KlapacBPdata podpůrný projekt Databázový model Selftesty Uživatelé Výsledky testů Podrobný popis vybraných komponent Zobrazení testu

10 Vyhodnocení testu Dynamické načítání uživatelských komponent Grafy Drag and Drop JSON Ovládání systému Absolvování testu Vytvoření nové otázky Drag and Drop Vytvoření testu JSON Typy otázek a odpovědí Otázky Odpovědi Závěr Conclusion Citovaná literatura Seznam obrázků Seznam kódů Seznam tabulek Seznam příloh Příloha 1 CD

11 1. Úvod V posledních dvou desetiletích došlo k výraznému rozvoji informačních technologií. Téměř každá domácnost má dnes vysokorychlostní připojení k internetu. S počítači se děti setkávají už v raném věku doma, ve školách apod. Díky internetu je snadno dostupné velké množství informací, mimo jiné i široké možnosti vzdělávání. Je zde možné nalézt mnoho kurzů či aplikací pro rozšíření znalostí. Kromě tohoto i školy začínají nabízet materiály ke studiu v elektronické formě. Některé (například zahraniční MIT 1 nebo z českých Masarykova univerzita či Unicorn College s. r. o.) mají velmi kvalitní elektronický systém pro podporu vzdělávání a nabízejí studentům další možnosti nabytí a procvičení znalostí. Jsou to však spíše výjimky. I když jsou materiály studentům poskytovány, chybí možnost ověřit si míru získaných znalostí. Podobná situace je i u webových portálů zabývajících se vzděláváním. Ty sice nabízejí možnost ověření znalostí pomocí různých testů, ale mnoho z těchto portálů zastarává a nevyužívá plně možností nových technologií. Tyto technologie mohou na jedné straně velmi usnadnit vývoj kvalitní aplikace (nejen) pro sebevzdělávání, na druhé straně nabídnout uživatelům bohaté funkčnosti, které by bez těchto technologií nebylo možné vůbec, či jen s obtížemi, vytvořit. Například poskytuje velmi kvalitní materiály pro zlepšení znalostí anglického jazyka. Přestože je velká část webu zaměřena na testování znalostí, je zde jediný typ otázky, a to výběr z předpřipravených možností (otázky ABC ). Součástí některých zadání testů jsou i audio nahrávky, ale pro jejich přehrání je potřeba mít nainstalovaný dodatečný software. Možnost řešení těchto nedostatků poskytuje HTML5. Umožňuje vytvořit, pro výuku angličtiny vhodné, přiřazování dvojic slov k sobě pouhým přetahováním objektů na stránce. Mimo jiné má i schopnost nahradit současný přehrávač audia vlastními prvky, které ke své funkci jiný software nepotřebují. Tyto výhody poskytují příjemnější práci uživatelům a zefektivňují proces sebevzdělávání. Proto se v této práci zabývám návrhem a vývojem systému pro testování znalostí, který využívá nových technologií a nabízí široké možnosti v oblasti tvorby testů. Zahrnuje více druhů otázek (audio/video, obrázky, přetahování, doplňování do textu a další), statistiky výsledků či nahrávání souborů metodou Táhni a Pusť (Drag and Drop). Tato aplikace slouží jako základní stavební kámen pro její další rozvoj dle specifických požadavků jed

12 notlivých provozovatelů, kteří o ni budou mít zájem. Snadná rozšiřitelnost (hlavně o nové typy otázek) je jednou z klíčových vlastností systému. V první části jsou popsány vybrané technologie týkající se webových aplikací. Velký důraz je kladen na HTML5. Jsou zde novinky, které přináší, a rady, jak je správně a vhodně použít. Na konci této části je pak popsána práce s HTML5 v ASP.NET. Další část se zabývá návrhem a popisem samotné aplikace. Je zde analýza požadavků, pohledy na systém a popis jeho částí. Kromě toho ukazuje příklady využití HTML5 a výhody či problémy, které to přináší. Dále jsou zde řešení problémů, které mohou při vývoji takovéto aplikace nastat. V poslední části je pak ukázáno ovládání aplikace. To má za úkol usnadnit novým uživatelům lepší orientaci v systému a popsat složitější funkčnosti, které nabízí. Zároveň slouží jako ukázka aplikace a použití implementovaných funkčností z pohledu uživatele. 12

13 2. Popis technologií 2.1. ASP.NET ASP.NET (Active Server Pages.NET) je technologie pro vývoj dynamických webových stránek od společnosti Microsoft (LEE, 2005 str. 1). Je součastí.net frameworku. Název převzala z technologie ASP, která byla předchůdcem ASP.NET a sloužila k tvorbě dynamicky zpracovávaných stránek na straně serveru. I když zůstal tento koncept zachován, nelze říct, že by ASP.NET byla jen její vylepšená verze. ASP.NET těží z vlastností.net frameworku, jako je například CLR (Common Language Runtime), díky němuž lze psát webové stránky v jakémkoliv jazyce podporujícím CLR. Lze rozdělit na dvě hlavní větve, a to na WebForms a MVC Webforms Webforms vzniklo dříve než MVC, konkrétně v roce Jeho hlavní myšlenkou je vyřešit bezestavovost HTTP protokolu. To řeší kombinací HTML a JavaScriptu a za pomoci dvou základních mechanizmů. Prvním je View state, který má za úkol uchovávat hodnoty na webové stránce persistentní, aby nedocházelo k jejich ztrátě mezi požadavky na server. Toho je docíleno uchováváním hodnot jednotlivých prvků na stránce v zakódovaném tvaru ve speciálním skrytém poli. To však samo o sobě nestačí, jelikož kvůli bezestavovosti HTTP by server neměl potřebné informace o předchozích požadavcích klienta. To řeší druhý mechanizmus zvaný Session state. Ten má naopak na starosti uchovávat na serveru potřebná data o celkovém průběhu relace. S každým požadavkem klienta je tak odeslán i identifikátor dané relace a vše potřebné je podle něj dohledáno na serveru. Díky tomu nemusí být všechna data posílána neustále a sníží se tak objem přenášených dat. Na druhou stranu však roste zátěž serveru, jelikož musí tato data uchovávat. (ASP.NET, 2012 str. 1) MVC MVC je mladší alternativa WebForms a její vývoj začal v roce Umožňuje tvorbu webových aplikací podle architektury Model-View-Controller. Nepoužívá již View state a je nezávislá na JavaScriptu, který je u WebForms nezbytný k spouštění jednotlivých událostí, na kterých je založen. (ASP.NET, 2012 str. 1) 13

14 Srovnání WebForms a MVC Jak WebForms, tak MVC mají své výhody i nevýhody a hodí se pro různé typy aplikací. MVC díky rozdělení na model, view a controller usnadňuje zvládání komplexních aplikací a umožňuje snadnější vývoj ve větších týmech. Jelikož nepoužívá View state a serverové formuláře jako Webforms, mají vývojáři větší kontrolu nad chováním aplikace. Na druhou stranu, co je pro někoho výhodou, je pro jiného nevýhodou. A tak právě Webforms díky bohaté nabídce předpřipravených serverových prvků, View state a efektivní práci s daty usnadňuje vývoj webové aplikace a umožňuje například využít vlastností AJAXu i bez znalosti JavaScriptu. Je vhodný spíše pro menší týmy vývojářů, zvláště pro takzvaný Rapid Application Development přístup vývoje softwaru JavaScript JavaScript je programovací jazyk, který se používá na webových stránkách. Je součástí stránky a je spouštěn až na klientském počítači. Díky němu lze oživit stránky a přidat jim zajímavé funkčnosti. Nové HTML5 hojně využívá tohoto jazyka a poskytuje mu API pro další možnosti využití nových HTML5 prvků (například audio či Drag and Drop). I v samotném ASP.NET (zvláště u Webforms) je mnoho funkčností přímo závislých na JavaScriptu. Ze serverových prvků se generují klientské skripty pro validace či u tlačítek JavaScriptem volané dotazy na server JSON JSON (JavaScriptový objektový zápis) je způsob zápisu dat s důrazem na jejich čitelnost pro člověka i počítač. Data jsou ukládána ve tvaru klíče a hodnoty v textové formě. Používá se (mimo jiné) k serializaci objektů a jejich přenosu sítí, například ze serveru ke klientovi či naopak. Jedná se o jazykově a platformně nezávislý formát, proto je vhodný i k výměně dat mezi rozdílnými systémy. (CHOW, 2007) 2.4. Ajax Ajax (Asynchronní JavaScript a XML) je označení pro způsob vývoje webových stránek. Ty mohou být poté dynamicky modifikovány programovacím jazykem, který si vyžádá data pouze v případě, kdy je potřebuje bez nutnosti znovu načítat celý obsah stránky. (GROSS, 2006 str. 1). 14

15 2.5. Další pojmy použité v práci Code behind Tento termín označuje kód ASP.NET stránky, který je od ní oddělen a nachází se v samostatném souboru. To umožňuje oddělení HTML kódu od prezentační logiky. (Microsoft, 2007) ADO.NET ADO.NET (Microsoft ActiveX Data Objects.NET) představuje množinu tříd nabízejících služby pro přístup k datům a tvorbu databázových aplikací. Daty máme nyní na mysli převážně informace uložené v databázích. Ať se již jedná o data v databázích například na Microsoft SQL Serveru či data zpřístupněná přes OLE DB nebo XML. Mezi jeho přednosti patří především jednoduchý způsob použití, rychlost při zpracování a další. Stačí vytvořit spojení se serverem, s kterým budeme chtít pracovat, pomocí zvoleného adaptéru a zadaného dotazu získat z databáze data a ty pak načíst do některé z připravených konstrukcí pro práci s daty z tabulek. (BĚHÁLEK, 2007 stránky 1, kapitola 7) Entity Framework Poskytuje platformu pro objektově-relační mapování, které dokáže pracovat s relačními daty jako doménově specifickými objekty a odstraňuje tak potřebu vytvářet většinu obslužného kódu pro přístup k datům. (Microsoft, 2012) Session Session reprezentuje specifické spojení mezi klientským počítačem a hostujícím počítačem, které umožňuje vzájemnou komunikaci. Termín označuje množinu dat, která toto spojení umožňuje, ale také se používá pro označení času, během kterého komunikace probíhá. (Microsoft, 2010) 15

16 Cookies Cookies jsou malé soubory uložené na klientském počítači webovým serverem. Ten je používá pro identifikaci uživatele. Cookies může číst pouze server, který je do počítače uložil. (Microsoft, 2005) Flash Adobe Flash je software pro tvorbu vektorové grafiky, animací a multimediálního obsahu. Flash se používá mimo jiné pro přidání audio a video přehrávačů či interaktivního obsahu do webových stránek. Zobrazení zajišťuje Adobe Flash Player. (Adobe.com, 2012) BTS BTS (Base Transceiver Station ), česky základnová převodní stanice, je vysílač a přijímač rádiových signálů (ITBiz.cz). V práci se konkrétně jedná vysílač a přijímač signálů mobilních telefonů Unicorn Universe Unicorn Universe (UU) je internetová služba provozující informační systémy založené na platformě Unicorn ES. Je určena pro řízení podniku, zaznamenávání a sdílení informací, řízení podnikových procesů, zadávání úkolů a sledování jejich plnění. (POLÁKOVÁ, 2010 str. 3) 16

17 3. HTML Historie HTML HyperText Markup Language (HTML) je značkovací jazyk určený pro tvorbu internetových stránek v systému World Wide Web (WWW). Tento jazyk vznikl před více než dvaceti lety ve švýcarském CERNu. Od té doby prodělal mnoho změn. Rozdělil se na dvě větve (HTML a XHTML) a nyní je aktuálně ve verzi HTML5, která opět spojuje tyto dvě větve do jedné. Pojďme se však podívat na samotný začátek vzniku HTML. Vše začalo v roce 1989 ve švýcarském CERNu. Tim Berners-Lee zde pracoval v oddělení správy výpočetní techniky, když dostal nápad na vytvoření portálu, kde by si mohli vědci z celého světa vyměňovat informace. Nemělo však jít pouze o poskytování informací (vědeckých prací, výsledků výzkumů apod.) ke stažení, ale tyto dokumenty měly být navzájem provázány. Čtenář jedné práce tak mohl snadno, díky provázání dokumentů, přejít na jinou práci poskytující například rozšiřující informace k danému tématu. A právě k tomuto účelu navrhl první verzi HTML. HTML bylo silně založeno na jazyku SGML (Standard Generalized Mark-up Language), což byl obecně uznávaný jazyk pro strukturování textu. V září roku 1991 rozpoutal Tim Berners-Lee po internetu diskusi o jazyce HTML, jeho budoucnosti a vývoji. O tyto nápady projevilo zájem mnoho odborníků a veřejně se tak diskutovalo o vlastnostech, které by HTML mělo mít. V roce 1992 začaly vznikat první webové prohlížeče, zatím pouze v textovém režimu. V tomtéž roce v NCSA (National Center for Supercomputer Applications) započaly práce na grafickém webovém prohlížeči Mosaic, jehož první verze byla vydána roku Objevil se zde i návrh HTML verze 2.0, která sjednocovala dosavadní zlepšení přidaná do HTML 1.0 a navíc přidala práci s formuláři. V roce 1994 byla vydána vylepšená verze prohlížeče Mosaic nazvaná Netscape. Téhož roku na scénu vstoupilo sdružení W3C (World Wide Web Consorcium), jehož cílem byl plynulý a organizovaný rozvoj internetu a HTML. Oficiální verze HTML 3.2 byla vydána roku Tato verze navíc přidala práci s tabulkami. O rok později vyšla verze 4.0, která rozšířila práci s tabulkami, formuláři a přidala rámy, kaskádové styly a skriptování. Zde se vývoj jazyka prakticky zastavil. V roce 1999 byla vydána verze 4.01, která pouze opravovala drobné chyby v předchozí specifikaci, ale nové elementy přidány nebyly. ( RAGGETT, a další, 1998) 17

18 S příchodem XML vznikla v roce 2000 další specifikace HTML, a to konkrétně XHTML ve verzi 1.0. Ta měla syntaxi odvozenou od XML, nikoliv od SGML jako původní HTML, avšak jinak se tato specifikace výrazně nelišila od HTML 4.0. W3C poté začalo pracovat na nové verzi XHTML 2.0, které měla přinést nové funkčnosti. Avšak za cenu nekompatibility s předchozími verzemi XHTML a HTML. To byl pro výrobce prohlížečů příliš radikální krok, a tak založili v roce 2004 organizaci WHATWG (The Web Hypertext Application Technology Working Group), která začala vyvíjet vlastní specifikaci (Web Applications dnešní HTML5). Rozštěpení vývoje HTML však nebylo žádoucí, a tak po dlouhých diskusích W3C ukončilo vývoj XHTML 2.0 a společně s WHATWG začalo v roce 2007 pracovat na HTML5. (GOLDSTEIN, a další, 2011 stránky 25,26) 3.2. Seznámení s HTML5 HTML5 je aktuálně nejnovější verzí tohoto jazyka. Tato specifikace je stále ve vývoji. První verze 5.0 by měla být dokončena roku 2014 a verze 5.1 o dva roky později. HTML5 v sobě spojuje všechny platné prvky z HTML4 a XHTML 1.0 a navíc přidává mnoho nových elementů, funkcí a API založených na skriptech. Mimo to upravuje sémantiku, aby byl web lépe čitelný lidem i strojům. HTML5 se snaží reagovat na změny v potřebách programátorů a uživatelů a umožnit tvorbu webu bez nutnosti používat další pluginy jako Flash či SilverLight. Zde je také třeba uvést, že termín HTML5 je často používán i pro jiné nové technologie a funkce, které však nejsou součástí HTML5 specifikace. Některé tyto funkce dříve byly jeho součástí, ale později se oddělily do samostatné větve. Existují i technologie, které nikdy nebyly součástí HTML5, přesto jsou často zahrnovány pod tento termín. Jedná se například o offline úložiště či API pro geolokaci. Pro potřeby této práce budeme i na tyto technologie odkazovat jako na HTML5. (GOLDSTEIN, a další, 2011 stránky 23,24) (W3.org, 2012) Konsorcium W3C při návrhu HTML5 postupovalo dle principů, které mají zajistit, že bude fungovat téměř na jakékoliv platformě a že bude kompatibilní se staršími prohlížeči (W3.org, 2007). To se mu zatím dle mého názoru daří, jelikož i většina přidaných funkcí funguje ve starších prohlížečích nebo alespoň nepůsobí chyby a místo nich se vykreslí prvky, které starší prohlížeče znají. Nová verze jazyka přináší nové prvky pro práci s audiem a videem, zjednodušuje sémantiku webu, zavádí nové elementy pro strukturování stránky (například section, hea- 18

19 der, footer, aside), prvky a API pro práci s grafikou, offline úložiště, rozšiřuje práci s formuláři a více se zaměřuje na strojové zpracování webové stránky (W3.org, 2012). V následujících podkapitolách si stručně tyto změny představíme Syntaxe HTML5 Jednou ze změn v HTML5 je zjednodušení zápisu vybraných elementů. Spolu s přidáním nových elementů pro strukturování stránky (viz následující kapitola Struktura HTML5) je tak kód stránky více přehledný. Cílem bylo co nejvíce zjednodušit zápis kódu při zachování kompatibility se staršími prohlížeči. Co není nutné pro správné vykreslení stránky, není v HTML5 vyžadováno. Na obrázku 1 je uvedena nejjednodušší syntaxe HTML5 dle W3C. Kód 1 - HTML5 syntaxe Jak je z obrázku patrné, došlo především k výraznému zjednodušení deklarace typu dokument (doctype). Pro srovnání v HTML 4.01 Transitional vypadala následovně: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > Dále došlo ke zjednodušení definice znakové sady v prvku head, která byla zkrácena na nezbytné minimum. Prvek script je nyní oproštěn od nutnosti uvádět atribut type, jelikož je JavaScript nejrozšířenějším a prakticky jediným běžně používaným skriptovacím jazykem pro webové stránky. (GOLDSTEIN, a další, 2011 str. 37) Zjednodušené, respektive benevolentnější, jsou nyní i zápisy prvků a atributů. Jejich názvy mohou obsahovat malá i velká písmena a hodnoty atributů lze uvádět i bez uvozovek (ale pouze pokud neobsahují mezeru). Nepárové prvky nyní není nutné ukončovat lomítkem, dokonce i některé párové prvky toto nevyžadují (například <p>), avšak tuto výhodu bych nedoporučoval, jelikož to může vést k nepřehlednosti kódu. 19

20 3.4. Struktura HTML5 Nová verze HTML vylepšuje strukturování stránky přidáním několika nových elementů. Umožňují zpřehlednit zdrojový kód, který se tak stává pro člověka čitelnějším. Navíc vzhledem k danému významu těchto elementů je kód lépe strojově zpracovatelný (mobilní prohlížeče, vyhledávací roboti). Dříve bylo potřeba pro členění stránky použít elementy <div> a přiřadit jim potřebné identifikátory. Z těchto <div> elementů však nedokázali roboti indexující stránky správně pochopit strukturu dokumentu. Díky těmto novým prvkům dokážou vyhledávače nabídnout relevantnější výsledky, jelikož správně pochopí, která část dokumentu obsahuje hlavní sdělení. Na obrázku 1 je ukázána základní struktura webu za použití nových HTML5 elementů. Obrázek 1 - Struktura webu v HTML5 Zdroj: Prvek header Prvek header slouží k označení obsahu vyjadřujícího úvod či hlavičku stránky nebo sekce. Dle specifikace WHATWG (2013 str. 21) se používá pro skupinu úvodních či navigačních pomůcek. Jedná se tedy o element, který odpovídá dřívějšímu <div id= header >, ale s tím rozdílem, že může být na stránce použit vícekrát. Může tak sloužit nejen jako hlavní hlavička stránky, ale i pro označení úvodu kapitol, titulků článků apod Prvek nav Jak už název napovídá, prvek nav slouží k označení bloku, který obsahuje navigační odkazy. Dle doporučení WHATWG (2013 str. 11) by se měl tento prvek používat pouze pro 20

21 bloky navigací prvořadé důležitosti. Pod tím si lze představit například hlavní menu stránky. Na druhou stranu, třeba často používané odkazy v patičce na podmínky serveru, domovskou stránku apod. nemusejí být v nav elementu a je pro ně plně dostačující ohraničení prvkem footer. Z tohoto prvku mohou těžit zdravotně postižení uživatelé, kteří používají tzv. čtenáře obrazovek (screen readers). Umožňuje jim totiž identifikovat bloky obsahující navigaci a přeskočit je. Nemusejí tak například při přechodu na novou stránku opětovně poslouchat navigační odkazy. Dle této definice však není úplně jasné, které druhy odkazů patří do tohoto prvku a které by tam již být neměly. Mezi vývojáři a odborníky neexistuje shoda ani žádné univerzální pravidlo, jak toto určit. Například Ian Hickson, přední editor HTML5 specifikace u WHATWG, tento problém shrnul jednou takto: Použijte ho tam, kde byste dříve psali class=nav (2009 str. 7). Nakonec jeho použití stejně záleží pouze na osobních preferencích jednotlivých vývojářů Prvek aside Tento prvek reprezentuje část stránky, která pouze okrajově souvisí s obsahem okolo prvku aside a kterou lze považovat za oddělenou od tohoto obsahu (W3.org, 2011 str. 4). Dle této definice je vhodné použít prvek aside pro části obsahu, které okrajově souvisí buď s danou sekcí obsahu (například article viz dále), anebo se vztahují obecně k dané stránce. Na druhou stranu by naopak neměly být tímto prvkem obaleny části stránky přímo související s hlavním obsahem. Mezi vhodná použití tohoto prvku patří například postranní panel, blok reklam či blok pro seskupení nav elementů Prvek article Prvek article reprezentuje soběstačnou kompozici v dokumentu, stránce, aplikaci nebo webu, která je v principu nezávisle distribuovatelná nebo opětovně využitelná (například při publikování) (W3.org, 2011 str. 8). Zde jsou důležitá slova soběstačná kompozice a nezávisle distribuovatelná. Tento prvek by se měl dle definice používat pro část stránky, která tvoří samostatný a nezávislý celek. Tím může být například, z názvu vyplývající, článek, příspěvek v diskusním fóru či položka blogu. Tímto se liší od podobného prvku section, který seskupuje tematický příbuzné části obsahu. 21

22 Prvek section Dalším z nových prvků pro strukturování stránky je prvek section. Ten je dle WHATWG (2013 str. 7) definován jako prvek reprezentující obecnou sekci dokumentu nebo aplikace. Sekce v tomto kontextu znamená tematické seskupení obsahu, typicky s vlastní hlavičkou. Dále je ve specifikaci uvedeno, že by se neměl používat jako obecný kontejner, například pro vytvoření požadovaného layoutu. K tomu slouží element div. Avšak tyto definice vedly k vlně diskusí na téma vhodného použití prvku section. Mezi správná použití patří jednotlivé sekce dlouhého dokumentu (například obchodní podmínky) či seskupení článků online magazínů (sport, ekonomika, zahraniční zprávy). I sám Bruce Lawson, respektovaná autorita HTML5, připustil, že tento prvek používal nesprávně (LAWSON, 2009). Obecně lze k použití říct, že pokud existuje nějaký specifičtější prvek (nav, article apod.), je vhodnější použít ten. Dále by měl seskupovat tematicky příbuzný obsah. Pokud nejsme schopni několika slovy popsat obsah, který chceme dát do prvku section, je lepší použít jiný neutrální prvek, například div Prvek footer Tento prvek označuje zápatí stránky či určitého obsahu. Použije se tam, kde se dříve používal prvek <div id=footer>. Jeho pozice na stránce není však pevně definována a na jedné stránce, podobně jako u prvku header, se může vyskytovat vícekrát. Je tak vhodný i pro zobrazování autora příspěvku v diskusním fóru Formuláře Formuláře jsou nedílnou a velmi významnou součástí HTML. Dřívější verze HTML ale neposkytovaly některé základní funkčnosti. Formuláře v HTML5 doznaly většího množství změn a podporují nativně i funkčnosti, které dříve musely být řešeny například Java Scriptem. Jedná se kupříkladu o podporu validací či zástupných textů polí. Proto je jejich vytváření nejen jednodušší, ale jsou i příjemnější pro uživatele. Vzhled těchto prvků je totiž vytvářen přímo prohlížečem, a tak jsou konzistentnější napříč rozdílnými stránkami. Nejdříve si představíme nové atributy formulářových prvků, poté nové druhy vstupních polí a na závěr změny ve stávajících prvcích oproti dřívějším verzím HTML. 22

23 Nové atributy S novými atributy formulářových prvků je výrazně snazší implementování některých základní vlastností, které bylo dříve nutné řešit jinými technologiemi. Prvním z nich je atribut required Atribut required Tento atribut označuje povinné vstupní pole. Je možné jej přiřadit všem vstupním prvkům kromě button, color, hidden a range. V případě pokusu odeslat formulář obsahující pole s tímto atributem dojde k zastavení odeslání a uživateli prohlížeč zobrazí hlášku s popisem chyby a nastaví focus na daný prvek. Na obrázku 2 je vidět, jak vypadá tato zpráva v prohlížeči Google Chrome. Obrázek 2 - HTML5 required Atribut pattern Dalším atributem pro validace vstupů je pattern. Ten umožňuje určit regulérní výraz, který musí daný vstup splňovat, aby bylo možné považovat pole za validní. Bohužel hláška zobrazovaná prohlížečem neříká nic o formátu, který od uživatele požadujeme. Je tedy vhodné přidat atribut title s doplňujícími informacemi o požadovaném vstupu. Ten se uživateli zobrazí při najetí myší na dané pole, ale hlavně při validaci spolu se standardní hláškou, jak můžete vidět na obrázku 3. Obrázek 3 - HTML5 pattern 23

24 V HTML pak tato definice vypadá následovně (uvnitř prvku input): pattern="\s{6,10}" title="heslo musí být dlouhé 6 až 10 znaků". S označuje neprázdné znaky a čísla v rozsahu od šesti do deseti. Nakonec je důležité poznamenat, že pokud regulérní výraz není platný, bude se jeho validace ignorovat a formulář se tak odešle, ať je zadána jakákoliv hodnota Atribut placeholder Použití atributu placeholder jste mohli vidět již na obrázku 2. Umožňuje definovat text, který se má zobrazit v nevyplněném poli. Je vhodné jej použít jako nápovědu pro uživatele, jakou hodnotu od něj požadujeme. Hodnota placeholderu není součástí pole a při validacích je takové pole stále chápáno jako prázdné. Text se zobrazuje pouze, pokud nemá dané pole focus. To i v případě, že v daném prvku již uživatel byl, ale nic nevyplnil a zase jej opustil Atribut disabled Atribut disabled byl již ve starších verzích HTML, ale v HTML5 je rozšířen o možnost nastavit jej u jakéhokoliv prvku formuláře (s jedinou výjimkou, a tou je nový prvek output, pro který nemá smysl). Nově lze tak použít i pro prvek fieldset, čímž se aplikuje na všechny formulářové prvky uvnitř a ušetří tím práci s vyplňováním atributu u jednotlivých polí. Prvky s tímto atributem jsou zobrazeny šedivě a uživatel s nimi nemůže interagovat. Je však třeba mít na paměti, že se hodnoty těchto prvků neodesílají s formulářem a nejsou tak dostupné na serveru pro další zpracování. Pokud tedy potřebujete s těmito hodnotami pracovat, použijte atribut readonly. Disabled je vhodný například pro deaktivování tlačítka pro odeslání formuláře v případě, že není validně vyplněn Atribut readonly Podobně jako disabled znemožňuje atribut readonly editovat hodnotu pole uživatelem. Liší se ale tím, že prvek s tímto atributem může získat focus (kromě prohlížeče Google Chrome) a vypadá jako klasické povolené vstupní pole. Pouze do něj nemůže uživatel zadat hodnotu. Tato vlastnost může při špatném použití mást uživatele, jelikož nemusí být patrné, že do daného pole nic psát nemá, i když má kurzor pro psaní. Zde bych tedy preferoval přístup prohlížeče Google Chrome, který pole zobrazuje sice stejně jako povolené vstupní pole, ale bez kurzoru. Je tak zřejmější, že daná hodnota je jen pro čtení. 24