Internetové publikování

Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: [email protected]

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 N111031 Internetové publikování 8. Webdesign

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 N111031 Internetové publikování 8. Webdesign

Základy teorie barev » Aditivní a subtraktivní míchání barev

N111031 Internetové publikování 8. Webdesign

RGB model

HSB Model

» Složky odpovídající vnímání oka » odstín (hue) » saturation (sytost) » brightness/value (jas) N111031 Internetové publikování 8. Webdesign

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 N111031 Internetové publikování 8. Webdesign

Barvy » Kontrast

sytost

» rozdíl v odstínu sytosti a jasu použitých barev

jas


Grafický design – výběr písma » 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.




Rozlož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 N111031 Internetové publikování 8. Webdesign

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 » » Ukázka N111031 Internetové publikování 8. Webdesign

Kam šmejdí oč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 ...

» metainformace <meta name="název metadat" content="hodnota">

» relace


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 N111031 Internetové publikování 8. Webdesign

Proč má být web přístupný » Více návštěvníků » Přístupný web je přístupný i pro roboty vyhledávačů » Posilování značky » Zákonnost N111031 Internetové publikování 8. Webdesign

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 N111031 Internetové publikování 8. Webdesign

Internetové publikování

Recommend Documents