Lección: 06 Incorporando BOOTSTRAP 5 en la PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK

06 Incorporando BOOTSTRAP 5 en la PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK

Duración: 9 min

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

Descripción

🎨 Lección 06: Incorporando Bootstrap 5 para el Diseño Frontend

Esta es la primera lección del módulo de diseño, cuyo objetivo es integrar el framework CSS/JS Bootstrap 5 para acelerar el desarrollo de la interfaz de usuario. Se establece la base visual del proyecto con la inclusión de estilos y componentes preconstruidos, comenzando por la barra de navegación.

1. ⚙️ Redireccionamiento de la Ruta Raíz [00:35]

Para empezar a trabajar en la interfaz pública, se modifica la configuración inicial de rutas:

Cambio de Vista: Se edita el archivo de rutas (web.php) para que la ruta principal (/) ya no retorne la vista de bienvenida (welcome.blade.php), sino que ahora apunte a la vista index.blade.php [00:44].
Propósito: Este cambio asegura que el usuario vea la página principal de la plataforma de películas al acceder a la URL raíz del dominio [01:10].

2. 📝 Configuración Inicial de la Vista Index [01:32]

Se comienza a estructurar el archivo index.blade.php, que será la página de inicio pública:

Título SEO: Se establece el título de la pestaña del navegador (el tag <title>) con el nombre del proyecto ("Yo quiero ver | Plataforma de Películas") [01:47]. Se enfatiza que esto es importante para el SEO (Optimización para Motores de Búsqueda) [02:10].

3. 🌐 Integración de Bootstrap 5 y jQuery [02:31]

Se procede a integrar las librerías necesarias para el diseño y las funcionalidades dinámicas:

Inclusión de CSS (Bootstrap): Se copia y pega la etiqueta <link> CDN de Bootstrap 5 dentro del tag <head> del archivo index.blade.php para incorporar todos los estilos del framework [02:46].
Inclusión de Funcionalidad (JS/jQuery): Se explica que muchos componentes de Bootstrap (como el menú desplegable en dispositivos móviles) requieren JavaScript y jQuery para funcionar.
- Se incluye la librería jQuery en la cabecera [05:12].
- Se incluye el bundle de JavaScript de Bootstrap (que contiene Popper.js) al final del tag <body> para habilitar todas las funcionalidades dinámicas [06:01].

4. 🧭 Inclusión de la Barra de Navegación (Navbar) [03:38]

Como primera prueba de la integración de Bootstrap, se incorpora el menú de navegación principal:

Selección de Componente: Se accede a la documentación de Bootstrap para copiar un componente de barra de navegación (navbar) que incluye un nombre de marca, enlaces de navegación y un campo de búsqueda [04:25].
Resultado: Se pega el código en el <body> y, después de incluir los archivos JS/jQuery, se comprueba que la barra de navegación funciona correctamente y es completamente responsive (se adapta a dispositivos móviles) [06:25].
Justificación: Se concluye que utilizar frameworks preconstruidos permite agilizar el desarrollo del proyecto, cumpliendo con las expectativas del cliente en el menor tiempo posible [07:37].

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