Články

Rozlišení monitorů a mobilů

Datum vydání: 29. 4. 2020

Nejpoužívanější rozlišení displejů 360 × 640

Dle statistik statcounter za období březen 2019 až březen 2020 jsou nejpoužívanějším rozlišením displejů (monitorů – dekstopů, mobilů i tabletů) rozlišení 360 × 640, 1366 × 768 a 1920 × 1080. Všechna rozlišení zachovávají poměr 16 : 9 (resp. 9 : 16).

Praktické rozměry obrázků

Datum vydání: 27. 4. 2020

Přepočítávací koeficient

U obrázků zobrazovaných na webu je vhodné zachovat určité poměry výšky a šířky. Obrázky je nutné ořezat a jejich rozměr patřičně přepočítat. Pro usnadnění této práce jsem zpracovala následující tabulky s vhodnými rozměry obrázků v pixelech při zachování určitého poměru výšky a šířky.

Pří výpočtu rozměru obrázku jsme u webdesignu většinou limitováni šířkou obrázku a patřičně dopočítáme výšku. Pro tyto účely je třeba poměr otočit, aby se nám výška dobře počítala. Vezmeme převrázený poměr, tj. výška : šířka a tímto koeficientem následně násobíme předem zvolenou šířku. Dostaneme tak výšku obrázku.

Bootstrap 4

Aktualizováno: 27. 4. 2020, datum vydání: 25. 4. 2020

Bootstrap je CSS framework. Umožňuje rychlé formátování HTML stránek za použití responzivního designu. Bootstrap 4 je nejnovější verzí. Rozhodla jsem se používat Bootstrap 4 z důvodu, že umí lépe pracovat s obrázky a lépe je roztahovat dle šířky okna tak, jak potřebuji.

Dokumentace Bootstrap 4

Vybírám zde z dokumentace pouze ty části, které často používám:

Parallax web design

Datum vydání: 6. 1. 2017

Parallax design může být vytvořen například pomocí javascriptové knihovny skrollr.js. Pro začátky jde o jednodušší řešení parallaxu. Při použití parallaxu se jednotlivé vrstvy na HTML stránce hýbou při skrolování myší jinou rychlostí a lze tak vytvořit např. 3D efekt.

Skrollr

Skrollr se lze snáze naučit, ale umí toho méně. Podstatně komplexnější knihovna je např. ScrollMagic (viz Skrollr vs ScrollMagic – porovnání knihoven, vítězí ScrollMagic).

Nejčastější HTML entity

Aktualizováno: 12. 11. 2019, datum vydání: 3. 11. 2011

HTML entity, které osobně nejčastěji používám:

ZnakHTML entitaASCII
Český názevAnglický název
& & 38 znak and ampersand
< &lt; 60 znak menší než less-than sign
> &gt; 62 znak větší než greater-than sign

&nbsp; 160 nedělitelná mezera non-breaking space

&thinsp; 8201 zúžená mezera thin space
© &copy; 169 copyright copyright sign
® &reg; 174 registrovaná obchodní značka registered trade mark sign
° &deg; 176 stupeň degree sign
&asymp; 8776 přibližně almost equal to = asymptotic to
± &plusmn; 177 znak plus mínus plus-or-minus sign
· &middot; 183 tečka vprostřed řádku middle dot (Georgian comma, Greek middle dot)
× &times; 215 krát multiplication sign
&ndash; 8211 pomlčka šířky n en dash
&sbquo; 8218 levá dolní jednoduchá uvozovka
(česká levá uvozovka)
single low-9 quotation mark
&lsquo; 8216 levá jednoduchá uvozovka
(česká pravá uvozovka)
left single quotation mark
&bdquo; 8222 levé dolní uvozovky
(české levé uvozovky)
double low-9 quotation mark
&ldquo; 8220 levé horní uvozovky
(české pravé uvozovky)
left double quotation mark
&hellip; 8230 tři tečky (výpustka) horizontal ellipsis (three dot leader)
&euro; 8364 euro euro sign
&larr; šipka vlevo leftwards arrow
&uarr; šipka nahoru upwards arrow
&rarr; šipka vpravo rightwards arrow
&darr; šipka dolu downwards arrow
&sum; 8721 celkový součet (suma) n-ary summation
&minus; 8722 mínus minus sign
&ne; 8800 nerovnost not equal to
&le; 8804 menší nebo rovno less-than or equal to
&ge; 8805 větší nebo rovno greater-than or equal to
&sdot; 8901 matematické krát dot operator

Jak umístit video na web

Aktualizováno: 7. 11. 2019, datum vydání: 1. 3. 2011

Možnosti

Chcete-li umístit video na web, máte například tyto možnosti:

  • Uložíte video přes YouTube. Vaše video je ale nahrané na YouTube a ze svých stránek se na něj pouze odkazujete.
  • Pomocí serveru freevideocoding.com si necháte vygenerovat kód, který následně umístíte do HTML stránky. Bohužel nemáte moc možností, jak výstup upravovat.
  • Umístíte video na své stránky a budete ho přehrávat přes vhodný přehrávač. Můžete použít skvělý návod Jak umístit video na stránku.

Popíši zde ve zkratce třetí možnost.

Další články