« Tutoriel impress.js » : différence entre les versions

Dernière version du 11 avril 2018 à 07:56

Cet article est incomplet.

Il est jugé trop incomplet dans son développement ou dans l'expression des concepts et des idées. Son contenu est donc à considérer avec précaution.

Définition

Impress.js est une technologie de présentation qui s'appuie sur les transformations et transitions CSS3.

Selon Bartek Szopka, le créateur, l'idée lui est venue quand il jouait avec les transformations CSS. Prezi.com en a inspiré le design.

L'utilisateur doit coder la présentation en HTML et adapter la feuille de style CSS à ses besoins.

Principe

Comme pour prézi (allez voir la page, lien ci-dessus), une présentation impress.js est composée de plusieurs "steps".

La vue d'ensemble peut donner ceci :

An impression of the overall presentation canvas (from the impress.js demo)

L'objectif est de pouvoir rendre une présentation dynamique et originale.

Exemple

Regardez test.html (y compris le code source!)

Notre code CSS définit cinq types de "steps" (traduit par "item"):

slide:diapositive
normal: item normal (pas de look de type "slide", c'est-à-dire un "fond transparent")
note: petites notes
thoughts: grandes pensées exprimées avec une seule phrase
picture: images avec une petite légende

Chaque type de balise est associé à une classe CSS, qui redéfinit le style de certaines balises HTML.

 <div id="slide1" class="step slide" data-x="-1000" data-y="-1000">
  ....
  </div>
  <div id="slide3" class="step note" data-x="200" data-y="-1100" data-scale="0.2">
    <p>One <b>bold</b> idea</p>
  </div>

Liste de balises HTML stylées:

h1, ul, ol, li, p, q, big, b

	slide	normal	note	thoughts	picture
h1	Very large and up	Very large	no	no	no
ul,ol,li	yes	yes	no	no	no
p	yes	yes	no	very large	small (use for captions)
q	yes	yes	no	very large	rotated, red and 500px down (adjust if needed)
big	yes	yes	yes	yes	no
b	yes	yes	yes	yes	no

A la fin de votre code HTML, n'oubliez pas:

  <div id="overview" class="step" data-x="1800" data-y="1500" data-scale="8">
  </div>
</html>

Cette manipulation vous permettra d'avoir une vue d'ensemble (vue carte).

Pages à consulter pour précisions

Tutoriel en anglais (plus complet): en:Impress.js
Démonstration et exemples : github.com

Premiers pas pour une présentation simple

Fichiers à télécharger

Directory: http://tecfa.unige.ch/guides/impress.js/impress-demo-1/
test.html
impress.js
impress-min-presi.css

Squelette de votre page HTML

<html>
   <head>
     <link href="impress-min-presi.css" rel="stylesheet" />
      <title>Impress Demo</title>
   </head>
<body>
   <div id="impress">
      C'est ici que vous allez insérer les différents slides .....
   </div>
   <script type="text/javascript" src="impress.js"></script>
   <script type="text/javascript">impress().init();</script>
</body>
</html>

Organisation du fichier HTML et Insertion de slides

Tout d'abord, notez que tous vos "steps" doivent être insérés dans une balise les englobant tous : <div id="impress"> (un peu comme un sous "body") donc AVANT d'insérer les codes de vos steps, il faut vous assurer que cette balise est bien présente.

Ensuite, pour créer des slides:

Le code suivant insère un premier slide appelé 'slide1'

<div id="slide1">
    <p style='width:1000px; font-size:80px; text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p>
</div>

Voici à quoi ressemblera le code de notre fichier html:

<html>
   <head>
     <link href="impress-min-presi.css" rel="stylesheet" />
      <title>Impress Demo</title>
   </head>
<body>
   <div id="impress">
        <div id="slide1" class="step slide">
            <p style = 'font-size:40px; text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p>
    	</div>
   </div>
   <script type="text/javascript" src="impress.js"></script>
   <script type="text/javascript">impress().init();</script>
</body>
</html>

Explication du code

Votre page html doit être liée à la feuille de style impress-min-presi.css. Ceci est indispensable afin de pouvoir afficher correctement votre présentation. D'autre part vous devez vous assurer que le fichier impress-min-presi.css soit accessible depuis votre page html.

L'attribut id="..." du cadre permet de l'identifier, il faut donc utiliser des valeurs différentes pour chaque slide. Le script impress.js l'utilise pour faire la transition d'un slide à un autre. Si vous ne mentionnez pas cet identificateur, le script utilisera des valeurs par défaut. A noter que ces identificateurs peuvent être utilisés pour formater vos slides, même si c'est plus indiqué d'utiliser l'attribut class="..." à cet effet (voir point suivant).

Tous les slides doivent avoir class="step". Souvenez-vous que vous pouvez passer plus d'une classe dans l'attribut avec le format class="step slide". Les autres valeurs permettent de définir l'aspect qu'on veut donner au slide. Ici c'est la valeur slide qui a été choisie, mais on aurait pu choisir normal, picture, etc. (voir plus haut dans la page). De plus, vous pouvez ajouter par la suite vos propres classes, e.g. class="step slide very-important all-center"

Tout ce qui est à l'intérieur de la balise 'div' sera affiché dans ce premier slide.

Les effets d'animations

Les mouvements de translations

Les attributs suivants définissent les coordonnées du centre de chaque slide: data-x, data-y, data-z

Exemple: Un slide avec les coordonnées de son centre = (x, y) = (100, 0)

<div id="slide2" class="step" data-x="100" data-y="0">
Le slide suivant a les coordonnées x=100 et y=0	                    
</div>

En changeant les coordonnées x,y,z on simule un mouvement de translation d'un slide vers un autre.

Les mouvements de rotations

Les attributs suivants définissent un mouvement de rotation selon l'axe des x,y ou z: data-rotate-x, data-rotate-y, data-rotate-z

Exemple: Un slide qui apparaîtra avec une rotation de 90 degrés dans le sens des aiguilles d'une montre.

<div id="slide2" class="step" data-scale-x=’90′>
Ce slide tournera de 90 degrés dans le sens des aiguilles d'une montre.	 
Autre mouvement de rotation plus large
<div id="slide3" class="step" data-x="2800" data-z="3000" data-rotate="300" data-scale="1">
Le data-z donne une impression de zoom, associé au data-rotate, qui donne une rotation large                   
</div>

L'effet de redimensionnement

Avec l'attribut data-scale, vous pouvez créer un effet de redimensionnement d'un slide vers un autre. Par exemple: Si la valeur de l'attribut data-scale du slide affiché est égale à 1 et 2 pour le slide suivant, alors ce dernier sera 2 fois plus grand que le premier.

<div id="slide8" data-scale='3'>
Si la valeur de l'attribut data-scale du slide précédent vaut 1 alors le présent slide sera 3 fois plus grand	                    
</div>

Les coordonnées xyz

Les valeurs utilisées pour x,y,z définissent les coordonnées du centre du slide concerné.

Par exemple:

<div id="slide1" class="step" data-x="0" data-y="0"  data-z="0">

Définit les coordonnées du centre du slide à (0,0,0).

x représente l'axe horizontal et permet de simuler les mouvements horizontaux, y est l'axe verticale et permet de faire des mouvements dans le sens haut-bas et z donne l'effet de 'profondeur'.

Mécaniques de transitions

De base, les transitions sont scriptées pour que les slides s'affichent les unes après les autres. Il est possible d'influer sur cet ordre grâce à la fonction impress() qui donne un accès à l'API contrôlant la présentation. Cela donne accès à quatre fonctions utilisables:

impress().init() : initialise la présentation
impress().next() : bouge à la prochaine étape de la présentation
impress().prev() : bouge à la précédente étape de la présentation
impress().goto() ( idx | id | element, [duration]) : bouge la présentation à l'étape choisie. La première variable définit l'étape par son numéro d'index, son id ou son élément DOM, la seconde définit la durée de la transition en millisecond (ms).

Cette dernière fonction est très intéressante car elle permet d'agir précisément sur la présentation.

Exemple: Aller au slide n°5 à l'initialisation de la présentation sans temps de transition. On change la mécanique de transition car le slide précédent sera le n°4 et le suivant le n°6.

<script src="impress.js"></script>
<script>impress().init();</script>
<script>impress().goto(slide5,0)</script>

Utilisation des commentaires pour organiser/diviser les slides

Lorsque le nombre de slides dans votre présentation augmente, vous pouvez rencontrer des difficultés dans l'organisation du code, surtout au niveau de l'emboîtement des balises. Pour surmonter cette problématique, vous pouvez utiliser des commentaires HTML pour signaler les slides, ainsi qu'une bonne indentation du code pour pouvoir se repérer dans l'arborescence des balises.

<div id="impress">
  <!-- Commentaire -->
  <div id="intro" class="step">
    ...
  </div>
  <!-- Commentaire -->
  <div id="citation" class="step">
    ...
  </div>
</div>

Essayez d'utiliser des commentaires saillants qui expliquent le contenu de la slide plutôt que leur position. En d'autres termes évitez

<!-- Première slide -->

<!-- Deuxième slide -->

...

car vous pouvez par la suite décider de modifier votre ordre. Utilisez plutôt des petits explications du contenu :

<!-- Titre de la présentation -->

<!-- Sommaire -->

<!-- Introduction à la problématique de l'échec scolaire -->

<!-- Données du sondage -->

...

Résolution des problèmes les plus fréquents

Pour des débutants avec Impress.js, mais également avec HTML5 et CSS, il y a plusieurs éléments qui peuvent entraver le fonctionnement de la présentation ou créer des différences entre les attentes et le résultat dans le navigateur. Ici de suite, nous proposons une liste des problèmes les plus fréquents.

Manque ou mauvais pointage aux fichiers nécessaires

Un des problèmes les plus fréquents concerne l'absence ou le mauvais pointage au fichier JavaScript nécessaire pour créer les effets des slides et/ou au fichier CSS pour styliser les slides.

Au niveau du fichier .js, il est important d'inclure le fichier JavaScript avant le tag de clôture </body> et d'initialiser le script à travers l'instruction impress.init()
Au niveau du fichier .css, il faut l'inclure dans le <head>...</head> de votre page comme tout autre feuille de style

Voir comment inclure un fichier JavaScript externe pour plus d'informations. Le même principe s'applique, avec la balise correspondante, pour les CSS.

Manque du div "principale"

Pour que les différentes slides soient prises en compte, il faut les inclure toutes à l'intérieur d'un div "principale" qui doit avoir l'attribut id="impress"

<div id="impress">
  <!-- Toutes les slides à l'intérieur de ce div -->
</div>

Les slides se superposent l'un sur l'autre

C'est un problème déterminé par les attributs data-x="..." et data-y="...", ou, en moindre mesure, par l'attribut data-z="...". Modifier les valeurs numériques de ces attributs règle le problème. Si ce n'est pas le cas, il est probable que votre slide se trouve en dehors du div principale (voir problème précédent).

Liens

Official

Impress.js homepage
impress.js tutorials and other learning resources (links)
Examples and demos (links)
Source code It's the documentation

Example code using in this page

http://tecfa.unige.ch/guides/impress.js

Exemples

Design et fabrication digital dans l'éducation

Tutorials

How To Use Impress.Js, Posted on January 4, 2012
No More Powerpoint I Have Impress.js, Paulund, Updated: March 31st, 2013

CSS transformation (on which impress.js is based)

en:CSS transforms tutorial
CSS Transforms Level 1, W3C working draft
CSS transform documentation at mozilla.org.
Browser compatibility table at mozilla.org

Books

Rakhitha Nimesh Ratnayake (2013), Building Impressive Presentations with impress.js, Packt Publishers, ISBN 1849696489

Alternatives

« Tutoriel impress.js » : différence entre les versions