Maquetación y Estilos para Sección de Películas Favoritas

Clase 15 de 20 • Curso de API REST con Javascript: Performance y Usabilidad

Clase anteriorSiguiente clase

Resumen

¿Cómo preparar la interfaz visual para marcar y gestionar películas favoritas?

Explorar nuevas formas de interactuar con una aplicación web puede ser una experiencia gratificante tanto para los desarrolladores como para los usuarios. En esta clase, se crea la interfaz visual para una sección dedicada a las películas favoritas, preparando el camino para integrar el almacenamiento local en futuras clases. Este segmento cubre el proceso de maquetación HTML y el diseño de CSS, para dar vida a una funcionalidad clave en aplicaciones de gestión de contenido.

¿Cómo se estructura el nuevo layout con HTML?

El primer paso en la creación de nuestra sección es definir claramente el conjunto de elementos HTML que la compone. Aquí se hace hincapié en la reutilización de estructuras de código ya establecidas, manteniendo una consistencia en la nomenclatura y estilo de la página.

  1. Creación de Sección:
    • Se crea una sección con un identificador like-it y una clase like-it-container para las películas favoritas.
    • Dentro de esta sección, se define un encabezado like-it-header con un h2 titulado "Películas Favoritas", que recibe la clase like-it-title.
  2. Lista de Películas:
    • Se declara un article con la clase like-it-movie-list para contener las películas.
    • Las películas serán dinámicamente insertadas con JavaScript a partir de datos almacenados localmente.
<section id="like-it" class="like-it-container">
  <div class="like-it-header">
    <h2 class="like-it-title">Películas Favoritas</h2>
  </div>
  <article class="like-it-movie-list">
    <!-- Aquí se insertan las películas -->
  </article>
</section>

¿Cómo aplicar estilos CSS adecuados?

Con el HTML en su lugar, se procede a estilizar la sección utilizando CSS, enfatizando la importancia de la coherencia visual mediante la reutilización de estilos de las secciones ya existentes.

  1. Estilos de Sección:

    • Se aplican padding y margin-top similares a otras secciones para lograr coherencia.
    • Se agregan estilos para compatibilidad con scroll horizontal.

  2. Diseño del Botón de Favoritos:

    • Se introduce un botón que permitirá marcar las películas como favoritas. Este botón se posiciona con position:absolute encima de cada imagen de película.
    • Se define un border-radius para darle una forma circular, y se estiliza con un icono de corazón.
.like-it-header {
  margin-bottom: 10px;
}

.like-it-movie-list {
  display: flex;
  overflow-x: auto;
}

.movie-button {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
}

.movie-button:before {
  content: '❤️';
  font-size: 1.3em;
}

¿Cómo se integra JavaScript para la interactividad?

Para añadir interactividad y funcionalidad, se introduce JavaScript, que nos permitirá manipular las películas favoritas desde el lado del cliente.

  1. Creación del Botón:

    • Un botón para cada película es creado y se le añade un event listener para el evento click, el cual realizará el toggle de almacenamiento local.

  2. Preparación para el Almacenamiento Local:

    • Aunque la lógica de almacenamiento no se implementa en esta clase, se estructura la función para facilitar su integración futura.
const movieButton = document.createElement('button');
movieButton.classList.add('movie-button');
movieButton.addEventListener('click', () => {
  // Aquí se integrará la función para almacenar la película como favorita
  movieButton.classList.toggle('movie-button-like');
});

¿Qué problemas comunes pueden surgir y cómo resolverlos?

Desarrollar una interfaz compleja implica resolver problemas emergentes como fallos en el posicionamiento del botón causado por conflictos en el event listener o la necesidad de ajustar los estilos para mejorar la experiencia de usuario. Aquí, manejar correctamente el position y ajustar botones para evitar acciones no deseadas es fundamental para una implementación exitosa.

  1. Conflictos de Event Listener:

    • Garantizar que los clics se registren donde es necesario, ajustando el listener para ignorar eventos no deseados.

  2. Mejorar la Visibilidad del Botón:

    • Aplicar un z-index adecuado asegura que los elementos se superpongan correctamente.

Esta clase sienta las bases de una función visualmente atractiva y permite que las secciones futuras implementen integración completa con almacenamiento local, ofreciendo una experiencia de usuario mejorada.