Jakob Nielsen ve svém Alertboxu Avoid Within-Page Links (21. 2. 2006) vysvětluje důvody, proč je špatné používat linkování uvnitř jediné webové stránky. Proč je používání kotev nevhodné?

Odkazování uvnitř jedné stránky (tj. odkaz s odskokem na jiné místo právě otevřené stránky) mate uživatele. Uživatelé si za léta brouzdání na internetu zvykli na následující model chování:

1. Odkaz mě přesune na novou stránku.
2. Stará stránka zmizí.
3. Nová stránka nahradí starou.
4. Vidím horní okraj stránky.
5. Tlačítko Zpět mě vrátí tam, odkud jsem přišel.

Takto skutečně funguje většina stránek. Odkazy uvnitř stránky hned několikrát narušují výše uvedené zvyklosti uživatelů:

• Stránka pouze odskroluje. Uživatel není na nové stránce.
• Stará stránka nezmizí, i když to uživatel očekává.
• Místo přistání na vrcholku nové stránky je uživatel vhozen doprostřed obsahu. Nikde nevidí navigaci, záhlaví okna apod.
• Tlačítko Zpět vrací uživatele jinam než čeká nebo nedělá nic (a uživatel na něj kliká a kliká).

Není všechno špatně

Někdy je obtížné se vnitřnímu prolinkování jedné stránky vyhnout. Zmatení uživatelů je možné zmenšit. Je potřeba dát najevo, že se odkaz chová jinak než obvykle. Uživatelé jsou na to konec konců zvyklí. Typickým příkladem je odkaz typu mailto:. Uživatel ví, že místo nového dokumentu naskočí okno e-mailového klienta.

Pokud je opravdu nezbytné na stránce použít vnitřní odkazy, je dobré doplnit vhodnou informaci, že odkaz směřuje dovnitř právě otevřené stránky. Je možné použít nadpis Na této stránce apod. Vždycky by měl autor zvážit, jestli nebude lepší stránku rozdělit na více samostatných stránek.

Kotvy do jiných stránek

Myšlenka odkazovat na kotvy uvnitř jiných stránek je z mnoha důvodů lákavá. Uživatele to ale mate podobně, jako linkování uvnitř jediné stránky. Sice to mate méně, ale mate to. Správně namítnete, že to mám na blogu podobně, ale naštěstí mám taky odkaz na komentáře a třeba vyhledávače nabízí odskok na samostatnou stránku blogu (tady za mně pracuje SEO).

Vzpomínám si, jak jsem v listopadu 2003 zjišťoval výskyt tagů ve zdrojovém kódu webových stránek. Měl jsem tehdy k dispozici jedenáct set stránek z cache 22 uživatelů.

Pokud Vás zajímá, jak podobná statistika vychází, když se vezme v potaz taková miliarda stránek, tak se podívejte na Web Authoring Statistics od Google. V patnácti kapitolách se mj. dozvíte:

• Ve webových stránkách se nejčastěji vyskytují elementy head, html, title, body, a, img, meta, br, table, td, tr, p, script, div, b, font, link, form, input.
• Nejčastěji se používají třídy (class) footer, menu, title, small, text.

Víc už psát ani nebudu. Raději si přečtěte samotný rozbor.

Souvislosti

• Výskyt tagů
• Výskyt tagů 3

Jaroslav „Dero“ Polakovič se ve spotu W3C, jdi mi s XHTML 2.0 k šípku… bojí, že nám W3C zruší element a.

V připravované specifikaci XHTML 2.0 se chystá doplnění atributu href do dalších elementů. Kodér by pak ušetřil pár znaků, když by třeba chtěl odkazovat přímo z nadpisu:

Proč by ne. Mohlo by to být užitečné. Samozřejmě jen pod podmínkou, když se to podaří rychle implementovat do prohlížečů. Protože je ale doba, než vyšumí staré prohlížeče dost dlouhá, tak tlak na vývojáře nemusí být dostatečný. A dostatečně velký bude asi taky pud sebezáchovy vývojářů, kteří s pochopitelných důvodů nebudou chtít nový postup používat.

