Masarykova universita

Fakulta informatiky

Webové standardy a trendy moderního webdesignu v souvislosti s vývojem Content Management Systémů

v prostředí DMT

Bakalářská práce

vypracoval Jiří Janák

vedoucí

Mgr. Filip Procházka

Brno, jaro 2004

2

Čestné prohlášení

Prohlašuji, že tato práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj. ........................................

Poděkování Chtěl bych poděkovat Filipu Procházkovi, který vedl tuto práci, za cenné rady, přívětivý přístup a trpělivost.

3

Shrnutí „Pokud se web obtížně používá, lidé z něj odejdou. Pokud úvodní stránka neobsahuje jasné informace, o čem web je a co na něm jde dělat, lidé odejdou. Pokud uživatel na webu zabloudí, odejde. Jestliže se informace na webu uživateli obtížně čtou, či neodpovídají na jeho otázky, odejde… Po ruce je plno dalších webů. Odchod je základní obrana uživatele před potížemi.“ (Jakob Nielsen, Alertbox: Usability 101) V současné době je stále více organizací, které potřebují o své činnosti komunikovat pomocí webu. Od statických prezentací se pomalu přechází k dynamickým interaktivním stránkám, které si uživatelé sami spravují pomocí Content Management Systémů. Tento posun však vyžaduje dodržování jisté kázně a umírněnosti při návrhu stránek. Práce má za úkol zmapovat webové standardy, které je vhodné při tomto přístupu dodržovat, a také identifikovat problémové oblasti, kterým je vhodné se při návrhu vyhnout. V této práci se nejprve stručně seznámíme se současnými nejčastějšími postupy, metodami a technologiemi při tvorbě webových prezentací a s jejich výhodami a nevýhodami. Poté si povíme něco o množině zásad, souhrnně označovaných jako „trendy moderního webdesignu“, jejichž dodržování by mělo vést k eliminaci rizikových faktorů spojených s tvorbou pro natolik heterogenní prostředí, jako je internet. Povíme si o webových standardech W3C, o použitelnosti a přístupnosti, o optimalizaci pro vyhledávače a o důvodech a výhodách dodržování těchto trendů. Nakonec si demonstrujeme problémy spojené s prosazováním těchto tendencí na jednom konkrétním příkladě.

Klíčová slova

Webové standardy, použitelnost, přístupnost, optimalizace pro vyhledávače (SEO), eTrium UIR, Content Management Systém.

4

Obsah

OBSAH .......................................................................................................... 4

1 ÚVOD ...................................................................................................... 6

2 TRADIČNÍ WEBOVÉ PREZENTACE............................................................ 8 2.1 NEJČASTĚJŠÍ CHYBY PŘI TVORBĚ WWW STRÁNEK................................................ 8

2.1.1 Webová stránka není list papíru...................................................... 8 2.1.2 Formátování vzhledu stránky smíchané se značením obsahu.............. 8 2.1.3 Chybný (nevalidní) kód ................................................................. 8

2.2 ZPŮSOBY FORMÁTOVÁNÍ ROZVRŽENÍ STRÁNKY .................................................. 9 2.2.1 Tabulkový layout .......................................................................... 9 2.2.2 Rámcový layout ..........................................................................10

3 MODERNÍ WEBOVÉ PREZENTACE .......................................................... 11 3.1 WEBOVÉ STANDARDY..............................................................................11

3.1.1 Sémanticky přesné značkování ......................................................12 3.1.2 Validní kód .................................................................................13 3.1.3 Oddělení obsahu a formy dokumentu .............................................13

3.2 PŘÍSTUPNOST ......................................................................................14 3.2.1 Jak zajistit alespoň základní přístupnost stránky ..............................15 3.2.2 Jak zkontrolovat, zda je stránka přístupná? .....................................17

3.3 POUŽITELNOST .....................................................................................17 3.3.1 Pět základních bodů použitelnosti...................................................18 3.3.2 Jak zlepšit použitelnost stránek .....................................................18 3.3.3 Testování použitelnosti .................................................................21

3.4 OPTIMALIZACE PRO VYHLEDÁVAČE (SEO) ......................................................22 3.4.1 Optimalizace pro katalogové vyhledávače .......................................22 3.4.2 Optimalizace pro fulltextové vyhledávače........................................22

3.5 STRÁNKY PODLE STANDARDŮ „KROK ZA KROKEM“ .............................................24 3.6 „TEMNÉ“ STRÁNKY TVORBY WEBŮ PODLE STANDARDŮ .........................................25

4 PRŮBĚH REALIZACE PROJEKTU BBS V TECHNOLOGII ETRIUM.............. 26 4.1 ZADÁNÍ .............................................................................................26 4.2 KRÁTCE K REALIZACI CMS NAD TECHNOLOGIÍ ETRIUM........................................27 4.3 SPECIFIKA VÝSTUPU GENEROVANÉHO CMS.....................................................27 4.4 PRVNÍ VERZE DESIGNU PORTÁLU (VÝSTUPU CMS).............................................28

4.4.1 Zjišťování zákazníkovy představy...................................................28 4.4.2 Vytvoření první verze portálu BBS..................................................29

4.5 GRAFICKÝ ŠOK ANEB „A CO FLASH“?...........................................................30 4.5.1 Připomínky k rozvržení plochy .......................................................30 4.5.2 Nejpodstatnější důvody „proč nepoužívat FLASH“? ...........................31 4.5.3 Kdy je FLASH výhodné použít? ......................................................31

4.6 KONFRONTAČNÍ SCHŮZKA.........................................................................32 4.7 GRAFICKÝ ŠOK Č.2 ANEB KRADEŠ, KRADU, KRADEME.. .......................................33

5

4.7.1 Druhá verze portálu „podle grafiků“ ...............................................33 4.8 TITULNÍ STRÁNKA PORTÁLU .......................................................................34 4.9 JAK TO VŠECHNO NAKONEC DOBŘE DOPADLO...................................................35

5 ZÁVĚR................................................................................................... 36

LITERATURA ............................................................................................... 37

PŘÍLOHA A – PŘEHLED AKTUÁLNÍCH WEBOVÝCH STANDARDŮ................... 39

PŘÍLOHA B – MANIFEST DOGMA W4 ........................................................... 40

PŘÍLOHA C – OBSAH CD-ROM ..................................................................... 42

6

1 Úvod Drtivá většina velkých i malých firem dnes poskytuje informace o svých produktech a službách na firemních webových stránkách. Prezentace na webu jsou pro propagaci společností i jednotlivců v současnosti mnohem důležitější než všechny papírové katalogy dohromady, neboť internetová gramotnost roste geometrickou řadou. S ní rostou i nároky na správný design, estetickou stránku, obsah a navigaci v rámci webových prezentací. V konkurenci tedy obstojí pouze ten, kdo uživatele nadchne rychlostí, přehledností a kvalitní strukturou nabízených informací.

O čem je tato publikace? Jednoduše řečeno o trendech moderního webdesignu. Co je to vlastně ten ‘webdesign‘? Toto slovo vzniklo zkrácením slovního spojení „web site design“, což volně přeloženo znamená „návrh webových (internetových) sídel.“ V podstatě se jedná o souhrn několika činností:

• analýza cílů, potřeb a možností webové prezentace, • návrh vzhledu, struktury a navigace webu, • vytvoření grafiky, • označkování a naformátování obsahu (html+css+javascript kód), • naprogramování dynamické části prezentace (sql + skriptování), • a další více či méně významné činnosti.

Ačkoliv je web úžasné informační a marketingové médium, platí pro samotné webové stránky jistá omezení, vyplývající ze samotných principů webu. Mezi faktory, které nikdy nemůžete ovlivnit, patří například:

• fyzické či psychické (zkušenosti s používáním internetu) dispozice uživatele vašich stránek,

• zařízení pro použití stránek (počítač, organizér, telefon, navigační systém automobilu),

• výstupní zařízení (monitor, tiskárna, displej mobilního přístroje, hlasová čtečka, braillovský řádek),

• typ ani verze prohlížeče, • ovládací zařízení (klávesnice, myš, hlasový systém), • rozlišení zobrazovacího zařízení či počet barev na něm nastavených, • podporu nových technologií v prohlížeči (Flash, JavaScript, ActiveX), • spoustu dalších a zdánlivě nepodstatných "drobností".

Cílem každé webové prezentace by však mělo být, aby byla použitelná a přístupná pokud možno vždy a všude.

7

Jinak řečeno: „Internetová prezentace by měla být vytvořena tak, aby byla požitkem pro všechny uživatele internetu. Nejen pro ty zdravé nebo jen pro lidi zkušené s používáním internetu či pouze pro ty se správným počítačovým vybavením, ale skutečně pro každého.“ V prvních dvou třetinách této práce se seznámíme s něčím, co je obecně nazýváno „trendy moderního webu.“ Jedná se o množinu zásad, jejichž dodržování by mělo vést k eliminaci rizikových faktorů spojených s tvorbou pro natolik heterogenní prostředí, jako je internet. Jedná se především o:

• důraz na dodržování webových standardů, • důraz na použitelnost a přístupnost, • důraz na optimalizaci pro vyhledávače.

Cílem každého tvůrce webových stránek by mělo být dodržování těchto trendů. A každý zadavatel by se měl ve svém vlastním zájmu snažit takového tvůrce najít. Třetí část této publikace se zabývá praktickými zkušenostmi při prosazování standardů ve skutečném světě. Nejprve si krátce představíme technologii eTrium, načež bude popsáno, jak byl nad touto technologií stavěn systém správy obsahu (Content Management Systém) pro vzdělávací instituci.

O čem tato publikace není? Rozhodně se nejedná o učebnici jazyka HTML, formátování kaskádovými styly nebo programování dynamických webů. Především v první třetině práce zabývající se „zásadami při kódování“ očekávám u čtenáře alespoň základní povědomí o principech používání těchto technologií. Zdůrazňuji slovo povědomí. Neočekávám dokonalou praktickou znalost těchto jazyků. Jde pouze o to, aby daná osoba chápala, jak jsou „normální www stránky“ vytvořeny. Také se nebude jednat o „kuchařku na návrh webových stránek.“ Budou zde pouze shrnuty nejzákladnější principy, které by měly být při návrhu dodrženy. Druhá část této práce vyžaduje po čtenáři pouze základní zkušenosti s používáním internetu. Jinými slovy: měla by být pochopitelná pro každého, kdo alespoň občas na webu něco hledá nebo na internetu nějak pracuje.

