technologie4

[technologie4]

2. MATURITNÍ OTÁZKA / WEBDESIGN

VIZUÁLNÍ LOGIKA NÁVRHU WEBU

→ Vzhled a kompozice stránky, Jednoduchost, Kontrast, Opakování, Zarovnání

→ Kompozice, Optický střed, Geometrický střed

→ Pr��zdné místo

→ Stanovení cílů stránky, Obsah a jeho struktura, Náčrtek rozvržení prvků webu

→ Samostatná tvorba, Náčrt tužkou, Návrh v grafickém softwaru, Návrh na z��kladě fotografií

→ Výběr a psychologie barev ve webdesignu

 VIZUÁLNÍ LOGIKA

→

Rozmístění prvků stránky, aneb také vizuální logika je dle mého ten nejdůležitější aspekt, který tvoří dobrý design.

→

I nezručně vytvořená grafika, která je ovšem skvěle nakomponovaná, plní svůj účel dobře.

→

Rozmístění grafiky a textu na webové stránce je důležitější pro zaujmutí čtenáře a nasměrování jeho pozornosti. Správná hierarchie prvků i obsahu je také důležitá, neboť je to určitá neviditelná ruka, která vede oči návštěvníka stránkou.

→

Kvalitní kompozice prvků tedy dokáže určit prioritu informací a rozlišit jednotlivé prvky stránky, a tím v konečném součtu dosáhnout obecně vysoké kvality a použitelnosti webu. Stránky jsou pak vizuálně zajímavé a lahodí oku návštěvníka, který v nich bez problému nalézá a následně zpracovává informace bez jakýchkoliv problémů.

→

Dokážeme si poté bez problémů odpovědět na otázky:

→ Kam se nový návštěvník podívá nejdříve?

→ Jsou prvky přitahující největší pozornost opravdu pro návštěvníka důležité?

→ Nabízí design návštěvníkovi vše ve správném pořadí?

MINIMALISTICKÉ POJETÍ / JEDNODUCHOST

→

Profesionální tvorba webu se poslední dobou ubírá směrem k jednoduchému a minimalistickému pojetí.

→

Takový web postrádá výplňkové a nedůležité součásti, související prvky či informace slučuje a celkově vše co nejvíce zjednodušuje.

→

Stručně řečeno, minimalistický web vznikne ořezáním všeho nepotřebného, nadbytečného a obtěžujícího. Ovšem toto ořezání nesmí nikdy jít na úkor užitné hodnoty.

→

Minimalismus, čistý funkcionalismus obnáší při tvorbě webu řadu výhod:

→ Lepší zacílení obsahu

→ Obsahu je méně

→ Návštěvník věnuje prvkům větší pozornost

→ Uvědomuje si obsah stránky

→ Lépe se orientuje

→ Srozumitelný a osobitější web

→ Návštěvníci si ho oblíbí a rádi se na něj vracejí

→ Snadno používá a vynakládají malé úsilí, aby našli informace

→  Rychlejší načítání stránek

→ Snadnější a rychlejší tvorbu webu, stejně tak jako jeho následující údržbu a úpravu

→ Větší prostor pro kreativitu designéra

→ Web také nesmí nutit uživatele přemýšlet, ten musí jednat intuitivně a instinktivně a přemýšlet pouze nad obsahem. Proto vše musí být zřejmé a jasné doslova jako facka, neboť lidé díky své lenosti instinktivně vyhledávají jednoduchost a pohodlnost.

NEPSANÁ PRAVIDLA VIZUÁLNÍ LOGIKY

→

Kontrast elementů

→ Kontrast elementů umožňuje uživatelům přijít na to, které části stránky patří do určitého celku → například obsahu, které jsou rozdílné → obsah vs. oblast navigace. Odděluje tedy hlavní prvky a oblastní stránky a celkově grafický design organizuje obsah. Jednotlivé prvky tedy nesplývají v jedno velké moře nesouvisejících věcí a vztahů, které neexistují.

→

Opakování vizuálního stylu pro druhy elementů

→ Opakování vizuálního stylu pro určité druhy elementů (odkazy, obrázky, odstavce, tabulky) dává konzistentní vjem a uživateli dopomáhá k orientaci v obsahu. Podává také informaci o propojení a sdílení významu či funkci.

→

Zarovnání

→ Jednotlivé součásti obsahu stránky musejí být vizuálně k nějakému prvku zarovnány. Všechny související prvky by měly udržovat jednotnou precizní velikost odsazení od krajů a mezi sebou.

→ Ovšem v některých případech je důležité dodržovat také určitou blízkost → elementy, které jsou si v základě podobné či související, by měly být seskupeny u sebe. Stejně tak jako datum není odtrženo velkou mezerou od titulku, ale blízko pod ním.

KOMPOZICE A ZLATÝ ŘEZ

→

Uspořádání textu, grafiky, fotografií či architektury ve vymezené ploše nebo prostoru. Určuje proporční vztahy jednotlivých prvků tak, aby spolu vzájemně harmonovali.

 OPTICKÝ STŘED

→

Optický střed je základním a staletími praxe ověřený kompoziční poznatek. Jde o místo, kde nejdříve spočine oko pozorovatele. Text nebo prvek v této oblasti působí výrazně a vyrovnaně, jelikož tvar položený do optického středu se opticky jeví jako vzdušný a nepřitahovaný okraji stránky, na rozdíl od středu geometrického. Lidé s ním často pracují, aniž si to uvědomují, jelikož se při komponování řídí citem. A ti, kdo se jim neřídí, neznale komponují do geometrického středu.

UMÍSTĚNÍ TEXTU V PLOŠE

→

Obecně platí základní stručné pravidlo, jímž dosáhneme příjemného vizuálního účinku:

→ Vzdálenost textu od okrajů rámečku, barevné ploch, by měla být větší než mezera mezi slovy či řádky → řádkový proklad

 PRÁZDNÉ MÍSTO

→

Prázdné místo neboli „white space“ bych s mírnou opatrností mohl označit za grafický prvek, neboť je nezbytnou součástí jakéhokoli grafického návrhu.

→

Hraje také spolu s kontrastem a volbou barev nejdůležitější roli při zpřehlednění internetové stránky. Na mysli mám nejenom kompozici textu, ale i odsazení prvků, nadpisů a podobných elementů od sebe a od okrajů prvků, ve kterých jsou obsaženy. Prázdná místa totiž zpřehledňují stránku a nedělají z ní jedno velké splývající moře textu a grafiky.

 JEŠTĚ NEŽ ZAČNEME TVOŘIT DESIGN

→

Stanovení cílů stránek:

→ Na samotném začátku všeho si musíte do detailu stanovit základní cíle stránek, tedy jejich účel, co od nich očekáváme a co mají nabízet návštěvníkovi.

→ Stejně tak jako velké korporace, které každý svůj krok dopředu promýšlejí, aby nešláply vedle, či architekti, kteří se nejdříve seznámí s účelem každé stavby a následně věnují čas přípravě vizualizací a modelů, musíme i my věnovat před začátkem tvorby dostatek času stanovení důležitého základu, na kterém budeme dále stavět.

→

Obsah a jeho struktura:

→ Ve druhém kroku je na řadě popřemýšlet nad budoucím obsahem celého webu a jeho strukturou.

→ Je tedy třeba určit, co stránka bude obsahovat a jak tento obsah bude rozdělen do sekcí a podsekcí.

→ Toto dělení je nejlepší následně graficky rozkreslit formou schematického diagramu → vznikne nám tedy určitý přehled ve formě pavučiny, která obsahuje všechny stránky webu v určité hierarchii určující nadřazenost a podřazenost každé z nich.

→ Tento krok je důležitý pro tvorbu navigace a určitý předběžný přehled toho, jak moc budou stránky rozsáhlé, jelikož tento fakt je pro konečnou tvorbu designu také důležitý.

→ Dalším nejvhodnějším krokem je určitá předběžná příprava všech textů ještě před samotným designem. I když je pro nás možná nezvyklá, předejdeme tomu, aby nakonec bylo textu na vytvořený design hodně či málo.

→

Náčrtek rozvržení prvků webu:

→ Třetím krokem bude základní náčrt rozmístění všech prvků a součástí stránky → tužkou na papír či v grafickém editoru od ruky rozmisťujeme jednotlivé čtverečky s popiskem, představující konkrétní prvky (hlavička, navigace, vyhledávání sloupce, reklamní bannery apod.).

→ Důkladně přemýšlíme a hledáme nejvhodnější a nejlogičtější rozmístění všech prvků stránky

podle účelu webu, podle našich potřeb a potřeb cílové skupiny → nebereme zde tady zatím ohledy na detaily designu.

→ Tvorbu náčrtku jak pro rozložení prvků webu, tak pro samotný design nám značně ulehčí informace o potřebách webové stránky a znalost její struktury a obsahu získané z minulých kroků.

 SAMOSTATNÁ TVORBA DESIGNU

→

Z předchozích kroků jsme dokonale informováni o poslání budoucích stránek, o jejich předpokládaném či ještě lépe přesném obsahu a struktuře a také jsme vybaveni náčrtkem o rozvržení jednotlivých prvků, který jsme rozebírali alespoň s jedním člověkem.

→

Jsme tedy připraveni začít pracovat na finálním designu → máme tu možnosti, jak dále postupovat:

→ náčrt designu tužkou

→ přímo ve Photoshopu

→ fotografií na míru

→

Před tvorbou designu složitějšího webu je vhodné si nejprve připravit jednoduché rozmístění jednotlivých prvků stránky tužkou od ruky.

→

U všech postupů nesmíme zapomínat na důležitou roli loga. Pokud logo pro web již máme, musíme mu web přizpůsobit na míru → dobře ho do webu zakomponovat a zvolit barvy, které s ním budou ladit.

 NÁČRT DESIGNU PŘEDEM

→

Na samotném začátku začínáme v klidné místnosti s obyčejnou tužkou, dostatkem čistých papírů A4 nebo ještě lépe A3 a hlavně zapnutou fantazií.

→

Dle předem vytvořeného náčrtku rozložení jednotlivých prvků již na papír detailně pozicujeme jednotlivé prvky stránky, vhodně vyplňujeme položky navigace dle schématu struktury stránky a dle našeho mínění tvoříme a komponujeme nadpisy, slogany, loga, vyhledávání a poté i detaily grafického designu.

 →

Začínáme črtat design tak, jak bychom ho poté rádi viděli ve skutečnosti. Můžeme také vytvořit několik různých verzí a vzít z nich do té finální to nejlepší.

→

Výhodou tohoto postupu je to, že si vše můžeme v klidu rozkreslit a připravit a díky tomu přemýšlet nad mnoha různými řešeními určité věci a vybrat z nich tu nejvhodnější.

→

Z předběžného náčrtku designu můžeme posuzovat jeho funkčnost a logičnost, Také ho můžeme jednoduše probírat s dalšími lidmi, zda je pro ně srozumitelný a nabízí jim věci, které by na něm hledali.

→

Poté je zpracování úprav tužkou rychlejší než přepracování již vyhotoveného designu

 SCHÉMA PŘÍMO VE PHOTOSHOPU

→

Tento typ postupu již nevyžaduje kreslířské schopnosti, s náčrtkem rozvržení prvků designu usedáme přímo v Photoshopu, do určité omezené plochy, která závisí na typu webu a rozlišení pro optimalizaci, začneme precizně zasazovat jednotlivé prvky stránky, tak jak je máme na papíru.

→

Poté doplníme logo, nadpisy a další popisky a začneme jednotlivé boxíky stylizovat, upravovat a pracovat s nimi dokud nemáme výsledný design.

→

Tento postup je nejvhodnější, pokud tvoříme čistý design dle precizní mřížky, jelikož se celý proces odehrává přímo ve Photoshopu.

 DESIGN FOTOGRAFII NA MÍRU

→

Tento druh postupu je méně častý, ale v dnes patří k hlavním trendům. Vhodný je tehdy, když máme pro design webu po ruce profesionální a opravdu vysoce kvalitní fotografie, které mluví samy ze sebe. Design poté vytváříme na míru fotografii, jež tvoří základ prezentace → použité barvy volíme tak, aby ladily s fotografií, stejně tak jako zvolená kompozice či styl.

  VÝBĚR A PSYCHOLOGIE BAREV

→

Je obecně známo, že barvy mají psychologické účinky → čím více je člověk citově založený, tím je účinek silnější. Faktem je, že extravertní lidé dávají přednost teplým barvám, jako jsou žlutá a červená, zatímco introvertům lépe sedí studené barvy, jako je zelená a modrá. Při tvorbě webu je tudíž důležité si uvědomit, že volba barevnosti má zásadní vliv na vnímání stránky, její poutavost a oblíbenost.

→

Naším cílem tedy je, abychom určitým zvoleným barevným schématem dosáhli požadovaného dojmu, ladili design s obsahem a zaměřením stránek a podbarvili pocity, či zvýraznili emoce návštěvníka.

→

Teplé barvy se obecně používají ke zdůraznění a studené barvy ke zmenšení důrazu. Světlejší barvy v kontrastu s tmavšími zaujmou náš zrak jako první.

→

Výběr barev by se neměl přehánět → maximálně pět barev + jejich lehké odstíny.

 →

Jelikož 15% lidí má určitou vadu zraku, je potřeba při volbě barev brát ohledy i na tuto nezanedbatelnou část populace, která vnímá barvy jinak než s normálním viděním. Ověřit si, jak vámi vybrané barvy uvidí lidé s určitou oční vadou, můžete na generátoru barevných schémat Petra Staníčka.

→

Obecně bychom se měli vyhýbat následujícím barevným spojením:

→  oranžová a žlutá,

→  červená a oranžová,

→  zelená a žlutá,

→  fialová a modrá,

→ zelená či žlutozelená a fialová.

 Při výběru barev, barevných schémat a ověřování jejich kontrastu pomoct generátory barevných schémat.

→

www.colorlovers.com → barevné vzorníky

[technologie4]

1. MATURITNÍ OTÁZKA / WEBDESIGN

WEBDESIGN

→ Vnímání stránky uživatelem, Ustálené umístění prvků na webové stránce

→ Psychika uživatele, Rozdílné vnímání ženy a muže při prohlížení webu

→ Účel grafiky na webu

→ Rozměry stránky, Relativní rozměry stránky

→ Záhlaví stránky, Navigace, Vyhledávání, Obsahová část, Zápatí stránky

ÚVODEM

→

Vědění je síla aneb trocha nezbytné teorie.

→

Myslíme-li to s tvorbou designů internetových stránek vážně, nesmí nás minout nezbytná teorie. Proto jsem si v této kapitole dal obzvlášť záležet, snažím se zde nejenom obsáhnout své doposud nasbírané zkušenosti, ale též vytvořit ucelený přehled všech důležitých informací a poznatků, které se tvorby designu webu nezbytně týkají. Takže se nyní pohodlně usaďte, nenechte se ničím rušit a zapněte své soustředění, protože kvalitní design je hlavně o promyšlených detailech.

JAK NÁVŠTĚVNÍK VNÍMÁ STRÁNKU

→

O internetové stránce si člověk dokáže vytvořit silný podvědomý úsudek až za pár desetin vteřiny.

→

Logicky vás napadne, že za tak krátkou dobu nelze přečíst ani titulek. Hlavním aspektem, který vytváří podvědomý postoj k internetové stránce jako celku, je právě její vzhled → pokud se kvalita designu návštěvníkovi zlíbí, podvědomě si toto své hodnocení přenese i na obsah ve formě určitého stupně důvěry.

→

Jde o první základní dojem, na kterém návštěvník dále staví, podobný tomu, když člověka hodnotíte podle vzhledu nebo prodejnu podle jejího zevnějšku. Tento dojem provází návštěvníka jako stín po celém webu, ovlivňuje jeho důvěru k obsahu, nabízeným výrobkům a službám.

→

Podílí se na jeho rozhodnutí, zda nakoupí, využije služeb, přečte článek či vykoná jinou,námi cílenou činnost.

→

Pouze poutavý grafický design sám o sobě bez obsahu vám výrobek či službu neprodá. Zato poutavý obsah může grafiku postrádat, ale stále je na tom hůře než v případě spojení kvalitní grafiky a kvalitního obsahu v jeden promyšlený celek → takto se dosahuje nejlepších výsledků.

 ZPŮSOB USPOŘÁDÁNÍ INFORMACÍ NA WEBU

→

Rychle, honem.

→

Uživatelé mají rádi přehledné stránky a také je rádi rychle procházejí, aby v co nejkratším čase dosáhli svého cíle. Znáte to sami při hledání.

→

Zadáváte dotaz do prohlížeče, klepete myší, začne se cosi načítat: 1% … 2% …, vracíte se zpět, klepete na další odkaz, projíždíte stránku a přečtete sem tam nadpis, zvýrazněné slovo či první odrážku, a pokud se na ní nenachází nic, co by vás zaujalo, vracíte se zpět.

→

Nebo snad pečlivě čekáte a následně pročítáte autorem připravený úvodní text a každý odstavec, na který narazíte? Nečtete, protože víte, že nemusíte číst vše → stránky si pouze prohlížíte a hledáte to, pro co jste je navštívili.

 MNOŽSTVÍ GRAFIKY A TEXTU

→

Množství grafiky, ale i textu na stránce by tedy mělo být omezeno s ohledem na co nejmenší datový objem a přehlednost.

→

Na webu si grafik nemůže dovolit to, co by si dovolil v časopisech a katalozích, kde jsou rozsáhlé ilustrace a fotografie, zaplňující celou stránku.

→

Ovšem i zde jsou určité výjimky pro on-line portfolia grafických umělců, animátorů a flashařů, či multimediální prezentace automobilů, výrobků apod. Ale i zde by se návštěvníkovi měla naskytnout příležitost zabrousit na rychlou alternativu stránek.

→

V dnešní době se početnost atraktivních obrázků a videí na webu zvyšuje, odvíjí se od cílové skupiny a od používaných zobrazovacích zařízení

 ZAUŽÍVANÉ UMÍSTĚNÍ PRVKŮ NA WEBU

→

Zvyk je železná košile.

→

Stejně tak, jako jste zvyklí, že hlavní reportáž novin je s velkým nadpisem na titulní stránce, či je shluk číslic vedle jména v telefonním seznamu bude nejspíše oním číslem, jsou uživatele internetu obecně zvyklí na určité rozmístění základních prvků stránky, ovládání a jednotný styl fungování věcí z webu, které často navštěvují, a proto od ostatních webů očekávají to samé.

→

Návyky uživatelů internetu jsou pro nás velmi důležité, neboť na nich stojí základní vnímání stránky.

→

Jsou pro nás také velmi užitečné, protože jich můžeme jednoduše využít. Pokud hodláte od zajetých zvyklostí upustit, musíte si to velmi dobře promyslet.

→

Na co jsou uživatelé zvyklí:

→

1 / Logo viditelně a dominantně umístěné v levém horním rohu stránky.

→

2 / Navigační menu umístěné v horní části stránky horizontálně pod logem či vertikálně vlevo.

→

3 / Vyhledávání v horní pravé části stránky s tlačítkem označeným hledat.

→

4 / Tlačítka, která se jako tlačítka opravdu tváří.

→

5 / Odkazy, které jsou podtržené a barevně odlišené od okolního textu.

→

6 / Zabarvení navštíveného odkazu.

→

7 / Označení aktuální stránky, na které se uživatel nachází, v navigaci.

→

8 / Kontaktní informace či odkazy vedoucí na tyto informace na spodní části stránky

ZÁKLADNÍ TESTOVÁNÍ ROZMÍSTĚNÍ PRVKŮ

→

Elementy svého webu odporující zvyklostem odhalíte jednoduše, když k počítači posadíte své rodiče či kamarády a sledujete, jak se na vašem webu chovají.

PSYCHIKA UŽIVATELE

→

Psychika, reakce a předpoklady muže a ženy nejsou identické, stejně jako u středoškoláka či důchodce a to fakta je pro tvorbu kvalitního webu potřeba zohlednit.

→

Je tedy záhodno popřemýšlet nad cílovou skupinou, tedy lidmi, které chceme na svůj web přitáhnout a kteří budou web používat → a těmto lidem se snažit při tvorbě webu co nejvíce vyjít vstříc.

→

Chceme-li tedy z designu vytěžit maximum, netvoříme web pro průměrného uživatele, ale pro průměrného uživatele cílové skupiny.

→

Zkuste při tvorbě webu přemýšlet jako lidé, kteří budou váš web používat. Snažíte se na něj nahlížet z jiného úhlu pohledu a celkově se vžít do pozice uživatele → z toho pohledu je občas mnohem jednodušší činit určitá rozhodnutí.

→

Pokuste se z cílové skupiny pro svůj web vytáhnout zástupce určitých zájmových oblastí a poté přizpůsobte členění a obsah stránek tak, aby každému z nich nabízely věci, které může hledat (např. podnikatel bude hledat na on-line zpravodajství jiné informace než důchodkyně).

 ROZDÍLNÁ PSYCHIKA MUŽE A ŽENY

→

Muž je obecně zaměřen na cíl, rád analyzuje, porovnává a činnosti provádí systematicky a logicky. Dobře se vizuálně orientuje, koncentruje a nezabývá se detaily. Zato očekává servírované informace a fakta. Zajímají ho tabulky, grafy, koláče a stejně jako ženu i fotky a ilustrace.

→

Žena je zaměřena na vztahy, má schopnost vcítit se a ráda se řídí intuicí a sází na zkušenosti, detaily jsou pro ni důležité. Očekává přátelské a milé rozhraní s bohatou a pěknou grafikou, upřednostňuje jednoduchou cestu k informacím.

 ÚČEL A ROLE GRAFICKÉHO DESIGNU WEBU

→

Grafický design nehraje na webu hlavní roli, ale to neznamená, že jeho role je, na rozdíl od hlavní role obsahu, nedůležitá! Návštěvník se na webu nejdříve rozhoduje podvědomě a až poté racionálně → při racionálním uvažování hraje hlavní roli informace, ovšem návštěvníkovo podvědomí zpočátku ovlivňujeme beze slov.

→ 

Design je doplňkem webu, nepřebírá roli obsahu a taktéž se mezi něj a návštěvníka nestaví.

→ 

Design vyjadřuje účel a poslání webu. Design by tedy návštěvníkovi měl rychle odpovědět na to, kdo je, co mu stránka nabídne a co je jejím účelem.

→

Design logicky člení informace atraktivní a přehlednou formou → čili snaží se podávat návštěvníkovi informace v co nejatraktivnější a nejpřehlednější formě.

→ 

Design podbarvuje návštěvníkův podvědomý názor na web a zvyšuje jeho důvěru k obsahu webu.

→

Snaží se, aby se web co nejširším spektru návštěvníků líbil, aby se při jeho procházení cítili dobře, byli pozitivně naladěni a měli důvod např. pro nákup či další návrat.

→

Design usnadňuje orientaci a pohyb uživatele na webu. Návštěvník si je jistý, co představuje navigaci, obsah či jiné součásti stránky, které jsou pro jeho pohyb po webu důležité.

→ 

Design se vzhledově snaží vycházet z vizuální identity firmy, jako je například barevné schéma a styl firemního loga.

→ 

Design zvyšuje přístupnost a použitelnosti internetové stránky. Nestaví návštěvníkovi do cesty jakékoliv překážky a celkově mu usnadňuje pohyb po prezentaci.

→ 

Design učiní web zapamatovatelným, unikátním, originálním a kvalitním, aby se uživatel zpátky na web rád a bez problémů vracel.

→

Pokud výše sepsaným účelům grafiky na webu porozumíte, ovládnete je a dokážete je aplikovat, máte z velké části na poli webdesignu vyhráno.

PŘÍSTUPNOST A POUŽITELNOST

→

Přístupné stránky celkově respektují uživatele → jeho technické vybavení, fyzické i psychické dispozice, znalosti a vzdělání. Stavba a obsah přístupných stránek jde tedy co nejvíce vstříc uživatelům zastaralých prohlížečů, nevidomým, barvoslepým, dyslektikům stejně tak jako zdravému uživateli s moderním zázemím.

→

Použitelné internetové stránky jsou přehledné, srozumitelné a hlavně snadno ovladatelné. Uživatel tyto stránky rychle pochopí, snadno se v nich orientuje a bez problémů je používá.

ROZMĚRY STRÁNKY

→

Šířka webové stránky je závislá na velikosti okna, ve kterém se zobrazuje, a na rozlišení výstupního zařízení. Aktuální statistiky naleznete v přehledných tabulkách na adrese http://toplist.cz/global.html

 FIXNÍ ROZMĚRY V DŘÍVĚJŠÍCH LETECH

→

Optimalizace webu pro rozlišen�� 800x600 je okrajová, je to rozlišení, které bylo nejpoužívanější v dřívějších letech. Někteří uživatelé brouzdají s otevřeným postranním či horizontálním panelem, jelikož jsou zvyklí na úzké 770pixelové weby a úzké. Dvousloupcové 770pixelové weby jsou příjemné na oko a dobře se v nich orientuje na rozdíl od širších třísloupcových.

→

Při tvorbě designu webu je rozhodován o rozměrech závislé na jeho typu, účelu a obsahu. Tak či onak, může si vybrat, zda chceme optimalizovat pro rozlišení 800x600,1024x768 či nejrozšířenější 1366x768. Ovšem tyto rozměry předpokládají, že okno prohlížeče je maximalizováno, čili roztaženo přes celou plochu obrazovky. Navíc musíme brát v potaz i okraje prohlížeče a připočítat určitou rezervu.

→ 800x600: 770x400 pixelů zobrazitelné plochy bez posuvníků

→ 1024x768: 1000x568 pixelů zobrazitelné plochy bez posuvníků

→ 1366x768: 1340x568 pixelů zobrazitelné plochy bez posuvníků

→  statistiky nejpoužívanějších rozlišení zobrazovacích zařízení https://gs.statcounter.com/screen-resolution-stats

→

Pokud bude design širší než šířka zobrazitelné plochy prohlížeče, zobrazí se uživatelsky nepříjemný horizontální posuvník. Uživatel hledající informace musí navíc rolovat i horizontálně a po určitém čase mu dojde trpělivost a odchází.

→

Ovšem vertikální posun nedělá nikomu vůbec žádné problémy, lidé jsou na něj, na rozdíl od horizontálního zvyklí → pár intuitivních otočení kolečkem na myši jim nečiní žádné problémy, pokud je ovšem zřejmé, že stránka níže dále pokračuje.

→

Stránky se mimo prohlížeč také musejí dát vytisknout na list papíru. Je nepřípustné tisknout všechny prvky stránky spolu s jejich barvami pozadí textu, proto se pro tisk určí pouze textová varianta záhlaví, obsahová část a patička → vše černé na bílém.

 RELATIVNÍ ROZMĚRY U RESPONZIVNÍHO WEBU

→

Další možností je tzv. gumový design, což je layout (rozložení stránky), jehož velikost určují relativní jednotky, a tudíž se přizpůsobuje velikosti okna prohlížeče. Toto řešení umožňuje webu rozprostřít se po celém okně prohlížeče při jakékoliv velikosti tohoto okna, tedy při jakémkoliv rozlišení.

BEZPEČNÁ OBLAST NAD OHYBEM STRÁNKY

→

Bezpečná oblast nad ohybem stránky je zobrazitelná oblast bez rolování, vymezená oknem prohlížeče.

→

Jedná se o to první, co návštěvník uvidí, a už jen tento fakt vám určitě objasnil, že zmíněné oblasti musíme věnovat nejvíce pozornosti. V horní části obrazovky by se tedy měla nacházet většina grafiky, položky a prvky s nejvyšší prioritou a nejvyšší hustota odkazů, která se pod ohybem (tedy na další obrazovce) postupně snižuje, spolu s důležitými položkami, prvky a grafikou.

 ZÁHLAVÍ STRÁNKY

→

Záhlaví, hlavička stránky je spolu s navigací nejdůležitějším prvkem na stránce, který by se měl snažit o vysokou viditelnost jakožto prvek, jenž stránku v podstatě identifikuje a z letmého pohledu návštěvníkovi dává jasně najevo, čeho se server týká a co na něm najdeme. Záhlaví stejně jako zápatí sjednocuje všechny stránky webu, podobně jako záhlaví a zápatí v dokumentu.

 VYHLEDÁVÁNÍ

→

Pole pro vyhledávání je další neocenitelnou součástí každých větších stránek, protože nabízí návštěvníkovi možnost dostat se co nejrychleji k hledaným informacím. Z toho důvodu musí být vyhledávací pole jasně viditelné a návštěvník ho nesmí dlouho hledat. Dle zvyklostí by se pole pro vyhledávání mělo nacházet v horní části stránky, nejlépe zakomponované do hlavičky.

→

Pro jednoduché fulltextové vyhledávání je nejvhodnější zadávací pole a tlačítko(s ikonkou lupa a popiskem „ Hledat “ uvnitř boxu pro vyhledávaná klíčová slova), díky kterému se ani nemusí vyhledávací pole uvozovat slovy „Vyhledávání“, jelikož tuto funkci zastane vyhledávací box.

→

Při navrhování vyhledávání není dobré používat jiné matoucí znaky a slova, jako šipka, go či ok.

 OBSAHOVÁ ČÁST

→

Obsah úvodní stránky je další bojiště, kde svádíme boj o zaujmutí návštěvníka, podobně jako obálky časopisů či výkladní skříně. Textový obsah a grafické doplňky jsou zde proto logicky a atraktivně uspořádané a podávají přehled toho nejlepšího, co daný server nabízí.

→

Mimochodem zajímavý obsah je často důvodem vysoké návštěvnosti stránek.

Text v obsahové části se obecně snažíme udržet čitelný vysokým kontrastem barvy textu s neagresivní barvou podkladu. Struktura textu by měla být co nejjednodušší a o přehlednost se postaráme používáním tučného písma, kurzívy, barev, seznamů, ikonek apod.

→

Vyvarujte se nevkusnému zarovnávání odstavců textu na střed či roztažení textu zarovnáním do bloku, které mezi slovy tvoří různě široké mezery.

 ZÁPATÍ STRÁNKY

→

Zápatí stránky neboli patička, je grafické ukončení stránky, na jejím samotném konci. Jejím úkolem je nejen stránku ukončit, ale také nést určité informace a odkazy, které v ní návštěvník často hledá.

→copyright a právní ujednání

→stáří stránky

→ kontaktní informace

→ odkaz o prohlášení o přístupnosti

→ odkaz na RSS kanál

→ odkaz na tisk stránky

→ odkaz na mapu webu

→ odkaz na přesunutí k hlavní navigaci (nahoru), pokud délka stránky přesahuje více než dvě obrazovky

→

Na složitějších stránkách je vhodné do patičky umístit také textovou kopii globální navigace, její umístění a vzhled se ovšem musí dobře promyslet, aby byl smysl na první pohled jasný.

[technologie4]

4. MATURITNÍ OTÁZKA / WEBDESIGN

ANIMACE VE WEBDESIGNU

→ Základna účinného interaktivního designu

→ Stručné dějiny animace na webu

→ Typy webové animace

→ Postup při oživení webu animací

→ Výhody animace pomocí CSS3

   ZÁKLADNA UČINNÉHO INTERAKTIVNÍHO DESIGNU

→  

Animace je jedním z trvalých snů lidstva. Tato teorie vznikla při zkoumání jeskynních maleb, na některých z nich běžně vidíme tvory nakreslené s příliš mnoha končetinami.

→  

Animace je změna a pohyb. Když chceme ve svých dílech zachytit život, nejblíže se k tomuto cíli asi dostaneme s animací. Patrně proto lidé vždycky říkají něco jako “animace oživuje naše weby (nebo prezentace, nebo něco jiného)”. Tato fráze se patrně nadužívá, elegantně však vyjadřuje účel animace ve webovém designu.

→

Právě iluze pohybu, pokud je aplikována správně, říká uživatelům, že skutečně něco udělali. Úspěšně interagovali s rozhraním a způsobili, že se něco změnilo.

→

Animace spouští v uživatelích stejné pocity (nebo přinejmenším velmi podobné pocity), jako když jsou v interakci s fyzickými objekty. Když se ale animace používá řádně, má napodobovat interakce skutečného světa, imitovat skutečný svět.

 STRUČNÉ DĚJINY ANIMACE NA WEBU

→  

Než přikročíme k praktičtějším věcem, podívejme se, jakými cestami se animace na Internetu dostala do svého současného (a velmi skvělého) stavu. Všechno to vlastně začalo s gify…

→

Soubory .gif byly zavedeny v roce 1987, v době, kdy Internet teprve začínal vypadat podobně, jak ho (více či méně) známe dnes. Tehdy začala éra skotačících dítek a dalších hororů, na které raději zapomeňme.

→

Přesto popularita gifů něco vyjevila. Lidé chtěli dostat na své webové stránky animace. Víte, mnozí z nich tehdy vůbec neuvažovali o způsobech, jakými by bylo možné zlepšit použitelnost. Všechno se točilo jen okolo toho, jak dostat do statické sféry webové stránky něco stylovosti a trochu života. Když byl potenciál souborů .gif vyčerpán, přáli si lidé mít na svých webech nové, lepší animace. A zvuky! Ach, rozkošné zvuky. Jak úžasné by bylo, kdyby lidé otevřeli vaši webovou stránku a hned se jim začala přehrávat vaše nejoblíbenější písnička? A patrně skutečná píseň, originál, … žádná z ubohých MIDI náhražek, jasné?

→

Tvrdou školou života byl pro nás v tomto ohledu Flash. Nezapomínejme však, že Flash byl tehdy hodně úžasný. Skutečně, byla to inovace. Byl to pokrok. Byl skvělý.

→

Bez ohledu na to, jak byl později zneužit, musíme uznat, že Flash umožnil dělat s Internetem takové věci, jaké jsme doposud neznali. Rozvinul kreativní horizonty, vytvořil pracovní příležitosti pro lidi ve zbrusu novém odvětví, dal nám “webové karikatury (web cartoons)” a to nejlepší, co se vynořilo v devadesátých letech (kromě Nirvany): flashové hry. Ještě dnes považuji tohle všechno za velmi návykové.

→

Jak šel čas, mnozí designéři přešli u menších věcí k animacím založených na JavaScriptu, což je případ rozvíracích menu a jiných navigačních prvků. Bylo to přívětivější pro SEO (optimalizace pro vyhledávače), pokud jste to dělali řádně. Jiní používali JavaScript jen proto, že tak FrontPage a DreamWeaver přepínaly obrázky tlačítek, ale i malý pokrok je pokrok.

→

Asi uprostřed poslední dekády však už W3C pracovala na zařazení animace do specifikace CSS. V roce 2009 byl vydán první veřejný koncept specifikace CSS animace.

→

A dnes? Nyní máme k dispozici způsoby, jak vynutit hardwarovou realizaci, můžeme kombinovat CSS animace se soubory SVG, knihovnami JavaScriptu rozšiřovat funkcionalitu základní animace, a další věci.

→

Nyní už hledáme víc, nestačí nám jen dodat webům trochu stylovosti. Nyní se snažíme zlepšit použitelnost, informovat a vzdělávat uživatele, a usnadnit jim zjistit, co právě dělají.

→

Animace už pro webové designéry není žádnou novinkou. Ve filmu se stala základnou pro zcela nový druh vyprávění příběhů. Pro nás se stala základnou účinného interaktivního designu.

→

Zaměřte se na animaci z hlediska jejího vztahu k webově založeným rozhraním a aplikacím, protože nikdy k tomu nebyla vhodnější doba než dnes. Technologie ještě není plně zformována (bude někdy?), ani plně podporovaná (bude někdy?), nacházíme však nové cesty, jak ji doručovat lidem, aniž bychom museli používat zásuvné moduly (pluginy) či patentovaný kód.

→

Pokud animaci založíme převážně na otevřených standardech, především ji skutečně bude schopno vidět víc lidí. A s tím, na co se máme nejnověji soustředit, že má být hnacím motorem interakcí, to bude pěkné, moc pěkné.

→

Dá se také říci, že většina webů nepotřebuje vůbec žádné animace kromě těch, které se týkají prvků uživatelského rozhraní a činí je „skutečnějšími“ a přirozenějšími.

 TYPY WEBOVÉ ANIMACE

→  

Animace prvku rozhraní

→ Nejsem si jist, zda je to nejběžnější typ animace, ale domnívám se, že patrně ano. A tak by to i mělo být. Je to, podle mého mínění, nejužitečnější druh animace, jaký máme k dispozici.

→ Podobně jako jsem řekl v úvodu, právě animace umožňuje uživateli dozvědět se, že jeho akce (například kliknutí) byla zaregistrována. Kliknutí bylo katalyzátorem potřebným k tomu, aby se něco stalo, ať už je to navigace na jinou stránku, nebo že se otevře nějaký postranní panel či modální okno, nebo se odešle email z kontaktního formuláře.

 → Je pěkné, že máme tuto zpětnou vazbu, znamená ale i něco navíc. V současném světě plochého designu je podstatná. Lidem musí být jasný rozdíl mezi rozhraním a dekorací. Zpětnou vazbu, kterou uživatelé potřebují, jim dodáme, když patřičné prvky při interakci jednoduše a decentně animujeme.

→ Stačí něco jednoduchého, jako že se změní barva pozadí tlačítka nebo tlačítko poskočí. Do této kategorie patří také animace, které způsobují, že postranní panely „kloužou“ po stránce, a také ty, které jakoby nafouknou přinášené modální okno.

   →  

Animace indikující, že se na něco čeká

→ Opět je vše o tom, poskytnout uživateli zpětnou vazbu. Jedná se o animace, které uživateli ukážete, když se něco děje jen v pozadí, aby neznervózněl.

→ Užitečnost těchto animací byla prokázána už dávno, jakmile se objevila první grafická rozhraní. Začínalo se tím, že se kurzor myši změnil na přesýpací hodiny, a také se objevil ukazatel průběhu. Společnost Apple zavedla v jisté době ikonu „duhového větráku“. Říkalo se jí všelijak: rainbow wheel, spinning beach ball of death, spinning pizza of death neboli SPOD, apod., a v oknech se elegantně ukazovalo, jak soubory plují z jedné složky do jiné.

→ Tyto konvence byly přijaty na Webu hned, jak to bylo možné, a mělo to dobrý důvod. Když totiž lidé někde klikli nebo ťukli a nic se nestalo, klikali či ťukali pořád dál. Možná tím vyjadřovali svou frustraci. Možná opravdu věřili, že tím věci urychlí.

→ Každopádně, když uživateli řeknete, co se děje, třeba jen prostinkým ukazatelem průběhu, značně se jim uleví … dokonce i těm, kdo už pracují s počítačem dlouhá léta.

→ Beegit, aplikace určená pro psaní všeho možného, ve které jsem napsal i editoval tento článek, poskytuje šikovný “kruhový ukazatel průběhu“, který mi říká, kdy už jsou všechny mé obrázky nahrané, jak to vidíte v levém horním rohu modálního okna.

    →  

Animace vyprávějící příběhy

→ Vyprávět příběhy pomocí animací se už dnes neomezuje jen na karikatury v podobě krátkého komiksu, tzv. cartoons. O nich vlastně nebudu vůbec mluvit. Jde mi o něco jiného. Někteří lidé totiž navrhují weby tak, že pokud uživatel nějak interaguje s webem (například: posouvá se dolů po stránce), spouštějí se animace vyprávějící nějaký příběh.

→ Běžně se takto postupuje u stránek, které předvádějí nový výrobek tím, že ho “sestaví” přímo před vašima očima. Jiné přehrávají něco, co se více podobá komiksu, nějaké postavy vás provázejí po stránce i všude jinde.

→ Účinnost těchto animací je … diskutabilní. Typicky není jejich záměrem zlepšit použitelnost, ale udělat dojem na uživatele, a dodat mu trochu kontextu pro předmět stránky. Může to být snaha pochlubit se, co daný výrobek dovede, nebo podělit se o zkušenosti, které firmu přivedly k této kreaci.

→ Zda docílí toho, co si předsevzaly, bude patrně záviset na kvalitě samotných animací, zda přespříliš neovlivní výkon webu a samotný obsah stránky. Pokud uživatel na webu nenajde, co hledá, ani všechny animace světa to nenapraví.

→ Dvě ukázky, které se mi opravdu líbí, a to hodně, pocházejí od značek, které mají spoustu zkušeností s věcmi tohoto druhu: Apple a Sony.

   →  

Čistě dekorativní animace

→ Někteří lidé dávají na web animace, které neslouží k ničemu jinému, než být vidět, což může dopadnout všelijak. Vyplatí se to? Ano i ne…

→ Já obvykle radím se jich vyvarovat, protože ruší. Přece chcete oči lidí upoutat na důvody, proč by si měli koupit, co prodáváte, a na vaše výzvy k akci. Chcete, aby zde dostali, pro co si sem přišli. Pokud web neobslouží některé záměry uživatele, nebo pokud bude uživatel příliš vyrušován, když se pokouší určit účel webu, možná se sem už nevrátí.

→ Dekorativní animace by měla být naprosto skrytá. Ukažte ji až poté, co lidé dokončí vaši výzvu k akci. Můžete také zařadit drobné animace, které se spouštějí jen tehdy, když uživatel učiní něco velmi specifického, například když podrží kurzor na něčem malém v záhlaví nebo zápatí.

   →  

Animace v reklamě, neboli: svědomí říká ne, šrajtofle ano

→ Reklamy. Pro někoho příjem, pro jiné pohroma. Přidejte k nějaké reklamě animaci a bum ho! Přitáhne pozornost i proti jejich vůli. Je to nepodmíněný reflex, bezděčná reakce.

→ Přidáte zvuky, a hned budou intenzívně nenáviděné … také bezděčná reakce.

→ Je to ale téměř nevyhnutelné. Chcete-li lidi přimět, aby se dívali na vaše reklamy, skvělý způsob je reklamy animovat. Tím se možná stanete nevítaným na některých moderních reklamních sítích, které samy sebe vychvalují, že mají „nerušivé reklamy“, ale pokud by animované reklamy nepůsobily, neexistovaly by.

→ Taková animace však vnáší stejnou potíž, jakou jsme už zmínili u dekorativní animace: ruší uživatele, odvádí pozornost od toho, co chcete, aby udělal. Ve světě online prodejů může být odvracení pozornosti pro prodejce smrtící.

→ Nakonec to ale zůstane na vás, vy budete muset zvážit všechna pro a proti. Žádné reklamy, nerušivé reklamy, nebo animované reklamy, všechno je otázka vhodného kompromisu.

 →  

Animace úvodních obrazovek na webu,

→ Intra webových stránek, často odvádějí pozornost od obsahu webové stránky a oddalují akci uživatele.

 POSTUP PŘI OŽIVENÍ WEBU CSS3 ANIMACÍ

→  

Během práce na profesionálních e-shopech či webových prezentacích ve vývojovém týmu se držíme vždy nejpřirozenějších postupů tvorby.

→

Nejdůležitějším základním kamenem všech internetových prezentací je jejich obsahová stránka. Když máme dokonale vyřešený obsah webu, můžeme teprve postoupit k dalším vývojovým fázím.

   KDY A PROČ DOCHÁZÍ K NASAZENÍ INTERAKCE

→  

Webová prezentace je navržena po obsahové stránce a je vytvořen vytvořil funkční prototyp, který obsahuje základní prvky pro navigaci a celou obsahovou stránku webové prezentace, nabízí již plná funkcionalita a obsahovost stránek a už nyní by bylo možné web spustit do provozu.

→  

Po představení prototypu stránek přichází na řadu vizuální složka projektu, která udělá z vaší prezentace obchodu zajímavé prostředí pro vaše uživatele.

→  

Svým způsobem se začne projekt konečně rýsovat do podoby odpovídající grafickému návrhu a stane se tak přívětivějším na pohled.

   →  

Zde lze zvolit cestu strohého odvedení úkolu pouhým naroubováním kódu na obrázkové výřezy z grafického návrhu na prototyp stránek. V týmu vyvíjejícím web se však každý z členů snaží přemýšlet rozdílně a komplexně svou práci odvádět s těmito ohledy společně s nejmode-rnějšími přístupy tvorby webových prezentací.

  →  

Právě díky tomuto přístupu přichází velice důležitá část projektu. Zde společně UX designér a webdeveloper kooperují a vytvářejí sadu základních prvků, které jsou na stránkách využity a společně těmto prvkům navrhují komplexní chování při interakci uživatele, které dodává webové prezentaci nový rozměr.

→

Až po takto navrženém chování přichází řada na nasazení grafického návrhu na kostru prototypu prezentace.

→

Poznatelný je zde ve výsledku rozdíl mezi zaslaným grafickým návrhem stránek statických obrázků oproti zažití si nové zkušenosti a interakce webové prezentace oživené o animované prvky reagující na chování uživatele.

→

Takto povzbudívé chování vaší internetové prezentace vytváří u svých návštěvníků pocit přívětivé interakce a okamžik ponoření se do prostředí neboli imerzi, kterou můžeme znát také z počítačových her či jiných interaktivních prostředí.

→

Velice důležité je u toho návrhu chování však nepřekročit pomyslnou hranici únosnosti vynechat náhodné zinteraktivnění každého prvku webu a zvolit raději odměřený přístup, který musí vždy odpovídat zacílení vaší prezentace a jeho působení. Proto tato disciplína spadá jako jedna z mnoha pod hlavičku UX design a odpovídá tedy jistému řádu.

 VÝHODY ANIMACE POMOCÍ CSS3

→

Animace se na internetových stránkách objevují již řadu let. Proč je novému způsobu tedy věnován tento příspěvek? Důležitým faktem animací pomocí CSS3 je jejich možná využitelnost a fakt že jsou nativní.

→

Jejich předchůdci jakým je například využití Flashe byly zapouzdřeny ve vlastních technických kontejnerech, nebo bylo možné využít prostředky, které svým původem nebyly pro tento účel tvořeny, např. javascriptem.

→

CSS3 animace mají tedy svým předchůdcům výhodu z hlediska kratšího kódu, který se projeví také na rychlosti načítání a rychlosti zobrazení v prohlížeči.

[technologie4]

6. MATURITNÍ OTÁZKA / WEBDESIGN

INFORMAČNÍ ARCHITEKTURA

→ Role informační architektury

→ Definování projektu → Sběr informací, Pochopení publika, Analýza klientova prostředí, Rozvíjení funkčních požadavků

→ Vypracování obsahu a vývoj struktury stránek → Obsah, Organizační schémata, Organizační struktura

→ Organizační struktura →  Hierarchická, Databázová, Hypertextová

→ Audit stávajícího obsahu, Nový přehled obsahu, Dodací plán obsahu

→ Mapa webu, Zásady pojmenovávání

→ Wireframing, Hlavní prvky wireframu

→ Řešení navigace

→ Popisování a štítkování

 ROLE INFORMAČNÍ ARCHITEKTURY

→

Vyjmenuj jednotlivé fáze projektování webových stránek. Na kterých fázích se nejvíce podílí informační architekt?

→

Jaká je role IA v samotném procesu tvorby celé webové prezentace? Pro odpověď je potřeba IA uvést do souvislosti v rámci celého projektu tvorby webu.

→

Projekt webových prezentací se skládá z několika fází a informační architekt se na některých z nich ve větší nebo menší míře podílí:

→ Definování projektu → Sběr veškerých informací týkajících se projektu a nastavení výstupu.

→ Vývoj struktury stránek → Informační architektura stránek a problematika uživatele.

→ Design vizuálního rozhraní → Vzhled webu.

→ Budování a integrace → Programování a testování.

→ Spuštění a ostatní → Předání hotových stránek klientovi, spuštění a údržba stránek.

→

Následující text se zabývá prvními dvěma fázemi, jelikož jsou s IA úzce spjaty.

DEFINOVÁNÍ PROJEKTU

→

Co vše si musíme v začátku ujasnit, abychom mohli kvalitně definovat projekt, který je základem pro úspěšné projektování webových stránek?

→

Definování projektu zahrnuje sběr informací a znalost obsahu. Obecně to znamená vymezení cílů stránek, jejich kultury, rozpočtu, požadavků na technologie a určení součástí produkčního týmu. 

→

Při definování projektu je předpokládaná znalost budoucího obsahu a pro IA platí pravidlo stejně jako pro všechny ostatní disciplíny, že čím více o dané problematice víme, tím lépe se v ní orientujeme.

SBĚR INFORMACÍ

→

K čemu je užitečný, při projektování webových stránek, sběr informací, pochopení publika a analýza klientova prostředí?

→

Definice projektu zahrnuje sběr veškerých dostupných informací, které se ho týkají. Zadavatel nebo klient by měl poskytnout maximum materiálů o sobě, čímž zajistí snazší pochopení hlavních cílů a vizí.

 POCHOPENÍ PUBLIKA

→

Nemalou roli hraje analýza publika. Ta může být usnadněna díky datům od klienta a pomáhá vyjasnit, kdo jsou návštěvníci webu, o co mají zájem, jaké jsou jejich technické schopnosti. Pochopení publika souvisí také s tvorbou uživatelských scénářů, tj. jak se budou uživatelé chovat při vyhledávání na stránce.

 ANALÝZA KLIENTOVA PROSTŘEDÍ

→

Kromě sběru informací a poskytnutí materiálů od klienta je zapotřebí se co nejlépe seznámit s prostředím, ve kterém klientova firma funguje.

→

Znalost klientova prostředí umožňuje mnohem snáze pochopit některé z jeho požadavků.

→

V případě rozsáhlých firem je s oblibou využívána analýza firemního prostředí i za pomocí rozhovorů s různými zaměstnanci na různých pozicích, zejména pak těmi, kteří mají na starosti aktivní komunikaci se zákazníky.

→

Na místě je také využití competitive inteligence (tj. etické informace získané o konkurenci), SWOT analýza a další sběr zajímavých dat, které by mohly být při tvorbě WWW využity.

→

Informační architekt využívá veškerých dostupných zajímavých zdrojů pro svou práci.

 ROZVÍJENÍ FUNKČNÍCH POŽADAVKŮ

→

V čem spočívá rozvíjení funkčních požadavků při tvorbě definice a struktury webových stránek, co by si měl informační architekt v této části pohlídat?

→

Některé požadavky klienta mohou být na úkor použitelnosti webu. Proto je nezbytné neustále udržovat aktivní kontakt s klientem a argumentovat, proč není vhodné některé z jeho požadavků splnit, popř. proč je naopak potřeba některé věci implementovat.

→

Je zapotřebí vycházet z toho, že klient je zákazník, jenž pravděpodobně nedisponuje kvalitními znalostmi týkajícími se tvorby webu.

→

Rozvíjení funkčních požadavků znamená hledání ideálního východiska pro všechny strany a netýká se pouze fáze definování projektu, ale i momentů kdy jsou již stránky modelovány, testovány.

→

Informační architekt je v prvních dvou hlavních fázích (definice projektu a vývoj struktury stránek) klíčovým předělem mezi klientem a specialisty poskytujícími technické zázemí, který nastoluje základní rovnováhu mezi oběma stranami.

 VYPRACOVÁNÍ OBSAHU A VÝVOJ STRUKTURY STRÁNEK

→

Jaká je hlavní náplň práce informačního architekta?

→

Jedná se o fázi, na které se informační architekt nejvíce podílí, dalo by se říct, že je zejména v jeho režii.

→

Tato fáze zahrnuje systém organizování a popisování informací a to takovým způsobem, aby je uživatelé mohli snadno a rychle najít. Obsah je přitom organizován ze tří perspektiv tj. hlediska celého webu, stránky a uživatele.

 OBSAH

→

Co musí mít informační architekt kvalitně vyřešené a zanalyzované, aby mohl přistoupit k tvorbě struktury celých webových stránek?

→

Řešení obsahu, tato část se týká primární organizace celého obsahu stránek.

→

Vychází z předchozí analýzy, jež určuje, co na stránkách vzhledem k jejich účelu nesmí chybět. Pod adresování obsahu spadá třídění a tvorba seznamu hlavních pojmů, které jsou nakonec členěny do organizačních schémat a struktur. Díky nim vzniká nástin nového obsahu.

→

Obsah lze organizovat dvojím způsobem a to vytvořením organizačních schémat nebo struktur.

 ORGANIZAČNÍ SCHÉMATA

→

K čemu slouží organizační schémata při vývoji webových stránek a jak se tvoří? Vyjmenuj jednotlivé druhy organizačních schémat.

→

Skrze organizační schémata, dále jako OS, vymezujeme přesné pojmy, které se budou na stránkách nacházet a jsou východiskem pro další práci. Stavba schémat je vhodná zejména pro web, který se skládá převážně z homogenních prvků. Je v zásadě jednoduchá a usnadňuje vyhledávání v případě, že uživatel zná přesně svůj dotaz (řazení schémat např. podle chronologie, abecedy a geografie).

→

Výstižným příkladem přesného OS jsou Zlaté Stránky.

→

Organizační schéma podle:

→ 1 / Tématu

Jedná se například o katalogy s výrobky, encyklopedie.

→ 2 / Úkolů

Příkazové funkce jako "přihlásit se, hledat, registrovat, koupit" pro uživatele. Obvykle fungují v souvislosti s navigačními systémy (užitková navigace).

→ 3 / Uživatelů

Rozčleňuje návštěvníky webu s ohledem na pohlaví, věk a jiné vlastnosti uživatele.

→ 4 / Oblíbenosti

Za pomocí statistik a vyhledání seznamů oblíbených výrazů, které odpovídají obsahu stránek.

→ 5 / Hybridních schémat

Kombinace hned několika schémat, může vést k překombinování, což má v důsledku negativní dopad.

 ORGANIZAČNÍ STRUKTURA

→

Jak lze rozvinout organizační schémata do organizační struktury? Vyjmenuj jednotlivé typy organizačních struktur.

→

Na základě vymezených pojmů vytváříme základní organizační strukturu dat, dále jako OST. V současnosti jsou stanoveny tři základní typy OST:

 → 1 / Hierarchická

Hierarchická OST člení pojmy na nadřazené a podřazené. V praxi to vypadá obvykle tak, že se uživatel dostává od obecnějšího ke konkrétnějšímu.

→ 2 / Databázová

Databázová verze OST naopak staví svá data do rovnocenného modelu (např. seznam výrobků s určitými parametry).

→ 3 / Hypertextová

Hypertextová verze OST volně prolíná jednotlivé informace, což umožňuje rychlý pohyb bez přemýšlení, ale následkem toho může být ztráta kontextu až „zabloudění" na stránkách.

→

Na webu není stanovena jednoznačná OST, ale obvykle se tu vyskytují a prolínají všechny její typy.

 HIERARCHICKÁ STRUKTURA

→

Hierarchická OST je počátkem modelování strukturální navigace webu. Skrze základní organizaci dat vzniká první hrubý nástin, nebo lépe řečeno podklad pro tvorbu mapy webu.

→

Předchází tak zmíněnou strukturální navigaci, která pak dále umožňuje vytvářet a rozvíjet vzájemné souvislosti mezi jednotlivými pojmy, což je typický aspekt tezauru → naznačení vztahu pojmů nadřazený, podřazený a jejich dalších souvislostí

→

Hieratická OST dává také prostor k doplňování dalších funkcí.

 DATABÁZOVÁ STRUKTURA

→

Databázová OST přináší množství metadatových popisů na základě seznamu informací, které jsou jednotně indexovány do určité podoby jako výsledek vyhledávání.

→

V souvislosti s webem se používá zejména pro administraci rozsáhlých dat, která lze podle daných parametrů sjednotit.

   HYPERTEXTOVÁ STRUKTURA

→

Hypertextová OST přináší vědomí provázanosti jednotlivých stránek, je označována jako asociativní navigace.

  AUDIT STÁVAJÍCÍHO OBSAHU

→

K čemu může být užitečný audit stávajícího obsahu webových stránek?

→

V případě, že jsou komplexně předělávány staré stránky na nové, je zde výhoda existujícího obsahu, závisí ovšem na jeho kvalitě.

→

Mnohé pojmy na stránce mohou pomoci k modelování nových OS a OST. Audit stávajícího obsahu znamená detailní analýzu a vyhodnocení stávajícího obsahu stránek včetně zvážení, zda je tento obsah použitelný i pro novou verzi stránek.

   NOVÝ PŘEHLED OBSAHU

→

K čemu slouží nový přehled obsahu → ukotvený v organizačních systémech a zasazených do organizační struktur? Jak jej je třeba dopracovat, aby byla struktura úplná?

→

Vytvoření přehledu obsahu stránek poskytuje definitivní ucelený náhled na to, co budou stránky obsahovat a v jaké míře. Vyjasňuje také, kde je potřeba obsah dopracovat za pomoci copywriterů a jiných specialistů.

 DODACÍ PLÁN OBSAHU

→

Proč je nutné mít, při tvorbě obsáhlejšího webu, vypracovaný dodací plán obsahu?

→

Plán určuje časový rozsah pro dílčí prvky (obvykle jednotlivé webové stránky), upozorňuje na základě analýzy na věci, jež je potřeba splnit, vyjasňuje, nakolik je již obsah zpracován, kolik toho ještě zbývá a zahrnuje další poznámky týkající se tvorby.

 MAPA WEBU

→

Jak pracujeme s hotovou organizační strukturou webu? Co na jejím základě dále vytvoříme?

→

Dodací plán může být dobrou pomůckou pro nadcházející fázi týkající se mapování webu. Tato část zahrnuje tvorbu základního schématu veškerých stránek včetně jejích podsekcí, hlavních odkazů atp. Na tvorbě této fáze by se měli bez výjimky všichni členové týmu. Schematická mapa webu může být tvořena dvojím způsobem → horizontálně nebo vertikálně.

→

Tvorba webu je dlouhodobý proces, který může v průběhu prodělávat různé změny. Tyto změny by však už neměly narušit stanovenou organizační strukturu.

→

Čím větší je množství obsahu, tím náročnější je organizace jednotlivých stránek, korektní přiřazení podsekcí včetně jejich popisování a zřetelných hypertextových a jiných propojení na stránkách.

 ZÁSADY POJMENOVÁVÁNÍ SLOŽEK A SOUBORŮ

→

Složky a soubory, které nesou obsah webu, a odpovídají vytvořené mapě webu, pojmenováváme systematicky. K čemu toto pojmenovávání slouží a jaké dvě hlavní zásady pojmenovávání se v současnosti používají?

→

Zajištění zásad pojmenování složek během strukturování celého webu pomáhá nejen organizovat jeho hlavní části, ale poskytuje opěrné konzistentní body pro další práci ostatních členů v týmu.

→

Na základě povahy klienta, týmu a webu informační architekt určuje co nejsrozumitelnější způsob pojmenovávání hlavních prvků, které jsou při tvorbě použity. Tato pojmenování později usnadňují práci vývojářům stránek, kteří tak nejsou nuceni vytvářet své vlastní specifické až nelogické názvy pro složky, čímž by mohli některé další procesy v rámci tvorby webu zkomplikovat.

→

V současnosti se používají dvě hlavní zásady pojmenování:

→ 1 / Organizační, číselné pojmenovávání

Aplikace standardního číselného pojmenování na veškerý obsah, ať už se jedná o textové složky, obrázky nebo jiné soubory. Číselné řazení dat usnadňuje snadnou identifikaci dokumentu a toho, kde se nachází.

 → 2 / HTML názvy –

Nastavení jednotného HTML názvu pro danou položku.

  WIREFRAMING

→

Co si představíte pod pojmem wireframe, co obsahuje a k čemu slouží? Jak postupuje při jeho tvorbě?

→

Když je obsah organizovaný, seřazený a pojmenovaný, lze přejít k návrhu jednotlivých stránek. Úprava jednotlivých stránek řeší tamní rozvržení pomocí tzv. drátěných modelů neboli wireframes, dále je navržena navigace a popisování tzv. štítkování.

→

Wireframy jsou základem pro vizuální rozvržení stránky a HTML tvorbu. Nejsou zde podstatné barvy nebo tvary tlačítek. Jedná se o jakési skeče, které poskytují hrubý nástin navigace, rozložení stránky, klíčových nadpisů a případně v jakých místech by měla být s hojností využívána grafika a naopak. Je potřeba mít na paměti, že se jedná o rozložení informací na stránce, nikoliv o design.

→

Při tvorbě wireframů je vhodné držet se postupu od jednoduššího ke složitějšímu. Prvotní jednoduché rozložení postupně specifikujeme pomocí vkládání přesných informací, které máme k dispozici díky veškerým dosavadním krokům.

→

Členění veškerých informací na stránce je stanoveno na základě dosavadního mapování webu a jeho nastavených zásad pojmenování.

→

Prvotní rozložení stránek vychází z toho, jakým způsobem jsou stránky zaměřeny. Jsou to stránky zaměřené na prodej produktů? Nebo stránky, které mají pouze informativní charakter? Nebo stránky, které v digitálním prostředí reprezentují společnost?

→

Vše je pak koncipováno tak, aby byla zachována organizační struktura dat a síť hypertextových propojení.

  HLAVNÍ PRVKY WIREFRAMŮ

→

→ 1 / Obrázky / ilustrace / animace → položky které nejsou vytvořeny za pomocí HTML

→ 2 / Obsah → linie hlavního obsahu, popř. aktuálního textu, je-li k dispozici

→ 3 / Složená navigace → navigační menu s hlavními pojmy, které se zobrazují na stránce.

→ 4 / Funkčnost → popis základní funkce stránek

→ 5 / Hlavní odkazy → navržení a navigace důležitých odkazů

→ 6 / Vedlejší odkazy → ostatní odkazy

→ 7 / Média → je-li to vhodné

→ 8 / Cílová velikost okna → velikost elementů na stránce včetně velikosti stránky samotné

→ 9 / Dokumentace v záhlaví/zápatí → název projektu, stránek, číslo verze, datum, autor, copyright.

 ŘEŠENÍ NAVIGACE

→

Co si představíte pod pojmy strukturální, asociativní a užitková navigace? Na základě jakých otázek optimalizovat uživatelské rozhraní navigace?

→

Hlavní navigace webu skrze své rozdělení do sekce strukturální, asociativní a užitkové určuje budoucí rozložení stránek.

→

Díky strukturální navigaci je dostupný přehled o veškerých úrovních stránek, což bývá často opomíjeno.

→

Asociativní navigace zase spojuje tematicky, či jinak příbuzné stránky.

→

Užitková navigace navádí uživatele k akci.

→

To však stále neřeší problematiku rozložení navigace na stránce a její použitelnost. Tím se zabývá globální, lokální a kontextová navigace.

→

 Jako východisko pro tvorbu globální a lokální navigace, která se pokouší o optimalizaci uživatelského rozhraní, jsou odpovědi na tři otázky:

→ 1 / Jak je obsah webu organizovaný doposud?

→ 2 / Co uživatelé na stránkách chtějí dělat?

→ 3 / Co chcete, aby uživatelé na stránkách dělali?

 POPISOVÁNÍ A ŠTÍTKOVÁNÍ

→

Jak tvoříme jazykovou stránku obsahu webových stránek? Jaký jazyk / slovník / používáme s ohledem na zaměření webu a funkčnost jednotlivých prvků, jako je například navigace, nadpisy, odkazy? Jak pracujeme s významem webových ikon?

→

Kvalitní systémy pojmenování jasně vysvětlují obsah webu a vyjadřují charakter společnosti. Způsob, jakým jsou pojmenovány jednotlivé odkazy, názvy nadpisů, ikony, tlačítka a jiné navigační elementy, vypovídá o vlastnostech a také záměru stránek.

→

K optimálnímu vytváření popisků je doporučováno využívat různých prostředků včetně těch, které zahrnují tvorbu metadat a řízených slovníků.

→

Pět základních druhů textu pro popisování:

→ 1 / Kontextové odkazy 

Vytváření kontextových odkazů souvisí úzce s otázkou „Jakou informaci uživatel očekává při kliknutí na odkaz?" Úkolem informačního architekta je reprezentativně označit odkaz, který směřuje k požadované informaci. Tvorba odkazů není pouze výsadou informačního architekta, ale mnohdy za ni nese odpovědnost autor obsahu. Informační architekt může jeho práci svými návrhy korigovat.

→ 2 / Nadpisy 

Blíže specifikují obsah, který bude následovat. Uživateli tak objasňují, zda jim následující text poskytne informaci, kterou hledají.

→ Účelem nadpisů je:

→ Zaujmout uživatele.

→ Získání všeobecného přehledu, co je na stránce.

→ Nastavení rámce pro každý oddíl, větší přehlednost.

→ Pochopení smyslu toho, co následuje.

→ Usnadnění prohlížení celého textu tak, aby usnadnil nalezení sekce.

→ Oddělení jednotlivých částí, vytvoření dojmu prostornosti.

→ Informace působí méně hutně a tím pádem je lépe čitelná.

→ 3 / Volby v navigačním systému

Při popisování navigačního systému je v této části nejdůležitější zachovat konzistenci. Názvy polí navigačního systému by se neměly v průběhu měnit, stránky by mohly jinak působit chaoticky a nepřehledně.

→ 4 / Termíny pro indexování

Jedná se o tvorbu metadat, která pak usnadňují vyhledávání. Zahrnuje také tvorbu řízených slovníků, tezauru.

→ 5 / Ikony

Vizuální informace mnohdy představují více než text a zvyšují estetický dojem stránek. Některé z nich se na webu již běžně používají a jsou uživateli dobře zažité. Jedná se například o ikonu nákupního košíku nebo lupy. V jiných případech je při použití ikon zapotřebí postupovat obezřetně, mají-li správně plnit svůj význam. Na vybraných stránkách je použití obrázkových symbolů mnohdy nezbytné. V takovém případě se používají popisky objektu, které vystihují název ikony.

[technologie4]

3. MATURITNÍ OTÁZKA / WEBDESIGN

TYPOGRAFIE NA INTERNETU

→ Význam typografie na internetu, Způsob přijímaní informací na internetu

→ Omezení a velikosti řezů písem na minimum

→ Zlepšení čitelnosti použitím bílé plochy

→ Zvýrazňování textů, Hra s textem, Kontrast

→ Velikost písma, Řádkový proklad, Délka řádku, Zarovnání textu, Minusky a versálky

→ Vizualizace informací

→ Základní použitelné fonty pro web

→ Typografie v CSS3, Podpora v prohlížečích, Vykreslování písma, Problémy s licencemi

 VÝZNAM TYPOGRAFIE NA INTERNETU

→

Webová typografie rozhoduje o tom, zda si lidé vůbec webovou stránku přečtou.

→

Základem úspěšného webového projektu je především kvalitní obsah. Ale aby se takový obsah dobře konzumoval, je nesmírně důležité ho umět uživateli správně naservírovat.

 ZPŮSOB PŘIJÍMÁNÍ INFORMACÍ NA INTERNETU

 Umíme ještě číst nebo jenom skenujeme?

→

Toto je zásadní otázka, na kterou potřebujeme při vytváření funkční typografie webu znát odpověď.

→

Jakob Nielsen, guru na použitelnost webu, ve své studii z roku 1997 tvrdí, že uživatelé na webu nečtou.

→

O deset let později to upřesňuje Janice „Ginny“ Redish ve své knize Letting Go of the Words: Writing Web Content That Work, kde říká, že uživatelé web v rychlosti skenují, ale jakmile se dostanou k požadovaným informacím, začnou číst.

→

Úkol je tedy jasný, nasázet text tak, aby byl jednoduše proskenovatelný, ale zároveň jako celek skvěle čitelný.

→

Takto může vypadat dobře nasázený text. Dokážete se rychle zorientovat? Určitě ano.

 OMEZENÍ VELIKOSTI A ŘEZY PÍSMA NA MINIMUM

→

Chceme-li kvalitně nasázet text, je důležité definovat si jeho hiearchii. Nejedná se o nic jiného než o jasné odlišení struktury nadpisů, odstavců, citací.

→

Uživatel se musí snadno a rychle zorientovat, kde začít číst a kam pokračovat. Omezením velikostí a řezů písma dostaneme zpětnou vazbu, jestli nemáme příliš složitou hierarchii.

 BÍLÝM MÍSTEM ZLEPŠÍTE ČITELNOST

→

Když budeme sázet knihu, bude naším cílem dostat co nejvíce textu na co nejméně papíru. Důvod je jasný: omezení nákladů na tisk.

→

 Protože se ale bavíme o webové typografii, máme obrovskou výhodu. Můžeme si dovolit být velkorysí a dopřát celému textu a jeho jednotlivým blokům dostatek prostoru a volného místa.

→

Tím velmi zlepšíme přehlednost a orientaci napříč stránkou. Nesmíme také zapomenout členit dlouhé bloky textu do kratších odstavců. Uživatelé to jistě ocení.

→

Na první pohled je patrné, že skenovat a číst tento text bude velmi obtížné.

 →

Stránku stačí provzdušnit, zvětšit řádkové proklady, rozdělit odstavce a ihned působí daleko lépe. A daleko lépe se bude číst.

 ZVÝRAZŇOVAT SE MUSÍ, ALE VŠEHO S MÍROU

→

Základní hierarchii již máme, jak tedy text ještě zpřehlednit a umožnit lepší skenovatelnost? Není nic prostšího a zároveň účinnějšího, než obyčejné vytučnění několika důležitých bodů v blocích textu. Ke zvýraznění pomohou také hypertextové odkazy. Ovšem nic se nesmí přehánět. Zvýrazňujeme vždycky opravdu jen několik málo klíčových informací.

→

Pro zlepšení orientace na stránce nezapomínejte zvýrazňovat důležitá sdělení.

  S TEXTEM SI HRAJTE, ALE MYSLETE NA ČITELNOST

→

Právě jsme uživateli pomohli rychle se zorientovat na webu. Už ví, kde hledat informace, které ho opravdu zajímají. Ale co dál? Dopřejme mu maximální pohodlí při čtení informací. Pomůže nám k tomu několik základních pravidel dobré čitelnosti na webu.

 KONTRAST

→

Nejdůležitějším faktorem dobré čitelnosti je kontrast textu proti pozadí. Na delší texty je ideální černé (tmavě šedé) písmo na bílém pozadí. Pokud se rozhodneme pro inverzní variantu – bílý text na černém pozadí – musíme počítat s tím, že se bude uživatelům číst o 32 % pomaleji. Pro ověření dostatečného kontrastu písma můžeme použít analyzátor kontrastu barev.

→

Vlevo ukázka špatného kontrastu. Tohle by číst určitě nikdo nechtěl. Vpravo dostatečný kontrast textu a pozadí. Vlevo ukázka špatného kontrastu. Tohle by číst určitě nikdo nechtěl.

 VELIKOST PÍSMA, ŘÁDKOVÝ PROKLAD A DÉLKA ŘÁDKU

→

Podle výzkumu v ČR preferuje 92 % uživatelů pro delší texty písmo o velikosti 14 px. Starší uživatelé preferují písmo větší. Na rozdíl od knižní sazby je na webu dobré používat větší řádkový proklad. Lépe se tak skenuje text a pomáhá uživateli jednodušeji přecházet z konce řádku na začátek dalšího. Obecně doporučovaný je 1,3 – 1,6 násobek velikosti písma, ale nemusíme se bát ani 1,8 násobku. Pro nadpisy a větší text můžeme použít proklad menší.

→

Stejně tak jako pomáháme uživateli přecházet z řádku na řádek větším prokladem, nesmíme zapomenout na optimální délky řádků. Obecně se doporučuje 50 – 110 znaků na řádek. Méně znaků na řádek znamená nepatrně pomalejší čtení, ale oproti delšímu řádku je méně namáhavé pro oči – nemusí tolik kmitat ze strany na stranu.

→

Velmi dlouhé řádky společně s malým písmem a malými řádkovými proklady oko čtenáře brzy unaví. Nebojte se být v tomto ohledu velkorysí. Nebojte se používat větší písmo s většími proklady.

  ZAROVNÁNÍ TEXTU

→

Také zarovnání textu hraje svou roli. Na webu používáme zarovnání doleva. A když píši doleva, opravdu myslím doleva – ne do bloku. Důvod je ten, že oproti DTP sazbě prozatím nemáme dostatečnou možnost, jak dělit slova.

→

Moderní prohlížeče již sice dělení slov podporují, ale protože ještě nejsou mezi lidmi příliš rozšířené, nemůžeme na tuto jejich vlastnost spoléhat. Zarovnáním do bloku nám pak v textu vznikají ošklivé řeky, které znesnadňují čitelnost a orientaci v textu.

 Zarovnáním doleva navíc opět podpoříme přechod z konce řádku na začátek. Takže ještě jednou – na webu zarovnáváme doleva. V odůvodněných případech můžeme krátký (ale opravdu krátký!) text zarovnat na střed nebo doprava.

→

Zarovnáním textu do bloku s absencí dělení slov nám vznikají ošklivé řeky (velké mezery mezi slovy), které znesnadňují čitelnost textu.

MINUSKY VS VERSÁLKY

→

Pro zvýraznění textu často vidíme použité versálky. To není moc vhodné řešení – text se špatně skenuje i čte. U versálek nám totiž chybí horní a dolní dotahy, podle kterých jednoduše rozpoznáváme jednotlivé znaky i celá slova. Chcete zvýrazňovat delší texty versálkami? Nedělejte to! Versálky klidně používejte, ale jenom na nadpisy a opravdu krátké texty.

→

Nezvýrazňujte delší blok textu VERSÁLKAMI. Text by se četl opravdu obtížně a to určitě nechceme.

MĚJTE SVÉ NÁVŠTĚVNÍKY RÁDI A VIZUALIZUJTE

→

Ukázali jsme si, jak pracovat s textem, abychom uživateli zpříjemnili skenování a čtení textu. Co když ale máme velké množství informací, které jsou těžko stravitelné? Pomůže nám vizualizace.

→

Nebojme se použít infografiku, nejrůznější grafy a diagramy ale i ikony a ilustrace. Zvlášť infografika si v poslední době získává stále větší oblibu, a to právě díky možnosti přehledně, a někdy i zábavně, prezentovat jinak nudná data.

→

Použitím ilustrací nebo infografiky stránku nejen oživíme, ale uživateli informace podáme jednoduše a zábavně.

 →

Díky použitým ikonám nepůsobí popis europalety tak nudně.

  DALŠÍ TYPY

→

Používejte selský rozum – když se text čte špatně vám, určitě se nečte o nic lépe uživateli vašeho webu.

→

Nezapomínejte na kvalitní hierarchii – je to základ.

→

Zvýrazňujte, doplňujte obrázky, ikony a ilustrace – dejte možnost uživateli během několika vteřin zjistit, o co se v textu jedná.

→

Nezarovnávejte do bloku

 ZÁKLADNÍ POUŽITELNÉ FONTY PRO WEB

→

Výběr základních fontů a jejich specifikace:

Times

→ Times

Times New Roman bývá základní font prohlížečů. Pokud font nezadáte, použije prohlížeč obvykle toto písmo. Je dobře čitelné z papíru, protože má patky. Čitelnost na obrazovce je horší, přesto považováno za nejlépe použitelné písmo.

Garamond

→ Garamond

Garamond je patkové písmo renesančního řezu. Pozoruhodná je zejména kurzíva. Díky patkám je dobře čitelné. Používá se zejména na nadpisy. Pro běžný text se nedoporučuje, protože je příliš vzdušné. Na mnoha systémech toto písmo nebývá nainstalované, proto se jistí Timesem. Řídce se vyskytují problémy s českými znaky.

Arial

→ Arial

Nejčastěji používané písmo vyniká jednoduchostí. Nemá patky, proto se špatně čte z papíru, ale pro obrazovku je velmi vhodné. Problémem tohoto fontu je "okoukanost" a přílišná zahuštěnost prostoru. Nebývají s ním problémy, protože patří do záklaních instalací na všech systémech. Přesto se někdy jistí Helveticou a sans-serifem. Je třeba dávat pozor na to, že Arial je písmo opticky i fakticky vyšší, protože má vysoké malé znaky. Používáte-li Arial zárověň s Timesem, zmenšete Arial.

Georgia

→ Georgia

Georgia je novější font. Má velmi úzké dříky písmen, ale je patkové. Používám ho na normální text. Tento font se doporučuje na delší texty, protože má patky, které vedou oko, ale přitom nehrozí, že znaky splynou. Je lépe čitelný. Nebývá na všech systémech, proto se jistí jiným fontem (v tomto případě Arialem a sans-serifem). Hlavní nevýhodou je fakt, že se na Internetu vyskytuje v různých variantách (i nečeských), čili na jeho vzhled není spolehnutí.

Verdana

→ Verdana

Nové písmo vynikající svou kulatostí se stává velmi oblíbeným. Patří do skupin bezpatkových písem, je trochu podobné Arialu. Na rozdíl od Arialu má ale širší znaky a relativně ještě vyšší malé znaky. Je velmi špatně čitelné, ale pokud se nastaví malá velikost a vysoké řádky, dá se použít. Na mnoha starších systémech se nevyskytuje a občas má problémy s českými znaky.

Jistí se Arialem nebo Courierem.

Courier New

→ Courier New

Strojové písmo. Jedinou předností tohoto ošklivého písma je fakt, že má všechny znaky stejně široké (označuje se jako "monotype"). Proto se hodí pro různé výpisy kódů, ve kterých musejí znaky pod sebe zapadat. Občas se dá použít pro poutavé nadpisy.

MS Sans Serif

→ MS Sans Serif

Systémové písmo. Je na všech windows počítačích. Jinde se dá jistit sekundárním fontem Geneva. Stává se, že zlobí s češtinou (obzvláště v Opeře). Přestože jde o písmo systémové, je vcelku málo okoukané, protože ho nikdo pořádně nepoužívá. Pohledné jsou zejména menší řezy. Kurzívu je lépe nepoužívat.

 TYPOGRAFIE V CSS3

→

Jestli se web něčím odlišuje od tištěných médií, tak je to velmi složitá kontrola vzhledu písma a textu.

→

Weboví grafici ví, že používat zarovnání do bloku je neskutečně špatný nápad, že by měli by používat jen tzv. bezpečné fonty (které se vyskytují na většině počítačů) a že každý operační systém (a často i prohlížeč) si vykreslí písmo trošku jinak.

→

Typografie dlouho nebyla doménou webových grafiků. Proč také, stejně si nemohli vybrat písmo, jaké chtěli a ovlivnit jeho vykreslování. Doba se ale měnÍ.

→

CSS3 se snaží tyto problémy řešit, pojďme se podívat, jak se mu to daří.

→

@font-face v CSS3 znovu zavádí podporu pro používání vlastního písma, poprvé se objevila v CSS2, v 2.1 byla však zase vypuštěna. Teoreticky to funguje poměrně prostě, nechá se prohlížeči stáhnout soubor písma a můžete jej používat.

→

Prakticky tam je několik problémů, zmiňme tři. Podpora v prohlížečích, vykreslování písem na obrazovce a starosti písmolijen, aby nedopadly jako hudební průmysl.

 PODPORA V PROHLÍŽEČÍCH

→

Problém s podporou v prohlížečích umíme celkem dobře řeši, přišlo se na to, že je potřeba dát prohlížečům více typů souborů, aby si mohly vybrat ten, který podporují. Tímto způsobem umíme zajistit podporu napříč prohlížeči.

 VYKRESLOVÁNÍ PÍSMA

→

Problém s vykreslením písma na obrazovce je to, na co se odvolává mnoho lidí jako na důvod, proč zatím @font-face nepoužívat. A poměrně oprávněně. Každý operační systém má svůj engine pro vykreslování písma. A často jich má hned několik a je na konkrétním programu, který si vybere.

→

Vykreslení písma na obrazovce ovlivňuje hned několik faktorů, výrazně pak hinting (zobrazení vektorových písem na zařízení s nízkým rozlišením v pixelovém vyjádření) a anti-aliasing (vyhlazování písma). Jak z toho ven zatím nikdo neví, písmolijny vylepšují hinting co to jde (což písmo na obrazovce skutečně výrazně vylepší), ale jde o náročný a zdlouhavý proces, který je jenom částí řešení problému. Ideální by bylo, kdyby se tvůrci operačních systémů shodli na jednom enginu pro vykreslování písma. Ale to nevypadá jako reálná možnost.

→

Zní to celé trošku pesimisticky. Pokud se ale podíváte na data, tak se ukáže, že hodně uživatelů uvidí písma vykreslena poměrně hezky. Sice mírně odlišně, ale hezky. Platí, že čím novější operační systém, tím je situace lepší. Na zvážení pak je, zda @font-face použít, či ne.

 PROBLÉMY S LICENCEMI

→

Základní věc, kterou musíte vědět je, že pokud máte písmo ve svém počítači, tak ho prostě nemůžete jen tak použít na webu pomocí @font-face. Takové písmo by bylo stažitelné a písmolijny se bojí, že by se fonty ve velkém nelegálně sdílely a ony by přišly o zisky.

→

Je tedy potřeba najít písmo, které v licenčním ujednání umožňuje použití @font-face. Mnoho je jich zdarma, ještě více pak placených (většinou pomocí speciální licence pro použití na webu).

→

Pokud máte písmo, které chcete použít na webu (a nebo hledáte písmo zdarma), zapamatujte si web FontSquirrel.com. Najdete na něm fonty zdarma, které umožňují použití s @font-face vygenerované ve všech potřebných formátech i s návodem, jak to celé použít. A také, pokud máte svůj font odjinud, naleznete zde generátor, který z vašeho souboru písma vygeneruje další potřebné soubory a opět vám dodá i návod, jak to použít.

→

Pořád je tu ale problém s tím, že placená písma písmolijny většinou nechtějí dávat na web jen tak. A tady nastupují služby jako Typekit, platíte měsíčně/ročně nějakou částku, ony vám písma hostují a vy ve vašem kódu už řešíte jen to, kde dané písmo použít. Nutno dodat, že občas je problém s tím, že vybrané písmo nepodporuje české znaky. Ale jinak by to nemohlo být jednodušší.

[technologie4]

5. MATURITNÍ OTÁZKA / WEBDESIGN

HISTORIE INTERNETU

→ Kosmické technologie, ARPA, Hackeři

→ Packetové sítě, Intergalactic Network, Arpanet

→ Směrovače, Telnet, FTP

→ Rozvoj sítě Arpanet, Vznik Internetu

→ World Wide Web, HyperText Transfer protocol , Webový server, Grafický klient

 VELIKOST VÝZNAMU VZNIKU INTERNETU

→  

Internet je bezpochyby jedním z největších výdobytků lidstva, zcela srovnatelným třeba s Gutenbergovým vynálezem knihtisku. Na rozdíl od klasických vynálezů je ale Internet dílem vpravdě kolektivním a mezinárodním, a dokládá ohromný potenciál, jaký v sobě skrývá otevřená a nezištná spolupráce chytrých lidí na celém světě. Zastavme se proto u několika zásadních událostí v jeho relativně krátké historii.

KOSMICKÉ TECHNOLOGIE

→  

Původním impulsem pro vznik Internetu byla první umělá družice Země, tedy sovětský Sputnik 1. Jeho vypuštění 4. října 1957 bylo totiž pro Spojené státy drsným probuzením do reality. Zaostávání v kosmických technologiích, na které byly pochopitelně navázány i technologie vojenské, mohlo mít pro USA v době studené války naprosto fatální důsledky. Americká administrativa si toto nebezpečí dobře uvědomovala a začala okamžitě jednat.

 AGENTURA ARPA

→  

V roce 1958 založilo ministerstvo obrany USA agenturu ARPA (Advanced Research Project Agency) zaměřenou na podporu výzkumných projektů vedoucích k novým technologiím. Klíčem k úspěchu ARPA byly velkorysé podmínky, které agentura poskytovala příjemcům svých grantů. Především, rozpočet typického projektu ARPA byl o dva řády vyšší oproti těm, které financovala NSF (National Science Foundation). Vědci a technici pracující na projektech ARPA měli ale také daleko volnější ruce a mohli na nových myšlenkách pracovat po delší dobu a bez zbytečného papírování.

SKUPINY HACKERŮ

→  

V oblasti počítačových technologií a komunikací vyrostlo z podhoubí projektů ARPA několik silně neformálních skupin výzkumníků a programátorů, kterým bychom dnes říkali hackeři. Takové počítačové úderky vznikly i na řadě univerzit, k nejvýznamnějším patřily MIT v Bostonu a kalifornské univerzity v Berkeley a Los Angeles.

INTERGALACTIC NETWORK

→  

Počátkem šedesátých let si Joseph C. R. Licklider, jeden z předních počítačových pionýrů, uvědomil potenciál hackerských komunit, které však v té době působily prakticky izolovaně, protože spolu nemohly efektivně komunikovat. Licklider proto založil neformální skupinu specialistů s humorně nadsazeným názvem „Intergalactic Network”. Tak začala pracovat na revolučním konceptu paketových sítí založených na principech, na nichž stojí i dnešní Internet.

PAKETOVÉ SÍŤĚ

→  

Paketová síť je počítačová síť s přepojováním paketů. Základem je, že cesta, kterou paket putuje, není od zdrojového po cílový uzel známá. Každý paket se tak přenáší jinou trasou, která je ovlivněná topologií sítě, její propustností a výpadky uzlů. Routery, tj. směrovače, tak musí efektivně rozhodovat, kterou cestu pakety posílat dál a reagovat na změny v síti.

→  

Stojí za zmínku, že přední telekomunikační společnosti i většina výzkumných pracovišť té doby považovaly myšlenku paketových peer-to-peer sítí / klient komunikuje s klientem / za totální nesmysl a ještě dlouho ji odmítaly brát vážně. Pro obranné kruhy reprezentované agenturou ARPA však naštěstí tyto komunikační technologie měly svůj půvab, neboť byly díky své distribuovanosti daleko robustnější než klasická telefonní síť.

 ARPANET

→  

Úsilí Licklidera a dalších propagátorů paketových sítí tak přineslo své ovoce, v létě roku 1968 vypsala ARPA tendr na vývoj paketové sítě. Projekt nesl jméno ARPANET a do tendru se přihlásilo dvanáct účastníků, mezi nimiž ovšem nebyl žádný z velkých hráčů typu IBM či AT&T, kteří paketové sítě nadále ignorovali.

→  

Vítězem se stala bostonská firma Bolt, Beranek and Newman (BBN). Ta pak do projektu dále angažovala čtyři univerzitní pracoviště ze Stanfordu, Utahu, Santa Barbary a Los Angeles. První topologie ARPANET propojovala právě tyto čtyři univerzity.

PRÁCE NA VÝVOJI

→  

Rozdělení prací bylo následující, BBN měli na starost vývoj jádra sítě založeného na specializovaných zařízeních zvaných IMP (Interface Message Processor), předchůdcích dnešních směrovačů.

→

Firma BBN dovezla první dva funkční IMP 30. srpna 1969, na Stanford a 1. října na UCLA v Los Angeles.

→  

Univerzity pak pracovaly na základním softwaru, jehož prostřednictvím by jejich koncové (tehdy samozřejmě sálové) počítače mohly spolu přes IMP komunikovat. Šlo vlastně o programy, které dnes známe pod názvy telnet a FTP.

TELNET

→

Telnet (zkratka z Telecommunication Network) je označení protokolu používaném v počítačových sítích, který pomocí stejnojmenné aplikace umožňuje uživateli připojení ke vzdálenému počítači.

FTP

→

FTP (anglicky File Transfer Protocol) je protokol pro přenos souborů mezi počítači pomocí počítačové sítě. Využívá protokol TCP z rodiny TCP/IP a může být používán nezávisle na použitém operačním systému, je platformě nezávislý. Definován byl v roce 1985 a rozšířen byl v roce 1997. Jeho podpora je součástí webových prohlížečů nebo specializovaných programů, tzv. FTP klientů.

PRVNÍ ZPRÁVA ARPANETU

→

Historicky první zpráva ARPANETU byla odeslána 29. října 1969 v půl jedenácté večer, a směrovala z LA do Stanfordu.

→

Zpráva zněla: „LO”. Mělo to tedy být celé slovo „LOGIN”, ale software se po odeslání dvou znaků zhroutil. Chyba však byla obratem opravena a komunikace se pak skutečně rozběhla.

 ROZVOJ SÍTĚ ARPANET

→

Počátkem 70. let se síť ARPANET v akademickém prostředí rychle rozrůstala a postupně se do ní připojily desítky univerzit a dalších institucí po celých Spojených státech.

→

V létě 1973 pak získala i mezinárodní charakter, protože se přidaly i dvě evropské instituce, University College London a norský seismologický ústav NORSAR.

SJEDNOCENÍ PAKETOVÝCH SÍTÍ

→

Princip přepojování paketů se stal díky úspěchu ARPANETU populárním. V první polovině 70. let se začaly používat i jiné sítě, například ALOHAnet na Havaji nebo CYCLADES ve Francii. Tyto sítě však mezi sebou nemohly komunikovat, ač byly založeny na stejných principech.

→

V roce 1973 proto Bob Kahn a Vint Cerf začali pracovat na specifikacích, které měly sjednotit protokoly paketových sítí, jejich rozhraní s koncovými počítači a datové objekty vyměňované v těchto sítích. Tito pánové jsou dnes po právu označováni jako otcové Internetu.

→

Cerf pro novou technologii navrhoval docela hezký název Catenet, místo něj se ovšem ujalo a dodnes používá mírně nepřesné označení TCP/IP, které je složeno ze zkratek dvou hlavních protokolů – Transmission Control Protocol a Internet Protocol.

POČÁTEK INTERNETOVÉ SÍTĚ

→

Protokoly TCP/IP umožnily propojit geograficky vzdálené a technologicky různorodé sítě a daly taky vzniknout „síti sítí”, které se začalo říkat Internet.

INTERNET V ČECHÁCH

→

K oficiálnímu spuštění internetu došlo 13. února 1992 na pražském ČVUT.

→

Současně byl zahájen projekt FESNET, tedy Federal Educational and Scientific Network. Projekt FESNET byl financován hlavně z prostředků Fondu rozvoje vysokých škol MŠMT a zapojily se do něj vysoké školy ve všech větších městech.

→

Po rozdělení Československa se zkratka změnila na CESNET, vychází z Czechnet.

 POSTUP ŠÍŘENÍ INTERNETU

→

Počátkem 90. let minulého století byl prakticky hotov podvozek a motor dnešního internetu, odborně řečeno: protokoly síťové a transportní vrstvy. Dalšímu rozvoji směrem k široké veřejnosti ale bránily dvě skutečnosti.

→

Jednak, Internet byl v té době stále oficiálně vyhrazen pro akademickou komunitu. K potřebným legislativním změnám, které umožnily komerční využití Internetu, došlo v roce 1991 v USA a brzy nato i ve zbytku rozvinutého světa.

→

Druhým problémem tehdejšího Internetu byl charakter aplikací. Šlo stále o programy, které si psali hackeři sami pro sebe, takže pro laika byly obtížně použitelné. V osobních počítačích se sice už začala prosazovat grafická uživatelská rozhraní, Internet byl ale pořád pouze textový.

 WORLD WIDE WEB

→

Opravdovou revolucí, která způsobila pozdější masové rozšíření Internetu, byl vznik služby WWW, World Wide Web.

→

Došlo k ní na evropské půdě, konkrétně v ženevském Centru jaderného výzkumu CERN.

 HYPERTEXT TRANSFER PROTOKOL

→

Vynálezci WWW, Tim Berners-Lee a Robert Cailliau, použili známý princip hypertextu, soubory textů navzájem propojených odkazy a přidali k nim komunikační protokol nazvaný http, HyperText Transfer Protocol.

WEBOVÝ SERVER

→

V roce 1990 běžel první webový server v CERNU na počítači NeXT Computer. Premiérová webová stránka měla URL http://info.cern.ch. Celá věc byla v té době ovšem určena pro komunikaci vědců.

 GRAFICKÝ KLIENT

→

Dalším milníkem ve vývoji WWW bylo dokončení vývoje prvního grafického klienta, který nesl již většinu znaků moderních webových prohlížečů. Jmenoval se Mosaic a jeho autory byli Marc Andreesen a Eric Bina, kteří tehdy působili v americké Národním centru superpočítačových aplikací (NCSA). Mosaic byl volně dostupný pro všechny tehdy populární platformy osobních počítačů, a proto se mezi uživateli Internetu rychle šířili.

[technologie4]

VÝUKOVÉ CÍLE

-  vytvoří účelné, přehledné a dostupné webové stránky ( ZÁŘÍ - WEB manuál osobního loga ) 

