Sådan laver du HTML-præsentationer med web-slides

I en verden hvor vis vores ideer på internettet det er blevet mere og mere nødvendigt, og hvor mangfoldigheden af ​​værktøjer har ført os til at skabe fantastiske præsentationer, som i mange tilfælde ender med at være uforenelige med nogle medier uden tvivl, HTML-præsentationer de vil fortsat være det universelle alternativ på dette område.

Men det er ingen hemmelighed for nogen, at oprettelse af smukke HTML-præsentationer kan tage lang tid og kræve noget avanceret viden om HTML, CSS og i nogle tilfælde JavaScript. Fra disse problemer fremkommer der et fremragende værktøj, der kaldes web-dias.

Hvad er web-slides?

Det er at kalde det på en eller anden måde en open source "framework", lavet af Jose Luis Antunez, der tillader os oprette HTML-præsentationer hurtigt og nemt. Værktøjet har det væsentlige for dig at lave dine egne præsentationer, ligesom du kan tage en af ​​demopræsentationerne og tilpasse den efter dine smag i løbet af få minutter.

HTML-præsentationer, som jeg lavede med dette værktøj, vil have en imponerende æstetik. Det er værd at bemærke, at dette værktøj kræver meget grundlæggende viden om HTML og CSS, så det er ideelt for alle typer brugere, der kun skal fokusere på indholdet og meget lidt på, hvordan de forbereder præsentationen.

Hvordan downloades webslides?

For at downloade webslides skal du blot udføre følgende kommando fra dit yndlingsmappe:

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

Du kan også klone det officielle lager med

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

Inde i projektmappen får du de nødvendige js, css og demoer til nemt at oprette dine egne HTML-præsentationer.

Hvordan bruges webslides?

Den største fordel ved webslides er dens brugervenlighed, dette værktøj gør det virkelig nemt at oprette præsentationer med forskellige mål, og dets demoserier fremskynder præsentationsoprettelsesprocessen med en meget høj%.

Hvad får vi, når vi downloader web-slides?

Når du downloader web-slides, får vi adgang til forskellige mapper, som inkluderer demoer og billeder (enheder og logoer).

• Css-mappen gemmer stilarterne for vores præsentationer
• De nødvendige javascripts gemmes i js-mappen, inklusive det grundlæggende webslide.js, hvor det meste af magien udføres.
• Billederne og html-filerne i demoerne gemmes i henholdsvis billed- og demomapperne.

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

Oprettelse af HTML-præsentationer med web-slides

Der er 2 grundlæggende fordele ved brug af web-slides, som vi nævner nedenfor:

• Koden er ren og skalerbar. Det inkluderer også intuitiv markering med brug af de mest populære nomenklaturer. Der er ikke behov for at bruge klasser eller overforbrugslejring.
• Hvert <section> i #webslides repræsenterer det et dias. Så pagineringen er ekstremt enkel.

Skub 1  Skub 1

På samme måde kan vi lave lodrette dias, tilføje en lodret stil

Klasser, der udgør websiderne CSS

• Typografi: .text-landing, .text-data, .text-intro ...
• Baggrundsfarver: .bg-primær, .bg-æble, .bg-blå ...
• Baggrundsbilleder: .baggrund, .baggrund-centrum-bund ...
• Kort: .card-50, .card-40 ...
• Fleksible blokke: .flexblock.clients, .flexblock.metrics ...

Udvider til web-slides

web-slides giver os mulighed for at tilføje nye stilarter og funktioner, for eksempel kan vi tilføje nogle af følgende ressourcer:

• Unsplash
• animate.css
• partikler.js
• pt

HTML-præsentationsdemoer lavet med webslides

Du kan se en række demoer af HTML-præsentationer lavet med webslides her. På samme måde, når du downloader rammen, kan du få adgang til kodningen af ​​hver af disse demoer.

Dette er et værktøj, der giver os mulighed for at oprette HTML-præsentationer hurtigt og med flotte finish, men det vil også hjælpe os med at fokusere på indholdet og opnå resultater, som vi ikke forestillede os før.