Kurz pro studenty oboru Informační studia a knihovnictví 7. Základní principy webdesignu Martin Krčál Brno, KISK FF MU, 2.4.2014 OPVK_MU_rgb Náplň hodiny qDomovská stránka qGrafika, obrázky, barvy, nástroje qPísmo, odkazy qTabulky qFormuláře, seznamy Domovská stránka Homepage qsplash screen (vstupní stránka) vpre-homepage vvolba jazyka, animace,… qhomepage (domovská stránka) vobsahuje info vjako titulní strana novin q Cíle domovské stránky qidentifikace webu qobsah a poslání webu qzaujmout uživatele vjako obálka u časopisu vupoutávky a odkazy na obsah vnejžádanější info vmusí se líbit všem!!! q q q Domovská stránka qukázat cestu k tomu, co hledám… q…i k tomu, co nehledám qukázat, kde mám začít qmusí být pravidelně obměňována q q Domovská stránka q4 základní otázky vKde to jsem? vCo mi tu nabídnou? vCo tady můžu dělat? vProč tu zůstat a nejít jinam? qhttp://www.nwt.cz qhttp://www.opel.cz Co na homepage qlogo qslogan qnovinky qvyhledávání qnavigace qslužby (registrace, e-shop, …) q Co na homepage qdobře zvažte, co na úvodní stránku dát qne moc x ne málo qpracujte s místem efektivně q Layouty Druhy stránek qjednoduché stránky qsloupcový layout Technologie pro tvorbu layoutů qrámcový layout qtabulkový layout qna CSS založený layout Grafika a obrázky Správný obrázek q obrazekza1000slov Grafika na stránce qvelikost grafiky na stránkách vmax. 100kB na stránce??? vkomprimovaná grafika vmalé rozlišení (72dpi) vobsah pro různá zařízení (PC, mobil,...) qměla by doplňovat obsah qzjednodušit orientaci na stránkách Obrázky - rastrová grafika qrastrová (bitmapová) grafika qzvětšování = snižování kvality, ostrosti qgrafické formáty vJPG, GIF, PNG - kdy je využít? qzpracování rastrové grafiky vPhotoshop - a jeho nástroje pro web q Photoshop – uložit pro web Obrázky - vektorová grafika qvektorová grafika qzvětšování = udržování kvality, ostrosti qgrafické formáty vSVG qnevýhody vpostupná implementace v prohlížečích Fotobanky qsxc.hu - databanka fotografií zdarma qfreephotosbank.com - zdarma qeverystockphoto.com - zdarma qistockphoto.com – komerční qpixmac.cz – komerční qProfimédia - komerční Rozcestník qBlue Vertigo - odkazy na fotogalerie, šablony, textury, kliparty,… Barvy qmax. 5 barev v jen 1 hlavní (RGB) qsprávné sladění barev qdostatečný kontrast pozadí a písma qvětší plochy = méně výrazné barvy qméně výrazné barvy textu qbarevné zdůraznění důležitých výrazů Funkce barev qnavození nálady qposílení identity stránek a firmy qzvýraznění struktury a navigace vzvyšování použitelnosti qnavedení na důležité info Barevná schémata qmonochromatické schéma qanalogické schéma qkomplementární schéma qsaturační schéma qtriad schéma qhttp://www.limov.com/colour/schemes.lml q Barevné spekrum Čitelnost textu - ukázka ukazka-kontrast Co znamenají barvy qmodrá = klid, uvolnění, relaxace, chlad qčervená = energie, emoce, láska qzelená = růst, nový začátek, uklidňuje qžlutá = veselá, komunikativní qoranžová = optimismus, radost ze života, veselí, odvaha Zápis barev qhexadecimální v#ffffff nebo #fff, #000000 nebo #000 qprocentuální vrgb(100%,100%,100%) qdesítkový vrgb(100,100,100) Skupiny barev qzákladní (16 barev) qpojmenované (128 barev) qbezpečné (216 barev + 16 stupňů šedi) qsystémové (28 barev) qostatní q Zápis barev qzápis pojmenovaných barev vred, green, yellow, blue, darkblue, maroon, navy, brown, black, white,… vcelkem 128 barev Skupiny barev - přehledy qhttp://www.webtvorba.cz/css/barvy.html qhttp://www.jakpsatweb.cz/archiv/barvy-zakladni.html qhttp://www.jakpsatweb.cz/archiv/barvy-bezpecne.html Nástroje na míchání barev qGenerátor barevných schémat qColour Selector qColorMatch 5K qColortools.net – sada nástrojů pro práci s barvami Nástroje na míchání barev qColorblind Web Page Filter qColourLovers.com Některá zraková postižení qdichromacy = neschopnost vidět jednu barvu z RGB qprotanopia = neschopnost vidět červenou qtritanopia = neschopnost vidět modrou qdeuteranopia = neschopnost vidět zelenou qcolor blindness (monochromacy) = barvoslepost http://en.wikipedia.org/wiki/Color_blindness Templates qhttp://www.templatesbox.com qhttp://www.freewebsitetemplates.com qhttp://www.flashtemplatestore.com qhttp://freesitetemplates.com qFree HTML+CSS Web Templates (Smashing Magazine) qhttp://www.fwpthemes.com/ Písmo Písmo qvýrazně zasahuje do grafického návrhu qdefinice pomocí CSS qvolba vhodného druhu písma vneproporcionální písmo vArial, Verdana, Helvetica (UNIX) qnepoužívat nestandardní fonty Písmo qvelikost písma vabsolutní jednotky (px, pt, in, pc, cm,…) vrelativní jednotky (procenta, em, ex, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) qřádkování (pomáhá čitelnosti textu) vline-height Písmo qzvýraznění textu vnepoužívat v, vstyl lze měnit přes CSS vtext nepodtrháváme (odkazy) qzarovnávání textu vsouvislý text - justify, jinak left Nadpisy qdefinujeme tagy

