Daug kartų, kai mums reikia sukurti slankiklį ar skaidrių pristatymą, naudojame tokią programinę įrangą kaip „Powerpoint“ ar „Prezi“, šiuo metu yra daug sistemų, leidžiančių mums pateikti tokio tipo pristatymus naudojant „Html5“, „Jquery“ ir „Css 3“ technologijas.
Privalumas yra tas, kad jį galima peržiūrėti bet kurioje naršyklėje, bet kurioje operacinėje sistemoje ir netgi naudoti mobiliesiems įrenginiams skirtose programose.
„Reveal“ yra „Javascript“ sukurta sistema, suteikianti funkcijų slankikliui ir pristatymams kurti su funkcijomis, leidžiančiomis valdyti ir manipuliuoti skaidrėmis, PDF eksportu, galimybe valdyti laiką, naršymą ir kiekvienos skaidrės efektus.
„Reveal“ yra nemokama biblioteka Ir tai turi didelį pranašumą, kad mes galime užprogramuoti, prisijungti prie duomenų bazių arba įtraukti į bet kurią programą, palaikančią „HTML“ ir „Javascript“, ko negali padaryti pati populiariausia programinė įranga.
Sukurti naudojant „Reveal“ yra paprasta ir mes turime žinoti tik „Html“ ir „Js“, norėdami pradėti kurti pristatymą, turime atsisiųsti „Reveal.js“ biblioteką iš oficialios svetainės.
Tada išpakuokite ZIP failus, kad pradėtumėte pamoką. Pradėsime nuo a Paprastas „Reveal.js“ testavimo pavyzdys.
Iš katalogo, kurį išpakavome, nukopijuojame css, js, plugins ir lib aplankus į „Example01“ aplanką. Šiuose aplankuose yra visos bibliotekos, reikalingos mūsų pristatymui sukurti.
Tada sukursime slankiklį su dviem vaizdais ir tekstu, kur galite naršyti automatiškai arba klaviatūra. Tai bus taip:
Šaltinio kodas yra toks:
Reveal.js 01 pavyzdys„Reveal“ sistema suteikia mums keletą temų ar „css“ dizaino, kurį galime rasti aplanke „css“, o pakeisdami temos eilutę galime pakeisti dizainą.Sportinė mašina
Apsilankykite mūsų svetainėje
KONSULTUOTIS
Taikome smėlio spalvos temą ir vizualizuojame naudodami „Firefox“ mobiliojo įrenginio emuliatorių, ir matome, kad biblioteka yra atsakinga už adaptyvaus dizaino kūrimą.
Slankiklio veikimą užtikrina „Javascript“ kodas:
Jei norime, kad slankiklis judėtų automatiškai, perėjimo laiką milisekundėmis nurodysime naudodami parametrą „autoSlide“, jei jo nenaudosite, jį reikia perkelti rodyklėmis klaviatūra arba pele.
Žiniatinklio kūrėjai naudoja tokio tipo biblioteką, norėdami atidėti gif.webp, „flash“ ir kitus animacijos formatus, tokio tipo sistema netgi leidžia naudoti slankiklį seo, nes tekstas yra indeksuojamas. Taip pat galime jį naudoti tiek prisijungę, tiek neprisijungę, norėdami parodyti savo pristatymą iš pendrive ar mobiliojo telefono, naudodami bet kurią naršyklę.
„Reveal.js“ sistemą sudaro vienas „JavaScript“ failas ir du stiliaus lapo failai. Pirmasis stilių lapas „reve.css“ apibrėžia kai kuriuos įprastus stilius, o antrasis - standartinės temos dizainą, taip pat galime pridėti trečiąjį stilių lapą su savo klasėmis.
Ši tema apibrėžia svarbių pristatymų dalių išvaizdą, nes yra teksto, vaizdų ir nuorodų.
Kartu su „Reveal.js“ galime naudoti kitas bibliotekas, tokias kaip CSS 3D ar WebGL.
The Atskleisti sistemą Leidžia naudoti įvairius papildinius ir konfigūracijos parametrus, kad pagerintų naudotojo patirtį. Konfigūracijos parametrai, kurie mus labiausiai domins, yra šie:
valdikliusŠis parametras rodo, kad rodomos krypties rodyklės, skirtos naršyti per mūsų skaidres, jei nieko nenurodome, jis rodomas pagal numatytuosius nustatymus. Vertė gali būti teisinga arba klaidinga.
progresasPateikimo metu rodoma eigos juosta. Vertė gali būti teisinga arba klaidinga.
slideNumberRodo dabartinį skaidrės numerį. Vertė gali būti teisinga arba klaidinga.
klaviatūraĮjungti arba išjungti klaviatūros sąveiką. Vertė gali būti teisinga arba klaidinga.
liestiįjungia arba išjungia jutiklinių ekranų naudojimą, jei turite. Vertė gali būti teisinga arba klaidinga.
kilpanurodo, kad kai jis pasiekia pabaigą, jis grįžta į pradžią ir tęsiasi nesustodamas, jei mes nurodysime klaidingą, jis sustos, kai pasieks pabaigą.
Vertė gali būti teisinga arba klaidinga.
autoSlideyra laikas milisekundėmis automatiškai persijungti iš vienos skaidrės į kitą.
perėjimasperėjimo tarp skaidrių tipas. Jis gali būti nustatytas į numatytąjį, jokio, išblukimo, skaidrių, išgaubto, įgaubto arba priartinimo.
Labai įdomus pavyzdys yra oficiali demonstracinė versija, kurią galima naudoti praktikoje ir kurią taip pat galima atsisiųsti iš oficialaus „Reveal.js“ puslapio.
Jei norime pridėti Vertikalus slankiklis mes turime sukurti įdėtus skyrius taip:
Vertikalioji skaidrė 1 Vertikalioji skaidrė 1.1 Vertikalioji skaidrė 1.2Toliau padarysime 02 pavyzdį, kuriame įtrauksime kitas charakteristikas, pvz., Fragmentus, kurie yra sąrašai html, kurie rodomi paspaudus klavišą, pristatymas vyksta
Pristatymas bus įsilaužimo kursas su kompiuterinėmis skaidrėmis.
Šaltinio kodas bus toks:
Etikos įsilaužimo kursasSužinokite apie gynybinį kompiuterio saugumą
- Pažeidimų aptikimas ir valdymas
- Skverbties testavimas: metodai.
Mes taip pat nurodėme vertikalias dalis, kurios yra papildomos skaidrės, kad būtų rodomos kitos skaidrės tam tikrame skyriuje.
The sistema Reveal.js Tai viena iš populiariausių pristatymų kūrimo naudojant HTML variantų, nes ji gali būti naudojama bet kuriame įrenginyje ir nereikalauja jokios įdiegtos projektavimo ar programavimo programinės įrangos.
Šiame straipsnyje apžvelgsime kai kurias pagrindines jo savybes, tačiau yra daug daugiau.
„Google“ eksperimentuoja su „WebRtc“ technologija - technologija, kurią matėme „WebRTC“ pamokoje „Garso ir vaizdo ryšys iš naršyklės“ ir „Reveal.js“, kad skaidrių judesiai būtų atliekami naudojant rankos gestus per internetinę kamerą. Kalibruodami internetinę kamerą per „WebRtc“ ir paprastu rankos judesiu ore galime pakeisti skaidrę.
Mes galime pamatyti „Google“ projektą, kuris yra beta versijos „Google Chrome“ su „Gestures + Reveal.JS“, kur galite pamatyti keletą demonstracinių vaizdo įrašų, kuriuose išbandoma technologija.
Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
