Nejčastější chyby tvůrců webových stránek

26. října 1999
Computer 20/99 SDÍLET NA FACEBOOKU TWEETNOUT
Ve svých recenzích webových stránek se – kromě jiného – zaměřuji na technické provedení, kde často kritizuji chyby a nedostatky. Pojďme se tedy společně podívat na to, jakých prohřešků se webmasteři nejčastěji dopouštějí.
Ve svých recenzích webových stránek se – kromě jiného – zaměřuji na technické provedení, kde často kritizuji chyby a nedostatky. Pojďme se tedy společně podívat na to, jakých prohřešků se webmasteři nejčastěji dopouštějí.

Chybějící alternativní texty pod obrázky
Jistě se najde nemálo uživatelů (především s pomalým modemem), kteří mají v rámci zrychlení přenosu vypnuto zobrazování obrázků. Stejně tak existují i uživatelé používající textové browsery, které prostě grafiku ignorují. Pokud pak takový uživatel narazí na stránku, kde je navigace řešena obrázky bez alternativního textu, má dvě možnosti: buď postupně klikat na všechny odkazy a čekat, kam ho příslušný link zavede, nebo (a to je častější případ) ze stránek odejde. Přitom stačí pouze do tagu IMG přidat parametr ALT, který bude obsahovat stručný popis obrázku nebo jeho funkce, a zobrazí se jak v prohlížečích s vypnutou grafikou, tak v prohlížečích, které grafiku neumí. Neuvedení alternativního textu lze považovat za bezohlednost, protože ne každý používá některý z komerčně úspěšných browserů a vlastní rychlé připojení k Internetu.

Definování velikostí
Určíte-li velikost obrázku (provádí se to parametrem WIDTH a HEIGHT), prohlížeč si nejdříve vyhradí pro obrázek patřičné místo a po natažení textu postupně doplní všechny obrázky. V opačném případě si prohlížeč musí příslušný obrázek nejprve celý stáhnout, pak připravit na stránce potřebné místo (tím text "odskočí", což rozhodně není příjemné, pokud se návštěvník právě pustil do čtení) a teprve poté jej zobrazí. Stejně tak je vhodné definovat (alespoň procentuálně) velikost tabulek, protože se tím zvyšuje rychlost zobrazení.

Rámy
Hromadnější nástup stránek s rámy se datuje někdy od roku 1996. Tato technologie dovoluje například využít část okna prohlížeče pro navigační lištu obsahující důležité odkazy, a v druhé části zobrazovat jednotlivé stránky. Rámy ale mají několik nevýhod:
  • Průměrný uživatel si neumí takové stránky uložit na disk k off-line prohlížení (pokud například v MS Internet Exploreru verze 4.0 zvolí standardní postup – tedy Soubor-Uložit, uloží si pouze soubor informující o rozložení rámů v okně browseru, nikoli však vlastní obsah, o který mu jde v první řadě).
  • Protože se místo jedné stránky natahuje ze serveru hned několik stránek (zpravidla tři nebo čtyři), klesá rychlost natahování. Nejdříve se totiž natáhne stránka s informacemi o rozložení rámů, následně pak stránky s obsahem, přičemž každá stránka má většinou stejný začátek i konec (definice barvy pozadí, hyperlinků, označení hlavičky a těla stránky...), takže se všechny údaje musí natahovat několikrát.
  • Často se zapomíná na návštěvníky, kteří používají prohlížeč, jenž nepodporuje rámy. Takových je sice relativně málo, ale jde-li nám o každého potenciálního čtenáře, neměli bychom zapomínat na variantu bez rámů. To lze provést velmi jednoduše tagem NOFRAMES, v němž nabídneme uživateli bezrámovou variantu. Narazil jsem dokonce na stránky, které v okamžiku, kdy prohlížeč neuměl rámy, nabídly pouze stažení nejnovější verze MSIE nebo NN, což lze považovat za drzost a lajdáctví (stahovat 70 MB jenom kvůli jediným stránkám je přece jen trochu silná káva).
Vždy se nejprve zamyslete nad tím, zda by se vaše stránky nedaly udělat bez rámů. Jistě přijdete na to, že dosáhnout stejného efektu lze i bez této vymoženosti (kterou navíc nedoporučuje ani organizace W3C stanovující normy HTML). Dobrým důkazem mého tvrzení o zbytečnosti rámů budiž fakt, že všechny významné servery u nás i ve světě rámy nepoužívají.

