EdookitRodič a žákUčitel
iCanteen obědyJídelníček a online objednání
#

Typografie a tipy pro web

Tady se dozvíte nějaké obecné tipy jak co dělat. Takový drobný návod, ale snad užitečný. Aby byl tento návod co možná nejvíce užitečný je rozdělený na věci obecně o webu, které budou platné pro libovolný systém/framework/služby/cokoliv co používá web, potom věci týkající se Wordpressu a až nakonec věci týkající se této konkrétní šablony… a tedy znalosti využitelné jen v této šabloně a nikde jinde. Na konci článku je pak k nahlédnutý typografie a nastylování všeho co vůbec je možné.

Univerzální rady pro web

HTML standard na kterém stojí web

Každý web je tvořen jazykem HTML5 výjimečně označován také jako "HTML living standard", zajímavé je že presto že existují i jiné standardy jako ISO HTML nebo XHTML a další, všechny dnešní prohlížeče již ignorují volbu těchto standardů a jakoukoliv stránku vykreslí tak jako by byla ve standardu HTML5.

K čemu je to dobré vědět? Jde o to že každá stránka je tedy psána v HTML bez ohledu na to jaký systém ji vytvoří jestli se použije Wordpress, Webnode, FrontPage, zakázkové řešení na míru, … cokoliv. HTML kód je komukoliv viditelný buďto před prohlížečovou funkci "zobrazit zdrojový kód" (CTRL + U) ovšem tento kód může modifikovat na klientu spuštěný Javascript, takže existuje ještě druhá možnost která zobrazí již tento modifikovaný kód pomocí ladícího nástroje DevTools (CTRL + SHIFT + I) a tam záložky "Elements".

Přesto prohlížeč jako kus software stejně dobře umí zobrazit i stránku tvořeno prostým textem (txt formát), PDF, obrázky, XML a další formáty.

Co se na webu stará o vzhled?

Stačilo by říct CSS protože to je jediný jazyk kterým je možné ovlivnit vzhled HTML elementů. Ale s tím souvisí jedna věc která by z jednoduché odpovědi nemusela být zřejmá. A to, že výchozí vzhled kteréhokoliv elementu jde změnit na vzhled jiného elementu. Není tedy možné použít metodu "kouknu a vidím". Důležité je to například u nadpisů (element h1, h2, h3, …). Je možné vytvořit z běžného textu něco jako nadpis stylováním tak, že bude vypadat přesně jako nadpis. Ale jde o velkou chybu tím že nadpisy vhodným elementem hX má význam pro vyhledávače, hlasové čtečky, a další software tím co je a ne jen tím jak vypadá. Vždy je lepší použít pro danou věc vhodný element než stylovat element nevhodný.

Velcí hráči, kteří ovlivňují dění na Internetu, potažmo webu.

Kromě zmíněných webových standardů jsou tu další věci které se nedá ignorovat. V první řadě prohlížeče, ty se snaží implementovat většinu webových technologií ze standardů co možná nejdříve. Ovšem jsou zde k vidění i rozhodnutí nějakou technologii, funkci či chování záměrně neimplementovat a tím pádem se nedá psát web jen podle standardů, ale člověk musí přihlédnout i k tomu že daná věc, (byť podle standardů) není a nikdy nebude v daném prohlížeči fungovat.

Dále pak ale také internetové vyhledávače. Dalo by se to zjednodušit do názvu Google, ale i Seznam má v ČR stále celkem významnou roli. Ale obecně k vyhledávačům… totiž většina návštěv stránek pochází právě z vyhledávačů, průměrně kolem 80% (záleží podle zaměření webu, u firemních stránek spíše méně u stránek jako eshop dokonce více). Proto je důležité dbát i na to co chtějí vyhledávače, přestože to nemusí být ve standardu. A zbavit se představy že uživatel se na webu chová tak že přijde na úvodní stránku a pak postupuje dále. Většina uživatelů úvodní stránku ani neuvidí.

Pojmenovávání

