Kompatibilita a omezení - Plánování webu - WEBOVÝ DESIGN – MANUÁL PRO VYTVOŘENÍ WEBOVÉ FOTOGALE

4. Plánování webu

4.5 Kompatibilita a omezení

Kaţdý uţivatel a návštěvník stránek má trochu jiné nastavení systému, jiný prohlíţeč, rozlišení obrazovky apod. S tím musí vývojář i designér počítat při plánování, protoţe nemohou udělat verzi stránek, která bude plně funkční v prohlíţeči Mozilla Firefox, ale nezobrazí se korektně v prohlíţeči Internet Explorer. V pravidlech WCAG není nikde napsáno, v jakém rozlišení musí být stránka udělána. Jsou tam pouze doporučená čísla, která většinou platí pro návštěvníky webu.

Doporučené rozlišení pro stránky je 1024 x 768 pixelů. Odpovídá to například patnáctipalcovým notebookům s poměrem stran 4:3. Dále je standard psát web s validním XHTML ve verzi 1, protoţe samotný Internet Explorer neumí korektně zpracovat verzi 1.1. V ostatním prohlíţečích by se standardem XHTML 1.1 neměl být problém. ²

Další problém můţe nastat při pouţívání obrazových materiálů. Ty jsou nejčastěji ve formátech JPEG, GIF a PNG. Těmi se budu podrobněji zabývat v další kapitole.

Vývojář nemůţe ovlivnit, v jakém prohlíţeči bude návštěvník stránku procházet. Pro ulehčení práce můţe vývojář připojit na stránku poznámku o doporučeném rozlišení a prohlíţeči. Ušetří si tím práci s optimalizací webu, ale také tím můţe odradit potenciální uţivatele, kteří se jen kvůli tomu nebudou na stránky vracet. Pro vývojáře i designéra by měli být uţivatelé vţdy na prvním místě.

4.6 Rozvržení webu – layout

V podstatě existují pouze dvě moţnosti, jak rozvrhnout stránku – buď staticky nebo dynamicky.

Staticky rozvrţené stránky nemění svůj vzhled podle rozlišení obrazovky a mají stále stejnou velikost.

Nejčastěji mají elementy udávanou velikost v pixelech (px) a tzv. em hodnotách, které zobrazují obsah proporcionálně relativní k velikosti písma. Příkladem staticky rozvrţených stránek je například stránka firefox.com, kde je šířka bloku obsahu pořád stejná a nemění se při zmenšování či zvětšování okna.

Dynamicky rozvrţené stránky se přizpůsobují velikosti okna a rozlišení monitoru. Velikost elementů je totiţ udávaná v procentech, coţ není statická hodnota, a tudíţ se s různými nastaveními rozlišení či při změně velikosti okna prohlíţeče mění. Jedna z nejznámějších českých dynamicky tvořených stránek je seznam.cz.

V rámci layoutu je nutno podotknout i moţnosti zarovnání bloku stránky. Před několika lety, kdy byl standardem monitor o velikosti 15 palců, se blok stránek zarovnával k levému okraji. Jak však doba pokročila a velikost monitorů se zvětšila, bylo vidět, ţe zarovnání doleva nechává většinou zbylou část obrazovky prázdnou. Proto je dnešním trendem zarovnávat stránky na absolutní střed, kdy je stránka vycentrována na monitoru, ať uţ je jakkoliv veliký.²

5. Problematika webových prohlížečů

Je pouze na uţivateli, jaký pouţívá prohlíţeč. Ať uţ je to jeho oblíbený web browser, či defaultní prohlíţeč, který byl součástí systému, vývojář musí počítat s tím, ţe stránky budou zobrazovány na různých strojích, s různými prohlíţeči, různými rozlišeními a s různými rychlostmi internetu. Mezi nejznámější prohlíţeče patří Internet Explorer od firmy Microsoft, Mozilla Firefox od firmy Mozilla Corporation, Opera od firmy Opera Software ASA, Safari od firmy Apple a Google Chrome od firmy Google. Všechny tyto prohlíţeče jsou volně ke staţení.

5.1 Internet Explorer

