Internetové publikování Doc. Ing. Petr Zámostný, Z Ph.D. místnost: A-72aA tel.: 4222, 4167 (sekretari( sekretariát ústavu 111) e-mail: petr.zamostny@vscht vscht.czcz
Internetové publikování Webdesign
Design stránky»grafický design» první dojem, rychlost stahování» Struktura stránek» navigace, rozvržení plochy» Volba informací» okruh čtenářů» Syntaktická správnost, validita»metainformace» pro snadnou indexaci vyhledávači
Grafický design - cíle»přilákat a upoutat návštěvníka»neměl by být odpudivý»přiměřenost obsahu»méně je někdy více - serióznost» Poskytnout webu jednotný vzhled a rámec» Poskytnout vizuální hierarchii částí prezentace»hlavnísložky» barevné schéma»rozložení»typografie
Základy teorie barev» Aditivní a subtraktivní míchání barev
RGB model HSB Model» Složky odpovídající vnímání oka» odstín (hue)» saturation (sytost)» brightness/value (jas)
Barevný kruh» Reprezentace odstínu v HSB modelu» Volba vyváženého barevného schématu webové prezentace» jeden odstín» doplňkové barvy» posunutý doplněk» triáda» tetráda» http://www.wellstyled.com/tools /colorscheme2/index.html» Grafický manuál
Barvy sytost»kontrast» rozdíl v odstínu sytosti a jasu použitých barev jas
Grafický design výběr r písmap» Bezpatková písma jsou čitelnější» Kombinace max. 2 typů písma na jedné stránce» Řádka 40 60 znaků»písmo raději větší, nastavitelné» relativní jednotky %, em» abs. velikosti xx-small,... xx-large
Typografie» Dodržování pravidel pravopisu» Dodržování typografických pravidel» Typografie na internetu» Webdesignerovy poznámky z typografie» Použití vhodných rodin písma» Times vs. Georgia» Arial vs. Verdana
Tok textu Lorem ipsum dolor sit amet consectetuer nibh Sed malesuada facilisi justo. Curabitur eleifend mattis sed facilisis mauris et mattis dignissim vitae sapien. Ipsum ut mauris lacinia tincidunt Donec Donec vitae sem ac velit. Dolor leo vel et sit tempor nibh orci ac quam lacus. Lorem ipsum dolor sit amet consectetuer nibh Sed malesuada facilisi justo. Curabitur eleifend mattis sed facilisis mauris et mattis dignissim vitae sapien. Ipsum ut mauris lacinia tincidunt Donec Donec vitae sem ac velit. Dolor leo vel et sit tempor nibh orci ac quam lacus. Lorem ipsum dolor sit amet consectetuer nibh Sed malesuada facilisi justo. Curabitur eleifend mattis sed facilisis mauris et mattis dignissim vitae sapien. Ipsum ut mauris lacinia tincidunt Donec Donec vitae sem ac velit. Dolor leo vel et sit tempor nibh orci ac quam lacus. Lorem ipsum dolor sit amet consectetuer nibh Sed malesuada facilisi justo. Curabitur eleifend mattis sed facilisis mauris et mattis dignissim vitae sapien. Ipsum ut mauris lacinia tincidunt Donec Donec vitae sem ac velit. Dolor leo vel et sit tempor nibh orci ac quam lacus.
Rozložen ení stránek»pevné» jednosloupcové» http://www.cspch.cz/» dvousloupcové» http://www.novinky.cz/» vícesloupcové» http://www.idnes.cz/»pružné» jednosloupcové» dvousloupcové» http://en.wikipedia.org/wiki/complementary_color» vícesloupcové» http://chemicke-listy.vscht.cz/cz/index.html
Struktura stránek»hypertext umožňuje provázat dokumenty zcela libovolně» Hierarchická (stromová) architektura je tradiční, dobře akceptovaná návštěvníky»rozdělení příliš dlouhých stránek» Rolování» první obrazovka "above fold" musí upoutat» zbytek
Odkazy» Musí být na první pohled zřejmé, že jde o odkaz, čiší z nich kliknutelnost» podtrhávat a barevně odlišovat odkazy» nepodtrhávat jiný text» zkuste spočítat odkazy na jkrowling.com» Odlišování navštívených odkazů» Atribut Title» <a href="url" title="popisek odkazu">» Ukázka
Kam šmejdí oči i...»typicképohyby očí návštěvníků po vstupu na stránku Nejčastěji se návštěvník zaměří na levý horní roh až po chvíli se dívá směrem dolů Zdroj: http://www.poynterextra.org
Prominentní zóny na stránce...»rozdělení zón podle toho, jak rychle si návštěvník v nich umístěného elementu Zdroj: http://www.poynterextra.org
Metadata» Informace o dokumentu»usnadňují automatické zpracování» Metadata na stránce»název <title>... </title>» metainformace <meta name="název metadat" content="hodnota">»relace <link rel="vztah" href="související dokument">
Přístupnost»Přístupnost obecně» Pod pojmem přístupnost chápeme takový stav, kdy daná věc neklade svým uživatelům při používání žádné překážky. Přístupnou budovu mohou tedy např. používat vozíčkáři a přístupný web zase např. slabozrací. Přístupnost je tedy bezbariérovost.»přístupnost webových stránek» Pojem přístupnosti webových stránek je tedy oproti obecnému pojmu zúžen na funkčnost webových stránek. Přístupné stránky tedy nestaví svým uživatelům žádné překážky, které by jim znemožnily daný web efektivně používat. Zdroj: Přístupnost
Proč má být web přístupnýp» Více návštěvníků»přístupný web je přístupný i pro roboty vyhledávačů» Posilování značky» Zákonnost
Hendikepovaní uživatelé»zrakově postižení»sluchově postižení» Pohybově postižení» nefunguje myš» Uživatelé se zobrazovacími problémy» handicap uživatelova počítače» Uživatelé s pouruchami učení a soustředění»přehledná navigace, členění» Roboti