Články

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).

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 je CSS framework. Umožňuje rychlé formátování HTML stránek za použití responzivního designu. Bootstrap 4 je starší verzí. Aktuální verze je Bootstrap 5. Rozhodla jsem se používat Bootstrap 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.6

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

• Layout: Containers (nastavení základního rozvržení stránky),
• Starter template (základní HTML 5 kostra),
• Grid system: How it works (rozvržení mřížky),
• Images (obrázky), Figures (obrázky s popiskem),
• Spacing (nastavení margin a padding),

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).

HTML entity či HTML symboly jsou znaky, které nejdou nalézt na klávesnici nebo dělají paseku při zápisu do HTML (např. znaky < či >). Do HTML kódu je třeba tyto znaky uvést s & na začátku (např.   pro tvrdou mezeru, < pro <).

Jiří Kosek:  HTML – tvorba dokonalých www stránek

Jiří Kosek dal na svých stránkách plně k dispozici ke stažení knihu HTML – tvorba dokonalých www stránek. Ačkoli jde o vydání z roku 1998, stále tuto knihu považuji za velice vhodnou pro začátečníky. Já osobně jsem na knihách Jiřího Koska „vyrostla“…

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.