Výhodou Internet Exploreru je jeho přímá implementace do operačního systému Windows. Uţivatel tak můţe hned začít pracovat. Dnes uţ si ovšem můţe uţivatel při instalaci OS vybrat, jaký prohlíţeč upřednostňuje. I tento fakt přispěl ke klesajícímu podílu na trhu. Nevýhod IE je hodně. Mezi ty nejvíc alarmující bych však vybral velmi špatné zabezpečení, kvůli kterému můţe být uţivatelův počítač napaden zvenčí. Druhou kritickou nevýhodou IE je jeho špatná kompatibilita v porovnání s ostatními prohlíţeči. I absolutně nastavené hodnoty v kaskádových stylech se zobrazují v IE a Firefoxu různě.

Sečteno a podtrţeno: Internet Explorer není vhodný pro prohlíţení webu, natoţ pro tvorbu webu.

Uznávám, ţe poslední verze 8 uţ nese velké známky pokroku. Stále však velmi pokulhává za konkurencí. Doufejme, ţe verze 9, která by měla být uvedena v roce 2011, se přiblíţí z hlediska kompatibility ostatním prohlíţečům na trhu.¹⁶

Dalším problémem se stal příchod nového formátu obrázků – PNG. Formát PNG měl za úkol nahradit stávající formát GIF. V drtivé většině prohlíţečů se PNG setkal s úspěchem. Internet Explorer však nedokázal zpracovat průhlednost obrázků (mimo jiné) a nezobrazoval obrázky formátu PNG korektně nebo vůbec. Vylepšení se dočkala aţ verze IE 7, ve které uţ alespoň z části fungovaly obrázky PNG tak, jak měly. Stále však bylo co vylepšovat. Nejnovější verze IE 8 uţ formát PNG podporuje.

Ještě více znepokojujícím faktem je, ţe spousta uţivatelů se nenamáhala aktualizovat na nejnovější verzi 8, ale stále pouţívá zastaralou verzi 6 z roku 2001. Útoky hackerů jsou pak úspěšné zvláště díky této verzi prohlíţeče, která má „díry“ v kódu.

5.2 Mozilla Firefox

Poslední verze Mozilly Firefox 3.6.3 (1. dubna 2010) se setkala s velmi kladným ohlasem u fanoušků a uţivatelů. Vše začalo v roce 2004, kdy Mozilla Corporation vydala první verzi svého prohlíţeče.

Uţivatelům se zalíbila nejen proto, ţe je podporována operačním systémem Windows, ale ţe funguje korektně i pod Linuxem a pod operačním systémem Mac od firmy Apple.¹⁸

Současné průzkumy trhu s prohlíţeči řadí Firefox na druhé místo s 31%. Náskok Internet Exploreru je tak ohroţen právě tímto prohlíţečem. Uţivatelé si ho oblíbili pro moţnost uzpůsobit si funkčnost a vzhledu podle sebe. Při vývoji webu jistě vývojáři ocení mnoţství pluginů tj. přídavných modulů, které pomáhají při vývoji stránek – jmenovitě například Firebug.

Zobrazení stránek ve Firefoxu se prakticky neliší (a pokud ano, tak jen nepatrně) od zobrazení v prohlíţečích Opera, Safari a Chrome. Firefox je oblíben i díky snadné optimalizaci. Domovská stránka Firefoxu je jako jedna z mála nejznámějších webů validní.

5.3 Google Chrome

Za pouhé dva roky své existence se tento mladíček mezi webovými prohlíţeči dokázal zařadit na třetí místo v ţebříčku pouţívaných prohlíţečů. Chrome byl vydán ke konci roku 2008 u příleţitosti uvedení veřejné Bety nových Windows 7.

Největší devizou Chromu je jeho rychlost. Ať jiţ počítáte samotné spuštění či jen načítání stránek, tak Chrome rapidně válcuje konkurenci. Prohlíţeč běţí jak pod systémem Windows, tak Linux a Mac.

V kaţdé nové verzi se uţivatelé dočkají novinek, vylepšení a vyřešení bugů, tj. chyb v kódu, které omezují funkčnost či ohroţují bezpečnost počítače.

