Скачать презентацию 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

f4859381728233dc4a0ad27d3c90d72f.ppt

  • Количество слайдов: 54

Marek Blahuš: Nejčastější chyby tvůrců WWW stránek marek@blahus. cz http: //www. blahus. cz/juniorinternet/2003/ Marek Blahuš: Nejčastější chyby tvůrců WWW stránek [email protected] 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 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 Klasifikace chyb • GRAFIKA • OBSAH • FUNKČNOST

GRAFIKA Nejčastější chyby GRAFIKA Nejčastější chyby

GRAFIKA #1 Příliš mnoho grafiky • Webová stránka není umělecké dílo, jde především o 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 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 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 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ů: 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ů: - 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 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: GRAFIKA #4 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 #5 Alternativní text k obrázku • U obrázku je možné uvést textový popisek, 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ý 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: alternativní text tedy například: logo konference

GRAFIKA #6 Rámečky • U každého obrázku lze nastavit tloušťku rámečku, který kolem něj 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 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: tedy například:

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

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

GRAFIKA #8 Pozadí stránky • Na pozadí stránky lze umístit: – obrázek – jednobarevný 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, 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á: tedy například:

OBSAH Nejčastější chyby OBSAH Nejčastější chyby

OBSAH #1 Vstupní stránka • Vstupní stránka obsahující např. velký obrázek a text „vítejte 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. Ü 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 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 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“: tedy například: Ü 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 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ů 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 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í 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é 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. 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 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 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 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í 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í FUNKČNOST #2 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 #3 Kódování češtiny • Jedním ze základních předpokladů pro úspěšné zobrazení českých znaků 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> FUNKČNOST #3 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-8859 -2 a windows-1250.

FUNKČNOST #4 Znakové entity • Některé speciální znaky, které jsou používány jazykem HTML (menšítko, 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 #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 FUNKČNOST #5 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 Uzavírání párových tagů Ü Uzavírejte všechny párové tagy tak, aby bylo jasné, 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čí:

Odstavec.

Další odstavec.

a
BuňkaDalší buňka
Nový řádekatd.

FUNKČNOST #6 Rámce (framy) • Rozdělení stránky na několik oddělených dokumentů – rámců, přináší 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. 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 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 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: Text tedy například: Stránky Marka Blahuše

FUNKČNOST #8 Zbytečný Java. Script • Java. Script se často využívá i k účelům, 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 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 bez použití Java. Scriptu:

FUNKČNOST #9 Alternativa k Flashi • Použití technologie Macromedia Flash může stránky kompletně znepřístupnit 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 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 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. 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: – 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> Znění přednášky online: http: //www. blahus. cz/ juniorinternet/2003/ Marek Blahuš