8

2 Tradiční webové prezentace Existuje několik metod, jakými se v současné době tvoří internetové prezentace. Než se však podíváme na „tvorbu podle webových standardů,“ řekněme si napřed něco o současném přístupu k tvorbě webu a častých nešvarech a chybách.

2.1 Nejčastější chyby při tvorbě www stránek

2.1.1 Webová stránka není list papíru

Tradičním nešvarem vývoje internetových prezentací je, že návrháři se na www stránku dívají jako na stránkové médium s pevně danými rozměry (list papíru). Navrhují stránku přesně pixel vedle pixelu, centimetr po centimetru, a berou v úvahu pouze jeden možný prohlížeč a jedno jakési minimální nastavení počítače (rozlišení monitoru, atd.). Faktem ovšem je, že webovou stránku nazýváme kontinuálním médiem (nebo také průběžným) - její šířka je závislá na velikosti okna zobrazovacího zařízení a délka zase na množství publikovaných informací, použitém písmu a jeho velikosti apod. Z toho vyplývá, že návrhář webu nikdy nemůže zajistit přesný vzhled stránky (narozdíl od grafika reklamních tiskovin).

2.1.2 Formátování vzhledu stránky smíchané se značením obsahu

Značky HTML se dají rozlišit na dva základní druhy. Značky značkující obsah (jako „toto je nadpis“, „toto je odstavec“, atp.) a na značky formátující vzhled (jako „tento text vypiš písmem této velikosti a této barvy“, atp.). Pokud definujete vzhled uvnitř kódu každé stránky zvlášť a chcete-li změnit vzhled celé webové prezentace, musíte patřičně upravit každý jednotlivý soubor s kódem. U malých prezentací toto není velký problém, ale představte si web, který má 10000 stránek… Ručně opravovat 10000 stránek, abyste změnili písmo ve všech nadpisech, už je pořádná práce.

2.1.3 Chybný (nevalidní) kód

Díky přílišné toleranci některých prohlížečů vůči chybně napsaným stránkám nejsou tvůrci webů nuceni tolik dodržovat správnou syntaxi jazyka (X)HTML. Pokud programujete program a nedodržíte správnou syntaxi programovacího jazyka, program se vám buďto nespustí vůbec, nebo spustí, ale funguje

9

špatně. A velmi podobné je to s webovými stránkami – pokud jsou naprogramovány s chybami, zařízení a prohlížeče, které nejsou tak tolerantní k chybám, je nedokáží zobrazit buď vůbec, nebo je zobrazí chybně.

2.2 Způsoby formátování rozvržení stránky Rozvržení stránky, nebo též tzv. layout, udržuje její logickou organizaci nejen pro počítač, ale hlavně pro uživatele, který vnímá jednotlivé části stránky jako logické celky (například logo, navigační menu, vlastní obsah, zápatí a další). Každý tento celek by měl mít svou stálou pozici, aby jej mohl uživatel rychle a bez problémů najít očima, kdykoli to potřebuje. Úkolem webdesignéra je co nejlépe prvky na stránce rozmístit. K tomuto rozmístění se používá několik technik:

• tabulkový layout, • rámcový layout, • layout pomocí CSS kaskádových stylů (podle webových standardů,

viz. zbytek této publikace), • kombinace výše uvedených.

2.2.1 Tabulkový layout

Jedná se o způsob formátování vzhledu stránky, který využívá či spíše zneužívá tabulek. Tabulky byly původně navrženy pouze k zobrazování tabulkových dat, záhy se ale přišlo na jiný způsob jejich využití. Tabulka přináší možnost ukládat prvky vedle sebe i pod sebe a diktovat jejich vzájemnou polohu. Mnoho webových stránek je dnes vytvořeno tak, že je nakreslen obrázek toho, jak mají vypadat, ten je pak „rozřezán“ na několik menších obrázků a ty jsou „slepeny“ zpět k sobě uvnitř jedné velké tabulky, jejíž buňky obsahují jednotlivé prvky stránky (např. stručný obsah či odkazy vlevo a vpravo vlastní text stránky). Mezi výhody použití tabulkového layoutu patří například jednoduchost jeho vytvoření (obzvlášť pro začínající tvůrce). Stačí trochu představivosti, zvážit, jak chceme prvky umístit, pomocí některého z mnoha programů vytvořit vhodnou tabulku a máme hotovo. Tabulky jsou vývojově starší než CSS (kaskádové styly), proto by se řádně navržená a napsaná tabulka měla správně zobrazit i na velmi starých prohlížečích. A nakonec - tabulky nám poskytují poměrně široké možnosti, přičemž mnoho z nich nemá zatím v CSS svůj ekvivalent. Mezi zápory je třeba uvést především závislost vzhledu stránky na kódu (problém s úpravou vzhledu celého velkého webu), výrazné zvětšení velikosti souborů a problémy s vykreslováním (v některých prohlížečích se prázdné buňky jednoduše vynechají, a tabulka se především nezobrazí dřív, než se načte veškerý její obsah – a je-li obsahem obrázek o velké velikosti…).

10

2.2.2 Rámcový layout

Jedná se o velmi zastaralý, avšak přesto dodnes používaný způsob tvorby stránek. Jak je zřejmé z nadpisu, využívá se zde rámců (frames). Základem je rámcová struktura, která například definuje, že navigační menu je v zúženém rámu nejčastěji vlevo nebo nahoře a po kliknutí na položku v menu se obsah načte do hlavního rámce. Mezi výhody lze uvést menší velikost přenášených dat (část společná všem stránkám, např. navigace, se nenahrává stále znovu), navigace stojí stále na jednom místě (uživatel k ní nemusí rolovat) a ke změně menu stačí upravit jediný soubor. Faktem ale zůstává přehršle nevýhod a problémů. Uživatelům především vadí, že se obsah rámcové struktury nedá přidat do záložek (oblíbených). Tento problém má dopad i na vyhledávače – ty nedokáží takto vytvořené stránky zaindexovat. Dalším problémem může být tisk – některé prohlížeče neumí nastavit, jaký rámec se vlastně má vytisknout. Dále pak tzv. problém s aktivním rámem – obsah se nevleze na obrazovku, objeví se klasický posuvník, člověk zvyklý používat klávesu „Page Down“ ji zmáčkne a ono nic, stránka se neposune – příčinou je to, že je právě aktivní jiný rám. A jedna praktická nevýhoda z pohledu tvůrce webu: vytvoření a údržba stránek s rámci je výrazně složitější, neboť musíte tvořit verzi pro nerámující klienty (např. pro handheldy, textové prohlížeče, apod.) a musíte zkontrolovat celý web abyste ověřili, že se všechny stránky načítají vždy do správného rámce.

Závěrem

Tyto způsoby rozvržení přesto nemusíme automaticky odsuzovat. Každý webdesignér by měl nejdříve zvážit všechny nevýhody, a pokud zjistí, že pro daný projekt nemají velký význam, může tyto metody bez obav použít. Pro některé webové aplikace může být naopak rámcový nebo tabulkový layout velice výhodný.

11

3 Moderní webové prezentace

Při tvorbě webu je vždy třeba brát v potaz, jaký má účel, jakou funkci a v jakém prostředí ji bude plnit. V této publikaci předpokládám, že chceme tvořit stránky, které mají předávat informace a mají být schopné je předávat všem. Toto stránky vytvořené (prozatím) „tradičním způsobem“ většinou neumožňují. Hlasové čtečky je nedokáží správně interpretovat, nevejdou se na displeje s malým rozlišením, atd. Způsobem, jak dosáhnout tohoto cíle („stránky pro všechny“), je tvořit prezentace podle tzv. „trendů moderního webu.“ Jedná se o množinu zásad, jejichž dodržování by mělo vést k eliminaci rizikových faktorů spojených s tvorbou pro natolik heterogenní prostředí, jako je internet. Jedná se především o:

• důraz na dodržování webových standardů • důraz na použitelnost a přístupnost • důraz na optimalizaci pro vyhledávače

3.1 Webové standardy „Webové standardy byly vytvořeny jako společný opěrný bod … jako základ webu takový, že prohlížeče i jiné programy rozumí společné základní slovní zásobě.“ (Eric Mayer) Slovním spojením „webové standardy“ se obvykle označují technické specifikace a pokyny, které vydává konsorcium W3C (The World Wide Web Consortium, http://www.w3c.org). Cílem konsorcia, jehož členy jsou i největší výrobci softwaru na světě, je naplno rozvinout potenciál Webu, a proto vytváří otevřené protokoly a standardy, které podporují jeho rozvoj a interoperabilitu. Ve specifikacích naleznete poučení, že pro stanovení struktury obsahu webových stránek se používá převážně jazyk HTML (hypertextový značkovací jazyk) nebo XHTML (rozšířený hypertextový značkovací jazyk), a dále pak, že podle platných standardů W3C by měly být pro vizuální formátování používány výhradně tzv. kaskádové styly CSS1 a CSS2. Takto je zajištěno oddělení obsahové struktury dokumentu HTML od formátovacích prvků. Samotné webové standardy byly a jsou navrhovány tak, aby:

• přinesly co největší výhody co nejvíce internetovým uživatelům, • zajistily dlouhodobou životnost jakéhokoli webového dokumentu, • zjednodušily kód dokumentu a snížily tak i výrobní náklady,

12

• zajistily, aby internetové prezentace byly přístupné více lidem a více druhům zařízení,

• i přes vývoj prohlížečů a nových zařízení dále fungovaly jak mají. Webové standardy jsou mj. o akceptování webu jako různorodého komunikačního nástroje, ke kterému může přistupovat mnoho druhů uživatelů a mnoho druhů zařízení, a web by jim všem měl být schopen „odpovědět“. K základním znakům webu dodržujícího standardy patří:

• sémanticky přesné značkování, • validní kód, • použití CSS k oddělení obsahu a formy dokumentu.

Pro webdesignéra (návrháře/tvůrce webu) znamená tedy dodržování webových standardů jednak používat dle specifikací standardy jako takové (oddělovat obsah a formu, atp.), ale také používat je správně (psát validní a čitelný kód). Tak budou spokojení návštěvníci stránek, zákazníci i on sám.

3.1.1 Sémanticky přesné značkování

Sémanticky přesné značkování znamená používání značek jazyka (X)HTML pouze přesně k tomu, k čemu jsou určeny. Dobře strukturovaný dokument má sémantický význam pro širokou oblast uživatelských rozhraní (prohlížeče bez podpory kaskádových stylů CSS, textové prohlížeče, handheldy a „chytré mobily“, vyhledávače). Tedy například označím-li text do značek <h1> a </h1>, říkám tím, že je to nadpis nejvyšší úrovně, a nic jiného. Odstavec je odstavec textu, seznam je seznam nějakých údajů, tabulka je tabulka nějakých dat (neslouží k formátování rozvržení stránky), atp. Typickým příkladem „chybného“ značkovaní je následující kód:

<div class=”nadpisPrvniUrovne”>Tomova stránka</div> <div class=”odstavec”>Bla bla bla…</div>

neboť (X)HTML má pro tyto bloky vlastní sémantické značky:

<h1>Tomova stránka</h1> <p>Bla bla bla…</p>

Nejsou-li v prohlížeči kaskádové styly (které slouží k formátování dokumentu) podporovány, zobrazí se správně strukturovaný dokument alespoň základně vizuálně formátovaný (nadpis první úrovně bude velkým písmem, mezi odstavci mezera, atd.). V případě chybného použití značky div (první příklad) budou naopak zobrazeny pouze dva řádky s textem nijak vizuálně formátovaným. Správné sémantické značkování navíc pomáhá i vyhledávačům, které tak lépe rozliší důležité prvky stránky.

13

3.1.2 Validní kód

Validace je proces, při němž validátor porovnává kód vámi zadané stránky s webovými standardy a hlásí případné rozdíly. Pokud je kód bez chyb, zobrazí se certifikační ikonka, která potvrzuje že kód je naprosto v souladu s daným webovým standardem – tedy je validní.

3.1.2.1 Proč psát validní kód? Jednak se vykreslí daleko rychleji a lépe než kód s chybami a jednak prohlížeče začínají více a více vyžadovat dodržování standardů, tedy nutně i psaní validního kódu. Nemluvě o tom, že mnohá zařízení (i prohlížeče) již dnes nevalidní kód nezobrazí vůbec.

3.1.2.2 Jak tvořit validní (X)HTML dokumenty? • na začátku dokumentu uveďte vždy DOCTYPE; • uveďte správné jazykové kódování dokumentu; • uzavírejte všechny značky (X)HTML; • pro případ nejasností v syntaxi (X)HTML mějte po ruce buďto přímo

specifikaci jazyka, nebo nějakou referenční příručku; • ke každému obrázku připojte atribut ALT obsahující jeho textový popis; • vyhněte se různým HTML trikům; • používejte pravidelně validátory – udělejte z validování běžnou součást

vašeho pracovního postupu; • před pokračováním v další práci opravte vždy nejdříve všechny

nalezené chyby.

3.1.2.3 Čím zkontrolovat, zda je dokument validní? • W3C validátorem značkování (X)HTML

http://validator.w3.org/ • WDG HTML validátorem

http://www.htmlhelp.com/tools/validator/ • W3C validátorem CSS

http://jigsaw.w3.org/css-validator/ • CSS validátorem Stylesheets.com

http://www.style-sheets.com/validator.asp • mnoho softwarových produktů má dnes již validátor zabudován přímo

v sobě

3.1.3 Oddělení obsahu a formy dokumentu

Cílem webdesignérů je oprostit HTML kód dokumentu od všech vizuálně formátujících prvků a zanechat jej čistý a sémanticky správný. Toto umožní:

• aby dokumenty byly přístupné více druhům zařízení, • menší velikost souborů a rychlejší stahování (menší velikost kódu), • méně kódu = snazší programování, čitelnost a úpravy,

14

• vytvořit více alternativních kaskádových stylů a umožnit uživatelům vybrat si vzhled dle svých potřeb a přání,

• podporuje-li to prohlížeč uživatele, může si překrýt náš kaskádový styl svým vlastním,

• jednodušší provádění změn – jednou z hlavních předností formátování HTML dokumentů pomocí odděleného CSS stylu je, že pokud chcete učinit jakékoli změny ve vzhledu stránek, stačí upravit pouze tento jeden CSS styl,

• více kontroly nad kódem – například je možné ovlivnit v jakém pořadí budou prvky stránky předány čtečkám obrazovky, nebo mít různé formátovací styly pro různá média, atp.

3.2 Přístupnost Přístupnost (accessibility) = míra, s jakou dokážou s webem pracovat různě omezení uživatelé.

15

Přístupné stránky respektují uživatele. Respektují jeho technické vybavení, zdravotní dispozice, znalosti a vzdělání. Obsah přístupných stránek může stejně dobře vnímat uživatel málo běžného či zastaralého prohlížeče, nevidomý, paraplegik, barvoslepý a dyslektik, a stejně tak zcela zdravý majitel výkonného počítače s nejnovější verzí nejrozšířenějšího prohlížeče. Nepřístupné či nedostatečně přístupné stránky brání některým z výše uvedených skupin uživatelů v přístupu k obsahu. Čtecí zařízení nevidomého je netlumočí správně, barvoslepý na nich přehlédne důležité sdělení, paraplegik nedokáže ovládat jejich navigaci, majitel méně běžného prohlížeče vidí místo obsahu jen nečitelnou změť znaků. Celkem se k obsahu chybně vytvořených stránek nemusí dostat přes 30 % uživatelů a potenciálních zákazníků. Vytvořit přístupné (bezbariérové) stránky není zpravidla o nic nákladnější, než vytvořit stránky přístupné. Přesto se stále mnohé firmy svými špatně přístupnými stránkami zbytečně připravují o zákazníky.

3.2.1 Jak zajistit alespoň základní přístupnost stránky

Jednotlivé metodiky přístupnosti se od sebe často dosti liší, ale přesto existuje několik základních bodů, jejichž dodržení by mělo zajistit alespoň nejzákladnější přístupnost dokumentu:

1. Barvy v dokumentu definujte s ohledem na dostatečný kontrast jasu a odstínu popředí a pozadí.

Například použijete-li žlutý text na bílém pozadí, osoba s poruchou vnímání barev nebo uživatel černobílého displeje tento text neuvidí.

2. Zajistěte, aby všechny informace, které jsou vyjadřovány barvami, byly rovněž dostupné bez barev, například z kontextu nebo pomocí značek.

Toto platí například pro odkazy – mějte je podtržené. Pokud odkaz není podtržený a je od okolního textu odlišen pouze barvou, barvoslepý člověk jej v textu nenajde.

3. Mějte textovou alternativu ke každému netextovému prvku dokumentu. Pro prvky využívající ke svému zobrazení skripty, applety nebo plug-iny poskytněte alternativní obsah v případě, že jsou tyto nepřístupné nebo nepodporované.

Dělejte popisky k obrázkům a animacím, poskytněte titulky k video-sekvencím, souhrny k diagramům, textovou alternativu k menu vytvořeném ve Flashi, atp. Uživatel může používat zařízení nepodporující zobrazování daného prvku a textová alternativa mu umožní i tak použít vaše stránky. Vypnutý JavaScript nesmí zapříčinit nefunkčnost stránky, atp.

16

4. Tvořte přístupné tabulky.

Umožněte čtení tabulky řádku po řádce, doplňte tabulku souhrnem. Toto usnadní orientaci lidem přistupujícím pomocí hlasové čtečky.

5. Používejte přístupné formuláře.

Ke každé položce formuláře připojte výstižný název a popis, nerozlišujte povinné a nepovinné části formuláře pouze barvou, atp.

6. Informace poskytujte raději pomocí značkovacích jazyků než pomocí obrázků.

Například pro matematické vzorce použijte jazyk MathML.

7. Poskytněte uživatelům „horké klávesy“ (access keys).

Usnadníte tak přístup lidem, kteří se po vašich stránkách pohybují jen pomocí klávesnice.

8. Používejte CSS pro definici rozvržení a stylu stránky všude, kde je to možné. Ujistěte se, že dokument je dobře čitelný i bez kaskádového stylu.

Někteří uživatelé přistupují pomocí zařízení, které CSS nepodporují.

9. Používejte v kaskádových stylech relativní jednotky velikosti (%, em, en).

Výhody tohoto přístupu si můžeme demonstrovat například na definování velikosti písma. Zdravý uživatel si nejspíše nechává na svém počítači nastavenu standardní základní velikost písma (cca 12 pixelů), ale člověk s poruchou vidění si může jako standard nastavit 50 pixelů. Definujete-li velikost písma na 80%, vztahuje se to právě k této základní velikosti, čili oba (zdravý i špatně vidící) uživatelé si text vašich stránek přečtou. Nastavíte-li ale velikost písma pevně na dejme tomu 10 pixelů, onen uživatel s poruchou vidění si nepřečte nic. Nespoléhejte na to, že prohlížeč takového uživatele umí měnit velikost písma na požádání.

10. Poskytněte odkaz pro přeskočení navigace rovnou k dokumentu.

Pokud je struktura dokumentu „Nadpis, Navigace, Obsah“, přidejte za „Nadpis“ odkaz, který přeskočí navigaci rovnou k „Obsahu“. Ušetříte tak neustálé předčítání navigace lidem s hlasovými čtečkami, rolování přes navigaci lidem s handheldy nebo chytrými mobily, atp.

11. Poskytněte pomocí metadat v hlavičce klíčové informace o

dokumentu.

Usnadníte tak práci vyhledávačům a tím i hledání informací uživatelům.

17

3.2.2 Jak zkontrolovat, zda je stránka přístupná?

Přístupnost se vždy testuje proti nějaké metodice resp. souboru zásad. A takových souborů existuje celá řada. Například konsorcium W3C v rámci své iniciativy za přístupný web (W3C-WAI) vypracovalo specifikaci Web Content Accesibility Guideliness (WCAG, http://www.w3.org/TR/WAI-WEBCONTENT). Pokud tedy chcete zkontrolovat, zda-li jsou webové stránky přístupné, nabízejí se v zásadě tři základní možnosti, jak přístupnost otestovat. Jsou to:

• ruční kontrola

Principem ruční kontroly je fakt, že zásady přístupnosti kontroluje samotný majitel či výrobce webových stránek tím, že se snaží dle specifikace nasimulovat „problematická místa“ a odhalit tak chyby. Konkrétně se například jedná o kontrolu funkčnosti: při vypnuté grafice, bez povoleného skriptování, v textovém prohlížeči, při ovládání klávesnicí, při různých velikostech okna, bez barev, bez CSS stylů atp.

• automatická kontrola

Použitím některého z validátorů, který prověří danou stránku proti vybraným zásadám některé metodiky.

• validátor Cynthia says (http://www.cynthiasays.com/) • validátor Wave (http://www.wave.webaim.org/) • validátor Bobby (http://bobby.watchfire.com/)

Validátor však kontroluje jen zásady, které automaticky zkontrolovat lze (například přítomnost atributu ALT u obrázků, apod.), většina zásad však automaticky zkontrolovat nejde. Účelem validátorů tedy je spíše napomoci při testování některých opakujících se a snadno přehlédnutelných prvků.

• kontrola odborníka (audit)

Chcete-li naprostou jistotu, že je váš web bez bariér, profesionální (a tedy i placený) audit je jedinou možnou volbou. I na českém trhu existují odborníci, kteří se profesionálními audity přístupnosti zabývají.

• Dobrý web (http://www.dobryweb.cz/) • Vít Dlouhý (http://www.vitdlouhy.cz/audit/) • Sitelab (http://www.sitelab.cz/)

3.3 Použitelnost Použitelnost (usability) = míra a efektivita úsilí nutného k nalezení a získání informací. Použitelnost určuje, jak snadno se na stránkách uživatelé orientují, jak rychle pochopí jejich uspořádání a ovládání a jaký uživatelský zážitek si z nich odnesou.

18

Dobře použitelné stránky jsou přehledné, srozumitelné, snadno ovladatelné. Dobrá použitelnost znamená, že uživatelům se podaří na stránkách udělat to, co chtějí, dokáží to v rozumném čase a bez velkého přemýšlení a dokáží to bez chyb a zásadních zklamání. Na první pohled to není nic podstatného. Nicméně dobré weby se prosadily právě díky své použitelnosti – vezměte si třeba Google. Na špatně použitelných stránkách uživatelé tápou, nedokáží dosáhnout svého cíle a odcházejí z nich zklamáni.

3.3.1 Pět základních bodů použitelnosti

• uživatel rychle pochopí a dokáže používat web, na který přišel poprvé; • uživatel dokáže snadno a rychle dosahovat svých cílů na webu, který

již zná; • uživatel si uspořádání a ovládání webu zapamatuje a znovu rychle

vybaví, když se na něj po určité době vrátí; • uživatel dělá minimum závažných chyb a z každé chyby se rychle

vzpamatuje; • používání webu přináší uživateli příjemný zážitek.

Dobrá použitelnost je spolu s přístupným a kvalitním obsahem základní podmínkou úspěchu webových stránek. „Pokud se web obtížně používá, lidé z něj odejdou. Pokud úvodní stránka neobsahuje jasné informace, o čem web je a co na něm jde dělat, lidé odejdou. Pokud uživatel na webu zabloudí, odejde. Jestliže se informace na webu uživateli obtížně čtou, či neodpovídají na jeho otázky, odejde… Po ruce je plno dalších webů. Odchod je základní obrana uživatele před potížemi.“ (Jakob Nielsen, Alertbox: Usability 101)

3.3.2 Jak zlepšit použitelnost stránek

Pro zaručení základní použitelnosti je zapotřebí, aby návštěvník cítil, že má věci pod kontrolou, že se ve stránkách neztrácí, a aby dokázal rychle poznat, zda právě tady najde to, co hledá. Klíčem k tomu je několik základních pravidel:

1. Tvořte jednoduché, uspořádané a přehledné weby.

• Stránky jsou dokumenty, ne programy. Grafika na stránkách by měla figurovat pouze jako doplněk, nikoli tvořit hlavní obsah (samozřejmě existují výjimky). Kdo si moc hraje s obrázky a jinými multimédii, ten tvoří stránky jako umělecké dílo. To sice může vyvolat dobrý první dojem (pokud se to stihne natáhnout), ale tento dojem vydrží jen v případě, že se toto „dílo“ dobře ovládá a dokáže uživateli poskytnout vše co potřebuje.

• Nejdůležitější na prezentaci je informace! Je důležité poskytovat dostatek informací, vzhled je podružný. Cílem stránek je lidi dostatečně informovat, tak aby nemuseli dohledávat další

19

informace na nějakém dalším zdroji. Proto by měl samotný text z celkové plochy zabírat patřičné místo. Vyhradíme-li pro text na stránce malou plochu, musíme většinou zmenšit jeho velikost a tím i míru informace.

• Kolem každého textu musí být zřetelný prostor. Text by měl být v dostatečné vzdálenosti od hrany textu (tj. text nesmí být „nalepený“ na hranu rámečku, okraj dokumentu nebo jiného prvku).

• Dopřejte uživatelům klid ke čtení. Různé animované (pohyblivé) obrázky, blikající texty, posouvající se texty, atp. působí rušivě. Zkrátka „žádný nezbytný pohyb“ na stránkách.

• Nesnažte se tvořit originální způsob ovládání. Originální ovládání bývá neúspěšné jednoduše proto, že je originální. Nikdo s ním neumí zacházet a málokdo se to chce učit.

2. Používejte běžné odkazy a tlačítka.

Začneme něčím známým: • Na první pohled musí být jasné, na co lze kliknout. • Odkazy by měly být podtržené, protože na to jsou uživatelé

zvyklí. • Najedete-li myší nad odkaz, objeví se klasický kurzor (ručička). • Tlačítka by měla vypadat jako tlačítka (s plastickými okraji). • Pokud odkaz nebo tlačítko změní vzhled při přejetí myší, je to

dobré, protože jsou na to uživatelé zvyklí. • Odlište od sebe interní odkazy (odkazy v rámci vašeho webu) a

odkazy vedoucí mimo váš web.

A po několika doporučeních pár věcí, kterých se vyvarovat: • Nepodtrhávejte texty, které nejsou odkazy. • Opravdu nepodtrhávejte je nikdy, ani když jsou to nadpisy nebo

extrémně důležitý text. • Nedělejte tlačítkový vzhled u prvků, na které nejde kliknout. • Pokud píšete o něčem, co už stránku má, dejte na to odkaz do

textu a nespoléhejte se na to, že je ten odkaz v navigaci. • Nedávejte na stránku odkaz na samu sebe. Uživatel, který na

takovýto odkaz klikne a dostane se tam, odkud „vyšel“, může být přinejmenším zmaten.

3. Prvky na stránce rozmísťujte dle konvencí

• Logo firmy nebo stránky patří do levého horního rohu každé stránky webu a odkazuje na hlavní stránku webu.

• Vedle loga by měl být slogan – krátký text popisující poslání webu. Z textu by náhodný návštěvník měl být schopen poznat, čím se web nebo firma zabývá.

20

• Do pravého horního rohu se většinou dávají „uživatelské funkce“ – například vyhledávání, tisk stránky nebo přihlášení do autentizované části stránek – toto ovšem není obecně nezvratné pravidlo.

• Poslední dobou si uživatelé zvykají na horní a postranní navigaci. Vědí, že jsou tam odkazy na další stránky serveru. Zatímco horní navigaci chápou většinou jako společnou pro celý web, v levém či pravém sloupečku si častěji všimnou věcí, které souvisí s aktuální stránkou. Přesto je spíše chybou dávat do levého (nebo pravého) sloupečku jakoukoli důležitou část textu stránky – uživatelé by to mohli přehlédnout.

• V hlavním sloupečku očekávají uživatelé text, jenž je unikátní jen pro tu kterou stránku webu. Na vrchu hlavního sloupečku očekávají uživatelé nadpis stránky. Co není v hlavním sloupečku, uživatelé velmi často ignorují.

• Patička stránky by měla především stránku opticky ukončovat – uživatel podle jejího zobrazení pozná, že stránka už je načtena celá a žádný další obsah nebude níže zobrazen.

4. Usnadněte uživatelům orientaci na stránkách

Web by měl působit jednotným dojmem, na všech stránkách by mělo být použito stejné písmo, stejná grafika – uživatel si musí být pořád (po každém kliknutí) jistý, že je stále ještě na vašem webu a nikde jinde. Jedná-li se o rozsáhlejší web, je možné (ba přímo doporučené) jednotlivé sekce rozlišit barevně, ale zachovat stejnou strukturu. Jedním z hlavních jednotících prvků je také logo společnosti, které by mělo být zřetelně viditelné na všech částech webu.

Indikace „tady stojíte“ je velmi důležitý, ale zároveň velmi často opomíjený prvek. Jenom málokdo si dnes všimne vysvícené položky v menu, ačkoli to dříve bývalo hlavní upozornění "tady jsi". Proč je důležité, aby uživatel věděl, kde zrovna je?

• mohl se jednoduše ztratit • používá více oken • zrovna přišel z výsledků vyhledávače někam do hloubky serveru

a potřebuje se zorientovat

Pro zjištění, kde zrovna jsou, uživatelé používají tři věci:

• Nadpis stránky je nejdůležitější. Měl by být největším písmem v horní části textu. Pokud bude od textu nějak graficky oddělený (čára, jiná barva pozadí), je nebezpečí, že uživatel hned nepochopí, že jde o nadpis.

• Drobečková nápověda se vyskytuje nejčastěji v horní části stránky – jde o známý řádek typu „Obsah > Služby > Květiny > Růže“. Návštěvník stránky tak hned ví, kde je. Drobečková navigace má však smysl jenom na webech, které mají dobrou

21

stromovou strukturu („na jednu stránku se lze z titulní stránky dostat jenom jednou cestou“).

• Titulek stránky je obsah tagu <title>, zobrazuje se v prohlížeči úplně nahoře v modrém pruhu. Uživatelé se podle něj orientují, zejména když pracují ve více oknech.

Někdy mohou jako pomůcku pro orientaci uživatelé využít i samotnou URL („www adresu stránky“), proto se snažte, aby co nejvíce vystihovalo obsah a zařazení stránky v celkové hierarchii serveru. Například z URL http://www.zenaazivot.cz/clanky/jarni-makeup.htm lze poměrně snadno vyčíst, o čem asi www stránka s tímto URL bude a kde se v rámci celé webové prezentace nacházíte, než z URL http://www.zenaazivot.cz/read.php?cl=15243.

5. Respektujte uživatele a jeho nastavení

• Většina lidí má nastavený prohlížeč a jeho okno tak, aby se jim s ním dobře pracovalo. Pokud jim začnete jejich nastavení měnit (například tím, že JavaScriptem změníte velikost oken), sklidíte v lepším případě jen nelibost.

• Neotevírejte nová okna. Překvapilo by vás, jak málo lidí ví, jak okna vlastně fungují. Nové okno hodně uživatelů zmate, neumějí se vrátit do toho původního (tlačítko zpět nefunguje).

• Rozmyslete si barvení rolovací lišty. Téměř vždy je rušivé. Hodně často lidi zmate natolik, že nevědí, která část lišty ukazuje odrolovanou a která aktuální část dokumentu.

• Pokud už někde rámy použijete, ponechte uživateli možnost si je přizpůsobit (nepoužívejte atribut noresize).

V oblasti použitelnosti jde stejně hlavně o zkušenosti a o zdravý rozum. Bylo a je o ní toho napsáno mnoho a výpis všech tipů, zásad a konvencí by značně překročil povolený rozsah této publikace. Další zdroje informací však může zvídavý čtenář najít v seznamu použité literatury v závěru této práce.

3.3.3 Testování použitelnosti

Webdesignér, který stránky navrhuje, se zpravidla nedokáže přesně vžít do role budoucího uživatele, jehož znalosti a zkušenosti jsou diametrálně odlišné. Nedílnou součástí návrhu a vývoje každého webu by proto mělo být testování jeho použitelnosti. Základní metodou je uživatelské testování (user testing). Princip uživatelského testování je jednoduchý. Vybrané reprezentativní skupině uživatelů se zadá série úkolů, které mají na testovaných stránkách provést. Při tom se sledují jejich reakce a úspěšnost. Uživatelé tak sami svými chybami odhalují slabiny designu a svými úspěchy potvrzují jeho kvality.

22

V českých poměrech znám ještě jednodušší testování použitelnosti. Vezměte si bráchu nebo ségru, posaďte je ke stránce, nemluvte jim do toho a nechte je na stránce něco udělat. Budete zpravidla zděšeni, jak je to pro ně nesrozumitelné a obtížné. Základem úspěchu je poučení se z chyb a jejich napravení. Uživatelské testování má své místo ve všech fázích návrhu či redesignu (předělávání návrhu) webu. Je vhodné testovat již prvotní návrhy struktury webu, navigace a rozvržení stránky, které jsou dosud jen na papíře. Později se testuje prototyp webu a nakonec i jeho finální podoba. Více kratších testů s méně uživateli přináší lepší výsledky, než jeden rozsáhlý test těsně před koncem Tam, kde relativně nákladné uživatelské testování přesahuje finanční možnosti projektu, přichází ke slovu heuristické hodnocení použitelnosti. Toto hodnocení je založeno na výsledcích mnoha uživatelských testování zobecněných do souboru pravidel a doporučení. Podmínkou heuristického hodnocení je kvalitní metodika a vysoká odbornost hodnotitele.

3.4 Optimalizace pro vyhledávače (SEO) O správné optimalizaci webových stránek pro vyhledávače se začalo mluvit až v poslední době. A právě ona je jednou z nejdůležitějších součástí kvalitní webové prezentace. Můžete mít výborný obsah, ale když ho nikdo nenajde, je vcelku k ničemu. Takový extrém ale většinou nehrozí – pokud je obsah opravdu dobrý, vyhledávač si k vám cestu najde. S rostoucí konkurencí však začíná být SEO (Search Engine Optimization) čím dál tím důležitější.

3.4.1 Optimalizace pro katalogové vyhledávače

Do katalogových vyhledávačů přidáváte stránku ručně a pak čekáte týden než vám ji editor schválí. Z českých katalogů jmenujme například seznam.cz, centrum.cz, atlas.cz. Ze zahraničních zmiňme dmoz.org nebo yahoo.com. Optimalizace pro tuto skupinu vyhledávačů je docela jednoduchá. V podstatě záleží jenom na třech věcech – titulku, popisu a klíčových slovech (ta nejsou vždy vyžadována). O to důležitější je jejich řádná příprava. Katalogový vyhledávač totiž při hledání prochází jenom tyto tři údaje. V současné době však již některé katalogy začínají zkoumat také obsah stránek, například editoři u DMOZu ručně procházejí zadané stránky a přidávají jenom některé. Důležité je, aby popisek obsahoval hodně klíčových slov, nejlépe v prvním pádu a osobě, ale aby také zaujal případné návštěvníky.

3.4.2 Optimalizace pro fulltextové vyhledávače

Web do nich „normální“ cestou přidat nelze. Každý fulltextový vyhledávač má svého robota, který prochází všechny stránky na internetu a přidává si je do

23

indexu. To znamená, že když na vaši stránku nevede žádný odkaz, robot ji (většinou) nenajde. Většina fulltextových vyhledávačů obsahuje příkaz „Přidat stránku“, který by měl urychlit indexaci. U nás jsou nejvýznamnější Jyxo a Morfeo, v zahraniční pak nejlepší a nejkvalitnější fulltext vůbec – Google. Základní techniky optimalizace pro fulltextové vyhledávače jsou následující:

1. Napište kvalitní, pro návštěvníky zajímavý, textový obsah a vložte jej do správně strukturovaného HTML kódu stránek.

2. U každé stránky uveďte smysluplný titulek (TITLE) s pěti až sedmi klíčovými slovy - na každé stránce používejte odlišný titulek. Podstatně to zlepšuje orientaci uživatele i posílení klíčových slov u vyhledávače.

3. Přidejte do každé stránky následující meta elementy: • LANGUAGE – zaručuje zobrazení textu ve správném kódování. Proto je

jeho uvedení velmi důležité i bez jakékoliv SEO optimalizace. • DESCRIPTION – obsahuje malé shrnutí obsahu stránky. Vyhledávače v

něm hledají, proto je dobré v něm uvést dostatek klíčových slov. Někdy je také vyhledávači použit jako popisek k vaší stránce při zobrazování výsledků hledání.

• KEYWORDS – o meta elementu KEYWORDS se vedou diskuze, zda má jeho používání vůbec smysl. Google ho s největší pravděpodobností ignoruje úplně. Jeho uvedením ovšem rozhodně nic nezkazíte.

• ROBOTS – meta element ROBOTS určuje způsob, jakým bude vyhledávač pracovat se stránkou. Podle jeho hodnot můžete vyhledávači zakázat nebo povolit indexování. Implicitní hodnota je "vše povoleno".

1. Pro všechny nadpisy důsledně používejte elementy h1 až h3.

2. U každého obrázku používejte popisek – doporučuje se používat klíčová

slova, pro která chcete svoji stránku optimalizovat.

3. Získejte na stránku několik zpětných odkazů (začněte například u obecných katalogů jako je seznam.cz, přimějte své přátele, aby na vás na svých stránkách odkazovali).

4. Snažte se, aby URL („www adresa stránky“) vystihovalo obsah stránky,

obsahovalo klíčová slova a nebylo příliš složité. Například z URL http://www.mojestranka.cz/clanky/pristupnost.htm lze velmi jednoduše vyčíst, o čem asi daná www stránka bude, narozdíl například od stránky mající URL http://www.mojestranka.cz/index.php?clanek=15243.

24

5. Ošetřete si duplicitu odkazů. Například odkaz na titulní stránku: http://www.mojestranka.cz/ http://mojestranka.cz/ http://www.mojestranka.cz/index.php http://mojestranka.cz/index.php Přestože se jedná o jednu a tutéž stránku, výše zmíněné zápisy adres chápou vyhledávače jako čtyři různé stránky. Zvolte si proto pouze jednu z těchto variant a tu důsledně používejte ve všech vašich odkazech a všude ji propagujte. Na ostatní stránky umístěte chybovou hlášku 301 Moved pernamently a přesměrování.

Více informací můžete najít na různých diskusních fórech o SEO na internetu nebo na webech zabývajících se touto problematikou. Jako dobrý úvod vám doporučuji SEO FAQ (http://vyhledavace.info/seo-faq/) od Marka Prokopa.

3.5 Stránky podle standardů „krok za krokem“ Přechod od tradičního způsobu tvorby ke způsobům „podle standardů“ chce svůj čas a zkušenosti. Daleko lepší než skočit do této problematiky po hlavě a záhy být zklamán a otráven neúspěchem, je rozdělit si celý proces do několika menších kroků a postupovat ke standardům pozvolna. Například: Základní praktiky

• U všech stránek uveďte jejich (správný!) DOCTYPE. • Přidejte textový popis (ALT) ke všem obrázkům. • Ke každé stránce přidejte unikátní a smysluplný titulek (TITLE).

Středně pokročilé praktiky

• Zkontrolujte a opravte všechny stránky tak, aby byly validní. • Značkujte sémanticky přesně. • Nahraďte značky HTML formátující vzhled kaskádovými styly CSS. • Mějte přístupné formuláře a tabulky. • Přidejte možnost přeskočení navigace rovnou k hlavnímu obsahu.

Pokročilé praktiky

• Provádějte jednoduché úpravy rozmístění prvků pomocí CSS (nastavení okrajů, vzdáleností od okrajů, atp.), ale celkové rozvržení stránky mějte stále vytvořeno pomocí tabulky.

• Mějte stránku plně rozvrženu a formátovánu pomocí CSS. A co dál? Zkoušejte, zkoušejte...

• Čtěte různé tutoriály a knihy. • Studujte zdrojové kódy a inspirujte se od „expertů“ – díla těch

nejlepších můžete najít například na:

o CSS Vault, http://www.cssvault.com/ o CSS Zen Garden, http://www.csszengarden.com/ o Web Standarts Awards, http://www.webstandardsawards.com/

25

o XHTML Designs, http://www.pixellated.org/biglist.php

• Zkoušejte sami tvořit různá rozvržení stránek pomocí CSS.

3.6 „Temné“ stránky tvorby webů podle standardů Tak jako svět není černobílý, není ani tvorba webu – i dodržování webových standardů přináší několik komplikací:

• naučit se dělat stránky podle standardů je těžší; • problémy s rozdílnou podporou CSS v prohlížečích (je potřeba ladit

stránku ve více prohlížečích); • existují rozvržení stránky, které lze pomocí tabulky udělat daleko snáz.

26

4 Průběh realizace projektu BBS v technologii eTrium

Ačkoli všechno, o čem jsme hovořili v předchozích kapitolách, zní jako naprosto samozřejmá věc, kterou „přece musejí chtít všichni“, je ve skutečnosti situace přeci jen trochu jiná. Prosazování webových standardů není zrovna jednoduchou záležitostí, což ilustruji na jednom specifickém případě.

4.1 Zadání Cílem bylo vytvořit systém správy obsahu (Content Management System) pro jistou soukromou školní instituci. Jedná se o systém, jehož cílem je především správa a distribuce informačního obsahu rozličných dokumentů a jiných zdrojů (dále o nich budeme hovořit jako o „obsahu“). Jinými slovy: uvnitř společnosti existuje velké množství dokumentů a strana příjemců je velmi různorodá – každý z příjemců často vyžaduje informace trochu jiné, nebo stejné v jiné formě, a každý z příjemců má často také různá práva na různý obsah a vidí celý systém ze svého pohledu. Z hlediska, které nás zajímá, nám v případě projektu BBS bude stačit, když si tento problém „práv přístupu k dokumentům“ rozčleníme na dva případy:

• Uživatel nepřihlášený do systému má vidět pouze veřejné dokumenty, které de facto tvoří standardní veřejnou prezentaci školy („reklamní webové stránky“). Příkladem veřejných dokumentů jsou obecné informace o studiu, atp.

• V případě, že se uživatel přihlásí do systému, má přístup nejen k těmto veřejným dokumentům, ale i k dokumentům dalším – podle toho, jak jsou definována jeho práva. Například student této školy po přihlášení do systému získá práva na zobrazení dokumentů obsahujících jeho studijní výsledky, atp.

Požadavky zadavatele byly poměrně obvyklé:

1. Musí to fungovat. 2. Musí to fungovat co nejdříve. 3. Mělo by to být co nejlevnější. 4. Mělo by to být „hezčí“ než mají naši partneři a naše konkurence.

27

4.2 Krátce k realizaci CMS nad technologií eTrium Technologie eTrium je kombinací myšlenkových postupů z oblasti managementu znalostí, softwarového inženýrství, analytických dovedností a programátorských schopností, která umožňuje vytvářet komponenty informačních systémů tak, že tyto komponenty jsou schopny podporovat vyvíjející se business požadavky bez nutnosti neustálého doprogramovávání a přeprogramovávání již existujícího řešení. Jak by měl být nástroj podporující tyto požadavky realizován popisují principy DMT (Diamond Modeling Tool) a praktickou realizací DMT je UIR (Universal Information Robot). UIR je počítačový systém, který plní funkci informačního robota – asistenta. Dialogem v mírně formalizovaném přirozeném jazyce si ho vyškolíme pro asistování v určité oblasti zájmu – doméně. V našem případě byl vyškolen pro správu dokumentů – PDMS (Project Dokument Management Systém). Universální Informační Robot (UIR) se skládá ze tří částí:

• znalostního agenta (KMA), což je de facto mozek tohoto robota, který zpracovává poskytnuté informace;

• universálního rozhraní (UI), což jsou smysly; • universálního úložiště dat (UDS), což je jinými slovy robotova paměť.

Samotný CMS (Content Management System) je pak nadstavba (plug-in), která si z paměti UIRa vytahuje data a ve formě XML je předává k XSL transformaci na validní XHTML.

4.3 Specifika výstupu generovaného CMS

1. Menu může mít variabilní počet položek (toto záleží na právech uživatele, na tvůrcích informační architektury, atd.).

Kvůli tomu je nutné veškerá menu dělat vertikálně. Uživatel je zvyklý v případě potřeby posouvat vertikálně obrazovku, má na to i pomůcky (například kolečko myši), ale kdyby navigace byla vykreslována horizontálně a přesáhla šířku obrazovky, pro uživatele by bylo přinejmenším nepohodlné posouvat stránku do strany.

28

2. Navigace může mít variabilní počet úrovní.

3. Nemohu předpokládat rozsah zobrazovaného dokumentu.

4. Dokument může mít vlastní odkazy vztahující se k tématu dokumentu.

5. Dokument může mít přílohy.

6. CMS může vrátit jako odpověď na dotaz uživatele i více dokumentů najednou.

7. Nevím, jakou cestou se na dokument uživatel dostal (struktura není stromová, k jednomu dokumentu se lze z titulní stránky dostat dvěmi a více různými cestami).

Čímž je znemožněno vytvořit „drobečkovou navigaci“ (= řádek v horní části stránky říkající „kde jsem“ – například „Obsah > Informace o studiu > Studium jazyků“).

Stručně řečeno, o obsahu a navigaci nemohu předpokládat nic, neboť se mohou kdykoli ze dne na den změnit. CMS potřebuje „universální webový výstup“ – stránku, která se vždy přizpůsobí svému obsahu a nebude jej nijak omezovat.

4.4 První verze designu portálu (výstupu CMS)

4.4.1 Zjišťování zákazníkovy představy

Co se vzhledu týče, zákazník to při první schůzce shrnul jednou větou: „Mělo by to být hezčí než mají naši partneři a naše konkurence.“ Prvním krokem tedy bylo zmapování stávající situace (jak vypadá nynější prezentace BBS) a snaha zjistit zákazníkovu nevyjádřenou představu z jím poskytnutých webových adres konkurence. Jako příklad uvedu screenshoty (záběry obrazovek) následujících webů:

Původní prezentace BBS http://www.bibs.cz/

29

http://www.cmc.cz/ http://www.pibs.cz/ Často se stává, že zákazník buď vůbec neví, co chce, nechá vám volnou ruku, a pak se mu to „buď líbí nebo ne“, anebo ví, co chce, ale jeho požadavky jsou z hlediska standardů, použitelnosti a přístupnosti špatně. V našem případě nám zákazník nechal víceméně volnou ruku, a tak mohlo být započato budování „portálu BBS podle standardů.“

4.4.2 Vytvoření první verze portálu BBS

Z rozboru infrastruktury stávajícího webu, s přihlédnutím ke specifikům výstupu CMS (celková proměnlivost) a analýzy co největší použitelnosti jsem navrhnul následující design:

30

Portál byl s tímto podle standardů napsaným a přístupným designem zprovozněn a zákazníkovi se tento vzhled líbil – pouze nám oznámil, že najal dva grafiky, aby nám pomohli s celkovým doladěním. Ze vzájemné komunikace jsme to pochopili tak, že grafici vytvoří takzvanou „doplňující grafiku,“ čili různé odrážky do menu, fotky do textu, hezčí logo do hlavičky, nějaký poloprůhledný obrázek na pozadí, atp.

4.5 Grafický šok aneb „a co FLASH“? K našemu vystřízlivění došlo z rána 1. prosince, kdy od „grafiků“ dorazila zpráva obsahující pět PDF souborů s různými barevnými variacemi návrhů:

Úvodní stránka portálu Design samotného portálu Opomenu-li vzhledem k účelu webu „příšerné“ rozvržení plochy, chtěli grafici celou prezentaci BBS realizovat pomocí technologie FLASH – laicky řečeno jako jednu velkou animaci. Obratem jsem vyhotovil zprávu pro zákazníka, ve které jsem vysvětlil základy použitelnosti a přístupnosti, a důvody proč je nevyhovující postavit celé stránky pomocí této technologie.

4.5.1 Připomínky k rozvržení plochy

• Navigace je řešena „napevno“, na přesně daný počet položek – není flexibilní. Autoři předpokládají relativně malý počet položek menu, ale co když bude některé menu obsahovat 15 položek? Nebo 30 položek? I tato situace může nastat – stačí se podívat na původní web BBS. V té chvíli bude celá krása této „na papíře hezké“ navigace pryč.

• Autoři předpokládají pouze dvě základní úrovně navigace a nepřipouštějí další úrovně, natož jakákoli „menu dokumentu“, přílohy dokumentu, atp.

31

• Samotný text zabírá odhadem pouhých 15% obrazovky. Toto je prezentace sama pro sebe. Nejdůležitější na prezentaci (a u portálu obzvláště) je informace! A zmenším-li plochu pro text s informací, musím zmenšit i jeho velikost a tudíž většinou i míru informace.

• Autoři na různých stránkách dávají plochu s textem na různá místa – jednou vpravo nahoru, podruhé vlevo doprostřed, atp. Toto je možné v rámci statické prezentace, ale nikoli v rámci prezentace dynamické – ta očekává jakési pevně dané místo, kam se vypisuje „generovaný“ obsah.

• Grafika má text doplňovat a tvořit okrasu. Nesmí být „hlavním bodem“ stránek, kterému se přizpůsobuje text a vše okolo. Navíc grafika v prezentované formě, ať už bude uložena v jakémkoli formátu, bude hodně velká a její stahování na dodnes nejrozšířenějším telefonním připojení bude velmi pomalé. Neúměrně pomalé načítání stránek vůči míře informace, které stránky přinesou.

• Realizovat takto intranet (informační systém pro studenty) rozhodně není možné. Shrnu-li předcházející body: malá plocha pro zobrazení informace, obtížné ovládání a navigace, mnoho složité grafiky a tím pomalé načítání, nízká flexibilita návrhu vůči změnám.

Poznámka: Tyto připomínky vyplynuly z analýzy všech zaslaných PDF. Kritizované prohřešky grafiků jsou nejlépe patrné z prohlídky veškerých jejich návrhů, které najdete na CD přiloženém k této práci.

4.5.2 Nejpodstatnější důvody „proč nepoužívat FLASH“?

• Weby vytvořené ve FLASHi jsou nepřístupné, k jejich zobrazení je nutné mít nainstalován speciální doplněk prohlížeče. Tento plug-in samozřejmě není dostupný pro různá alternativní přístupová média (hlasové čtečky, handheldy, mobilní telefony, atp.)

• Ve webech tvořených výhradně ve FLASHi nefunguje nejdůležitější tlačítko prohlížeče „ZPĚT“.

• Není možné navigovat se po stránkách zadáním adresy do adresního řádku a uvnitř takového webu si nelze tvořit záložky („přidávat do oblíbených“).

• Ke každému textu je nutné se pokaždé prostě „od začátku proklikat“. • Stránky není možné přímo tisknout, je nutné mít paralelní HTML verzi

všech textů, aby se tyto mohly otevřít a až tyto mohly být tištěny. • Na stránkách není možné zařídit vnitřní vyhledávání. • Pokud nemáte opravdu rychlé připojení k internetu, je nutné dlouho

čekat, než se celá animace načte. • Stránky vytvořené ve FLASHi neumožňují rozlišit již navštívené a ještě

nenavštívené odkazy.

4.5.3 Kdy je FLASH výhodné použít?

Nepatřím rozhodně k těm, kteří by FLASH odsuzovali a zavrhovali, ale stejně jako u JavaScriptu a jiných DOPLŇKŮ stránky opakuji: umírněně, umírněně,

32

umírněně!!! A hlavně nezapomeňte ke všem takovýmto doplňkům poskytnout textovou alternativu pro ty, kteří je nemohou využít. Opodstatněné použití FLASHe vidím například u prezentace výrobku – načte se stránka s popisem a vedle něj bude možnost spustit si 3D model mobilního telefonu (model bude vytvořen ve FLASHi). A na konec ještě připomínám, že v této publikaci se zabýváme „weby, které chtějí předávat informace“. Opačným typem jsou „zábavné weby“, tj. takové, na které když uživatel přichází, předem již očekává multimediální show, pohyb, hudbu – například prezentace hudební skupiny. Takové weby rovněž jistě FLASH využijí.

4.6 Konfrontační schůzka Odpovědí zadavatele na mou kritiku daného návrhu bylo svolání schůzky všech zainteresovaných stran. Argumenty obou skupin (my x grafici) však zůstávaly stejné. Naše argumenty byly především:

• nutnost flexibility návrhu vůči změnám • použitelnost a přístupnost • ekonomické a jiné výhody z dodržování standardů

Grafici nepřekvapili a argumentovali jedním bodem:

• běžné weby jsou nudné, chce to nějaký šmrnc Zákazník dával za pravdu oběma stranám. Schůzka však měla jednu zajímavou pointu. Během zhruba hodinové slovní přestřelky se ukázalo, že zákazník zadal vlastně oběma skupinám stejnou práci naprosto současně, aniž by té druhé řekl o té první. Proč tomu tak bylo, jsme se dodnes nedozvěděli. Závěry našeho setkání byly nakonec následující:

• my poskytneme grafikům vzorové výstupní XHTML a oni jej „nastylují“ pomocí CSS tak, aby „mělo šmrnc“

• grafici vytvoří úvodní stránku webu v HTML tak, aby odpovídala prvnímu návrhu

• obojí nám pošlou a my to zapracujeme • technologie FLASH nebude použita

Že si grafici nedávají malé cíle dokazuje web, do jehož podoby chtěli dle svých slov „portál BBS dostat“ – web Nottinghamské univerzity (viz. screenshot).

33

http://www.nottingham.ac.uk/

4.7 Grafický šok č.2 aneb kradeš, kradu, krademe..

4.7.1 Druhá verze portálu „podle grafiků“

Po konfrontační schůzce jsem grafikům obratem zaslal požadované materiály. Následovaly dva týdny klidu, načež přišel e-mail s PDF soubory obsahující návrh „druhé verze designu portálu BBS“. Již z návrhu bylo zřejmé, že grafici přišli na to, že realizace designu podle webu Nottinghamské univerzity značně převyšuje jejich schopnosti, a že se tudíž vracejí k našemu pojetí rozvržení portálu jako k nejlepšímu. Hodlali změnit především rozvržení hlavičky, celkovou barevnou koncepci webu a vytvořit doplňující grafiku (odrážky, oddělovače, obrázky na pozadí, atp.).

Návrh druhé verze designu Konečný výsledek dodaný grafiky

34

Jaké však bylo naše (a především mé) překvapení, když se po dalších dvou týdnech objevil od grafiků e-mail s vítězoslavným nadpisem: „BBS Portál“. Megalomanské vize grafiků vzaly za své a místo úplně nového kaskádového stylu jsem v příloze našel jednu ze starších verzí mého kaskádového stylu (kterou grafici vzali neznámo kde), v níž bylo upraveno pár řádků ovlivňujících především okraje několika prvků a barvy pozadí. Kromě této úpravy kaskádového stylu nakreslili grafici ještě pomlčku, kterou použili jako odrážku položek v menu, což byla veškerá jimi vytvořená doplňující grafika. Dle mého skromného názoru působilo toto jejich „veledílo“ přinejmenším značně neesteticky, přesto však bylo na přání zákazníka použito.

4.8 Titulní stránka portálu Druhým úkolem grafiků bylo udělat titulní stránku projektu. Její zdrojový kód dorazil zhruba měsíc po druhé verzi designu portálu. Že pánové o HTML slyšeli nejspíš hodně z rychlíku dokazuje část zdrojového kódu realizující položky menu: <div id="navigace"> <ul><a href="#">Brno Business School se představuje</a></ul> ... <ul><a href="#">Aktuality</a></ul> </div> Přepsáno do „lidštiny“: <blok "navigace"> <neuspořádaný seznam> <odkaz na "#">Brno Business School se představuje<konec odkazu> <konec neuspořádaného seznamu> ... <neuspořádaný seznam> <odkaz na "#">Aktuality<konec odkazu> <konec neuspořádaného seznamu> <konec bloku "navigace"> Pokud stále nechápete, proč je to špatně, přečtěte si znovu kapitolu 3.1.1. Sémanticky přesné značkování. Sémanticky správně je to samozřejmě takto: <div id="navigace"> <ul> <li><a href="#">Brno Business School se představuje</a></li> ... <li><a href="#">Aktuality</a></li> </ul> </div>

35

Screenshot verze dodané grafiky Mnou vytvořená konečná verze Verze zaslaná grafiky byla nepoužitelná, a tak bylo nutné ji přepracovat. V první fázi zůstala vizuálně stejná, vytvořil jsem pouze nový, tentokrát validní, XHTML kód a nový kaskádový styl.

4.9 Jak to všechno nakonec dobře dopadlo Stávající situace se musela nutně změnit. Design vytvořený grafiky by jednak poškozoval dobré jméno společnosti eTrium, jednak by to nebyl „dobrý konec“ této mé práce a v neposlední řadě se mi osobně opravdu nelíbil. Proto jsem začal pěkně od začátku a vytvořil úplně nový design portálu BBS a následně jsem předělal i titulní stránku. Výsledné dílo můžete shlédnout na adrese http://www.bbs-portal.cz:8180/, lokální ukázku pak najdete na přiloženém CD. Konečná verze designu portálu BBS

36

5 Závěr Mezi základní parametry profesionálně zpracované a úspěšné webové prezentace patří zejména: použitelnost, přístupnost, validita (X)HTML kódu, optimalizace pro vyhledávače (SEO) a mnoho dalších. Správným naplněním těchto parametrů a dodržením pravidel tvorby moderních webových projektů splníte základní podmínky k dosažení úspěchu na internetu. Nedodržením jednoho nebo více parametrů se připravujete o výhody, které internet nabízí. Například při nedodržení validního kódu a SEO se připravujete o možnost, že vás váš potenciální zákazník nenalezne v internetových vyhledávačích. Porušováním pravidel přístupnosti a použitelnosti stránek se připravujete o návštěvníky, kteří se již dostali na vaše stránky. Lze samozřejmě říci, že jde o menšiny, kvůli nimž se nevyplatí činit jakákoli opatření. Pokud ovšem sečtete dopady, které mohou mít (a pravděpodobně mají) nedostatky vašeho webu, dojdete k překvapivým výsledkům. V případě projektu BBS jsem se při tvorbě prvního i konečného designu stránky snažil maximálně držet zásad popsaných v této publikaci. Přestože se dodnes některé věci nepodařilo implementovat (především lokální vyhledávání a drobečkovou navigaci), tak většinu parametrů přístupného webu se naplnit podařilo a proto tento projekt považuji alespoň z pohledu své bakalářské práce za úspěšný.

37

Literatura

Knižní publikace [KRUG] Krug S.: Nenuťte uživatele přemýšlet. Computer Press, Brno 2003.

ISBN 80-7226-892-9. [NIELSEN] Nielsen J.: Web.Design. SoftPress s.r.o., Praha 2002.

ISBN 80-86497-27-5 [SATRAPA] Satrapa P.: Web Design. Neokortex spol. s.r.o., Praha 1997.

ISBN 80-902230-1-X. [STANICEK] Staníček Z.: Universální modelování a konstrukce IS – „Diamantová

sútra“. Masarykova Universita, Brno 2003.

Internetové zdroje [ALERTBOX] Nielsen J.: Alertbox: Jakob Nielsen’s Column on Web Usability.

http://www.useit.com/alertbox/ [BLOG1] Weida P.: About weblog – XHTML, CSS, SEO, přístupnost, použitelnost,

webdesign a internet. http://www.zpravy.net/weblog/ [BLOG2] Chomát J.: Chomat.net – weboviny. http://www.chomat.net/weboviny/ [BLOG3] Šíma J.: Choseho weblog o webu. http://www.chose.cz/weblog/ [BLOG4] Bureš J.: conBLOG weblog. http://blog.converter.cz/ [BLOG5] Pichlik R.: Dagblog - blog nejen pro kodéry. http://www.sweb.cz/pichlik/ [BLOG6] Kmeťko Ľ.: Handmade weblog. http://www.hmw.sk/weblog/ [BLOG7] Hradil J.: Jirka Hradil blog. http://www.hradil.cz/ [BLOG8] Lenčo J.: lencoBLOG | weblog o webu - webdesign, XHTML, CSS,

použitelnost. http://www.lenco.cz/weblog/ [BLOG9] Bien J.: Weblog Mraveniště - weblog o webu pro přemýšlivé tvůrce a

správce webového obsahu. http://www.mraveniste.org/weblog/ [BLOG10] Bien J.: Mraveniště - Stříbrné jehličí. http://www.mraveniste.org/jehlici/ [BLOG11] Stáníček P.: Pixylophone: Webdesign.

http://www.pixy.cz/blog/webdesign.html [BLOG12] Lešetický M.: Plaváčkův blábolník. http://weblog.plavacek.net/ [BLOG13] Wodtke Ch.: Widgetopia - Collection of Widgets and UI elements from

various websites, with notation of their sterling or plate metal qualities. http://www.eleganthack.com/widgetopia/

[BLOG14] Máčí L.: Blog o tvorbě webu. http://www.maciweb.net/blog/web/ [BLOG15] Štrupl V.: Weblog Václavák - weblog o internetu a webdesignu.

http://www.vaclavak.net/weblog/ [CZILLA] CZilla: Webové standardy. http://www.czilla.cz/standards/ [DLOUHY] Dlouhý V: DlouhýWeb - XHTML, CSS, SEO, použitelnost a přístupnost

webových stránek. http://www.vitdlouhy.cz/ [DOBRYW] Dobrý Web: Váš pomocník pro úspěch na internetu.

http://www.dobryweb.cz/

38

[DOGMA] Stáníček P., Prokop M., Kopta M., Kout P.: Manifest Dogma W4. http://dogma.pixy.cz/

[INTERVAL] Interval.cz - denně o tvorbě webu a e-komerci. http://www.interval.cz/ [JANOVSKY] Janovský D.: Jak psát web. http://www.jakpsatweb.cz/ [KMETKO] Kmeťko L.: Handmade Websites - články o webových standardech.

http://www.hmw.sk/clanky.html [LISTAPA] A List Apart. http://www.alistapart.com/ [LUPA] LUPA: Server o českém internetu - rubrika Internet.

http://www.lupa.cz/rubrika.php3?rubrika=2 [MAXDESGN] Max Design - Presentation and articles.

http://www.maxdesign.com.au/presentation/ [PCSVET] PC Svět o webdesignu. http://www.pcsvet.cz/internet/webdesign/ [PROKOP] Prokop M.: Sova v síti. http://www.sovavsiti.cz/ [SITELAB] Vodička L.: Sitelab - Optimalizace pro vyhledávače. http://www.sitelab.cz/ [SITEPNT] SitePoint: Empowering Web Developers Since 1997.

http://www.sitepoint.com/ [SPINAR] Špinar D.: Přístupnost: Web a weblog věnovaný přístupnosti webových

stránek. http://pristupnost.nawebu.cz/ [WEBFACE] WEBface - Vytvoříme vám úspěšné webové stránky.

http://www.webface.cz/ [ZIVECZ] Živě.cz - rubrika Programování: HTML/CSS/WebDesign.

http://www.zive.cz/h/Programovani/default.asp?CAI=2036

39

Příloha A – Přehled aktuálních webových standardů Jazyky pro popis struktury dokumentu

• HTML 4.01 (Hypertext Markup Language) http://www.w3.org/TR/html401

• XHTML 1.0 a 1.1 (Extensible Hypertext Markup Language) http://www.w3.org/TR/xhtml1 http://www.w3.org/TR/xhtml11

• XML 1.0 (Extensible Markup Language) http://www.w3.org/TR/REC-xml

Prezentační jazyky

• CSS Level 1 (Cascading Style Sheets) http://www.w3.org/TR/REC-CSS1

• CSS Level 2 http://www.w3.org/TR/REC-CSS2

• CSS Level 3 http://www.w3.org/Style/CSS/current-work

Objektové modely

• DOM Level 1 (Document Object Model) http://www.w3.org/TR/REC-DOM-Level-1

• DOM Level 2 http://www.w3.org/DOM/DOMTR#dom2

Skriptovací jazyky

• ECMAScript 262 (standartní verze JavaScriptu) http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM

Další jazyky

• MathML 1.01 a 2.0 (Mathematical Markup Language) http://www.w3.org/TR/REC-MathML/ http://www.w3.org/TR/MathML2/

• RDF (Resource Description Format) http://www.w3.org/RDF/

• SVG 1.0 (Scalable Vector Graphics) http://www.w3.org/TR/SVG/

• PNG 1.0 (Portable Network Graphics) http://www.w3.org/TR/PNG/

…a mnoho dalších, jejichž specifikace naleznete na webu konsorcia W3C http://www.w3.org/.

40

Příloha B – Manifest Dogma W4 Manifest Dogma W4 (W4D) vznikl jako soukromá iniciativa skupiny uznávaných webdesignérů – pánů Petra Stáníčka, Marka Prokopa, Martina Kopty a Pavla Kouta. Jeho cílem je vytyčení strategie pro tvorbu webů podle přísně vymezených pravidel. Nechce definovat žádné obecně závazné normy, pouze předepisuje jeden z mnoha možných způsobů tvorby webu. Dodržení těchto postupů má zajistit všeobecně přístupné, bezbariérové a přehledné dokumenty.

1. Kód dokumentu Kód dokumentů bezchybně vyhovuje striktnímu HTML 4.01 nebo XHTML. Současně zohledňuje zpětnou kompatibilitu a upřednostňuje dopředně kompatibilní syntaxi.

2. Záhlaví dokumentu

Záhlaví obsahuje stručný a výstižný titulek, jméno a e-mail autorů kódu a kódování dokumentu, pokud se liší od výchozího kódování.

3. Struktura dokumentu

Autor musí zajistit, že dokument a jeho kód věrně odrážejí sémantiku a strukturu obsahu. Hlavnímu sdělení dokumentu smí předcházet pouze informace, které se čtenář má dozvědět, než toto sdělení začne číst. Tělo dokumentu nesmí obsahovat značky, které nenesou sémantickou nebo strukturální informaci, ani obsah, který má pouze prezentační charakter.

4. Navigace

Každý dokument v prezentaci vyjma úvodní strany musí obsahovat alespoň odkaz na úvodní stranu. Všechny další části dokumentu určené k navigaci musí být prezentovány a umístěny ve všech dokumentech shodně. Delší dokumenty musí být rozděleny do sekcí, odkazovaných z prologu dokumentu.

5. Úvodní strana

Úvodní strana celé prezentace musí zřetelně popisovat cíl a sdělení této prezentace. Viditelně odkazuje kontakt na administrátora.

6. Sdělení dokumentu

Každá informace sdělovaná dokumentem musí být dostupná v textovém formátu.

7. Odkazy

Všechny odkazy a další aktivní prvky musí jasně popisovat svůj cíl a akci, kterou jejich aktivace způsobí. Odkazy musí zůstat podtrženy,

41

pokud jejich podtržení nezakáže uživatel. Přeformátování dokumentu smí způsobit pouze aktivace nějakého prvku.

8. Tabulky

Tabulkové prvky mohou být v dokumentu použity k rozmístění a formátování tabulkových dat, nikdy ne k definování vzhledu dokumentu. Tabulky musí být přístupné bez ohledu na použitý způsob prezentace (vyjma případů, kdy koncové zařízení tabulky vůbec nepodporuje), čitelné a jejich obsahu musí předcházet výstižný nadpis a/nebo shrnutí.

9. Použití dokumentu

Obsah ani kód dokumentu nesmí předjímat, doporučovat ani vyžadovat konkrétní způsob použití. Přístupnost obsahu dokumentu nesmí žádnému způsobu prezentace dávat přednost.

10. Doplňky dokumentu

Kód ovlivňující prezentaci dokumentu musí být umístěn v externích souborech připojených k dokumentu v jeho záhlaví. Korektní prezentace dokumentu nesmí záviset na jakémkoli doplňku (nebo jeho části), který může být uživatelem zakázán či odinstalován nebo který po uživateli vyžaduje instalaci softwaru, který není v jeho prostředí právě dostupný. Kód dokumentu ani jeho doplňky nesmí měnit nebo nebrat ohled na uživatelské předvolby.

11. Barvy

Barvy v dokumentu musí být definovány s ohledem na dostatečný kontrast jasu a odstínu popředí a pozadí. Na pozadí nesmí být použit vzorek, který jakkoli snižuje čitelnost obsahu.

12. Text

Kolem každého textu musí být zřetelný prostor. Velikost písma může být definována pouze absolutně nebo relativními jednotkami, žádné písmo nesmí být definováno menší než xx-small. Definice typu písma musí obsahovat položku, která je zaručeně dostupná na každém zařízení (to je obvykle zajištěno obecnou rodinou písma).

13. Autoři

Autoři dodržující tyto zásady je mohou uvést a/nebo odkázat ve svých dokumentech.

Podrobnější informace k jednotlivým bodům, jejich detailní popis, vysvětlení důvodů, proč byla uvedená pravidla použita a jaké výhody jejich dodržení přináší, najdete www stránkách dogmatu http://dogma.pixy.cz/.

42

Příloha C – Obsah CD-ROM • webdesign.doc – textová zpráva ve formátu Microsoft Word • webdesign.pdf – textová zpráva ve formátu PDF • webdesign.ps – textová zpráva ve formátu PS

• projekt.zip – zkomprimovaný adresář se soubory k projektu BBS

• /images/ – adresář s obrázky použitých v textové zprávě • /projekt/ – adresář se soubory k projektu BBS

Soubory k projektu BBS Prezentace (konkurenčních škol), kterými jsme se měli inspirovat

• /projekt/vzor-bbs/ – ukázka původní verze stránek BBS • /projekt/vzor-bibs/ – ukázka "vzorové prezentace" http://www.bibs.cz/ • /projekt/vzor-cmc/ – ukázka "vzorové prezentace" http://www.cmc.cz/ • /projekt/vzor-nottingham/

– ukázka "vzorové prezentace" http://www.nottingham.ac.uk/ • /projekt/vzor-pibs/ – ukázka "vzorové prezentace" http://www.pibs.cz/

Zdrojové kódy zachycující vývoj portálu BBS

• /projekt/bbs-portal_v1_etrium/ – zdrojové kódy prvního mnou vytvořeného designu portálu BBS

• /projekt/bbs_v1_gfx_navrh/ – první návrhy vzhledu titulní stránky a portálu BBS dodané grafiky v prosinci 2003

• /projekt/bbs-portal_v2_gfx_navrh/ – návrhy vzhledu portálu BBS zaslané grafiky po konfrontační schůzce

• /projekt/bbs-portal_v2_gfx_realita/ – zdrojové kódy druhé verze designu portálu „vytvořené“ grafiky

• /projekt/bbs-portal_v3_etrium_final/ – zdrojové kódy mnou vytvořeného konečného designu portálu BBS

Zdrojové kódy zachycující vývoj "úvodní stránky" portálu BBS

• /projekt/bbs_v1_gfx_navrh/ – první návrhy vzhledu úvodní stránky a portálu BBS dodané grafiky 1.12.2003

• /projekt/bbs-intro_v1_gfx_realita/ – zdrojové kódy úvodní stránky portálu BSS dodané grafiky

• /projekt/bbs-intro_v2_etrium_final/ – zdrojové kódy mnou vytvořené konečné verze úvodní stránky portálu BBS