Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Nejčastější chyby tvůrců WWW stránek

Podobné prezentace


Prezentace na téma: "Nejčastější chyby tvůrců WWW stránek"— Transkript prezentace:

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

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

3 Klasifikace chyb GRAFIKA OBSAH FUNKČNOST

4 GRAFIKA Nejčastější chyby

5 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á stránka nevypadá esteticky.

6 Příliš mnoho grafiky Zaměřte se na o obsah.
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.

7 Originalita není na škodu
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.

8 Originalita není na škodu
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!

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

10 Správné formáty souborů
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!

11 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é.

12 Rozměry obrázků U každého obrázku uvádějte v HTML kódu jeho rozměry:
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="ji2003.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.

13 Alternativní text k 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.

14 Alternativní text k 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="ji2003.gif" alt="logo konference">

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

16 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="ji2003.gif" border="0">

17 Fonty Při použití více než dvou fontů vypadá stránka nehezky.
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.

18 Fonty Nepoužívejte na stránce více než dva různé fonty.
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 CE, Times New Roman, Times, serif"> - neproporicální: <font face="Courier New CE, Courier CE, Courier New, Courier, monospace">

19 Pozadí stránky Na pozadí stránky lze umístit:
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.

20 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">

21 OBSAH Nejčastější chyby

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

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

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

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

26 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í

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

28 Příliš zvýrazněného textu
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.

29 Příliš zvýrazněného textu
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).

30 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í.

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

32 FUNKČNOST Nejčastější chyby

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

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

35 Správná struktura HTML
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.

36 Správná struktura 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 "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Titulek</title> </head> <body> Text stránky </body> </html>

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

38 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 a windows-1250.

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

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

41 Uzavírání párových tagů
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í.

42 Uzavírání párových tagů
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>

43 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 W3C.

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

45 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í.

46 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>

47 FUNKČNOST #8 Zbytečný JavaScript JavaScript 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 JavaScript, znemožníte prohlížení svých stránek uživatelům prohlížečů, které jej nepodporují.

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

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

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

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

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

53 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) WebCore (www.webcore.d2.cz) Živě (www.zive.cz)

54 Znění přednášky online:
juniorinternet/2003/ Marek Blahuš


Stáhnout ppt "Nejčastější chyby tvůrců WWW stránek"

Podobné prezentace


Reklamy Google