Stejná stránka se v různých prohlížečích může zobrazit odlišně.

Transkript

1 Příprava grafických podkladů pro web 1. O webových prohlížečích Stejná stránka se v různých prohlížečích může zobrazit odlišně. Jako autor stránek na webu nevím, jaký prohlížeč bude můj čtenář používat. Můžu to jenom tušit. Proto nemá cenu specializovat se na jeden typ prohlížeče a stránky ladit jen pro něj. Obvykle je potřeba, aby stránky vypadaly stejně ve všech hlavních prohlížečích. Svoje stránky byste vždy měli vyzkoušet alespoň na těchto prohlížečích: Internet Explorer 9 Firefox Opera Google Chrome nebo Safari Proč se prohlížeče liší Internet se zpočátku vyvíjel neuvěřitelně rychle. Podobně dynamicky se přetvářel jazyk HTML, tak aby umožňoval zařazovat do stránek nové a nové věci. Starší prohlížeče neumožňovaly stejné zobrazení stránek jako prohlížeče moderní, protože v době vzniku starších prohlížečů se prostě nevědělo, jak se budou stránky psát za pár let. Něco samozřejmě zůstalo stejné, ale staré prohlížeče neumějí zobrazovat nové styly, skripty a jiné vychytávky. Kromě oficiální verze jazyka HTML existovaly různé hybridní formy HTML a rozšíření HTML. Výrobci prohlížečů (zejména Microsoft) se snažili do svých prohlížečů zabudovat podporu nestandardních věcí, které byly teprve v návrhu nebo které si sami vymysleli. Čili interpretace jazyka HTML je závislá na prohlížeči, který používá čtenář (klient). V poslední době se to trochu uklidnilo. Microsoft do Internet Exploreru 8 (který je od roku 2010 nejrozšířenější) zapracoval podporu některých důležitých standardů. Konkurenční prohlížeče Mozilla (Firefox), Webkit (Chrome) a Opera jsou na tom ohledně standardů ještě lépe. Standard, nebo optimalizace? Kdo dělá internetové stránky, dostane se velmi brzy před dilema: dělat chudé, "standardní" stránky, které se dobře zobrazí ve všech prohlížečích, nebo stránky odladit pro jeden druh prohlížeče (optimalizovat) a pak se jenom modlit, aby se to jinde zobrazilo správně? Metoda optimalizace Optimalizace pro jeden prohlížeč. Někteří autoři dokonce píší "tyto stránky jsou optimalizovány pro ten a ten prohlížeč". Ačkoli optimalizace pouze pro jeden prohlížeč zní diletantsky, je často efektivním kompromisem mezi pracností a výsledkem. Je totiž pravděpodobné, že se v jiných prohlížečích stránka zobrazí stejně. Až na občasné přetékající okraje, rozbitá menu a nefunkční skripty, což ale zas tolik nevadí (tedy jak kdy a jak kde).

2 Metoda pokusu a opravy Autor udělá krásné stránky optimalizované pro jeden prohlížeč a pak si to zkouší zobrazovat v jiných. Najde-li chybu, nějak ji opraví. To je slušná metoda, leč docela pracná. Používají ji i profesionálové. V minulosti tím prvním zkoušeným prohlížečem býval Internet Explorer, od roku 2007 už se vyplácí psát primárně pro Firefox a teprve nakonec řešit vrtochy Exploreru. Metoda znalosti verzí HTML a CSS Autor, který ví, co může a nemůže použít, je na tom nejlépe. Pokud vytvoří na stránce něco, co by se ve starších prohlížečích zobrazilo špatně, udělá to tak, aby se v nich zobrazilo alespoň něco. Nejlépe je využít přitom CSS styly. Je to těžké na znalosti, ale jediné všeobecné. 2. Šířka webové prezentace a rozlišení obrazovky Šířka webových stránek se odvíjí od rozlišení obrazovky na monitoru čtenáře. V dnešní době se předpokládá, že nejmenší šířka monitoru je 1024 bodů. Někteří uživatelé používají rozlišení např bodu a vyšší. Pevná šířka webové prezentace Webové prezentace s šířkou, která se nastaví napevno. Všechno ostatní se potom odehráva uvnitř tohoto oddílu s nastavenou šířkou. Toto řešení je kritizováno majiteli mobilních počítačů s malým displejem, v nichž se musí horizontálně scrolovat. Majitelé velkých monitorů naopak mají na obrazovce hodně prázdna. Flexibilní struktura Flexibilní struktury se dosahuje pomocí procentních šířek. Jednotlivé šířky elementů tak nejsou zadávány v pixelech, nýbrž v procentech. Takto připravená struktura pak reaguje na různé šířky nejrůznějších zařízení. Jak dělat stránky tak šikovně, aby na šířce nezáleželo (udělat je "gumové" aneb "s plovoucí šířkou"). Dá se to (hodně pomáhají styly), ale přináší to některé komplikace, hlavně pokud bude stránka obsahovat pevně široké prvky (reklamy, obrázky, složitější grafiku). Druhý problém jsou velmi široké monitory, kde jsou pak řádky textu příliš dlouhé a dají se špatně číst. Kvůli gumovosti je důležité pracovat s procenty, ale kvůli čtení nepoužívat stoprocentní šířku. Flexibilní obrázky Technika flexibilních obrázků zajistí, že obrázky se budou přizpůsobovat stejně tak, jako samotná struktura. Aby tohoto bylo dosaženo, neuvádí se šířka a výška obrázku uvnitř tagu <img>. Aby nedocházelo k přetékání, nastylují se všechny obrázky následujícím kódem: max-width: 100%; height: auto; Takto nastylované obrázky se dokáží přizpůsobit obrazovce jednotlivých zařízení. Od roku 2012 profesionálové používají tak zvaný responzivní design. Zakládá se na použití relativně pokročilého stylování pomocí tzv. media queries.

