Ejercicios

1. Crear una nueva página llamada «Medios» y con slug «medios» para hacer los ejercicios de la práctica. Todo lo aprendido se podrá aplicar al resto de páginas del sitio.

2. Inserta una imagen en formato webp (bloque imagen), un documento pdf (bloque Archivo) y un audio (bloque audio) subiéndolos desde tu ordenador. Añade un encabezado descriptivo antes de cada uno de ellos.

Puedes encontrar todo tipo de medios con licencia Creative Commons usando por ejemplo las herramientas de búsqueda avanzada de Google. También puedes encontrarlos en distintos repositorios, tales como Internet Archive u Openverse, entre otros muchos.

3. Acceder a la biblioteca de medios. Visualiza solo los documentos, los audios o las imágenes para localizar los tres medios insertados en el apartado anterior. También puedes buscarlos por fecha.

4. Pulsa sobre cada uno de ellos y revisar sus propiedades, p.e. nombre, tipo/formato, tamaño, dimensiones de las imágenes.

• Compara las propiedades de diversas imágenes que tengas en las páginas de tu sitio valorando su tamaño y resolución.
• Compara el tamaño de la imagen en formato webp que has subido en un ejercicio anterior con el de otras imágenes con otros formatos.

5. Averiguar en cuál de tus páginas están algunos medios y confirma que están allí.

6. Sube un nuevo documento a la biblioteca de medios sin insertarlo en ninguna de tus páginas.

• Confirma que lo encuentras si seleccionas la opción «Sin adjuntar» en el menú para filtrar por tipo de medio. ¿Tienes algún otro medio que no esté en ninguna de tus páginas?
• Borra el nuevo documento que acabas de subir.

7. Añade texto alternativo, leyenda y descripción a los medios insertados en la nueva página.

8. Tal y como se comenta en el vídeo una de las formas de optimizar la eficiencia de tu sitio web y aplicar estrategias SEO es reducir el tamaño de las imágenes con un mínimo de perdida de calidad. Vamos a usar alguna herramienta online para lograrlo.

• Descarga alguna de tus imágenes de mayor tamaño de tu biblioteca de medios.
• Usa la web squoosh.app para reducir su tamaño cambiando su formato a WepP. Compara el tamaño inicial y final (y el porcentaje de reducción) modificando diversos parámetros de la herramienta. La herramienta te permite además comparar fácilmente el aspecto inicial y final previsto de la imagen conforme vas modificando las distintas opciones, lo que permite comprobar cuánto empeora la calidad si reduces su tamaño.
• Si quieres editar la imagen manualmente de un modo mucho más sofisticado que con el editor de la biblioteca de medios, puedes hacerlo por ejemplo usando alguna herramienta online como photopea.com.
• Sube la nueva versión de la imagen editada y optimizada a la biblioteca de medios y sustituye la original en la página en que esté insertada. Comprueba si notas alguna diferencia sustancial tras reducir su tamaño.
• Añade uno o varios párrafos tras la imagen describiendo las optimizaciones que le has aplicado e indicando cual era el tamaño inicial y cuál es el final.

9. Hay muchos plugins de wordpress para optimización de imágenes.Vamos a instalar y usar uno de los mejor valorados: «Smush Image Optimization».

• Instala el plugin a activa su opción de actualización automática.
• Accede a su documentación para ver todas las opciones que ofrece.
• Accede al plugin y escanea la biblioteca para ver las posibilidades de optimizar su contenido.
• Crea una cuenta para poder usar la versión gratuita del plugin y esperar a que conecte el plugin con wordpress.
• Accede al escritorio del plugin y revisa las opciones que ofrece.
• Accede a Ajustes y activa la detección de imágenes de tamaño incorrecto.
• Antes de aplicar optimizaciones con el plugin, accede a tu biblioteca de medios, revisa y anota el tamaño de las imágenes más grandes que tengas.
• Comprime por bloques las imágenes de tu biblioteca que puedan optimizarse. Observa el número de imágenes que se han reducido y el ahorro total conseguido.
• Revisa ahora el tamaño de las imágenes de tu biblioteca de medios y confirma si se han reducido.

Ejercicios

10. Visualiza el vídeo hasta el minuto 3:21 para revisar cómo subir grupos de imágenes y añadirles información que las describe.

11. Visualiza el siguiente segmento del vídeo hasta el minuto 8:23 para lograr que las imágenes tengan el aspecto que te interese usando los ajustes del bloque de imágenes.

