Kako narediti HTML predstavitve s spletnimi diapozitivi

V svetu, kjer pokažite naše ideje na internetu postaja vse bolj potrebno in kjer nas je raznolikost orodij pripeljala do neverjetnih predstavitev, ki so v mnogih primerih na koncu nezdružljive z nekaterimi mediji, brez dvoma HTML predstavitve na tem področju bodo še naprej univerzalna alternativa.

Nikomur pa ni skrivnost, da lahko ustvarjanje čudovitih predstavitev HTML traja dolgo in zahteva nekoliko naprednejše znanje HTML-ja, CSS-ja in v nekaterih primerih JavaScript-a. Iz teh težav nastane odlično orodje, imenovano podstavki.

Kaj so spletni diapozitivi?

Temu naj bi rekli nekako odprtokodni "okvir", ki ga je izdelal Jose Luis Antunez, kar nam omogoča ustvarjajte HTML predstavitve hitro in enostavno. Orodje vam ponuja najpomembnejše možnosti za samostojno predstavitev, prav tako lahko vzamete eno od predstavitev in jo v nekaj minutah prilagodite svojim željam.

Predstavitve HTML, ki sem jih naredil s tem orodjem, bodo imele impresivno estetiko. Omeniti velja, da to orodje zahteva zelo osnovno znanje HTML in CSS, zato je idealno za vse vrste uporabnikov, ki bi se morali osredotočiti le na vsebino in zelo malo na to, kako pripravijo predstavitev.

Kako prenesti spletne diapozitive?

Če želite prenesti spletne diapozitive, preprosto izvedite naslednji ukaz iz svojega najljubšega imenika:

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

Uradno skladišče lahko klonirate tudi z

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

Znotraj mape projekta boste dobili potrebne js, css in predstavitve za lažje ustvarjanje lastnih predstavitev HTML.

Kako uporabljati spletne diapozitive?

Največja prednost spletnih diapozitivov je enostavnost uporabe, to orodje resnično olajša ustvarjanje predstavitev z različnimi cilji, njegova demo serija pa zelo hitro pospeši postopek ustvarjanja predstavitev.

Kaj dobimo, ko prenesemo spletne diapozitive?

Pri nalaganju spletnih diapozitivov dostopamo do različnih map, ki vključujejo predstavitve in slike (naprave in logotipe).

• V mapi css bodo shranjeni slogi naših predstavitev
• V mapi js bodo shranjeni potrebni javascripti, vključno s temeljnim webslide.js, kjer je narejena večina čarovnije.
• Slike in html datoteke predstavitev se shranijo v mapo slik in predstavitve.

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

Ustvarjanje HTML predstavitev s spletnimi diapozitivi

Pri uporabi spletnih diapozitivov obstajata 2 temeljni prednosti, ki jih omenjamo spodaj:

• Koda je čista in razširljiva. Vključuje tudi intuitivno označevanje z uporabo najbolj priljubljenih nomenklatur. Ni treba uporabljati razredov ali pretirane gnezditve.
• Vsaka <section> v #webslides predstavlja diapozitiv. Paginacija je torej zelo preprosta.

Diapozitiv 1  Diapozitiv 1

Na enak način lahko naredimo navpične diapozitive in dodamo navpični slog

Razredi, ki sestavljajo spletni CSS

• Tipografija: .text-landing, .text-data, .text-intro ...
• Barve ozadja: .bg-primarni, .bg-jabolko, .bg-modri ...
• Slike v ozadju:. Background,. Background-center-bottom ...
• Kartice: .card-50, .card-40 ...
• Prilagodljivi bloki: .flexblock.clients, .flexblock.metrics ...

Razširitev na spletne diapozitive

webslides nam omogoča dodajanje novih stilov in funkcionalnosti, za to lahko na primer dodamo nekaj naslednjih virov:

• Unsplash
• animation.css
• delci.js
• pt

Predstavitve HTML predstavitve, narejene s spletnimi diapozitivi

Ogledate si lahko vrsto predstavitev predstavitev HTML, izdelanih s spletnimi diapozitivi tukaj. Na enak način lahko med prenosom ogrodja dostopate do kodiranja vsake od teh predstavitev.

To je orodje, ki nam bo omogočilo hitro in z odličnimi zaključki ustvariti predstavitve HTML, pomagalo pa nam bo tudi, da se osredotočimo na vsebino in dosežemo rezultate, ki si jih prej nismo predstavljali.