Jak vytvářet prezentace HTML s webovými snímky

Ve světě, kde ukázat naše nápady na internetu se stává stále více nezbytným a tam, kde nás rozmanitost nástrojů vedla k vytváření úžasných prezentací, které v mnoha případech končí nepochybně s některými médii nekompatibilní, HTML prezentace v této oblasti budou i nadále univerzální alternativou.

Není však žádným tajemstvím, že vytváření krásných prezentací HTML může trvat dlouho a vyžaduje trochu pokročilé znalosti HTML, CSS a v některých případech i JavaScriptu. Z těchto problémů vyvstává vynikající nástroj zvaný webové skluzavky.

Co jsou to webové skluzavky?

Je to nějak nazvat open source „frameworkem“, vytvořeným Jose Luis Antunez, což nám umožňuje vytvářet HTML prezentace rychle a snadno. Tento nástroj má základní předpoklady pro vytváření vlastních prezentací, stejně tak můžete během několika minut pořídit jednu z ukázkových prezentací a přizpůsobit si ji podle svých představ.

Prezentace HTML, které jsem vytvořil pomocí tohoto nástroje, budou působit esteticky. Stojí za zmínku, že tento nástroj vyžaduje velmi základní znalosti HTML a CSS, takže je ideální pro všechny typy uživatelů, kteří by se měli soustředit pouze na obsah a jen velmi málo na to, jak připravují prezentaci.

Jak stahovat webové stránky?

Chcete-li stáhnout webové stránky, stačí provést následující příkaz z vašeho oblíbeného adresáře:

wget https://github.com/jlantunez/webslides/archive/master.zip

Oficiální úložiště můžete také naklonovat pomocí

git clone https://github.com/jlantunez/webslides.git

Ve složce projektu získáte potřebné soubory js, css a ukázky, abyste mohli snadno vytvářet vlastní prezentace HTML.

Jak používat webové snímky?

Největší výhodou webových snímků je jeho snadné použití, tento nástroj opravdu usnadňuje vytváření prezentací s různými cíli a jeho ukázková řada zrychluje proces vytváření prezentace o velmi vysoké%.

Co dostáváme, když stahujeme webové stránky?

Při stahování webových stránek přistupujeme k různým složkám, které zahrnují ukázky a obrázky (zařízení a loga).

• Složka css uloží styly našich prezentací
• Ve složce js budou uloženy potřebné javascriptové skripty, včetně základního souboru webslide.js, kde se většina magie provádí.
• Obrázky a html soubory ukázek se uloží do složek obrázků a ukázek.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Vytváření prezentací HTML pomocí webových snímků

Při používání webových stránek existují 2 základní výhody, které zmiňujeme níže:

• Kód je čistý a škálovatelný. Zahrnuje také intuitivní označení s použitím nejpopulárnějších nomenklatur. Není třeba používat třídy nebo nadužívání vnoření.
• Každý <section> v #webslides představuje snímek. Takže stránkování je extrémně jednoduché.

Snímek 1  Snímek 1

Stejným způsobem můžeme vytvořit svislé snímky a přidat svislý styl

Třídy, které tvoří CSS webových stránek

• Typografie: .text-landing, .text-data, .text-intro ...
• Barvy pozadí: .bg-primary, .bg-apple, .bg-blue ...
• Obrázky na pozadí: .background, .background-center-bottom…
• Karty: .card-50, .card-40 ...
• Flexibilní bloky: .flexblock.clients, .flexblock.metrics ...

Rozšíření na webové snímky

Webylides nám umožňuje přidat nové styly a funkce, například můžeme přidat některé z následujících zdrojů:

• Unsplash
• animovat.css
• částice.js
• pt

Ukázky prezentace HTML vytvořené pomocí webových snímků

Můžete vidět řadu ukázek prezentací HTML vytvořených pomocí webových stránek zde. Stejným způsobem, když si stáhnete framework, můžete přistupovat ke kódování každého z těchto ukázek.

Jedná se o nástroj, který nám umožní vytvářet prezentace HTML rychle a se skvělými úpravami, ale také nám pomůže zaměřit se na obsah a dosáhnout výsledků, které jsme si dříve nepředstavovali.