╚astΘ formßtovacφ chyby

Zde se pokusφm zmφnit n∞kterΘ chyby, jich╛ se internetovφ auto°i Φasto dopou╣t∞jφ. U n∞kter²ch polo╛ek se se mnou mnozφ budou hßdat, co je a co nenφ ╣patn∞. Tak╛e to berte jako m∙j nßzor.

Nevyzkou╣enΘ v∞ci - Zv²raz≥ovßnφ - P°φli╣ ╣irokΘ strßnky - Hrßtky s fonty - Nadpisy z obrßzk∙ - Flashovß jßma

Nevyzkou╣enΘ v∞ci

Existujφ r∙znΘ verze prohlφ╛eΦ∙, ve kter²ch se stejnΘ strßnky se zobrazujφ r∙zn∞. Mnoho lidφ tento fakt p°ekvapφ. Neuv∞domujφ si, ╛e kdy╛ jejich strßnky vypadajφ p∞kn∞ v jednom prohlφ╛eΦi, v jinΘm mohou vypadat docela jinak. Pravidlem by tedy m∞lo b²t odzkou╣enφ strßnek na v∞t╣in∞ prohlφ╛eΦ∙.

Zv²raz≥ovßnφ

Je dobrΘ zv²raz≥ovßnφm ╣et°it, ne plßcat jedno p°es druhΘ. To Φtenß°e akorßt zmate, tak╛e nebude v∞d∞t, co je d∙le╛it∞j╣φ a co ne.

P°φli╣ ╣irokΘ strßnky

╚asto vφdßm strßnky, kterΘ obsahujφ n∞jak² ╣irok² element s nastavenou ╣φ°kou tak velkou, ╛e se to nevejde do okna prohlφ╛eΦe. Potom se ╣φ°ka strßnky p°izp∙sobuje tomuto nej╣ir╣φmu elementu a voln² text nenφ Φiteln² bez posouvßnφ horizontßlnφ li╣tou. Na takov²ch strßnkßch se v∞t╣inou objevuje text "optimalizovßno pro rozli╣enφ monitoru 1024x800", n∞kdy ani to ne. Auto°i takov²ch strßnek bu∩to nestojφ o Φtenß°e s men╣φmi monitory (na kter²ch se takovΘ rozli╣enφ v∙bec nedß nastavit), nebo si neuv∞domujφ, ╛e v grafick²ch systΘmech existujφ n∞jakß okna (kterß majφ zpravidla men╣φ ╣φ°ku), nebo ╛e v prohlφ╛eΦi n∞kdo m∙╛e pou╛φvat panel "historie" nebo "oblφbenΘ".

╪e╣enφ tohoto problΘmu je nepou╛φvat objekty s pevnou ╣φ°kou v∞t╣φ ne╛ asi tak 500 bod∙. Je╣t∞ lep╣φ je uvßd∞t ╣φ°ku element∙ v procentech ╣φ°ky okna (ale to n∞kdy nejde). Jin²m Φast²m (ale pracn²m) °e╣enφm je uzav°enφ celΘho t∞la strßnky do tabulky s ╣φ°kou n∞co kolem 700 bod∙. Ta u╛ se ve v∞t╣in∞ dne╣nφch oken zobrazuje celß. Ale zase se zobrazuje pomalu, (vizte design pomocφ tabulek). Na╣t∞stφ se dß pevn² design d∞lat i pomocφ pozicovßnφ.

Hrßtky s fonty

Kdy╛ autor formßtuje strßnky, chce je o╛ivit pou╛itφm r∙zn²ch font∙. V╣ichni asi vφte, ╛e by se v jednom textu m∞ly vyskytnout maximßln∞ dva fonty, jinak dojde k p°eplßcanosti. Ale na webov²ch strßnkßch nastupuje dal╣φ zßludnost -- nikdy nevφm, jakΘ nainstalovanΘ fonty bude mφt poΦφtaΦ u klienta, kter² bude strßnky Φφst. M∙╛u mφt ╣t∞stφ a trefφm se, ale jistotu zobrazenφ nemßm. ProblΘmy, kterΘ mohou nastat:

1. Pokud nastavφte font, kter² klient neznß, klient zobrazφ text sv²m zßkladnφm fontem (v∞t╣inou Times). To nenφ takovß katastrofa. Nesmφte ov╣em spolΘhat na grafick² dojem zvlß╣tnφho pφsma.
2. Pokud nastavφte fonty, kterΘ nejsou v╛dy ΦeskΘ, zobrazφ se klientovi ΦtvereΦky a Φaj typu ε╟╦. Na va╣em poΦφtaΦi mßte nßhodou nainstalovanou Φeskou verzi tohoto fontu, ale klient mß anglickou. ╚eskß pφsma mφvajφ na konci nßzvu CE nebo EE, ale nemusφ tomu tak b²t v╛dy.

   Poznßmka: Zobrazenφ Φesk²ch font∙ nemß nic spoleΦnΘho s pou╛it²m k≤dovßnφm textu (u nßs windows-1250 a ISO 8859-2), o tom pojednßvßm v kapitole o Φe╣tin∞.

