html-slides est un modèle permettant de créer des diapositives de présentation qui s'exécutent directement dans un navigateur Web. Pour voir ces diapositives en action, jetez un œil au diaporama de démonstration.
Fonctionnalités de présentation
Fonctionnalités des diapositives
Pour créer la présentation à partir de vos diapositives, Node.js doit être installé sur l'ordinateur.
La présentation peut être affichée avec n'importe lequel des principaux navigateurs Web (Firefox, Chrome, Edge, Safari, Opera, ...) et ne nécessite aucun logiciel supplémentaire.
Téléchargez ou clonez le référentiel html-slides et commencez à créer votre présentation dans le dossier template . Vous n'avez besoin de rien en dehors de ce dossier et pouvez le renommer ou le déplacer.
Le dossier template contient les fichiers et dossiers suivants :
slides contient vos diapositives et ses ressources multimédias.index.build.html contient la liste des diapositives.deploy rassemble vos diapositives dans un seul fichier index.html .index.html est la présentation générée.style contient le fichier de style CSS ( style.inc.css ) et les polices. Vous pouvez ajuster les polices et les couleurs par défaut ici.skeleton contient le code HTML, CSS et JavaScript pour transformer vos diapositives en présentation. Vous n'avez pas besoin de modifier quoi que ce soit ici. Une diapositive est généralement un fichier contenant quelques lignes de code HTML ou un fichier SVG. Pour les diapositives vidéo uniquement ou image uniquement, le squelette fournit un code HTML prédéfini.
Le fichier index.build.html contient le titre et la séquence de diapositives de la présentation :
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >La première et la dernière ligne importent le squelette de présentation et doivent rester telles quelles. Chaque diapositive prend les paramètres suivants :
L'extension du fichier détermine le type de diapositive :
.inc.html sont des diapositives HTML (voir ci-dessous)..inc.svg sont des diapositives SVG (voir ci-dessous)..mp4 , .webm ou .ogg sont des diapositives vidéo uniquement. Ils aboutissent à un lecteur vidéo affiché sur la diapositive. Ils sont plus beaux avec le style « noir »..png , .jpg ou .jpeg sont des diapositives contenant uniquement des images. Les styles appropriés sont « noir » (pour placer l'image sur un fond noir) et « couverture » (pour couvrir toute la diapositive).Les diapositives sont préparées pour une taille de 1000 x 600 pixels. En mode présentation, ils sont dimensionnés pour s'adapter à la taille de l'écran.
Une simple diapositive HTML ( slides/slide-name.inc.html ) avec des puces se présente comme suit :
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >La diapositive affiche une image (balise img) sur le côté droit (400 pixels) et utilise les 600 pixels restants sur la gauche pour le titre de la diapositive (balise h1) et les puces (balise ul, balise ol, balise li).
Le modèle contient des exemples de positionnement de texte et d'images et d'insertion de tableaux.
Le format SVG ( slides/slide-name.inc.svg ) convient aux diapositives contenant des graphiques vectoriels, tels que des diagrammes ou des schémas. Ces diapositives peuvent être dessinées à l'aide d'Inkscape ou de tout autre logiciel capable d'enregistrer ou d'exporter des fichiers SVG.
Le document SVG (page) doit avoir une taille de 1 000 x 600 pixels ( width="1000" height="600" ). Le code SVG subit un certain nettoyage lors de l'importation. En particulier, les informations spécifiques à Inkscape et les identifiants par défaut (par exemple, rect1098 ) sont supprimés.
Pour reconstruire la présentation ( index.html ), ouvrez une fenêtre de terminal (ligne de commande) et exécutez
./deploy/run
Le script continue de rechercher des modifications et reconstruit index.html si nécessaire. Pour le quitter, appuyez sur Ctrl-C dans la fenêtre du terminal.
Le script de déploiement vérifie grossièrement votre code HTML. Il avertit notamment si les balises ne sont pas correctement fermées.
Pour démarrer la présentation, appuyez sur F11 pour activer le plein écran et p pour passer en mode présentation . Utilisez les touches fléchées gauche/droite (ou Page Up / Page Down ) du clavier pour passer à la diapositive précédente/suivante. Sur les appareils mobiles, vous pouvez balayer vers la gauche/droite.
Le bouton de menu dans le coin supérieur droit (trois bandes) ouvre l'index des diapositives. En cliquant sur n’importe quelle diapositive, vous accédez à cette diapositive.
Si vous activez une autre fenêtre (ou iframe dans les diapositives) pendant la présentation, le bouton de menu devient rouge pour indiquer que les touches fléchées (pour passer à la diapositive suivante) ne fonctionnent pas. Cliquer sur ce bouton rouge focalisera à nouveau la présentation et fera fonctionner les touches fléchées.
De nombreux navigateurs permettent d'imprimer les diapositives. Chaque diapositive tient sur une page paysage A4.
Lorsque vous connectez un projecteur comme écran externe, vous pouvez afficher la présentation sur les deux écrans.
Pour cela, ouvrez la même présentation dans deux fenêtres de navigateur distinctes (du même navigateur). Placez une fenêtre sur l'écran principal et l'autre fenêtre sur l'écran externe (en mode plein écran). Les deux fenêtres afficheront toujours la même diapositive.
Notez que le contenu interactif peut ne pas toujours être synchronisé.
Une présentation exécutée sur un ordinateur portable peut être contrôlée à distance par un téléphone mobile. Cela nécessite une connexion Internet, car les messages de contrôle sont envoyés via un serveur (https://viereck.ch/remote/).
Pour configurer cela :
Les vidéos sont insérées à l'aide de la balise vidéo :
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Les navigateurs Web prennent en charge une variété de formats vidéo. MP4, ou format vidéo MPEG-4/H.264, est pris en charge par presque tous les navigateurs Web. Les navigateurs les plus populaires lisent également les fichiers WebM (video/webm) ou Ogg/Theora (video/ogg).
De même, les fichiers audio sont insérés à l'aide de la balise audio .
Une diapositive avec une vidéo en plein écran peut simplement être créée à partir de l'index des diapositives :
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ; L'index des diapositives peut être structuré en utilisant topic et subTopic :
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >Les sujets et sous-thèmes apparaissent uniquement dans l'index des diapositives. Ils n'ont aucun effet sur les diapositives ou le flux de la présentation.
Les fichiers JavaScript nommés slides/slide-name.inc.js sont automatiquement insérés avec leur diapositive respective. JavaScript permet de créer des diapositives avancées avec des simulations, des animations, des éléments interactifs, etc.
Un simple script de diapositive peut ressembler à ceci :
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ; Le code est exécuté lorsque la présentation est chargée. slide est une référence à la diapositive correspondante, un élément <div> . Lorsque la diapositive apparaît à l'écran, la fonction onSlideAppears est appelée. À l’inverse, onSlideDisappears est appelé lorsque la diapositive disparaît. Il est recommandé d'exécuter des animations uniquement lorsque la diapositive est visible. Notez que plusieurs diapositives peuvent être visibles en même temps.
Pour éviter les conflits de noms de variables et de fonctions, le code JavaScript de la diapositive est placé dans une fonction anonyme. Une diapositive générée a la structure suivante :
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div > Les diapositives peuvent toujours communiquer entre elles via l'objet window :
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
... Les identifiants des éléments doivent être uniques sur toute la page HTML. Les diapositives doivent donc les préfixer avec un nom de diapositive unique ( fancySlide dans l'exemple ci-dessus).
Les diapositives interactives peuvent synchroniser leur état avec d'autres instances via le contrôle à distance (voir ci-dessus). Notez que ceci est destiné uniquement à de petites quantités de données, telles que quelques chiffres, un identifiant d'élément ou un court texte.
L'exemple suivant utilise sendState et un écouteur d'état pour synchroniser le contenu d'une entrée de texte :
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