-

qnadpisy výstižné q

vpouze jednou na stránce vhlavní nadpis vdůležitý pro vyhledávače, SEO qsprávná hierarchie nadpisů!!! Obrázky místo textu qpoužití obrázků v textech vprospěje samotné stránce??? qkdy jej použít? vgrafická potřeba (stínování, průhlednost, specifický font apod.) vlogo, slogan, název stránky, menu qatribut alt, neviditelný text v Nevýhody qzvyšuje velikost stránky a přenášených dat ð problém u pomalého připojení qpísmo nepůjde zvětšit q Kódování qkódovací sady pro české stránky vUTF-8, Win-1250, ISO-8859-2 qpreferujte UTF-8 qdůležitá správná deklarace v hlavičce Kódování v PSPadu q http://download.chip.eu/ii/204309786_5565476cff.jpg Správná deklarace kódování qdeklarace v (X)HTML - tag v qdeklarace v XML v q Odkazy Odkazy qnejdůležitější prvek stránek qprovázání stránek qodkazy vždy podtržené ð snadnější orientace v textu qnepodtržené odkazy jinak zvýraznit Texty v odkazech qvždy volíme výstižný text mezi a qnepoužívat klikněte sem, zde apod. ð jasně nevystihují, kam odkaz směřuje (SEO) qodkazy krátké qvýraz by měl zapadat do kontextu Texty v odkazech prakticky qkterá varianta je správnější: Œ Pro zjištění nabídky klikněte sem. � Seznamte se s nabídkou našich služeb. Ž Seznamte se s nabídkou našich služeb. > Odkazy qatribut title qtlačítko zpět (s výstižným textem) qnavštívené odkazy qdynamické odkazy vpomocí stylů - a:hover vdobrá čitelnost odkazu q Otvírání stránek v novém okně qudržení uživatele na stránkách qtarget=“_blank” – zákaz v XHTML 1.1!!! qproblém pro postižené (a co ostatní???) qjavascript qpři použití uvést v atributu title Odkazy na soubory qv textech odkazů uvádět: vformát, velikost, datum zveřejnění, příp. datum aktualizace vusnadní uživateli rozhodování, zda soubor stahovat qstejné údaje i do atributu title Příklad qstatistika výpůjček (PDF, 120kB, 12.2.2014) Horké klávesy u odkazů qatribut accesskey u odkazů a formulářů qaccesskey=“M” ð ALT+M (+ENTER) qjen pro důležité odkazy qvhodné kombinace ð nesmí kolidovat s klávesovými zkratkami OS nebo prohlížeče (ALT+S ð Soubor) q Horké klávesy qřešením použití čísel qdoporučení použití HK vhttp://www.clagnut.com/blog/193 qpoužití doporučuje SONS ČR qÚvod Příklady HK qS = přeskočení navigace q1 = domovská stránka q2 = novinky q3 = mapa stránek q4 = vyhledávání q5 = FAQ Horké klávesy q6 = nápověda q7 = reklamace q8 = podmínky a práva q9 = odpovědní formulář q0 = horké klávesy Tabulky Tabulky qpro prezentaci statistických dat qne pro layout!!!!!!!!! qproblém pro handicapované qlineární tabulky (po řádcích) qčtečka předčítá hodnoty buněk zleva doprava Tabulky Nástup Příjezd Odjezd Brno Jihlava Praha - 8:00 9:30 7:00 8:05 - Nástup | Příjezd | Odjezd Brno Jihlava Praha | - 8:00 9:30 | 7:00 8:05 - Tabulky Město Příjezd Odjezd Brno - 7:00 Jihlava 8:00 8:05 Praha 9:30 - Město Příjezd Odjezd | Brno - 7:00 | Jihlava 8:00 8:05 | Praha 9:30 - Tabulky Jméno Jan Tomáš Mikuláš Váha 100 87 69 Věk 30 25 23 Dětí 3 0 1 Jméno Jan Tomáš Mikuláš | Váha 100 87 69 | Věk 30 25 23 | Dětí 3 0 1 Tabulky Jméno Váha Věk Děti Jan 100 30 3 Tomáš 87 25 0 Mikuláš 69 23 1 Jméno Váha Věk Děti | Jan 100 30 3 | Tomáš 87 25 0 | Mikuláš 69 23 1 Zásady tvorby tabulek qdefinujte pro popis tabulky v… qdefinujte hlavičky ( qrelativní výška a šířka sloupců qsilné rámování tabulky a buněk??? Formuláře Formuláře qumožňují interaktivitu qdefinujte
pro rozdělení formuláře do logických bloků q zobrazuje popisek bloku q
popis
) v
sloup1sloup2