Používání nenormovaných tagů
Normy HTML stanovuje organizace World Wide Web Consortium. Kromě tagů uvedených v těchto normách, které by měl znát (nebo mít alespoň při ruce) každý, kdo se chystá vystavovat své dokumenty na Internetu, existuje řada tagů, které si přidali výrobci internetových browserů (především Microsoft a Netscape/AOL). Tajně doufají, že právě jejich rozšíření bude v příští normě uznáno a že jej začnou podporovat i výrobci ostatních prohlížečů. Nevýhodou je, že příslušné rozšíření obvykle podporuje výhradně a pouze jediný prohlížeč a ostatní programy tyto tagy ignorují. Příklady některých často používaných nenormovaných tagů:
  • LEFTMARGIN, TOPMARGIN, RIGHTMARGIN, BOTTOMMARGIN – toto nastavení odsazení okrajů stránky podporuje pouze MS Internet Explorer, takže v Netscape Navigatoru budou stránky odsazeny tak, jako kdybyste příslušné parametry neuvedli. Nejde o podstatnou chybu, ale chcete-li, aby návštěvníci viděli vaše stránky bez ohledu na použitý program stejně, neměli byste tyto tagy používat.
  • BGSOUND – hudba na pozadí stránky může sice působit zajímavě, ale zbytečně zvyšuje dobu nutnou k natažení stránky a v případě odborněji zaměřených stránek působí nevhodně (neřkuli přímo komediantsky). Tag BGSOUND navíc podporuje výhradně Internet Explorer, takže uživatelé Navigatoru budou o zvukový zážitek ošizeni. Jestliže se nemůžete zvukového doprovodu svých stránek vzdát, použijte raději tag EMBED, který podporují oba prohlížeče (podrobný návod můžete najít v článku Jak dostat MIDI do www stránky).
  • MARQUEE – rolující text. Opět se jedná o rozšíření, které přinesl Microsoft. Pominu-li fakt, že rolující text nevypadá na solidních stránkách dobře, pak nemohu neupozornit na to, jak vypadá podání tohoto elementu v Netscapu nebo Opeře (máte-li na svých stránkách tuto "vymoženost", zkuste se na ně podívat něčím jiným než Explorerem – určitě se vám zježí vlasy na hlavě).
  • SPACER – určení volného místa. Podporuje výhradně Netscape Navigator, uživatelé MS Internet Exploreru budou mít stránky "rozházené". Pokud potřebujete přesněji umístit objekty na stránku, je vhodnější použít "neviditelné tabulky".
Podobných tagů je mnohem více, přitom zpravidla pouze duplikují nebo mírně rozšiřují jiný normovaný tag. Chcete-li tato rozšíření používat za každou cenu, připravte alternativní stránku pro uživatele používající jiný prohlížeč. K dispozici jsou dvě cesty: buď návštěvníka automaticky nasměrujte podle zjištěného browseru na příslušnou stránku, nebo alespoň umístěte odkaz vedoucí na stránku bez příslušných rozšíření. I když většina českých uživatelů používá Internet Explorer 4.0 nebo 5.0, neměli byste diskriminovat ty, kteří z nějakého důvodu používají třeba Navigator, Operu nebo DOSovský Arachne.

Grafika
Grafika na webových stránkách trpí třemi nešvary:

Stránky působí neesteticky

Pokud sami nepatříte k umělecky nadaným jedincům, nesnažte se udělat ze svých stránek umělecké dílo (návštěvníci stejně poznají, co dělal amatér a co profesionál). Buď grafické prvky využívejte jen minimálně, nebo si objednejte vytvoření layoutu u nějaké firmy (přijde vás to sice na pár stovek, ne-li tisíc, ale výsledek bude jistě stát za to). Dávejte si také pozor na používání volně dostupných grafických prvků (tlačítek, ikonek, pozadí, ...), které si můžete stáhnout z internetových galerií. Pokud návštěvník narazí na vašich stránkách na ikonku "mailme", kterou viděl už na deseti jiných webech, jistě si pomyslí, že "ta grafika vypadá pěkně lacině".

Používání nevhodných formátů

Prvním důležitým krokem při výběru grafiky je formát. Zjednodušeně řečeno se dá říci, že pokud potřebujete více barev a nezáleží na přesnosti (např. chcete-li vystavit své fotografie z dovolené), měli byste použít JPEG, naopak potřebujete-li větší přesnost a méně barev, vystačíte s formátem GIF (ten je vhodný zejména pro screenshoty obrazovky). Možná se ještě uchytí formát PNG, který kombinuje vlastnosti JPEG a GIFu, ale zatím jej nelze doporučit, protože jeho zobrazení zvládnou pouze některé browsery.

Příliš mnoho grafiky

