Crear una galería de fotos accesible es un proyecto práctico para quienes conocen los fundamentos de HTML, CSS y JavaScript y quieren convertirlos en una experiencia de navegación completa. Crearás una exposición local en la que las miniaturas, las imágenes a tamaño completo, los títulos y las descripciones mantengan su correspondencia al navegar.
Los laboratorios guiados desarrollan paso a paso la distribución de la galería y el visor de detalles. Un desafío independiente te propone aplicar las mismas técnicas a otra exposición, con fotografías de títulos iguales, títulos largos y proporciones diferentes. Cada laboratorio empieza con sus propios archivos preparados.
Lo que aprenderás
Al completar el curso, podrás:
- relacionar cada ID estable de fotografía con la miniatura, la imagen a tamaño completo, el texto alternativo y el pie de foto correctos;
- crear una galería adaptable con HTML semántico y un foco de teclado visible;
- utilizar el elemento nativo
dialogpara mostrar una fotografía y mantener sincronizados su imagen, título y descripción durante la navegación; - indicar claramente los límites de la primera y la última fotografía, cerrar el visor con
Escy devolver el foco a la tarjeta que lo abrió; - mostrar un mensaje comprensible cuando falle la carga de una imagen, sin sustituirla silenciosamente por otra fotografía, y corregir una ruta de archivo incorrecta.
A quién va dirigido este curso
Este curso está dirigido a quienes quieren combinar ejercicios web individuales para crear una exposición fotográfica utilizable.
Requisitos previos: Conocer los elementos HTML, la distribución básica con CSS y los objetos, las funciones, la manipulación del DOM y los eventos de JavaScript. Debes saber abrir y guardar archivos del proyecto. Los laboratorios guiados presentan la semántica específica de la galería, el comportamiento del diálogo nativo y la gestión del foco. No necesitas React.
Entorno de aprendizaje: LabEx proporciona las entradas preparadas WebIDE, Terminal y Gallery, junto con imágenes locales. En WebIDE, leerás HTML, CSS y JavaScript existentes, predecirás su comportamiento y guardarás cambios puntuales. En Gallery, observarás el sitio real y probarás la interacción con el teclado. Las etiquetas de la galería permanecen en inglés.
Preguntas frecuentes
¿Escribiré el código de la galería?
Sí. Completarás la distribución y el comportamiento en el navegador dentro del proyecto preparado y después utilizarás la galería tanto con el ratón como con el teclado.
¿Necesito subir fotografías o instalar un framework?
No. Los recursos de imagen locales y el entorno de aprendizaje ya están preparados. El proyecto utiliza HTML, CSS y JavaScript del navegador, sin React ni un servicio de subida de imágenes.
¿Completar el curso certifica la accesibilidad?
No. Practicarás comportamientos concretos de imágenes, teclado y foco. Una evaluación completa de accesibilidad abarca más que estos ejercicios.
