4. Základní principy webdesignu Martin Krčál Náplň hodiny q Domovská stránka q Grafika, obrázky, barvy, nástroje q Písmo, odkazy q Tabulky q Formuláře, seznamy Homepage q splash screen (vstupní stránka) v pre-homepage v volba jazyka, animace,… q homepage (domovská stránka) v obsahuje info v jako titulní strana novin Cíle domovské stránky q identifikace webu q obsah a poslání webu q zaujmout uživatele v jako obálka u časopisu v upoutávky a odkazy na obsah v nejžádanější info v musí se líbit všem!!! Domovská stránka q ukázat cestu k tomu co hledám… q …i k tomu co nehledám q ukázat, kde mám začít q musí být pravidelně obměňována Domovská stránka q 4 základní otázky v Kde to jsem? v Co mi tu nabídnou? v Co tady můžu dělat? v Proč tu zůstat a nejít jinam? q http://www.lupa.cz Co na homepage q logo q slogan q novinky q vyhledávání q navigace q služby (registrace, e-shop, …) Co na homepage q dobře zvažte, co na úvodní stránku dát q ne moc x ne málo q pracujte s místem efektivně Druhy stránek q jednoduché stránky q sloupcový layout Technologie pro tvorbu layoutů q rámcový layout q tabulkový layout q na CSS založený layout Správný obrázek Grafika na stránce q velikost grafiky na stránkách v max. 100kB na stránce v komprimovaná grafika v malé rozlišení (72dpi) q měla by doplňovat obsah q zjednodušit orientaci na stránkách Obrázky - rastrová grafika q rastrová (bitmapová) grafika q zvětšování = snižování kvality, ostrosti q grafické formáty v JPG, GIF, PNG - kdy je využít? q zpracování rastrové grafiky v Photoshop - a jeho nástroje pro web Photoshop – uložit pro web Obrázky - vektorová grafika q vektorová grafika q zvětšování = udržování kvality, ostrosti q grafické formáty v SVG q nevýhody v postupná implementace v prohlížečích Barvy q max. 5 barev q správné sladění barev q dostatečný kontrast pozadí a písma q větší plochy = méně výrazné barvy q méně výrazné barvy textu Funkce barev q navození nálady q posílení identity stránek a firmy q zvýraznění struktury a navigace v zvyšování použitelnosti q navedení na důležité info Barevná schémata q monochromatické schéma q analogické schéma q komplementární schéma q saturační schéma q triad schéma http://www.limov.com/colour/schemes.lml Barevné spekrum Co znamenají barvy q modrá = klid, uvolnění, relaxace, chlad q červená = energie, emoce, láska q zelená = růst, nový začátek, uklidňuje q žlutá = veselá, komunikativní q oranžová = optimismus, radost ze života, veselí, odvaha Zápis barev q hexadecimální v #ffffff nebo #fff, #000000 nebo #000 q procentuální v rgb(100%,100%,100%) q desítkový v rgb(100,100,100) Skupiny barev q základní (16 barev) q pojmenované (128 barev) q bezpečné (216 barev + 16 stupňů šedi) q systémové (28 barev) q ostatní Zápis barev q zápis pojmenovaných barev v red, green, yellow, blue, darkblue, maroon, navy, brown, black, white,… v celkem 128 barev Skupiny barev - přehledy q http://www.webtvorba.cz/css/barvy.html q http://www.jakpsatweb.cz/archiv/barvy-zakladni.html q http://www.jakpsatweb.cz/archiv/barvy-bezpecne.html Nástroje na míchání barev q Generátor barevných schémat 2 q Generátor barevných schémat 1 q Colour Selector q ColorMatch 5K q ColorToy 2.0 Nástroje na míchání barev q Colorblind Web Page Filter q ColourLovers.com Některá zraková postižení q dichromacy = neschopnost vidět jednu barvu z RGB () q protanopia = neschopnost vidět červenou q tritanopia = neschopnost vidět modrou q deuteranopia = neschopnost vidět zelenou q color blindness (monochromacy) = barvoslepost Písmo q výrazně zasahuje do grafického návrhu q definice pomocí CSS2 q volba vhodného druhu písma v neproporcionální písmo v Arial, Verdana, Helvetica (UNIX) q nepoužívat nestandardní fonty Písmo q velikost písma v absolutní jednotky (px, pt, in, pc, cm,…) v relativní jednotky (procenta, em, ex, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) q řádkování (pomáhá čitelnosti textu) v line-height Písmo q zvýraznění textu v nepoužívat v , v styl lze měnit přes CSS v text nepodtrháváme (odkazy) q zarovnávání textu v souvislý text - justify, jinak left Nadpisy q definujeme tagy

