Il existe de nombreuses façons de créer des diapositives pour une présentation sous Linux. Vous pouvez utiliser OpenOffice, LibreOffice ou même Microsoft Office (via Wine). Votre présentation terminée sera soit un fichier .odp (format OpenDocument) ou .ppt (format Powerpoint), que vous utiliserez via les suites mentionnées ci-dessus (ou une application de visualisation) pour faire votre présentation. Sans le bon logiciel installé, la présentation ne peut pas être visionnée. Ne serait-il pas formidable si vous pouviez créer une présentation qui s’exécute dans un navigateur Web, une présentation construite à l’aide de HTML, Javascript et CSS ? Grâce à impress.js, c’est possible !
impress.js est un puissant framework de présentation CSS et Javascript. Il fournit toutes les bibliothèques et fichiers CSS nécessaires pour créer des présentations complexes et visuellement inspirantes en utilisant HTML. Mais un mot d’avertissement avant de continuer, l’utilisation d’impress.js dans sa forme brute consiste à créer des fichiers à l’aide d’éditeurs de texte et à écrire manuellement le code HTML. Il n’y a pas d’interface graphique sophistiquée ici, pas de WYSIWYG.
Noter: Bien que le didacticiel présenté ici soit réalisé sur une plate-forme Linux, les étapes sont les mêmes quelle que soit la plate-forme de système d’exploitation que vous utilisez. Impress.js est un script basé sur le Web et est compatible avec plusieurs plates-formes.
Pour commencer, téléchargez impress.js depuis github. Le moyen le plus simple consiste à exécuter la commande suivante à partir de la ligne de commande :
Et décompressez-le :
Dans le dossier « impress.js-master », il y a deux sous-dossiers – CSS et JS, qui contiennent respectivement les fichiers impress.js CSS et Javascript. Vous n’avez vraiment pas besoin de fouiller dans le dossier Javascript, mais le dossier CSS contient le fichier CSS de démonstration que vous voudrez peut-être modifier pour vos propres présentations. Vous trouverez également un exemple de présentation impress.js dans le fichier index.html. À l’aide de Nautilus, ouvrez le dossier « impress.js-master » et double-cliquez sur index.html. Cela ouvrira votre navigateur Web par défaut (espérons-le, Firefox ou Chrome) et démarrera la présentation.
Voici comment créer une présentation simple basée sur l’exemple de fichier CSS (« css/impress-demo.css ») fourni avec impress.js. Créez un fichier HTML à l’aide d’un éditeur de texte. Vous pouvez utiliser un éditeur de texte comme gEdit, ou vous pouvez le créer à l’aide de nano sur la ligne de commande comme ceci :
Insérez le code suivant dans le fichier, puis enregistrez et quittez (CTRL-X).
Tous les fichiers HTML sont divisés en sections qui commencent par une balise d’ouverture (par exemple
) et se terminent par la même balise mais avec une barre oblique ajoutée (par exemple ). Dans la section « « , la balise « » définit quel fichier CSS doit être utilisé (c’est-à-dire css/impress-demo.css). Au fur et à mesure que vous progresserez avec impress.js, vous devrez créer votre propre fichier CSS.Dans la section
, il y a une sectionChaque diapositive a un attribut data-x et data-y qui définit la position des diapositives. La valeur y reste la même pour les trois diapositives, mais la valeur x change. Il commence par -1000 puis passe à 0 et enfin à 1000. Le résultat est que les diapositives se déplacent de gauche à droite au fur et à mesure de la présentation. En modifiant les valeurs x et y, vous pouvez faire passer les diapositives dans la direction de votre choix.
A la fin du fichier HTML se trouvent deux lignes qui chargent le script impress.js puis initialisent la bibliothèque impress.js (par exemple impress().init).
Pour tester le fichier, double-cliquez sur demo1.html depuis Nautilus.
Les transitions impress.js peuvent également inclure une rotation. Ajoutez cette diapositive à votre présentation :
L’attribut data-rotate indique à impress.js de faire pivoter la fenêtre de 90 degrés pendant la transition. La valeur est absolue, donc une autre diapositive avec la valeur 90 ne pivotera pas si la diapositive précédente avait une rotation des données de 90. Testez la nouvelle présentation dans votre navigateur Web.
Un autre attribut intéressant est l’échelle des données (c’est-à-dire le zoom). Cela peut donner à votre présentation un style 3D en effectuant un zoom avant et arrière sur le canevas au fur et à mesure que la présentation progresse.
Pour voir l’effet de zoom, ajoutez la diapositive suivante à votre présentation :
Zoom, en plus cela ne ressemble pas à une diapositive
Il y a quelques points à noter à propos de cette dernière diapositive. Tout d’abord, il omet la classe « slide ». Cela signifie que la diapositive sera présentée sans le fond blanc tel que défini dans l’exemple de fichier CSS. Deuxièmement, notez les valeurs de data-rotate et data-scale. L’attribut data-rotate ramène le canevas à 0 degré (à partir de la rotation de 90 degrés dans la diapositive précédente). L’attribut data-scale permet à impress.js d’effectuer un zoom pendant la transition. Pour voir à quoi cela ressemble, testez la présentation dans votre navigateur.
Maintenant que vous maîtrisez quelques diapositives simples, essayez de lire index.html et « css/impress-demo.css » pour voir comment la démo est construite. Le fichier index.html contient de nombreux commentaires pour vous guider à travers les différents éléments et classes.
Si vous avez des questions sur les exemples donnés ci-dessus, veuillez utiliser la section commentaires ci-dessous et nous verrons si nous pouvons vous aider.
Cet article est-il utile ? Oui Non