Díky odlehčenému programu je Chrome skvělý při optimalizaci stránek. Jisté jeho odnoţe dokonce nabízejí zobrazování stránek tak, jak by vypadaly v Internet Exploreru. Pro uţivatele, který nemá přístup k Internet Exploreru například z toho důvodu, ţe nemá operační systém Windows, ale Linux či Mac, se tak Chrome stává nástrojem, díky kterému se vývojář můţe Internet Exploreru zcela vyhnout.

Společnost Google plánuje vydání vlastního operačního systému, který nese stejný název – Google Chrome. Celý systém by měl vypadat právě jako prohlíţeč a měl by opět mířit na nevyšší mety, co se týče rychlosti. Dalším kladem je licence, která je open-source, a tudíţ zadarmo. Počítá se s tím, ţe Chrome najde vyuţití na nových netboocích a na slabších PC.¹¹

5.4 Apple Safari

Zatím největším konkurentem prohlíţeče Chrome je prohlíţeč ze stáje Apple. Tento browser vydaný v roce 2003 nativně pro operační systém Mac OS X, se stal vlajkovou lodí a defaultním prohlíţečem pro všechny počítače Mac s Mac operačním systémem. Netrvalo dlouho a na svět se v roce 2007 testech prohlíţeč Safari dokonce Chrome v rychlosti předehnal. Myslím, ţe touto verzí uteče Apple dotahujícímu se prohlíţeči Opera, která v současné době okupuje páté místo na trhu s prohlíţeči, a zároveň se přiblíţí třetímu Google Chrome.

Spíše neţ pro PC, se však Safari ujal na nových výrobcích firmy Apple. Trh s mobilními prohlíţeči se díky rozvíjejícímu se trhu s chytrými telefony, tzv. smartphony, vydal novým směrem. Prozatím však existují pouze tři prohlíţeče od firem Microsoft, Apple a Opera. Apple je znám hlavně díky operačnímu iOS, který pohání jeho nejnovější iPhone a iPod Touch.²³

5.5 Opera

Na pátém místě v pořadí uţívaných prohlíţečů se řadí prohlíţeč Opera od společnosti Opera Software ASA. První verze tohoto prohlíţeče byla vydaná jiţ v roce 1996 a za 14 let vývoje urazil dlouhou cestu kupředu. Zatím poslední verze 10.53 se setkala s pozitivní vlnou kritiky od mnoha internetových časopisů. V testech rychlosti a kompatibility obsadila Opera celkové druhé místo hned za Google Chrome.²⁰

Vývojáři Opery však vidí, jaká panuje na trhu s prohlíţeči situace, a proto se rozhodli expandovat dále. Na trhu s PC prohlíţeči má Opera pouze necelá 2%, nicméně situace u mobilních prohlíţečů je zcela jiná. Verze Opery jsou pouţívány na mobilních telefonech, smartphonech či PDA zařízeních.

S tímto prohlíţečem je moţné se setkat u mobilních přístrojů s operačními systémy Maemo, BlackBerry, Symbian, Windows Mobile, Android, a dokonce i iPhone. ²⁰

Opera však během svého vývoje často vypomáhala konkurenci, ačkoliv to rozhodně neměla v úmyslu.

Mnoho originálních nápadů, které nebyly často dotaţeny do konce, převzaly jiné prohlíţeče a staly se tak úspěšnějšími. Řeč je zde například a snadném přístupu na oblíbené stránky, BitTorrent klient a mnoho dalších.

Prohlíţeč si musí vybrat uţivatel. Ten většinou sáhne po nejpohodlnější nabídce, která v dnešní době znamená Internet Explorer. Mezi vývojáři panuje jasný názor, ţe tento prohlíţeč má své chyby, a uţivatelé by se mu měli vyhnout. Nicméně faktem zůstává, ţe IE je stále nejpouţívanější prohlíţeč na světě, a je tak nutné optimalizovat stránky hlavně pro něj.

6. Barvy

Nejdůleţitějším prvkem snad kaţdého designu je barva. Za barevným nádechem stránky stojí designér, který tímto způsobem vyjádří emoce stránky tak, jak bych chtěl, aby působily na návštěvníka. Barvy webu by měly korespondovat s účelem a obsahem stránky. Měly by neverbálně vyjadřovat cítění stránky. ²

