mundana reworked, návody,

Jak se pohodlně čtou dlouhé články

Knihy o CSS a mobilní telefon na pracovním stole.

Tento příspěvek je součástí seriálu, další díly najdete níže v článku.

Krátký text si přečtete odshora dolů a je hotovo. U delšího je to jinak. Chcete vědět, do čeho jdete, chcete přeskočit část, která se vás netýká, a za týden se chcete vrátit k jedné konkrétní pasáži. Tenhle článek je dost dlouhý na to, aby se na něm všechno zmíněné dalo rovnou vyzkoušet.

Je to zároveň jeden z článků, na kterých se šablona Mundana Reworked testuje. Není to tedy jen popis funkcí, ale i jejich živá ukázka. Všechno, o čem se tu píše, si můžete hned ověřit na této stránce.

Obsah

Proč na přehlednosti u dlouhého textu záleží

Když otevřete článek na deset minut čtení, první věc, kterou uděláte, je odhad. Stojí mi to za ten čas? Je to o tom, co hledám? Čím dřív na obě otázky odpovíte, tím větší šance, že zůstanete.

Druhá věc přijde v polovině. Narazíte na část, která vás nezajímá, a chcete ji přeskočit. Pokud vám text nenabídne, kam skočit, začnete rolovat kolečkem a obvykle skončíte někde úplně jinde, než jste chtěli.

A třetí věc přijde za týden. Vzpomenete si, že tu někde byla ta věc s poznámkami pod čarou, ale vůbec netušíte kde. Šablona na všechny tři situace nabízí něco jiného.

Obsah, který se vytvoří sám

Hned pod úvodními odstavci je rozbalovací blok nadepsaný Obsah. Klikněte na něj. Rozbalí se seznam všech kapitol tohoto článku a kliknutím na kteroukoli z nich se přesunete přímo k ní.

Nemuseli jsme ho nikam psát. Šablona si při sestavení webu projde nadpisy v textu a obsah z nich poskládá sama. Když se článek později přepíše, obsah se přepíše s ním a nemůže se rozejít s tím, co je ve skutečnosti v textu.

Kdy se obsah objeví a kdy ne

U krátkého článku by byl obsah k ničemu, takže se nezobrazuje. Hranice je nastavená v konfiguraci webu a ve výchozím stavu platí, že obsah dostane článek se třemi a více nadpisy. Tenhle článek jich má výrazně víc.

Obsah je navíc zabalený v rozbalovacím prvku, takže ve výchozím stavu zabírá jediný řádek. Kdo ho nepotřebuje, přečte ho jako nadpis a jde dál. Kdo ho potřebuje, rozbalí ho jediným kliknutím.

Vnořené nadpisy

Tahle kapitola je nadpis třetí úrovně a v obsahu najdete její odsazení pod nadpisem druhé úrovně, pod který patří. Díky tomu je z obsahu vidět struktura textu, ne jen seznam názvů.

Zkuste si v obsahu najít kapitolu “Co si z toho odnést”, která je úplně na konci článku, a skočit rovnou na ni. Pak se vraťte tlačítkem zpět. To je přesně ten přeskok, kvůli kterému obsah existuje.

Odkaz na jednu konkrétní kapitolu

Najeďte myší na kterýkoli nadpis v tomto článku. Napravo od něj se objeví šedý symbol mřížky. Je to odkaz přímo na tu kapitolu.

Kliknutím se adresa v prohlížeči změní tak, že obsahuje i označení kapitoly. Takovou adresu můžete někomu poslat a jemu se stránka otevře rovnou na tom místě, ne na začátku. Hodí se to, když chcete v delším textu ukázat na jednu konkrétní věc.

Symbol se objevuje jen při najetí myší, aby nerušil při čtení. Na dotykovém zařízení se zobrazí po klepnutí na nadpis.

Kolik času si na článek vyhradit

Nad textem, hned pod jménem autora, najdete tři údaje: kdo článek napsal, kdy vyšel a odhadovanou dobu čtení.

Doba čtení se počítá z počtu slov v článku. Je to odhad, ne měření. Počítá se s tempem, jakým čte běžný čtenář souvislý text, takže u článku plného tabulek nebo ukázek kódu bude odhad mimo. Jako hrubé vodítko ale poslouží dobře.

Pokud se článek po vydání upravoval, objeví se vedle data vydání ještě datum poslední úpravy. U tohoto článku zatím žádné není, protože se od vydání neměnil. Jakmile se změní, přibude.

Poznámky pod čarou

Někdy je potřeba doplnit detail, který by v hlavním textu překážel. Od toho jsou poznámky pod čarou.1

V textu se objeví jako malé číslo. Kliknutím na něj se přesunete na konec článku, kde je poznámka vypsaná celá. A hlavně: u každé poznámky je na konci šipka nahoru, kterou se vrátíte přesně tam, odkud jste odešli. To je ta polovina, na kterou se často zapomíná a bez které jsou poznámky pod čarou spíš trest než pomoc.2

Poznámka může obsahovat i odkaz, včetně odkazu ven z webu.3 Zkuste si proklikat všechny tři poznámky v tomto odstavci a pokaždé se vrátit zpět.