3 Responzivní, nebo-li přizpůsobivý, design je speciální způsob stylování html stránky. Stránka s responzivním designem se mění v souvislosti na zařízení, ze kterého stránku prohlížíte ať už se jedná o notebooky, netbooky, mobilní telefony či tablety, vždy se bude prohlížená stránka zobrazovat korektně a to v závislosti na šířce obrazovky zobrazovaného zařízení. Významná hraniční rozlišení V následující tabulce je přehled hraničních rozlišení, která jsou ve webovém světě významná. 320px Malá rozlišení, obrazovka na výšku. 480px Malá zařízení, obrazovka na šířku. 600px Menší tablety, Amazon Kindle ( ), obrazovka na výšku. 768px Tablety, ipad 1 a 2, obrazovka na výšku. 1024px Notebooky, stolní monitory, tablety při obrazovce na šířku. 1200px Širokoúhlé zařízení. 3. Doporučení pro grafiku na webu DPI všech grafických podkladů pro web závisí na nastavení monitoru. Převod pt na pixely je závislý na nastavení systémového zobrazení. Normálně jsou monitory nastavené na 96 dpi (96 px na palec), což při 72 pt na palec dává vztah 3pt = 4px. Je velmi účelné používat parametrů width=" " a height=" ", tj. informací o velikosti obrázku, již do HTML kódu. Je to trošku práce navíc, ale výsledek je uspokojující. Při načítání WWW stránky prohlížeč ihned vymezí prostor, do nějž bude obrázek zobrazen a mezitím pokračuje v načítání textu již na ty pozice pro něj určené. Navíc, pokud nejsou u obrázku tyto parametry uvedeny, musí se prohlížeč zeptat dodatečně serveru, jaké jsou rozměry obrázku, což zobrazení značně zpomaluje. Každý obrázek by měl být popsán i tzv. alternativním textem (parametr alt=" "). Spousta uživatelů využívajících pomalé připojení k Internetu vypíná v prohlížeči zobrazení obrázků, aby ušetřili čas při načítání stránek. Proto, aby byli informováni o tom, co se nachází za obrázek na konkrétním místě uvádíme již zmiňovaný krátký textový popisek příslušející k nezobrazenému obrázku. Tento text má též své opodstatnění pro uživatele, kteří mají zobrazování obrázků zapnuto. Těm se pak po přesunutí kurzoru myši na obrázek zobrazí u kurzoru bublinka obsahující tento text. V názvech obrázků nepoužívejte diakritiku a zakázané znaky. Není dobré odkazovat se na nějaký obrázek umístěný na jiném místě (serveru), než jsou zobrazované stránky. Mnohdy může nastat situace, kdy server s obrázky je mimo provoz a potom tedy nejsou stránky odkazující se na tyto nepřístupné obrázky neúplné. Pokud je nutno odkazovat se na obrázky na jiném místě, bývá zvykem na to upozornit. Pamatujte, že text stránky musí zůstat za všech okolností dobře čitelný. 4. Grafické formáty pro web Pro WWW stránky jsou doporučeny tři druhy rastrových grafických formátů - GIF, JPG (JPEG) a PNG a jeden vektorový SVG.

