Marek Blahuš Nejčastější chyby tvůrců WWW stránek marek blahus

Marek Blahuš: Nejčastější chyby tvůrců WWW stránek marek@blahus. cz http: //www. blahus. cz/juniorinternet/2003/

Cíl přednášky • seznámit s nejčastějšími chybami • upozornit na rizika • poradit, jak se jim vyhnout

Klasifikace chyb • GRAFIKA • OBSAH • FUNKČNOST

GRAFIKA Nejčastější chyby

GRAFIKA #1 Příliš mnoho grafiky • Webová stránka není umělecké dílo, jde především o obsah. • Neprofesionální grafika se pozná. • Přemíra grafických prvků ruší při čtení. • Příliš pestránka nevypadá esteticky.

GRAFIKA #1 Příliš mnoho grafiky Ü Zaměřte se na o obsah. Ü Složitější grafiku přenechejte profesionálům. Ü Omezte použitou grafiku jen na to nejnutnější. Ü Držte se jen několika základních barev – prvky spolu musí ladit.

GRAFIKA #2 Originalita není na škodu • Z internetových galerií či jiných webových stránek lze snadno získat již hotové grafické prvky. • Okoukané obrázky vzbuzují špatný dojem.

GRAFIKA #2 Originalita není na škodu Ü Používejte vlastní grafiku nebo si nechte design vytvořit kamarádem či firmou. Ü Při použití obrázků z veřejné databáze dbejte na to, aby nebyly příliš okoukané. Ü Buďte originální – nekopírujte slepě všechno, co právě „letí“. Ü Pozor na copyright!

GRAFIKA #3 Správné formáty souborů • Na webu se používají tři formáty souborů obrázků: – GIF (. gif) – JPEG (. jpg, . jpe) – PNG (. png) • Každý z nich má svá specifika a oblast použití.

GRAFIKA #3 Správné formáty souborů Ü Používejte správné formáty pro správné druhy obrázků: - GIF pro symboly, ikony, tlačítka, kliparty a obrázky do 256 barev; podporuje animace; licencovaný - JPEG pro fotografie - PNG na všechno; méně rozšířený; bez animací, ale nelicencovaný Ü Nepoužívejte formát BMP!

GRAFIKA #4 Rozměry obrázků • Neuvedení výšky a šířky obrázku v HTML stránce zpomaluje její načítání a vyvolává nežádoucí efekty. • Uvedení jiného rozměru než skutečného obrázek vizuálně zmenší/zvětší, ale množství přenesených dat zůstává stejné.

GRAFIKA #4 Rozměry obrázků Ü U každého obrázku uvádějte v HTML kódu jeho rozměry: <img src="…" width="šířka" height="výška"> tedy například: <img src="ji 2003. gif" width="150" height="70"> Ü Náhledy netvořte zadáním menších rozměrů, ale použitím skutečně zmenšené kopie původního obrázku.

GRAFIKA #5 Alternativní text k obrázku • U obrázku je možné uvést textový popisek, který se zobrazí v případě jeho nedostupnosti, vypnutého zobrazování obrázků či po najetí myší nad obrázek. • V textových prohlížečích, které nepodporují grafiku, je tento text zobrazen místo obrázku.

GRAFIKA #5 Alternativní text k obrázku Ü Uvádějte vždy u obrázku alternativní text, který stručně a jasně vystihuje jeho obsah: <img src="…" alt="alternativní text"> tedy například: <img src="ji 2003. gif" alt="logo konference">

GRAFIKA #6 Rámečky • U každého obrázku lze nastavit tloušťku rámečku, který kolem něj prohlížeč vykreslí. • Není jednoznačně definováno chování v případě neuvedení této tloušťky – některé prohlížeče rámeček nezobrazí, jiné ano.

GRAFIKA #6 Rámečky Ü I u obrázků, kolem nichž nechcete mít žádný rámeček, jeho tloušťku uveďte, a to jako hodnotu nula: <img src="…" border="tloušťka rámečku"> tedy například: <img src="ji 2003. gif" border="0">

GRAFIKA #7 Fonty • Při použití více než dvou fontů vypadá stránka nehezky. • Neobvyklý font nemusí být na počítači uživatele přítomen, což může vést k jeho nahrazení jiným fontem či dokonce špatnému zobrazení textu.

GRAFIKA #7 Fonty Ü Nepoužívejte na stránce více než dva různé fonty. Ü Používejte pouze běžné fonty: - bezpatkové: <font face="Helvetica CE, Arial CE, Helvetica, Arial, sans-serif"> - patkové: <font face="Times New Roman CE, Times New Roman, Times, serif"> - neproporicální: <font face="Courier New CE, Courier New, Courier, monospace">