Pro pojmenovávání věcí se ustálily jisté konvence, některé vychází ze standardu, jiné z chování vyhledávačů.

  • Jména souborů (obrázků, pdf dokumentů, …) mohou být ponechány v češtině i s diakritikou a mezerami, systém si s tím poradí, akorát člověk musí počítat s tím, že znaky budou automaticky escapeovány, takže v URL adresách odkazujících na daný soubor nebude něco jako: příliš žluťoučký kůň.jpg ale něco méně přehledného jako: p%C5%99%C3%ADli%C5%A1+%C5%BElu%C5%A5ou%C4%8Dk%C3%BD+k%C5%AF%C5%88.jpg . Technicky žádný problém, jen přehlednosti to nepřidá. Je možné jméno přepsat na něco jako prilis-zlutoucky-kun.jpg , kde už k žádným automatickým přepisům nedojde a takovýto název je tedy přívětivější. Jako znak dělící slova je možné použít znak mínus - případně znak plus + . Ovšem častou chybou bývá použití znaku podtržítka _ . S tím mají problém vyhledávače které slova oddělné podtržítkem vnímají jako jedno slovo.
  • Jména tříd. Tedy konkrétně class atributu libovolného html elementu. Nesmí začínat číslem, jako dělící znak slov není možné použít mezeru, protože právě mezera dělí jednotlivé třídy mezi sebou. Nejvhodnější je použít znak mínus - , ten má ve specifikaci CSS 2.1 selektory schopné s ním nejlépe pracovat. Třídy se dají kromě přímého zápisu v HTML kódu ve Wordpressu psát ještě do políčka nazvaného "Další třída CSS", to bývá k nalezení v pravém sloupci vedle obsahu, většinou pod nadpisem "Pokročilé". Třídu není možné nastavit úplně každému typu Wordpress bloku, ovšem je možné ji nastavit každému HTML elementu. Tato šablona je ale stavěna tak aby použití tříd nebylo potřeba vůbec, nebo jen minimálně.

Wordpress tipy

Tyto věci se obecně týkají Wordpressu a jsou to tedy informace které je možné získat libovolně na webu. O Wordpressu bylo napsáno spousty článků, všechny jejich informace jsou tedy stejně platné a užitečné (pokud nejde například o velmi starý článek popisující nějakou starší verzi Wordpressu). Je velmi pravděpodobné že zkušení uživatelé Wordpressu budou klíčové funkce umět popsat a vysvětlit lépe než já.

Na první pohled vidím divné… motto. Další web používající Wordpress

Vedle loga se vypisuje jakési "motto" webu, ve výchozím stavu jde o text "Další web používající WordPress". Pokud máte nějaké motto, tak tento text se přepíše přes volbu "Přizpůsobit" z náhledu webu oprávněným přihlášeným uživatelem. Případně v administraci v Nastavení -> Základní nastavení -> Popis webu . Pokud nevíte jaké motto nebo co tam napsat, nepište nic. Není to nezbytné. Dříve bylo motto webu vyžadováno různými službami, ale asi všechny už od toho ustoupily. Teď je to spíše ze zvyku.

Výchozí Wordpressí editor, proslulý Gutenberg

Wordpress umožňuje mít pro tvorbu obsahu více různých editorů. Základní je ale Gutenberg, což je editor typu WYSIWYG, tedy něco jako vizuální, obsah se při editaci snaží vypadat tak jak má být zobrazen při prohlížení návštěvníkem. Málokdy se při tvorbě obsahu využívá přímý zápis v HTML, přestože to možné je, přepnutím Gutenbergu či jiného editoru. I když na popularitě nabírají i jiné zjednodušené typy editorů jako je Markdown, implementovaný oblíbenými službami jako Facebook, Github a mnoha dalšími.

Co je tedy dobré vědět při používání Gutenbergu?

Bloky. Gutenberg používá bloky. Tohle je hodně důležité protože každý blog má speciální chování, i obyčejný textový blok vytvoří odstavec (html element p). Takže větší kus textu je lepší rozpustit do několika odstavců, než mnoho řádků v 1 odstavci. Pomůže to i čitelnosti. A text rozdělit pomocí nadpisů (blok nazvaný "Nadpis" a jsou tam elementy typu h1, h2, h3, …). Opět pomůže to čitelnosti, ale i dohledatelnosti ve vyhledávačích, snazší orientaci v textu speciálním softwareovým čtečkám (typicky čtečka pro nevidomé, slabozraké, …). Jak se pozná blok? Například pokud najedete plovoucí sloupeček ovládacích prvků pro text (většinou nad textem na kterém je umístěn kurzor), a v něm na první tlačítko pro volbu typu bloku, blok se zobrazí ohraničený modrým rámečkem. Hodně nastavení bloku je k vidění v pravém sloupci.

Chci prostě psát, mám použít "příspěvek", nebo založit "stránku"?

