10 Comó poner ICONOS en nuestra PÁGINA WEB - PLATAFORMA DE PELICULAS con(LARAVEL y MYSQL)FULLSTACK

Duración: 8 min
Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 10 de 18
Anterior
09 Comó añadir FUENTES TIPOGRAFICAS en nuestra PLATAFORMA DE PELICULAS con(LARAVEL y MYSQL)FULLSTACK
Siguiente
11 Comó poner BOTONES DE REDES SOCIALES en mi PÁGINA WEB - PLATAFORMA con(LARAVELyMYSQL)FULLSTACK

Descripción

🌟  Lección 10: Integración de Íconos con Bootstrap Icons

Esta lección se enfoca en mejorar la interactividad y la estética del frontend mediante la inclusión de íconos en botones y elementos de navegación. El instructor utiliza la librería Bootstrap Icons, demostrando un método rápido y eficiente para enriquecer la experiencia de usuario con elementos visuales.

1. 🌐 Incorporación de la Librería de Íconos [01:41]

Se explica cómo incluir la librería de íconos en el proyecto, aprovechando que ya se está utilizando Bootstrap:

  • Librería Elegida: Se utiliza Bootstrap Icons, la biblioteca oficial de íconos diseñada para trabajar fluidamente con Bootstrap 5.
  • Instalación: Se requiere solo una línea de código (un tag <link> CDN) para instalar la librería completa en la cabecera del proyecto (index.blade.php), lo que da acceso a una vasta colección de íconos [02:10].

2. 🖱️ Aplicación de Íconos en Botones y Navegación [02:20]

Se muestra la sintaxis sencilla para usar cualquier ícono de la librería mediante etiquetas <i> (o <span>) con clases específicas:

  • Botones Interactivos:
    • Se añade el ícono de Facebook a un botón de redes sociales, proporcionándole más vida y claridad al usuario [02:58].
    • Se crea un botón de ejemplo de Descarga de Películas, donde se inserta el ícono de download (download) y se aplican clases de Bootstrap para darle un tamaño mayor (btn-lg) y un color primario [04:47].
  • Menú de Navegación:
    • Se mejora el enlace "Inicio" en el navbar agregando un ícono de casa (house), lo que es un estándar visual para la navegación [04:16].

3. 🎨 Ventajas Estéticas y Funcionales [06:25]

La lección concluye enfatizando los beneficios de usar librerías de íconos en el desarrollo frontend:

  • Estética: Los íconos añaden un nivel de elegancia y atractivo a los botones y menús, mejorando la interacción del usuario.
  • Eficiencia: El uso de una línea de código para importar toda la librería permite a los desarrolladores ahorrar tiempo en lugar de tener que gestionar imágenes individuales para cada ícono.
  • Sencillez: Se subraya la facilidad con la que se pueden agregar íconos en cualquier parte del HTML utilizando una clase de CSS simple [06:48].
$0.00
Iniciar sesión para inscribirse

Lecciones

