Internetové publikování

Transkript

1 Internetové publikování Doc. Ing. Petr Zámostný, Z Ph.D. místnost: A-72aA tel.: 4222, 4167 (sekretari( sekretariát ústavu 111) petr.zamostny@vscht vscht.czcz

2 Internetové publikování Webdesign

3 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

4 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

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

6 RGB model HSB Model» Složky odpovídající vnímání oka» odstín (hue)» saturation (sytost)» brightness/value (jas)

7 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» /colorscheme2/index.html» Grafický manuál

8 Barvy sytost»kontrast» rozdíl v odstínu sytosti a jasu použitých barev jas

9 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 znaků»písmo raději větší, nastavitelné» relativní jednotky %, em» abs. velikosti xx-small,... xx-large

10 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

11 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.

12 Rozložen ení stránek»pevné» jednosloupcové» dvousloupcové» vícesloupcové» jednosloupcové» dvousloupcové» vícesloupcové»

13 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

14 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

15 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:

16 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:

17 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">

18 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

19 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

20 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