Tyto různé druhy obsahu se liší spíše než uložením svým vykreslením. Aby toto dilema nebylo, přidal jsem speciální funkci změny příspěvku na stránku a opačně, kterou je možné použít kdykoliv. Najdete ji na výpisu příspěvků/stránek pod odkazem "rychlé úpravy".

Úpravy v aktuálním náhledu

Tak se nazývá funkce Wordpressu kde je možné měnit nastavení různých věcí a v reálném čase vidět změny. Dá se spustit více způsoby, vždy musí být oprávněný uživatel přihlášený a poté buď z administrace se jde cestou "Vzhled" -> "Přizpůsobil". Případně z webu v horním Wordpressím proužku odkaz "Přizpůsobit". Tato šablona umožňuje měnit některé nastavení právě touto funkcí aktuálního náhledu. Jde o hned první položku menu.

Widgety

Opomíjená, ale důležitá funkce Wordpressu jsou Widgety. Tyto widgety pracují se šablonou, takže každá šablona má jiné množství widgetů na jiných místech. V tomto případě existují widgety pro postranní sloupec u hlavního obsahu. Nebo užitečný widget pod obsahem příspěvku / stránky. Pokud tedy potřebujete například vložit stejný text pod každý z článků (příspěvků), je lepší to udělat pomocí Widgetu než kopírovat a vkládat stejný text do obsahu. Jednak je to jednodušší a také pokud například v budoucnu bude potřeba všechny tyto texty současně přepsat, ve widgetu se to provede na 1 místě, není tedy potřeba manuální upravovat každý z velkého množství článků.

Widgety je možné spravovat 2 různými způsoby. Jeden je v administraci pod menu položkou Vzhled -> Widgety. Druhý způsob je "v aktuálním náhledu" webu, kde (oprávněný uživatel musí být přihlášen) tlačítkem "Přizpůsobit" v horní liště a v nově zobrazeném sloupci menu potom položka Widgety.

Úvodní stránka

Co má být na úvodní stránce a případně která ze stránek to má být se nastavuje v Nastavení -> Zobrazování -> Na úvodní stránce zobrazit . Ve výchozím nastavení Wordpress zobrazuje nejnovější článek, což je vhodné pro blog, většinu už ne pro prezentační weby. Takže se tam dá zvolit některá z již existujících stránek. Tato stránka je pak navíc v administraci stránek identifikována šedým textem "Úvodní stránka" na přehledu stránek.

Menu

Meníčka jsou podobné Widgetům, také se dají vložit na k tomu určené místo, nebo na místo widgetu. Ve zkratce: Menu se dá umístit do prostoru menu či prostoru widgetu, ovšem widget do prostoru menu natlačit nejde. V této šabloně jsou 2 prostory pro menu a to horní menu v hlavičce a spodní menu v patičce. Položkou menu může být hodně druhů záznamů. Rubrika, Stránka, Příspěvek, Odkaz, … . Meníčka se nastavují v administraci ve Vzhled / Menu. V této šabloně jsou menu schválně omezeny na 2 úrovně, více druhů zanoření působí zmatek a velmi špatně se ovládá na dotykových zařízeních, tabletech a mobilech. S množstvím položek menu a množstvím zanoření se to nesmí přehánět :)

"DOMDocument template" šablona

Tato šablona má různé speciality oproti běžnému wordpressu, které by zmizely při případném použití jiné šablony. Jde většinou jen o drobnosti, ostatně nesnažil jsem se zabránit možnosti šablonu vyměnit, ale některé funkce jsou prostě funkce šablony, vázané na šablonu a ne funkce Wordpressu.

Obecně je tu důraz na responsivitu, aby se web zobrazoval odpovídajícím způsobem na různých šířkách displeje koncového zařízení. Ať už mobilní telefony, tablety, notebooky, nebo velké obrazovky desktopových počítačů. Dále pak sémanticky popsat data ( pomocí HTML microdata a slovníků ze schema.org ) což usnadní pochopení obsahu jak internetovým vyhledávačům, tak různým nástrojům a službám pracujících s obsahem. Taktéž je v šabloně kladen důraz na přístupnost a usnadnění používání webu jak z klávesnice, tak hlasovými čtečkami, pomocí standardu WAI-ARIA 1.0 .

Seznam speciálních funkcí šablony

Možnost změnit stránku na příspěvek a příspěvek na stránku

Jak již bylo zmíněno výše, kdykoliv je možné přepnout typ příspěvku. Tato funkce je k nalezení na výpisu příspěvků/stránek pod odkazem "rychlé úpravy".

