4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2013/12/12 20:40:58 $
Obsah Úvod... 3 Recept na dobré webové stránky... 4 Použitelnost... 5 Jak se pozná použitelný web... 6 Testování použitelnosti... 7 Grafický design... 8 Základní pravidla... 9 Výběr písma... 10 Typografie... 11 Zaručená rada pro dobrý design... 12 Struktura stránek a navigace... 13 Struktura stránek... 14 Navigace... 15 Stránka... 16 Stránka... 17 Odkazy... 18 Každý dokument... 19 Volba URL adresy... 20 Přístupnost... 21 Proč přístupnost... 22 Zásady přístupnosti... 23 Další zdroje informací... 24 Design stránek... 25
Úvod Recept na dobré webové stránky... 4 (strana 3)
Recept na dobré webové stránky grafický design první co uživatel vidí struktura stránek, navigace aby se v tom uživatel vyznal a dlouho zůstal přístupnost obsah stránky by měl být vytvořen s ohledem na co nejširší okruh čtenářů použitelnost, UX práce se stránkou/aplikací by měla být intuitivní a příjemná dobře strukturovaný, snadno čitelný a srozumitelný text (copywriting) syntakticky správný HTML kód méně práce pro prohlížeč vhodné metainformace snazší nalezení stránky přesný postup neexistuje, vždy je potřeba jednotlivé složky vyvážit Úvod 1 / 16 (strana 4)
Použitelnost Jak se pozná použitelný web... 6 Testování použitelnosti... 7 (strana 5)
Jak se pozná použitelný web uživatel není nucen přemýšlet jednoduchý a přehledný rychle se načítá konzistentní napříč všemi stránkami ovládání je intuitivní vše by mělo vést uživatele ke stanovenému cíli (např. dokončení prodeje v eshopu) Použitelnost 2 / 16 (strana 6)
Testování použitelnosti uživatelské testování analýza návštěvnosti A/B testování heuristika na základě zkušeností Použitelnost 3 / 16 (strana 7)
Grafický design Základní pravidla... 9 Výběr písma... 10 Typografie... 11 Zaručená rada pro dobrý design... 12 (strana 8)
Základní pravidla design by měl být střízlivý méně je někdy více bez zbytečně velkých animací a obrázků, které jsou k ničemu vhodné kombinace barev barva pozadí a textu musí být zvolena tak, aby se text dobře četl obrázky na pozadí je lepší vůbec nepoužívat (téměř žádná profesionální stránka je nepoužívá) jako barva pozadí je vhodná zejména bílá a velice světlé odstíny dalších barev Grafický design 4 / 16 (strana 9)
Výběr písma na obrazovce jsou čitelnější bezpatková písma (Arial, Verdana, Helvetica) nekombinovat příliš druhů písma na jedné stránce řádka by neměla být delší než 40-60 znaků u delších se špatně přechází z konce jedné na začátek další písmo o velikosti 10 pixelů je pro většinu lidí příliš malé pro zvýraznění používat barvy, tučné písmo nebo kurzívu zásadně nepoužívat podtrhnutí (to je vyhrazené pro odkazy) Grafický design 5 / 16 (strana 10)
Typografie dodržovat typografická pravidla základ je v pravidlech českého pravopisu psaní mezer, interpunkce, pomlčky, uvozovky, přímá řeč apod. Správné uvozovky speciální znaky lze zapisovat pomocí znakových entit nebo přímo Tabulka 1. Zápis některých znaků Popis dlouhá pomlčka krátká pomlčka levá uvozovka pravá uvozovka Ukázka Zápis v HTML Grafický design 6 / 16 (strana 11)
Zaručená rada pro dobrý design na skutečně dobrých webech dělá vždy více lidí grafik/designér HTML kodér programátor marketing, SEO, každý by měl dělat jen to, co umí dobře Grafický design 7 / 16 (strana 12)
Struktura stránek a navigace Struktura stránek... 14 Navigace... 15 (strana 13)
Struktura stránek hypertext umožňuje vytvořit téměř libovolnou strukturu, ale člověk je zvyklý na konzervativnější uspořádání většinou na hierarchii analýzou přístupových logů lze zjistit nejčastěji navštěvované stránky a přizpůsobit tomu jejich umístění jedna stránka by měla obsahovat logický celek informací, ale nesmí být příliš dlouhá maximálně 5 obrazovek stránka s odkazy by měla být vidět celá bez nutnosti rolování silně AJAXové aplikace by měly dodržovat zvyklosti webu historie, možnost tvorby záložek a sdílení odkazů, Struktura stránek a navigace 8 / 16 (strana 14)
Navigace na každé stránce by měla být navigační lišta, ze které bude jasné, v které části serveru jsme drobečková navigace odkaz na hlavní a nadřazenou stránku, případně na předchozí a další pozor na těžko ovladatelná rozbalovací menu každý větší server je nezbytné doplnit možností fulltextového prohledávání Struktura stránek a navigace 9 / 16 (strana 15)
Stránka Stránka... 17 Odkazy... 18 Každý dokument... 19 Volba URL adresy... 20 (strana 16)
Stránka aktuální a zajímavé informace rychlé načtení gramaticky správný a slohově čistý text minimálně zkontrolovaný spell-checkerem a přečtený několika kamarády stránku je dobré co nejlépe strukturovat pomocí HTML elementů nadpisy, seznamy apod. pokud to jde, měl by se obsah oddělit od vzhledu a použít CSS menší a rychlejší stránky, snazší změny designu dodržovat standary HTML, XHTML, CSS a další Stránka 10 / 16 (strana 17)
Odkazy nepoužívat odkazy typu klikněte zde oprostit se od technologických pojmů jako server, FTP, WWW stránky jsou pro běžné uživatele a těm je jedno, jaké technologie stojí v pozadí odkazy by měly být interaktivní, aby v uživateli vzbudily pocit, že jsou aktivní části dokumentu např. změna barvy po přejetí kurzorem myši zvykem je odkazy podtrhávat v rámci jednoho serveru používat relativní odkazy, aby mohly být stránky snadno přesunuty na jiné místo Stránka 11 / 16 (strana 18)
Každý dokument každá stránka by měla obsahovat několik identifikačních údajů: kdo ji vytvořil včetně kontaktu, datum poslední modifikace, do kdy jsou uvedené informace platné z každého dokumentu by mělo být jasné, na kterém jsme serveru (někdo se ke stránce může dostat zvenčí pomocí odkazu) každý dokument by měl obsahovat výstižný název (element title) metadata pro lepší vyhledávání a klasifikaci Stránka 12 / 16 (strana 19)
Volba URL adresy jednoduchá, perzistentní a výstižná technologicky neutrální bez koncovek typu.html,.php,.aspx apod. technicky lze vyřešit modulem web-serveru pro přepisování URL (např. mod_rewrite) škálovatelné pojmenovávací schéma část cesty začíná rokem http://www.vse.cz/2005/as/volba_rektora v průběhu času by jedno URL mělo označovat stejný informační zdroj, i když se třeba mění jeho formát Stránka 13 / 16 (strana 20)
Přístupnost Proč přístupnost... 22 Zásady přístupnosti... 23 (strana 21)
Proč přístupnost absolutní počet uživatelů webu s nějakým handicapem je relativně velký určité weby v určitých státech musí ze zákona splňovat pravidla přístupnosti Přístupnost 14 / 16 (strana 22)
Zásady přístupnosti textová alternativa pro obrázky titulky k video/audio záznamům web by měl jít ovládat jen pomocí klávesnice podstatné informace by neměly být závislé na rozlišení barev dostatečně kontrastní písmo a pozadí stránka se rozumně zobrazí i při zvětšení/zmenšení písma Přístupnost 15 / 16 (strana 23)
Další zdroje informací Design stránek... 25 (strana 24)
Design stránek Desatero pro tvůrce stránek 1 Projekt, jehož cílem je přinutit výrobce prohlížečů dodržovat standardy jako HTML, CSS, DOM a XML 2 Stránky W3C o přístupnosti 3 Stránky o přístupnosti 4 Pravidla Ministerstva vnitra pro tvorbu přístupného webu 5 Generátor barevných schémat 6, která barevně ladí 1 http://web.archive.org/web/20020202060032/http://ioxy.com/tencommandments.html 2 http://www.webstandards.org/ 3 http://www.w3.org/wai/ 4 http://pristupnost.nawebu.cz/ 5 http://www.mvcr.cz/viewfile.aspx?docid=21025698&lang=cs 6 http://colorschemedesigner.com/ Další zdroje informací 16 / 16 (strana 25)