Paano gumawa ng mga HTML na pagtatanghal sa mga webslide

Sa isang mundo kung saan ipakita ang aming mga ideya sa internet Ito ay naging lalong kinakailangan at kung saan ang pagkakaiba-iba ng mga tool ay humantong sa amin upang lumikha ng mga kamangha-manghang mga pagtatanghal, na sa maraming mga kaso ay nagtatapos na hindi tugma sa ilang media, nang walang pag-aalinlangan, ang Mga pagtatanghal ng HTML sila ay magpapatuloy na maging unibersal na kahalili sa lugar na ito.

Ngunit hindi lihim sa sinuman na ang paglikha ng mga magagandang presentasyon sa HTML ay maaaring magtagal at mangailangan ng medyo advanced na kaalaman sa HTML, CSS, at sa ilang mga kaso sa JavaScript. Mula sa mga problemang ito, isang mahusay na tool ang lalabas na tinawag mga webslide.

Ano ang webslides?

Ito ay upang tawagan ito kahit papaano isang bukas na mapagkukunan na "balangkas", na ginawa ng Jose Luis Antunez, pinapayagan tayo lumikha ng mga HTML na presentasyon mabilis at madali. Ang tool ay may mga mahahalaga para sa iyo upang gumawa ng iyong sariling mga pagtatanghal, gayun din, maaari kang kumuha ng isa sa mga demo na pagtatanghal at ipasadya ito ayon sa gusto mo sa isang minuto.

Ang mga HTML na pagtatanghal na ginawa ko sa tool na ito ay magkakaroon ng isang kahanga-hangang Aesthetic. Napakahalagang tandaan na ang tool na ito ay nangangailangan ng napaka-pangunahing kaalaman sa HTML at CSS, kaya perpekto ito para sa lahat ng mga uri ng mga gumagamit, na dapat lamang tumuon sa nilalaman at kakaunti sa kung paano nila ihahanda ang pagtatanghal.

Paano mag-download ng mga webslide?

Upang mag-download ng mga webslide, isagawa lamang ang sumusunod na utos mula sa iyong paboritong direktoryo:

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

Maaari mo ring i-clone ang opisyal na imbakan ng

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

Sa loob ng folder ng proyekto makukuha mo ang mga kinakailangang js, css at demo upang masimulan ang paglikha ng iyong sariling mga HTML na presentasyon nang madali.

Paano gumamit ng webslides?

Ang pinakamalaking bentahe ng webslides ay ang kadalian ng paggamit nito, talagang ginagawang madali ng tool na ito upang lumikha ng mga pagtatanghal na may iba't ibang mga layunin at pinapabilis ng serye ng demo ang proseso ng paglikha ng pagtatanghal ng isang napakataas na%.

Ano ang makukuha natin kapag nag-download kami ng mga webslide?

Kapag nagda-download ng mga webslide na-access namin ang iba't ibang mga folder, na nagsasama ng mga demo at imahe (mga aparato at logo).

• Itatago ng folder ng css ang mga estilo ng aming mga pagtatanghal
• Ang mga kinakailangang javascripts ay itatabi sa folder ng js, kasama ang pangunahing webslide.js na kung saan ang karamihan sa mahika ay tapos na.
• Ang mga imahe at mga file na html ng mga demo ay mai-save sa mga imahe at mga folder ng demo ayon sa pagkakabanggit.

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

Lumilikha ng mga HTML na presentasyon sa mga webslide

Mayroong 2 pangunahing mga pakinabang kapag gumagamit ng webslides, na binabanggit namin sa ibaba:

• Ang code ay malinis at nasusukat. Nagsasama rin ito ng intuitive markup sa paggamit ng pinakatanyag na mga nomenclature. Hindi na kailangang gumamit ng mga klase, o labis na paggamit ng pugad.
• Bawat <section> sa #webslides kumakatawan ito sa isang slide. Kaya't ang pagination ay lubos na simple.

Slide 1  Slide 1

Sa parehong paraan maaari kaming gumawa ng mga patayong slide, pagdaragdag ng isang patayong estilo

Mga klase na bumubuo sa websides CSS

• Typography: .text-landing, .text-data, .text-intro ...
• Mga Kulay sa Background: .bg-pangunahing, .bg-apple, .bg-blue ...
• Mga Imahe sa Background: .background, .background-center-ilalim ...
• Mga Card: .card-50,. Card-40 ...
• Mga nababaluktot na bloke: .flexblock.clients, .flexblock.metrics ...

Pagpapalawak sa mga webslide

Pinapayagan kami ng webslides na magdagdag ng mga bagong istilo at pag-andar, halimbawa maaari kaming magdagdag ng ilan sa mga sumusunod na mapagkukunan:

• Unsplash
• buhayin.css
• mga maliit na butil.js
• pt

Ang mga demo sa pagtatanghal ng HTML na ginawa sa mga webslide

Maaari kang makakita ng isang serye ng mga demo ng mga HTML na presentasyon na ginawa sa mga webslide dito. Katulad nito, kapag na-download mo ang balangkas maaari mong ma-access ang pag-coding ng bawat isa sa mga demo.

Ito ay isang tool na magpapahintulot sa amin na lumikha ng mga HTML na presentasyon nang mabilis at may mahusay na pagtatapos, ngunit makakatulong din ito sa amin na ituon ang nilalaman at makamit ang mga resulta na hindi namin naisip dati.