Crear presentaciones de PowerPoint basadas en la web | Desarrollo front-end

Introducción

En este proyecto, aprenderás a crear una presentación de PowerPoint (PPT) basada en la web utilizando tecnologías de front-end. Este tipo de PPT es más conveniente para la difusión y visualización, y puede aprovechar al máximo la capacidad de diseño y interacción de las tecnologías de front-end.

👀 Vista previa

Web PPT preview demo

🎯 Tareas

En este proyecto, aprenderás:

Cómo implementar la función switchPage para cambiar entre las páginas de la PPT
Cómo manejar la entrada del usuario, como pulsaciones de teclado y clics de botón, para navegar por las páginas de la PPT
Cómo implementar las funciones goLeft y goRight para manejar la navegación entre las páginas de la PPT
Cómo agregar contenido a las diapositivas de la PPT para enseñar los conocimientos básicos de HTML

🏆 Logros

Después de completar este proyecto, podrás:

Crear una presentación de PowerPoint (PPT) basada en la web utilizando tecnologías de front-end
Manipular el DOM para mostrar y ocultar las páginas de la PPT
Manejar la entrada del usuario y actualizar la interfaz de usuario en consecuencia
Estructurar y presentar contenido relacionado con HTML en formato de PPT

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Donde:

css/style.css es la hoja de estilos.
La carpeta images contiene los iconos utilizados en la página.
js/index.js es el archivo JavaScript de la página.
js/jquery-3.6.0.min.js es el archivo jQuery.
index.html es la página principal.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementar la función switchPage

En este paso, aprenderás a implementar la función switchPage para cambiar entre las páginas de la PPT.

Abre el archivo js/index.js.
Localiza la función switchPage y agrega el siguiente código:

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}`);
}

Explicación:

$("section").eq(activeIndex).show().siblings().hide();: Esta línea muestra la página (sección) actual y oculta todas las demás páginas.
$(".btn.left").toggleClass("disable", activeIndex === 0);: Esta línea agrega la clase disable al botón "Anterior" cuando el usuario está en la primera página, y quita la clase cuando el usuario está en cualquier otra página.
$(".btn.right").toggleClass("disable", activeIndex + 1 === sectionsCount);: Esta línea agrega la clase disable al botón "Siguiente" cuando el usuario está en la última página, y quita la clase cuando el usuario está en cualquier otra página.
$(".page").text(${activeIndex + 1} / ${sectionsCount});: Esta línea actualiza la visualización del número de página en la esquina inferior izquierda de la página.

Guarda el archivo js/index.js.

Ahora, la función switchPage está implementada y la funcionalidad de cambio de página debería funcionar como se espera.

Manejar la entrada del usuario

En este paso, aprenderás a manejar la entrada del usuario, como pulsaciones de teclado y clics de botón, para navegar por las páginas de la PPT.

Abre el archivo js/index.js.
Localiza el código del oyente de eventos y agrega el siguiente código:

// Escuchando pulsaciones de teclado del usuario de la barra espaciadora y las teclas de flecha
$(document).on("keydown", (e) => {
  e.preventDefault();
  // TODO
  if (e.key === " " || e.key === "ArrowRight") {
    goRight();
  }
  if (e.key === "ArrowLeft") {
    goLeft();
  }
});

// Escuchando eventos de clic de botón
$(".btn.left").click(goLeft);
$(".btn.right").click(goRight);

Explicación:

El primer oyente de eventos escucha los eventos de pulsación de teclado en el documento. Cuando el usuario presiona la barra espaciadora o la tecla de flecha derecha, se llama a la función goRight(). Cuando el usuario presiona la tecla de flecha izquierda, se llama a la función goLeft().
El segundo conjunto de oyentes de eventos escucha los eventos de clic en los botones "Anterior" y "Siguiente". Cuando el usuario hace clic en el botón "Anterior", se llama a la función goLeft(). Cuando el usuario hace clic en el botón "Siguiente", se llama a la función goRight().

Guarda el archivo js/index.js.

Ahora, se ha implementado el manejo de la entrada del usuario y el usuario puede navegar por las páginas de la PPT utilizando el teclado o los botones.

Implementar las funciones goLeft y goRight

En este paso, aprenderás a implementar las funciones goLeft y goRight para manejar la navegación entre las páginas de la PPT.

Abre el archivo js/index.js.
Localiza las funciones goLeft y goRight y agrega el siguiente código:

// Funciones para cambiar a la siguiente hoja
function goLeft() {
  // TODO
  if (activeIndex === 0) {
    return;
  }
  activeIndex -= 1;
  switchPage();
}

// Funciones para cambiar la hoja anterior
function goRight() {
  // TODO
  if (activeIndex === sectionsCount - 1) {
    return;
  }
  activeIndex += 1;
  switchPage();
}

Explicación:

La función goLeft verifica si el usuario está en la primera página. Si es así, devuelve sin hacer nada. De lo contrario, decrementa la variable activeIndex y llama a la función switchPage para actualizar la visualización.
La función goRight verifica si el usuario está en la última página. Si es así, devuelve sin hacer nada. De lo contrario, incrementa la variable activeIndex y llama a la función switchPage para actualizar la visualización.

Guarda el archivo js/index.js.

Ahora, las funciones goLeft y goRight están implementadas y el usuario puede navegar por las páginas de la PPT utilizando el teclado o los botones.

El efecto final de la página debería ser el siguiente:

Image Description