6.1 Teorie barev

Poprvé se teorie barev objevila jiţ v 15. století v poznámkách Leona Battisty Abertiho a Leonarda da Vinciho. Dnes známá teorie barev se však začala rozvíjet aţ v 18. století. Zahrnovala zmínky o základním modelu barev RBY – red (červená), blue (modrá), yellow (ţlutá). Tyto tři barvy byly označeny jako primární barvy. Sekundární barvy vznikly smícháním primárních barev. Vznikly barvy zelená, oranţová a fialová. Terciální barvy vznikly smícháním primárních a sekundárních barev. Díky výzkumu barev a optiky přešli vědci ze systému RBY na systém dnes velmi vyuţívaný – RGB – red (červená), green (zelená), blue (modrá). Tento model zobrazování barev se pouţívá u televizorů a monitorů.

Další model, který vznikl v této době a pouţívá se dodnes, je model CMYK – cyan (azurová), magenta (purpurová), yellow (ţlutá), black (černá). Černá barva se zde označuje slovem key (klíčová). Tento model se hojně vyuţívá při tisku u tiskáren, kopírovacích zařízení atd.

Kruh barev (Obrázek 3):

Obrázek 3

2 Celá kapitola o barvách vychází z knihy Jakuba Krčmáře Adobe Photoshop : Praktický webdesign.

6.2 Druhy barev

Podle umístění v kruhu barev rozeznáváme dva typy barev – doplňující a podobné. Doplňující barvy jsou takové, které se nacházejí v kruhu barev naproti sobě. Mají tedy přesně opačný odstín a doplňují se. Jedná se například o dvojice barev modrá a oranţová, fialová a ţlutá či červená a zelená. I kdyţ se v kruhu tyto barvy nenacházejí, mezi doplňující barvy zcela jistě patří i dvojice bílá a černá.

Podobné barvy jsou takové, který spolu v kruhu barev sousedí. Nijak se tedy spolu „nebijí“ a vypadají dobře, kdyţ jsou spolu. Nicméně neposkytují moc velký kontrast, kdyţ jsou u sebe.

6.3 Emoce barev

Kaţdá barva má schopnost vyjadřovat jisté emoce. Při pohledu na barvu se člověku vybaví konotace, která je buď pozitivní nebo negativní. Při pohledu na jednu a tu samou barvu mohou mít dva různí lidé různé konotace. Některé barvy jsou spojovány s nebezpečím, jiné s klidem. Například v nemocnicích se pouţívají jemné barvy, většinou v odstínech zelené a ţluté, které představují klid a zdraví. I podle konotací vznikly tři skupiny barev. Jedná se o barvy teplé, studené a neutrální. Teplé barvy vyvolávají teplo a řadí se mezi ně odstíny červené, ţluté a oranţové. Studené barvy jsou člověkem vnímány jako barvy zimy a chladu a patří mezi ně odstíny modré, zelené a fialové. Neutrální barvy se příliš nepojí s ţádnou konkrétní emocí, nicméně to rozhodně neznamená, ţe nevyvolávají ţádné konotace.

Neutrální barvy jsou šedivá, hnědá, bílá a černá.

6.4 Teplé barvy

6.4.1 Červená

Červená barva symbolizuje oheň a sílu. Je často asociována i s vášní a důleţitostí. Psychologové tvrdí, ţe červená barva nabíjí energií. Na druhé straně však můţe červená barva znamenat i vztek, nebezpečí a agresivitu. V psychologii barev červená reprezentuje lásku a krev. Při výběru barev u místností je červená označována jako vzrušení, vášeň a někdy i radost. Záleţí na konkrétním odstínu, ale platí, ţe při vstupu do červeně vymalované místnosti se člověku zvýší tlak. U webdesignu by měl designér přemýšlet nejdříve nad obsahem a poté tomuto obsahu a následně i návštěvníkům webu barvy přizpůsobit. Červenou barvou se na webu označují důleţité věci. Většina seznamovacích serverů na internetu pouţívá pro svůj design či minimálně logo červenou barvu – symbol lásky.

