Ako vytvoriť prezentácie HTML s webovými snímkami

Vo svete, kde ukážte naše nápady na internete stáva sa čoraz nevyhnutnejším a tam, kde nás rozmanitosť nástrojov viedla k vytvoreniu úžasných prezentácií, ktoré v mnohých prípadoch nepochybne nie sú kompatibilné s niektorými médiami, HTML prezentácie budú v tejto oblasti naďalej univerzálnou alternatívou.

Nie je však žiadnym tajomstvom, že vytváranie nádherných prezentácií vo formáte HTML môže trvať dlho a vyžaduje trochu pokročilé znalosti jazyka HTML, CSS a v niektorých prípadoch aj jazyka JavaScript. Z týchto problémov vyvstáva vynikajúci nástroj tzv tobogany.

Čo sú to tobogány?

Je možné to nejako nazvať „frameworkom“ otvoreného zdroja, ktorý vytvoril Jose Luis Antunez, čo nám umožňuje vytvárať HTML prezentácie rýchlo a ľahko. Tento nástroj má základné predpoklady na to, aby ste si mohli vytvoriť svoje vlastné prezentácie. Môžete si tiež vziať jednu z ukážkových prezentácií a upraviť si ju podľa svojich predstáv v priebehu niekoľkých minút.

Prezentácie HTML, ktoré som vytvoril pomocou tohto nástroja, budú pôsobiť pôsobivo esteticky. Stojí za zmienku, že tento nástroj vyžaduje veľmi základné znalosti HTML a CSS, takže je ideálny pre všetky typy používateľov, ktorí by sa mali sústrediť iba na obsah a veľmi málo na to, ako pripravujú prezentáciu.

Ako sťahovať webové stránky?

Ak chcete stiahnuť webové snímky, stačí vykonať nasledujúci príkaz z vášho obľúbeného adresára:

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

Môžete tiež klonovať oficiálne úložisko pomocou

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

Vo vnútri priečinka projektu získate potrebné súbory js, css a ukážky, ktoré vám umožnia ľahké vytváranie vlastných prezentácií HTML.

Ako používať webové snímky?

Najväčšou výhodou webových prezentácií je ich ľahké použitie, tento nástroj skutočne uľahčuje vytváranie prezentácií s rôznymi cieľmi a jeho ukážková séria urýchľuje proces vytvárania prezentácií o veľmi vysoké%.

Čo dostaneme, keď stiahneme webové stránky?

Pri sťahovaní webových stránok sa dostávame do rôznych priečinkov, ktoré obsahujú ukážky a obrázky (zariadenia a logá).

• V priečinku css budú uložené štýly našich prezentácií
• V priečinku js budú uložené potrebné javascriptové skripty, vrátane základného webslide.js, kde sa vykonáva väčšina mágie.
• Obrázky a html súbory ukážok sa uložia do priečinkov s obrázkami a ukážkami.

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

Vytváranie prezentácií HTML pomocou webových snímok

Pri používaní webových snímok existujú dve zásadné výhody, ktoré spomenieme nižšie:

• Kód je čistý a škálovateľný. Zahŕňa tiež intuitívne značenie s použitím najobľúbenejších nomenklatúr. Nie je potrebné používať triedy ani nadmerne využívať vnorenie.
• Každý <section> v #webslides predstavuje snímku. Takže stránkovanie je mimoriadne jednoduché.

Snímka 1  Snímka 1

Rovnakým spôsobom môžeme vytvoriť vertikálne snímky a pridať vertikálny štýl

Triedy, ktoré tvoria webovú stránku CSS

• Typografia: .text-landing, .text-data, .text-intro ...
• Farby pozadia: .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šírenie na webové snímky

webové snímky nám umožňujú pridávať nové štýly a funkcie, napríklad môžeme pridať niektoré z nasledujúcich zdrojov:

• Unsplash
• animate.css
• častice.js
• pt

Ukážky prezentácie HTML vytvorené pomocou webových stránok

Môžete vidieť sériu ukážok prezentácií HTML vytvorených pomocou webových stránok tu. Podobne, keď si stiahnete framework, máte prístup ku kódovaniu každej z týchto ukážok.

Toto je nástroj, ktorý nám umožní vytvárať HTML prezentácie rýchlo a so skvelými výsledkami, ale tiež nám pomôže zamerať sa na obsah a dosiahnuť výsledky, ktoré sme si predtým nepredstavovali.