Na Internetu lze najít mnoho stránek, kde je množství grafiky srovnatelné s množstvím atrakcí na Matějské pouti. Jestliže nejsou obrázky optimalizované, může se klidně stát, že návštěvník po půlminutě čekání prostě a jednoduše odejde jinam. Obrázky lze optimalizovat například redukcí barevné palety (na to je vhodný zejména GIF, kde můžete zcela přesně nadefinovat počet barev od 1 do 255, u JPEGu je počet barev omezený na mocniny čísla 2). Nezapomínejte také na rozměry obrázků – pokud například chcete udělat "galerii" obrázků své oblíbené herečky, vytvořte si náhledy v menším rozlišení s nižším počtem barev a původní obrázek návštěvníkovi předložte pouze v případě požadavku (kliknutí).

Velikost grafiky můžete velmi výrazně snížit pomocí programů, které zvolí optimální poměr komprese a kvality (například ULead SmartSaver nebo JPEG Optimizer).

Pamatujte si základní pravidlo, že někdy méně může znamenat více a u grafiky na Internetu to platí dvojnásobně – mnohdy dosáhnete stejného nebo lepšího výsledku vhodně zvoleným formátováním textu, přitom rychlost natažení stránky může vzrůst i několikanásobně!

Kombinace barev

Na mnoha stránkách můžete narazit na doslova šílené barevné kombinace textu a pozadí (například červené písmo na černém pozadí, žluté písmo na modrém pozadí atp.). Člověk je od dob vynálezu knihtisku zvyklý na standardní černé písmo na bílém pozadí, které je vhodné i k publikování na webu. Jiné barvy doporučuji používat pouze ke zdůraznění důležitých pasáží, ale nepoužívejte více než čtyři základní barvy (webová stránka přece není cirkus, ale dokument).

Neurčení barvy pozadí

Pokud neurčíte barvu pozadí stránky, nastaví si ji prohlížeč sám. Nejčastěji je zvolena bílá, ale v některých prohlížečích (např. "trojková" verze MSIE) to může být šedivá barva, nebo barva, kterou má uživatel nastavenou v systému.

Určení barvy pozadí se provádí v tagu BODY parametrem BGCOLOR (např. <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> pro bílou barvu pozadí a černé písmo).

Neuzavírání párových tagů

Tuto syntaktickou chybu dělají autoři stránek zejména v tabulkách. Uvedou například tučný text tagem <B> a protože uzavřením buňky nebo řádku se ukončí i tučné písmo, neuvedou uzavírací tag </B>. Problém je ale v tom, že v některých prohlížečích se text v následující buňce zobrazí normálním řezem, v jiných ale (logicky) pokračuje tučné písmo až do konce stránky nebo následujícího uzavíracího tagu </B>.

Často se také vyskytují tabulky, v nichž jsou buňky a řádky odděleny pouze uvozovacím tagem <TD> resp. <TR>. Novější verzi MS Internet Exploreru nebo Netscape Navigatoru sice "dojde", že tam, kde začíná nová buňka, končí ta předcházející, starší verze a méně používané prohlížeče však tuto "inteligenci" nemají a tabulku zobrazí nesprávně.

Z hlediska norem HTML je neuzavírání párových tagů chyba, proto byste nikdy neměli zapomínat tento typ tagů uzavírat.

Speciální znaky
Speciální znaky, jako například znak menší než, větší než, copyright, registered atp., by se neměly vkládat do stránky přímo, protože v různém kódování budou vypadat různě (navíc znaky <> jsou určeny k označování tagů, takže se na stránce nezobrazí). Některé nejčastější znaky uvádím v tabulce:
< <
> >
& &
© ©
® ®
« «
» »

Rozměry stránky
Nezapomeňte prověřit, jak vaše stránky vypadají při různém rozlišení obrazovky. Testovat byste měli především nejčastější rozlišení 800x600 a 1024x768. V žádném případě by se nemělo stát, že uživatel bude nucen v rozlišení 800x600 (nebo snad dokonce vyšším) využívat dolní posuvné lišty, aby viděl konce řádků. Takové chyby se může dopustit jen naprostý amatér.

Používání nových technologií a rozšíření
Kaskádové styly

Kaskádové styly přinesly velkou výhodu pro všechny autory webových stránek. Patrně nejlepší je možnost definovat typ písma v externím souboru, což dovoluje změnit například barvu hlavního nadpisu všech stránek úpravou jediného souboru (bez kaskádových stylů byste museli měnit nadpis na každé stránce zvlášť). Neměli byste ale zapomínat na majitele těch browserů, které kaskádové styly nepodporují, a zvolit takové formátování písma, které vypadá dobře i bez stylů.

JavaScript