12. Añade un nuevo encabezado «Imagen ajustada» al final de tu página de medios.

• Inserta debajo una nueva imagen. En lugar de subirla o elegirla en la biblioteca de medios, usa la opción «Select Image» y escoge una imagen de los repositorios «Pexels free photos» u «Openverse». Puedes usar el buscador asociado a esos repositorios para elegir el tema de tu imagen.
• Comprueba que la imagen se ha añadido a la biblioteca de medios y revisa la información sobre la misma: nombre, tamaño, dimensiones, etc.
• Añádele un texto alternativo y una leyenda.
• Aplica al menos tres de los tipos de ajustes vistos en el segmento de vídeo anterior hasta lograr que la imagen quede a tu gusto.
• Describe los ajustes realizados debajo de la imagen.

13. Visualiza el siguiente segmento del vídeo hasta el minuto 11:21 para aprender a crear y personalizar galerías de imágenes.

14. Añade un nuevo encabezado «Galería de imágenes» al final de tu página de medios.

• Usa el bloque de imágenes para crear una galería con 4 o más imágenes. Crea una de ellas con IA y obtén las otras de los repositorios «Pexels free photos», «Openverse» u otro que conozcas y te guste.
• Añádele un texto alternativo y una leyenda a cada imagen.
• Añade también una leyenda a la galería completa.
• Aplica al menos tres de los tipos de ajustes vistos en el segmento de vídeo anterior hasta lograr que la galería quede a tu gusto.
• Describe los ajustes realizados debajo de la galería.

15. Visualiza el siguiente segmento del vídeo hasta el minuto 15:13 para aprender a crear y personalizar un fondo para otros bloques.

16. Añade un nuevo encabezado «Bloque de fondo» al final de tu página de medios.

• Inserta un bloque de fondo y añádele una imagen obtenida con el método que prefieras.
• Añádele un texto alternativo y una leyenda a la imagen.
• Añade algún texto encima de la imagen con el contenido, tamaño y color que te guste.
• Aplica al menos tres de los tipos de ajustes vistos en el segmento de vídeo anterior hasta lograr que el bloque quede a tu gusto.
• Describe los ajustes realizados debajo del bloque.

17. Visualiza el siguiente segmento del vídeo hasta el minuto 17:28 para aprender a combinar en dos columnas un medio, como una imagen, y un texto.

18. Añade un nuevo encabezado «Medios y texto» al final de tu página de medios.

• Inserta un bloque de Medios y texto eligiendo la imagen que prefieras. En el texto debes describir los ajustes que has llevado a cabo en el bloque hasta lograr el aspecto deseado.
• Prueba distintas alternativas para la ubicación de la imagen y el texto, y quédate con la que más te guste.
• Añádele un texto alternativo y una leyenda a la imagen.

Ejercicios

19. Crea un documento con Google docs y compártelo con tu profesor/a de prácticas para que pueda editarlo. En este documento debes describir brevemente cómo has aplicado los 3 criterios de calidad descritos anteriormente en la creación de tu sitio web en las prácticas anteriores y al hacer el siguiente ejercicio.

• Añade sendos apartados dedicados a la calidad del contenido, la estética, la usabilidad, accesibilidad y eficiencia de tu sitio web.
• Describe brevemente en cada apartado cómo has hecho que tu sitio cumpla cada uno de esos criterios de calidad. Debes dar ejemplos concretos relacionados con el diseño, las páginas y contenidos de tu sitio web. Por ejemplo, en el caso de la usabilidad, debes explicar cómo has aplicado algunas leyes UX para que tu sitio sea más usable.
• Incluye en la entrega de esta práctica un enlace y una versión .docx del documento, además del enlace a tu sitio web actualizado y con todas las páginas relevantes accesibles fácilmente mediante los menús o enlaces adecuados.

20. Añade a tu sitio las páginas descritas cuando definiste la arquitectura del mismo en la práctica 2. Puedes modificar dicha arquitectura para incluir o eliminar páginas.

• Recuerda enlazar adecuadamente tus páginas y subpaginas y crear un buen menú de navegación.
• Rellena las páginas con contenido adecuado y relevante al tema de tu sitio web, incluyendo texto, imágenes, vídeos, audios y todos los medios que consideres adecuados.
• Aplica en todo momento los tres criterios de calidad comentados anteriormente.