4 Jelikož je běžná rastrová grafika pro prostředí webu prakticky nepoužitelná z důvodu velkého objemu dat obsažených v rastrovém obrázku (např. BMP px, 256 barev = B) je nutno se tedy poohlédnout po takovém grafickém formátu, který pojme stejnou grafickou informaci a zároveň s menším objemem dat. K tomuto jsou tedy určeny komprimované grafické formáty. Grafický formát GIF Grafický formát GIF (Graphics Interchange Format) používá tzv. neztrátovou kompresi (algoritmem LZW). Je to komprese informace, při níž nedochází k žádným změnám v komprimovaných datech. Tato komprese je vhodná pro jemnou a přesnou grafiku - texty, tlačítka snímky obrazovek apod. Formát GIF je určen pro ukládání obrázků s nejvýše 256-ti barvami a umí též ukládat data dvoubarevná. Mezi jeho hlavní přednosti patří neztrátová komprese a možnost volby průhlednosti (Transparent GIF - formát GIF89a). Jedna z barev může být označena jako průhledná a při zobrazení se tato barva nahrazena podkladovou barvou webové stránky. U tohoto formátu se též můžeme setkat s pojmem prokládaný (interlaced). Je li obrázek vytvořený s metodou prokládání, při jeho načítání se nejprve zobrazí hrubý nástin obrázku a postupně se grafická informace upřesňuje a obrázek se dotváří do výsledné podoby. Toho se využívá u stránek, kde je vhodné zobrazit již při načítání stránky alespoň částečnou grafickou informaci, která je posléze dočítána a zobrazována v plné kvalitě. 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 jak jeden obrázek (tzv. animovaný GIF) jinou metodou než je metoda videa. Dalším prvkem multimediálnosti tohoto souboru byla možnost přidat k obrázku zvuk. Tato možnost se ale neujala, neboť existují mnohem mocnější prostředky postihující tuto oblast multimédií. Grafický formát JPG U grafického formátu JPG (Joint Photographic Experts Group) je používáno tzv. ztrátové komprese. Je založena na znalostech nedokonalosti lidského oka, které je schopné tolerovat některé změny v obraze za účelem vysoce účinné komprese. Tato komprese je vhodná pro fotografie a obrázky bez ostrých obrysů. Nevhodná je zejména pro obrázky nesoucí textovou informaci. Většina grafických editorů dokáže nastavovat u JPEGu stupeň komprese, což znamená nastavení kvality obrázku. U formátu JPEG se často používá jeho speciální vlastnost - tzv. progresivnost JPEGu. Je to obdoba prokládaného GIFu (Interlaced GIF), kdy se data zobrazují postupně. Grafický formát PNG Grafický formát PNG (Portable Network Graphics) vznikl pod záštitou konsorcia W3C jako náhrada za grafický formát GIF. Také tento formát využívá bezztrátové komprese dat (algoritmem Deflate). Účinnost komprese se nastavuje aplikací filtrů, přičemž kvalita je stejná jako u GIFu, ovšem účinnost je mnohem vyšší (soubor s daty je menší). Tento formát pracuje buď s indexovými barvami (16 nebo 256 barev), nebo s plnou paletou barev (24 nebo 48 bitů). Dále je možné do souboru uložit i další informace, jako je např. alfa kanál nebo gamma korekce. Stejně jako formát GIF využívá transparentnosti, ovšem mnohem lépe (zejména z důvodu plné palety). Při přechodech do transparentní barvy je tedy možné využívat až 56k úrovní průhlednosti.

5 PNG má také ve srovnání s GIFem mnohem lepší algoritmus prokládání (Adam7). Jediná vlastnost, která PNG ve srovnání s GIFem chybí, je animace. SVG SVG (z anglického Scalable Vector Graphics škálovatelná vektorová grafika) je značkovací jazyk a formát souboru, který popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Formát SVG by se měl v budoucnu stát základním otevřeným formátem pro vektorovou grafiku na Internetu. Grafika SVG neobsahuje obrazová data pixel po pixelu, ale seznam svých součástí grafických objektů, pomocí kterých lze obrázek vykreslit. SVG je ideální pro jednoduchou grafiku, například grafy, binární stromy, chronologie, rodokmeny, finálové pavouky apod. 5. Barvy na webu V HTML dokumentech se používá pro označení barvy dvou způsobů (CSS jich má mnohem více): #RRGGBB slovního pojmenování barvy U prvního způsobu je zobrazení barvy přibližně 100%, neboť barva je smíchána z určitého podílu červené (RED), zelené (GREEN) a modré (BLUE) barvy. Pouze Netscape pracuje s výpočtem barev trošku nešetrně, neboť posun mezi odstíny R, G, nebo B má větší než třeba MS Internet Explorer, který zobrazuje výslednou barvu věrněji. Druhý způsob zápisu barev, je opět Netscape trošku nešetrnější a dokonce se může stát, že barva zapsaná správným anglickým ekvivalentem bude v prohlížeči zobrazena jako úplně jiná. Zápis touto formou má výhodu zejména pro začátečníky, kteří se obejdou bez kalkulačky a složitého přepočítávání barev do HEXadecimální soustavy. Celkem existuje 140 barev, které je možné slovně pojmenovat. 16 základních barev s jejich HEXadecimálním kódem má slovní pojmenování. Zbývajících 124 barev se označuje jako barvy X11. Velmi často se můžete též setkat s 216 barvami, kterým se říká bezpečné barvy (216 web-safe colors), které mají tu vlastnost, že by se měly zobrazit na jakémkoli zobrazovacím zařízení stejně. V současné době používáme pro grafické prvky na internetu barevný model RGB. 6. Imagemapy (obrazové nebo klikací mapy) Imagemapa je obrázek, jehož některé části se chovají jako hypertextové odkazy. V současné době se pomalu upouští od používání Imagemap a obrázky jsou raději rozřezány na menší celky, což umožňuje jejich rychlejší načítání. Vytvoření Imagemapy z obrázku není nijak snadná záležitost. Musí se přesně nadefinovat oblasti, které budou aktivní. Definice se provádí s ohledem na souřadnice obrázku. Aby autor stránek s Imagemapou nemusel provádět tyto výpočty souřadnic, je vhodnější použít některou aplikaci, která velmi pohodlným způsobem tuto Imagemapu dokáže vytvořit i s příslušným HTML kódem. Použití Imagemapy je mnohdy ale nejlepším řešením např. pro navigaci po stránkách. 7. Co je kódování Počítač chápe každé písmenko jako číslo od 0 do 255 (jeden bajt). Američané a Angličané (a programátoři) si vystačí se 128 znaky, protože John Wicliff (britská obdoba Mistra Jana Husa) se nepletl do věcí, kterým nerozuměl, takže nemají nabodeníčka. Těmto základním 128 znakům bez háčků a čárek se říká ASCII.

6 Dalšími čísly od 128 do 255 se označily diakritizované znaky jazyků západní Evropy, a tak vznikl kód Latin-1. V něm české znaky nejsou (s výjimkou znaků á, í, š a ž). Pro neazbukové jazyky střední a východní Evropy (tedy i pro češtinu a slovenštinu) vznikly různé konvence, které zachovávají význam prvních 128 znaků ASCII (normalni pismena), ale dalších 128 znaků si definují po svém. a právě různá přiřazení diakritizovaných znaků číslům od 128 do 255 se označují jako kódování (případně jako znaková sada). Problém: Hodně různých lidí si usmyslelo, že nadefinují kódování češtiny, jenomže to každý udělal jinak. Nejčastější kódování V poslední době převládají tři kódování češtiny: ISO Windows-1250 UTF-8 ISO je, jak už název napovídá, kódování standardnější, používané na Unixu a na Linuxu, ale i v mnoha windowsáckých programech. Někdy se označuje jako Latin 2, ISO Latin 2. Microsoft jej nazývá takto: "Středoevropské jazyky (ISO)". Windows-1250 je preferováno na Windowsech. Jeho obliba na webových stránkách spočívá zejména kvůli tomu, že jej většina editorů na Windowsech používá jako základní kódování, např. FrontPage, HomeSite nebo Notepad (poznámkový blok). V Microsoftích programech se kódování windows-1250 označuje jako "Středoevropské jazyky" bez přívlastku, což je od Microsoftu samozřejmě srabárna a matení. Zápis UTF-8 je nejčastějším zápisem znakové sady Unicode. Unicode je narozdíl od výše zmíněných znakových sad určeno pro všechny světové jazyky najednou, protože znakům přiřazuje čísla až do 16 miliónů (zapisuje se většinou dvěma bajty). Jde o nejmodernější kódování. Všeobecná podpora Unicode je teprve hudbou budoucnosti, ale už lze bez problémů používat stránky kódované v UTF-8. UTF-8 je v prohlížečích podporované dobře. ISO (též Latin-1, Západoevropské ISO) je kódování západoevropské. Neobsahuje všechny české znaky. Pokud jde o češtinu, v zásadě se jeho použití rovná chybě. Další stará kódování jako kód bratří Kamenických, Mac, PC Latin 2 nebo čeština pro Dos se dnes již na webu užívají tak zřídka, že jim nyní nebudu věnovat pozornost.