🏗️ Módulo de Fundamentos y Diseño Base
Lección 1. 01 Presentación del CURSO - PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK 8 min
Lección 2. 02 Creación de la PLATAFORMA DE PELICULAS (hola mundo)con (LARAVEL y MYSQL) FULLSTACK 10 min
Lección 3. 03 AGREGANDO LA AUTENTICACIÓN EN LA PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK 5 min
Lección 4. 04 MIGRACIONES EN LA BASE DE DATOS EN LA PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK 12 min
Lección 5. 05 ROUTES EN LARAVEL PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK 10 min
Lección 6. 06 Incorporando BOOTSTRAP 5 en la PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK 9 min
Lección 7. 07 Poniendo Imagen de fondo en la PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK 7 min
Lección 8. 08 Comó poner ICONO en nuestra PESTAÑA en la PLATAFORMA DE PELICULAS con (LARAVEL y MYSQL) FULLSTACK 6 min
Lección 9. 09 Comó añadir FUENTES TIPOGRAFICAS en nuestra PLATAFORMA DE PELICULAS con(LARAVEL y MYSQL)FULLSTACK 9 min
Lección 10. 10 Comó poner ICONOS en nuestra PÁGINA WEB - PLATAFORMA DE PELICULAS con(LARAVEL y MYSQL)FULLSTACK 8 min
Lección 11. 11 Comó poner BOTONES DE REDES SOCIALES en mi PÁGINA WEB - PLATAFORMA con(LARAVELyMYSQL)FULLSTACK 11 min
Lección 12. 12 Comó hacer ANIMACIONES en mi PÁGINA WEB - PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK Animate.css 6 min
Lección 13. 13 Modificando el menu con todos los ITEMS en la PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK (parte 1) 8 min
Lección 14. 14 Modificando el menu con todos los ITEMS en la PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK (parte 2) 9 min
Lección 15. 15 Comó CREAR SLIDE o CAROUSEL de imágenes en nuestra PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK 8 min
Lección 16. 16 SLIDE de IMÁGENES en nuestra PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK 6 min
Lección 17. 17 Ajustando el FRONTEND del SLIDE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK 10 min
Lección 18. 18 Ajustando el BUSCADOR en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK 8 min
🖥️ Módulo de Arquitectura Admin y Vistas Blade
Lección 1. 19 Comó INTEGRAR ADMINLTE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL)FULLSTACK 10 min
Lección 2. 20 Comó crear MIGRACIONES de nuestras TABLAS en la PLATAFORMA de PELICULAS (LARAVELyMYSQL)FULLSTACK 12 min
Lección 3. 21 Creación de MODELOS y CONTROLADORES en la PLATAFORMA de PELICULAS (LARAVELyMYSQL)FULLSTACK 6 min
Lección 4. 22 ORM Eloquent LECTURA DE DATOS en la PLATAFORMA de PELICULAS (LARAVELyMYSQL)FULLSTACK 13 min
Lección 5. 23 Comó crear PLANTILLAS BLADE en la PLATAFORMA de PELICULAS con (LARAVELyMYSQL) FULLSTACK 7 min
Lección 6. 24 Comó EXTENDER PLANTILLAS BLADE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL) FULLSTACK 7 min
Lección 7. 25 Ajustando el menu del AdminLTE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL) FULLSTACK 7 min
Lección 8. 26 @yield('content') en LAYOUT en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL) FULLSTACK 6 min
📝 Módulo CRUD: Creación y Formularios
Lección 1. 27 CRUD (READ) de la tabla peliculas en la PLATAFORMA con (LARAVEL y MYSQL) FULLSTACK 10 min
Lección 2. 28 Comó crear CONTROLLER con RESOURCE en la PLATAFORMA de PELÍCULAS con (LARAVEL y MYSQL) FULLSTACK 10 min
Lección 3. 29 Comó crear FORMULARIOS WEB en la PLATAFORMA de PELÍCULAS con (LARAVEL y MYSQL) FULLSTACK 13 min
Lección 4. 30 HABILITANDO el metodo STORE para guardar datos en la PLATAFORMA con (LARAVEL y MYSQL) FULLSTACK 8 min
Lección 5. 31 Protección contra ataque en tus FORMULARIOS WEB en la PLATAFORMA con (LARAVEL y MYSQL) FULLSTACK 8 min
Lección 6. 32 REGISTRAR DATOS desde el FORMULARIO WEB en la PLATAFORMA con (LARAVEL y MYSQL) FULLSTACK 8 min
Lección 7. 33 Comó usar CKEDITOR en nuestro FORMULARIO WEB super facil y rapido con (LARAVEL y MYSQL) FULLSTACK 8 min
Lección 8. 34 Cargar IMAGEN de INPUT FILE en el formulario web antes de registrar datos(LARAVELyMYSQL)FULLSTACK 6 min
🔒 Módulo de Validación y Seguridad
Lección 1. 35 REQUIRED validación en el formulario web FRONTEND (LARAVELyMYSQL)FULLSTACK 7 min
Lección 2. 36 VALIDATION de FORMULARIO WEB desde el BACKEND (LARAVELyMYSQL)FULLSTACK 8 min
Lección 3. 37 VALIDATION @error mostrar el error en FORMULARIO WEB desde el BACKEND (LARAVELyMYSQL)FULLSTACK 7 min
Lección 4. 38 VALIDATION OLD retorna el valor del FORMULARIO WEB desde el BACKEND (LARAVELyMYSQL)FULLSTACK 7 min
🖼️ Módulo de Almacenamiento y Archivos
Lección 1. 39 Comó SUBIR archivos del FORMULARIO WEB a SERVIDOR (LARAVELyMYSQL)FULLSTACK 9 min
Lección 2. 40 Comó REDIRIGIR a otras páginas con (LARAVEL y MYSQL)FULLSTACK 7 min
Lección 3. 41 Comó CARGAR las IMAGÉNES desde STORAGE con (LARAVEL y MYSQL)FULLSTACK 8 min
Lección 4. 42 Trabajando con el archivo SHOW.BLADE.PHP con (LARAVEL y MYSQL)FULLSTACK 10 min
Lección 5. 43 Cargando DATOS en el archivo SHOW.BLADE.PHP con (LARAVEL y MYSQL)FULLSTACK 16 min
🔄 Módulo CRUD: Actualización y Eliminación
Lección 1. 44 CRUD (UPDATE) trabajando con el archivo EDIT.BLADE.PHP con (LARAVEL y MYSQL)FULLSTACK 9 min
Lección 2. 45 CRUD (UPDATE) actualizando datos y reemplazando la imgen con (LARAVEL y MYSQL)FULLSTACK 17 min
Lección 3. 46 CRUD (DELETE) eliminar registros de la tabla de la BASE de DATOS con (LARAVEL y MYSQL)FULLSTACK 8 min
Lección 4. 47 INSTALANDO SWEETALERT2 en nuestra página de películas con (LARAVEL y MYSQL)FULLSTACK 12 min
🚀 Módulo de Despliegue y Optimización
Lección 1. 48 Dominio Público para nuestro proyecto con (LARAVEL y MYSQL)FULLSTACK 7 min
Lección 2. 49 Comó subir PROYECTO DE LARAVEL a un servidor de HOSTING con (LARAVEL y MYSQL)FULLSTACK 13 min
Lección 3. 50 Comó MEDIR la VELOCIDAD de nuestra PÁGINA WEB con PINGDOM con (LARAVEL y MYSQL)FULLSTACK 9 min
Lección 4. 51 Comó CREAR BASE de DATOS en HOSTING y CONECTAR AL PROYECTO con (LARAVEL y MYSQL)FULLSTACK 13 min
Lección 5. 52 Comó subir proyecto de LARAVEL a CPANEL de otra manera con (LARAVEL y MYSQL)FULLSTACK 4 min
Lección 6. 53 Necesito de tu AYUDA para continuar con el CURSO con (LARAVEL y MYSQL)FULLSTACK 8 min
📺 Módulo de IPTV: CRUD Completo
Lección 1. 54 Agregando el MÓDULO IPTV a la plataforma de películas con (LARAVEL y MYSQL)FULLSTACK 9 min
Lección 2. 55 Creando el MODELO, EL CONTROLADOR Y LA MIGRACIÓN los 3 en 1 con (LARAVEL y MYSQL)FULLSTACK 5 min
Lección 3. 56 CRUD Read lectura de datos de la tabla de IPTVs con (LARAVEL y MYSQL)FULLSTACK 10 min
Lección 4. 57 CRUD Create vista formulario para registrar datos de IPTVs con (LARAVEL y MYSQL)FULLSTACK 13 min
Lección 5. 58 CRUD Create GUARDANDO datos desde el CONTROLLER función STORE con(LARAVEL y MYSQL)FULLSTACK 6 min
Lección 6. 59 Comó almacenar archivos en la BASE de DATOS desde el FORMULARIO con(LARAVEL y MYSQL)FULLSTACK 7 min
Lección 7. 60 Controller SHOW datos de los registros de la BASE de DATOS con(LARAVEL y MYSQL)FULLSTACK 5 min
Lección 8. 61 Validación de datos en el FRONTEND y BACKEND de FORMULARIOS WEB con(LARAVEL y MYSQL)FULLSTACK 13 min
Lección 9. 62 Cargar datos para EDITAR REGISTROS desde LA TABLA de la BASE de DATOS con(LARAVELyMYSQL)FULLSTACK 9 min
Lección 10. 63 CRUD UPDATE datos de IPTV desde la TABLA de la BASE de DATOS con(LARAVELyMYSQL)FULLSTACK 10 min
Lección 11. 64 CRUD DELETE datos de IPTV desde la TABLA de la BASE de DATOS con (LARAVEL y MYSQL)FULLSTACK 6 min
🎬 Módulo de Vistas Públicas y Funcionalidades Core
Lección 1. 65 Comó hacer CONEXIÓN con FILEZILLA a HOSTING SERVIDOR web con (LARAVEL y MYSQL)FULLSTACK 10 min
Lección 2. 66 Comó actualizar CÓDIGO FUENTE de LOCAL a PRODUCCIÓN SERVIDOR HOSTING con(LARAVELyMYSQL)FULLSTACK 7 min
Lección 3. 67 Te comparto más de 14000 canales de IPTV con (LARAVEL y MYSQL) FULLSTACK 8 min
Lección 4. 68 Comó hacer un CAROUSEL ITEMS en cualquier PÁGINA WEB con (LARAVELyMYSQL)FULLSTACK 6 min
Lección 5. 69 Cargar PELÍCULAS en página PRINCIPAL con (LARAVEL y MYSQL) FULLSTACK 9 min
Lección 6. 70 Adaptar CAROUSEL de PELICULAS desde la TABLA de la BASE de DATOS con (LARAVEL y MYSQL) FULLSTACK 7 min
Lección 7. 71 Cargar PELÍCULAS por CATEGORIAS en cada SECCIÓN de mi PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK 9 min
Lección 8. 72 Cargar DATOS de una PELÍCULA en ESPECÍFICO con (LARAVEL y MYSQL) FULLSTACK 9 min
Lección 9. 73 Cargando todos los DATOS en la VISTA PELÍCULAS de nuestra PÁGINA WEB (LARAVEL y MYSQL) FULLSTACK 14 min
Lección 10. 74 Poniendo ANIMACIÓN al CAROUSEL VISTA PELÍCULAS de nuestra PÁGINA WEB (LARAVEL y MYSQL) FULLSTACK 6 min
Lección 11. 75 Implementación del Reproductor de IPTV en la PÁGINA WEB (LARAVEL y MYSQL) FULLSTACK 12 min
Lección 12. 76 Cargar CANALES DE IPTV desde LA BASE DE DATOS en la PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK 10 min
Lección 13. 77 Cargar DATOS DEL CANAL desde LA BASE DE DATOS en la PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK 8 min
Lección 14. 78 Cargar DATOS en la VISTA DEL CANAL con el REPRODUCTOR en PÁGINA WEB con(LARAVELyMYSQL)FULLSTACK 5 min
Lección 15. 79 FUNCIÓN BUSCAR PELÍCULAS en mi PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK 9 min
Lección 16. 80 ADAPTANDO LA RESPUESTA DE LA BUSQUEDA DE PELÍCULAS en mi PÁGINA WEB con(LARAVEL y MYSQL)FULLSTACK 3 min
✨ Módulo de Experiencia de Usuario y Cierre
Lección 1. 81 AUTENTICACIÓN de USUARIOS en NUESTRA PLATAFORMA con (LARAVEL y MYSQL) FULLSTACK 7 min
Lección 2. 82 PERSONALIZAR el HOME de los USUARIOS con (LARAVEL y MYSQL) FULLSTACK 9 min
Lección 3. 83 Formulario para AGREGAR A FAVORITOS en la tabla de la BASE de DATOS con(LARAVEL y MYSQL)FULLSTACK 10 min
Lección 4. 84 CRUD - CREATE a FAVORITOS en la TABLA de la BASE de DATOS con (LARAVEL y MYSQL)FULLSTACK 7 min
Lección 5. 85 CRUD - READ FAVORITOS desde la TABLA de la BASE de DATOS con (LARAVEL y MYSQL)FULLSTACK 9 min
Lección 6. 86 CRUD - READ cargar PELÍCULAS FAVORITAS desde la BASE de DATOS con (LARAVEL y MYSQL)FULLSTACK 12 min
Lección 7. 87 Formulario para AGREGAR a HISTORIAL de PELÍCULAS con (LARAVEL y MYSQL)FULLSTACK 11 min
Lección 8. 88 CARGAR DATOS del HISTORIAL de PELÍCULAS con (LARAVEL y MYSQL)FULLSTACK 13 min
Lección 9. 89 Cargar las PELÍCULAS MÁS VISTOS en mi PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK 14 min
Lección 10. 90 Cargar los DATOS de las PELÍCULAS MÁS VISTOS en mi PÁGINA WEB con (LARAVEL y MYSQL) FULLSTACK 10 min
Lección 11. 91 FIN DEL CURSO PORQUE ME BLOQUEARON con (LARAVEL y MYSQL) FULLSTACK 4 min

Apoya este proyecto

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

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso