« Créer des présentations interactives avec Reveal.js » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « {{ En construction }} == Introduction == Reveal.js est une bibliothèque JavaScript qui permet de créer des présentations avec le... »)
 
Ligne 12 : Ligne 12 :


Les exemples créés dans cet article, ainsi que le code source, sont disponibles dans un dépôt GitHub :
Les exemples créés dans cet article, ainsi que le code source, sont disponibles dans un dépôt GitHub :
{{ Goblock | [https://github.com/MALTT-STIC/stic-1-revealjs-exemples MALTT-STIC/stic-1-revealjs-exemples] }}
Les exemples utilisent le template proposé dans la page [[Reveal.js]], adapté à la création de plusieurs présentations dans le même dossier/dépôt. À ce propos, la structure des fichiers est exploitée pour ajouter les [[Bibliothèques JavaScript|bibliothèques JavaScript]] externes.
== Principe de base ==
L'exemple <code>01-principe-de-base</code> illustre le fonctionnement de l'interactivité dans une présentation. Ceci consiste tout simplement à exploiter le [[Document Object Model|DOM]] du [[HTML5]] de la page en tant que ''toile'' pour identifier les éléments qu'on veut rendre interactifs et les éléments à modifier suite aux manipulations de l'utilisateur.


[[Category: JavaScript]]
[[Category: JavaScript]]
[[Category: Tutoriel]]
[[Category: Tutoriel]]
[[Category: Ressources STIC]]
[[Category: Ressources STIC]]

Version du 12 décembre 2022 à 12:43

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 avec les technologies du web HTML5, CSS et JavaScript. Cet article décrit le développement de quelques présentations avec cette bibliothèque dans lesquels la composantes interactives est musclée avec des notions de computation avec JavaScript et interactivité avec JavaScript.

Pré-requis

Le fonctionnement général de la bibliothèque est décrit dans l'article Reveal.js. Ces aspects ne sont pas repris dans cette page qui se focalise sur les aspects plus interactifs et liés à la programmation avec JavaScript. Des connaissances de base en HTML5, CSS et JavaScript sont donc nécessaires pour comprendre et savoir adapter/répliquer les exemples.

Accès aux exemples et au code source

Les exemples créés dans cet article, ainsi que le code source, sont disponibles dans un dépôt GitHub :

Les exemples utilisent le template proposé dans la page Reveal.js, adapté à la création de plusieurs présentations dans le même dossier/dépôt. À ce propos, la structure des fichiers est exploitée pour ajouter les bibliothèques JavaScript externes.

Principe de base

L'exemple 01-principe-de-base illustre le fonctionnement de l'interactivité dans une présentation. Ceci consiste tout simplement à exploiter le DOM du HTML5 de la page en tant que toile pour identifier les éléments qu'on veut rendre interactifs et les éléments à modifier suite aux manipulations de l'utilisateur.