Dero se na základě textu this element (myšlen element a) remains for explicit markup of links, though is otherwise identical in semantics to the span element bojí o samotnou existenci elementu a. Text naštěstí neříká nic o tom, že je a zrušené, i když je závěr citované věty hodně nešťastný – element a rozhodně není element bez významu, kterým je span.

Element a nejde zrušit třeba jenom proto, že je odkazů vložených v jiných elementech poměrně málo. Podívejte se na běžnou webovou stránku a srovnejte počet normálních odkazů s odkazy v nadpisech, celých odstavcích nebo řádcích položky seznamu. Áčko prostě do kódu patří.

Na druhou stranu je použití elementu a v HTML dost nešťastné. Klasicky se používá pro odkaz na jiný dokument nebo na jiné místo aktuálního dokumentu. K tomu přibývá a jako označení místa v dokumentu (cíl odkazu za #) – mimochodem není tohle původní význam značky a? To jsou dvě (možná i tři) různé věci, které se W3C snaží postupně osekávat (např. možností odkazovat na id). Snad nevylijí s vaničkou i dítě.

Dušan Janovský právě přesunul informace o Google PageRank na samostatnou stránku webu Jak psát web.

Pro šťouraly, kterým tento spot nic nového nepřináší: užitečná stránka si zaslouží zpětný odkaz a tím pádem i vyšší Google PageRank.

Jak řadit položky navigace stejné úrovně? Podle abecedy nebo podle významu?

Při tvorbě webů často narážím na problém, jak řadit navigaci. Nabízí se dva přístupy k řazení položek navigace:

• Abecední řazení.
• Významové řazení podle důležitosti odkazů a podle ustálených zvyklostí.

Velmi často volím abecední řazení. Prostě jsem zvyklý v nejrůznějších seznamech rychle hledat podle abecedy. Vždycky mi dost silně vadí, když musím přeskakovat. Nevím ale, jestli netrpím nějakou deformací nebo jestli nejsem až příliš zběhlý v používání abecedního řezení. Taky bych řekl, že abecední řazení je lepší pro návštěvníky, kteří ještě dokonale neznají daný web a jeho strukturu a obsah.

Naproti tomu řazení podle důležitosti odkazů uživateli říká, na kterou část webu zaměřit pozornost. Naznačuje strukturu webu. To samozřejmě může být jen sebeklam autora (provozovatele) webu. Uživatelé mohou mít názor zcela jiný.

Horizontální navigace

U horizontální navigace, která je zároveň navigací globální, vnitřní rozpor při řazení jednotlivých položek nemám (aspoň si to myslím). Tam vždycky řadím podle významu nebo podle ustáleného pořadí.

Celý problém kolem řazení navigace může být jenom pseudoproblémem. Použitý způsob řazení samozřejmě vždycky závisí na konkrétní situaci. Jak to vidíte vy?

Pro firemní intranet hledám jednoduchý anketní systém, který by běžel na ASP. Je možné využít MS SQL. Podělíte se o své zkušenosti?

Pár let se chystám, že náš firemní intranet rozšířím o ankety a další interaktivní prvky. Tento týden za mnou přišel uživatel, který by ankety na intranetu rád měl. Proč ne?

Před nějakou dobou jsme spustili nové servery s Microsoft Windows Server 2003 a SQL Server 2000. Postupně na ně převádíme také náš firemní intranet (macek už má přes patnáct set stránek). Co by měl anketní systém umět a jaké by měl mít vlastnosti:

• Napsaný v ASP.
• Data by měl ukládat do MS SQL nebo do textových souborů.
• Měl by být instantní (snadno instalovatelný a spravovatelný).
• Neměl by umožnit opakované hlasování.
• Najednou může být spuštěno více anket.
• Zamykání uzavřených anket (není podmínkou).
• Výsledky hlasování by se měly zobrazit až po odhlasování (není podmínkou).
• Anketní systém by neměl být součástí jiného systému, abych jej nemusel kuchat.
• Mělo by se jednat o volně dostupný anketní systém.

Jak už jsem psal, tak jsem už provedl nějaké googlování a testy, ale rád bych se dozvěděl nějaké zkušenosti od Vás.

Na stránce Focus Slide Navigation se můžete podívat na ukázku dynamického zvýraznění položky menu po najetí myši. Vše je řešeno Javascriptem v kombinaci s čistým (X)HTML a CSS.

Abych se přiznal, tak nejsem příznivcem podobných efektů. Jednak jejich užití může přinést problémy (mně to nefunguje v prohlížečích Firefox 1.5 a Opera 8.5) a potom to není můj styl. Ale třeba se vám to bude hodit.

CSS Menu Generator je webová aplikace, která podle Vašich požadavků vygeneruje CSS a HTML kód menu do webové stránky.

V současné době CSS Menu Generator nabízí 4 typy svisle orientovaného menu s hover efektem. V prvním kroku si vyberete typ menu. Ve druhém pak zadáte šířku menu v pixelech, zadáte barvy menu (k mání je paletka pro výběr barvy), typ písma a texty položek menu a jim náležející URL. V posledním kroku na Vás čeká funkční příklad Vašeho menu a zdrojové CSS a HTML kódy menu.

Aplikace není samozřejmě dokonalá. Počet variant menu je omezený a generátor samozřejmě neposkytuje všechny možnosti, které zná zkušený webdesigner. Výsledný kód taky nemusí každému vyhovovat. Je sice stručný, ale purista by na něm nějaký ten chlup našel. Pro začátečníka může být ale CSS Menu Generator užitečnou pomůckou.

Souvislosti

• List-O-Matic – velmi dobrý nástroj na generování menu.
• Jak-na-menu? List-o-matic!

V článku Microsoft – The Only Ones Following Web Standards! najdete seznam webových stránek počítačových firem a chyb, které na nich našel W3C Markup Validation Service. Pro někoho překvapením může být, že z hlediska validity uspěly na výbornou stránky firmy Microsoft.

Validita po česku

A abych jenom neodkazoval, tak se podívám na některé domácí stránky tak, jak mi příjdou pod klávesnici (opravdu v tom nehledejte nějaký úmysl):

• Seznam.cz – 7 chyb
• Centrum.cz – 6 chyb
• Jyxo – 0 chyb
• Interval.cz – 1 chyba
• Lupa.cz – 0 chyb
• Živě.cz – 53 chyb
• Root.cz – 0 chyb
• Grisoft – 20 chyb
• Alwil Software – 1 chyba
• H1 – 0 chyb
• Dobrý web – 0 chyb
• Microsoft CZ – 9 chyb
• CZilla – 0 chyb
• Bloguje.cz – 0 chyb
• Blog.cz – 0 chyb

Výsledky odpovídají času, kdy byl test prováděn (dnes kolem 20. hodiny).

Abych se přiznal, tak mě výsledky minitestu příjemně překvapily. Oproti minulosti (kdo ještě pamatuje validační války?) se situace výrazně zlepšila (aspoň co se týká testovaného typu webů).

Něco o validitě, abychom si rozumněli

Validní webové stránky jsou takové, které plně odpovídají danému standardu (doporučení). Validita se obvykle ověřuje validátorem. Validátor je nejčastěji webová aplikace, která po zadání adresy dané stránky ověří její validitu. Validátor samozřejmě není neomylný – je to jenom program. Stránka, které je označena jako validní, může obsahovat chyby. To, že je stránka validní neznamená, že je také kvalitní (přesto to o něčem vypovídá).

CSS Working Group vydala 15.12. 2005 další 4 pracovní návrhy (tzv. working draft) připravovaného CSS3:

• CSS3 Advanced Layout Module
• CSS3 module: Cascading and inheritance
• CSS3 module: Multi-column layout
• Selectors