Maak een schuifregelaar en presentaties met Reveal.js

Wanneer we een slider of een diapresentatie moeten maken, gebruiken we vaak software zoals Powerpoint of Prezi. Momenteel zijn er veel frameworks waarmee we dit soort presentaties kunnen maken met behulp van Html5-, JQuery- en Css 3-technologie.

Het voordeel is dat het in elke browser, op elk besturingssysteem kan worden bekeken en zelfs in toepassingen voor mobiele apparaten kan worden gebruikt.

Reveal is een framework ontwikkeld in Javascript dat functionaliteiten biedt om sliders en presentaties te maken met functies waarmee u dia's kunt beheren en manipuleren, PDF-export, mogelijkheid om de tijd, navigatie en effecten van elke dia te regelen.

Reveal is een gratis bibliotheek En het heeft het grote voordeel dat we kunnen programmeren, verbinding maken met databases of opnemen in elke applicatie die Html en Javascript ondersteunt, iets wat de meest populaire software niet kan.

Ontwikkelen met Reveal is eenvoudig en we hoeven alleen Html en Js te kennen. Om een ​​presentatie te maken, moeten we de Reveal.js-bibliotheek downloaden van de officiële website.

Vervolgens unzippen we de zip-bestanden om de tutorial te starten. We beginnen met een Eenvoudig voorbeeld om Reveal.js te testen.

Vanuit de map die we hebben uitgepakt, kopiëren we de mappen css, js, plug-ins en lib naar onze map Voorbeeld01. Deze mappen bevatten alle benodigde bibliotheken om onze presentatie te maken.

Vervolgens we zullen een schuifregelaar maken met twee afbeeldingen en tekst, waar u automatisch of met het toetsenbord kunt navigeren. Het zal als volgt zijn:

De broncode is als volgt:

 Reveal.js Voorbeeld 01
Sportwagen


Bezoek onze website
RAADPLEGEN

Het Reveal-framework biedt ons verschillende thema's of css-ontwerp die we in de css-map kunnen vinden en door de themaregel te wijzigen, kunnen we het ontwerp wijzigen.

We passen het Beige-thema toe en visualiseren met de emulator voor mobiele apparaten in Firefox en we kunnen zien dat de bibliotheek de leiding heeft over het maken van een adaptief ontwerp.

De werking van de slider wordt verzorgd door de Javascript-code:

Als we willen dat de schuifregelaar automatisch beweegt, geven we de overgangstijd in milliseconden aan met de autoSlide-parameter, in het geval dat deze niet wordt gebruikt, moet deze worden verplaatst met de pijlen met behulp van het toetsenbord of de muis.

Webontwikkelaars gebruiken dit type bibliotheek om gif.webp-, flash- en andere animatieformaten aan de kant te schuiven. Met dit type raamwerk kan zelfs de schuifregelaar worden gebruikt voor seo, aangezien de tekst indexeerbaar is. We kunnen het ook zowel online als offline gebruiken om onze presentatie te tonen vanaf een pendrive of mobiel, met elke browser.

Het Reveal.js-framework bestaat uit een enkel JavaScript-bestand en twee stylesheet-bestanden. De eerste stylesheet, reveal.css, definieert enkele veelvoorkomende stijlen, terwijl de tweede het ontwerp van een standaardthema bevat, we kunnen ook een derde stylesheet toevoegen met onze eigen klassen.

Dit thema bepaalt het uiterlijk van de belangrijke delen van uw presentaties, aangezien er tekst, afbeeldingen en links zijn.

We kunnen samen met Reveal.js andere bibliotheken gebruiken, zoals CSS 3D of WebGL.

De Onthul raamwerk Hiermee kunt u verschillende plug-in- en configuratieparameters gebruiken om de gebruikerservaring te verbeteren. De configuratieparameters die ons het meest zullen interesseren zijn:

controlesDeze parameter geeft aan dat de richtingspijlen worden weergegeven om door onze dia's te navigeren, als we niets aangeven, wordt deze standaard weergegeven. Het kan de waarde true of false aannemen.

voortgangGeeft een voortgangsbalk weer naarmate de presentatie vordert. Het kan de waarde true of false aannemen.

diaNummerToont het huidige dianummer. Het kan de waarde true of false aannemen.

toetsenbordSchakel toetsenbordinteractie in of uit. Het kan de waarde true of false aannemen.

aanrakenschakelt het gebruik van aanraakschermen in of uit als u die heeft. Het kan de waarde true of false aannemen.

lusgeeft aan dat wanneer het het einde bereikt, het terugkeert naar het begin en verder gaat zonder te stoppen, als we false zetten, zal het stoppen wanneer het het einde bereikt.

Het kan de waarde true of false aannemen.

autoSlideis de tijd in milliseconden om automatisch van de ene dia naar de andere te schakelen.

overgangsoort overgang tussen dia's. Het kan worden ingesteld op standaard, geen, fade, slide, convex, concave of zoom.

Een zeer interessant voorbeeld is de officiële demo die kan worden gebruikt om te oefenen en die ook kan worden gedownload van de officiële Reveal.js-pagina.

Als we willen toevoegen Verticale schuifregelaar we moeten als volgt geneste secties maken:

 Verticale slede 1 Verticale onderslede 1.1 Verticale onderslede 1.2 

Vervolgens zullen we een voorbeeld02 doen waarin we andere kenmerken zullen opnemen, zoals de fragmenten die lijsten zijn in html die worden weergegeven als een toets wordt ingedrukt, de presentatie vordert

De presentatie zal een Hacking Course zijn, met computer slides.

De broncode zal als volgt zijn:

 Cursus ethisch hacken
Leer defensieve computerbeveiliging

Detectie en controle van kwetsbaarheden
Penetratietesten: methoden.

Netwerkbeveiliging Linux Serverbeheer Windows Serverbeheer / sectie>

De fragmenten geven aan dat elk item in de lijst zal worden getoond naarmate de presentatie vordert, als de fragmentklasse niet wordt aangegeven, wordt de lijst in zijn geheel getoond en niet één voor één.

We hebben ook verticale secties aangegeven, die subdia's zijn, om andere dia's binnen een bepaalde sectie te tonen.

De framework Reveal.js Het is een van de meest populaire opties voor het maken van presentaties met HTML, omdat het op elk apparaat kan worden gebruikt en er geen ontwerp- of programmeersoftware voor is geïnstalleerd.

We bekijken enkele van de basisfuncties in dit artikel, maar er zijn er nog veel meer beschikbaar.

Google experimenteert met WebRtc-technologie, een technologie die we zagen in de WebRTC-tutorial Audio- en videocommunicatie vanuit een browser en Reveal.js, zodat schuifbewegingen kunnen worden uitgevoerd met handgebaren via een webcam. Door de webcam te kalibreren via WebRtc en met een simpele handbeweging in de lucht kunnen we de dia veranderen.

We kunnen het Google-project zien dat zich in de bètafase van Google Chrome bevindt met Gestures + Reveal.JS, waar u enkele demonstratievideo's kunt zien die de technologie testen.

Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven