Actividad 8: Maquetación de galerías de imágenes usando grid

Descripción de la actividad
Parte 1: Después de leer el material 15. CSS. Disseny «responsive». Flexbox. Grid, crearemos un archivo html con Visual Studio Code que nos servirá para mostrar los diferentes tipos de galerías de imágenes que podemos llegar a desarrollar.
Parte 2: Maquetaremos las mismas galerías de imágenes con el CMS WordPress en nuestro tema propio usando el editor de bloques nativo. 

Requerimientos

• Imágenes a utilizar: Los que encontraremos en imatges-galeria-grid.zip
• Maquetaremos, como mínimo, las siguientes galerías de imágenes:
• Galería 1: Usando grid-template-columns, grid-template-rows, repeat, background-image
• Galería 2: Usando grid-template-areas, grid-area, object-fit
• Solapamiento de imágenes:  Podemos conseguir que una de las imágenes se «solape» ligeramente sobre otra usando números de línea (grid-column: 2 / 4) y un z-index.Grid es la única herramienta de CSS que permite superposición real sin romper el flujo del documento, a diferencia de Flexbox.
• Galería 3: Usando auto-fit, minmax, grid-auto-flow
• Practicando la densidad: Podemos hacer que algunas imágenes ocupen dos columnas o dos filas de forma aleatoria usando grid-column: span 2 o grid-row: span 2.
  Si usamos grid-auto-flow: dense, esto hará que el navegador rellene los huecos vacíos automáticamente, creando un efecto tipo Pinterest.

Tareas a realizar

• Maquetación de contenidos en Visual Studio
• Desarrollo de estilos
  Usaremos variables css para definir colores, fuentes, propiedades tipográficas o espacios
  Usaremos unidades relativas para definir la jerarquía tipográfica: em y rem
• Revisar regularmente los cambios en el navegador

Criterios a tener en cuenta

1. Legibilidad: Jerarquía tipográfica: Especificar la importancia de cada párrafo: h1, h2, h3, p, li. ¿Disponemos de ellos? ¿Puedo localizar correctamente cada bloque de contenido?
2.
Legibilidad: Tratamiento del color ¿Hay colores que destacan mucho por
encima de otros?¿Percibo algunos de ellos de manera poco armónica?
Buscamos armonía. Pueden ser complementarios, análogos, dos o tres
colores…
3. Usabilidad: Acceso a los enlaces de navegación. ¿Son
visibles y percibibles como elementos de navegación? ¿Tengo suficiente
espacio para clicar?¿Tengo navegación para movil y escritorio?
4. Accesibilidad: texto alternativo en las imágenes ¿Tengo texto alternativo?
5.
Legibilidad: Resaltado de elementos de la interfície. Color del texto
respecto al color del fondo. Relación figura-fondo. ¿Utilizo
correctamente los colores e imágenes de fondo para que resulte legible
el contenido?
https://color.a11y.com/ContrastPair/?bgcolor=ffffff&fgcolor=000000
6. Longitud de los párrafos ¿Son demasiado largos? ¿Resulta legible?
7. Legibilidad: Alineación de bloques ¿Se percibe correctamente cada bloque de contenido con los del mismo bloque?
8. Legibilidad: Peso de cada bloque de contenido ¿Están bién colocados?¿Los percibo con la importancia que yo quiero que tengan?
9.
Legibilidad: Tratamiento del texto (font-size: 2em, font-family: arial,
color: blue, text-align: center, line-height: 1, word-spacing:4px,
font-style:italic, text-transform:uppercase, font-weight: bold)
10. Usabilidad: El diseño que funciona mejor es el más sencillo. Complicamos la estructura a partir de nuestras necesidades