Stále častěji se můžete setkat se stránkami, na nichž jsou všechny odkazy řešeny JavaScriptem. Co má ale dělat návštěvník s browserem, který JavaScript nepodporuje? Nezbývá mu nic jiného než jít jinam. Proto dobře važte, kde je JavaScript nezbytně nutný a kde se bez něj můžete klidně obejít (určitě zjistíte, že JavaScript můžete v mnoha případech nahradit klasickým HTML). Pokud si prostě nemůžete své stránky bez skriptů představit, zajistěte, aby uživatel s prohlížečem bez JavaScriptu obdržel adekvátní plnohodnotnou stránku (stačí využít tagu NOSCRIPT).

Macromedia Flash

Použitím této technologie můžete dosáhnout velmi efektních a skutečně multimediálních webových stránek. I zde je ale nutné uvědomit si, že ne každý uživatel má nainstalovaný potřebný plug-in pro Macromedia Flash, takže byste neměli zapomenout na alternativní prohlížeče a připravit stránku bez tohoto rozšíření (dobrým příkladem budiž web FTV, špatným pak stránky rádia Vox, kde si bez plug-inu ani nekliknete).

Ostatní nové technologie

Nikdy nezapomínejte na to, že většina uživatelů Internetu nemá software podporující nejnovější technologie a rozšíření. Proto vždy pečlivě zvažte, zda je použití například Javy nezbytné, a především nezapomeňte připravit alternativní stránky pro ty, jejichž software si s těmito novinkami neporadí.

Čeština
V rámci "amerikanizace" se do českého jazyka postupně dostává řada anglických slov – jistě také nepoužíváte obrat "pošlu ti to elektronickou poštou", ale "majlnu ti to". V soukromé diskusi jsou tyto obraty celkem v pořádku, ale na webu, kde prezentujete svá dílka celému světu, byste si měli dávat na správnou češtinu dobrý pozor. Kromě chyb v pravopisu a větné skladbě je také módní míchat češtinu s angličtinou, takže například narazíte na česky psané stránky, kde se na vás zubí ikonka nadepsaná Index (proč ne Obsah?), Gallery (proč ne Galerie?) nebo Links (proč ne Odkazy?). Na případného návštěvníka to jistě nebude působit dojmem světovosti (tím spíše nebude-li umět anglicky), ale bude to spíš vypadat, jako byste celé stránky poslepovali ze zbytků, které jste našli na Internetu. Píšete-li česky, snažte se, aby vaše stránky obsahovaly češtinu, kde to jen jde.

Pamatujte si
Na závěr jenom malou poznámku: pamatujte si, že větičkou Tyto stránky jsou optimalizovány pro... nepřimějete návštěvníka k instalaci příslušného programu, nýbrž mu pouze sdělíte, že nejste schopni vytvořit stránky tak, aby vypadaly dobře ve všech browserech.
Diskuze (23) Další článek: Computer 20/99

Témata článku: Software, Internet, Prohlížeče, Internet Explorer, Programování, Černá verze, Nn, Vhodná technologie, Str, Pomalý modem, Černá barva, Zobrazený prvek, Tvůrce, Vhodný uživatel, Dobrá barva, Vhodný font, Dobrý důkaz, Šedivá barva, Rozšíření, Grafika, Podobný tag, Browser, Naprostý amatér, Chyba, Nevhodný formát


Určitě si přečtěte

Nejlevnější router s Wi-Fi 6 v testu: vážně ještě chcete kupovat routery jen pro 802.11ac?

Nejlevnější router s Wi-Fi 6 v testu: vážně ještě chcete kupovat routery jen pro 802.11ac?

** Otestovali jsme TP-Link Archer AX10, nejdostupnější router s Wi-Fi 6 ** Šetřilo se, ale zatím ty ústupky tolik nebolí ** Pro domácí síťování pohodlná volba, do firmy ale chcete něco lepšího

Tomáš Holčík | 45

10 skrytých nastavení prohlížeče Google Chrome, která se můžou hodit

10 skrytých nastavení prohlížeče Google Chrome, která se můžou hodit

** Prohlížeč Google Chrome ukrývá mnoho zajímavých možností ** Našli jsme deset nejzajímavějších skrytých nastavení ** Můžete si například výrazně vylepšit práci s kartami

Karel Kilián | 18

Zkusili jsme Ryzen 7 4800HS v notebooku Asus: drtí Intel výkonem a umí být potichu

Zkusili jsme Ryzen 7 4800HS v notebooku Asus: drtí Intel výkonem a umí být potichu

** Nové osmijádro AMD pro herní notebooky překvapuje výkonem ** V rámci notebooku ROG Zephyrus G15 umí být tiché i výkonné** Rozhodnou hlavně prodávané konfigurace s lepší grafikou

Tomáš Holčík | 70



Aktuální číslo časopisu Computer

Velký test autokamer

Test ATX skříní

Jak surfovat pohodlně

Sportovní aplikace

Jak funguje procesor