Kurz pro studenty oboru Informan studia a knihovnictv
Kurz pro studenty oboru Informační studia a knihovnictví 4. Základní principy webdesignu Martin Krčál Brno, FF MU, 4. 11. 2009
Náplň hodiny q Domovská stránka q Grafika, obrázky, barvy, nástroje q Písmo, odkazy q Tabulky q Formuláře, seznamy
Domovská stránka
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ě
Layouty
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
Grafika a obrázky
Správný obrázek
Grafika na stránce q velikost grafiky na stránkách v max. 100 k. B na stránce v komprimovaná grafika v malé rozlišení (72 dpi) 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 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%) q desítkový v rgb(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/barvyzakladni. html q http: //www. jakpsatweb. cz/archiv/barvybezpecne. 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 Color. Match 5 K q Color. Toy 2. 0
Nástroje na míchání barev q Colorblind Web Page Filter q Colour. Lovers. 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 http: //en. wikipedia. org/wiki/Color_blindness
Písmo
Písmo q výrazně zasahuje do grafického návrhu q definice pomocí CSS 2 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, xxsmall, x-small, medium, 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 <b> v <strong>, <em> 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 <h 1>-<h 6> q nadpisy výstižné q <h 1> 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 <meta> v <meta http-equiv=“content-type” content=“text/html; charset=utf-8” /> q deklarace v XML v <? xml version=“ 1. 0” encoding=“utf-8”? >
Odkazy
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> a </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ší: Pro zjištění nabídky <a>klikněte sem</a>. <a>Seznamte se s nabídkou našich služeb</a>. Seznamte se s nabídkou našich <a>služeb</a>.
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 <a href=‘soubor. pdf’ title=‘statistika výpůjček Ústřední knihovny FSS MU (PDF, 120 k. B , 12. 5. 2007)’>statistika výpůjček (PDF, 120 k. B, 12. 5. 2007)</a>
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 <a href=“neco. cz” accesskey=“ 1”>Úvod</a>
Příklady HK q q q S = přeskočení navigace 1 = domovská stránka 2 = novinky 3 = mapa stránek 4 = vyhledávání 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
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 Nástup Příjezd Odjezd Brno --- 7: 00 Jihlava 8: 00 8: 05 Praha 9: 30 --- Brno Jihlava Praga | --- 8: 00 9: 30 | 7: 00 8: 05 ---
Tabulky Příjezd Odjezd Brno --- 7: 00 Jihlava 8: 00 8: 05 Praha 9: 30 --- Příjezd Odjezd | Brno --- 7: 00 | Jihlava 8: 00 8: 05 | Praha 9: 30 ---
Tabulky Jan Tomáš Mikuláš Váha 100 87 69 Věk 30 25 23 Dětí 3 0 1 Jan Tomáš Mikuláš | Váha 100 87 69 | Věk 30 25 23 | Dětí 3 0 1
Zásady tvorby tabulek q definujte <caption> pro popis tabulky v <table><caption >popis</caption>… q definujte hlavičky (<th>) v <tr><th>sloup 1</th><th>sloup 2</th></tr> q relativní výška a šířka sloupců q silné rámování tabulky a buněk? ? ?
Formuláře
Formuláře q umožňují interaktivitu q definujte <fieldset> pro rozdělení formuláře do logických bloků q <legend> zobrazuje popisek bloku q <label> popisky polí (+parametr for) q provázání s popiskem parametrem id
Formuláře q nekrátíme parametry v selected, checked q parametr tabindex = definuje pořadí procházení polí při stisku klávesy TAB q accesskey - jako v odkazech
Formuláře - příklad <form method=‘post’ action=‘soubor. php’> <fieldset> <legend>Osobní údaje</legend> <label for=‘jmeno’>Jméno: </label> <input type=‘text’ name=‘jmeno’ id=‘jmeno’ /> <input type=‘submit’ name=‘send’ value=‘Odeslat’ /> </fieldset> </form>
Seznamy
Seznamy q všechny seznamy definujeme pomocí <ol> nebo <ul> jablka <ol> hrušky <li>hrušky</li> broskve <li>broskve </li> banány </ol>
Na závěr…
Závěr Děkuji za pozornost Martin Krčál krcal@fss. muni. cz
- Slides: 65