3. Zadßte-li n∞jak² netradiΦnφ font, kter² mß navφc n∞jakΘ jednoduchΘ jmΘno, m∙╛e se stßt, ╛e se zobrazφ ·plnΘ ╣φlenosti. P°φkladem je font jmΘnem "Chaucer". Existujφ nejmΘn∞ dva fonty tohoto jmΘna, p°iΦem╛ jedno z nich obsahuje obrßzky :-). To je pak poΦtenφΦko! Nap°φklad toto.
4. N∞kterß skoro-Φeskß pφsma se pokou╣ejφ ΦeskΘ znaky nedokonale nahrazovat. V²sledkem potom m∙╛e b²t n∞co divnΘho.
5. Je mo╛nΘ pou╛φvßnφ p°ibli╛n²ch nßzv∙ pφsem serif (patkovΘ pφsmo) a sans-serif (bezpatkov² grotesk), monospace (psacφ stroj), fantasy (ozdobnΘ pφsmo), cursive (psacφ). Prost∞ nechßte na u╛ivateli, jak bude vypadat vß╣ ozdobn² text. Je to nßdhern² a elegantnφ zp∙sob. Nenφ v jßdru chybn². Ale v²slednΘ zobrazenφ t∞chto font∙ zßvisφ na nastavenφ prohlφ╛eΦe (a v∞t╣inou se to nedß p°enastavit), tak╛e nenφ zaruΦebno nic, jak mo╛nß vidφte. Vizte detailnφ p°φklad.

╪e╣enφ

1. Pokud to nenφ nutnΘ, nem∞≥te defaultnφ (p°ednastaven²) font. Prost∞ font nikde nedeklarujte.
2. Chcete-li si b²t jisti, ╛e se jin² font zobrazφ sprßvn∞, pou╛φvejte pφsma Times New Roman CE, Arial CE a Courier. Ty jsou ve v╣ech Φesk²ch instalacφch Windows.
3. Pou╛φvejte vrstvenΘ deklarace. Uve∩te prost∞ seznam pφsem odd∞len² Φßrkami -- kdy╛ prohlφ╛eΦ v systΘmu nenajde prvnφ font, hledß ten druh². V HTML 3.2 se to d∞lß tagem <font face="Arial CE, Arial"> (nap°φklad), v CSS se pφ╣e {font-family: Arial CE, Helvetica, Arial, sans-serif}. Obzvlß╣t∞ se to hodφ, kdy╛ myslφte krom∞ Windows i na Linux, Win 3.1 Φi Mac.
4. P°i deklaraci jin²ch font∙ zßsadn∞ pou╛φvejte takovΘ, kterΘ majφ na konci "CE" nebo "EE".
5. Za pßr let, a╛ se v╣ude prosadφ prohlφ╛eΦe podporujφcφ CSS2, budeme moci ke strßnce p°ipojovat link na pou╛it² font. To se sice dß d∞lat u╛ dneska pomocφ programu WEFT, ale je to docela pracnΘ, a ne v╣echny prohlφ╛eΦe to chßpou.
6. Zßle╛φ-li vßm na p°esnΘm grafickΘm dojmu, nezb²vß, ne╛ pou╛φt obrßzek s nßpisem nebo dynamickΘ fonty (pro pokroΦilΘ).

Nadpisy z obrßzk∙

Aby nedo╣lo k m²lce, to je takΘ formßtovacφ chyba (alespo≥ podle mΘho nßzoru). Mßm pro to tato vysv∞tlenφ:

1. Obrßzek se dlouho stahuje (objem dat + nov² http protokol), tak╛e Φtenß° koukß mnoho sekund na neidentifikovatelnou strßnku. ╪e╣enφm je p°idat alespo≥ atribut alt, nebo p°idat pod obrßzek textovou kopii. Alt je neestetick², textovß kopie ru╣ivß.
2. Pokud si Φtenß° strßnku ulo╛φ a zapomene si ulo╛it i obrßzek nadpisu, mß sm∙lu.
3. Spousta lidφ si web prohlφ╛φ bez obrßzk∙.
4. Zßsadnφ problΘm je spojen s vyhledßvacφmi roboty typu Google. «ßdn² robot zatφm ale nenφ tak genißlnφ, aby si vzal obrßzek a p°eΦetl z n∞j text! (Hlavn∞ mu to za to nestojφ.)

╪e╣enφ problΘmu je r∙znΘ: Jednak obrßzkovΘ nadpisy nepou╛φvat (to je asi fakt nejlep╣φ), nebo pou╛φt pod textem obrßzkovΘ pozadφ.

Flashovß jßma

NespolΘhejte se na to, ╛e u╛ivatelΘ majφ nainstalovan² flash. D∞lat strßnky jenom ve flashi je dobr² zp∙sob, jak z nich dostat u╛ivatele. Krom∞ toho, ╛e se jim to v∙bec nemusφ ukßzat, je problΘm v tom, ╛e se lidi bojφ netradi°nφho a neznßmΘho ovlßdßnφ.

Vizte tΘ╛: Φe╣tina na webu, rozdφly v prohlφ╛eΦφch, obsah/forma, u╛ivatelskß pφsma, naΦφtanß pφsma, proΦ nepou╛φvat rßmy, design pomocφ tabulek
Odkaz mimo: Nejlep╣φ °e╣enφ obrßzkov²ch nadpis∙ (Pixy)