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 Marek Blahuš:

Podobné prezentace


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

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

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 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. GRAFIKA #1

6 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 #1

7 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

8 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 #2

9 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í. GRAFIKA #3

10 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 #3

11 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

12 Rozměry obrázků  U každého obrázku uvádějte v HTML kódu jeho rozměry: tedy například:  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 #4

13 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

14 Alternativní text k obrázku  Uvádějte vždy u obrázku alternativní text, který stručně a jasně vystihuje jeho obsah: tedy například: GRAFIKA #5

15 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

16 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: tedy například: GRAFIKA #6

17 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

18 Fonty  Nepoužívejte na stránce více než dva různé fonty.  Používejte pouze běžné fonty: - bezpatkové: - patkové : - neproporicální : GRAFIKA #7

19 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

20 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á: tedy například: GRAFIKA #8

21 OBSAH Nejčastější chyby

22 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

23 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 #1

24 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

25 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“: tedy například:  Nepoužívejte běžící texty. V případě nutnosti je lze nahradit Java appletem. OBSAH #2

26 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

27 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 #3

28 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

29 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 #4

30 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

31 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. OBSAH #5

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

33 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

34 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 #1

35 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

36 Správná struktura HTML  Správná HTML stránka by měla mít asi následující podobu: Titulek Text stránky FUNKČNOST #2

37 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

38 Kódování češtiny  Pro zajištění správného zobrazení znaků s diakritikou použijte:...  Nejčastěji používanými znakovými sadami jsou iso a windows FUNKČNOST #3

39 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

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

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

42 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čí: Odstavec. Další odstavec. a Buňka Další buňka Nový řádek atd. FUNKČNOST #5

43 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. FUNKČNOST #6

44 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 #6

45 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

46 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: Text tedy například: Stránky Marka Blahuše FUNKČNOST #7

47 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í. FUNKČNOST #8

48 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 bez použití JavaScriptu: FUNKČNOST #8

49 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

50 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 #9

51 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

52 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. FUNKČNOST #10

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 Marek Blahuš:"

Podobné prezentace


Reklamy Google