R∙znΘ prohlφ╛eΦe

V Φem je problΘm - ProΦ to tak je - SouΦasnΘ prohlφ╛eΦe - Standard, nebo optimalizace? - Metoda pokusu a opravy - Metoda znalostφ verzφ HTML - Rozli╣enφ obrazovky - KonkrΘtn∞

V Φem je problΘm?

ZaΦφnajφcφ Internetovφ auto°i nejsou psychicky p°ipraveni na smutnou pravdu:

• Stejnß strßnka se m∙╛e v r∙zn²ch prohlφ╛eΦφch zobrazit diametrßln∞ odli╣n∞.

Na Internetu nevφm, jak² prohlφ╛eΦ m∙j Φtenß° pou╛φvß. M∙╛u 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 to vypadalo stejn∞ ve v╣ech hlavnφch prohlφ╛eΦφch.

Pokusφm se nastφnit nejΦast∞j╣φ problΘmy a jejich °e╣enφ. Ale nap°ed krßtk² historick² ·vod.

ProΦ to tak je

Internet se vyvφjφ 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. 

Je z°ejmΘ, ╛e 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 nov∞j╣φ, slo╛it∞j╣φ v∞ci a novΘ tagy starΘ prohlφ╛eΦe zobrazovat neum∞jφ. A je tu je╣t∞ dal╣φ problΘm:

Krom∞ oficißlnφ verze jazyka existujφ r∙znΘ nßvrhy na jeho roz╣φ°enφ. V²robci prohlφ╛eΦ∙ (zejmΘna Microsoft) se sna╛φ do sv²ch prohlφ╛eΦ∙ zabudovat podporu nestandardnφch v∞cφ, kterΘ jsou teprve v nßvrhu. (Sna╛φ se, aby webovφ auto°i tvo°ili strßnky hlavn∞ pro jejich prohlφ╛eΦ a nabφzejφ jim p°i tom novΘ mo╛nosti.) ╚ili jazyk HTML je zßvisl² na prohlφ╛eΦi, kter² pou╛φvß Φtenß° (klient).

SouΦasnΘ prohlφ╛eΦe

V roce 2002 lze potkat tyto prohlφ╛eΦe:

Nßsledujφ podrobnosti o d∙le╛it∞j╣φch prohlφ╛eΦφch.

Internet Explorer (IE)

Proto╛e nejroz╣φ°en∞j╣φm prohlφ╛eΦem je Internet Explorer, staΦφ v∞t╣inou strßnky ladit pro n∞j a v ostatnφch prohlφ╛eΦφch jenom trochu zkontrolovat, jestli to funguje. 

DobrΘ verze Internet Exploreru jsou od Φty°ky v²╣e. Li╣φ se pouze v detailech (zejmΘna interpretace blokov²ch CSS vlastnostφ, roz╣φ°enφ CSS a JavaScriptu). ╚tvrtß verze se dnes prakticky nevyskytuje (mΘn∞ ne╛ p∙l procenta v roce 2003).

Do jednoho poΦφtaΦe se dß nainstalovat vφce verzφ Intenret Exploreru. Dlouho se to ale nev∞d∞lo (Microsoft °φkal, ╛e se ty verze navzßjem nesnesou). Ale existujφ balφΦky umo╛≥ujφcφ instalaci verzφ 5.0 a 5.5 vedle d°φve nainstalovanΘho IE 6.0. Vφce informacφ o instalaci Explorer∙ mßm v blogu.

Netscape (NN)

Nejhor╣φm prohlφ╛eΦem minulosti je Netscape 4. Dnes jej pou╛φvajφ pouze nep°ßtel╣tφ webmaste°i a kritici, kdy╛ cht∞jφ dokßzat, ╛e mßte ╣patn∞ ud∞lanΘ strßnky. Chybuje a padß. Lze na n∞j zanev°φt (psßno 2003), proto╛e v ka╛dΘm operaΦnφm systΘmu pro n∞j existuje lep╣φ alternativa.

