České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství
Bakalářská práce
Systém pro hodnocení pedagogického výkonu – verze 3.0 – rozhraní pro úvazkáře a učitele Jakub Štefan
Vedoucí práce: Ing. Michal Valenta, Ph.D.
13. května 2014
Poděkování Rád bych v první řadě poděkoval vedoucímu mé práce, Ing. Michalu Valentovi, Ph.D., za jeho vstřícnost a čas, který mi věnoval. Dále děkuji Josefu Němečkovi za to, že byl spolehlivým týmovým kolegou při implementaci aplikace.
Prohlášení Prohlašuji, že jsem předloženou práci vypracoval(a) samostatně a že jsem uvedl(a) veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle § 60 odst. 1 autorského zákona.
V Praze dne 13. května 2014
.....................
České vysoké učení technické v Praze Fakulta informačních technologií c 2014 Jakub Štefan. Všechna práva vyhrazena.
Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.
Odkaz na tuto práci Štefan, Jakub. Systém pro hodnocení pedagogického výkonu – verze 3.0 – rozhraní pro úvazkáře a učitele. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2014.
Abstrakt Tato bakalářská práce je jedna ze tří, které mají společně za úkol vytvořit novou verzi webové aplikace pro hodnocení pedagogického výkonu na Fakultě informačních technologií ČVUT. V práci je provedena analýza stávajícího řešení aplikace a na základě dat z této analýzy je navrženo nové uživatelské rozhraní. Dále je v práci diskutován výběr technologií pro implementaci uživatelského rozhraní. Výsledkem práce je, po integraci s ostatními částmi projektu, plně funkční webová aplikace pro hodnocení pedagogického výkonu. Klíčová slova webová aplikace, návrh, analýza, uživatelské rozhraní, HTML, CSS, JavaScript
ix
Abstract This bachelor thesis is part of a project, which consists of three bachelor theses and is tasked to create a new iteration of web application for planning and rating teacher duties at Faculty of information technology of CTU. This thesis focuses on analysis of the current implementation of the service. Based on the data gathered from the analysis a new user interface is designed. Another focus of this thesis is analysis and choice of suitable technology for implementation. Combined output of all three theses is fully funtional web application for planning and rating teacher duties. Keywords web appliaction, design, analysis, user interface, HTML, CSS, JavaScript
x
Obsah Úvod Cíl práce . . . . Vymezení zadání Výstup práce . . Struktura práce .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
1 1 2 2 2
1 Analýza a návrh 1.1 Cílová skupina . . . . . 1.2 Cílová zařízení . . . . . 1.3 Podporované prohlížeče 1.4 Současný stav aplikace . 1.5 Návrh nového rozhraní .
Úvod Při pracovní činnosti firem či institucí jde každou minutou o peníze. Z toho důvodu je nesmírně důležitá pracovní efektivita zaměstnanců. Dostávají za svou práci výplatu a očekává se od nich, že pracují poctivě a kvalitně. Ale jak zjistit, že zaměstnanec má určité rezervy a své ohodnocení si nezaslouží? Jak zjistit, že firma nemá dostatek pracovní síly ke splnění další zakázky v termínu? Odpovědí na výše uvedené otázky je hodnocení pracovního výkonu. Schopnost nějakým způsobem monitorovat efektivitu zaměstnanců je dnes ve firmách či institucích velmi důležitým prvkem. Jedná se o mocný nástroj manažerů. Lze ho využít např. jako motivaci pracovníků k lepším výkonům, jako nástroj pro spravedlivé ohodnocení pracovníků nebo na identifikaci jejich silných a slabých stránek. Neznamená to ale, že by to byl pouze bič na neefektivní nebo líné osoby. I zaměstnanci z toho těží. Mohou si o sobě přečíst různá hodnocení nebo reporty. Funguje to jako velmi užitečný zdroj zpětné vazby.[1] K hodnocení pracovního výkonu se dnes využívají různé informační systémy nebo aplikace. Ty mají řadu dalších funkcí, jako je např. vykreslování grafů, podrobné tabulky, posílání zpráv nebo plánovací režim, který umožňuje rozvrhnout pracovní sílu na nadcházející období. Fakulta informačních technologií ČVUT využívá k plánováni a hodnocení pracovního výkonu webovou aplikaci. Současná verze ovšem nesplňuje požadavky úvazkářů, obsahuje chyby, postrádá důležitou funkcionalitu a její uživatelské rozhraní je značně nepřehledné.
Cíl práce Tato práce spadá do projektu, který se skládá ze tří částí. Každá část je samostatnou bakalářskou prací a společně by měly vytvořit novou verzi webové aplikace pro hodnocení pedagogického výkonu pro Fakultu informačních technologií ČVUT v Praze. Stávající verze obsahuje mnoho nedostatků, postrádá potřebnou funkcionalitu a její uživatelské rozhraní je značně nepřehledné. 1
Úvod První částí je práce kolegy Josefa Němečka, který navrhuje novou strukturu databáze a vypracovává k ní a k metodice výpočtu dokumentaci, další částí je práce kolegy Milana Resche, který má na starosti backend1 a aktualizaci databázových funkcí. Ten se nicméně rozhodl prodloužit si studium a odložit vypracování své bakalářské práce, tím se změnilo rozdělení práce v týmu. Tento problém je podrobněji zmíněn v závěru práce.
Vymezení zadání Zadáním práce je provést interview s uživateli současné verze systému, sepsat jejich připomínky a požadavky, na základě těchto dat navrhnout prototyp nového uživatelského rozhraní, ten následně implementovat a otestovat.
Výstup práce Výstupem práce, po spojení s ostatními částmi projektu, by měla být plně funkční webová aplikace, která uvazkářům umožní spolehlivě plánovat a monitorovat pedagogické zatížení učitelů a plně tak nahradí stávající nedostačující verzi.
Struktura práce Práce obsahuje analytickou, implementační a testovací část. Kapitola 1 je věnována analýze cílové skupiny, analýze stávající verze aplikace, identifikace problémů jejího GUI2 , popisu postupu při návrhu nového GUI. Obsahem kapitoly 2 je analýza a volba dostupných implementačních technologií. Kapitola 3 obsahuje detailní popis vybraných implementačních postupů. Kapitola 4 je věnována testování. V závěru je zmíněn možný rozvoj aplikace do budoucna a rozdělení práce na projektu v týmu.
1 2
2
serverová část aplikace graphical user interface
Kapitola
Analýza a návrh V únoru 2014 byla provedena schůzka s vedoucím bakalářské práce a uživateli aplikace. Při interview s uživateli bylo sepsáno mnoho připomínek k současnému stavu aplikace a požadavků na vylepšení. Následujících několik sekcí se věnuje rozboru nasbíraných dat z provedených interview a podrobné analýze stávající verze aplikace.
1.1
Cílová skupina
Bylo zjištěno, že primární uživatelskou skupinou jsou úvazkáři kateder. Jedná se o velmi úzkou skupinu lidí, jejichž členové jsou technicky velmi zdatní uživatelé a mají zkušenosti s ovládáním webových aplikací a informačních systémů. Sekundární cílovou skupinou jsou učitelé. U této skupiny se nepředpokládá technická zdatnost a zkušenosti na úrovni skupiny primární. Pro učitele je nicméně vyhrazena specifická část aplikace, takže nenastává problém nutnosti přizpůsobit aplikaci oběma skupinám zároveň.
1.2
Cílová zařízení
Jelikož aplikace obsahuje mnoho formulářů a rozsáhlých tabulek prezentujících velké množství dat, byly jako cílová zařízení určeny stolní počítače a notebooky. V současnosti, v roce 2014, používá 99 % uživatelů obrazovku širší než 1024 px, z toho 7 % právě tuto šířku, 92 % uživatelů tedy používá obrazovku širší než 1024 px.[2] Vzhledem k charakteru aplikace byla zvolena optimalizace pro obrazovky šířky 1280 px a větší. Na menších obrazovkách je aplikace použitelná, nicméně se mohou vyskytnout určité problémy s rozvržením stránek. 3
1
1. Analýza a návrh
1.3
Podporované prohlížeče
Nová verze aplikace byla implementována s použitím prvků z nejmodernějších webových specifikací HTML5 a CSS3. HTML5 elementy jsou podporovány ve všech moderních prohlížečích, včetně Internet Exploreru 9. Pro starší verze Internet Exploreru je potřeba doplnit HTML5 podporu pomocí JavaScriptu. CSS3 selektory jsou podporovány ve verzích Google Chrome 4.0 a novější, Mozilla Firefox 3.5 a novější, Opera 9.5 a novější a Safari 3.2 a novější. Co se týče Internet Exploreru, tak některé CSS3 selektory jsou podporovány i ve verzi 8, nicméně ty použité v aplikaci jsou podporovány až od verze 9.[3] Použité CSS3 vlastnosti, s výjimkou barevných přechodů, jsou podporovány v prohlížečích Internet Explorer verze 9 a novější, Google Chrome 10.0 a novější, Mozilla Firefox 4.0 a novější, Opera 10.5 a novější a Safari 5.1 a novější.[4] Podporovanými prohlížeči pro aplikaci jsou tedy Internet Explorer 9 a novější, Google Chrome 10.0 a novější, Mozilla Firefox 4.0 a novější, Opera 10.5 a novější a Safari 5.1 a novější.
1.4
Současný stav aplikace
Uživatelské rozhraní aplikace obsahuje mnoho nedostatků a nedokonalostí. V následujících sekcích budou detailně popsány nejdůležitější problémy a postupy, jak je lze řešit.
1.4.1
Šířka GUI
Aplikace má nastavenou fixní šířku 980 px. Šířky kolem 960 px byly v minulosti velice populární zejména díky rozšířenosti tzv. 960 grid systému. Technika grid systém se v grafickém designu používá k rozdělení obsahu na několik stejně širokých sloupců. Ty slouží designerům jako vodítko pro umisťování různých prvků, jako jsou odstavce textu, obrázky nebo grafy. 960 grid systém se většinou skládá z 12 sloupců o velikosti 60 px, každý má vlevo a vpravo mezeru o velikosti 10 px. Sloupce tedy mají mezi sebou mezery o velikosti 20 px. 960 px je ideální šířka stránky pro obrazovky šířky 1024 px, která byla ještě před několika lety velmi rozšířená. Dnes jsou běžné větší obrazovky, viz 1.2 Cílová zařízení na straně 3. Pro aplikace typu „informační systém“, kde je potřeba prezentovat velké množství dat a formulářů, není šířka 980 px dostatečná.
1.4.2
Využití obrázků jako designových prvků
Designové prvky aplikace jako barevné přechody, zaoblené rohy nebo stínování, jsou řešeny pomocí obrázků. Dnes se tyto prvky dají vytvořit díky CSS3 4
1.4. Současný stav aplikace vlastnostem naprosto bez použití obrázků. Současná verze aplikace byla vytvořena v roce 2011. V této době se standardu CSS3 teprve začínalo dostávat větší podpory v prohlížečích.
Obrázek 1.1: Rozdělení hlavního kontejneru aplikace Na obrázku 1.1 lze vidět rozdělení hlavního kontejneru aplikace. Skládá se ze tří blokových elementů: div.top, div.middle a div.bottom.
Obrázek 1.2: Obrázek jako pozadí elementu Jak je ukázáno na obrázku 1.2, element div.top má pozadí nastaveno na obrázek content_top.png, analogicky element div.bottom má pozadí nastaveno na obrázek content_bottom.png.
Obrázek 1.3: Obrázek content_top.png Obrázky content_top.png a content_bottom.png jsou pouze úzké lišty se zaoblenými rohy na modrém pozadí, které ohraničují element div.middle. Ten má pozadí nastaveno na malý obrázek s barevným přechodem o velikosti 2 krát 2 px, který se roztáhne do maximální šířky a výšky elementu. Pokud by bylo potřeba změnit barvu pozadí aplikace nebo hlavního kontejneru, musely by se upravit všechny obrázky zasahující do upravované oblasti. Zde jsou patrné nevýhody tohoto postupu. Kdyby podobných obrázků bylo např. 100, prostá úprava, jako je změna barvy pozadí, by byla časově velmi náročná. Navíc každý použitý obrázek znamená jeden HTTP3 požadavek na server. V případě této aplikace to není problém. Uživatelé ji využívají převážně připojeni napevno nebo přes WiFi. Na mobilních sítích ale znamená každý obrázek pomalejší načtení stránky a vyšší zásah do datového limitu. 3
Hyper Text Transfer Protocol
5
1. Analýza a návrh V současnosti, v roce 2014, díky široké podpoře CSS3 v prohlížečích, lze lineární barevný přechod vytvořit nastavením vlastnosti background na hodnotu linear-gradient, zaoblené rohy využitím vlastnosti border-radius a stínování využitím box-shadow nebo text-shadow.
1.4.3
Hlavní navigace
Menu stávající verze aplikace je horizontálně orientované a obsahuje 14 položek rozdělených do dvou řádků. Dvouřádkové horizontální menu se obecně používá jako technika oddělení primární a sekundární navigace. První řádek je navigace primární a druhý sekundární, která se mění v závislosti na výběru odkazu z té primární.
Obrázek 1.4: Hlavní navigace současné verze aplikace Obecně je lepším zvykem použít menší víceúrovňovou navigaci, kdy po najetí nebo kliknutí na odkaz vyšší úrovně se uživateli odhalí odkazy o úroveň nižší. Ty významově spadají pod odkaz vyšší úrovně. Klíčem je určit správné názvy vyšších úrovní tak, aby uživatel vždy intuitivně došel k požadovanému odkazu. Např. Zákaznická podpora > Reklamace > Reklamační řád.
1.4.4
Formuláře
Současná verze aplikace obsahuje několik nepřehledných formulářů. Vyskytuje se v nich mnoho střídajících se velikostí vstupních polí. Ty by měly být nastaveny logicky tak, aby zapadaly do kontextu celého formuláře a zvyšovaly jeho přehlednost. Dalším problémem je absence uspořádání tématicky souvisejících vstupních polí do skupin, tzv. fieldsetů. U většiny vstupních polí chybí validace a povinná pole nejsou nijak zvýrazněna. Některé vstupy, které by se sémanticky hodily jako výběr ze seznamu, jsou pouze textového typu. Jak lze vidět na obrázku 1.5, je zpětná vazba po odeslání formuláře nejasná a nevýrazná a u některých formulářů úplně chybí.
Obrázek 1.5: Zpětná vazba po úspěšné úpravě předmětu
6
1.4. Současný stav aplikace
1.4.5
Tabulky a přehledy
Filtrování a řazení v tabulkách je velmi kostrbaté. Uživatel musí nejdříve kliknout na tlačítko Přidat filtr, vybrat z množností Řadit nebo Filtrovat a nakonec doplnit, podle čeho se bude vybírat nebo filtrovat. Je to zbytečně moc kroků na akci, která se provádí velmi často.
Obrázek 1.6: Filtrování dat v tabulce Na obrázku 1.6 je vidět vedle textového vstupního pole tlačítko, které celý filtr smaže. Toto tlačítko je na místě, kde uživatel očekává tlačítko typu Proveď. Řádky tabulky sice využívají zebrování4 , ale tenké černé písmo Arial na modrém pozadí není nejvhodnější volbou. V kombinaci s velmi malým prostorem oddělujícím jednotlivé řádky se uživatel může při prohlížení dat v tabulce ztrácet.
Obrázek 1.7: Výřez tabulky „Předmět náročnost“
1.4.6
Uspořádání aplikace
V aplikaci existuje 6 formulářů rozdělených do jednotlivých stránek, které se týkají jednoho učitele. Pokud tedy uživatel při úpravě jednoho formuláře chce mít referenci na jiný, musí na něj nejprve přejít, zapamatovat si nebo zapsat informaci, přejít zpět na stránku s prvním formulářem a pokračovat ve vyplňování. Při každém přechodu z jednoho formuláře na jiný, musí uživatel znovu 4
střídání barev pozadí řádků za účelem jednodušší orientace v tabulce
7
1. Analýza a návrh vyhledávat učitele pomocí uživatelského jména. Navíc se celý rozpracovaný formulář smaže. V aplikaci také chybí možnost porovnávat důležité informace jako naplnění úvazku učitele s jinými semestry. Výběr semestru je nyní umístěn na přihlašovací obrazovce. Pokud tedy uživatel potřebuje přístup k datům z jiného semestru, musí se nejprve odhlásit, vybrat jiný semestr a opět se přihlásit.
1.5
Návrh nového rozhraní
Na základě rozboru chyb stávajícího uživatelského rozhraní byl navržen prototyp nového rozhraní. Ten byl prezentován úvazkářům a následně schválen k implementaci. Následujících několik sekcí popisuje hlavní designové myšlenky a postupy odstranění nedostatků stávající verze uživatelského rozhraní. Ukázky návrhu jsou v příloze D.
1.5.1
Barevné schéma
Vzhledem k podstatě aplikace, nebylo potřeba barvami upozorňovat na důležitý produkt či informaci. Při výběru barev byl kladen důraz na to, aby zbytečně nedráždily oči uživatele a nerušily ho při práci s aplikací. Proto byly zvoleny pouze dvě hlavní barvy #292A2F a #EEEEEE. #292A2F je použita na horní lištu a postranní navigaci, #EEEEEE je barvou pozadí. Veškerý obsah je umístěn v blocích s okraji šedé barvy #D5D5D5 a bílým pozadím, tedy #FFFFFF.
Obrázek 1.8: Hlavní barvy nové verze GUI
1.5.2
Šířka GUI
Šířka aplikace byla změněna z fixních 980 px na 100 % šířky obrazovky. Tím je naplno využit potenciál velkých obrazovek. Struktura obsahu se nyní dynamicky přizpůsobuje velikosti obrazovky. 8
1.5. Návrh nového rozhraní
1.5.3
Využití obrázků jako designových prvků
Při návrhu uživatelského rozhraní byl kladen důraz na to, aby byl použit co nejmenší počet obrázků. Veškeré designové prvky, jako jsou zaoblené hrany, barevné přechody a stíny, byly vytvořeny s využitím technik standardu CSS3.
1.5.4
Hlavní navigace
Orientace hlavní navigace byla změněna z horizontální na vertikální. Související odkazy byly přesunuty do skupin, tím vzniklo více úrovní. Díky vertikální orientaci nehrozí zásah rozbalených nižších úrovní do jiného obsahu stránky. Názvy hlavních kategorií byly určeny: Učitelé, Předměty, Import a Semestr. Sloupec navigace společně s horní lištou je nyní zafixován k oknu prohlížeče. Zůstává tedy stále na stejném místě bez ohledu na vertikální pozici na stránce.
Obrázek 1.9: Nová hlavní navigace
1.5.5
Formuláře
Popisky k vstupním polím byly přesunuty z levé strany nad vstupní pole. Díky tomu se ušetřil horizontální prostor a to umožňuje vedle sebe například umístit dva formuláře. Počet různých velikostí vstupních polí byl snížen a u složitějších formulářů byly vstupy rozděleny do skupin. Formuláře díky tomu vypadají více konzistentní. 9
1. Analýza a návrh
Obrázek 1.10: Validace formuláře
Jak lze vidět na obrázku 1.10, u vstupních polí je nyní klasicky znázorněno hvězdičkou, zda je pole povinné. Dále byla u většiny polí přidána validace, která vizuálně dává uživateli zpětnou vazbu v reálném čase, když je vstup chybně vyplněn.
Obrázek 1.11: Nápověda u vstupního pole K některým vstupním polím byla přidána nápověda, kde uživatel může zjistit jejich význam a v jakém tvaru zadávat data, viz. obrázek 1.11.
1.5.6
Tabulky a přehledy
Data v tabulkách lze nyní řadit kliknutím na některé sloupce. Bylo přidáno políčko pro zaškrtnutí Pouze moje katedra. Po zaškrtnutí tohoto políčka se odfiltrují z tabulky veškeré záznamy jiné katedry než té, ke které patří přihlášený uživatel. Při interview s úvazkáři bylo zjištěno, že je většinou zajímají data týkající se pouze jejich katedry. Proto je toto políčko ve výchozím nastavení zaškrtnuto. 10
1.5. Návrh nového rozhraní V tabulkách lze nyní vyhledávat podle dat ve specifických sloupcích. Při zadávání dotazu do textového pole se v reálném čase data v tabulce filtrují. Záznamy v tabulce se nyní také stránkují a uživatel si může zvolit, kolik řádků tabulky se na jedné stránce zobrazí. Řádky se nyní střídají bílé a šedé. Bylo zvoleno tučnější písmo Roboto o velikosti 12 px. V kombinaci s větším prostorem oddělujícím jednotlivé řádky se tabulka stala čitelnější a přehlednější. Po kliknutí na řádek tabulky předmětů nebo učitelů se uživatel dostane na detail příslušného záznamu. Pro zvýraznění byla zvolena tmavá barva pozadí řádku, nad kterým se nachází kurzor myši.
Obrázek 1.12: Nový vzhled tabulky
1.5.7
Uspořádání aplikace
Všechny samostatné formuláře, které se týkaly učitele, byly přesunuty na stránku novou, tzv. detail učitele. Uživatel se na detail učitele dostane kliknutím na řádek v tabulce učitelů. Má také nyní při práci s formulářem reference na data z ostatních a nemusí při každém otevření formuláře znovu hledat učitele podle uživatelského jména. Výběr databáze semestru byl přesunut z přihlašovací obrazovky na horní lištu aplikace, proto může nyní uživatel měnit semestr kdykoli. Po změně databáze semestru je uživatel navrácen na stránku, na které byl před změnou semestru. Aby nebylo nutné měnit databáze semestru příliš často, bylo dále do aplikace na přaní úvazkářů přidáno srovnání výpočtu započitatelných hodin učitelů s jinými semestry. K tomuto srovnání se lze dostat po najetí nad sloupec ZH v tabulce učitelů nebo na stránce detailu učitele.
11
Kapitola
Technologie Tato kapitola je věnována rozboru technologií použitých v současné verzi aplikace, analýze nových technologií a zdůvodnění jejich výběru.
2.1
Současný stav
Současná verze aplikace je vytvořena pomocí následujících technologií: • Klientská část – XHTML 1.0 strict – CSS2 – jQuery • Serverová část – PHP 5 – PostgreSQL 8
2.1.1
XHTML 1.0 strict
XHTML5 je starší standard HTML, který měl za úkol převést jazyk HTML do formy, která by vyhovovala vytváření XML6 dokumentů. Navzdory svému názvu obsahuje XHTML spíše různá omezení. Například nepárové HTML tagy7 musí být ukončeny />, všechny atributy musí obsahovat nějakou hodnotu a všechny tagy musí být uzavřeny. 5
Extensible HyperText Markup Language Extensible Markup Language 7 název HTML elementu ohraničený < > 6
13
2
2. Technologie
2.1.2
CSS2
Standard pro kaskádové styly CSS2 byl zaveden už v roce 1998.[5] Postrádá flexibilitu a funkcionalitu, kterou přináší nový standard CSS3. Tomu je věnována sekce 2.4.
2.1.3
jQuery
Podle [6] je jQuery nejpopulárnější JavaScriptová knihovna. Této knihovně se podrobně věnuje sekce 2.5.1.1.
2.2
Analýza nových technologií
V následujících sekcích budou popsány moderní technologie pro vývoj webových aplikací a jejich výhody oproti technologiím současné verze aplikace. Většina těchto technologií se týká klientské části aplikace, nicméně pro potřeby implementace nového uživatelského rozhraní bylo potřeba upravit implementační postup i v serverové části.
2.3
HTML5
HTML5 je nejnovější specifikací jazyku HTML. Přináší mnohé výhody oproti specifikacím XHTML 1.0 nebo HTML 4.01, jako je jednodušší syntaxe, vkládání multimediálního obsahu, validace formulářů bez použití JavaScriptu nebo nové sémantické elementy.
2.3.1
Zjednodušení HTML syntaxe
Obecně je HMTL5 mnohem benevolentnější v kontrole syntaxe. Při určování hodnot atributů lze nyní vypustit uvozovky a nerozlišují se velká a malá písmena. Je povoleno tedy psát např. atribut=muJaTrIbut. Dále je jednodušší vkládání JavaScriptu do stránky. V HTML 4.01 bylo nutné specifikovat typ souboru. <script type="text/javascript" src="skript.js"> V HTML 5 se předpokládá, že vkládaný soubor je soubor JavaScriptu, proto lze typ souboru vynechat. <script src="skript.js"> Podobně lze vypustit i určení typu souboru při vkládání CSS pomocí tagu . 14
2.3. HTML5
2.3.2
Zjednodušení doctype
Každý HTML dokument většinou začíná tím, že specifikuje deklaraci typu dokumentu, tzv. doctype. Ten se dnes používá pouze k přepínání vykreslovacích módů CSS. Vykreslovací mód mění, jak se interpretují různé CSS vlastnosti. Zejména jak se počítá šířku nebo výška elementu. Týká se to především Internet Exploreru. Určením správného doctype se zaručí, že se stránka bude vykreslovat v Internet Exploreru stejně jako v jiných prohlížečích. Určení správného doctype vyžadují validátory HTML. S nesprávným doctype stránka není validní. Existuje mnoho typů doctype pro různé vykreslovací módy a HTML specifikace. Doctype pro XHTML 1.0 strict vypadá následovně: V HTML5, oproti jiným specifikacím, je určení doctype velmi zjednodušeno. Nově lze pouze napsat a dále se není potřeba o nic starat. Ve skutečnosti se v HTML5 doctype ani uvádět nemusí a stránka bude stále validní. Nicméně to je stále potřebné pro starší verze Internet Exploreru, aby se v nich stránka vykreslovala ve standardním módu.
2.3.3
Nové sémantické elementy
Běžně je struktura webové stránky tvořena pomocí blokových elementů
, který se používá i jako kontejner pro jiné elementy nebo řádkových <span>. Tyto elementy ale nenesou žádný sémantický význam. HTML5 umožňuje používat nové sémantické elementy. Pro hlavičku stránky nebo nějakého bloku lze použít , analogicky pro patičku
