« Reveal.js » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
 
{{ En construction }}
 
 
== Introduction  ==  
== Introduction  ==  
[https://revealjs.com/ Reveal.js] est une [[Bibliothèques JavaScript|bibliothèque JavaScript]] qui permet de créer des présentations/diaporama en utilisant les technologies du web [[Introduction à HTML5|HTML5]], [[Introduction à CSS|CSS]] et [[JavaScript]] : tout ce qui est possible de faire dans le web peut être fait aussi dans des slides.


Reveal.js est une [[Bibliothèques JavaScript]] proposant une alternative aux présentations traditionnelles de style Powerpoint à l'instar de [http://edutechwiki.unige.ch/fr/Tutoriel_impress.js Impress.js]. Alors que Impress.js est basé sur le CSS (transitions et transformations), Reveal.js est basé sur du CSS et du [[JavaScript]].
De ce fait, la création de slides avec Reveal.js ouvre des potentialités pédagogiques inexprimées avec des présentations construites avec des logiciels plus traditionnels comme PowerPoint ou Keynotes. Parmi les options figurent :
 
Il s'agit d'un framework qui permet de créer des présentations à l'aide de HTML.
 
 
 
== Browsers support ==
 
'''Date de mise à jour''' : Avril 2015
 
'''Mise à jour à consulter sur''' [https://github.com/hakimel/reveal.js/wiki/Browser-Support Reveal.js Browser support]
 
 
On peut classer les browsers en 4 catégories selon leur niveau de support :
 
# Support complet : Chrome, Safari, Firefox, Opera and IE10-11.
 
# Fonctionnalité "Transitions" entre les slides: non supportées par IE9, Firefox 3.6.
 
# Fonctionnalité "toutes les slides à la suite dans une page scrollable" : IE8.
 
# Pas de support : IE7 et version IE inférieures.
 
 
 
Pour résumer, il faut s'assurer d'avoir un browser capable de supporter les transformations CSS en 3D.
 
[[Fichier:Browsersupport revealjs.png]]
 
 
 
Source : site [http://caniuse.com/#search=css%203d Can I Use ?] _ Décembre 2015
 
== Installation de Reveal.js (via Github) ==
 
=== Installation "basique" ===
L'installation de reveal.js est très facile. Il suffit de télécharger une copie du repositoire.
* Télécharger la dernière version de reveal.js de [https://github.com/hakimel/reveal.js Reveal.js] sur Github
* Décompressez et remplacer l'exemple contenu dans index.html avec vos propres données.
* Ouvrir index.html dans un navigateur pour afficher / tester votre présentation
 
 
=== Installation complète ===
 
Certaines fonctionnalités de reveal.js, comme Markdown et external speakers, exigent l'utilisateur d'un serveur web local. Il faut donc que votre machine soit correctement configurée pour accéder à ses fonctionnalités.
 
==== Structures des fichiers ====
 
* '''css'''/ Core styles without which the project does not function
* '''js'''/ Like above but for JavaScript
* '''plugin'''/ Components that have been developed as extensions to reveal.js
* '''lib'''/ All other third party assets (JavaScript, CSS, fonts)
 
==== Mise en place de l'installation complète ====
 
Les instructions suivantes vont mettre en place un serveur ainsi que toutes les tâches de développement nécessaires pour apporter des modifications au code reveal.js source (si cela n'a pas déjà été fait en cours [[STIC:STIC I]]).
 
Sinon, voici la procédure :
 
1. Installer [[Node.js]]
 
2. Installer [http://gruntjs.com/ Grunt]
 
3. Cloner le repositoire [https://github.com/hakimel/reveal.js Reveal.js] sur Github via la ligne de commande
 
<code>$ git clone https://github.com/hakimel/reveal.js.git</code>
 
4. Aller dans le fichier .js de reveal
 
<code>$ cd reveal.js</code>
 
5. Installer les éléments
 
<code>$ npm install</code>
 
6. Accéder à la présentation et faire vos modifications dans le fichier source
 
<code> $ grunt serve </code>
 
7. Ouvrir dans le serveur local <code> http://localhost:8000 </code> pour voir votre présentation. Vous pouvez changer le port et utiliser celui du serveur Grunt --port 8001.
 
 
 
== Créer une présentation étape par étape (explication du code) ==
 
Cette section constitue une explication du code du fichier HTML que vous trouverez dans [https://github.com/hakimel/reveal.js/ Repository Reveal.js]
 
Source de cette section : [http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/ Tutorial for beginners]
 
 
=== Une simple document HTML ....  ===
 
<source lang="HTML5">
<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
</head>
 
<body>
</body>
 
</html>
</source>
 
 
=== Ajouter les stylesheet dans la balise <head>  ===
 
La section <head> doit inclure des références aux feuilles de style "reveal.min.css" et "default.css" (thème par défaut de reveal.js).
 
<source lang="HTML5">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
 
</source>
 
 
Si vous voulez changer de thème, vous trouverez les thèmes dans le directory "css/theme".
 
'''DANS HTML''' :
* >> Essayez par exemple de remplacer "default.css" par "sky.css".
 
 
'''DANS VOTRE BROWSER''' : faites des essais !
* >> Pour visualiser les changements possibles et choisir le thème qui vous convient, veuillez consulter [http://htmlcheats.com/examples/revealjs/switchtheme.html Change theme in Reveal.js]
 
[[Fichier:Reveal.js changethemes.png]]
 
 
=== Ajouter le support pour IE 9 dans le <head> ===
 
<source lang="HTML5">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
</source>
 
 
=== <body>: regrouper le slide show dans une balise 'div' ===
 
L'ensemble de la présentation sera dans une balise <div> dont la classe sera "reveal"
 
<source lang="HTML5">
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
</div>
</body>
</source>
 
 
=== <body> : regrouper les slides dans une balise 'div' ===
 
<source lang="HTML5">
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
</div>
</div>
</body>
</source>
 
 
=== <body> : une slide correspond à une  <section> ===
 
<source lang="HTML5">
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
<!-- Each section element contains an individual slide -->
<section>
<h1>About My Product</h1>
<p>My product discussed here</p>
</section>
</div>
</div>
</body>
</source>
 
 
=== <body>: Charger les références de Javascript ===
 
Les références sont à charger sous le slide show avant la fermeture de la balise <body>
 
<source lang="HTML5">
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
</source>
 
 
=== <body>: Appeler la fonction Reveal.initialize() ===
 
La dernière chose à faire est d'appeler la fonction <code> Reveal.initialize()</code>
 
<source lang="HTML5">
<script>
  // Required, even if empty.
  Reveal.initialize({
    controls: false
  });
</script>
</source>
 
Pour aller plus loin,  vous pouvez jeter un oeil à <code>Reveal.initialize ()</code> dans Github pour voir comment vous pouvez l'utiliser pour personnaliser votre présentation.
 
 
== Relier les slides entre-elles  ==
 
Il existe deux manières de relier les slides entre elles.
 
=== Utiliser la numérotation automatique de Reveal.js ===
 
Reveal.js attribue automatiquement chaque diapositive un numéro commençant par 1, dans l'ordre où ils sont définis dans le fichier HTML.
 
Dans l'exemple ci dessous, dans la "Slide 3", si vous cliquez sur le lien, vous accéderez à la slide 2 (<a href="#/2">). Vous pouvez donc remplacer choisir l'ordre des slides en insérant les numéros qui ont été généré par Reveal.js
 
<source lang="HTML5">
<section>
<h1>Slide 3</h1>
  <p>How does one revisit an arbitrary slide in code?</p>
  <p>Visit internal slide <a href="#/2">2</a>
</section>
</source>
 
Cette technique peut être problématique si vous ajoutez une section par la suite, il ne faut pas oublier de remettre à jour l'ensemble de la numérotation du slide show.
 
Pour pallier ce problème, on peut utiliser la technique présentée dans la section suivante.
 
 
=== Relier les slides en utilisant les ID des <section> ===
 
Pour naviguer entre les slides, ajouter "show-A-Link" comme dans le code suivant:
 
<source lang="HTML5">
<section>
        <h1>Slide 3</h1>
<p>How does one revisit an arbitrary slide in code?</p>
<p>Visit internal slide<a href="#/show-a-link"> 2</a>
</section>
</source>
 
 
 
== Liens ==
 
=== Repositoire Github et tutoriels ===
* [https://github.com/hakimel/reveal.js/ Repository Reveal.js]
 
NB :
Accès au tutoriel en dessous du repositoire
Le fichier source HTML comprend aussi beaucoup d'informations
 
=== Présentation de Reveal.js avec reveal.js ===
* [http://lab.hakim.se/reveal-js/#/15 Présentation Reveal.js]


=== Exemples de présentations ===
* La publication des slides en tant que pages/application web en accès avec un simple navigateur
* [https://github.com/hakimel/reveal.js/wiki/Example-Presentations Example presentations]
* La possibilité d'intégrer facilement des éléments multi-média directement tirés du web comme des images, vidéos, animations, etc.
* [http://lab.hakim.se/reveal-js/#/ Live demo from Github]
* L'implémentation de slides interactives qui exploitent les possiblités de la [[computation avec JavaScript]] et de l'[[interactivité avec JavaScript]]. On peut par exemple intégrer directement dans les slides des quiz, des mécanismes de drag&drop, ou encore des algorithmes aléatoires ou qui s'adaptent aux actions/choix des utilisateurs


=== Plugins, Outils et Hardware ===
En d'autres termes, en exploitant les technologies du web, il est possible de mieux intégrer des principes de l'[[apprentissage multimédia]] dans des supports pédagogiques ''hybrides''. On exploite d'un côté la familiarité des apprenant-es avec les supports de type présentation/diaporama, mais en intégrant en même temps de mécanisme pour augmenter leur contrôle ainsi que leur investissement cognitif dans la fruition des contenus.  
* [https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware Plugins, Tools and Hardware]


Cette page propose un aperçu de ces potentialités avec quelques exemples. Sur le plan technique, la documentation de la bibliothèque est assez bien fournie et cette page évite donc de reproposer tous les aspects qui sont déjà bien traitées ailleurs. 




[[Utilisateur:Lydie BOUFFLERS|Lydie BOUFFLERS ]] 28 décembre 2015 à 19:05 (CET)
[[Category: JavaScript]]
[[Category: JavaScript]]
[[Category: Tutoriel]]
[[Category: Tutoriel]]
[[Category: Ressources STIC]]

Version du 6 octobre 2022 à 15:37

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.


Introduction

Reveal.js est une bibliothèque JavaScript qui permet de créer des présentations/diaporama en utilisant les technologies du web HTML5, CSS et JavaScript : tout ce qui est possible de faire dans le web peut être fait aussi dans des slides.

De ce fait, la création de slides avec Reveal.js ouvre des potentialités pédagogiques inexprimées avec des présentations construites avec des logiciels plus traditionnels comme PowerPoint ou Keynotes. Parmi les options figurent :

  • La publication des slides en tant que pages/application web en accès avec un simple navigateur
  • La possibilité d'intégrer facilement des éléments multi-média directement tirés du web comme des images, vidéos, animations, etc.
  • L'implémentation de slides interactives qui exploitent les possiblités de la computation avec JavaScript et de l'interactivité avec JavaScript. On peut par exemple intégrer directement dans les slides des quiz, des mécanismes de drag&drop, ou encore des algorithmes aléatoires ou qui s'adaptent aux actions/choix des utilisateurs

En d'autres termes, en exploitant les technologies du web, il est possible de mieux intégrer des principes de l'apprentissage multimédia dans des supports pédagogiques hybrides. On exploite d'un côté la familiarité des apprenant-es avec les supports de type présentation/diaporama, mais en intégrant en même temps de mécanisme pour augmenter leur contrôle ainsi que leur investissement cognitif dans la fruition des contenus.

Cette page propose un aperçu de ces potentialités avec quelques exemples. Sur le plan technique, la documentation de la bibliothèque est assez bien fournie et cette page évite donc de reproposer tous les aspects qui sont déjà bien traitées ailleurs.