6.4.2 Žlutá

Základní odstín ţluté barvy představuje samé pozitivní konotace: radost, inteligenci, optimismus, štěstí, sluneční svit atd. Tmavší odstíny ţluté mohou však nabírat negativní konotace typu kritika, závist či lenost. Ve webdesignu se ţlutá dostala na vrchol v roce 2009, kdy se během ekonomického úpadku snaţily firemní weby přilákat zákazníky svým slunným designem.

6.4.3 Oranžová

Oranţová barva vzniká spojením primárních barev červené a ţluté a bere tak na sebe jejich mnohé vlastnosti. Sama o sobě však oranţová barva představuje štěstí, radost a sluneční svit. Oranţová si nebere od červené tak silné negativní konotace. Oranţovou barvu si za svou barvu zvolily například firmy EasyJet, SmithKlene či Intel.

6.5 Studené barvy

6.5.1 Modrá

Studené barvy se často pouţívají na webech spojených s profesionalitou, autoritami či mají vyvolat důvěru. Mnoho vládních organizací pouţívá odstíny modré jako svou barvu, protoţe symbolizuje

stabilitu, vnitřní klid a důvěru. Pouţívají jí banky, politické strany či například stránky Bílého domu v USA.

Fialová barva symbolizuje jiţ od dob Římanů barvu císařské či královské rodiny. Tato barva ukazuje bohatství a luxus. Je spojována i s duchovnem a tajemnem a podněcuje kreativitu. Světlejší odstíny fialové mají nádech kouzel a magie. Tmavší odstíny naopak představují smutek a ponurost.

6.6 Neutrální barvy

6.6.1 Bílá

Mnozí experti se shodují, ţe bílá barva společně s černou vlastně ani barvy nejsou. Hlavně proto, ţe chybí v modelu barev z 18. století. Nejčastěji je bílá barva povaţována za pozitivní barvu, která symbolizuje štěstí, nevinnost, mír, naději, krásu a čistotu. V některých kulturách je však tato barva povaţována za barvu smrti. Bílá barva je povaţována za nejlepší kontrastující barvu. Proto se na mnoha webech pouţívá jako barva pozadí.

6.6.2 Černá

Stejně jako bílá, ani černá není součástí modelu barev. Černá je v mnoha kulturách spojována spíše se svou negativní stránkou, a to je představa smrti, tajemna či neznáma. Černá barva je nicméně webdesignéry často vyuţívána, protoţe je schopna navodit atmosféru síly, eleganci či hloubku cítění.

Černou barvu je vhodné si vzít např. na přijímací pohovor. Ţadatel tak dá najevo svou silnou individualitu. A totéţ platí i pro webové stránky.

6.7 Bezpečné barvy pro web

Bezpečné barvou jsou takové, které jsou dostupné v libovolném webovém prohlíţeči v libovolném operačním systému podporujícím 256 barev. Na obrazových materiálech můţe být tolik barev, kolik daný formát dovolí. Paleta bezpečných barev obsahuje 216 poloţek. Na následujícím obrázku je zobrazeno 216 bezpečných barev (Obrázek 4).

Obrázek 4

7. Teorie obrazových formátů

Na prvních webových stránkách se nejdříve nacházel pouze text a odkazy, které přesměrovávaly uţivatele na další části stránek na webu. Dalším logickým krokem bylo přidání obrazových materiálů.

V dnešní době máme více moţností, jaké přidat na stránky obrázky. Nicméně nejvyuţívanější dosáhnout komprese aţ 10:1 bez znatelného a viditelného sníţení kvality obrázku. Nejčastěji se formát JPEG pouţívá u digitálních fotoaparátů a dalších zařízení ve formě JPEF/Exif. Společně s JPEG/JFIF je tento formát pouţíván pro ukládání a přenos fotek na web. Uţivatelé dost často tyto dva formáty nerozlišují, a proto je formát označován jednoduše jako JPEG.²

Společně s formátem GIF byl JPEG běţně pouţívaným formátem na webu. Designéři tyto formáty vyuţívali hlavně při tvorbě designových prvků na webu či na loga. V dnešní době jsou však oba tyto formáty vytlačovány bezztrátovým formátem PNG, který má sice o něco větší velikost neţ JPEG či GIF, ale při stále vzrůstajícím rychlostem připojení uţivatelů k internetu to uţ nehraje tak velkou roli.

7.2 GIF

Graphics Interchange Format je na rozdíl od ztrátového formátu JPEG zástupcem bezztrátových obrazových formátů. Klady formátu GIF spočívají v nízkých nárocích a malé velikosti. Jako jeden z mála umoţňuje tvořit jednoduché animace. Největším záporem je však omezený počet barev. Formát nabízí vyuţití pouze základních 256 barev. Proto designéři preferují formát PNG, který takováto omezení nemá. Animované obrázky se dnes v moderních designech uţ moc nevyuţívají, a pokud ano, tak jsou řešeny pomocí moderního Macromedia/Adobe Flash.²

7.3 PNG

Hlavním cílem nového obrazového formátu PNG (Portable Network Graphics) bylo nahrazení stávajícího formátu GIF. Formát PNG nabízí bezztrátovou kompresi a jako první z obrazových formátů obsahuje tzv. alfa kanál (alpha channel). Tento kanál podporuje průhlednost elementů, která se v dnešní době u webdesignu hodně vyuţívá. Ostatní formáty mohou být průhledné pomocí CSS vlastnosti transparency (průhlednost). Tato metoda však není zcela podporována majoritními prohlíţeči, a ani celková podpora a kompatibilita PNG s prohlíţeči nebyla na výši. Největší problémy s PNG měl prohlíţeč Internet Explorer ve verzi 6, kdy průhlednost nefungovala a prohlíţeč nahradil průhlednou část defaultní nastavenou barvou pozadí (nejčastěji šedou). Vývojáři dali dohromady mnoţství způsobů, jak toto obejít, ovšem nejlepším moţným řešením byl upgrade prohlíţeče IE na novější verzi, ve které je uţ PNG podporováno.²

Na rozdíl od formátu GIF podporuje PNG větší mnoţství barev – při vyuţití alfa kanálu aţ 64 bitů na pixel. PNG samo o sobě nenabízí podporu animací, těch je třeba dosáhnout pomocí neoficiálních rozšíření. GIF se stále vyuţívá více neţ formát PNG, ačkoliv je formát PNG výhodnější.²

Při srovnávání formátů JPEG a PNG musíme přihlédnout i k tomu, na co se který formát pouţije.

JPEG je výhodnější pouţít na kvalitní fotografie, protoţe vyuţití PNG by vyústilo jen ve zvýšení

velikosti souboru bez znatelného posunu kvality fotografie k lepšímu. Naopak PNG by se měl pouţít u obrázků, na kterých je zobrazen text či jasné linie. JPEG totiţ u tohoto typu obrázků vytváří nepříjemné artefakty pixelů v pozadí (Obrázek 5), které mohou rušit celkový dojem.

Obrázek 5

Osobně se při tvoření designu nejčastěji přikláním k formátu PNG. Uchvátil mne svými moţnostmi, hlavně co se průhlednosti týče. PNG pouţívám hlavně u prvků samotného designu tj. lišty, loga atd.

Obrazový formát JPEG vyuţívám u fotek, které jsou na webu uloţeny. Nejčastěji se snaţím, aby rozlišení fotky nepřesáhlo 1500 x 1000 pixelů. Je to optimální velikost pro dnešní monitory. Současně se snaţím, aby velikost souboru nepřesáhla 600 KB. Zcela se vyhýbám formátu GIF. Na webech nepouţívám animované prvky, a pokud bych se rozhodl je pouţít, sáhl bych po moţnostech

In document WEBOVÝ DESIGN – MANUÁL PRO VYTVOŘENÍ WEBOVÉ FOTOGALERIE POMOCÍ NÁSTROJE ADOBE PHOTOSHOP WEBDESIGN – MANUAL FOR CREATING WEB PHOTO GALLERY USING THE ADOBE PHOTOSHOP (Page 14-0)