Co je Netscape 6: Netscape dal╣φ verzi prohlφ╛eΦe nechal vyvφjet nezßvislou skupinou jako open-source. Tak vznikla Mozilla. V²vojovou verzi Mozilly p°ejal Netscape a ud∞lal z nφ prohlφ╛eΦ Netscape 6. Jßdrem je vykreslovacφ program Gecko. Netscape 6 a 4 jsou ke sta╛enφ na www.netscape.com, kde jsou tΘ╛ archivnφ star╣φ verze (nap°. verze 3, kterß v∙bec nepodporuje styly).

Kdy╛ se dnes mezi webmastery mluvφ o Netscape, myslφ se tφm verze 4. Verzi 6 a 7 se °φkß Mozilla, proto╛e to je Mozilla.

Mozilla

Nejlep╣φ dne╣nφ prohlφ╛eΦ. Podporuje CSS ve verzi 2 a Javascript lΘpe ne╛ Microsoft Explorer, DOM1. Dr╛φ se standard∙. Umφ dob°e zobrazovat XML. BlokovΘ elementy vykresluje trochu jinak ne╛ Internet Explorer (sprßvn∞). Zdrojßky a instalaΦky pro v╣echny platformy lze najφt na www.mozilla.org.

Mozilla existuje i v Φe╣tin∞, °φkß se jφ Czilla. Ke sta╛enφ na strßnce www.czilla.cz.

Alternativnφ prohlφ╛eΦe

• Opera je velmi dobr² prohlφ╛eΦ, kter² sice ve verzi 5 neum∞l zobrazit korektn∞ Φe╣tinu, ale ╣estka to u╛ umφ. Stßhn∞te si na www.operasoftware.com. Nynφ i verze 7, kterß je skv∞lß.
• Linuxov² Konqueror je fajn.
• Arachne mß dv∞ fantastickß specifika: je p∙vodn∞ Φesk² a je pro dos. Umφ toho dost. ⌐lape dob°e i na star╣φch strojφch. Nemßm s nφm ╛ßdnΘ p°φmΘ zku╣enosti, prakticky se nevyskytuje.
• Amaya, kterou vyvφjφ skupina W3C (konsorcium pro standardizaci Internetu) je snad nejhor╣φ prohlφ╛eΦ, kter² jsem vid∞l. Nemß smysl se jφ zab²vat.
• TextovΘ prohlφ╛eΦe Links a Lynx jsou velmi oblφbenΘ mezi u╛ivateli Unix∙ a Linux∙. Links je Φesk² a relativn∞ nov², Lynx je star² neΦesk².
• Prohlφ╛eΦe na Macu neznßm.
• N∞kterΘ programy tvß°φcφ se jako autonomnφ prohlφ╛eΦe ve skuteΦnosti pou╛φvajφ rendrovacφ jßdro z Mozilly (Gecko) nebo z Internet Exploreru (NCSA Mozaic).

Star╣φ verze

ObΦas se objevujφ trojkovΘ verze Exploreru a Netscapu, zejmΘna jako relikty na poΦφtaΦφch z let 1995 a 1996. Modernφ v∞ci (styly apod.) nepodporujφ (nebo ╣patn∞). Webmaster by se zblßznil, kdyby m∞l myslet i na tyto prohlφ╛eΦe. Za uspokojiv² v²sledek se tedy pova╛uje, pokud jsou v nich strßnky alespo≥ ΦitelnΘ. 

Standard, nebo optimalizace?

Kdo d∞lß internetovΘ strßnky, dostane se velmi brzy p°ed dilema:

• Mßm d∞lat chudΘ, "standardnφ" strßnky, kterΘ se dob°e zobrazφ ve v╣ech prohlφ╛eΦφch,
• nebo mßm strßnky odladit pro jeden druh prohlφ╛eΦe (optimalizovat) a pak se jenom modlit, aby se to jinde zobrazilo sprßvn∞?

V∞t╣ina amatΘr∙ volφ druh² postup. 

(N∞kte°φ dokonce pφ╣φ "tyto strßnky jsou optimalizovßny pro ten a ten prohlφ╛eΦ". U╛ivatelΘ ostatnφch nech╗ si trhnou nohou, jß za nic nemohu. Nepi╣te to tam! Je to pakßrna. Kdo mß sprßvn² prohlφ╛eΦ, je v pohod∞, kdo mß ╣patn², ten si kv∙li vßm nebude stahovat jin².)

Pokud by bylo na v²b∞r jen mezi t∞mito dv∞ma p°φstupy, bylo by dobrΘ dr╛et se jednoduch²ch, standardnφch postup∙ a ╛ßdnΘ ╣φlenosti do strßnek neza°azovat. To v∙bec nenφ ╣patnß cesta! Existujφ ale i jinΘ metody.

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 v²bornß metoda, leΦ p°φli╣ pracnß.

Metoda znalosti verzφ HTML

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

Rozli╣enφ obrazovky

Kdy╛ d∞lßm d∙kladn∞ji upravenΘ strßnky, Φasto breΦφm nad tφm, ╛e nevφm, jakΘ rozli╣enφ bude m∙j Φtenß° pou╛φvat. Mßm d∞lat pro rozli╣enφ 1024 bod∙ na °ßdek nebo jenom 800? Nebo mΘn∞? Jsou jen Φty°i zp∙soby °e╣enφ, ka╛d² mß ale chyby.

1. Ned∞lat d∙kladn∞ graficky upravenΘ strßnky nebo je d∞lat tak ╣ikovn∞, aby na ╣φ°ce nezßle╛elo (ud∞lat je "gumovΘ").
2. N∞jak²m skriptem si zjistit, jakΘ rozli╣enφ klient pou╛φvß a p°epnout jej na danou strßnku. Chce to mφt vφce verzφ strßnky a dobrΘho programßtorskΘho ducha. ⌐patn∞ se to aktualizuje, neb je t°eba m∞nit vφce strßnek najednou.
3. Uzav°φt celou strßnku do tabulky nebo do stylovan²ch div∙ s pevnou ╣φ°kou (nejΦast∞ji 760 bod∙). Pomaleji se to zobrazuje a je s tφm vφce prßce. Odporuje to duchu HTML. Lep╣φ je to p°i pou╛itφ tagu <div> s pevnou ╣φ°kou. V poslednφ dob∞ je toto °e╣enφ kritizovßno majiteli mobilnφch poΦφtaΦ∙ s mal²m displejem.
4. Ud∞lat strßnku "optimalizovanou" pro urΦitΘ rozli╣enφ, ostatnφ a╗ si trhnou nohou.
5. Pomocφ skript∙ a styl∙ po naΦtenφ strßnky ╣φ°ku strßnky upravit podle velikosti okna (to je dost t∞╛kΘ).

Zßv∞r: doporuΦuji p°φstup Φφslo jedna, pokroΦilej╣φm t°i (tabulku nebo div).

KonkrΘtn∞

Mßm zku╣enosti s n∞kolika prohlφ╛eΦi. Pokusφm se popsat, co kter² podporuje. Bez zßruky, jde jen o zßv∞ry m²ch v²zkum∙.

Prohlφ╛eΦe Internet Explorer 4, 5 a 6 se krom∞ detailnφch rozdφl∙ v zobrazenφ blokov²ch CSS styl∙ v niΦem neli╣φ (ale majφ trochu jin² DOM). Obecn∞ lze °φci, ╛e IE 5 a 6 je v podpo°e CSS o dost lep╣φ ne╛ Φty°ka.

Toto je konec zßkladnφho kurzu. P°edchozφ: Editory
Vizte tΘ╛: formßtovacφ chyby, ·plnΘ zaΦßtky, design pomocφ tabulek, zßpis stylu pro r∙znΘ prohlφ╛eΦe, omezenφ CSS
DoporuΦenΘ pokraΦovßnφ: Obrßzky nebo Odkazy nebo Tabulky nebo Rßmy nebo CSS
Odkaz ven: Prohlφ╛eΦ Opera 7, chvalozp∞v, Sta╛enφ (download) v╣ech mo╛n²ch prohlφ╛eΦ∙ (anglicky), Pixiho (star╣φ) p°ehled v╣ech prohlφ╛eΦ∙