GRAFIKA #8 Pozadí stránky • Na pozadí stránky lze umístit: – obrázek – jednobarevný podklad (zobrazí se v případě, že obrázek na pozadí není definován nebo jej nelze načíst) • Defaultní barva pozadí se liší podle prohlížeče. • Nevhodná volba pozadí stránky může výrazně snížit čitelnost jejího obsahu.

GRAFIKA #8 Pozadí stránky Ü Neumísťujte na pozadí stránky obrázek. Pokud už tak učiníte, tak pouze malý a nekontrastní, aby nesnižoval čitelnost textu stránky. Ü Vždy uvádějte barvu pozadí stránky, i pokud to má být bílá: <body bgcolor="barva pozadí"> tedy například: <body bgcolor="#FFFFFF">

OBSAH Nejčastější chyby

OBSAH #1 Vstupní stránka • Vstupní stránka obsahující např. velký obrázek a text „vítejte na mých WWW stránkách“ nenese žádné důležité informace. • Přenos dat zbytečně zatěžuje linku. • Nutnost „prokliknout se“ ke skutečnému obsahu zdržuje a odrazuje návštěvníky.

OBSAH #1 Vstupní stránka Ü Nepoužívejte na svém webu žádnou takovouto uvítací stránku. Ü Zkuste se vyvarovat také ohraných textů na hlavní stránce jako „Vítejte na mých WWW stránkách…“ či „Dnes je sobota, 8. března 2003. “ Čas a datum má každý uživatel na svém počítači.

OBSAH #2 Zvuky a běžící text • Zvuk přehrávaný během čtení stránky může uživatele rušit, zvláště pokud je přehráván dokola či pokud má uživatel otevřeno více oken a zrovna se věnuje jinému. • Běžící text také rozptyluje uživatele a špatně se zobrazuje jinde než v Internet Exploreru.

OBSAH #2 Zvuky a běžící text Ü Nepřehrávejte v pozadí stránky žádný zvuk. Namísto toho jej můžete nabídnout uživateli ve formě ovladatelného „přehrávače“: <embed src="název souboru"> tedy například: <embed src="znelka. mid"> Ü Nepoužívejte běžící texty. V případě nutnosti je lze nahradit Java appletem.

OBSAH #3 Obrázkové nadpisy • Ozdobný nadpis vytvořený grafickým editorem a vložený do stránky jako obrázek je nepoužitelný: – pro uživatele textových prohlížečů – v případě, že si uživatel uloží zdrojový kód stránky bez obrázků na disk a později si uložený soubor zobrazí

OBSAH #3 Obrázkové nadpisy Ü Abyste se vyhnuli problémům, nepoužívejte obrázkové nadpisy. Obdobných efektů lze dosáhnout obrázkem na pozadí tabulky či pomocí CSS. Ü Pokud opravdu chcete použít obrázkový nadpis, nezapomeňte ho doplnit alternativním textem.

OBSAH #4 Příliš zvýrazněného textu • Zvýrazňování částí textu stránky zvětšuje jeho přehlednost, pokud je ale zvýrazněného textu příliš mnoho, přehlednost to spíše snižuje.

OBSAH #4 Příliš zvýrazněného textu Ü Zvýrazňujte opravdu jen to nejdůležitější. Ü Pro zvýrazňování textu používejte pokud možno pouze jeden řez písma (např. tučné písmo).

OBSAH #5 Výhody CSS stylů • CSS styly oddělují data od popisu jejich grafické reprezentace. • Poslední verze všech běžně používaných prohlížečů už CSS styly dobře interpretují.

OBSAH #5 Použití CSS stylů Ü Používejte CSS styly namísto klasických formátovacích HTML značek. Usnadní vám to následné provádění změn ve stránkách a zmenší to jejich velikost.

FUNKČNOST Nejčastější chyby

FUNKČNOST #1 Příliš velká stránka • Celková velikost stránky včetně všech obrázků by neměla přesáhnout určitou mez (obvykle se uvádí 40 až 60 KB). Velké objemy dat zatěžují linku a uživatel nemusí chtít čekat.

FUNKČNOST #1 Příliš velká stránka Ü Nevytvářejte příliš velké stránky, které se budou dlouho načítat, raději je rozdělte na více menších. Ü U velkých obrázků vložte do stránky náhled a nabídněte odkaz na plnou velikost.

FUNKČNOST #2 Správná struktura HTML • Mnoho HTML stránek na internetu neobsahuje všechny formální náležitosti, což může způsobovat problémy při jejich zobrazování v prohlížeči či zpracování jinými programy nebo vyhledávači. • Takovéto stránky odporují standardu HTML.

FUNKČNOST #2 Správná struktura HTML Ü Správná HTML stránka by měla mít asi následující podobu: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> <html> <head> <title>Titulek</title> </head> <body> Text stránky </body> </html>

FUNKČNOST #3 Kódování češtiny • Jedním ze základních předpokladů pro úspěšné zobrazení českých znaků v HTML stránce je použití příslušného META tagu v hlavičce HEAD. • Bez jeho použití nemusí všechny prohlížeče správně zobrazit znaky s diakritikou.

FUNKČNOST #3 Kódování češtiny Ü Pro zajištění správného zobrazení znaků s diakritikou použijte: <head> <meta http-equiv="Content-Type" content="text/html; charset=znaková-sada"> . . . </head> Ü Nejčastěji používanými znakovými sadami jsou iso-8859 -2 a windows-1250.

FUNKČNOST #4 Znakové entity • Některé speciální znaky, které jsou používány jazykem HTML (menšítko, většítko, uvozovka a ampersand), by se neměly ve zdrojovém kódu HTML zobrazit jinak než ve formě znakové entity. • Nedodržení tohoto pravidla je porušením standardu HTML.

FUNKČNOST #4 Znakové entity Ü Pro zobrazení následujících znaků používejte v HTML tyto entity: < … < > … > " … " & … &

FUNKČNOST #5 Uzavírání párových tagů • Je chybou neuzavírat párové tagy, a to i tagy <p>, <td> a <tr>, jejichž neuzavření prohlížeče i některé editory tolerují.

FUNKČNOST #5 Uzavírání párových tagů Ü Uzavírejte všechny párové tagy tak, aby bylo jasné, kde tag začíná a kde končí: <p>Odstavec. </p><p>Další odstavec. </p> a <table> <tr><td>Buňka</td><td>Další buňka</td></tr> <tr><td>Nový řádek</td><td>atd. </td></tr> </table>

FUNKČNOST #6 Rámce (framy) • Rozdělení stránky na několik oddělených dokumentů – rámců, přináší jak zjednodušení, tak i problémy. • V současné době se již od používání rámců upouští a nedoporučuje jej ani W 3 C.

FUNKČNOST #6 Rámce (framy) Ü Pokud je to možné, nepoužívejte na svých stránkách rámce. Ü Raději využijte modernějšího postupu - „tabulkového designu“ - ve spolupráci se skriptem v jazyce PHP či ASP.

FUNKČNOST #7 Odkazy na cizí stránky • Odkaz na kvalitní cizí stránku umístěný na našem webu z něj může odlákat návštěvníka, který se na náš web již pak nevrátí.

FUNKČNOST #7 Odkazy na cizí stránky Ü Odkazy na jakékoliv cizí webové stránky otevírejte zásadně do nového okna prohlížeče, tak aby váš web zůstal po kliknutí i nadále otevřený. Takový odkaz vypadá takto: <a href="URL" target="_blank">Text</a> tedy například: <a href="http: //www. blahus. cz/" target="_blank">Stránky Marka Blahuše</a>

FUNKČNOST #8 Zbytečný Java. Script • Java. Script se často využívá i k účelům, ke kterým lze stejně výhodně využít i klasických HTML prvků. • Pokud použijete Java. Script, znemožníte prohlížení svých stránek uživatelům prohlížečů, které jej nepodporují.

FUNKČNOST #8 Zbytečný Java. Script Ü Používejte Java. Script pouze tehdy, je-li to opravdu nutné. Např. následující dva kódy slouží ke stejnému účelu: s použitím Java. Scriptu: <a href="javascript: document. forms[0]. submit()"><img src="submit. gif"></a> a bez použití Java. Scriptu: <input type="image" src="submit. gif">

FUNKČNOST #9 Alternativa k Flashi • Použití technologie Macromedia Flash může stránky kompletně znepřístupnit prohlížečům, které nemají instalovaný potřebný plugin, či negrafickým prohlížečům.

FUNKČNOST #9 Alternativa k Flashi Ü Nabídněte k obsahu ve formátu Flash i alternativu v klasickém HTML poskytující alespoň základní informace o vašich WWW stránkách.

FUNKČNOST #10 Optimalizováno pro… • Ikonky a texty typu „Optimalizováno pro…“ či „Best viewed with…“ webu na kráse nepřidají, spíše naopak – říkají návštěvníkovi, že autor webu je líný přizpůsobit své stránky i jiným prohlížečům.

FUNKČNOST #10 Optimalizováno pro… Ü Neumísťujte na své webové stránky takovéto ikonky či texty. Ü Snažte se své stránky tvořit tak, aby byly použitelné a alespoň jejich základní vzhled zůstal zachován i při zobrazení jiným prohlížečem.

Závěr • 23 častých chyb i s návody na řešení • Použité zdroje: – – – Interval (www. interval. cz) Jak psát web (dusan. pc-slany. cz/internet) Kibic (www. vrchlabi. cz/gymnasium/school/kibic) Poeta (www. poeta. cz) Web. Core (www. webcore. d 2. cz) Živě (www. zive. cz)

Znění přednášky online: http: //www. blahus. cz/ juniorinternet/2003/ Marek Blahuš <marek@blahus. cz>