Implementar una página web similar a un portal

Introducción

En este proyecto, aprenderás cómo implementar una funcionalidad similar a un portal en una página web. La característica del portal permite a los usuarios localizar y navegar rápidamente hacia el contenido deseado en una página web larga.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar los archivos y la estructura del proyecto
• Cómo implementar la funcionalidad del portal utilizando JavaScript y jQuery
• Cómo garantizar que los botones laterales cambien de color según la posición de desplazamiento del usuario

🏆 Logros

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

• Estructurar y configurar un proyecto de desarrollo web
• Utilizar JavaScript y jQuery para manipular el DOM y manejar las interacciones del usuario
• Implementar una característica similar a un portal para mejorar la experiencia del usuario en una página web larga

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:

1. Abre la carpeta del proyecto. La estructura del directorio es la siguiente:

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

2. En esta estructura:

   • index.html es la página principal.
   • css es la carpeta para los archivos de estilo.
   • images es la carpeta para los recursos de imágenes.
   • js/index.js es el archivo JS que se debe completar.
   • js/jquery-3.6.0.min.js es el archivo de la biblioteca jQuery.

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

4. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementar la funcionalidad del portal

En este paso, completarás el código en el archivo js/index.js para implementar la función del portal.

1. Agrega el siguiente código al archivo js/index.js:

$(window).scroll(function () {
  // Cuando la página se desplaza al rango especificado, los botones laterales correspondientes cambian de color.
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // Haz clic en el botón para desplazarse a la posición especificada.
  window.scrollTo(0, scrollTopVal);
}

2. Explicación:
   • La función $(window).scroll() se utiliza para detectar la posición de desplazamiento de la página.
   • Cuando la página se desplaza al rango especificado, el botón lateral correspondiente se le da un estilo activo (.active-color), y los estilos de los otros botones se establecen en el predeterminado (.default-color).
   • La función toFunction() se utiliza para desplazar la página a la posición especificada cuando el usuario hace clic en los botones laterales.

Probar la funcionalidad del portal

1. Vuelve al navegador y actualiza la página.
2. Haz clic en el botón superior, medio o inferior del lado de la página y observa cómo la página se desplaza al rango correspondiente.
3. Verifica que el botón lateral correspondiente se le dé un estilo activo (.active-color) cuando la página se desplaza al rango especificado.

El resultado final se muestra a continuación:

¡Felicidades! Has implementado con éxito la funcionalidad del portal en tu proyecto.

Resumen

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