GYMNÁZIUM A STŘEDNÍ ODBORNÁ ŠKOLA ROKYCANY
POČÍTAČOVÁ GRAFIKA NA INTERNETOVÝCH STRÁNKÁCH Seminární práce
Autor práce: Roni Slozberg, 4. ročník
Konzultant: Rudolf Klusal
Rokycany 2012
Prohlášení Prohlašuji, že jsem seminární práci na téma „Počítačová grafika na internetových stránkáchÿ zpracovala samostatně a k vypracování jsem použila výhradně literární a internetové zdroje uvedené v závěru seminární práce. Práce byla konzultována s Rudolfem Klusalem.
2
Obsah 1 Webová grafika
6
1.1
Historie webu (internetu) . . . . . . . . . . . . . . . . . . . . . . . . .
6
1.2
Použití a význam . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
2 Barvy na webu
8
2.1
RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
2.2
CMY (K) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
2.3
HSV/B . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4
Web-safe colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5
Barevná skladba stránek . . . . . . . . . . . . . . . . . . . . . . . . . 12
3 Grafické formáty
13
3.1
GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.2
JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3
PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4 Optimalizace fotografií
16
5 Design
17
6 Vhodné použití grafiky na webu
19
6.1
Grafika na plakátu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.2
Grafika v knihách . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.3
Grafika na webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
7 Závěr
22
3
Seznam obrázků 1
Klasický, průměrný web s pěkně upraveným designem [8] . . . . . . .
8
2
Černobílá stránka bez grafických úprav designem [8] . . . . . . . . . .
8
3
Barevná paleta RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4
Rozdíl mezi plnobarevnou paletou a omezenou do 256 barev . . . . . 10
5
Barevný prostor CMY(K) . . . . . . . . . . . . . . . . . . . . . . . . 11
6
Barevný prostor HSV . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
7
Profesionálně řešený výběr barevných složek [1] . . . . . . . . . . . . 13
8
Průhlednost barvy [3] . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
9
Rozdíl zobrazení nebe v kvalitách JPEG 85 % a JPEG 10 % . . . . . 15
10
Rozdíl zobrazení JPEG a GIF v 256 barvách. . . . . . . . . . . . . . 16
11
Průběh čtení stránky [2] . . . . . . . . . . . . . . . . . . . . . . . . . 18
12
Rozvržení textu na internetové stránce [2] . . . . . . . . . . . . . . . 18
4
Anotace Práce se zabývá vývojem počítačové grafiky určenou pro webové stránky. Shrnuje základní znalosti grafických formátů, principů grafiky vůbec a snaží se doporučit čtenáři nové a moderní postupy práce, ale i se snaží čtenáře odradit od špatných návyků, které by si mohli vytvořit. Dále práce srovnává grafiku používanou na internetu s grafikou používanou např. na plakátech či v knihách. Práce představuje základní rozdíly mezi používanými formáty souborů a doporučuje jejich použití pro různé situace.
Anotation The goal of this thesis is map development of computer graphics used on internet pages. It takes the very basics of knowledge of file formats used by graphics, basic principles of graphics at all. Then it tries to recommend good algorithms to use to reader, or tries to draw back bad using of graphics on web. Then this thesis compares using of graphics on internet pages with eg. graphic works on posters or in books. Thesis shows basics differencies between the most used graphics file formats and recomends its using in dependency by vary situations.
5
1
Webová grafika
„Webová grafikaÿ, jak je vidět, pochází ze dvou slov, a to z „webuÿ a ze slova „grafikaÿ. Slovo „webÿ se sice používá ve významu „počítačová síťÿ, dnes však už jen jako „internetÿ nebo „internetová stránkaÿ. Grafika pochází z řeckého slova „graphicosÿ[4], což znamená psát nebo kreslit. Grafika je jedním z výtvarných umění, při kterém využíváme grafické techniky (např. linoryt, suchá jehla, dřevořez, oceloryt, litografie). Určitým druhem grafiky, který se využívá též k napomáhání webové grafiky, je počítačová grafika. Počítačová grafika je z technického hlediska oborem informatiky, který vytváří umělecké grafické objekty a upravuje zobrazitelné a prostorové informace nasnímaných z reálného světa (např. digitální fotografie a jejich úprava, filmové triky). Z hlediska umění jde o samostatný obor grafiky. Pod spojením těchto dvou slov, web a grafika, rozumíme společný význam jako grafiku na internetových stránkách, která se hodně odlišuje od klasické grafiky.
1.1
Historie webu (internetu)
Historie webu je stará stejně jako vývoj výpočetní techniky jako takové. Již ve čtyřicátých letech minulého století se začínají objevovat první koncepce webu jako sítě elektronicky propojených informací. Začínají se ojevovat první systémy a nové názvy, jako je například termín hypertext1 . Novodobý web, tak jak jej známe, však začíná pronikat mezi počítačovou veřejnost až v devadesátých letech minulého století. Namísto zastaralých jazyků, jako je například SGML (Standard Generalized Markuo Language), se začíná prosazovat nový jazyk HTML, který by pojat jako velmi jednoduché řešení a byl sladěn s protokolem HTTP[6]. Zdaleka největší a zásadní průlom v historii webu nastal až v roce 1991, kdy v Národním centru pro výkonné výpočetní operace NCSA ve Spojených státech, byl vyvinut prohlížeč Mosaic. Následně byl importován do počítačů třídy 1
Poprvé termín použil Ted Nelson v roce 1965 v projektu XANADU, který měl za úkol vytvořit
jakýsi univerzální hypertext, kde každé slovo bude někde popsáno – vlastně taková dokonalá encyklopedie. Projekt však nikdy nebyl dokončen. Dal však impuls pro vznik dalších projektů s méně megalomanským pojetím a projektům, jejichž výstupy se začaly pomalu používat i v běžné praxi. [5]
6
PC a Macintosh, ve kterých slavil úžasný úspěch. Tento impuls dal podnět k vyvíjení nových standardů a jazyků. Od prakticky základního HTML 2.0, který vznikl v polovině 1994[7], až po verzi HTML 4.0, jenž byla představena v roce 1997[7].
1.2
Použití a význam
Grafika pro web se vyvíjí (a vyvíjela) v odlišné vývojové větvi než např. počítačová herní grafika či např. grafika pro operační systémy. Grafika na internetu ovlivňuje chuť uživatele přijímat předpokládané informace. Dělá jednoduchý text zajímavějším, ovlivňuje náladu a dokresluje je a napomáhá k orientaci. Stačí jen, abychom přebarvili černý text na barevný, zbarvili určitá slova v černém textu nebo nějakým způsobem ho zvýraznili a už se na to naše pozornost soustřeďuje, nemluvě o celkové grafické kvalitě dokumentu. Těmito prvky mohou být třeba piktogramy, tlačítka, šipky, čáry, oddělovače, jednoduché obrázky nebo pokročilejší grafika s odkazy. To všechno vždy zvedne estetickou hodnotu stránek, ale v prvé řadě je zpřehlední. A o to nám jde především. Grafika tedy plní dvě základní funkce – orientační a estetickou, avšak plní i další funkce – pomáhá s rychlostí nalezení informací, rozlišuje důležitost sdělení a zvyšuje důvěryhodnost a atraktivnost webu. Pokud si v praxi vyzkoušíme odmyslit si na průměrném webu s pěkně provedeným designem třeba grafickou hlavičku a animovaní linky a obrázky, stránka se stane méně přitažlivou2 . Vše bude působit hekticky, nezdařile, nudně, nevhodně a nenápaditě. Hezký design je však popravdě jen prostředek, nikoliv cíl. Jde především o obsah, a proto dbá na oddělení (alespoň formální) grafické a obsahové3 části. Grafika na webu nebyla a nebude uměleckým dílem. Grafiku také nemůže dělat každý. Neprofesionální design se totiž pozná. 2 3
Viz obrázek č. 1 na straně 8 a č. 2 na straně 8. to znamená, že pokud napíšu nějaký dokument, tak pokud by se třeba stalo, že obrázky
z dokumentu budou nedostupné (chyba na serveru atd.), i tak bude dokument čitelný a bez změny významu)
7
Obrázek 1: Klasický, průměrný web s pěkně upraveným designem [8]
Obrázek 2: Černobílá stránka bez grafických úprav designem [8]
2
Barvy na webu
S barvami na webu se setkáváme dnes a denně. Barvy jsou obvykle to první, co návštěvník stránek vnímá a co během několika prvních sekund nejsilněji utváří jeho první dojem. Barvy mají též velký vliv na přístupnost i použitelnost stránek. I když se je člověk naučil ignorovat či je přestal brát za samozřejmé, určitě by se vrátil k časopisům a magazínům plným barevně formátovaných textů a barevných fotografií a přitažlivých grafických prvků, pokud by stránky byly černobílé. V grafice se užívají tři základní barevné modely – RGB, CMY(K) nebo HSV/B.
8
2.1
RGB
Barevný model RGB, který byl odvozen od svých elementárních složek Red, Green, Blue (červená, zelená, modrá), je jedna ze metod pro reprodukci barev. Tato metoda, nazývána též aditivní, využívá míchání barevných odstínů vyzařovaného světla. Sčítá tedy barvy k sobě. Barva se definuje buď přepočtem procenta nasycení každé barvy, čísly4 od 0 do F v hexadecimální soustavě, anebo číslicemi pro každý kanál od 0 do 255. V šestnáctkové soustavě nejvíce barvy vyjádříme číslem F, 0 % číslem 05 . Při aditivní metodě se přidávají tři základní barvy a sloučením všech tří barev v plné intenztě (255,255,255) vzniká barva bílá, nulové hodnoty (0,0,0) utvářejí barvu černou.6 Tímto způsobem pracuje televize, monitor, ale třeba i jevištní osvětlovací technika. Celkem je možno vytvořit 16777216 barev s RGB modelem.7 Displeje počítačů tento model používají pro zobrazení veškerého GUI (uživatelského rozhraní). RGB model upravený pro web je8 lehce odlišný od klasického RGB modelu, využíval méně plynulé přechody často z důvodu omezení hardwarem, na kterém prohlížeč fungoval.9 Dalším důvodem, proč omezovat barevnou paletu webové stránky, byly hlavně dříve datkové přenosy. Omezíme-li obrázek pouze na 256 barev a méně (viz obrázek 4 na straně 10),u fotografií při nejlepší optimalizaci, např. ditheringem, nemusí si toho lidské oko ani všimnout, ale z hlediska velikosti dat dojde ke znatelné redukci velikosti dat.
2.2
CMY (K)
CMYK stejně jako RGB vyjadřuje názvy základních barev, které jsou Cyan (azurová), Magenta (purpurová), Yellow (žlutá) a Key color (běžně černá). Model je založený na subtraktivním míchání barev, což znamená, že od sebe barvy odčítáme 4
v tomto případě spíše doopravdy číslicemi Takže např. jasná červená – F, 0, 0, vlastně vypneme zelenou a modrou barvu 6 Zde jsem použila metodu zápisu barev čísly od 0 do 255, kanály v pořadí R, G, B. 7 Protože máme pro každý kanál 256 hodnot a máme 3 kanály (RGB), jedná se tedy vlastně 5
o kombinaci 2563 = 16777216 barev. 8 Resp. býval na počátku století. . . 9 Bezpečné tedy bylo raději přepočítat webovou stránku do pouhých 16 barev, o kterých víme, že je dokážeme zobrazit téměř všude, než to riskovat s 16 miliony barev a stránka by pak nemusela být vidět vůbec.
9
Obrázek 3: Barevná paleta RGB
Obrázek 4: Rozdíl mezi plnobarevnou paletou a omezenou do 256 barev neboli omezujeme barevné spektrum odrážející se z povrchu. Na rozdíl od barevného prostoru RGB užití spočívá v míchání skutečných barev – nebo alespoň v jejich simulaci10 . Dopadající paprsky světla určité vlnové délky se pohlcují a naopak jiné odrážejí. Černou barvu získáme podle teorie smícháním všech původních tří základních barev CMY (protipóly RGB) v maximální intenzitě. Skutečnost je ovšem trochu složitější a dokonale černé barvy smícháním tří CMY jednoduše nedosáhneme11 . Proto se přidává ještě jeden kanál s označením K, který reprezentuje tiskařskou čerň. Složky barev jsou udávány v procentech. Abychom získali bílou barvu, nebudeme míchat žádnou z barev, tzv. plocha bílého papíru zůstane nepokrytá. Barvy modelu CMYK se používají u všech tiskovin.
2.3
HSV/B
Model HSB již není formátem ani standardním, (ani často používaným). Vychází z předchozích modelů a snaží se míchání barev poněkud přiblížit lidskému chápání a zjednodušit tak uživateli nelehký úkol. Jeho přínos je v tom, že odpovídá lidskému 10 11
Nemáme-li např. dostupné některé odstíny. Dosáhli bychom pouze s dokonale přesně seřízenými tiskovými hlavami, dokonale se kryjícími
barvami s dokonalou sytostí.
10
Obrázek 5: Barevný prostor CMY(K) vnímání (popisu) barev. Zatímco modely RGB či CMYK jsou modely založené na míchání barev, HSB model definuje barvy pro člověka přirozeným způsobem, a tedy odpovídá na přirozené otázky: Jaká je to barva? Jak je sytá? Jak je světlá či jak je tmavá? Model je tedy velmi intuitivní a pro některé případy velmi názorný. Pro popis barev v modelu HSV se používá šestiboký jehlan umístěný do souřadnicového systému takovým způsobem, že vrchol jehlanu je v počátku a osa jehlanu je shodná se svislou osou, která zároveň znázorňuje změny úrovně jasu. Barevný model HSB používá podobně jako model RGB také tři veličiny pro popis barvy, dává jim ale jiný význam: • Hue – barevný odstín. Měří se úhlem na standardním barevném kole (0◦ až 360◦ ). Dohodou se za úhel 0◦ považuje červená, 120◦ odpovídá zelené, 240◦ modré a 360◦ opět červené, protože (2π rad = 0 rad). • Saturation – sytost barvy. Udává množství barvy v poměru k šedé a měří se v procentech od 0 % (šedá) do 100 % (plně sytá barva bez šedé). Např. červená s 50% sytostí bude růžová. • Value/Brightness – jas, množství světla. Udává světlost nebo tmavost barvy. Používá se v grafických aplikacích.
2.4
Web-safe colors
Web-safe colors, o kterých je nutno se zmínit, jsou barvy bezpečné pro web. Z důvodů, které zmiňuji výše12 , neoptimalizovaná grafika, zvláště fotografie, může mít 12
Nedostatečný hardware na počátku století.
11
(a) Barevný model HSV, jehlan. (b) Barevný model HSV, jehlan.
(c) Barevný kruh HSV.
Obrázek 6: Barevný prostor HSV až 16 mil. barev. Zde se objevuje velký problém, který se ani tak netýká objemu dat jako spíše simulování a nahrazování autentických barev obrazu jinými. Poměr 256 : 16 mil. představuje velmi silný nepoměr, který se musí zákonitě projevit ve snížení distribuce barevnosti. Právě díky web-safe colors tomu můžeme předejít. Použijeme tedy barvy, které se při převodu z široké 16milionstupňové palety do 256stupňové nezmění.
2.5
Barevná skladba stránek
Barevná skladba stránek, nebo též barvená kompozice stránek, je jedním z hlavních kompozočních postupů pro uspořádání barev a prvků v obrazu. Její důležitost tkví v úkolu ovlivnit naši náladu a zaujmout náš pohled na internetové stránky a na webové prezentace. Při výběru nejvhodnější kompozice barev musí stránky splňovat hlavní tři následující aspekty: Harmonie barev: Barvy na webu nelze jen tak libovolně míchat. Některé se k sobě nehodí vůbec a některé pro svou podobnost ztrácí výrazný kontrast (třeba mezi pozadím a textem). Kontrast: Slouží k vyniknutí prvků a zabraňuje jejich splynutí. Kontrast mezi pozadím a obsahem musí být dostatečně vysoký, aby byl obsah dostatečně čitelný. Na internetu je mnoho vzorníků barevných palet, kde lze zjistit, jestli jsou odstíny barev vybrány správně.
12
Barevná uspořádanost: Většinou příliš nezáleží na množství barev. Často totiž platí pravidlo, že méně může znamenat více.
Obrázek 7: Profesionálně řešený výběr barevných složek [1]
3
Grafické formáty
Existují způsoby nebo metody k zaznamenání vizuálního obrazu – grafiky, kresby, fotografie v digitálním tvaru, tedy v tvaru, který se dá dále zpracovávat a uchovávat pomocí výpočetní techniky. Grafické formáty v sobě uchovávají grafické informace, které jsou pak grafické prohlížeče schopny zobrazit jako grafiku. Grafické formáty se dělí na bitmapové a vektorové. Na webových stránkách se nejčastěji používají tři druhy rastrových grafických formátů – GIF, JPG (JPEG) a PNG a jeden vektorový SVG, o němž se zde nebudeme dále zmiňovat. V rastrové (bitmapové) grafice je celý obrázek popsán pomocí jednotlivých barevných bodů (pixelů) uspořádaných do pravoúhlé mřížky. Každý bod má určen svou přesnou polohu a barvu. Kvalitu záznamu obrázku ovlivňuje především rozlišení (zobrazení 96 dpi, tisk 300 dpi) a barevná hloubka (počet barev).
3.1
GIF
GIF (Graphic Interchange Format) je nejstarším formátem, který byl vyvinut v roce 1987 společnosti CompuServe. Používá se hlavně pro webovou grafiku, která obsahuje méně barev a tvoří většinou souvislé barevné plochy nebo opakující se vzory. GIF používá neztrátovou LZW kompresi, nedochází tedy ke zkreslení obrazu (nesnižuje se kvalita obrazu). Kdysi šlo o nejpoužívanější formát na www stránkách, dnes však již kraluje PNG či JPG. GIF má své meze v tom, že je určen pro ukládání 13
obrázků s nejvýše 256 barvami (8 bitů), což v případě webové grafiky kolem roku 2000 většinou bohatě stačilo. Dnes, v dobách vysokorychlostního internetu, však již tento formát znatelně zaostává za ostatními. Pokud obsahuje obrázek více barev nebo potřebujeme sami snížit počet barev kvůli úspoře dat, provede se optimalizace palety – hodnoty barev se zprůměrují a podobné barevné odstíny se nahradí stejnou13 barvou. Mezi jeho hlavní přednosti patří možnost volby průhlednosti. Funguje na principu výběru jedné barvy, která bude zobrazena průhledně a při zobrazení se tato barva nahradí podkladovou barvou webové stránky.
Obrázek 8: Průhlednost barvy [3] Rovněž výhodné je načítání po řádcích, takže uživatel pomalého internetu již v prvním okamžiku zobrazování získá představu o obrázku a nemusí tedy čekat na jeho úplné zobrazení. Formát GIF byl prvním grafickým formátem využívajícím možností multimédií. Jako první dokázal pojmout více než jeden obrázek (tzv. animovaný GIF) jinou metodou než je metoda videa.
3.2
JPEG
JPG (Joint Photographic Experts Group) byl vytvořen ISO v roce 1990. Používá se hlavně pro ukládání fotografií a barevně pestrých obrázků (např. ze skeneru). Oproti GIF dokáže zobrazit 24bitovou barevnou hloubku a 256 odstínů šedé – tedy kompletní barevnost. JPEG používá ztrátovou kompresi. Je založena na znalostech nedokonalostí lidského oka. Optimalizace (komprese) probíhá především v oblastech lidskému oku méně viditelných či obtížně rozpoznatelných – namísto změny jasu mění JPEG hodnoty barevnosti blízkých bodů, takže oko, nedíváme-li se na obrázek pod lupou, téměř nepozná rozdíl. 13
touto průměrnou
14
Tato komprese je vhodná pro fotografie a obrázky bez ostrých obrysů. Větší nedostatek JPEG spočívá v rozostření hran. Pokud máme ostrý přechod hrany dvou odlišných barev, může dojít k jejich určitému promíchání a hrana se rozmaže. Tomuto formátu též nesvědčí opakované překódovávání obrázků s různými nastaveními kvality, protože obrázek má pak tu nejnižší možnou kvalitu z provedených optimalizací. Následné zvýšení kvality je již zbytečné, jelikož se jedná o ztrátovou kompresi, informace se z obrázku „ztratíÿ, a tutíž zvýšení kvality ukládání nezvýší kvalitu obrázku. JPEG je nevhodný zejména pro obrázky nesoucí textovou informaci a právě kvůli ztrátovosti se JPEG rovněž příliš nepoužívá u jednoduché webové grafiky (málo barev, problém se souvislými barevnými plochami). Většina grafických editorů dokáže nastavovat u JPEG stupeň komprese, což prakticky znamená nastavení kvality obrázku.
(a) 85 %
(b) 10 %
Obrázek 9: Rozdíl zobrazení nebe v kvalitách JPEG 85 % a JPEG 10 %
3.3
PNG
PNG (Portable Network Graphics) je dalším formátem k šíření grafiky na internetu určeným pro bezeztrátovou kompresi rastrové grafiky. Vznikl v roce 1997. Jistým způsobem nahrazuje formát GIF, nabízí však více barev a lepší kompresi. Po uložení zůstává obrázek ve své původní podobě, není upravena barevnost ani jiné aspekty. Naprosto dokonale vede v průhlednosti a je schopen (místo běžné bílé) použít pro obrázek i „průhlednou barvuÿ, což není nic jiného než barva, která není vidět (prostě nepřítomnost barvy). S výhodou se dá použít pro vložení jednoho obrázku
15
do druhého, kdy pak nevidíme různé přechody mezi obrázky. Obrázek může být v různých částech různě průhledný. Nevýhodou PNG oproti GIF je praktická nedostupnost jednoduché animace, v dnešní době se však takové animace téměř nepoužívají, a pokud jsou potřeba, využije se technologie flash či jiné, podobné.
(a) JPEG 24 bitů
(b) GIF 256 barev
Obrázek 10: Rozdíl zobrazení JPEG a GIF v 256 barvách.
4
Optimalizace fotografií
Optimalizace je proces výběru nejlepší varianty z množství možných jevů. V našem případě se bude jednat o volbu vhodné fotografie na pozadí stránky. Je několik aspektů, podle kterých se musíme řídit. Musíme si uvědomit, jaký bude obsah stránky, dodržet zákonitosti typografie a nevolit příliš členitou nebo nekontrastní fotografií vůči textu. Dále je důležité výsledné rozlišení. Určit vhodné rozlišení obrázku na pozadí stránky není lehký úkol. Jednak se dnes využívá obrázků spíše čistě grafického charakteru14 , za další obrázek na pozadí vždy rozmělňuje pozornost návštěvníka, takže obrázek na pozadí nesmí být příliš kontrastní. Pokud je velký co do velikosti dat, je to vlastně taktéž špatně. Za nejvhodnější rozlišení se dříve považovalo třeba 800×600. Dnes se však pozadí na stránky dělá metodou dlaždic či obrázků s upravenými hranami, které tak působí jako jeden velký celek bez přechodů15 . 14 15
různé gradienty a podobně tzv. švů.
16
Dalším hlediskem by měl být zvolený grafický formát. Na něm závisí jak výsledná kvalita, tak i doba načítání. Pokud si třeba zvolíme formát JPEG, tak i při nejlepší optimalizaci se nám bude načítat velmi dlouho (přenosová rychlost dříve dosahovala třeba 28,8 kb/s, pak se obrázek mohl načítat i 2 minuty), a to není optimální. Kdybychom si zvolili progresivní JPEG s několika průchody, proces urychlíme, ale přijdeme o velké procento barevnosti. V dnešní době vysokorychlostního internetu jsou však takové obavy mírně liché – nicméně pořád platí, že pokud použijeme originální JPEG obrázek v 12 megapixelech na pozadí stránky, bude se načítat déle (o využití paměti prohlížečem už ani nemluvě). velikost/rychlost
400 kB
1 MB
3 MB
10 MB
56 kBps
7s
18 s
54 s
3 min 2 s
128 kBps
3s
9s
27 s
1 min 31 s
256 kBps
2s
4s
13 s
46 s
2 MBps
→0s
0,5 s
1,5 s
4s
Tabulka 1: Tabulka příkladů různých velikostí souborů a dob načítání při různých ryhlostech stahování (zaokrouhlení dolů)
5
Design
Design je návrh, v našem případě návrh webových stránek a webových aplikací. Při tvorbě webových stránek bychom se měli soustředit na vzhled a strukuru stránky, aby se stránka stala zajímavou a přitažlivou pro uživatele. K tomu, abychom mohli stránku navrhnout, užíváme technologie HTML (pro strukturu a textový obsah) a CSS (jazyk, který říká, jakým způsobem budeme zobrazovat prvky z jazyka HTML) společně s obrázky (PNG, GIF, JPG), které tvoří grafickou podobu webu. Dále se také mohou užívat JavaScript, SVG, Flash či Java applety. Základem všech stránek je přehlednost a jasnost informací. Při vstupu uživatele na internetové stránky získá první dojem právě díky grafickéhu celku stránky. Grafická celistvost je vlastně uspořádání textu a grafiky na této stránce (kombinace barev a tvarů). Jen poté si začne všímat základních informací obsažených v grafice,
17
dál pochopí význam nadpisů a nakonec vět a slov. Pokud stránka není ničím výrazná a není schopná přilákat, uživatel se k ní už nebude chtít nikdy vrátit. Člověk si nejdříve povšimne „krásyÿ internetové stránky, a jestliže se mu bude zdát něčím přitažlivá, soustředí se též na obsah textu. Někdy se nám může stát, že dokumenty, na které se díváme a které čteme, mají hustý a dlouhý text, který je kvůli tomu těžko čitelný. Takový text by naopak měl být něčím zvýrazněn pro zjednodušení vnímání. Je vhodné použít několik kontrastních prvků, uklidňující grafiku a typografii, různé barvy, tvary a další prvky.
Obrázek 11: Průběh čtení stránky [2]
Obrázek 12: Rozvržení textu na internetové stránce [2] Když tvoříme stránku, je třeba si uvědomit, pro koho stránku děláme a za jakým účelem. Může to být akademický text založený na článcích a tabulkách nebo galerie fotografií s několika popisky, anebo osobní stránka plná nejrůznějších obrázků, zvuků a vtípků. Uživatelé obecně neradi posunují text stránky, je tedy důležité, aby se udržela nejdůležitěší sdělení v horní části stránky, to je tam, kam se uživatel dívá nejdříve. S obrovským obrázkem na začátku stránky bychom se tedy měli rozloučit, protože návštěvník stránky bude muset čekat docela dlouho na to, než se stránka načte16 . 16
Používá-li navíc prohlížeč, který načítá stránku sekvenčně. Dnes jsou však takové prohlížeče
(naštěstí) vzácností. Mezi takové prohlížeče patřil Internet Explorer 6.
18
Co se týká délky řádek textu, je třeba si též uvědomit, že přílš dlouhé řádky užívané k šetření místa způsobí větší námahu očním svalům nebo nutnost otáčet hlavu při čtení. Pokud chceme zpříjemnit čtenářům pobyt na stránkách, je třeba rozdělit dlouhé řádky do sloupců o šíři kolem 40–60 znaků. Tato metoda se též užívá například v časopisech, novinách a u knih. Po rozvržení plochy bychom se měli též zabývat barvami a písmem. Jak jsem už dřív zmínila, je třeba si uvědomit, pro koho tvoříme stránku. Jestliže si nejsme jistí, pro koho tvoříme, měli bychom užívat přírodní odstíny a jednoduché typografické zásady. Písmo by mělo být v dostatečném kontrastu s plochou, ale též by kombinace neměla bý násilná. Nejjednodušší řezy písma, které můžeme požívat v textu, jsou italic, bold, underline17 a další. Dříve se také často užívaly různé grafické prvky jako jsou čáry, odrážky, animované gify a cliparty. Dnes spíše vzbuzují negativní dojem, a proto nejsou dnes příliš často užívané.18 Základem textových webových stránek byly a stále jsou nadpisy a popisky. Jsouli využity správně, stránka si pak vystačí se spíše symbolickým grafickým obsahem, a přesto bude vypadat dobře a hlavně bude dobře čitelná. Při vytvoření větších stránek bychom měli názorně odlišit jednotlivé sekce. Můžeme k tomu použít různé logotypy, které se budou třeba objevovat na pozadí stránek. Také je užitečné dělit sekce podle barev, které jsou potom nutné dodržovat na celém webu.
6
Vhodné použití grafiky na webu
Jedná se především o rozdíly mezi webovou a „ jinouÿ grafikou; například na plákátu či v novinách. Sazba dokumentu pro různá média má i svá různá pravidla, proto se jim chci nyní věnovat. 17
Underline však s příchodem osobních počítačů téměř vymizel, podtržený text byl doménou
především psacích strojů. Dnes se dají využívat mnohem lepší metody zvýraznění textu. Navíc podtržený text je dnes chápán téměř výhradně jako odkaz. 18 Dříve se užívaly předevím z důvodu „kůlovostiÿ stránek; tehdy ten, kdo měl nestatické stránky, kde se něco hýbalo, byl prostě „inÿ. Tato doba už naštěstí pominula.
19
6.1
Grafika na plakátu
„Plakátováÿ grafika tak, jak ji vidíme dnes, oplývá především živými barvami a je zaměřena především na obrazovou podprahovou informativní hodnotu. V reklamě na jogurt nevidíme jen samotný jogurt, ale téměř vždy ho jí mladá zdravá žena a téměř vždy ho jí v nějakém „letnímÿ prostředí – na dovolené, u moře a v podobných „modrobílýchÿ místech. Pokud tvoříme grafické prvky reklamy na plakátu, cílovou skupinou jsou lidé, kteří často stojí v tramvaji a koukají na leták, nebo lidé, kteří jdou (či jedou) kolem nějaké reklamní plochy. Proto se musíme v takto „otrávenýchÿ lidech vyvolat nějakou emoci; tedy například letní obraz zdravé ženy, která konzumuje jogurt.
6.2
Grafika v knihách
V knihách je situace diametrálně odlišná; kniha je především textové médium (nejednáli se o komix či obrázkovou knihu), proto je grafika či ilustrace v ní většinou nevýrazná a nesmí výrazně odtáhnout pozornost čtenáře mimo text19 . V knižní grafice se potkáváme především s ilustracemi či doplňujícími obrázky k textu, jedná se tedy o naprostou jinou formální funkci grafiky, než je na plakátu – kde má evokovat emoce.
6.3
Grafika na webu
Na internetových stránkách se grafika používá jako sjednocení výše uvedených příkladů – jednak musí vhodně ilustrovat obsah, dále však nesmíme pominout její reklamní funkci. Dalším rozdílem je, že webová grafika je určena pro širší spektrum různých cílových skupin. Zatímco v nějaké „kuchařce pro mladé maminkyÿ nebude reklama na motorový olej příliš účinná, reklama na spotřebiče do kuchyně už bude lépe zaměřená. Na webu však dopředu přímo nevíme, kdo stránku bude číst. Proto se musíme rozhodnout, zda-li optimalizujeme (graficky) vzhled a prvky cíleně na nějakou úzkou skupinu, která bude na stránkách velmi spokojená, či optimalizujeme do šířky a „pro všechnyÿ, nicméně se tím připravíme o některé čtenáře z různých úzkých skupin. 19
či obecně hlavní sdělení
20
Navíc je důležitý obsah stránek; bude-li se stránka věnovat pouze receptům pro mladé maminky, bude situace obdobná jako u výše zmíněného příkladu s kuchařkou. Budeme-li však tvořit zpravodajský server, na takový portál může přijít (a často přije) naprosto kdokoliv. Tomuto problému říkáme „cílení reklamyÿ a na internetu je obzvláště důležitá – ovlivňuje totiž nepřímo i návštěvnost stránek.
21
7
Závěr
Tato seminární práce nám přináší určitý pohled na základy webové grafiky a její užití. Znalost webové grafiky je velmi užitečná. Napomáhá k vytváření hezkých, přitažlivých stránek. V moderním životě je nezbytnost znát pravidla tohoto oboru hlavně pro designery, kteří tvoří webové stránky. Ve webové grafice existuje spousta dalších norem, které už nejsou zmíněné v této práci, ale tato seminární práce je pouhým úvodem do celé problematiky. V případě dalšího studia zaměřeného na informatiku bych toto téma ještě ráda rozvíjela. Tvorba seminární práce mě obohatila o zkušenost, kterou bych ráda využila v budoucnosti.
22
Reference [1] Barčik, Tomáš. Webová grafika. Praha: Computer Press, 2002. [2] Říhošek, Tomáš. Webová grafika. Praha: Computer Press, 2002. ISBN 80-7226-765-5. [3] Nápověda Adobe. [online]. [cit. 2012-03-27]. Dostupné z: http://help.adobe.com [4] Slovník cizích slov. [online]. [cit. 2012-03-27]. Dostupné z: http://slovnik-cizich-slov.abz.cz/web.php/slovo/grafika [5] Hypertext. [online]. [cit. 2012-03-27]. Dostupné z: http://rpm.fss.muni.cz/Revue/Heslar/hypertext.htm [6] Začátky HTML. [online]. [cit. 2012-03-27]. Dostupné z: http://lists.w3.org/Archives/Public/ /www-talk/1991SepOct/0003.html [7] Historie HTML. [online]. [cit. 2012-03-27]. Dostupné z: http://www.w3.org/People/Raggett/book4/ch02.html [8] www.klusik.cz. [online]. [cit. 2012-03-27]. Dostupné z: http://www.klusik.cz
23
Seznam dalších zdrojů Co je grafika a její dělení. [online]. [cit. 2012-03-27]. Dostupné z: http://blog.svet-grafiky.cz/co-je-grafika-a-jeji-deleni/ Grafika; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/Grafika Počítačová grafika; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/Po%C4%8D%C3%ADta%C4%8Dov%C3%A1 grafika Webová grafika. [online, PDF]. [cit. 2012-03-27]. Dostupné z: http://www.vkol.cz/data/soubory/rf/web grafika.pdf Počítačová grafika. [online]. [cit. 2012-03-27]. Dostupné z: http://info.lu2.name/diplomka/xludt100 dp.pdf Magie barev na webu, základy teorie. [online]. [cit. 2012-03-27]. Dostupné z: http://interval.cz/clanky/magie-barev-na-webu-zaklady-teorie/ PressCats.com - E01 - RGB vs. CMYK - The Graphic Designers Printer. [online, video youtube]. [cit. 2012-03-27]. Dostupné z: http://www.youtube.com/watch?v=fNisT6ROdUo Počítačová grafika; barevný model a DPI. [online]. [cit. 2012-03-27]. Dostupné z: http://www.kteiv.upol.cz/frvs/ict-kubricky/?page=pocitacova-grafika/barevnymodel-dpi Barevný model RGB, článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/RGB RGB barevný model. [online]. [cit. 2012-03-27]. Dostupné z: http://barvy.xf.cz/teorie/rgb RGB a CMYK modely. [online]. [cit. 2012-03-27]. Dostupné z: http://www.photocanvasprint.net/rgb-vs-cmyk/
24
Choosing the right rainbow. [online]. [cit. 2012-03-27]. Dostupné z: http://mightyvites.com/blog/printmaking/choosing-the-right-rainbow/ Barvy. [online, PDF]. [cit. 2012-03-27]. Dostupné z: http://www.jirieliska.cz/fileadmin/user upload/knihy/Barvy%2004.pdf Colors. [online]. [cit. 2012-03-27]. Dostupné z: http://www.xaraxone.com/webxealot/workbook35/page 5.htm HSB model. [online]. [cit. 2012-03-27]. Dostupné z: http://www.fotoroman.cz/glossary2/3 hsb.htm Barevné modely. [online]. [cit. 2012-03-27]. Dostupné z: http://www.dmp.spsei.cz/digi/model.php Barevná kompozice; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/Barevn%C3%A1 kompozice Typografie. [online]. [cit. 2012-03-27]. Dostupné z: http://www.adaptic.cz/znalosti/slovnicek/typografie/ Teorie kompozice. [online]. [cit. 2012-03-27]. Dostupné z: http://www.skica.cz/rm/download/teorie.pdf Serifová písma. [online]. [cit. 2012-03-27]. Dostupné z: http://en.wikipedia.org/wiki/Serif Bezpatková písma. [online]. [cit. 2012-03-27]. Dostupné z: http://en.wikipedia.org/wiki/Sans serif Počítačová typografie. [online, PDF]. [cit. 2012-03-27]. Dostupné z: http://www.nti.tul.cz/ satrapa/vyuka/typo/prednaska1.pdf Písmo. [online, PDF]. [cit. 2012-03-27]. Dostupné z: http://www.gis.zcu.cz/projekty/Geomatika multimedialne/KRP/KRPpismo.pdf
25
Egyptienka; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/Egyptienka Gotické písmo; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/Gotick%C3%A9 p%C3%ADsmo Druhy písem. [online]. [cit. 2012-03-27]. Dostupné z: http://antypa.cz/?page id=182#9 Decorative fonts; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://en.wikipedia.org/wiki/Decorative fonts#Display.2FDecorative fonts Konstrukce písma. [online]. [cit. 2012-03-27]. Dostupné z: http://typomil.com/pismo/konstrukce-pisma.htm Grafické formáty; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://sk.wikipedia.org/wiki/Grafick%C3%BD form%C3%A1t Grafické formáty pro web. [online]. [cit. 2012-03-27]. Dostupné z: http://www.markonet.cz/pages/vyuka/grafika-pro-www/graficke-formatypro-web.php Grafické formáty. [online]. [cit. 2012-03-27]. Dostupné z: http://www.ped.muni.cz/wtech/oldversion/studium/prc3/formaty.pdf Grafické formáty. [online]. [cit. 2012-03-27]. Dostupné z: http://web.jarryn.cz/book/tvorba-webu/navrh-webovych-stranek /webovy-dokument/graficky-navrh/graficke-formaty?page=3 Grafické formáty. [online, PDF]. [cit. 2012-03-27]. Dostupné z: http://www.iki.ktkadan.cz/soubory/graficke formaty.pdf Formát JPG. [online]. [cit. 2012-03-27]. Dostupné z: http://www.markonet.cz/pages/vyuka/grafika-pro-www/graficky-formatjpg.php
26
JPEG; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/JPEG PNG; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/Png Webdesign; článek na wikipedii. [online]. [cit. 2012-03-27]. Dostupné z: http://cs.wikipedia.org/wiki/Webdesign
27
