Créer une présentation multi-utilisateurs avec Reveal.js

Points clés

• révéler.js est une bibliothèque populaire HTML5 et CSS3 pour créer des présentations Web impressionnantes qui peuvent être contrôlées en temps réel par plusieurs utilisateurs.
• Pour créer une présentation multi-utilisateurs à l'aide de Reveal.js, vous devez configurer un serveur Express.js avec Node.js, yeoman, grunt et bower et utiliser socket.io pour envoyer et recevoir des événements de changement de diapositive.
• L'ajout d'authentification de base dans le code côté serveur aide à empêcher les utilisateurs non autorisés de contrôler les présentations et fournit des itinéraires alternatifs pour les utilisateurs non autorisés.
• révéler.js Les présentations peuvent être plus personnalisées et améliorées avec des fonctionnalités telles que WebBrTC et peuvent être rendues plus interactives en incorporant le contenu multimédia, les quiz, les votes et les formulaires.

Dites au revoir à l'ère PowerPoint et adoptez des démonstrations Web modernes! Avec le développement de la technologie Web et l'amélioration des performances du navigateur, une bibliothèque de démonstration basée sur HTML5 et CSS3 est apparue. Reveal.js est l'une des bibliothèques les plus populaires qui créent de superbes présentations. La norme WebSocket définie dans la spécification HTML5 implémente la communication bidirectionnelle complète dans le navigateur. De nombreuses bibliothèques JavaScript simplifient l'utilisation de WebSocket, et Socket.io est l'un des représentants exceptionnels. Cet article explorera comment créer une présentation Reveal.js qui peut être contrôlée par plusieurs utilisateurs et utiliser socket.io pour envoyer et recevoir des événements de changement de diapositive en temps réel (en ignorant le plugin multiplexeur légèrement plus complexe qui est livré avec révélation.js).

Précautions

Cet article suppose que vous avez installé et que vous pouvez utiliser les bibliothèques suivantes:

• node.js
• yeoman
• grogn
• bower

étapes initiales

Tout d'abord, nous configurerons un serveur express.js. Yeoman simplifie l'installation et le fonctionnement des serveurs express.js à l'aide de générateurs. Nous installons donc d'abord le générateur express yeoman à l'aide de NPM.

<code class="language-bash">$ npm install –g generator-express</code>

Ceci installera le générateur express à l'échelle mondiale. Confirons maintenant le serveur.

<code class="language-bash">$ yo express</code>

Cela vous demandera quel type d'expression vous devez installer. Vous pouvez choisir Basic ou MVC; dans notre cas, nous n'avons besoin que des paramètres de base. Il installera ensuite un tas de modules NPM avec les fichiers bower.json et gruntfile.js.

Ensuite, utilisez Grunt pour démarrer le serveur express.

<code class="language-bash">$ grunt</code>

yeoman a créé un fichier app.js par défaut pour nous avec les paramètres nécessaires pour exécuter le serveur. Notez également qu'il est livré avec une bibliothèque "Watch" qui suivra les modifications du code et rechargera automatiquement le serveur, nous n'avons donc pas besoin de le faire manuellement.

Avant de continuer, nous utiliserons Bower pour installer et configurer la bibliothèque Reveal.js. L'installation de Reveal.js est très simple et directe. Il suffit de publier la commande suivante dans le terminal.

<code class="language-bash">$ bower install reveal.js --save</code>

Cela obtiendra la dernière version stable de la bibliothèque Reveal.js à partir de GitHub et l'installera dans le répertoire public / composantes. L'option - Save mettra automatiquement à jour la partie de dépendance du fichier bower.json à l'aide de Reveal.js.

Maintenant, nous avons tout ce dont nous avons besoin pour créer un serveur de présentation. Nous allons commencer par la première diapositive de création de la présentation. Pour ce faire, créez un fichier HTML dans le dossier des vues. (Le code HTML est omis ici, ce qui est cohérent avec le texte d'origine)

Ce HTML contient les fichiers CSS et JavaScript pour révéler.js. Reveal.Initialize () convertit le HTML ci-dessus en une belle présentation. Toute partie de l'élément div avec la classe slides agira comme une diapositive.

Avant de démarrer la démo, nous devons configurer le serveur pour servir ce fichier en fonction de la demande. Par conséquent, nous mettrons à jour App.js avec le code suivant. (Le code app.js est omis ici, ce qui est cohérent avec le texte d'origine)

La première ligne de code nécessite les dépendances nécessaires du serveur, puis crée un objet express. La ligne suivante configure le dossier public en tant que répertoire statique où le serveur recherchera les demandes de fichier statique. Ensuite, nous ajoutons un itinéraire pour fournir le fichier index.html et démarrer le serveur. Nous pouvons maintenant afficher la présentation dans le navigateur à l'aide du http: // localhost: 3000 / url. Mais ce n'est pas ce dont nous avons vraiment besoin. Nous avons besoin que cette présentation soit multiplexée de sorte que lorsqu'un utilisateur modifie la diapositive, elle doit être reflétée sur le navigateur d'un autre utilisateur. Ensuite, nous installerons et configurerons le module Socket.io pour activer la communication bidirectionnelle à l'aide de WebSockets. (Le code lié à Socket.io est omis ici, ce qui est cohérent avec le texte d'origine, y compris la partie de sécurité)

Vous pouvez trouver le code source complet de GitHub.

Résumé

Dans cet article, nous avons vu comment créer une présentation simple Reveal.js qui peut être contrôlée par plusieurs utilisateurs. Ici, nous utilisons la bibliothèque socket.io pour mettre à jour tous les clients connectés en temps réel. Nous avons également ajouté une sécurité de base pour empêcher les utilisateurs non autorisés de contrôler la présentation. Vous pouvez ajouter plus de fonctionnalités et utiliser des technologies comme WebBrTC pour la rendre plus populaire, donc j'espère que vous pourrez voir que cet article n'est que le début.

(La partie FAQ est omise ici, ce qui est cohérent avec le texte d'origine)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!