-

q nadpisy výstižné q

v pouze jednou na stránce v hlavní nadpis v důležitý pro vyhledávače, SEO q správná hierarchie nadpisů!!! Obrázky místo textu q použití obrázků v textech v prospěje samotné stránce??? q kdy jej použít? v grafická potřeba (stínování, průhlednost, specifický font apod.) v logo, slogan, název stránky, menu q atribut alt, neviditelný text Nevýhody q zvyšuje velikost stránky a přenášených dat ð problém u pomalého připojení q písmo nepůjde zvětšit Kódování q kódovací sady pro české stránky v UTF-8, Win-1250, ISO-8859-2 q preferujte UTF-8 q důležitá správná deklarace v hlavičce Správná deklarace kódování q deklarace v (X)HTML - tag v q deklarace v XML v Odkazy q nejdůležitější prvek stránek q provázání stránek q odkazy vždy podtržené ð snadnější orientace v textu q nepodtržené odkazy jinak zvýraznit Texty v odkazech q vždy volíme výstižný text mezi a q nepoužívat klikněte sem, zde apod. ð jasně nevystihují, kam odkaz směřuje (SEO) q odkazy krátké q výraz by měl zapadat do kontextu Texty v odkazech prakticky q která varianta je správnější: Odkazy q atribut title q tlačítko zpět (s výstižným textem) q navštívené odkazy q dynamické odkazy v pomocí stylů - a:hover v dobrá čitelnost odkazu Otvírání stránek v novém okně q udržení uživatele na stránkách q target=“_blank” – zákaz v XHTML 1.1!!! q problém pro handicapované (a co ostatní???) q javascript q při použití uvést v atributu title Odkazy na soubory q v textech odkazů uvádět: v formát, velikost, datum zveřejnění, příp. datum aktualizace v usnadní uživateli rozhodování, zda soubor stahovat q stejné údaje i do atributu title Příklad statistika výpůjček (PDF, 120kB, 12.5.2007) Horké klávesy u odkazů q atribut accesskey u odkazů a formulářů q accesskey=“M” ð ALT+M (+ENTER) q jen pro důležité odkazy q vhodné kombinace  nesmí kolidovat s klávesovými zkratkami OS nebo prohlížeče (ALT+S  Soubor) Horké klávesy q řešením použití čísel q doporučení použití HK v http://www.clagnut.com/blog/193 q použití doporučuje SONS ČR q Úvod Příklady HK q S = přeskočení navigace q 1 = domovská stránka q 2 = novinky q 3 = mapa stránek q 4 = vyhledávání q 5 = FAQ Horké klávesy q 6 = nápověda q 7 = reklamace q 8 = podmínky a práva q 9 = odpovědní formulář q 0 = horké klávesy Tabulky q pro prezentaci statistických dat q ne pro layout!!!!!!!!! q problém pro handicapované q lineární tabulky (po řádcích) q čtečka přečítá hodnoty buněk zleva doprava Tabulky Tabulky Tabulky Zásady tvorby tabulek q definujte pro popis tabulky v … q definujte hlavičky ( q relativní výška a šířka sloupců q silné rámování tabulky a buněk??? Formuláře q umožňují interaktivitu q definujte
pro rozdělení formuláře do logických bloků q zobrazuje popisek bloku q
popis
) v
sloup1sloup2