Lección: 18 Ajustando el BUSCADOR en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK

18 Ajustando el BUSCADOR en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK

Duración: 8 min

Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 18 de 18

Descripción

🔍 Lección 18: Ajustando el Buscador (Frontend)

Esta lección marca el paso final en el diseño del frontend antes de pasar al desarrollo backend con Laravel. El objetivo es ajustar el formulario de búsqueda para que se vea estético, sea funcional y encaje con el diseño general de la plataforma de películas.

1. 📐 Diseño y Dimensionamiento del Formulario [01:05]

El instructor se enfoca en reducir el ancho del buscador, que inicialmente era demasiado grande, y centrarlo en la página.

Método de Centrado y Reducción: Se utiliza la estructura de columnas de Bootstrap dentro de un contenedor (container) y una fila (row) para controlar el tamaño y la posición [02:42].
- Se divide la fila en tres columnas: dos columnas laterales de 3 espacios (col-md-3) y una columna central de 6 espacios (col-md-6) [04:43].
- Esto permite que el buscador ocupe solo el 50% del ancho (3 + 6 + 3 = 12), quedando perfectamente centrado.
Etiqueta de Búsqueda: Se añade la etiqueta "Buscar" (<label>) sobre el campo de entrada, y se le aplica estilo (color blanco, negrita, tamaño de fuente grande y una sombra de texto (text-shadow)) para mejorar su visibilidad y atractivo [03:07].

2. 📝 Personalización de los Componentes del Formulario [04:56]

Se editan los atributos del campo de texto y el botón de acción:

Campo de Entrada (<input>): El atributo placeholder se modifica para guiar al usuario, mostrando el mensaje "Nombre de la película que buscas" [05:04].
Botón de Búsqueda (<button>):
- Se personaliza con la clase de Bootstrap btn-info para darle un color distintivo (azul claro) que combine con la paleta de la web [05:46].
- Se añade el ícono de lupa (bi-search) [06:10] utilizando la librería Bootstrap Icons integrada en lecciones previas.

3. 🎯 Próximo Paso: Transición al Backend [06:52]

La lección concluye señalando que el frontend del proyecto está completado y se establece el plan de trabajo para el siguiente módulo:

Front-End Terminado: Se declara que todas las vistas de interfaz (navegación, botones, carruseles, y el buscador) están listas [06:52].
Enfoque en la Lógica: El próximo paso es el desarrollo del backend con Laravel, que incluirá la implementación de:
- Rutas
- Controladores
- Modelos (para la gestión de la base de datos)
Funcionalidad Esperada: El objetivo es que al interactuar con el buscador o hacer clic en una portada, el sistema muestre una vista de detalles de la película [07:09] (tráiler, descripción, duración, me gusta, vistas, y servidores de streaming).

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web