Typografické konvence

Na Vedeme.cz používáme určité typografické konvence, které Vám mají usnadnit orientaci v textu. Základní typografie je typografií Bootstrap. Seznamte se s alespoň některými specialitami našeho webu.

Základní styly

Toto označuje varování. Něco, co byste dělat neměli.

Použití: <blockquote class="notewarning">...</blockquote>

Označuje velmi důležitou skutečnost.

Použití: <blockquote class="noteimportant">...</blockquote>

A toto označuje nějaký tip.

Použití: <blockquote class="notetip">...</blockquote>

Otázka ke zvážení.

Použití: <blockquote class="notehelp">...</blockquote>

Poznámka, vsuvka, komentář autora příspěvku k nějaké cizí myšlence, apod.

Použití: <blockquote class="note">...</blockquote>

Použití: <blockquote class="noteinfo">...</blockquote>

Neutrální informace.

Citace nějakého textu.

Autor

nebo také kódově korektnější

A zde je uveden Zdroj citace

Použití: <blockquote class="notequote">...<p><small>A zde je uveden <cite title="Zdroj">Zdroj citace</cite></small></p></blockquote>

Tool tipy

Můžete se také setkat s tzv. tooltipy, na které stačí najet ukazovatelem myši.

Použití: <span class="jcetooltip" title="Demo::Toto je typický tooltip.">text obsahující tooltip</span>

Odkazy

Některé odkazy graficky rozlišujeme. Určitě ty, které vedou mimo Vedeme.cz, jako je například Google.

S jinak označenými odkazy se pojí vyskakovací okna, která mohou obsahovat video, nebo také s obrázek, nebo text a tak podobně.

Obrázek s popiskem

Obrázky s popisky jsou noční můrou webových negurů. Existuje celá řada různých řešení. Web Vedeme.cz používá od roku 2014 HTML5 a bylo by tudíž hříchem nevyužít jeho tagů <figure> a <figcaption>. Používejte třídu: <figure class="fcaption">Vypadají dobře jsou responsivní, sémantický správné a jejich používání je snadné. To, že ve starších prohlížečích se poněkud vizuálně rozpadají, mi (admin Vedeme.cz) nevadí: každý má dnes možnost si zvolit a zadarmo zajistit moderní funkční internetový prohlížeč.

management leadership
Toto je dostatečně dlouhý popisek obrázku na to, aby se pod obrázek s jeho rozměry nevešel.

Pokud je třeba element <figure> obsahující obrázek a popisek na webové stránce vycentrovat, je nutné na onen element použít vlastnost centrování bloku, zde ideálně Bootstrap třídu class="block-center".

Akordion

Pro některé druhy informací je možné s výhodou použít tzv. akordion. Na Vedeme.cz je doporučeno používat jeho bootstrap panel implementaci, kterou lze vidět v následujícím příkladu. Obsah těla panelů může být (téměř) libovolný. Syntaxi neuvádím; zájemci jí mohou odhalit v zobrazení zdrojového textu.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Obrázek experimentu
Obr.: Seligmanův pejsek skáče.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Přidat komentář

Základní pravidla k psaní příspěvků jsou uvedena zde.

Za účelem lepšího uživatelského komfortu, analýz návštěvnosti a čtenosti článků používá Vedeme.cz soubory cookies, které se uloží do vašeho zařízení.

Ještě nemáte účet uživatele? Vytvořit účet

Přihlásit se