Články, které vás můžou zajímat

Když článek dočtete, obvykle chcete vědět, co dál. Šablona proto sama nabízí další články na stejné téma.

Nabídka se bere z kategorie, do které článek patří. Tenhle je v kategorii Mundana Reworked, takže se nabízejí ostatní články o šabloně. Článek, který právě čtete, se logicky nenabízí.

Kde se nabídka objeví

Nabídka není jen na konci. Šablona ji vloží na tři místa: zhruba do třetiny textu, do dvou třetin a na konec. Důvod je prostý. Čtenář, který článek nedočte, by tu na konci nikdy nedošel, a právě jemu se vyplatí nabídnout něco jiného.

Každá nabídka obsahuje jeden článek, ne celou mřížku. Jedna vodorovná karta přeruší čtení mnohem míň než čtyři karty vedle sebe, a o to tu jde.

U krátkého článku se nabídky do textu nevkládají vůbec a zůstane jen ta na konci. Mezi dvěma nabídkami musí být vždycky aspoň dva odstavce, takže se nemůže stát, že na sebe navazují.

Kam se odsud dá jít dál

Jestli vás zajímá, co šablona umí s obrázky, podívejte se na článek Ukázka práce s obrázky. Jak se na webu hledá a jak funguje navigace, rozebírá Jak najít to, co vás zajímá. A pokud čtete raději na tmavém pozadí, bude vás zajímat Světlý a tmavý režim.

Klikatá ulice v San Francisku lemovaná zahradami, s červeným autem ve svahu.
I obrázek uprostřed dlouhého textu je pauza. Oko si odpočine a text se tím rozdělí na zvládnutelné části.

Jak nadpisy psát, aby k něčemu byly

Všechno popsané výše stojí na jedné věci, kterou šablona udělat nemůže: na nadpisech. Z nich se skládá obsah, z nich vznikají kotvy a podle nich se text dělí na části. Špatně napsané nadpisy tedy nepokazí jen vzhled, ale i funkce, které se o ně opírají.

Dobrý nadpis říká, co v kapitole je, ne co v ní tak nějak zazní. “Jak se vrátit zpátky do textu” je použitelný nadpis. “Pár poznámek” není, protože v obsahu nikomu nic neřekne a v adrese odkazu už vůbec ne.

Druhá věc je délka. Nadpis se objeví v obsahu na jednom řádku, takže dlouhé souvětí se v něm zalomí a přestane se dát přehlédnout. Pár slov stačí.

Kolik úrovní použít

Dvě. Nadpis druhé úrovně na kapitolu a třetí na její část uvnitř. Čtvrtou úroveň šablona do obsahu už nezařadí, protože obsah s trojím odsazením se čte hůř než text, který má shrnout.

A platí jednoduché pravidlo: když je ve druhé úrovni jediný nadpis třetí úrovně, patrně tam nemá co dělat. Dělení má smysl od dvou částí výš.

Pozor na stejné nadpisy

Označení kapitoly, které šablona vytvoří pro kotvu, vychází z textu nadpisu. Dva stejné nadpisy v jednom článku proto dostanou označení, které se liší jen připojeným číslem, a odkaz na ten druhý vypadá nesrozumitelně.

V tomhle článku to vidíte na kapitolách třetí úrovně. Každá má jiný název, i když patří pod různé nadřazené kapitoly a teoreticky by se opakovat mohly.

Co si z toho odnést

Žádná z těchto funkcí není sama o sobě převratná. Dohromady ale dělají rozdíl mezi textem, který se dá dočíst, a textem, který zavřete po třech odstavcích.

Obsah vám řekne, do čeho jdete. Kotvy u nadpisů umožní vrátit se nebo poslat odkaz na jedno místo. Doba čtení pomůže s rozhodnutím, jestli na to teď máte čas. Poznámky pod čarou udrží detaily stranou, aniž by se ztratily. A nabídka souvisejících článků se postará o to, co bude dál.

Autor článku přitom nemusí udělat nic zvláštního. Napíše text, rozdělí ho nadpisy, a o zbytek se postará šablona při sestavení webu.

  1. Tohle je první poznámka pod čarou. Kliknutím na šipku na jejím konci se vrátíte do textu přesně tam, kde jste přestali číst. ↑

  2. Druhá poznámka. Zpáteční šipka je záměrně obyčejná šipka nahoru, a ne vracející se šipka, kterou používá většina generátorů. Ta se totiž na části systémů vykreslí jako barevné emoji a v textu pak nepěkně vyčnívá. ↑

  3. Třetí poznámka, a s odkazem ven: poznámky pod čarou v této podobě pocházejí ze značkovacího jazyka MarkdownJednoduchý způsob zápisu textu, ve kterém se nadpisy, odkazy nebo seznamy píšou obyčejnými znaky. Generátor z něj udělá HTML.Podrobnosti o hesle Markdown, otevře se v novém okně, konkrétně z jeho rozšíření, které používá generátor Jekyll. Tenhle odkaz vede mimo tento web, takže si na něm můžete vyzkoušet i upozornění před odchodem. ↑