Několik typů šablon stránek

To zní trochu nejednoznačně, ale jde o různé typy zobrazení obsahu stránky. Tímto je možné zvolit například jestli stránka má nebo nemá obsahovat pravý sloupec. Tato volba je k dispozici během editace obsahu (jak příspěvku tak stránky) v pravém sloupci pod nadpisem "vlastnosti stránky", případně "vlastnosti příspěvku" a jde o select "Šablona".

Speciální vizuální grafický styl stránek/příspěvků

Taktéž, během editace obsahu (jak příspěvku tak stránky) v pravém sloupci úplně na konci je multi select nadepsaný "Nastavení grafiky".

Obrázek na výpisu stránek/příspěvků

Za radiem pro volbu příspěvků/stránek na hromadné akce se zobrazuje zmenšenina hlavního obrázku příspěvku. Tento vyšší důraz na obrázky pomůže už z výpisu pohledem rozpoznat kde obrázek je a kde schází. Obrázky výrazně pomůžou při sdílení obsahu na sociální sítě (Facebook, Twitter, …)

Klonování stránek/příspěvků

Pro snazší tvorbu nového obsahu je v administraci klonovací funkce. Najdete ji pod názvem stránky nebo příspěvku. Jednoduše vytvoří duplikát obsahu i s metadaty, jediný rozdíl bude v tom že nový obsah nebude publikovaný, ale bude pouze jako koncept. A stejná bude i výchozí URL adresa, co už si případně Wordpress umí ohlídat sám a při publikování takového konceptu by přidal na konec URL adresy číslo. Samozřejmě je lepší URL adresu změnit buďto jednoduše změnou nadpisu (což při publikování vytvoří novou URL adresu vycházející z nadpisu), nebo přímo přepisem URL adresy (ať už té u původního příspěvku který byl klonován, nebo u nového klonu).

Proužek s logy partnerů a sponzorů

Speciální typ Widgetu, do kterého pokud se vloží galerie, tak se vykreslí unikátním způsobem. Konkrétně tak že obrázky se zarovnají podle výšky (stejné výšky obrázku). A pole "Titulek… " pokud obsahuje absolutní URL adresu se použije jako odkaz právě na proklik daného loga. Loga bez vyplněného titulku (případně s titulkem který není absolutní URL) budou bez odkazu.
Nastavení galerie "velikost" je v tomto kontextu celkem důležité. "Střední" / "Velká" jsou velikosti ikonek velikost souboru s obrázkem se přepočítá automaticky. Poměr stran zůstane zachován, aby nedocházelo k deformacím. Nechat to na automatice ale vždy nemusí být nejpřesnější, proto volba "Původní velikost" vykreslí obrázky přesně v tom rozlišení ve kterém byly nahrány.

Odkazy na tlačítka, grafické zjednodušení

Pro snazší tvorbu tlačítek z odkazů, tedy alespoň vzhledově je možné použít kombinace elementu pro odkaz (a) a v něm zanořeného elementu b nebo i . V HTML tedy něco takovéhoto: <a href="#nekam"><i>rádoby tlačítko<i></a> a výsledkem bude odkaz vzhledově stejný jako tlačítko. Důležité je pořadí, tedy element i nebo b musí být uvnitř odkazu, ne vně. Tento speciální grafický prvek vychází z frameworku mvp.css , abych nevymýšlel kolo. Pokud už jste s ním někdy pracovali… no nepracovali, není moc známý, ale přece.




~ Tento návod zatím není kompletní … doplňuji průběžně, jak mě něco napadne ~






nadpisy

Nadpis typu h1…

ten by se měl v dokumentu vyskytovat pouze 1x, v tomto případě je speciálně formátovaný ten nadepisující článek, tento je už 2x a proto je jinak formátovaný (menší)

Nadpis typu h2

Nadpis typu h3

Nadpis typu h4

Nadpis typu h5
Nadpis typu h6

abbr

HTML

article

HTML Reference


MVP.css works with the following HTML elements:

  • <a> — text links
    • <a><b>, <a><strong> — solid link buttons
    • <a><em>, <a><i> — outlined link buttons
  • <article> — content area with normal styling
    • <article><aside> — text callout
  • <blockquote> — quote callout
    • <blockquote><footer> — quote attribution
  • <body> — default parent element
  • <button> — form buttons
  • <code> — inline code highlighting
  • <details> — default expandable content section
    • <details><summary> — expandable heading
  • <div> — unstyled element
  • <figure> — image callouts
    • <figure><figcaption> — image callout captions
  • <footer> — footer area
  • <form> — small form area
    • <form><input> — short input field
    • <form><label> — form field labels
    • <form><select> — dropdown options container
      • <form><select><option> — dropdown option items
    • <form><textarea> — large input field
  • <header> — content area with centered styling
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> — headings
  • <hr> — horizontal rule (divider)
  • <main> — main content area
  • <mark> — text highlighting
  • <nav> — top navigation
    • <nav><ul> — nav links container
    • <nav><ul><li> — nav link items
    • <nav><ul><li><ul> — nav dropdown container
    • <nav><ul><li><ul><li> — nav dropdown link items
  • <ol> — numbered list container
    • <ol><li> — numbered list items
  • <p> — paragraph tag
  • <pre> — preformatted text
    • <pre><code> — code block
    • <pre><samp> — computer output block
  • <samp> — inline computer output
  • <section> — content area for centered / special content
    • <section><aside> — content card
  • <small> — smaller text
  • <sup> — raised text (notification bubbles)
  • <table> — data table
    • <table><td> — data table cell
    • <table><th> — data table header cell
    • <table><thead> — data table header section
    • <table><tr> — data table row
  • <ul> — unordered list container
    • <ul><li> — unordered list item

Modifying the CSS variables

MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.

Custom styles can be added below the /* Custom styles */ comment at the end of the file.

blockquote

A well-known quote, contained in a blockquote element.

A well-known quote, contained in a blockquote element.

s patičkou

seznamy

ul li

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

ol li

  1. This is a list.
  2. It appears completely unstyled.
  3. Structurally, it's still a list.
  4. However, this style only applies to immediate child elements.
  5. Nested lists:
    1. are unaffected by this style
    2. will still show a bullet
    3. and have appropriate left margin
  6. This may still come in handy in some situations.

seznam definic - dl lt dd

Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.

blockquote

A well-known quote, contained in a blockquote element.

code

řádkový kód

Tady je řádkový kus.kódu() v libovolném jazyce.

blokový kód

<div id="startovac-canvas" hidden></div>
		<script type="module" src="/startovacWidgetic.mjs" crossorigin="anonymous" integrity="sha256-q73cHpbcf4e0R62wubmMCMLnjEpumk/09G1aTxFuRxs="></script>
		<script type="module">
			import { StartovacWidgetic } from '/startovacWidgetic.mjs';
			const projectURL = new URL( 'https://www.startovac.cz/patron/vedator/' ); // váš projekt na Startovači
			const sandboxElement = document.getElementById('startovac-canvas'); // kam se to vykreslí
			new StartovacWidgetic( projectURL, sandboxElement );
		</script>

var

y = mx + b

vstup klávesnice

Klávesa enter umožňuje odeslat formulář Klávesové zkratky jsou složeny z několik kláves současně ctrl + enter je odskok na nový řádek v textarea bez odeslání formuláře

samp

This text is meant to be treated as sample output from a computer program.

tabulka

This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

samp

This text is meant to be treated as sample output from a computer program.

formulářové prvky

samostatné formulářové prvky

Example legend

100

datalist

Jaksik formátované formulářové prvky

Idea

What can you build with MVP.css?

Free ideas below ↓

MVP.css

Prvky předělané na tlačítko

tohle je ve skutečnosti span tohle je odkaz (a)

rádoby tlačítko pomocí elementu a i rádoby tlačítko pomocí elementů a b

Adress element

u toho byl nějaký sémantický chyták, jen už si to přesně nemamatuji… @todo : zjistit o co šlo
Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

details

Some details

More info about the details.

Even more details

Here are even more details about the details.

textové inline elementy

mark

You can use the mark tag to highlight text.

s

Text zastaralý… tedy nahrazený jiným textem. Třeba tímto

del

Text smazaný… bez náhrady.

ins

This line of text is meant to be treated as an addition to the document.

u

This line of text will render as underlined.

small

This line of text is meant to be treated as fine print.

b

Tučný text B-čkem

strong

Tučný text strongem

em

This line rendered as italicized text.

sup

Tento text obsahuje, a to přesně zde text v sup pozici

Obrázky

Obří responsivní obrázek portrait s popisky

alternativní text

titulek obrázku

popis obrázku

Malý obrázek bez popisků

alternativní text

section aside … speciální formátování