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

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(16 versions intermédiaires par 5 utilisateurs non affichées)
Ligne 9 : Ligne 9 :


=== Principe ===
=== Principe ===
Comme pour prézi (allez voir la page, lien ci dessus), une présentation impress.js est composée de plusieurs "steps".  
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 :   
La vue d'ensemble peut donner ceci :   
Ligne 24 : Ligne 24 :


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


Chaque type de balises est associé à une classe CSS qui redéfinit le style de certaines balises HTML
Chaque type de balise est associé à une classe CSS, qui redéfinit le style de certaines balises HTML.
<source lang="html5" enclode="div">
<source lang="html5" enclode="div">
  <div id="slide1" class="step slide" data-x="-1000" data-y="-1000">
  <div id="slide1" class="step slide" data-x="-1000" data-y="-1000">
Ligne 39 : Ligne 39 :
</source>
</source>


Liste de balises HTML stylés:
Liste de balises HTML stylées:
* h1, ul, ol, li, p, q, big, b
* h1, ul, ol, li, p, q, big, b


Ligne 66 : Ligne 66 :
</source>
</source>


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


=== Pages à consulter pour précisions ===
=== Pages à consulter pour précisions ===
Ligne 91 : Ligne 91 :
       C'est ici que vous allez insérer les différents slides .....
       C'est ici que vous allez insérer les différents slides .....
   </div>
   </div>
  <script type="text/javascript" src="impress.js"></script>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript">impress().init();</script>
  <script type="text/javascript" src="js/impress.js"></script>
</body>
</body>
</html>
</html>
Ligne 98 : Ligne 98 :


=== Organisation du fichier HTML et Insertion de slides ===
=== Organisation du fichier HTML et Insertion de slides ===
Tout d'abord, notez que tous vos "steps"  doivent être insérées dans une balise les englobant toutes :  '''<nowiki><div id="impress"> (un peu comme un sous "body") </nowiki>'''donc AVANT d'insérer les codes de vos steps,  il faut vous assurer que cette balise est bien présente.
Tout d'abord, notez que tous vos "steps"  doivent être insérés dans une balise les englobant tous :  '''<nowiki><div id="impress"> (un peu comme un sous "body") </nowiki>'''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:
Ensuite, pour créer des slides:
Ligne 117 : Ligne 117 :
<body>
<body>
   <div id="impress">
   <div id="impress">
<div id="slide1" class="step slide">
        <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>
             <p style = 'font-size:40px; text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p>
     </div>
     </div>
   </div>
   </div>
  <script type="text/javascript" src="impress.js"></script>
   <script type="text/javascript">impress().init();</script>
   <script type="text/javascript">impress().init();</script>
  <script type="text/javascript" src="js/impress.js"></script>
</body>
</body>
</html>
</html>
</source>
</source>


=== Explication du code ===
==== 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.
* 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.


* Le id du cadre permet de l'identifier. 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.
* L'attribut '''<code>id="..."</code>''' 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 <code>class="..."</code> à cet effet (voir point suivant).  


* Tous les slides doivent avoir 'step' comme valeur pour l'attribut 'class'. Les autres valeurs pour l'attribut class permettent de définir l'aspect qu'on veut donner au slide (ici c'est la valeur slide qui a été choisie), voir point 1.
* '''Tous les slides doivent avoir <code>class="step"</code>'''. Souvenez-vous que vous pouvez passer plus d'une classe dans l'attribut avec le format <code>class="step slide"</code>. 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. <code>class="step slide very-important all-center"</code>


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


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'.
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 <code>impress()</code> qui donne un accès à l'API contrôlant la présentation. Cela donne accès à quatre fonctions utilisables:
* <code>impress().init()</code> : initialise la présentation
* <code>impress().next()</code> : bouge à la prochaine étape de la présentation
* <code>impress().prev()</code> : bouge à la précédente étape de la présentation
* <code>impress().goto() ( idx | id | element, [duration])</code> : 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.
<source lang="html5">
<script src="impress.js"></script>
<script>impress().init();</script>
<script>impress().goto(slide5,0)</script>
</source>
== 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.
<source lang="HTML5">
<div id="impress">
  <!-- Commentaire -->
  <div id="intro" class="step">
    ...
  </div>
  <!-- Commentaire -->
  <div id="citation" class="step">
    ...
  </div>
</div>
</source>
Essayez d'utiliser des commentaires saillants qui expliquent le contenu de la slide plutôt que leur position. En d'autres termes '''évitez'''
<source lang="HTML5">
<!-- Première slide -->
<!-- Deuxième slide -->
...
</source>
car vous pouvez par la suite décider de modifier votre ordre. '''Utilisez plutôt des petits explications du contenu''' :
<source lang="HTML5">
<!-- Titre de la présentation -->
<!-- Sommaire -->
<!-- Introduction à la problématique de l'échec scolaire -->
<!-- Données du sondage -->
...
</source>
== 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 <code></body></code> et d'initialiser le script à travers l'instruction <code>impress.init()</code>
* Au niveau du fichier .css, il faut l'inclure dans le <code><head>...</head></code> de votre page comme tout autre feuille de style
Voir [[Tutoriel_JavaScript_c%C3%B4t%C3%A9_client#Fichier_externe|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 <code>id="impress"</code>
<source lang="HTML5">
<div id="impress">
  <!-- Toutes les slides à l'intérieur de ce div -->
</div>
</source>
; Les slides se superposent l'un sur l'autre
C'est un problème déterminé par les attributs <code>data-x="..."</code> et <code>data-y="..."</code>, ou, en moindre mesure, par l'attribut <code>data-z="..."</code>. 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 ==
== Liens ==
Ligne 209 : Ligne 295 :
; Books
; Books
* Rakhitha Nimesh Ratnayake (2013), [http://www.packtpub.com/building-impressive-presentations-with-impressjs/book Building Impressive Presentations with impress.js], Packt Publishers, ISBN 1849696489
* Rakhitha Nimesh Ratnayake (2013), [http://www.packtpub.com/building-impressive-presentations-with-impressjs/book Building Impressive Presentations with impress.js], Packt Publishers, ISBN 1849696489
; Alternatives
* [[Reveal.js]]
* [https://webslides.tv/ WebSlides]
* [https://remarkjs.com Remark]


[[Catégorie:JavaScript]]
[[Catégorie:JavaScript]]

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

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

Premiers pas pour une présentation simple

Fichiers à télécharger

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
Example code using in this page
Exemples
Tutorials
CSS transformation (on which impress.js is based)
Books
Alternatives
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Tutoriel_impress.js&oldid=93623 »