Journal Reveal.js et plugin phpsync

Posté par  (site web personnel) . Licence CC By‑SA.
Étiquettes :
9
19
mai
2023

Bonjour Nal,

Je suis surpris qu'on ne t'ait jamais parlé de reveal.js, je m'en vais donc arranger ça.

reveal.js est une application javascript permettant de réaliser des diaporamas (comme Impress que tu connais déjà). Cette application est destinée aux geeks comme toi qui écrivent du HTML à longueur de journée. On crée donc des diapositives simplement avec quelques lignes de code:

<section>
  <h2>Ma zolie diapo</h2>
  <p>des trucs intéressants ici</p>
</section>

L'avantage de ce système est qu'on peut lire le diaporama partout: sur tout appareil disposant d'un navigateur web. On peut bien sûr l'enregistrer sur une clé usb, mais on peut aussi facilement l'héberger en ligne (c'est du HTML et du JS!). Ça s'adapte à tous les écrans, c'est beau, parfait!

Le moment où on réinvente la roue

Ce serait quand même sympa si on pouvait synchroniser le déroulement du diaporama sur plusieurs écrans. Ça tombe bien, il y a un plugin qui s'appelle multiplex qui fait ça. Pour l'installer c'est très simple, tu fais npm install reveal-multiplex et puis tu configures un serveur node.js et…

J'aime pas Node.js

Bon ça a l'air bien, mais je n'ai pas envie faire tourner un serveur Node.js pour ça, encore plus si il y a des dépendances hors des dépôts de ma distribution. J'ai déjà un serveur Apache équipé avec PHP, on ne pourrait pas s'en servir?

À première vue c'est pas évident, car quand un utilisateur affiche une page PHP dans son navigateur, le script PHP est exécuté sur le serveur indépendamment des autres scripts. Par défaut, un script PHP ne peut pas partager une variable avec un autre script, ni même avec le même script exécuté par quelqu'un d'autre. Pour partager des données entre les scripts on utilise généralement une base de donnée voire des fichiers, mais j'aimerai éviter de faire des écritures sur le disque juste pour ça.

Après une brève recherche j'ai trouvé qu'il existe le module php_apcu permettant partager une variable de manière globale sur le serveur. Ce module est packagé dans toutes les bonnes distributions, sous Debian on pourra alors faire apt install php-apcu.

phpsync

J'ai donc commis un petit programme que j'ai appelé phpsync. Il tient en quatre fichier, le plus gros faisant 83 lignes de JS.

Pour la connexion serveur->client ça utilise les Server Send Events. C'est une connexion unidirectionnelle qui est super simple à mettre en place et qui se reconnecte toute seule en cas de coupure.

Pour la connexion client->serveur, j'utilise le plus classique XMLHttpRequest en faisant une requête à chaque changement de diapo.

La mise en place est simple: on place le dossier phpsync dans le dossier plugin, puis on ajoute la ligne <script src="plugin/phpsync/phpsync.js"></script> dans le code du diaporama.

Pour contrôler le diaporama, il faut aller à la dernière diapo et entrer le mot de passe du boss. À partir de là, toutes les autres personnes affichant le diaporama verront la même slide que le boss.

génial je veux tester!

Le code est disponible ici: https://framagit.org/lkiefer/phpsync.

J'ai mis une demo en ligne, mais ça risque d'être inutilisable si plusieurs personnes s’amusent avec avec en même temps. C'est là: http://lkiefer.org/phpsync/demo.html

How "open" is your open-source?

Les sources sont sous licence MIT. Je ne prévois pas de faire évoluer ce logiciel en dehors d'éventuelles corrections qui s'imposeraient: il fonctionne suffisamment bien pour mon usage et il y a déjà une version Node.js pour ceux qui voudraient quelque chose de plus évolué.

  • # C’est vendredi !!!!

    Posté par  . Évalué à 3.

    <troll>

    Sinon tu fais ton diapo avec PowerPoint ou Impress comme les gens normaux, tu le sors en PDF, et tu le sers sur une URL HTTP. Le lecteur PDF intégré des navigateurs fera le reste !!

    </troll>

    • [^] # Re: C’est vendredi !!!!

      Posté par  (site web personnel, Mastodon) . Évalué à 6.

      Ici, je fais mes diapos avec \LaTeX (classe Beamer) comme les gens anormaux, je le sors en PDF et paf ça fait des présentapic tout beau tout portable

      “It is seldom that liberty of any kind is lost all at once.” ― David Hume

  • # Oublié ?

    Posté par  (site web personnel) . Évalué à 5.

    Je suis surpris qu'on ne t'ait jamais parlé de reveal.js

    Pourtant il a été assez populaire ici et là depuis long temps. Peut être était il trop simple d'usage pour avoir nécessité une doc technique.

    J'imagine qu'il a pu depuis se faire détrôner par une réécriture en Rust.

    Adhérer à l'April, ça vous tente ?

  • # Avec du Markdown en code source

    Posté par  (site web personnel) . Évalué à 4.

    Par ce que je n'écris jamais en HTML, mais en Markdown.

    Quand je veux une belle présentation, j'utilise, oui, reveal.js, via l'extension Markdown Preview Enhanced sur mon joli VSCodium.

    Et, le mode présentation est tout simplement formidable.

    À noter, que CodiMD/HackMD/HedgeDoc procède de la même manière (ou presque) pour les présentations. Ça permet de faire un joli travail collaboratif, très rapide et simple avec ceux qui ne travaillent pas avec git.

    Après les présentations… Autre débat.

  • # merci

    Posté par  . Évalué à 1.

    Bonjour,

    Merci de partager cette information sur reveal.js, une application Javascript pour créer des diaporamas. Le fait qu'elle soit basée sur HTML est très intéressant pour ceux qui sont familiers avec le codage et qui cherchent une alternative aux logiciels de présentation traditionnels.

    Vous avez mentionné le plugin multiplex pour synchroniser le déroulement du diaporama sur plusieurs écrans, l'installation de ce plugin nécessite un serveur Node.js, est-ce que ce n'est pas compliqué a installer ?

    Il est rassurant de savoir que vous avez trouvé une solution alternative en utilisant le module php_apcu pour partager une variable de manière globale sur le serveur. Le programme que vous avez créé, phpsync, semble très utile et facile à mettre en place.

    Les Server Send Events pour la connexion serveur-client et XMLHttpRequest pour la connexion client-serveur sont des choix intéressants qui semblent simplifier la mise en place de cette solution.

    L'idée d'ajouter un contrôle de diaporama en allant à la dernière diapo et en entrant le mot de passe du "boss" est une caractéristique unique qui peut ajouter un niveau de sécurité supplémentaire à votre présentation.

    Merci d'avoir partagé le code sous licence MIT et la démo en ligne. Cela rendra certainement votre solution plus accessible à ceux qui sont intéressés par cette approche.

    Encore une fois, merci d'avoir partagé cette information. C'est une excellente ressource pour ceux qui cherchent à créer des diaporamas de manière plus flexible

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.