Constructor de presentaciones HTML basado en la web

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

🎯 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

Skills Graph

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.

1. Abre el archivo js/index.js.
2. 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.

3. 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.

1. Abre el archivo js/index.js.
2. 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().

3. 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.

1. Abre el archivo js/index.js.
2. 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.

3. 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:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.