Opret skyder og præsentationer med Reveal.js

Mange gange, når vi skal lave en skyder eller en diaspræsentation, bruger vi software som Powerpoint eller Prezi, i øjeblikket er der mange rammer, der giver os mulighed for at lave denne form for præsentationer ved hjælp af Html5, Jquery og Css 3 teknologi.

Fordelen er, at den kan ses i enhver browser, på ethvert operativsystem og endda bruges i applikationer til mobile enheder.

Reveal er en ramme udviklet i Javascript, der giver funktionaliteter til at oprette skyder og præsentationer med funktioner, der giver dig mulighed for at administrere og manipulere dias, PDF -eksport, mulighed for at styre tid, navigation og effekter af hvert dias.

Reveal er et gratis bibliotek Og det har den store fordel, at vi kan programmere, oprette forbindelse til databaser eller inkludere i ethvert program, der understøtter Html og Javascript, noget som den mest populære software ikke kan.

Det er let at udvikle sig med Reveal, og vi behøver kun at kende Html og Js, for at begynde at oprette en præsentation skal vi downloade Reveal.js -biblioteket fra det officielle websted.

Derefter pakker vi zip -filerne ud for at starte selvstudiet. Vi starter med en Enkelt eksempel til test af Reveal.js.

Fra biblioteket, som vi pakkede ud, kopierer vi css, js, plugins og lib -mapper til vores eksempel01 -mappe. Disse mapper indeholder alle de nødvendige biblioteker til at oprette vores præsentation.

Derefter vi opretter en skyder med to billeder og tekst, hvor du kan navigere automatisk eller med tastatur. Det vil være som følger:

Kildekoden er som følger:

 Reveal.js Eksempel 01
Sportsvogn


Besøg vores websted
KONSULTERE

Reveal -rammen giver os flere temaer eller css -design, som vi kan finde i css -mappen, og ved at ændre temalinjen kan vi ændre designet.

Vi anvender Beige -temaet og visualiserer med mobilenhedsemulatoren i Firefox, og vi kan se, at biblioteket står for at lave et adaptivt design.

Betjeningen af ​​skyderen leveres af Javascript -koden:

Hvis vi vil have skyderen til at bevæge sig automatisk, angiver vi overgangstiden i millisekunder med parameteren autoSlide, hvis den ikke bruges, skal den flyttes med pilene ved hjælp af tastaturet eller musen.

Webudviklere bruger denne type bibliotek til at lægge gif.webp, flash og andre animationsformater til side, denne type rammer tillader endda skyderen at blive brugt til seo, da teksten kan indekseres. Vi kan også bruge det både online og offline til at vise vores præsentation fra en pendrive eller mobil ved hjælp af en hvilken som helst browser.

Reveal.js -rammen består af en enkelt JavaScript -fil og to stylesheet -filer. Det første stylesheet, reveal.css definerer nogle almindelige styles, mens det andet indeholder design af et standardtema, kan vi også tilføje et tredje stylesheet med vores egne klasser.

Dette tema definerer udseendet af de vigtige dele af dine præsentationer, da der er tekst, billeder og links.

Vi kan sammen med Reveal.js bruge andre biblioteker såsom CSS 3D eller WebGL.

Det Afsløre rammer Giver dig mulighed for at bruge forskellige plugin- og konfigurationsparametre til at forbedre brugeroplevelsen. De konfigurationsparametre, der vil interessere os mest, er:

kontrollerDenne parameter angiver, at retningspilene vises for at navigere gennem vores dias, hvis vi ikke angiver noget, vises det som standard. Det kan tage værdien sand eller falsk.

fremskridtViser en statuslinje, efterhånden som præsentationen skrider frem. Det kan tage værdien sand eller falsk.

slideNumberViser det aktuelle diasnummer. Det kan tage værdien sand eller falsk.

tastaturAktiver eller deaktiver tastaturinteraktion. Det kan tage værdien sand eller falsk.

røre vedaktiverer eller deaktiverer brug af berøringsskærme, hvis du har en. Det kan tage værdien sand eller falsk.

sløjfeangiver, at når den når enden, vender den tilbage til begyndelsen og fortsætter uden at stoppe, hvis vi sætter falsk, stopper den, når den når enden.

Det kan tage værdien sand eller falsk.

autoSlideer tiden i millisekunder for automatisk at skifte fra et dias til et andet.

overgangovergangstype mellem dias. Det kan indstilles til defaul, none, fade, slide, konveks, konkav eller zoom.

Et meget interessant eksempel er den officielle demo, der kan bruges til praksis og også downloades fra den officielle Reveal.js -side.

Hvis vi vil tilføje Lodret skyder vi skal oprette indlejrede sektioner som følger:

 Vertikal dias 1 Vertikal sub slide 1.1 Vertikal sub slide 1.2 

Dernæst vil vi lave et eksempel02, hvor vi vil inkludere andre egenskaber, f.eks. De fragmenter, der er lister i html, der vises, når der trykkes på en tast, og præsentationen skrider frem

Præsentationen vil være et hackingkursus med computerdia.

Kildekoden vil være som følger:

 Etisk hacking kursus
Lær om defensiv computersikkerhed

Sårbarhedsregistrering og kontrol
Penetrationstest: Metoder.

Netværkssikkerhed Linux Server Administration Windows Server Administration / sektion>

Fragmenterne angiver, at hvert element på listen vil blive vist, når præsentationen skrider frem, hvis fragmentklassen ikke er angivet, vil listen blive vist i sin helhed og ikke et ad gangen.

Vi har også angivet lodrette sektioner, som er sub -dias, for at vise andre dias inden for et bestemt afsnit.

Det framework Reveal.js Det er en af ​​de mest populære muligheder for at oprette præsentationer ved hjælp af HTML, da det kan bruges på enhver enhed og ikke kræver nogen design eller programmeringssoftware installeret.

Vi ser på nogle af dens grundlæggende funktioner i denne artikel, men der er mange flere tilgængelige.

Google eksperimenterer med WebRtc -teknologi, en teknologi, som vi så i WebRTC -vejledningen Lyd- og videokommunikation fra en browser og Reveal.js, så diasbevægelser kan udføres ved hjælp af håndbevægelser gennem et webcam. Kalibrering af webkameraet gennem WebRtc og med en enkel bevægelse af hånden i luften kan vi ændre diaset.

Vi kan se Google -projektet, der er i beta -fase Google Chrome med Gestures + Reveal.JS, hvor du kan se nogle demonstrationsvideoer, der tester teknologien.

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt