Cómo diseñar una galería de fotos filtrable con HTML, CSS y JavaScript

Crear una galería de fotos filtrable es una excelente forma de mostrar imágenes de manera ordenada y atractiva en tu sitio web. En este artículo, vamos a explorar cómo puedes diseñar una galería de fotos utilizando HTML, CSS y JavaScript, optimizando el contenido para SEO para que tu página sea fácilmente indexada por los motores de búsqueda.

¿Por qué crear una galería de fotos filtrable?

Las galerías de fotos filtrables son útiles por varias razones:

Mejora la experiencia del usuario: Permiten a los visitantes encontrar rápidamente imágenes de su interés.
Organización visual: Ayudan a mantener el contenido organizado y atractivo.
SEO optimizado: Al utilizar textos alternativos y buenas prácticas en la estructura HTML, puedes mejorar el SEO de tu sitio.

A continuación, detallaremos los pasos para crear tu propia galería filtrable.

Paso 1: Estructura HTML básica

Primero, comenzaremos creando la estructura HTML de la galería. Utilizaremos una lista no ordenada para mostrar nuestras imágenes.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galería de Fotos Filtrable</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Galería de Fotos Filtrable</h1>
    <input type="text" id="searchInput" placeholder="Filtrar por categoría...">
    <ul id="gallery" class="gallery">
        <li class="filter-item nature"><img src="https://picsum.photos/id/237/200/300" alt="Naturaleza 1"></li>
        <li class="filter-item nature"><img src="https://picsum.photos/id/32/200/300" alt="Naturaleza 2"></li>
        <li class="filter-item architecture"><img src="https://picsum.photos/id/43/200/300" alt="Arquitectura 1"></li>
        <li class="filter-item architecture"><img src="https://picsum.photos/id/54/200/300" alt="Arquitectura 2"></li>
        <li class="filter-item technology"><img src="https://picsum.photos/id/53/200/300" alt="Tecnología 1"></li>
        <li class="filter-item technology"><img src="https://picsum.photos/id/77/200/300" alt="Tecnología 2"></li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

Explicación del código HTML

Utilizamos un <input> de tipo texto para que el usuario pueda filtrar las imágenes por categoría.
La lista <ul> contiene varios elementos <li> donde cada imagen está clasificada con una clase correspondiente a su categoría.

Paso 2: Estilos CSS para la galería

A continuación, agregaremos estilos básicos con CSS para mejorar la apariencia de la galería.

body {
    font-family: Arial, sans-serif;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.filter-item {
    margin: 10px;
}

.filter-item img {
    width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

Explicación del código CSS

Utilizamos flexbox para permitir que las imágenes se organicen en filas y se ajusten al tamaño de la pantalla.
Añadimos margen, bordes redondeados y sombras a las imágenes para un estilo más atractivo.

Paso 3: Funcionalidad con JavaScript

Finalmente, implementaremos la lógica para filtrar las imágenes usando JavaScript.

document.getElementById('searchInput').addEventListener('keyup', function() {
    let filter = this.value.toLowerCase();
    let items = document.querySelectorAll('.filter-item');

    items.forEach(item => {
        if (item.classList.contains(filter) || filter === '') {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
});

Explicación del código JavaScript

Escuchamos el evento keyup en el input para detectar cuando el usuario escribe.
Filtramos los elementos de la galería comprando la clase de cada elemento con el valor del input.

Optimización para SEO

Para optimizar tu galería de fotos filtrable para SEO, considera los siguientes consejos:

Uso de etiquetas alt

Asegúrate de que cada imagen tenga un atributo alt descriptivo. Esto no solo ayuda a la accesibilidad, sino que también es fundamental para el SEO, ya que los motores de búsqueda utilizan esta información para indexar tus imágenes.

Estructura de URL amigable

Si estás utilizando un sistema de gestión de contenido (CMS), asegúrate de que las URL de tus imágenes sean descriptivas y contengan palabras clave relevantes.

Reducción del tamaño de las imágenes

Optimiza las imágenes para web antes de subirlas. Utiliza formatos como JPEG o WebP, y comprime las imágenes para mejorar la velocidad de carga del sitio.

Contenido relevante

Asegúrate de incluir texto relevante cerca de la galería, que explique el contexto de las imágenes y utilice palabras clave adecuadas para mejorar la indexación.

Conclusiones

Crear una galería de fotos filtrable utilizando HTML, CSS y JavaScript es un proceso sencillo que puede enriquecer la experiencia del usuario en tu sitio web. Siguiendo los pasos anteriores y aplicando técnicas de SEO, puedes asegurarte de que tu galería no solo sea visualmente atractiva, sino también fácilmente accesible para los motores de búsqueda. ¡Anímate a implementarlo y mejora tu presentación de contenido visual!