Créez un curseur et des présentations avec Reveal.js

Souvent, lorsque nous avons besoin de faire un slider ou une présentation de diapositives, nous utilisons des logiciels tels que Powerpoint ou Prezi, actuellement il existe de nombreux frameworks qui nous permettent de faire ce type de présentations en utilisant la technologie Html5, Jquery et Css 3.

L'avantage est qu'il peut être consulté dans n'importe quel navigateur, sur n'importe quel système d'exploitation et même utilisé dans des applications pour appareils mobiles.

Reveal est un framework développé en Javascript qui fournit des fonctionnalités pour créer des sliders et des présentations avec des fonctionnalités qui vous permettent de gérer et de manipuler les diapositives, l'exportation PDF, la possibilité de contrôler le temps, la navigation et les effets de chaque diapositive.

Reveal est une bibliothèque gratuite Et il a le grand avantage que nous pouvons programmer, nous connecter à des bases de données ou inclure dans n'importe quelle application prenant en charge HTML et Javascript, ce que le logiciel le plus populaire ne peut pas faire.

Développer avec Reveal est facile et nous n'avons qu'à connaître Html et Js, pour commencer à créer une présentation, nous devons télécharger la bibliothèque Reveal.js depuis le site officiel.

Ensuite, nous décompressons les fichiers zip pour démarrer le didacticiel. Nous commencerons par un Exemple simple pour tester Reveal.js.

À partir du répertoire que nous avons décompressé, nous copions les dossiers css, js, plugins et lib dans notre dossier Example01. Ces dossiers contiennent toutes les bibliothèques nécessaires pour créer notre présentation.

Ensuite nous allons créer un curseur avec deux images et du texte, où vous pouvez naviguer automatiquement ou par clavier. Ce sera comme suit :

Le code source est le suivant :

 Reveal.js Exemple 01
Voiture de sport


Visitez notre site Internet
CONSULTER

Le framework Reveal nous fournit plusieurs thèmes ou design css que nous pouvons trouver dans le dossier css et en changeant la ligne de thème, nous pouvons changer le design.

Nous appliquons le thème Beige et visualisons avec l'émulateur d'appareil mobile dans Firefox et nous pouvons voir que la bibliothèque est en charge de faire un design adaptatif.

Le fonctionnement du slider est assuré par le code Javascript :

Si nous voulons que le curseur se déplace automatiquement, nous indiquerons le temps de transition en millisecondes avec le paramètre autoSlide, en cas de non-utilisation, il doit être déplacé avec les flèches à l'aide du clavier ou de la souris.

Les développeurs Web utilisent ce type de bibliothèque pour mettre de côté les formats gif.webp, flash et autres animations, ce type de framework permet même d'utiliser le slider pour le référencement puisque le texte est indexable. Nous pouvons également l'utiliser à la fois en ligne et hors ligne pour afficher notre présentation à partir d'une clé USB ou d'un mobile, en utilisant n'importe quel navigateur.

Le framework Reveal.js se compose d'un seul fichier JavaScript et de deux fichiers de feuille de style. La première feuille de style, Reveal.css définit quelques styles communs, tandis que la seconde contient le design d'un thème standard, nous pouvons également ajouter une troisième feuille de style avec nos propres classes.

Ce thème définit l'apparence des parties importantes de vos présentations, car il y a du texte, des images et des liens.

Nous pouvons utiliser avec Reveal.js d'autres bibliothèques telles que CSS 3D ou WebGL.

Le Révéler le cadre Vous permet d'utiliser divers paramètres de plugin et de configuration pour améliorer l'expérience utilisateur. Les paramètres de configuration qui nous intéresseront le plus sont :

les contrôlesCe paramètre indique que les flèches de direction sont affichées pour naviguer dans nos diapositives, si nous n'indiquons rien, il apparaît par défaut. Il peut prendre la valeur true ou false.

le progrèsAffiche une barre de progression au fur et à mesure que la présentation progresse. Il peut prendre la valeur true ou false.

slideNumberAffiche le numéro de la diapositive actuelle. Il peut prendre la valeur true ou false.

clavierActiver ou désactiver l'interaction clavier. Il peut prendre la valeur true ou false.

toucheractive ou désactive l'utilisation des écrans tactiles si vous en avez un. Il peut prendre la valeur true ou false.

boucleindique que lorsqu'il atteint la fin, il revient au début et continue sans s'arrêter, si nous mettons false, il s'arrêtera lorsqu'il atteint la fin.

Il peut prendre la valeur true ou false.

autoSlideest le temps en millisecondes pour passer automatiquement d'une diapositive à une autre.

transitiontype de transition entre les diapositives. Il peut être réglé sur par défaut, aucun, fondu, glissement, convexe, concave ou zoom.

Un exemple très intéressant est la démo officielle qui peut être utilisée pour la pratique et également téléchargée à partir de la page officielle Reveal.js.

Si nous voulons ajouter Curseur vertical nous devons créer des sections imbriquées comme suit :

 Diapositive verticale 1 Diapositive secondaire verticale 1.1 Diapositive secondaire verticale 1.2 

Ensuite, nous ferons un Example02 où nous inclurons d'autres caractéristiques telles que les fragments qui sont des listes en html qui s'affichent lorsqu'une touche est enfoncée, la présentation progresse

La présentation sera un cours de piratage informatique, avec des diapositives informatiques.

Le code source sera le suivant :

 Cours de piratage éthique
Apprendre la sécurité informatique défensive

Détection et contrôle des vulnérabilités
Test de pénétration : méthodes.

Sécurité du réseau Administration du serveur Linux Administration du serveur Windows / section>

Les fragments indiquent que chaque élément de la liste sera affiché au fur et à mesure de la présentation, si la classe de fragment n'est pas indiquée, la liste sera affichée dans son intégralité et non un à la fois.

Nous avons également indiqué des sections verticales, qui sont des sous-diapositives, pour afficher d'autres diapositives dans une certaine section.

Le cadre Reveal.js C'est l'une des options les plus populaires pour créer des présentations en utilisant HTML, car elle peut être utilisée sur n'importe quel appareil et ne nécessite aucun logiciel de conception ou de programmation installé.

Nous examinons certaines de ses fonctionnalités de base dans cet article, mais de nombreuses autres sont disponibles.

Google expérimente la technologie WebRtc, une technologie que nous avons vue dans le didacticiel WebRTC Communication audio et vidéo à partir d'un navigateur et de Reveal.js afin que les mouvements de diapositives puissent être effectués à l'aide de gestes de la main via une webcam. Calibrer la webcam via WebRtc et avec un simple mouvement de la main en l'air, nous pouvons changer la diapositive.

Nous pouvons voir le projet Google qui est en phase bêta Google Chrome avec Gestures + Reveal.JS, où vous pouvez voir quelques vidéos de démonstration qui testent la technologie.

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif