Bankovní institut vysoká škola Praha

Návrh a tvorba webových stránek Bakalářská práce

Zdeněk Koubek

Duben, 2014

Bankovní institut vysoká škola Praha Katedra informatiky a kvantitativních metod

Návrh a tvorba webových stránek Bakalářská práce

Autor:

Zdeněk Koubek Informační technologie, Správce informačních systémů

Vedoucí práce:

Praha

Ing. Bohuslav Růžička, CSc.

Duben, 2014

Prohlášení: Prohlašuji, ţe jsem bakalářskou práci zpracoval samostatně a v seznamu uvedl veškerou pouţitou literaturu. Svým podpisem stvrzuji, ţe odevzdaná elektronická podoba práce je identická s její tištěnou verzí, a jsem seznámen/a se skutečností, ţe se práce bude archivovat v knihovně BIVŠ a dále bude zpřístupněna třetím osobám prostřednictvím interní databáze elektronických vysokoškolských prací.

V Brandýse nad Labem, dne 17.4.2014

Zdeněk Koubek

Poděkování Na tomto místě bych rád poděkoval vedoucímu práce Ing. Bohuslavovi Růţičkovi, CSc., děkuji za poskytnuté rady. Zdeněk Koubek

Anotace Tato práce se zabývá problematikou návrhu a tvorby webových stránek. První kapitola seznamuje čtenáře s historií, se základními pojmy a s postupem tvorby stránek. Ve druhé kapitole jsou uvedeny zásady, kterými je doporučeno se řídit, pokud chceme vytvořit kvalitní web. Třetí kapitola se zabývá technologiemi, které jsou dnes nejčastěji pouţity k tvorbě stránek. V této kapitole jsou představeny moderní technologie HTML5 a CSS3. U kaţdé technologie jsou uvedeny základy její syntaxe. Čtvrtá kapitola popisuje nástroje, které je moţné pouţít k vytvoření stránek. V dnešní době existuje široká nabídka nástrojů, v této práci jsou uvedeni jejich typičtí zástupci. Klíčová slova: Webová stránka, HTML, CSS, Javascript, PHP, Redakční systémy

Annotation This bachelor's thesis deals with creation of web pages and their design. The first chapter introduces the reader to the history of creating web pages, their basic concepts and the process for their creating. In the second chapter there are set out the principles recommended to follow when creating a quality website. The third chapter deals with technologies that are currently used most often to create pages. This chapter introduces modern technologies HTML5 and CSS3. For each technology are described the keystones of its syntax. The fourth chapter describes the tools that can be used to create pages. Nowadays there is a wide range of tools for creating web pages. In this bachelor's thesis we mention the typical representatives.

Key words: Website, HTML, CSS, Javascript, PHP, Content Management Systems

Obsah Úvod .................................................................................................................................. 8 1

2

3

Představení webových stránek.................................................................................... 9 1.1

Historie webových stránek ............................................................................... 10

1.2

Základní pojmy ................................................................................................. 11

1.3

Postup tvorby webových stránek ...................................................................... 12

Zásady tvorby webových stránek ............................................................................. 14 2.1

Blind Friendly Web: ......................................................................................... 18

2.2

WCAG 2.0 (Web Content Accessibility Guidelines) ....................................... 18

Technologie .............................................................................................................. 20 3.1

HTML ............................................................................................................... 20

3.1.1

Verze jazyka HTML ................................................................................. 20

3.1.2

HTML5 ..................................................................................................... 21

3.1.3

Základy syntaxe ........................................................................................ 22

3.1.4

Obrázky .................................................................................................... 23

3.1.5

Odkazy ...................................................................................................... 24

3.1.6

Tabulky ..................................................................................................... 25

3.1.7

Seznamy ................................................................................................... 25

3.2

CSS ................................................................................................................... 26

3.2.1

Verze CSS ................................................................................................ 26

3.2.2

CSS3 ......................................................................................................... 27

3.2.3

Přímý zápis ............................................................................................... 28

3.2.4

Stylopis ..................................................................................................... 28

3.2.5

Zápis do externího souboru ...................................................................... 29

3.2.6

Syntaxe CSS ............................................................................................. 29

3.3

Javascript .......................................................................................................... 32

3.3.1

Přímý zápis ............................................................................................... 33

3.3.2

Zápis do externího souboru ...................................................................... 33

3.3.3

In-line zápis .............................................................................................. 34

3.3.4

Základní příkazy v Javascriptu ................................................................. 34

3.4

PHP ................................................................................................................... 37

3.4.1

Historie a verze PHP ................................................................................ 38

3.4.2

Instalace PHP............................................................................................ 38

3.4.3

Základy syntaxe ........................................................................................ 39

3.4.4

Proměnné .................................................................................................. 40

3.5 4

Termín SEO ...................................................................................................... 41

Nástroje..................................................................................................................... 43 4.1

Grafický návrh .................................................................................................. 43

4.1.1

Grafické editory ........................................................................................ 44

4.1.2

Ukázka uţivatelského rozhraní................................................................. 45

4.2

Strukturní editory.............................................................................................. 45

4.2.1

Notepad++ ................................................................................................ 46

4.2.2

Ukázka uţivatelského rozhraní................................................................. 46

4.2.3

PSPad ........................................................................................................ 46

4.2.4

Ukázka uţivatelského rozhraní................................................................. 47

4.3

WYSIWYG editory .......................................................................................... 47

4.3.1

Microsoft FrontPage ................................................................................. 48

4.3.2

Ukázka uţivatelského rozhraní................................................................. 48

4.3.3

Dreamweaver ............................................................................................ 49

4.3.4

Ukázka uţivatelského rozhraní................................................................. 50

4.4

Porovnání WYSIWYG editorů......................................................................... 51

4.5

Redakční systémy ............................................................................................. 52

4.5.1

WordPress................................................................................................. 53

4.5.2

Ukázka uţivatelského rozhraní................................................................. 54

4.5.3

Joomla! ..................................................................................................... 54

4.5.4

Ukázka uţivatelského rozhraní................................................................. 55

4.5.5

Drupal ....................................................................................................... 55

4.5.6

Ukázka uţivatelského rozhraní................................................................. 56

4.6

Instalace redakčního systému ........................................................................... 56

4.7

Porovnání redakčních systémů ......................................................................... 57

Závěr ............................................................................................................................... 58 Seznam literatury ............................................................................................................ 59 Seznam obrázků .............................................................................................................. 65

Úvod Téma Návrh a tvorba webových stránek jsem si vybral proto, ţe se jiţ delší dobu zajímám o různé technologie, nástroje a metody tvorby webových stránek. Povaţuji web za nejperspektivnější informační médium dnešní doby. Kaţdým dnem počet nových stránek roste. Je to dáno tím, ţe dnes není obtíţné vytvořit si vlastní stránku. Existuje řada nástrojů, které její tvorbu výrazně ulehčí. Pokud hodláme vytvořit kvalitní web, je dobré porozumět základům kódování. Díky této bakalářské práci jsem dostal moţnost popsat metody tvorby webových stránek a představit nejpouţívanější technologie a nástroje. Cíl bakalářské práce, je následující. Popsat moţnosti tvorby webových stránek, metody jejich návrhu, postupy vytváření a s tím související zásady. Uvést příklady moderních technologií a nástrojů pro vývoj webových stránek a porovnat jejich vlastnosti. Bakalářská práce vychází ze zpracování primárních a sekundárních zdrojů pocházejících jak z tištěných zdrojů, tak i (jak je pro obor informačních technologií obvyklé) z internetových zdrojů. Pouţita byla metoda analyticko-syntetická s prvky komparace.

8

1 Představení webových stránek World Wide Web je nejpopulárnější sluţba internetu a webové stránky a jsou fenoménem dnešní doby. Jejich sluţeb dnes vyuţívá podle webu InternetWorldStats1 přibliţně 2.5 miliardy uţivatelů internetu. Webová stránka je interaktivní, a dostupná pomocí internetu. Jednotlivé stránky jsou propojeny pomocí tzv. odkazů, pomocí kterých jsme schopni procházet mezi různými stránkami. Webová stránka se můţe skládat z jedné anebo z řady stránek vzájemně propojených odkazy. Abychom mohli tuto moderního technologii pouţívat, stačí nám k tomu pouze přístup k internetovému připojení a webový prohlíţeč. Na webové stránky je moţné podívat se odkudkoliv a kdykoliv. Mezi nejpouţívanější prohlíţeče patří Internet Explorer od společnosti Microsoft, Google Chrome od Googlu, Mozilla Firefox od Mozilly, Safari od Applu, Opera od Opera software. Přistupovat na webové stránky můţeme nejen z osobního počítače (PC), ale i z dalších zařízení. Mobilní zařízení jako chytré telefony a tablety zaţívají veliký rozvoj a samozřejmě obsahují webový prohlíţeč k prohlíţení webových stránek. Novinkou na našem trhu jsou tzv. chytré televize, které také umoţňují přistupovat k webovým stránkám. Mnoţností pouţití webových stránek je velice mnoho, umoţňují nám nakupovat, vyhledávat informace, komunikovat s ostatními lidmi, sdílet fotografie, přistupovat k bankovnímu účtu, sledovat video obsah, hrát online hry atd. Webové stránky lze velice snadno a rychle aktualizovat, tak aby jejich obsah byl stále aktuální. V dnešní době zatím nemají přístup k internetu všichni lidé, zejména obyvatelé malých vesnic. Většina lidí ze starší generace sluţby internetu nechce nebo neumí vyuţívat. Pro ně zůstávají hlavním zdrojem informací sdělovací prostředky (televize, rozhlas, tisk). Avšak i u těchto tradičních médií dochází k propojení s internetem a se sluţbami webových stránek. Například noviny mají vlastní stránky, televize nabízejí jejich online sledování a časopisy jsou přihlášeny na Facebooku. Informace je dobré vţdy filtrovat a být obezřetní při jejich pouţití, toto platí i o informacích na webu. Zavádějících a lţivých informací je na webových stránkách velké mnoţství, protoţe publikovat na web můţe „kdokoliv“. Doporučuje se pouţívat více zdrojů a ověřovat je.[6, str.27-28]

1

Viz http://www.internetworldstats.com/stats.htm

9

1.1 Historie webových stránek Počátek webových stránek, byl ve chvíli rozšíření internetu mezi širokou veřejnost, to je počátkem 90. let minulého století. Dříve byl internet vyuţíván převáţně ve vojenství a na akademické půdě. Aplikace si psali programátoři sami pro sebe, takţe pro běţného uţivatele byly obtíţně pouţitelné. Nejvýznamnější okamţik pro webové stránky byl v roce 1990, kdy došlo k vytvoření sluţby WWW (World Wide Web). Tato sluţba byla vytvořena v Centru jaderného výzkumu CERN v Ţenevě a stáli za ní Tim Berners-Lee a Robert Cailliau. Původně mělo WWW slouţit pouze k propojení vědecké sítě v CERNu. Myšlenkou bylo zpřístupnit vědecké práce všem pracovníkům CERN. Sluţba WWW funguje na principu hypertextu a díky internetu nám, umoţňuje přístup a sdílení dokumentů uloţených na počítačových serverech.[2, str.7] Dále Tim Berners-Lee vytvořil v roce 1991 jazyk ve kterém je moţno tvořit webové dokumenty, tento jazyk nazval HTML (HyperText Markup Language). Pomocí tohoto jazyka můţeme dnes vytvářet webové stránky, upravovat je a také s nimi různě manipulovat. Aby bylo umoţněno webové stránky dále šířit a sdílet jejich obsah, Tim Berners-Lee k jazyku HTML vyvinul ještě protokol http, který slouţí pro přenos dokumentů napsaných v tomto jazyce. První webový prohlíţeč nazvaný WorldWideWeb neměl grafické rozhraní a napsal ho opět Tim Berners-Lee. Ke spuštění prvního webového serveru došlo na konci roku 1990, URL tohoto serveru byla http://info.cern.ch. V roce 1993 představil Marc Andreesen a Eric Bina první webový prohlíţeč s grafickým rozhraním, jmenoval se Mosaic. Rozšířil se velmi rychle mezi uţivatele internetu a dočkal se velkého úspěchu. Hlavním důvodem úspěchu byla volná dostupnost na všech tehdejších platformách osobních počítačů, tzn. IBM PC a Macintosh. [16] Do roku 1994 bylo vytváření stránek problematické, protoţe neexistovaly ţádné standardizované postupy a metody, kaţdý v podstatě mohl pouţít vlastní verzi HTML. Z tohoto důvodu se Tim Berners-Lee rozhodl v roce 1994 zaloţit konsorcium, které se zabývá vývojem internetových standardů. Toto konsorcium nazval (W3C), World Wide Web Consortium.[2, str.9]

10

1.2 Základní pojmy 1. Webová stránka: Jedná se o dokument, který je umístěn na internetu pomocí sluţby World Wide Web. Obsahuje informace v textové a multimediální podobě (video, audio, obrázky). Webovou stránku vyuţívají různé skupiny uţivatelů (jednotlivci, firmy, organizace atd.).[6, str.35-36] 2. Hypertext: Tato technologie propojuje obsah webových stránek pomocí tzv. odkazů (hyperlinks). Proto je struktura textu na webových stránkách nelineární. Neexistuje ţádný hlavní text, kterému by byly ostatní texty podřízeny, podobně jako je tomu u tištěné stránky. Pouze čtenáři pracují s odkazy a určují tak jejich hierarchii. Obvykle existuje tzv. hlavní stránka (často nazvaná index.html, ze které vedou odkazy k dalším stránkám nebo skupinám stránek. Hierarchie webových stránek je obvykle stromová. [6, str.36] 3. URL (Uniform Resource Locator): Kaţdý dokument je adresován pomocí URL, překládá se jako jednotné určení zdroje, jedná se o předpis pro psaní adresy webové stránky. Tato adresa začíná uvedením internetového protokolu, webové stránky jsou šířeny přes protokol http. Následuje adresa serveru začínající nejčastěji zkratkou www, která je nazývána doménou třetí úrovně. Doménu druhé úrovně je nutné zaregistrovat a jedná se o název webových stránek, např. seznam. Třetí doménová úroveň je nazývána doménou nejvyššího řádu a její podoba je přesně stanovena organizací IANA. Do této doménové úrovně patří například cz, com, net, org atd. Na konci URL můţe být odkaz přesně na konkrétní stránku.[22] 4. Server: Specializovaný počítač, který poskytuje určité sluţby dalším k němu připojeným počítačům, např. na webový server jsou umisťovány stránky, které server na vyţádání posílá jednotlivým k němu připojeným počítačům.[5, str.19] 5. Webhosting (Webový prostor): Jedná se o sluţbu, díky které můţeme své stránky zpřístupnit na internetu, aniţ by bylo nutné vlastnit webový server. Poskytovatel webhostingu nám pronajme místo pro naše webové stránky.[9] 6. W3C: Hlavním úkolem organizace W3C je sjednotit jednotlivé standardy pro tvorbu webových stránek a následně se stará o jejich další rozvoj. Jazyk HTML spadá pod správu W3C, které pracuje na jeho vývoji a zajišťuje vydávání nových verzí. Dalším posláním organizace W3C je šířit osvětu o webu jako takovém, například jde o podporu diskuzí o webu nebo pořádání seminářů. Samotné konsorcium vytvořilo některé uţitečné nástroje, které usnadňují práci vývojářům 11

webových stránek. Mezi nejpouţívanější nástroje patří validátor jazyka HTML a CSS (kaskádových stylů). Můţeme říci, ţe díky W3C mají vývojáři webových stránek usnadněnou práci a uţivatelé větší komfort.[14]

1.3 Postup tvorby webových stránek Na počátku tvorby webové stránky je třeba určit její typ např. E-shop, blog, zpravodajský web. Dále jsou stanoveny cíle, jaké má stránka splňovat. Poté se vytvoří její grafický návrh pomocí specializovaných programů. Kdyţ návrh projde schválením, začne samotná tvorba stránek, definují se nástroje a postupy, kterými bude stránka vytvořena. Specifickou vlastností je, ţe daná stránka se můţe uţivatelům zobrazovat rozdílně, a proto dochází k průběţnému testovaní tak, aby se stránky zobrazovaly s co nejmenšími rozdíly. Tato vlastnost je ovlivněna typem a verzí pouţívaného webového prohlíţeče a jeho individuálního nastavením. Záleţí také, na jakém zařízení jsou stránky prohlíţeny, proto je dnes tvořena mobilní verze některých webových stránek, protoţe rozlišení displeje chytrého telefonu je obvykle menší neţ běţného monitoru.[2, str.20] Webdesigner je schopen poskytnout uţivatelům shodné informace, ale vzhled bohuţel nebude nikdy stoprocentně pro všechny uţivatele stejný. Stránky je potřeba vytvářet uţivatelsky přívětivé a s aktuálním obsahem. Konkurence na internetu je veliká a nesoupeříme pouze s jednou firmou z našeho okolí. Po dokončení tvorby webové stránky se zaregistruje doména, coţ je jednoznačné jméno serveru připojeného k internetu např. www.seznam.cz. Po registraci domény můţeme umístit stránky na internet. Můţeme pouţít vlastní webový server, ale většinou se vyuţívá sluţeb tzv. Webhostingu, který nám umoţní pronajmout si prostor pro naše stránky na cizím serveru. Existuje několik variant Webhostingu, které se cenově velmi liší, najdeme hostingy poskytované zdarma, ale i velmi drahé varianty. Základním parametrem, který sledujeme, je velikost pronajímaného prostoru. Velikost můţe být od 10 MB do několika gigabajtů, záleţí na nás, kolik místa pro naše stránky potřebujeme. Soubory, jako jsou obrázky, fotografie, videa, hudba vyţadují obvykle nejvíce prostoru. Důleţitým parametrem je podpora skriptovacích jazyků a databází, díky kterým budou naše stránky dynamické. Většina webhostingů nabízí podporu skriptovacích jazyků (např. PHP) a databáze. Webové stránky se nahrávají na webový server pomocí protokolu FTP, který umoţňuje stejnou manipulaci se soubory jako na pevném disku.[23]

12

Pokud nastane nějaký problém, lze obvykle kontaktovat zákaznickou podporu 24 hodin 7 dní v týdnu. Podstatným nástrojem je tzv. webová administrace, pomocí které lze měnit parametry našeho webhostingu, např. hesla, databáze atd. Obezřetně bychom měli sledovat parametr traffic (přenos dat), udávající objem dat, která jsou uţivatelům poskytnuta za dané období. Aby nedocházelo k omezování uţivatelů, pouţívá se tzv. neomezený traffic, jedná se o neomezený přenos dat mezi Vaší doménou a okolím. V praxi však platí, ţe neomezený traffic je jen do určité hranice, která je určena moţnostmi hostingu. Zajímavým údajem je dostupnost webhostingu. V praxi nelze očekávat 100% dostupnost, nejvyšší moţná je 99,99%. Například při 99% dostupnosti je 1 stránka ze 100 nezobrazena a to není kvalitní. Posledním parametrem je zálohování. Důleţitá je pravidelnost a přístupnost zálohy několik týdnů zpět.[23]

13

2 Zásady tvorby webových stránek Hlavním úkolem webdesignera je navrhnout a vytvořit kvalitní a přístupné stránky pro uţivatele. Základními poţadavky přístupného webu jsou:  Informace musí být dostupné, srozumitelné a čitelné.  Odkazy jsou lehce rozlišitelné a kvalitně popsané.  Webové stránky jsou snadno ovladatelné.  Zdrojový kód je kvalitně strukturován Pravidla pro tvorbu přístupného webu jsou vymezeny v novele zákona č. 365/2000 Sb., o informačních systémech veřejné správy, provedenou zákonem č. 81/2006 Sb. V roce 2008 byla vydána vyhláška č. 64/2008 Sb., o formě uveřejňování informací souvisejících s výkonem veřejné správy prostřednictvím webových stránek pro osoby se zdravotním postiţením, která obsahuje platná a závazná pravidla pro webové stránky veřejné správy. Výslednou podobu pravidel ještě ovlivnilo mezinárodní připomínkové řízení, které zaštiťovalo Ministerstvo vnitra ČR. Pravidla jsou zaměřena hlavně na uţivatele s určitým handicapem (barvoslepost, nevidomost, dyslexie, poruchy učení), ale také na uţivatele, kteří pouţívají moderní zařízení (chytré telefony, tablety). Zásady přístupnosti jsou vymezeny v následujících 33 bodech a 6 kapitolách. Pravidla jsou rozdělena na povinná a podmíněně povinná.[42] A. Dostupnost a čitelnost obsahu webových stránek. 1. Někteří uţivatelé kvůli svému zařízení nebo dokonce handicapu, nedokáţí interpretovat obrázky. Z tohoto důvodu je u všech obrázků, které mají významové sdělení uveden také textový popisek. Popisek se vkládá do tagu , pomocí atributu alt. Povinné pravidlo. 2. Pokud webová stránka obsahuje doplňky jako např. Javascript, Flash atd. musí poskytovat veškeré informace i v případě, ţe uţivatel tyto doplňky nechce nebo nemůţe pouţívat. Dále je webová stránka plně ovladatelná, kaţdý odkaz funguje i bez těchto doplňků. Povinné pravidlo. 3. Multimediální obsah (video, audio), který není doplňující informací k existujícímu textu, musí být podobně jako obrázek doplněn o textový popis. Tento popis umoţní uţivatelům dostatečně se seznámit s danými informacemi. Podmíněně povinné pravidlo.

14

4. Při pouţívaní vizuálních aspektů (kapitálky, tučný a barevný text), které opět vyjadřují důleţitou informaci, musí být k dispozici alternativní vyjádření v podobě běţného textu. Povinné pravidlo. 5. Jestliţe vyjadřujeme informace pomocí barev, jejich význam a funkcionalita je známá i bez barevného rozlišení. Například odkazy mají jinou barvu neţ ostatní text, ale také jsou zároveň podrţeny. Díky tomu jsou uţivatelé s handicapem schopni rozlišit odkazy od okolního textu. Povinné pravidlo. 6. Pozadí a popředí textu musí být vůči sobě kontrastní, aby uţivatelé s poškozením zraku dokázali rozlišit text. Také samotný text musí být kontrastní. Existují různé nástroje, které posoudí, zda je kontrast dostatečný, např. Analyzér kontrastu barev dostupný na http://www.pravidla-pristupnosti.cz/nastroje/kontrast.php. Povinné pravidlo. 7. Uţivatelům je umoţněno zvětšit písmo minimálně na 200 % a zmenšit na 50 % původní velikosti. Při tomto zvětšení/zmenšení písma nedochází ke ztrátě obsahu nebo funkcionality webových stránek. Povinné pravidlo. B. Pouze uživatel řídí prácí s webovou stránkou 8. Zdrojový kód ani obsah webové stránky nesmí být navrţen pouze pro určitá výstupní (monitor, reproduktory) a vstupní zařízení (myš, klávesnice). Povinné pravidlo. 9. Uţivatel si sám zvolí programové vybavení (operační systém, webový prohlíţeč) na zobrazování webových stránek a nesmí být omezen zdrojovým kódem ani obsahem. Některé stránky je obtíţné optimalizovat na veškeré webové prohlíţeče a operační systémy, proto je nutné uvést, jaké programové vybavení uţivatel potřebuje k zobrazení stránek. Podmíněně povinné pravidlo. 10. Obsah webové stránky se mění pouze v případě, kdy k tomu dal uţivatel jasný impulz, v podobě kliknutí na odkaz nebo odeslání formuláře. Povinné pravidlo 11. Nová okna ve webovém prohlíţeči se neotevírají automaticky. K otevření nového okna dochází

pouze

po

aktivování

odkazu

nebo

odeslání

formuláře

uţivatelem.

V odůvodněných případech (např. načtení doplňující informace), musí být uţivatel předem upozorněn na otevření nového okna. Povinné pravidlo 12. Pokud jsou na webových stránkách animace nebo dynamicky se měnící prvky, je nutné, aby se neměnily rychleji neţ třikrát za sekundu. Doporučuje se nepouţívat rychlé změny barevnosti, jasu a velikosti. Povinné pravidlo. 13. Webové stránky, které obsahují zvuky znějící déle neţ tři sekundy, musí dovolit uţivatelům tento zvuk vypnout nebo změnit jeho hlasitost. Povinné pravidlo 15

14. Jestliţe tvůrci vymezí časový limit na pouţití webové stránky, je jejich povinností o tom informovat uţivatele a sdělit mu, kolik má času k dispozici. Zároveň musí být umoţněno tento limit zrušit. Podmíněně povinné pravidlo. C. Přehledné a srozumitelné informace. 15. Informace na webových stránkách musí být co nejsrozumitelnější pro uţivatele. Pouţívá se jednoduchý a jasný jazyk. Nepouţívají se odborné výrazy a cizí slova, pokud nejsou v dokumentu vysvětlena. Vyhýbáme se dlouhým souvětím. Výjimkou jsou webové stránky určené výhradně pro odborníky v oboru. Podmíněně povinné pravidlo. 16. Rozsáhlé texty musí být rozděleny do menších celků, pomocí odstavců a nadpisů. Povinné pravidlo. 17. Webové stránky velkého rozsahu musí obsahovat v úvodu kaţdé stránky odkazy pro přechod na určité části obsahu. Jde o odkazy typu „Přejít na obsah“ a „Přejít na navigaci“. U stránek malého rozsahu je toto pravidlo nepovinné. Podmíněně povinné pravidlo. D. Pochopitelné ovládání webových stránek 18. Navigace je součástí kaţdé webové stránky, pomocí ní se uţivatelé orientují na stránkách. Musí obsahovat stručné a výstiţné odkazy, uţivatel musí jasně poznat, kam odkazy směřují. Umístění navigace je stabilní a nesmí se prolínat s obsahem stránek. Doporučuje se odkazy v navigaci psát pomocí nadpisů

. Povinné pravidlo. 19. Webové stránky jsou hierarchicky uspořádány do tzv. stromové struktury. Z tohoto důvodu musí tvůrce webu, pomocí odkazů, umoţnit uţivateli snadnou orientaci na stránkách a poskytnout mu moţnost kdykoliv se vrátit na titulní stránku nebo o stránku v hierarchii vyšší. Povinné pravidlo. 20. Rozsáhlé webové stránky musí obsahovat moţnost vyhledávání obsahu nebo odkaz na mapu webových stránek, která se skládá ze všech odkazů na stránky daného webu. Vyhledávací formulář nebo odkaz na mapu musí být umístěn na kaţdé stránce. Podmíněně povinné pravidlo. 21. Samotný název webové stránky musí vystihovat její podstatu. Jedná se o nejdůleţitější orientační prvek, který charakterizuje obsah stránky. Název se skládá z názvu celého webu a z názvu jednotlivých stránek, který jasně popisuje jejich obsah. Povinné pravidlo. 22. Veškeré

formulářové

prvky

(např.

tagy


type="text">,


type="radio">, atd.) musí obsahovat popisek, který jednoznačně vystihuje co má

uţivatel do formuláře zadat. Povinné pravidlo.

16

23. Jestliţe uţivatel zadá údaj do formuláře chybně, musí být informován o tom, kde udělal chybu, jak ji lze napravit a jak odeslat formulář znovu. Tato informace je zobrazena srozumitelně a co nejblíţe začátku stránky, nebo u chybně zadaných polí. Doporučuje se doplnit informaci, o důvod proč chyba vznikla a jak ji lze odstranit. Podmíněně povinné pravidlo. 24. Název odkazu musí jasně a výstiţně uţivatele upozornit, kam vede a co se nachází na cílové stránce. V případě ţe odkaz směřuje na soubor typu PDF, DOC atd. Musí být v názvu odkazu jasně uveden cílový soubor a jeho velikost. Povinné pravidlo. 25. Při pouţití tzv. rámů tag , pomoci kterých lze definovat strukturu stránky, je nutné pouţít pro kaţdý rám stručné a srozumitelné pojmenování. Název charakterizuje obsah v daném rámu a zapisuje se do atributu name. Toto pravidlo je povinné, ale dnes je jiţ zastaralé. V dnešní době jsou rámy nahrazovány jazykem CSS. Povinné pravidlo. E. Strukturovaný a technicky způsobilý zdrojový kód 26. Jazyk HTML obsahuje několik sémantických tagů, které určují, jaký obsah se v nich nachází (např. odstavec, citace, hlavička, patička). Výstupní zařízení zpracovávají takto označený obsah a poskytují ho uţivatelům. Proto je nutné tyto tagy vţdy pouţít pro označení obsahu, který odpovídá sémantickému významu tagu. Povinné pravidlo. 27. Párové html elementy musejí být označeny počáteční a koncovou značkou. Dále musejí být elementy správně zanořeny a nesmí docházet k jejich kříţení. Povinné pravidlo. 28. Jazyk, ve kterém jsou webové stránky napsány, se uvádí do atributu lang v tagu . Poté nebudou mít výstupní zařízení problém se správným zobrazením obsahu. Povinné pravidlo. 29. Nadpisy na webových stránkách jsou vţdy ve zdrojovém kódu zapisovány mezi tagy

aţ

. Seznamy číslované a nečíslované (s odráţkami) jsou zapisovány vţdy

mezi tagy

číslovaný a
nečíslovaný. Poloţky v seznamech se zapisují pomocí tagu
• . Povinné pravidlo. 30. Tabulky, které slouţí k prezentaci informací, musí obsahovat záhlaví řádků nebo sloupců. Záhlaví zapíšeme pomocí tagu , díky kterému výstupní zařízení u řádku nebo sloupce zobrazí popis v záhlaví. Povinné pravidlo. 31. Výstupní zařízení zobrazují tabulky po řádcích a poté řádek po buňkách z leva doprava. S tímto faktem musí tvůrce webové stránky počítat a vţdy tabulky podle toho tvořit. Dále je nutné, aby obsah veškerých tabulek byl srozumitelný a smysluplný. Povinné pravidlo.
  
  17
  
  F. Přístupnost webových stránek a prohlášení. 32. Na webových stránkách musí být umístěno prohlášení, ţe je stránka napsána v souladu s touto vyhláškou. Popřípadě lze umístit na stránky odkaz na toto prohlášení. Povinné pravidlo. 33. Povinně podmíněná pravidla 3, 9, 14, 15, 17, 20 a 23 můţe orgán veřejné správy na základě dané podmínky neuplatnit. Pokud tak učiní, musí být v prohlášení o přístupnosti jasně uvedeno odůvodnění, ze kterého bude vyplývat, zda se na něj podmínka vztahuje či nevztahuje, záleţí na znění podmínky.
  
  2.1 Blind Friendly Web: Jde o českou metodiku pro tvorbu přístupného webu, autorem je Radek Pavlíček. Přístupnost se zde řeší z pohledu uţivatelů se zrakovým postiţením. V roce 2000 byla uvedena první verze pod organizací SONS (Sjednocená organizace nevidomých a slabozrakých). Pravidla jsou rozdělena do 3 skupin, podle priority (Pravidla s nejvyšší prioritou, Pravidla se střední prioritou a Pravidla s nejniţší prioritou). Pravidla jsou velice podobná těm v zákoně 81/2006 Sb. (vyhlášce č. 64/2008 Sb. ) a ve WCAG 2.0.[39]
  
  2.2 WCAG 2.0 (Web Content Accessibility Guidelines) Jedná se o první pravidla zabývající se přístupností webu. Byla vytvořena skupinou WAI (Web Accessibility Initiative) spadající pod W3C (World wide web consortium). Dnes je platná verze WCAG 2.0, kterou W3C doporučilo 11. 12. 2008. Hlavní rozdílem oproti předešlé verzi je, ţe WCAG 2.0, pojímá webové technologie mnohem více do šířky. Snaţí se ohlídat v rámci přístupnosti všechny moţné aspekty, se kterými se na internetu můţeme v dnešní době setkat. WCAG 2.0 se dělí do 4 základních zásad a v rámci nich jsou definována pravidla, na která navazují tzv. „kontrolní kritéria“, pomoci kterých můţeme obsah webových stránek testovat a ověřovat, zda je v soulad s danými kritérii. Kritéria jsou rozdělena do třech úrovní A (nejniţší), AA, AAA (nejvyšší) s tím, ţe kaţdé pravidlo nemusí obsahovat všechny stupně kritérií.[45]
  
  18
  
  Zásada č. 1: Vnímatelnost – Informace a uţivatelské rozhraní webové stránky musí být uţivatelům prezentovány tak, aby jej byli schopni vnímat. Pravidlo 1.1 Textové alternativy: Veškerý netextový obsah musí obsahovat textovou alternativu, kterou lze převést do jiných formátů například zjednodušený jazyk, fonetický přepis a bodové písmo. Pravidlo 1.2 Multimediální prvky závisející na čase: Multimediální prvky musí být opatřeny alternativami. Pravidlo 1.3 Přizpůsobitelnost: Obsah webové stránky lze prezentovat více způsoby, aniţ by přitom došlo ke ztrátě informací či narušení struktury. Pravidlo 1.4 Rozlišitelnost: Pro uţivatele musí být rozlišen video a audio obsah a popředí se musí lišit od pozadí. Zásada č. 2: Ovladatelnost: Veškeré prvky uţivatelského rozhraní a navigace musí být ovladatelné. Pravidlo 2.1 Přístupnost z klávesnice: Všechny funkce musí být dostupné z klávesnice. Pravidlo 2.2 Dostatek času: Uţivatel musí mít dostatek času k přečtení a k práci s obsahem. Pravidlo 2.3 Záchvaty: Musí být vynechány prvky, které mohou vyvolat záchvat. Pravidlo 2.4 Snadná navigace: Pro uţivatele musí být snadné najít konkrétní obsah a určení aktuální pozice. Zásada č. 3: Srozumitelnost: Pouţívání uţivatelského rozhraní a informace na webové stránce musí být srozumitelné. Pravidlo 3.1 Čitelnost: Textový obsah musí být čitelný a srozumitelný. Pravidlo 3.2 Intuitivnost: Vzhled a ovládání vašich webových stránek musí být intuitivní. Pravidlo 3.3 Pomoc při zadávání: Je nutné pomoci uţivatelům aby se vyvarovali chybám nebo chyby opravit. Zásada č. 4: Robustnost: Dostatečně robustní obsah webových stránek zajistí, ţe můţe být spolehlivě interpretován širokou škálou přístupových zařízení včetně asistivních technologií. Pravidlo 4.1 Kompatibilita: Musí být snaha o vytvoření stránek s maximální kompatibilitou s přístupovými zařízeními včetně asistivních technologií.
  
  19
  
  3 Technologie Webových technologií existuje celá řada, v této bakalářské práci uvádím pouze typické zástupce a představuji jejich základní syntaxi.
  
  3.1 HTML HTML je značkovací jazyk, coţ znamená, ţe zdrojový kód obsahuje části textu vytvořené samotným uţivatelem, tak i části s přesnými instrukcemi pro jeho zpracování. Kód je uloţen v ASCII souboru. Jeho úpravy lze provádět jak v jednoduchých editorech typu Poznámkový blok, tak i ve specializovaných aplikacích např. Dreamweaver. Ke spuštění kódu je potřeba webový prohlíţeč. Instrukce o tom, jakou bude mít text formu, jsou zapisovány do tzv. tagů.[2, str.7] Značkovací jazyk pro hypertext HTML je stavební kámen pro veškeré dnešní webové stránky. Jazyk HTML nám nabízí několik základních operací, například lze změnit vzhled a velikost daného textu, je nám umoţněno vkládat obrázky a animace na webové stránky. V případě, ţe chceme od uţivatelů získat nějaké informace, HTML nám umoţňuje vytvářet formuláře. V jazyce HTML je moţno vytvářet tabulky, které mohou zajistit větší kontrolu nad obsahem webových stránek.[4, str.17]
  
  3.1.1 Verze jazyka HTML Jazyk HTML existuje v několika verzích. První verze HTML je označována jako HTML 0.9 a byla vytvořena v roce 1991.[2,str.7] Postupně v roce 1992 a 1993 následovaly další verze HTML 1.0 a HTML 1.2. Všechny tyto první verze nepodporují grafické rozhraní, jeho podpora přišla aţ v roce 1995 s verzí HTML 2.0. Do této verze byly také přidány interaktivní formuláře. Verze HTML 3.0 nebyla přijata jako standard a to z důvodu veliké sloţitosti. V roce 1997 vyšla verze 3.2, která byla vytvořena komunitou W3C. Do specifikace jazyka byly přidány prvky pro ovlivňování stylu, vzhledu, zarovnání textu a tabulky. Přelomovou verzí byla HTML 4.0, která byla vydána v roce 1997. Tato verze se snaţila, aby prvky vyznačovaly sémantiku obsahu daného dokumentu a také zde došlo k podpoře kaskádových stylů. Dále byly přidány rámce a nové prvky pro prácí s tabulkami a formuláři. V roce 1999 byla vydána verze 4.01. Údajně se mělo jednat o poslední verzi jazyka HTML,
  
  20
  
  která pouze opraví některé chyby verze předchozí. Následovníkem HTML se mělo stát XHTML.[24]
  
  3.1.2 HTML5 Vývoj okolo XHTML nebyl pro tvůrce webových prohlíţečů uspokojivý. V roce 2004 skupina WHATWG, kterou zaloţili právě tvůrci webových prohlíţečů, například z Opera Software, začala pracovat na aktuální verzi HTML5. Této skupině nejde o revoluci na webu, ale o rozvoj moţností jazyka HTML. Samotné W3C se začalo zajímat o HTML5 v roce 2007. K propojení obou skupin došlo v roce 2009. W3C se snaţí vyvinout co moţná nejednodušší a nejstriktnější standard. WHATWG vytváří HTML5 ze širšího úhlu, ale i přesto se snaţí, aby specifikace prošla schválením W3C. Důleţité je upozornit, ţe firma Microsoft, vyvíjející populární webový prohlíţeč Internet Explorer, podporuje pouze standard W3C. Ostatní webové prohlíţeče podporují standardy WHATWG i W3C. [2, str.8-9] HTML5 nerozšiřuje pouze jazyk HTML, ale snaţí se podporovat nové moderní technologie. Jako příklad lze uvést některé technologie, které se jiţ dnes v praxi pouţívají. Je to například Web Storage, který zavádí trvalou paměť v internetovém prohlíţeči, díky které mohou webové aplikace fungovat v offline reţimu. Další zajímavou technologií je Drag and Drop, pomocí které lze nahrát soubor do webové aplikace pouhým přetaţením myši. Tyto technologie jsou zahrnuty do tzv. „rodiny“ HTML5. Specifikace samotného „jádra“ HTML5 zahrnuje několik zásadních novinek oproti verzi 4.01.[2, str.12] Velký pokrok oproti předešlé verzi, je zavedení elementů