Frontend

HTML 5 bylo vydáno v roce 2014 a představuje milník ve vývoji webových technologií. Tento standard díky několiko klíčovým inovacím výrazně změnil způsob jakým se tvoří webové stránky. Nejprve umožnil snadnější integraci multimediálního obsahu – například videí a audia – bez nutnosti použít externí plug-iny, jako byl např. Flash a nové značky jako <video> a <audio> poskytly vývojářům přímý a nativní způsob přehrávání médií přímo v prohlížeči, což zvýšilo stabilitu, bezpečnost i dostupnost obsahu na různých zařízeních.

Open Graph Protocol je otevřený standard pro strukturovaná metadata, který řídí, jak se webové stránky zobrazují při sdílení na sociálních sítích. Jde o sadu meta tagů, které autoři webu umístili mezi tagy v HTML webové stránky které přesně definují, jaký název, popis, obrázek a další informace se zobrazí při sdílení odkazu. Bez Open Graph tagů sociální sítě "hádají" z obsahu stránky - berou první obrázek, úryvek textu nebo název stránky. S Open Graph mají autoři plnou kontrolu nad tím, jak jejich obsah vypadá ve feedech, zprávách a sdíleních.

SMACSS, což je zkratka pro Scalable and Modular Architecture for CSS (Škálovatelná a modulární architektura pro CSS), představuje metodiku a sadu doporučení pro psaní a organizaci CSS kódu. Nejedná se o rigidní framework nebo knihovnu, kterou by bylo nutné stahovat či instalovat. Místo toho SMACSS funguje spíše jako průvodce stylem (style guide), který nabízí flexibilní myšlenkový proces pro analýzu designu a strukturování CSS.

Tento článek se zabývá konvencemi pro pojmenování CSS tříd používanými v rámci systému pro správu obsahu Drupal. Cílem je popsat přístup k používání oddělovačů, konkrétně jednoduché pomlčky (-), dvojitého podtržítka (__) a dvojité pomlčky (--) pro definování struktury a variant uživatelského rozhraní. Dodržování jednotných standardů kódování je v ekosystému Drupalu klíčové, neboť zajišťuje konzistenci kódu napříč projekty, usnadňuje spolupráci mezi vývojáři a zvyšuje dlouhodobou udržovatelnost a čitelnost kódu.

Responzivní webdesign (RWD) představuje moderní přístup k tvorbě webových stránek, jehož hlavním cílem je zajistit optimální zobrazení na široké škále zařízení s různými velikostmi obrazovek a rozlišeními. 

Tento koncept se zaměřuje na to, aby se obsah a struktura webové stránky automaticky přizpůsobily zařízení, na kterém je zobrazena, a to bez ohledu na to, zda se jedná o stolní počítač s velkým monitorem, notebook, tablet, smartphone nebo chytrou televizi. 

Jádrem responzivního designu je myšlenka, že by uživatelé měli mít pohodlný a intuitivní přístup k informacím a funkcím webu bez ohledu na to, jaké zařízení právě používají. To znamená, že se obsah dynamicky přestyluje a mění své uspořádání tak, aby byl vždy čitelný, přehledný a snadno ovladatelný.

Responzivní obrázky představují zásadní součást moderního webového designu. Jedná se o obrázky, které jsou navrženy tak, aby flexibilně upravovaly svou velikost a rozlišení v závislosti na charakteristikách zařízení nebo obrazovky, na které jsou zobrazovány. Tento přístup zajišťuje, že vizuální obsah vypadá ostře a jasně na široké škále zařízení, od kompaktních chytrých telefonů až po rozsáhlé desktopové monitory. Základním principem je poskytování různých verzí téhož obrázku s odlišným rozlišením a následné využití HTML nebo CSS k určení, která verze bude pro dané zobrazení nejvhodnější.

Moderní weby se musejí přizpůsobit různým zařízením, od velkých monitorů po malé mobilní displeje. Klíčovou součástí optimalizace webu je správné použití obrázků, které by se měly automaticky přispůsobit velikosti obrazovky a rozlišení displeje. Tento článek podrobně vysvětluje, jak funguje technologie responzivních obrázků (tedy těch které reagují na velikost zařízení) a jak ji správně implementovat.

WebM je moderní formát videa vyvinutý společností Google, který poskytuje efektivní kompresi při zachování vysoké kvality. Je určen především pro webové prostředí a konkurencí zavedeným formátům, jako jsou MP4 nebo Ogg Theora.

WebP je moderní formát obrázků vyvinutý společností Google, který nabízí lepší kompresi než tradiční formáty jako JPEG a PNG. Díky tomu umožňuje snížit velikost souborů při zachování vysoké kvality, což zrychluje načítání webových stránek a zlepšuje uživatelský zážitek.

Při přípravě obsahu pro webové stránky je důležité používat vhodné formáty obrázků, které zajistí rychlé načítání stránek a zároveň zachovají kvalitu zobrazení. V tomto článku najdete přehled nejpoužívanějších formátů obrázků pro web a doporučení, kdy který formát použít.