Izveidojiet slīdni un prezentācijas, izmantojot Reveal.js

Daudzas reizes, kad mums ir jāizveido slīdnis vai slaidu prezentācija, mēs izmantojam tādu programmatūru kā Powerpoint vai Prezi, pašlaik ir daudz ietvaru, kas ļauj mums veidot šāda veida prezentācijas, izmantojot Html5, Jquery un Css 3 tehnoloģiju.

Priekšrocība ir tā, ka to var apskatīt jebkurā pārlūkprogrammā, jebkurā operētājsistēmā un pat izmantot mobilo ierīču lietojumprogrammās.

Atklāšana ir Javascript izstrādāts ietvars, kas nodrošina funkcionalitāti slīdņa un prezentāciju izveidei ar funkcijām, kas ļauj pārvaldīt un manipulēt ar slaidiem, PDF eksportu, iespēju kontrolēt laiku, navigāciju un katra slaida efektus.

Reveal ir bezmaksas bibliotēka Un tai ir liela priekšrocība, ka mēs varam programmēt, izveidot savienojumu ar datu bāzēm vai iekļaut jebkurā lietojumprogrammā, kas atbalsta Html un Javascript, ko populārākā programmatūra nevar darīt.

Izstrāde ar atklāšanu ir vienkārša, un mums ir jāzina tikai Html un Js, lai sāktu veidot prezentāciju, mums ir jālejupielādē Reveal.js bibliotēka no oficiālās vietnes.

Tālāk mēs izpakojam ZIP failus, lai sāktu apmācību. Mēs sāksim ar a Vienkāršs piemērs, lai pārbaudītu Reveal.js.

No direktorijas, kuru mēs izsaiņojām, mēs kopējam mapes css, js, spraudņus un lib uz mūsu mapi Example01. Šajās mapēs ir visas nepieciešamās bibliotēkas, lai izveidotu mūsu prezentāciju.

Tad mēs izveidosim slīdni ar diviem attēliem un tekstu, kur var pārvietoties automātiski vai ar tastatūru. Tas būs šāds:

Avota kods ir šāds:

 Reveal.js 01 piemērs
Sporta mašīna


Apmeklējiet mūsu vietni
KONSULTĒTIES

Atklāšanas ietvars nodrošina mums vairākas tēmas vai css dizainu, ko mēs varam atrast css mapē, un, mainot motīvu līniju, mēs varam mainīt dizainu.

Mēs izmantojam smilškrāsas tēmu un vizualizējam ar mobilās ierīces emulatoru pārlūkprogrammā Firefox, un mēs redzam, ka bibliotēka ir atbildīga par adaptīva dizaina izveidi.

Slīdņa darbību nodrošina Javascript kods:

Ja mēs vēlamies, lai slīdnis pārvietotos automātiski, mēs norādīsim pārejas laiku milisekundēs ar parametru autoSlide, ja to neizmantojat, tas jāpārvieto ar bultiņām, izmantojot tastatūru vai peli.

Tīmekļa izstrādātāji izmanto šāda veida bibliotēkas, lai noliktu malā gif.webp, flash un citus animācijas formātus, šāda veida ietvari pat ļauj slīdni izmantot SEO, jo teksts ir indeksējams. Mēs varam to izmantot arī tiešsaistē un bezsaistē, lai parādītu savu prezentāciju no pendrive vai mobilā, izmantojot jebkuru pārlūkprogrammu.

Reveal.js ietvars sastāv no viena JavaScript faila un diviem stila lapu failiem. Pirmā stilu lapa, reve.css, definē dažus izplatītākos stilus, bet otrā - standarta tēmas dizains, mēs varam pievienot arī trešo stilu lapu ar savām klasēm.

Šī tēma nosaka jūsu prezentāciju svarīgo daļu izskatu, jo ir teksts, attēli un saites.

Mēs varam izmantot kopā ar Reveal.js citas bibliotēkas, piemēram, CSS 3D vai WebGL.

Atklāšanas ietvars Ļauj izmantot dažādus spraudņu un konfigurācijas parametrus, lai uzlabotu lietotāja pieredzi. Konfigurācijas parametri, kas mūs visvairāk interesēs, ir šādi:

vadīklasŠis parametrs norāda, ka virziena bultiņas tiek rādītas, lai pārvietotos pa mūsu slaidiem, ja mēs neko nenorādām, tas parādās pēc noklusējuma. Tā vērtība var būt patiesa vai nepatiesa.

progresuPrezentācijas gaitā tiek parādīta progresa josla. Tā vērtība var būt patiesa vai nepatiesa.

slideNumberParāda pašreizējo slaida numuru. Tā vērtība var būt patiesa vai nepatiesa.

tastatūraIespējot vai atspējot tastatūras mijiedarbību. Tā vērtība var būt patiesa vai nepatiesa.

pieskartiesiespējo vai atspējo skārienekrānu izmantošanu, ja tāds ir. Tā vērtība var būt patiesa vai nepatiesa.

cilpanorāda, ka, sasniedzot beigas, tas atgriežas sākumā un turpina neapstāties, ja mēs norādīsim nepatiesu, tas apstāsies, kad sasniegs beigas.

Tā vērtība var būt patiesa vai nepatiesa.

autoSlideir laiks milisekundēs, lai automātiski pārslēgtos no viena slaida uz citu.

pārejapārejas veids starp slaidiem. To var iestatīt uz noklusējumu, nav, izbalināt, slīdēt, izliekts, ieliekts vai tālummaiņa.

Ļoti interesants piemērs ir oficiālā demonstrācija, ko var izmantot praksei un arī lejupielādēt no oficiālās Reveal.js lapas.

Ja mēs vēlamies pievienot Vertikālais slīdnis mums ir jāizveido ligzdotas sadaļas šādi:

 Vertikālais slaids 1 Vertikālais apakšslaids 1.1. Vertikālais apakšslaids 1.2 

Tālāk mēs darīsim piemēru 02, kurā iekļausim citas īpašības, piemēram, fragmentus, kas ir html saraksti, kas tiek parādīti, nospiežot taustiņu, prezentācija turpinās

Prezentācija būs uzlaušanas kurss ar datora slaidiem.

Avota kods būs šāds:

 Ētikas hakeru kurss
Uzziniet aizsardzības datoru drošību

Neaizsargātības noteikšana un kontrole
Iekļūšanas pārbaude: metodes.

Tīkla drošība Linux servera administrēšana Windows servera administrēšana / sadaļa>

Fragmenti norāda, ka katrs saraksta vienums tiks parādīts prezentācijas gaitā, ja fragmentu klase nav norādīta, saraksts tiks parādīts pilnībā, nevis pa vienam.

Mēs esam norādījuši arī vertikālas sadaļas, kas ir apakšslaidi, lai parādītu citus slaidus noteiktā sadaļā.

ietvars Reveal.js Tā ir viena no populārākajām iespējām prezentāciju veidošanai, izmantojot HTML, jo to var izmantot jebkurā ierīcē un nav nepieciešama instalēta dizaina vai programmēšanas programmatūra.

Šajā rakstā mēs aplūkojam dažas tās pamatfunkcijas, taču ir pieejamas vēl daudzas citas.

Google eksperimentē ar WebRtc tehnoloģiju - tehnoloģiju, ko redzējām WebRTC apmācībā Audio un video sakari no pārlūkprogrammas un Reveal.js, lai slaida kustības varētu veikt, izmantojot tīmekļa žestu roku žestus. Kalibrējot tīmekļa kameru, izmantojot WebRtc un ar vienkāršu rokas kustību gaisā, mēs varam mainīt slaidu.

Mēs varam redzēt Google projektu, kas atrodas beta fāzē Google Chrome ar žestiem + atklāšanu.JS, kur var redzēt dažus demonstrācijas videoklipus, kas pārbauda tehnoloģiju.

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu