« Tutoriel impress.js » : différence entre les versions
(→Liens) |
m (→Liens) |
||
(4 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 117 : | Ligne 117 : | ||
<body> | <body> | ||
<div id="impress"> | <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> | <p style = 'font-size:40px; text-align:center'>Ceci est notre premier slide qui utilise le script impress.js </p> | ||
</div> | </div> | ||
Ligne 127 : | Ligne 127 : | ||
</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. | ||
* | * 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 ' | * '''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 199 : | Ligne 199 : | ||
<script>impress().init();</script> | <script>impress().init();</script> | ||
<script>impress().goto(slide5,0)</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> | </source> | ||
Ligne 227 : | Ligne 268 : | ||
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). | 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 253 : | 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 à 08: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 :
![](/fmediawiki/images/thumb/c/ce/Impress.js-3.png/600px-Impress.js-3.png)
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
:diapositivenormal
: item normal (pas de look de type "slide", c'est-à-dire un "fond transparent")note
: petites notesthoughts
: grandes pensées exprimées avec une seule phrasepicture
: 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'attributclass="..."
à 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 formatclass="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ésentationimpress().next()
: bouge à la prochaine étape de la présentationimpress().prev()
: bouge à la précédente étape de la présentationimpress().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'instructionimpress.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
- Exemples
- 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