-  spravuje web a provede aktualizace ( ÚNOR - https://www.artic-studio.net/webove-stranky/aktualizace-a-sprava-webovych-stranek/ )

-  graficky zvýrazní prioritní informace 

upoutá estetickým zpracováním plochy a účelností použitých grafických prvků; ( PROSINEC - NÁVRH WEBOVÉ APLIKACE - KLAUZURY)

-  navrhuje drátěný model webových stránek ( ŘÍJEN - REDESIGN WEBOVÝCH STRÁNEK)

-  provede systémovou analýzu webových stránek a jejich optimalizaci pro daný prohlížeč ( LISTOPAD - ANALÝZA WEB /  https://www.evisions.cz/stitek/seo-analyzy/ )

-  navrhuje systém údržby webových stránek (LEDEN - REDAKČNÍ SYSTÉM)

[technologie4]

7 / BŘEZEN

PRAVIDLA TRVALE UDRŽITELNÉHO WEBU

Webové stránky by se měly průběžně aktualizovat, aby uživatelé mohli sledovat momentální dění a nabídku a měli k dispozici vždy jen ty nejnovější a především správné údaje.

Udržovat obsah stránek neustále aktuální je často časově náročné. Stránky průběžně plníme novým obsahem a aktivně se snažíme hledat možnosti, jak web dále vylepšit a udělat pro uživatele zajímavějším.

Součástí jsou pravidelné zálohy webových stránek, databází a e-mailů, nastavení domén, e-mailových schránek a veškeré další technické záležitosti, které se řeší s  webhostingovou společností.

Veškeré úpravy a opravy se zapracovávají v nejkratší možné době tak, abyste bylo vždy vše maximálně v pořádku.

Údržba a správa stránek:

- aktualizace obsahu webových stránek

- aktivní přístup k vylepšování stránek (návrhy nových funkcí, sekcí apod.)

- správa webhostingového prostoru

- pravidelné zálohování webových stránek, databází a e-mailů

- nastavování domén

- nastavování e-mailových schránek

- perfektní klientský servis

[technologie4]

6 / ÚNOR

REDAKČNÍ SYSTÉM / CMS

Redakční systémy neboli CMS (content management system) usnadňují správu obsahu a online prezentaci mnohým významným firmám. Důvod je jednoduchý – protokol CMS je již napsaný a k obsluze systému stačí jen internetový prohlížeč a připojení.

Mezi světově nejoblíbenější a nejověřenější systémy se zařadily tři: Wordpress, Joomla a Drupal. Všechny jsou psané v protokolu PHP, patří do kategorie open source, všechny si můžete nainstalovat zdarma a jsou dostupné v češtině.Výhod má každý z nich celou řadu, záleží na tom, jak velký projekt plánujete.

WORDPRESS

Ve Wordpressu se snadno zorientujete. Hledáte řešení, nad kterým nestrávíte velké množství času, a na oplátku nebudete vyžadovat příliš náročné funkce? Největší výhodou systému Wordpress je právě jeho snadné ovládání a přehledná administrace. V tomto redakčním systému zprovozníte svou webovou prezentaci rychle a intuitivně. K takové výhodě se ale váže i určitá daň – oproti Joomle a Drupalu nedisponuje Wordpress tak širokými možnostmi.To ovšem neznamená, že se tu nemůžete vyřádit a upravit stránku podle svých představ. Do Wordpressu je možné naistalovat řadu doplňkových modulů, díky kterým vytvoříte libovolný typ webu. Svou stránku tak můžete proměnit na diskuzní fórum nebo třeba internetový obchod. Wordpress má navíc na webu velmi aktivní komunitu vývojářů, díky které snadno najdete praktické návody a informace. Existuje také velké množství šablon, s nimiž bez obtíži vytvoříte stránky na vysoké úrovni.

 JOOMLA

Joomla se právem zařadila mezi jedny z neoblíbenějších redakčních systémů. Propracovaný systém využívají i významné společnosti a instituce jako například Harvardská univerzita. Velké množství pluginů a doplňků umožňuje rozšíření funkcionality a vytvoření různých typů stránek od běžných webů po internetové obchody, galerie, firemní adresáře nebo inzertní servery. S několika tisíci rozšířeními si zkrátka můžete ušít web na míru. Výhodou je také to, že doplňky a šablony se v Joomle instalují přes administraci, takže web snadno vytvoříte i bez znalosti programování. Podobně jako v případě Wordpressu si také fanoušci Joomly vypracovali silnou uživatelskou základnu. Díky ní existuje množství návodů a užitečné dokumentace, která vás provede rozsáhlými možnostmi systému. Pokud však patříte mezi méně náročné uživatele, mohlo by vás velké množství funkcí odradit. K menším projektům můžete vyzkoušet právě Wordpress, v jehož administraci se snáze zorientujete.

DRUPAL

Na široké pole možností se můžete těšit i v Drupalu. Systém obsahuje mnoho funkcí pro vytváření externích i interních webů a množství nástrojů pro organizaci obsahu. Drupal podobně jako Joomla uspokojí náročnou poptávku pro tvorbu statických stránek, internetových časopisů, obchodů nebo diskuzních fór. V základní instalaci najdete několik šablon a velký výběr dalších je ke stažení na internetu. Šablony upravujete přímo v administraci systému, a přes webový prohlížeč tak snadno nastavíte barvy, velikost písma nebo rozmístění objektů. Pro Drupal existuje více než 6000 doplňkových modulů, díky kterým rozšíříte funkce webu podle své potřeby. Drupal se podobně jako Joomla hodí pro složitější projekty, dokonce se by se dalo říci, že je ze všech tří systémů určen pro ty nejnáročnější. Široká nabídka funkcí se pojí s komplikovanějším ovládáním, stejně jako v případě Wordpressu a Joomly je však aktivní komunita vývojářů ochotná se vším poradit.

Na jaký typ stránek můžete využít redakční sytém?

- rozsáhlé firemní weby

- stránky institucí, škol a obcí

- internetové obchody

- stránky neziskových organizací

- intranetové a extranetové portály

- internetové časopisy, osobní stránky, blogy a další

AKTUALIZACE POMOCÍ REDAKČNÍCH SYSTÉMŮ

Vytvořením webových stránek má práce nekončí. Časem vždy vznikne potřeba web upravit, zaktualizovat, nebo stránky rozšířit o další funkcionality. Část těchto činností pravděpodobně zvládnete prostřednictvím redakčního systému sami, avšak co se bude týkat implementace dalších funkcionalit webu, konzultací dalších řešení, návrhu kampaní, jedná se o složitější úpravy, které se realizují ve spolupráci s tvůrci webu a webhostingovými společnostmi. 

Jedná se například o tyto služby:

- monitoring dostupnosti stránek 24 hodin denně / 7 dní v týdnu

- pravidelné zálohování webu a databáze

- textové úpravy ve specifikovaném časovém nebo objemovém rozsahu

- řešení technických problémů

- konzultace dalšího vývoje webu ve specifikovaném rozsahu (analýza, doporučení implementace dalších funkcionalit)

- analýza statistik návštěvnosti webu

[technologie4]

5 / LEDEN

HYPERTEXT

Text, který není omezený lineární formou. Hypertext je pojem označující skupinu textů, které jsou mezi sebou propojeny pomocí odkazů (linků), což umožňuje čtenáři procházet textem nelineárně, bez striktně definovaného počátku, konce i sledu textu. Na technologii hypertextu je založeno internetové prostředí globální počítačové sítě, World Wide Web.

HISTORIE HYPERTEXTU

První nástin struktury podobné hypertextovým aplikacím nastíníl ve svém článku Vannevar Bush. V roce 1945 napsal prognostický článek pro časopis The Atlantic Monthly nazvaný „As We May Think“. Ke konci článku představuje svoji myšlenku zařízení budoucnosti, které nazval „Memex“. Mělo to být nové informační médium, které by vyhledávalo informace způsobem, jakým pracuje lidský mozek. Vychází z předpokladu, že klasické skladování a klasifikace informací není lidskému myšlení vlastní, protože člověk myslí asociativně. Teoreticky navrhl přístroj MemEx (Memory Extended), který nabízí možnost „asociativního indexování“, kde jakákoli položka může okamžitě a automaticky vést k jiné libovolné položce.

 Samotný termín hypertext byl vytvořen Theodorem H. Nelsonem v roce 1965. Nelson trpěl poruchou pozornosti, čemuž je částečně připisována jeho potřeba vytvořit systém, který by tuto poruchu kompenzoval. Na takovémto systému začal pracovat v roce 1960, kdy nastoupil na postgraduální studium na Harvardu. Jádrem jeho projektu byl systém podobný textovému procesoru, ale který by umožnil pracovat s různými verzemi dokumentu a navíc by umožnil dokumenty spojovat nelineárně. Přestože Nelson projekt v prvním ročníku nedokončil, pracoval na něm dál a jeho řešení se pro něj stalo prvořadým zájmem. A tak v roce 1965 přednesl referát, ve kterém začal používat termín hypertext. 

V roce 1989 podal Tim Berners-Lee návrh na CERN vytvořit informační systém, který by tvořil pavučinu informací. Zpočátku se jeho návrh setkal s nulovou reakcí, ale on začal na myšlence přesto pracovat. V roce 1990 napsal Hypertext Transfer Protocol (HTTP) - jazyk počítače, který by se měl používat ke komunikaci hypertextových dokumentů přes Internet a navrhl systém jejich adresování.Napsal klientský program (browser) pro načtení a zobrazení hypertextových dokumentů. Nazval tento klient "WorldWideWeb." (což se postupem času stalo názvem celé Internetové služby pod protokolem http) Hypertextové stránky byly formátovány s použitím Hypertext Markup Language (HTML), který Berners-Lee také sám napsal. Napsal první webový server. Webový server je software, který ukládá webové stránky na počítači a dává je k dispozici pro přístup ostatním lidem. Tento první webový server bude navždy známý jako "info.cern.ch." v CERN.

STRUKTURA HYPERTEXTU

Hypertextový dokument může mít různou strukturu a je důležité naučit se v něm orientovat. Rozlišujeme následující hypertextové struktury:

 - lineární struktura

- hierarchická struktura 

- pavučinová struktura

Lineární struktura je nejjednodušší, skládá se z jedné stránky, která obsahuje odkazy na všechny ostatní. Hierarchická struktura již více využívá možností hypertextu a nejlépe, co do využití, je na tom struktura pavučinová, kde jsou stránky různě navzájem propojeny odkazy. V konečném důsledku z povahy hypertextu vyplývá, že v něm neexistuje centrální, hlavní text, kterému jsou okrajové texty podřazeny. 

Princip organizace, hierarchie a nakládání s odkazy závisí na čtenáři, jehož role se v hypertextovém prostředí posouvá blíže k roli autora. 

Základem hypertextu jsou tzv. nody (uzly) a linky (hyperlinky, hypertextové odkazy). Nody jsou informační jednotky, které se mohou lišit velikostí a obsahem, ale musejí být uzavřené, srozumitelné samy o sobě.

Podle lokalizace v textu rozlišujeme dva typy nodů: 

- nod interní (autorský), v němž link vede k jiným nodům uvnitř daného autorského textu

- nod externí, u kterého link vede k jiným autorům kdekoliv v internetové síti. Tento typ je v podstatě analogický k poznámkám pod čarou v tištěném textu.

[technologie4]

4 / PROSINEC

WEBOVÁ PREZENTACE

na tvorbu webu je průměrně potřeba minimálně 6 různých profesí:

Konzultant (se kterým budete mít minimálně jednu schůzku a budete s ním probírat veškeré náležitosti, vize a požadavky)

Marketingový specialista (který pro váš web vymyslí marketingovou strategii, cíle a úlohu webu ve vašem podnikání)

UX designer (který web navrhne tak, aby se uživatelé na webu pohybovali přesně tak, jak my chceme a přitom se na něm cítili dobře, a dělali požadované akce)

Grafik (který zajistí, aby se působení klienta promítalo v myšlení uživatelů tak, jak chceme a webové stránky upoutaly a ukotvily se návštěvníkům v paměti)

Kodér (ten zajistí správné zobrazování webu – jak uživateli, tak vyhledávačům)

Programátor (který zajistí, aby stránky správně fungovaly a ulehčovaly vám práci)

A to je jen základ. Pro podpůrné činnosti jsou navíc potřeba například copywriter, fotograf či SEO specialista.

PROCES TVORBY WEBU

Pokud jste si do teď mysleli, že tvorba webu je záležitost na dva tři týdny, nechte nás vyvést vás z omylu. Pokud chcete kvalitní web, musíte si na něj chvíli počkat. Doba tvorby průměrného webu trvá 3-4 měsíce od první schůzky až po jeho spuštění, za předpokladu, že jako klient komunikujete do tří dnů.Říkáte si, co na tom proboha trvá tak dlouho? Pojďme si tedy projít jednotlivé kroky tohoto procesu a třeba pochopíte.

1. První schůzka

Na první schůzku si vyhraďte trochu více času a energie, bývá totiž poněkud vyčerpávající. Tedy alespoň ta od kvalitní agentury. Budou se vás totiž ptát téměř na vše ohledně vašeho podnikání a vašich představ. 

Poznat a pochopit své zákazníky a jejich business model je totiž pro dobrou agenturu klíčové. Důležité je stanovit cíle (Více poptávek? Vyšší návštěvnost?) a budget celého procesu.

 2. Úvodní analýza

Po první schůzce zpracuje agentura úvodní analýzu. To je vlastně takový prvotní model obsahující pečlivou analýzu konkurence, tržního prostředí a klíčových slov.

3. Vyžádání podkladů

Po analýze se agentura znovu sejde s klientem, představí mu všechna zjištěná data a společně se dohodnou, jakým směrem se budou ubírat. Poté následuje výzva k dodání podkladů. Agentura bude potřebovat fotografie a texty, které na váš web umístí. Pokud žádné fotografie nemáte k dispozici, většina agentur se o nafocení vašich produktů postará, zároveň by se měla postarat o adekvátnost vašich textů, které buď navrhne upravit, nebo je sama přepracuje.

4. Rozvržení webu (UX/UI) a marketingová funkčnost

Kromě analýzy musí dojít k celkovému promyšlení toho, co a jak bude na webu fungovat z hlediska marketingu, což vyžaduje specialistu z oboru.

Dále se musí vymyslet, jak bude celý web postaven. To má na starost UX/UI designer (UX = user experience neboli „uživatelský prožitek“; UI = user interface neboli uživatelské rozhraní), jehož prací je udělat web tak, aby se něm jeho návštěvníci dokázali pohybovat snadno a intuitivně a zároveň tak, jak my chceme a potřebujeme. 

UX designer zpracuje svůj návrh v jedné ze tří podob: buď formou textového zadání ve Wordu, nebo ve formě wireframe (můžete si představit jako skici webu), nebo v podobě prototypu (používá se u složitějších webů nebo online projektů – jedná se o funkční model webu, kde se před nakreslením vše vyzkouší vč. toho, jak jednotlivé prvky fungují).

5. Grafika

Když je vymyšlená celková vize vzhledu webu a jeho funkcí, předá zadání grafikovi, který ho zpracuje do výsledné podoby.

 Tato fáze je poměrně drahou záležitostí. Zajímá vás proč?

U profesionálních webů totiž design nevychází pouze z jednoho návrhu, ale každá podstránka se kreslí atypicky svému obsahu, což vyžaduje mnohem více času. Web je jako dobrý vs. špatný obchodník – i když mají oba stejné informace, jeden umí prodat mnohem více než ten druhý. Dobrým obchodníkem je v našem případě vymyšlený proces, jak uživateli webu informace vhodně podat, jakými metodami přesvědčit a uzavřít „deal“.

 V této části procesu má zákazník k dispozici většinou dvě kola oprav, kdy se implementují jeho připomínky.

6. Kódování

Po grafikovi se práce předává kodérovi, který grafický návrh přivede k životu. Při kódování dochází k přepsání grafického návrhu do jazyka, kdy se z grafiky stává webová stránka, kterou jsou vyhledávače již schopni přečíst.

Vše se musí nakódovat zvlášť pro desktop a mobilní zařízení, které navíc mají různé operační systémy, což práci kodéra zrovna neusnadňuje.

 7. CMS

CMS neboli systém pro správu obsahu, tedy administrační systém, do kterého se nakódovaný web nasadí. CMS se přizpůsobuje na míru tak, aby klientům co nejvíce ulehčoval práci. Může obsahovat pouhou správu textů a fotografií, ale také přes něj můžete zpracovávat objednávky, přidávat příspěvky na blog, vést firemní databáze, spravovat poptávky, rezervační systém, distribuční sítě atp. Tím se u menších a středních firem může stát hlavním systémem pro řízení obchodní výkonnosti firmy. 

Je důležité zvážit, jestli váš web CMS opravdu potřebuje. U většiny prezentačních webů se dělají změny průměrně dvakrát do roka. Pokud zrovna spadáte do této oblasti, je pro vás lepší ušetřené prostředky za CMS investovat například do většího množství podstránek, které vám agentura navrhne na míru.

8. Testování

V poslední fázi, kdy je web již hotový, dochází k jeho testování. Klient má určitou dobu na to, aby si web sám v klidu “proklikal” a ověřil si, že vše funguje tak, jak má.

Do tohoto seznamu si nezapomeňte přičíst i konzultaci každého kroku s klientem, čekání na jeho reakci a následnou opravu dle jeho požadavků a připomínek. Už jen z tohoto seznamu můžeme vyčíst, proč tvorba webu není záležitostí pár týdnů.

9. Uživatelské testování

U náročnějších klientů a webových stránek nejvyšší třídy se jako poslední fáze celého procesu provádí uživatelské testování. Při něm se web podrobuje zátěžovým testům, zkoumá se, jak se uživatelé na webu opravdu chovají.

WEB A JEHO NACENĚNÍ

Pokud chcete opravdu profesionální výsledek, musíte být připraveni zaplatit i za to, že agentura bude chtít poznat vás, trh na kterém působíte, vaše cíle, zákazníky i konkurenci. Jak už to tak bývá, nejdražší je vždy čas daného profesionála – že si k vašim požadavkům sedne a opravdu nad nimi bude přemýšlet. Dá do toho srdce a veškeré své schopnosti. To u webu za 20 tisíc bohužel nemůžete očekávat.

U střední digitální agentury čekejte cenu firemního webu začínající kolem 100 tisíc korun – pokud chcete, aby se vašemu webu věnovali tak, jako jsme popsali výše. Pokud ale máte jasnou představu a zajištěné všechny podklady (texty od copywritera, kvalitní fotografie.) a věříte tomu, že se obejdete bez veškerých doporučených analýz, lze web na míru pořídit kolem 50 tisíc korun.

Pokud na stránkách nějaké internetové agentury najdete ceník, kde vám nabízí web za 15 tisíc, není to dobré znamení. Ano, i za takovou částku sice lze web vytvořit, ale jedná se o krabicové řešení. To sice leckdy může stačit, nicméně u vysoce konkurenčních odvětví už takové řešení nestačí a opravdu je potřeba mu věnovat proces, který jsme popsali výše.

Co je na webu nejdražší a jaká je jeho životnost?

Cena náročných webů, především e-shopů, se může dostat až do výše milionů. Na tvorbě běžného webu bývá nejdražší samotné vymýšlení webu, pak práce marketingových specialistů, UX designera při promýšlení, jak bude web fungovat a dále grafika a vývoj administračního systému a zejména jeho specifických funkcí na míru.

Co se týká životnosti webu, zpravidla se pohybuje okolo dvou až tří let. Poté by měl projít minimálně redesignem.

9 bodů, podle kterých poznáte, že nevyhazujete peníze z okna:

Agentura nenabízí šablonové, ani žádné jiné krabicové řešení.

Cenu se nedozvíte z webu ani po telefonu. Vše vám agentura vypočítá až po první schůzce a zjištění vaší představy a požadavků.

Agentura vždy bude chtít osobní schůzku, na které se vás budou ptát na stovky otázek, které by vás třeba ani nenapadly. Budou o vás chtít vědět úplně všechno, budou se do vás chtít vcítit tak, jako by web měl být jejich vlastní.

U řešení webu se znovu ujasní celý business model, abyste se dokonale pochopili.

Agentura vám bude schopná zajistit dodání podkladů (fotografie, videa, textace) v případě, že je nemáte.

Agentura bude chtít provést vlastní průzkum trhu, vaší konkurence i zákazníků (jak moc detailní bude, pak závisí na ceně a na množství informací, které jí dodáte).

S tvůrci webu se alespoň 2-3x potkáte a často se vás budou ptát na doplňující informace.

Web nebude dříve jak za dva měsíce.

Proč neutrácíte, ale investujete?

Poměrně překvapivě si stále mnoho lidí neuvědomuje, jak je v dnešní době důležité mít promyšlený web. Překvapivé je to především proto, že se z webu v posledních letech stal hlavní firemní obchodník a ať už vlastníte malou či velkou firmu, firemní web je čím dál tím více klíčový.

Odkaz na váš web je umístěný na všech prezentačních materiálech – na vizitkách, reklamních plochách, pravděpodobně ho máte zmíněný i na dveřích vaší prodejny. Zkrátka ho prezentujete, kde jen to jde, a dost často za tyto prostředky neplatíte zrovna malé peníze. Proto byste rozhodně neměli šetřit právě na webu, na který v těchto materiálech odkazujete.

Neberte proto web jako něco, co je sice nutné mít, ale už je úplně jedno, jak vypadá a kdo vám ho udělá. Vám možná může obyčejný vzhled a nepromyšlené funkce připadat dostačující, zákazníci dnešní doby jsou ale již mnohem více “rozmlsaní” krásnými a kvalitními weby konkurence a s průměrem se dost často nesmíří. Proč by také měli?

STRUKTURA KÓDU WEBOVÉ STRÁNKY

HTML

HTML je akronym pro “Hypertext Markup Language” (hypertextový značkovací jazyk). Každý web, do něhož jste kdy byť jen letmo nahlédli, je vyrobený z HTML. HTML říká webovému prohlížeči, zda se dívá na prostý  text, nebo na obrázek, odkaz, video, atd. Prohlížeč to pak přeloží na to, co vidíte na obrazovce.

CSS

Jazyk, který vytváří vzhled webu, se jmenuje CSS, což je zkratka “Cascading Style Sheets” (kaskádové stylové předpisy). CSS říkají prohlížeči, v jakém fontu má být text, a jaké barvy se mají používat. CSS také definují layout webu, jak mají vypadat tlačítka, jak velké nebo malé má všechno být, můžete s nimi  animovat.

JAVASCRIPT

JavaScript, jak bylo konstatováno výše, je základní programovací jazyk umožňující manipulovat s obsahem webu tak, jak samotné HTML a CSS nedokážou. Nutně ho však opravdu nepotřebujete. Je také řádově složitější než základní HTML/CSS. Je sice neuvěřitelně užitečný, ale pro první web není podstatný. Je to však jedna z nejdůležitějších technologií sdružených s webovým designem.

Co se s ním dá dělat? Třeba vytvářet atraktivní prezentace, vyvolat nový obsah, aniž byste museli znovu načítat stránku, vylepšit použitelnost webu atd.

JQERY

Úkrok stranou: Code academy také vyučuje, jak používat jQuery, pokud se pro ni rozhodnete. jQuery je v podstatě knihovna materiálů, které už vyrobili jiní lidé s JavaScriptem. Ulehčuje používání JavaScriptu ve webových stránkách, protože usnadňuje výběr obsahu a manipulace s obsahem.

Začněte s HTML a CSS. Prohlížejte kód jiných lidí, hojně. Až se propracujete ke kurzu Akademie kódu, zjistíte, že už se začínáte orientovat.

[technologie4]

3 / LISTOPAD

PRAVIDLA TVORBY PŘÍSTUPNÉHO WEBU

Pravidla tvorby přístupného webu jsou dány zákonem o informačních systémech veřejné správy.

- Obsah webových stránek je dostupný a čitelný

- Práci s webovou stránkou řídí uživatel

- Informace jsou srozumitelné a přehledné

- Ovládání webu je jasné a pochopitelné

- Odkazy jsou zřetelné a návodné

- Kód je technicky způsobilý a strukturovaný

ČITELNOST A TYPOGRAFIE NA WEBU

Webová typografie rozhoduje o tom, zda si lidé vůbec webovou stránku přečtou.

Základem úspěšného webového projektu je především kvalitní obsah. Ale aby se takový obsah dobře konzumoval, je nesmírně důležité ho umět uživateli správně naservírovat.

 ZPŮSOB PŘIJÍMÁNÍ INFORMACÍ NA INTERNETU

Umíme ještě číst nebo jenom skenujeme?

Toto je zásadní otázka, na kterou potřebujeme při vytváření funkční typografie webu znát odpověď.

Jakob Nielsen, guru na použitelnost webu, ve své studii z roku 1997 tvrdí, že uživatelé na webu nečtou.

O deset let později to upřesňuje Janice „Ginny“ Redish ve své knize Letting Go of the Words: Writing Web Content That Work, kde říká, že uživatelé web v rychlosti skenují, ale jakmile se dostanou k požadovaným informacím, začnou číst.

Úkol je tedy jasný, nasázet text tak, aby byl jednoduše proskenovatelný, ale zároveň jako celek skvěle čitelný.

OMEZENÍ VELIKOSTI A ŘEZY PÍSMA NA MINIMUM

Chceme-li kvalitně nasázet text, je důležité definovat si jeho hiearchii. Nejedná se o nic jiného než o jasné odlišení struktury nadpisů, odstavců, citací.

Uživatel se musí snadno a rychle zorientovat, kde začít číst a kam pokračovat. Omezením velikostí a řezů písma dostaneme zpětnou vazbu, jestli nemáme příliš složitou hierarchii.

BÍLÝM MÍSTEM ZLEPŠÍTE ČITELNOST

Když budeme sázet knihu, bude naším cílem dostat co nejvíce textu na co nejméně papíru. Důvod je jasný: omezení nákladů na tisk.

Protože se ale bavíme o webové typografii, máme obrovskou výhodu. Můžeme si dovolit být velkorysí a dopřát celému textu a jeho jednotlivým blokům dostatek prostoru a volného místa. Plýtvejte!

Tím velmi zlepšíme přehlednost a orientaci napříč stránkou. Nesmíme také zapomenout členit dlouhé bloky textu do kratších odstavců. Uživatelé to jistě ocení.

Stránku stačí provzdušnit, zvětšit řádkové proklady, rozdělit odstavce a ihned působí daleko lépe. A daleko lépe se bude číst.

 ZVÝRAZŇOVAT SE MUSÍ, ALE VŠEHO S MÍROU

Základní hierarchii již máme, jak tedy text ještě zpřehlednit a umožnit lepší skenovatelnost? Není nic prostšího a zároveň účinnějšího, než obyčejné vytučnění několika důležitých bodů v blocích textu. Ke zvýraznění pomohou také hypertextové odkazy. Ovšem nic se nesmí přehánět. Zvýrazňujeme vždycky opravdu jen několik málo klíčových informací.

Pro zlepšení orientace na stránce nezapomínejte zvýrazňovat důležitá sdělení.

 S TEXTEM SI HRAJTE, ALE MYSLETE NA ČITELNOST

Právě jsme uživateli pomohli rychle se zorientovat na webu. Už ví, kde hledat informace, které ho opravdu zajímají. Ale co dál? Dopřejme mu maximální pohodlí při čtení informací. Pomůže nám k tomu několik základních pravidel dobré čitelnosti na webu.

KONTRAST

Nejdůležitějším faktorem dobré čitelnosti je kontrast textu proti pozadí. Na delší texty je ideální černé (tmavě šedé) písmo na bílém pozadí. Pokud se rozhodneme pro inverzní variantu – bílý text na černém pozadí – musíme počítat s tím, že se bude uživatelům číst o 32 % pomaleji. Pro ověření dostatečného kontrastu písma můžeme použít analyzátor kontrastu barev.

 VELIKOST PÍSMA, ŘÁDKOVÝ PROKLAD A DÉLKA ŘÁDKU

Podle výzkumu v ČR preferuje 92 % uživatelů pro delší texty písmo o velikosti 14 px. Starší uživatelé preferují písmo větší. Na rozdíl od knižní sazby je na webu dobré používat větší řádkový proklad. Lépe se tak skenuje text a pomáhá uživateli jednodušeji přecházet z konce řádku na začátek dalšího. Obecně doporučovaný je 1,3 – 1,6 násobek velikosti písma, ale nemusíme se bát ani 1,8 násobku. Pro nadpisy a větší text můžeme použít proklad menší.

Stejně tak jako pomáháme uživateli přecházet z řádku na řádek větším prokladem, nesmíme zapomenout na optimální délky řádků. Obecně se doporučuje 50 – 110 znaků na řádek. Méně znaků na řádek znamená nepatrně pomalejší čtení, ale oproti delšímu řádku je méně namáhavé pro oči – nemusí tolik kmitat ze strany na stranu.

Velmi dlouhé řádky společně s malým písmem a malými řádkovými proklady oko čtenáře brzy unaví. Nebojte se být v tomto ohledu velkorysí. Nebojte se používat větší písmo s většími proklady.

ZAROVNÁNÍ TEXTU

Také zarovnání textu hraje svou roli. Na webu používáme zarovnání doleva. A když píši doleva, opravdu myslím doleva – ne do bloku. Důvod je ten, že oproti DTP sazbě prozatím nemáme dostatečnou možnost, jak dělit slova.

Moderní prohlížeče již sice dělení slov podporují, ale protože ještě nejsou mezi lidmi příliš rozšířené, nemůžeme na tuto jejich vlastnost spoléhat. Zarovnáním do bloku nám pak v textu vznikají ošklivé řeky, které znesnadňují čitelnost a orientaci v textu.

Zarovnáním doleva navíc opět podpoříme přechod z konce řádku na začátek. Takže ještě jednou – na webu zarovnáváme doleva. V odůvodněných případech můžeme krátký (ale opravdu krátký!) text zarovnat na střed nebo doprava.

MINUSKY VS VERSÁLKY

Pro zvýraznění textu často vidíme použité versálky. To není moc vhodné řešení – text se špatně skenuje i čte. U versálek nám totiž chybí horní a dolní dotahy, podle kterých jednoduše rozpoznáváme jednotlivé znaky i celá slova. Chcete zvýrazňovat delší texty versálkami? Nedělejte to! Versálky klidně používejte, ale jenom na nadpisy a opravdu krátké texty.

MĚJTE SVÉ NÁVŠTĚVNÍKY RÁDI A VIZUALIZUJTE

Ukázali jsme si, jak pracovat s textem, abychom uživateli zpříjemnili skenování a čtení textu. Co když ale máme velké množství informací, které jsou těžko stravitelné? Pomůže nám vizualizace.

Nebojme se použít infografiku, nejrůznější grafy a diagramy ale i ikony a ilustrace. Zvlášť infografika si v poslední době získává stále větší oblibu, a to právě díky možnosti přehledně, a někdy i zábavně, prezentovat jinak nudná data.

Použitím ilustrací nebo infografiky stránku nejen oživíme, ale uživateli informace podáme jednoduše a zábavně.

DALŠÍ TYPY

Používejte selský rozum – když se text čte špatně vám, určitě se nečte o nic lépe uživateli vašeho webu.

Nezapomínejte na kvalitní hierarchii – je to základ.

Zvýrazňujte, doplňujte obrázky, ikony a ilustrace – dejte možnost uživateli během několika vteřin zjistit, o co se v textu jedná.

Nezarovnávejte do bloku.

http://www.nmds.cz/

[technologie4]

2 / ŘÍJEN

INFORMAČNÍ ARCHITEKTURA

Informační architektura je obor zabývající se tříděním informací, jejich uspořádáním a vhodným pojmenováním. 

Cílem informační architektury je usnadnit zpětné vyhledávání relevantních informací jejich vhodnou organizací, navigací a reprezentací. Proto také nachází informační architektura využití na všech místech, kde se pracuje s větším množstvím informací. Například v knihovnách se informační architektura používala již dlouho před začátkem našeho letopočtu.

Dalším takovým místem je samozřejmě internet. Čím rozsáhlejší web, tím více je informační architektura potřeba. Však také návštěvník přichází na váš web především kvůli informacím. Pokud se k nim nedokáže dostat přímou cestou, něco je špatně. Opět to znamená, že přenecháváme tah konkurenci.

Jaké jsou hlavní úkoly informační architektury při tvorbě webu?

- návrh celkové hierarchie informací

- rozdělení informací do jednotlivých stránek (struktura webu)

- vztahy a vazby stránek mezi sebou (prolinkování)

- pojmenování jednotlivých stránek, sekcí i kapitol

- uspořádání informací v textovém obsahu jednotlivých stránek

- volba vhodných typů navigace a její začlenění

- fulltextové vyhledávání a prezentace výsledků

- návrh layoutu stránky

- vytváření metadat

Je zřejmé, že informační architektura úzce souvisí s dalšími obory tvorby internetových prezentací. Mluví do podoby, formy a pojmenování textů, čímž se dotýká web copywritingu i optimalizace pro vyhledávače (SEO). Layout a navigace ovlivňují podobu grafického návrhu a tím i design webu. Informační architektura má však blízkou vazbu i na další vlastnosti webu, především na jeho použitelnost. Také důvěryhodnost webu závisí na jeho dobře zpracované informační architektuře.

UŽIVATELSKÉ ROZHRANÍ / USER INTERFACE

Uživatelské rozhraní je způsob, jakým uživatel komunikuje s určitým systémem. Jedná se o jednu z mnoha složek human-computer interaction (HCI). V minulosti byla hlavním způsobem komunikace příkazová řádka, v dnešní době stále dominuje paradigma bitmapové obrazovky a vstupních zařízení, tedy Grafické uživatelské rozhraní (GUI).

Uživatelské rozhraní ale také v sobě zahrnuje komunikaci a ovládání systému pomocí hlasu, dotyku a jiných možností, které souhrnně nazýváme jako přirozená uživatelská rozhraní.

PRINCIPY DESIGNU UŽIVATELSKÉ ROZHRANÍ

Při tvorbě aplikací a designu jejich uživatelského prostředí je třeba se soustředit na nejdůležitější element – na samotného uživatele a jeho komfort při používání aplikace.

 Je proto třeba dodržet několik základních principů:

- Definování uživatele – jaké jsou jeho potřeby, zkušenosti a znalosti

- Zkušenost – využití chování a vizuálu ze systémů, se kterými má uživatel zkušenost

- Viditelnost funkcí – jednoduchost a jednoznačnost zobrazení funkcí, které má uživatel k dispozici

- Konzistence – funkce a chování aplikace musí být konzistentní v každé její části

- Zobrazení stavu – uživatelské rozhraní musí odrážet změnu stavu aplikace

- Zaměření – design důležitých součástí musí být pro uživatele jednoduše viditelný)

- Podpora – pochopení pomoci, kterou uživatel při práci s aplikací potřebuje

- Bezpečnost – rozhraní aplikace musí uživateli poskytovat pocit bezpečí při jejím používání, např. dvojitým potvrzováním některých funkcí

- Kontext – rozhraní a funkce musí reflektovat kontext, v němž se používají

- Estetika – rozhraní musí působit esteticky a příjemně

- Uživatelské testování    – třeba nechat uživatelů vyjádřit své názory na aplikaci

STRUKTURA WEBU

Jak by měla vypadat správná struktura webu:

Musí být přehledná.

Dobrá stránka musí být přehledná. Návštěvník by měl v mžiku sekundy vědět, kam se dostane, co se tam dozví a jak se může vrátit zpět.

Jednoduchá.

Čím jasnější budou cesty na vašem webu, tím budou uživatelé méně zmateni.

Měla by mít jasné cíle.

Každá podstránka webu měla z hlediska vyhledatelnosti obsahovat určitou skupinu klíčových slov a plnit jasné cíle webu. Do struktury svého webu byste měli tyto cíle promítnout.

Bude kompromisem mezi vyhledavatelností a použitelností pro uživatele.

Navrhnete-li strukturu webu správně, budou její kategorie a podstránky obsahovat správné klíčové fráze a uživatelé se v ní budou pohybovat flexibilně a najdou rychle informace, které hledají.

Jasná navigace mezi úrovněmi struktury. 

Důležitou funkcí struktury webu je snadná navigace mezi jejími úrovněmi. Uživatelé by se snadno měli dostat zpět na úvodní stranu a další kategorie.

[technologie4]

1 / ZÁŘÍ

PŘEHLEDNOST A SROZUMITELNOST INFORMACÍ NA WEBU

Návštěvník musí rychle najít to, co hledá. Nezdržujte ho, nenuťte ho přemýšlet nad tím, kam má kliknout, kde to či ono hledat. Více času na webu je pozitivní jen tam, kde něco podrobně prezentujete. Uživatel má nad webem řešit otázku, proč má něco udělat, nikoli jak.

 V JEDNODUCHOSTI JE SÍLA

Při tvorbě webových stránek je proto velmi důležité zamyslet se nad tím, co u vás budou návštěvníci hledat a vše jim prezentovat v jednoduché a přehledné formě. Nepotřebujete spoustu „omáčky“, která ve výsledku stejně nikoho nezajímá. Potřebujete jasné informace a snadnou cestu k cíli. Soustřeďte se na prezentaci, srozumitelnost vámi nabízených služeb a snadný přístup ke kontaktům.

Návštěvníkům stránek jednoduchým způsobem vysvětlete, co nabízíte, jak služba funguje a co znamená. Snažte se v textech nepoužívat mnoho technických termínů. Pokud je použijete, pak je vysvětlete. Návštěvník si pak nebude připadat ztracený v termínech.

Všechny informace prezentujte v přehledných navigacích a každou kategorii dobře pojmenujte, aby byl obsah srozumitelný na první pohled. Nevytvářejte zbytečně příliš rozsáhle informační struktury. Čím hlubší struktura bude, tím méně bude přehledná.

Jak prezentovat přehledně a srozumitelně:

- Před začátkem práce se zamyslete nad tím, co potřebujete prezentovat.

- Navrhněte si modelovou situaci, jak se bude návštěvník na stránkách chovat.

- Navigaci stránek vytvářejte s jednoduchou strukturou.

- Nazývejte věci „pravým jménem“, názvy vytvářejte srozumitelně.

- Prezentujte jasné a stručné informace.

- Jednoduše vysvětlete, co nabízíte a jaké jsou vaše konkurenční výhody.

- Text vytvářejte pro lidi, ne pro vyhledávače.

-  Zbytečně lidem nepleťte hlavu složitými technickými termíny.

ZÁKLADNÍ TYPY NAVIGACE

Všechny dále uvedené styly lze použít samostatně, některé jen výjimečně nebo v libovolných kombinacích. Všechny mají své výhody a nevýhody. 

STROMOVÁ, HIERARCHICKÁ NAVIGACE

Vychází z principu větvení struktury webu na nižší kategorie. Uživatel postupně prochází stromem shora dolů a v každém uzlu vybírá nejvhodnější podkategorii. Ze své podstaty se hierarchická navigace používá zejména na velmi rozsáhlých webech.

GLOBÁLNÍ A LOKÁLNÍ NAVIGACE

Na velmi rozsáhlých webech lze v rámci hlavní navigace ještě rozlišit navigaci globální a lokální. Lokální navigace upozorňuje na další stránky dané kategorie, globální navigace umožňuje přecházení mezi hlavními kategoriemi webu.

ODKAZY V TEXTU

Odkazy volně roztroušené v textu jsou základem hypertextového konceptu a jako takové a tedy představují nejstarší model navigace na Internetu. Dnes se ovšem již jednoznačně jedná o styl pouze doplňkový.

MAPA WEBU

Mapa webu, neboli "site map", není vlastně nic jiného, než seznam všech stránek. Podle dovednosti tvůrců její grafické uspořádání lépe, či hůře vystihuje strukturu webu a významové souvislosti mezi stránkami.

LOKÁLNÍ VYHLEDAVAČ

Funguje na principu fulltextového vyhledávaní, tj. hledá stránky obsahující zadaný text.  Specifické postavení mají vyhledávače zpřístupňující obsah, který je jinými prostředky nedostupný. To je časté u webů operujících nad rozsáhlou databází, ze které si uživatel vyhledávačem data vybírá podle určitých kritérií.

HAMBURGER MENU

S vzestupem a rozvojem webdesignu se uchytil typ navigace tzv. hamburger (známé 3 nad sebe umístěné vodorovné čáry), který se objevuje převážně v rámci responzivního designu na mobilních zařízeních jako náhražka za plnohodnotné menu. Jeho použití se rozšířilo i na klasické webové stránky.

MENU, KTERÁ SE VYMYKAJÍ NAVIGAČNÍM PARADIGMATŮM

Již od doby temna u webdesignu (cca před 20 lety) existovaly pouze dva standardní druhy navigace na internetových stránkách: horní a postranní panel. S vzestupem a rozvojem webdesignu se uchytil třetí typ navigace tzv. hamburger,  který se objevuje převážně v rámci responzivního designu na mobilních zařízeních jako náhražka za plnohodnotné menu.

Se značně smíšenými a ambivalentními pocity z těchto třech existujících možností navigace a pokračujícímu vzestupu mobilních prohlížečů, se dá očekávat příliv nových experimentálních navigačních menu, které se budou chtít vymanit z vžitých stereotypů. 

NAVIGAČNÍ MENU VE STYLU RÁMEČKU 

ORIGINÁLNÍ NAVIGACE S OHLEDEM NA JEDNOTNÝ VIZUÁLNÍ STYL

HAMBUREGER PLNOHODNOTNÁ NAVIGACE PRO VŠECHNA ZAŘÍZENÍ

AWWWARDS / VÍTĚZNÉ APLIKACE / ORIGINÁLNÍ MENU

Na základě jednotného vizuální stylu lze aplikovat originální navigaci, jak do webových stránek, tak mobilních aplikací.

https://www.awwwards.com/websites/unusual-navigation/

ÚKOL

ELEKTRONICKÝ GRAFICKÝ MANUÁL

Navrhni a zprovozni jednoduchý manuál osobní značky.

Pracuj dle přiložených podkladů:

Stahuj zde.

Kód upravuje v Notepadu ++, nebo v některé jeho verzi, či v jiném textovém editoru, který přehledně zobrazí zdrojový kód