Créer des présentations PowerPoint basées sur le web | Développement front-end

Introduction

Dans ce projet, vous allez apprendre à créer une présentation PowerPoint (PPT) basée sur le web à l'aide de technologies front-end. Ce type de PPT est plus pratique pour la diffusion et la visualisation, et peut exploiter pleinement les capacités de mise en page et d'interaction des technologies front-end.

👀 Aperçu

Web PPT preview demo

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment implémenter la fonction switchPage pour passer d'une page à l'autre dans la présentation PPT
Comment gérer les entrées de l'utilisateur, telles que les pressions de touches et les clics sur les boutons, pour naviguer entre les pages de la présentation PPT
Comment implémenter les fonctions goLeft et goRight pour gérer la navigation entre les pages de la présentation PPT
Comment ajouter du contenu aux diapositives de la présentation PPT pour enseigner les bases du HTML

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Créer une présentation PowerPoint (PPT) basée sur le web à l'aide de technologies front-end
Manipuler le DOM pour afficher et cacher les pages de la présentation PPT
Gérer les entrées de l'utilisateur et mettre à jour l'interface utilisateur en conséquence
Structurer et présenter le contenu lié au HTML au format PPT

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── css
│   └── style.css
├── images
│   ├── left-small.svg
│   └── right-small.svg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

Où :

css/style.css est la feuille de style.
Le dossier images contient les icônes utilisées dans la page.
js/index.js est le fichier JavaScript de la page.
js/jquery-3.6.0.min.js est le fichier jQuery.
index.html est la page principale.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Implémenter la fonction switchPage

Dans cette étape, vous allez apprendre à implémenter la fonction switchPage pour passer d'une page à l'autre dans la présentation PPT.

Ouvrez le fichier js/index.js.
Localisez la fonction switchPage et ajoutez le code suivant :

function switchPage() {
  $("section").eq(activeIndex).show().siblings().hide();
  $(".btn.left").toggleClass("disable", activeIndex === 0);
  $(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);
  $(".page").text(`${activeIndex + 1} / ${sectionsCount}`);
}

Explication :

$("section").eq(activeIndex).show().siblings().hide(); : Cette ligne affiche la page (section) actuelle et masque toutes les autres pages.
$(".btn.left").toggleClass("disable", activeIndex === 0); : Cette ligne ajoute la classe disable au bouton "Précédent" lorsque l'utilisateur est sur la première page, et supprime la classe lorsqu'il est sur une autre page.
$(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount); : Cette ligne ajoute la classe disable au bouton "Suivant" lorsque l'utilisateur est sur la dernière page, et supprime la classe lorsqu'il est sur une autre page.
$(".page").text(${activeIndex + 1} / ${sectionsCount}); : Cette ligne met à jour l'affichage du numéro de page dans le coin inférieur gauche de la page.

Enregistrez le fichier js/index.js.

Maintenant, la fonction switchPage est implémentée et la fonction de navigation entre les pages devrait fonctionner comme prévu.

Gérer l'entrée de l'utilisateur

Dans cette étape, vous allez apprendre à gérer les entrées de l'utilisateur, telles que les pressions de touches et les clics sur les boutons, pour naviguer entre les pages de la présentation PPT.

Ouvrez le fichier js/index.js.
Localisez le code d'écoute d'événements et ajoutez le code suivant :

// Écoute des pressions de touches de l'utilisateur
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// Écoute des événements de clic sur les boutons
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

Explication :

Le premier écouteur d'événements écoute les événements de pression de touches sur le document. Lorsque l'utilisateur appuie sur la barre d'espace ou sur la flèche droite, la fonction goRight() est appelée. Lorsque l'utilisateur appuie sur la flèche gauche, la fonction goLeft() est appelée.
Le second ensemble d'écouteurs d'événements écoute les événements de clic sur les boutons "Précédent" et "Suivant". Lorsque l'utilisateur clique sur le bouton "Précédent", la fonction goLeft() est appelée. Lorsque l'utilisateur clique sur le bouton "Suivant", la fonction goRight() est appelée.

Enregistrez le fichier js/index.js.

Maintenant, la gestion des entrées de l'utilisateur est implémentée et l'utilisateur peut naviguer entre les pages de la présentation PPT en utilisant le clavier ou les boutons.

Implémenter les fonctions goLeft et goRight

Dans cette étape, vous allez apprendre à implémenter les fonctions goLeft et goRight pour gérer la navigation entre les pages de la présentation PPT.

Ouvrez le fichier js/index.js.
Localisez les fonctions goLeft et goRight et ajoutez le code suivant :

// Fonctions pour passer à la feuille suivante
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Fonctions pour passer à la feuille précédente
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

Explication :

La fonction goLeft vérifie si l'utilisateur est sur la première page. Si c'est le cas, elle retourne sans faire rien. Sinon, elle décrémente la variable activeIndex et appelle la fonction switchPage pour mettre à jour l'affichage.
La fonction goRight vérifie si l'utilisateur est sur la dernière page. Si c'est le cas, elle retourne sans faire rien. Sinon, elle incrémente la variable activeIndex et appelle la fonction switchPage pour mettre à jour l'affichage.

Enregistrez le fichier js/index.js.

Maintenant, les fonctions goLeft et goRight sont implémentées et l'utilisateur peut naviguer entre les pages de la présentation PPT en utilisant le clavier ou les boutons.

L'effet final de la page devrait être le suivant :

Image Description