Lag glidebryter og presentasjoner med Reveal.js

Mange ganger når vi trenger å lage en glidebryter eller en lysbildepresentasjon, bruker vi programvare som Powerpoint eller Prezi, for tiden er det mange rammer som lar oss lage denne typen presentasjoner ved hjelp av Html5, Jquery og Css 3 -teknologi.

Fordelen er at den kan sees i hvilken som helst nettleser, på hvilket som helst operativsystem og til og med brukes i applikasjoner for mobile enheter.

Reveal er et rammeverk utviklet i Javascript som gir funksjoner for å lage glidebryter og presentasjoner med funksjoner som lar deg administrere og manipulere lysbilder, PDF -eksport, mulighet til å kontrollere tid, navigering og effekter av hvert lysbilde.

Reveal er et gratis bibliotek Og det har den store fordelen at vi kan programmere, koble til databaser eller inkludere i ethvert program som støtter Html og Javascript, noe den mest populære programvaren ikke kan gjøre.

Å utvikle med Reveal er enkelt, og vi trenger bare å kjenne Html og Js. For å begynne å lage en presentasjon må vi laste ned Reveal.js -biblioteket fra det offisielle nettstedet.

Deretter pakker vi ut zip -filene for å starte opplæringen. Vi starter med en Enkelt eksempel for å teste Reveal.js.

Fra katalogen som vi pakket ut, kopierer vi css-, js-, plugins- og lib -mappene til eksempel01 -mappen. Disse mappene inneholder alle de nødvendige bibliotekene for å lage presentasjonen vår.

Deretter vi lager en glidebryter med to bilder og tekst, der du kan navigere automatisk eller med tastaturet. Det vil være som følger:

Kildekoden er som følger:

 Reveal.js Eksempel 01
Sportsbil


Besøk vår hjemmeside
RÅDFØRE

Reveal -rammeverket gir oss flere temaer eller css -design som vi kan finne i css -mappen, og ved å endre temalinjen kan vi endre designet.

Vi bruker Beige -temaet og visualiserer med mobilenhetsemulatoren i Firefox, og vi kan se at biblioteket har ansvaret for å lage et adaptivt design.

Driften av glidebryteren er levert av Javascript -koden:

Hvis vi vil at glidebryteren skal bevege seg automatisk, indikerer vi overgangstiden i millisekunder med parameteren autoSlide, hvis den ikke brukes, må den flyttes med pilene ved hjelp av tastaturet eller musen.

Webutviklere bruker denne typen bibliotek til å legge til side gif.webp, flash og andre animasjonsformater, denne typen rammeverk tillater til og med glidebryteren for seo siden teksten kan indekseres. Vi kan også bruke den både online og offline for å vise presentasjonen vår fra en pendrive eller mobil, med hvilken som helst nettleser.

Reveal.js -rammeverket består av en enkelt JavaScript -fil og to stilarkfiler. Det første stilarket, reveal.css definerer noen vanlige stiler, mens det andre inneholder utformingen av et standardtema, kan vi også legge til et tredje stilark med våre egne klasser.

Dette temaet definerer utseendet på de viktige delene av presentasjonene dine, ettersom det er tekst, bilder og lenker.

Vi kan bruke andre biblioteker, for eksempel CSS 3D eller WebGL, sammen med Reveal.js.

De Avslør rammeverk Lar deg bruke forskjellige plugin- og konfigurasjonsparametere for å forbedre brukeropplevelsen. Konfigurasjonsparametrene som vil interessere oss mest er:

kontrollerDenne parameteren indikerer at retningspilene vises for å navigere gjennom lysbildene våre, hvis vi ikke angir noe, vises det som standard. Det kan ta verdien sant eller usant.

framgangViser en fremdriftslinje etter hvert som presentasjonen skrider frem. Det kan ta verdien sant eller usant.

slideNumberViser gjeldende lysbildenummer. Det kan ta verdien sant eller usant.

tastaturAktiver eller deaktiver tastaturinteraksjon. Det kan ta verdien sant eller usant.

ta påaktiverer eller deaktiverer bruk av berøringsskjermer hvis du har en. Det kan ta verdien sant eller usant.

Løkkeindikerer at når den når slutten går den tilbake til begynnelsen og fortsetter uten å stoppe, hvis vi setter usann vil den stoppe når den når slutten.

Det kan ta verdien sant eller usant.

autoSlideer tiden i millisekunder for å bytte fra ett lysbilde til et annet automatisk.

overgangtype overgang mellom lysbilder. Den kan settes til defaul, none, fade, slide, konveks, konkav eller zoom.

Et veldig interessant eksempel er den offisielle demoen som kan brukes til praksis og også lastes ned fra den offisielle Reveal.js -siden.

Hvis vi vil legge til Vertikal glidebryter vi må lage nestede seksjoner som følger:

 Vertikal lysbilde 1 Vertikal underside 1.1 Vertikal underside 1.2 

Deretter vil vi gjøre et eksempel02 hvor vi vil inkludere andre egenskaper som fragmentene som er lister i html som vises når en tast trykkes ned, presentasjonen går videre

Presentasjonen vil bli et hackingkurs, med lysbilder fra datamaskiner.

Kildekoden vil være som følger:

 Etisk hackingkurs
Lær om defensiv datasikkerhet

Sårbarhetsdeteksjon og kontroll
Penetrasjonstesting: Metoder.

Nettverkssikkerhet Linux Server Administration Windows Server Administration / seksjon>

Fragmentene indikerer at hvert element i listen vil bli vist etter hvert som presentasjonen skrider frem, hvis fragmentklassen ikke er angitt vil listen bli vist i sin helhet og ikke en om gangen.

Vi har også angitt vertikale seksjoner, som er sub -lysbilder, for å vise andre lysbilder i en bestemt seksjon.

De framework Reveal.js Det er et av de mest populære alternativene for å lage presentasjoner ved hjelp av HTML, ettersom det kan brukes på hvilken som helst enhet og ikke krever noen design- eller programmeringsprogramvare.

Vi ser på noen av de grunnleggende funksjonene i denne artikkelen, men det er mange flere tilgjengelige.

Google eksperimenterer med WebRtc -teknologi, en teknologi vi så i WebRTC -opplæringen Lyd og videokommunikasjon fra en nettleser og Reveal.js, slik at lysbildebevegelser kan utføres ved hjelp av håndbevegelser gjennom et webkamera. Kalibrering av webkameraet gjennom WebRtc og med en enkel bevegelse av hånden i luften kan vi endre lysbildet.

Vi kan se Google -prosjektet som er i beta -fase Google Chrome med Gestures + Reveal.JS, hvor du kan se noen demonstrasjonsvideoer som tester teknologien.

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng