Komentáře k článku

Kódujeme drobečkovou navigaci

Drobečková navigace je stále populárnější a ve webdesignérských a UX kruzích se probírá její správný vzhled, umístění a logika. Méně pozornosti se věnuje jejímu kódování, tedy zápisu v HTML. V článku si ukážeme několik možných způsobů vytvoření HTML kódu pro tento navigační prvek.

Zpět na článek

16 komentářů k článku Kódujeme drobečkovou navigaci:

  1. František Kučera

    Drobečky

    Kromě hierarchie může drobečková navigace ještě zachycovat historii (odtud i ten název – uživatel za sebou sype drobečky a pak se podle nich může vrátit zpátky). A tahle posloupnost stránek nemusí odpovídat stromové struktuře webu (na současnou pozici se mohl dostat přes něco jako je symbolický odkaz v souborovém systému). Pak hierarchická drobečková navigace nedává moc smysl a lepší by byl obyčejný číslovaný seznam nebo jen odkazy.

    Hezké je, když vedle je „drobečku“ ještě šipka a ta rozbaluje nabídku dalších položek na stejné úrovni (na desktopu tohle dělá třeba Dolphin nebo Gwenview). Tohle ale kód drobečkové navigace ještě zesložiťuje a na začátku stránky je spousta „balastu“ než přijde na řadu teprve skutečný obsah (např. text článku nebo popis výrobku). Což by tedy šlo nějak ohackovat nebo třeba generovat javascriptem (přeci jen drobečková navigace je něco navíc).

    Taky je otázka, jestli tuhle navigaci vůbec používat – ona je trochu duplicitní s GUI prohlížeče. Pokud se jedná o „historickou“ drobečkovou navigaci, stejnou funkci má tlačítko Zpět v prohlížeči a vedle něj bývá ještě taková šipka, která rozbalí seznam „drobečků“. Výhodou je, že vypadá na všech stránkách stejně (pro uživatele známý ovládací prvek) a autor webu nemusí nic programovat, není to práce navíc. Pokud jde o „hierarchickou“ drobečkovou navigaci, zde se zase (často) duplikuje funkce se strukturou URL – ty drobečky často najdeme v URL oddělené lomítky a některé prohlížeče mají kromě tlačítek Zpět a Vpřed i tlačítko Nahoru, které skočí o jednu úroveň (lomítko) výše (jako by to byla adresářová struktura).

    Kromě toho do hlavičky (X)HTML lze umístit takovéto odkazy:

    <link rel="next" href="ch00.html" title="Předmluva" />

    A prohlížeč (např. Opera) pak tyto odkazy zobrazuje v navigační liště. Jde použít hodně druhů odkazů (titulní stránka, obsah, rejstřík, další, předchozí, nahoru, nápověda, copyright, autor atd.). Sémantika je velmi dobrá (v atributu rel je uveden význam daného odkazu – vztah k aktuální stránce). A taky to není žádná novinka – používalo se to už dávno před tím, něž někdo přišel s nějakým HTML5 :-) Takhle lze popsat hierarchickou strukturu – stránka odkazuje na nadřízený prvek, na dva své sousedy a případně na další stránky.

    1. Martin MalýAutor příspěvku

      Re: Drobečky

      Ale jo, Franto, všichni známe manuál GNU, kde přesně tyhle šipky dopředu, dozadu a o úroveň vejš byly. :) Spíš mě zaujal tvůj optimismus v tom, že „drobečky vidíme v URL oddělené lomítky“. Když odhlédnu od jejich spartánského vyznění a od zpraSEOných URL, tak stejně: Vidíme je tam my, ale – vidí je tam všichni? Vědí všichni uživatelé, co to tam je napsané? Nechovají se někteří náhodou tak, že napíšou URL, co někde vyčtou, do políčka Seznamu a pak klikají a klikají až „na tu svou oblíbenou“? Ti vůbec netuší co to tam je, a upřímně řečeno, kdyby tenhle prvek z navigace zmizel, tak by to zase takové neštěstí nebylo.

  2. Coltcha

    entita šipky

    Obecně se mi nejvíc líbí zápis, který doporučuje Google (plus to samé v HTML5). Zajímalo by mě ale, jestli existuje nějaký doporučený zápis pro šipky mezi úrovněmi – mě teda nejvíc sympatická (rozuměj sématická) připadá → , nicméně dle http://kumpunen.com/?p=125 ji Google asi moc nerozumí… Na spousta webech je vidět » (&raquo) nebo › (&rsaquo) apod, které mi teda vůbec sématické nepřipadají…

  3. Josef Richter

    drobečková navigace je zlo

    možná kacířská myšlenka, ale podle mě se drobečková navigace většinou jen snaží (neúspěšně) zachránit mizernou strukturu webu.

    Těch webů, který by ji skutečně potřebovaly, protože mají mimořádně komplexní strukturu dat je naprosto mizivý procento. Bohužel spousta webařů, a hlavně agentur, berou drobečkovou navigaci jako standardní fíčuru, která tam prostě má být (a která se dá fakturovat).

    Takže pokud máte na webu breadcrumbs, tak je zkuste vyhodit. Pokud se tam bez nich nezorientujete, tak máte blbě architekturu webu. Čest výjimkám :-)

    1. Martin MalýAutor příspěvku

      Re: drobečková navigace je zlo

      Ta kacířská myšlenka (spolu s tím co naznačoval Franta) je zajímavá. Zkusím se podívat, jestli nemáme nějaké výsledky měření pro drobečkovou navigaci. Díky.

      1. Josef Richter

        Re: drobečková navigace je zlo

        Díky, to by mohlo být zajímavý.

        Mimochodem pro ukázku nepříliš elegantně fungující drobečkové navigace nemusíme chodit daleko. Stačí se podívat o pár pixelů výše ;-) Neberte to prosím jako kritiku, Zdroják je důkazem že jde hlavně o obsah, a ten když je kvalitní, tak čtenář ledacos odpustí v UI a grafice.

        Když píšu tuhle odpověď, tak mám breadcrumbs: Zdroják » Značkovací jazyky » Kódujeme drobečkovou navigaci » Názory » Názor » Odpověď. To už je na první pohled celkem zmatený.

        Když čtu samotný článek, tak mám drobky: Zdroják » Značkovací jazyky » Kódujeme drobečkovou navigaci. Budiž. Nicméně tady je zas vidět, že pokud je ta struktura rozumně plytká, tak ty drobky nepotřebuju.

        O kousek níž mám „nálepky,“ což je zase koncept, kterej běží tak nějak paralelně a nezávisle a trochu se to s drobkama bije. A když kliknu na nálepku, tak mi to hodí drobky: Zdroják » Nálepky » HTML. To už musí domotat i zkušeného uživatele :-) Navíc ta kategorizace „značkovací jazyky“ vs. „HTML“ taky ukazuje na spíš volnější slovník bez jasného řádu.

        Takže můj přístup k drobkům:

        1. Snažit se dělat weby co nejplytší. Maximálně 1 až 2 úrovně hloubky. Pro drtivou většinu webů (včetně Zdrojáku) to stačí, zjednodušuje to uživatelovu orientaci a není potřeba „záchranných kruhů“ jako jsou drobky.

        2. Nemíchat drobky a tagy. Buď jedno nebo druhý. Dohromady to většinou moc nefunguje.

        3. Drobky jen v případě, že mám perfektně strukturovanej strom a že ten strom dává smysl a je k užitku. Napadají mě snad jen některé větší eshopy (Zahradní nářadí > Sekačky > Benzínové)

  4. Jiří Kosek

    Podstata

    Otázkou však stále je, proč by se drobečková navigace měla označovat nějak sémanticky. Řekněmě, že obalení do nav má ještě smysl, aby se vědělo co je navigace a nemá se příliš zohledňovat při vyhledávání. Ale ten zbytek je overkill.

  5. Petr Komárek

    Žádná zmínka o labelu/titulku

    Článek je vskutku zajímavý, ale jen nechápu jednu věc. Jak to, že autor ani jednou nezmínil, že by „breadcrumbs“ měli (můžou) obsahovat nějaký titulek/label. Uživatel by měl vědět, kam clická a o co se jedná.

    Já osobně používám následující strukturu:

    <strong>Nacházíte se:</strong> <a href="/">Úvodní stránka</a> » <a href="/clanky/">Články</a> » Titulek článku

    Imho Jelikož drobky, na rozdíl od menu/navigace nejsou seznamem odkazů neměli by ani být v ul ani v ol.

    22. 11. 2010 9:46 redakčně upravil Martin Malý, důvod: HTML formátování
  6. Eric Force

    rovnováha
    Já bych zase řekl, že nic se nemá přehánět. Jen si nemyslete, jsem zastáncem sémantiky, ale musíte si najít tu správnou rovnováhu. Musíte se sami sebe zeptat co vám přinese například ten zápis

      1. Eric Force

        Re: rovnováha

        Tak nevím proč mi to tu zprávu ufiklo, tak tady a znovu :))

        Já bych zase řekl, že nic se nemá přehánět.
        Jen si nemyslete, jsem zastáncem sémantiky, ale musíte si najít tu správnou rovnováhu. Musíte se sami sebe zeptat co vám přinese například ten zápis /ul/ů v /ul/ech… V tomto případě bych neváhal použít klasické /ul/ a možná klidně jak kolega nade mnou jen /a/… Web bude vypadat stejně a kód se bude lépe spravovat a snadněji generovat..

        Další věcí je, že, proč by nemohli na hierarchické uspořádání poukazovat samotné značky > <. Protože pokud ty zařadíte do svého sémantického smýšlení, znamenají menší a větší než, a pokud to spojíme spolu s klasickým /ul/ a vnímáme to jako celek tak to JE vyjádření hierarchie. To je ale spíše filosofičtější otázka.

        Celé to téma mi přijde:“Nemáme do čeho rejpnout, pojďme řešit hlouposti“. Asi něco takového si řeklo W3 Consortium, když začalo vydávat standardy :P

        1. Jiří Kosek

          Re: rovnováha

          Celé to téma mi přijde:“Nemáme do čeho rejpnout, pojďme řešit hlouposti“. Asi něco takového si řeklo W3 Consortium, když začalo vydávat standardy :P

          Doporučuji si podrobněji nastudovat historii webu, důvody vzniku W3C, kdo je členem W3C a technologie, které byly v rámci W3C standardizovány.

          1. Eric Force

            Re: rovnováha

            Neříkám,že jsem odborník, ale tyhle věci jsou mi obecně známé. Ten závěrečný odstavec byl především pokus o vtip. Důvody vzniku W3C jsou samozřejmě opodstatněné, někdo by řekl ušlechtilé, ale způsob realizace má do dokonalosti daleko. Ovšem uvidíme jak na tom budeme až se vydá standard pro HTML 5 a CSS 3, které jsou ale ještě na hony daleko :)

    • mikiqex

      BlindFriendly

      Na WebExpo 2009 jsem s panem Pavlíčkem tuto problematiku řešil a bylo mi doporučeno používat OL-LI.

    • František Kučera

      Google

      Na serveru Interval.cz (hledat např.: site:interval­.cz/clanky/fi­rebug) interpretuje Google drobečkovou navigaci aniž by byla nějak zvlášť vyznačena – v kódu je jen:

      <p class="breadcrumb">
      <!-- Breadcrumb NavXT 3.4.1 -->
      <a title="Přejdi do Interval.cz." href="http://­interval.cz">In­terval.cz</a> &gt; <a title="Přejdi do kategorie Nástroje" href="http://­interval.cz/nas­troje/">Nástro­je</a> &gt; <a title="Přejdi do kategorie Editory a IDE" href="http://­interval.cz/nas­troje/editory-ide/">Editory a IDE</a> &gt; Firebug</p>

      A ještě doplnění: kromě Mikrodat Google doporučuje RDFa.

    Napsat komentář

    Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

    Zdroj: https://www.zdrojak.cz/?p=3371