10 Galeria de imágenes en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack

Duración: 16 min
Módulo: 🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap) Lección 10 de 14
Anterior
09 CARDS con BOOTSTRAP en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack
Siguiente
11 Sección de testimonio de clientes en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Descripción

🎬 Lección 10: Galería de imágenes en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack

¡Claro! La Lección 10 se centra en el componente visual esencial para cualquier negocio: la galería de imágenes, donde se aplica a la perfección el sistema de grillas de Bootstrap para un diseño modular.

Diseñando la Galería de Imágenes y Añadiendo Animación ✨

Esta lección utiliza el sistema de Filas y Columnas (Row y Col) de Bootstrap para construir una galería de fotos modular, mostrando diferentes formatos de imágenes dentro de la sección. Además, se añade un toque profesional con una animación de hover para darle vida a la sección. 📸

Puntos clave y técnicas implementadas:

  • Estructura de la Sección:
    • Se crea una nueva sección con la clase CSS .gallery y se le asigna un color de fondo desde el archivo de estilos para diferenciarla. [01:20]
    • Se añade el título "Galería" dentro de un contenedor, manteniendo el patrón de diseño ya establecido. [03:38]
  • Diseño de Grillas para la Galería:
    • Primera Fila (Asimétrica): Se divide la primera fila en dos columnas desiguales, utilizando col-md-4 para una imagen pequeña y col-md-8 para una imagen grande, con un alto uniforme de 350 píxeles para mantener la coherencia visual. [04:51]
    • Segunda Fila (Simétrica): Se estructura una segunda fila con tres imágenes, dividiendo el espacio equitativamente en tres columnas de col-md-4 (col-md-4 x 3 = 12 columnas). [08:26]
  • Efecto de Zoom con CSS (Interacción): 🖱️
    • Se introduce un fragmento de código CSS avanzado para crear un efecto de zoom al pasar el ratón (hover). [11:43]
    • Esta animación se aplica a todas las imágenes de la Galería y, para mejorar la experiencia de usuario, también a los Cards de servicios de la sección anterior. [13:49]

Al finalizar, la galería está completamente estructurada, es adaptable (responsive) y cuenta con una animación elegante al interactuar con las imágenes.

$0.00
Iniciar sesión para inscribirse

Lecciones

🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap)
Lección 1. 01 BIENVENIDA AL CURSO SISTEMA VETERINARIO (PHP y MySql) FullStack 6 min
Lección 2. 02 Hola Mundo SISTEMA VETERINARIO (PHP y MySql) FullStack 11 min
Lección 3. 03 Instalando BOOTSTRAP en el SISTEMA VETERINARIO (PHP y MySql) FullStack 19 min
Lección 4. 04 Menú de navegación NAVBAR con Bootstrap en el SISTEMA VETERINARIO (PHP y MySql) FullStack 16 min
Lección 5. 05 CAROUSEL SLIDE con Bootstrap en el SISTEMA VETERINARIO (PHP y MySql) FullStack 14 min
Lección 6. 06 FILAS Y COLUMNAS con Bootstrap en el SISTEMA VETERINARIO (PHP y MySql) FullStack 20 min
Lección 7. 07 Imagen de fondo en una section de mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack 12 min
Lección 8. 08 Cambiar imagen de fondo segun el tamaño de pantalla en el SISTEMA VETERINARIO(PHP y MySql) FullStack 9 min
Lección 9. 09 CARDS con BOOTSTRAP en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 22 min
Lección 10. 10 Galeria de imágenes en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 16 min
Lección 11. 11 Sección de testimonio de clientes en el SISTEMA VETERINARIO (PHP y MySql) FullStack 8 min
Lección 12. 12 Como poner UBICACIÓN en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack 6 min
Lección 13. 13 Como hacer FORMULARIO en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 17 min
Lección 14. 14 Como hacer el FOOTER en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 21 min
🔐 Autenticación, Sesiones y Base de Datos (Back-End Core)
Lección 1. 15 Instalando ADMINLTE para el login de PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 12 min
Lección 2. 16 LOGIN FORMULARIO en PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack 19 min
Lección 3. 17 Como crear BASE DE DATOS y la tabla USUARIO en el SISTEMA VETERINARIO (PHP y MySql)FullStack 18 min
Lección 4. 18 Conexión a la BASE DE DATOS en el SISTEMA VETERINARIO (PHP y MySql)FullStack 12 min
Lección 5. 19 Pasar variables del FORMULARIO al controlador en el SISTEMA VETERINARIO (PHP y MySql) FullStack 15 min
Lección 6. 20 Consulta SQL para lectura de USUARIOS en el SISTEMA VETERINARIO (PHP y MySql)FullStack 13 min
Lección 7. 21 Maneras de ENCRYPTAR contraseñas de los USUARIOS en el SISTEMA VETERINARIO (PHP y MySql)FullStack 10 min
Lección 8. 22 VERIFICAR contraseñas ENCRYPTADAS de los USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 9 min
Lección 9. 23 DASBOARD principal en el SISTEMA VETERINARIO(PHP y MySql)FullStack 20 min
Lección 10. 24 SESIÓN de USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 10 min
Lección 11. 25 DESTRUIR SESION de los USUARIOS y reducir codigo en el SISTEMA VETERINARIO(PHP y MySql)FullStack 14 min
👤 CRUD Completo de Usuarios (Gestión de Datos)
Lección 1. 26 LISTADO de los USUARIOS desde la BASE DE DATOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 18 min
Lección 2. 27 FORMULARIO para el REGISTRO de USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 19 min
Lección 3. 28 CRUD - CREATE para el REGISTRO de USUARIOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 25 min
Lección 4. 29 ZONA HORARIA para registro de datos en el SISTEMA VETERINARIO(PHP y MySql)FullStack 26 min
Lección 5. 30 Mandar RESPUESTA del CONTROLADOR a la VISTA en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 6. 31 Como INSTALAR mensajes con SWEETALERT2 en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
Lección 7. 32 Como INSTALAR DATATABLES sin morir en el INTENTO en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
Lección 8. 33 DATATABLES en ESPAÑOL MÁS REPORTES Y PAGINACIÓN en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 9. 34 LECTURA de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 17 min
Lección 10. 35 CRUD - UPDATE de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 17 min
Lección 11. 36 CRUD - UPDATE de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 12. 37 CRUD - DELETE de datos de un usuario especifico en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
📦 CRUD Completo de Productos y Relaciones de Tablas
Lección 1. 38 MÓDULO PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 2. 39 Tabla PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 3. 40 CRUD - READ de PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 14 min
Lección 4. 41 Formulario de PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 16 min
Lección 5. 42 Controlador CREATE PRODUCTOS en el SISTEMA VETERINARIO(PHP y MySql)FullStack 12 min
Lección 6. 43 GENERADOR de CÓDIGO FUENTE en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 7. 44 Cargar imagen del PRODUCTO al PROYECTO en el SISTEMA VETERINARIO(PHP y MySql)FullStack 15 min
Lección 8. 45 Mostrar datos del PRODUCTO en el SISTEMA VETERINARIO(PHP y MySql) FullStack 12 min
Lección 9. 46 CONSULTA SQL CON RELACIÓN DE TABLAS en el SISTEMA VETERINARIO(PHP y MySql) FullStack 12 min
Lección 10. 47 LECTURA de datos del PRODUCTO en el SISTEMA VETERINARIO(PHP y MySql) FullStack 12 min
Lección 11. 48 CONTROLADOR para ACTUALIZAR el producto en el SISTEMA VETERINARIO(PHP y MySql) FullStack 11 min
Lección 12. 49 CONTROLADOR para ACTUALIZAR la IMAGEN el producto en el SISTEMA VETERINARIO(PHP y MySql)FullStack 11 min
Lección 13. 50 CONTROLADOR para DELETE el producto en el SISTEMA VETERINARIO(PHP y MySql)FullStack 9 min
🌟 Mejora de la Experiencia y Visualización de Productos
Lección 1. 51 CÓDIGO FUENTE GRATIS del curso de SISTEMA VETERINARIO(PHP y MySql) FullStack 4 min
Lección 2. 52 Mejorando el DASHBOARD principal del curso de SISTEMA VETERINARIO(PHP y MySql)FullStack 10 min
Lección 3. 53 Cargar productos en la página principal del curso de SISTEMA VETERINARIO(PHP y MySql)FullStack 10 min
Lección 4. 54 Cargar productos en la página principal del curso de SISTEMA VETERINARIO (PHP y MySql) FullStack 8 min
📅 Desarrollo del Módulo de Reservas con FullCalendar
Lección 1. 55 Como INSTALAR FULLCALENDAR sin morir en el intento en el SISTEMA VETERINARIO(PHPyMySql) FullStack 11 min
Lección 2. 56 Configurar FULLCALENDAR sin morir en el intento en el SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 3. 57 Tabla en la base de datos para guardar FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack 15 min
Lección 4. 58 De MySQL a JSON para cargar en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 5. 59 Mostrar datos de cada evento y día con FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack 12 min
Lección 6. 60 MODAL de Bootstratp en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack 12 min
Lección 7. 61 Definir los HORARIOS de reservas en FULLCALENDAR en el SISTEMA VETERINARIO(PHPyMySql)FullStack 11 min
Lección 8. 62 Formulario de reservas en FULLCALENDAR en el SISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 9. 63 Formulario de reserva con FECHAS Y HORA en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
🔄 Lógica de Registro, Login y Reservas (Back-End Avanzado)
Lección 1. 64 LOGIN, INICIO DE SESIÓN Y REGISTRO en FULLCALENDAR enSISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 2. 65 Sesión en la página principal en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 3. 66 Sesión en RESERVA de CITAS en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 4. 67 Formulario de REGISTRO en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 10 min
Lección 5. 68 CONTROLLER de REGISTRO en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 6. 69 CONTROLLER de REGISTRO Y LOGIN en FULLCALENDAR en SISTEMA VETERINARIO (PHP y MySql) FullStack 9 min
Lección 7. 70 CARGAR DATOS del usuario en el FORMULARIO de RESERVAS en SISTEMA VETERINARIO (PHPyMySql)FullStack 9 min
Lección 8. 71 Preparando DATOS para registrar reservas con FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 12 min
Lección 9. 72 GENERAR CÓDIGO para guardar reservas con FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 11 min
Lección 10. 73 INCORPORAR AJAX para verificar horarios en FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 9 min
Lección 11. 74 CONTROLLER para verificar horarios en la base de datos FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 9 min
Lección 12. 75 CONTROLLER para verificar horarios en la base de datos FULLCALENDAR en SISTEMA (PHP y MySql) FullStack 12 min
🛡️ Seguridad, Administración de Citas y Cierre
Lección 1. 76 Ajustando el FULLCALENDAR para ESCOGER FECHAS de reservas en SISTEMA (PHP y MySql) FullStack 9 min
Lección 2. 77 Evitar reservas de citas de días anteriores en FULLCALENDAR en el SISTEMA (PHP y MySql) FullStack 12 min
Lección 3. 78 VALIDAR según el CARGO del USUARIO en el SISTEMA (PHP y MySql) FullStack 8 min
Lección 4. 79 MÓDULO RESERVAS en el SISTEMA del panel administrativo (PHP y MySql) FullStack 10 min
Lección 5. 80 CARGAR DATOS completos de las RESERVAS en el SISTEMA (PHP y MySql) FullStack 10 min
Lección 6. 81 Fin del curso Sistema de reserva de CITAS con (PHP y MySql) FullStack 8 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