Gratulujeme! Úspěšně jste se přihlásili k odběru novinek Frontend Garden.
Ajaj. Při pokusu o přihlášení k odběru novinek došlo k chybě. Zkuste to prosím znovu.
Frontend Garden
  • Články
  • Slovník nové
  • Instagram
  • GitHub

Jak psát

Soubor doporučení pro autory článků.

Malá sada tipů, jak zajímavý obsah zabalit do atraktivní formy:

  • Věty mohou být krátké a úderné.
  • Struktura, rytmus a členění mezinadpisy pomohou čtivosti.
  • Obrázky a ukázky kódu udělají text poutavější.
  • Tah na bránu, odhození zbytečných odboček a vyústění v pointu zapíší váš článek čtenářům do paměti.

Nebojte se, že třeba dostatečně dobře nevládnete českým jazykem. Každý článek prochází před vydáním revizí, během níž autorům radíme, jak dosáhnout kritérií zmíněných výše. Také o gramatické, pravopisné i drobné stylistické korekce je postaráno ještě před publikováním.

📣
Mimochodem, pokud byste chtěli svoji myšlenku nejprve ověřit — nebo naopak článek dále podpořit —, vždy je možnost čas strávený přípravou zúročit vystoupením s krátkou přednáškou třeba na některé z akcí Frontendistů, kde je o nové přednášející vždycky zájem.

Ilustrační materiál: kód, obrázky, videa

Každý text by měly doprovázet ukázky kódu, ilustrační obrázky nebo videa, které doplní text, upoutají čtenářovu pozornost a podnítí jej k dalšímu čtení.

Kód

Kód je možné do textu vložit dvěma způsoby:

  1. statický blok se zvýrazněním syntaxe,
  2. živá ukázka CodePen.

Pro vložení statické ukázky kódu stačí vložit blok kódu ve formátu MarkDown pomocí ``` a následně zvolit jeden z podporovaných jazyků pro zvýraznění syntaxe.

Pro ukázky na CodePen je možné využít speciální CSS s výchozím základním nastylováním podle designu Frontend Garden. Adresu CSS stačí přidat do nastavení projektu:

https://frontend.garden/assets/built/css/codepen.css

Obrázky

Platí, že čím vyšší rozlišení obrázku, tím lépe. Rastrové obrázky by měly být v retina rozlišení (@2x), pro křivková schémata je zase ideální vektorové SVG.

Pro optimální zobrazení na všech zařízeních jsou ideální obrázky s převažujícím horizontálním rozměrem — tedy jednoduše obrázky na šířku. U přejatých obrázků vždy důsledně prosíme o uvedení zdroje.

Videa

Do článků je možné bez problémů vkládat videa ze služeb YouTube a Vimeo, anebo nahrát max. 50MB soubor s videem ve formátu MP4, případně WEBM (ale pozor na iOS).

Barevnost

⚠️
V případě SVG prosím věnujte pozornost pozadí obrázku, aby byl obsah čitelný i v tmavém režimu (dark mode). Bílé nebo barevné pozadí může fungovat lépe než průhledné.

Autorské obrázky, schémata a infografiky můžete volitelně sladit se značkou Frontend Garden.

Barevná paleta Frontend Garden

Titulní obrázek (cover)

Volitelně je možné ještě více upoutat pozornost přidáním titulního obrázku (coveru), který se zobrazuje v náhledu článku a v záhlaví jeho detailu. Zde je vysoká technická, ale i estetická a kompoziční kvalita nanejvýš důležitá.

Úvodní sekce článku s titulním obrázkem

Titulní obrázek by neměl být výrazně členitý a hlavní objekt by se ve většině režimů zobrazení měl nacházet v jeho pravé polovině, aby text přes obrázek byl dobře čitelný.

Podporované jsou následující režimy zobrazení cover obrázku:

Režim zobrazení Vhodné použití Optimalizace čitelnosti Ukázka
cover pro libovolný obrázek nebo fotografii obrázek je překryt poloprůhlednou vrstvou černé barvy —
cover-precomposed pro vlastní kompozice – maximální možná kontrola nad výsledným zobrazením — ukázka
cover-object-light pro vlastní ilustrace; obrázek má světlý podklad a v pravé polovině má umístěný hlavní objekt v oblasti textu je obrázek překryt světlým přechodem ukázka
cover-object-dark pro vlastní ilustrace, kompozice či fotografie; obrázek má tmavý podklad a v pravé polovině má umístěný hlavní objekt v oblasti textu je obrázek překryt tmavým přechodem ukázka

Ve všech případech je třeba otestovat čitelnost textu na titulním obrázku ve všech rozlišeních, a to jak v náhledu článku, tak v detailu.

Ideální (ale nikoli exaktně nutný) poměr stran titulního obrázku je 2:1. Ideální rozlišení pak přibližně 2000 × 1000 px, resp. 4000 × 2000 px (retina/@2x). Responzivní varianty se generují automaticky a není třeba je ručně připravovat.

Doporučené rozměry a kompozice titulního obrázku článku

Práce s editorem

Manuál editoru Ghost:

Using the Editor in Ghost - FAQ
Ghost has a powerful visual editor with familiar formatting options, as well as the ability to seamlessly add dynamic content.
Ghost Help CenterSarah Frantz

Přehled vybraných komponent dostupných v editoru:

UI
Přehled UI komponent pro vložení do článků a stránek na webu Frontend Garden.
Frontend GardenAdam Kudrna

Nejnovější články

HTML — čtení na 7 min.

Element <dialog>: nevymýšlej znovu modál!

Vídáme je všude. Vyskakují na nás s potvrzením cookies, odesíláme přes ně tweety, otevírají se v nich menu či jenom prostá upozornění. Každý je implementuje po svém, a přitom již dospělo nativní řešení v podobě elementu <dialog>. Pojďme ho poznat společně do hloubky.

  • Tomáš Litera
    Tomáš Litera
WebExpo — čtení na 4 min.

Co nezmeškat na WebExpo 2023 + sleva na vstupenku

Věděli jste, že v Paláci Lucerna mělo být původně hokejové kluziště? A že kůň se svatým Václavem budou v pasáži viset, dokud u nás nebude obnovena monarchie? Na monarchii to zatím nevypadá, ale místo ledu má Lucerna Velký sál, který je i letos hlavním pódiem konference WebExpo. Pozor, už v dubnu!

  • Adam Kudrna
    Adam Kudrna
Co nezmeškat na WebExpo 2023 + sleva na vstupenku
Reportáž — čtení na 4 min.

WebExpo 2022 obrazem

Čtrnáctý ročník vrátil WebExpo do zajetých kolejí. Více než tisíc účastníků, živí přednášející a našlapané party, to vše dalo zapomenout na komplikace uplynulých dvou let.

  • Adam Kudrna
    Adam Kudrna
WebExpo 2022 obrazem

Odběr novinek

Zadejte svůj e-mail a nenechte si ujít další nové články!

Odesláním formuláře souhlasíte se .
Zpracování osobních údajů probíhá za účelem zasílání newsletteru. Můžete se spolehnout, že vaše osobní údaje nebudeme s nikým sdílet. Z newsletteru se můžete kdykoli odhlásit. Stejně tak můžete kdykoli požádat o úplné smazání svých osobních údajů z naší databáze.
Zkontrolujte svoji e-mailovou schránku a potvrďte své přihlášení kliknutím na odkaz.

Všechna témata

  • Bootstrap
  • CSS
  • Design
  • Dokumentace
  • HTML
  • ITCSS
  • JavaScript
  • Kariéra
  • Kvalita kódu
  • Nástroje
  • No-code
  • Přístupnost
  • PWA
  • Reportáž
  • Rozhovor
  • Rychlost
  • Sass
  • Spolupráce
  • Typografie
  • Variable fonts
  • WebExpo
  • ✏️ Napište článek
  • Autoři
  • Cookies
  • Instagram
  • GitHub

Obsah na tomto webu je publikován pod licencí Creative Commons CC BY-NC 4.0.
Frontend Garden vysázel, zastřihuje a okopává (s ♥️) Adam Kudrna.
Založeno v květnu 2019.