El widget Texto nos permite añadir en la web las imágenes incorporadas a las galerías.

Renderización

Cuando se carga una imagen en una galería se generan 3 versiones adicionales a la original, cada una se puede usar según los tamaños que se vayan a visualizar en pantalla:

1. El formato miniatura se genera convirtiendo la imagen a 100 pixeles de ancho, se puede usar si se pone, al final de la URL de la imagen, el parámetro ?ver=t
2. El formato medio se genera convirtiendo la imagen a 300 píxeles de ancho, se puede usar usando el parámetro ?ver=m
3. El formato normal o estándar convierte la imagen a 850 píxeles de ancho y es el que se inserta por defecto cuando se selecciona una imagen en un widget de texto, se usa con el parámetro ?ver=n

Podemos hacer referencia al tamaño original de la imagen usando una URL acabada en:
?ver sin parámetro de tamaño.

Cuando cambiamos los parámetros de tamaño de una imagen debemos fijarnos en que las dimensiones de la imagen han tomado los valores correspondientes:

t= 100 píxeles de ancho.
m= 300 píxeles de ancho.
n= 850 píxels de ancho.

Para que se actualicen las dimensiones basta con hacer clic fuera del campo enlace. Es decir, primero modificamos la parte final del campo enlace y después clicamos fuera del campo para que se actualicen las dimensiones.

Es importante usar la resolución más próxima al tamaño al que se va a visualizar la imagen en la página, pues conseguiremos un doble beneficio: por un lado, la página se cargará más rápido evitando la descarga de datos innecesarios y, por otro, evitaremos sobrecargar los servidores y la red. Adicionalmente minimizaremos las perdidas de sesión que se sufren en la web cuando se tarda demasiado tiempo en cargar los datos de una página.

 

GIF ANIMADO y Widget de texto

Cuando insertamos un GIF animado con el Widget de texto debemos eliminar el parámetro de tamaño (situado al final de la URL) para que se visualice la animación en nuestra página.
El parámetro de tamaño renderiza la imagen generando un tamaño determinado. Este proceso bloquea la visualización de GIF animado de manera que sólo se muestra el primer frame.
Podemos eliminar el final de la URL, desde el signo igual = , y de esta manera mostrar todos los frames de nuestro GIF en la Web.

Por ejemplo, en la URL https://www.ucm.es/salidas-de-campo-virtuales/file/rockgif_test/?ver=n, tendremos que eliminar =n quedando la url así: https://www.ucm.es/salidas-de-campo-virtuales/file/rockgif_test/?ver.

Widget Texto. Procedimiento para añadir imágenes

1. En primer lugar arrastramos el widget "Texto" al lugar deseado de nuestra página y pulsamos en "Configurar widget" (rueda dentada).

2. Clicamos en el icono "Insertar/editar imagen" del widget de texto.

3. En la ventana emergente clicamos en el icono "lupa" (explorador de archivos).

4. La aplicación nos muestra todas las galerías de imágenes del Website.

5. Clicamos sobre los tres puntos (Opciones) de la galería deseada y en el menú emergente seleccionamos "imágenes" para visualizar todas las imágenes de la galería (también podemos ver todas las imágenes de la galería clicando en el título de la galería o en "Contiene X imágenes").

6. Clicamos sobre la imagen deseada y aparecerá un menú emergente con la URL del enlace a la imagen y el campo "Descripción de la imagen" vacio.

7. Rellenamos el campo "Descripción de la imagen" con un texto alternativo y pulsamos "OK".

 

Texto Alternativo

El texto alternativo cumple varias funciones:

• Es leído por lectores de pantalla en lugar de las imágenes permitiendo que el contenido y función de la imagen sean accesibles a personas con dificultades visuales o cognitivas.
• Los navegadores web lo muestran en lugar de la imagen si ésta no se ha cargado, o si el usuario tiene las imágenes deshabilitadas.
• Proporciona un significado semántico y descriptivo a la imagen que puede ser usado posteriormente por motores de búsqueda para determinar el contenido de la imagen.

El texto alternativo debe ser preciso y equivalente, breve, no redundante, no usar frases como "imagen de...".

Cuando una imagen contiene sólo texto, el texto que muestra puede usarse normalmente como texto alternativo.

 

Enlaces de interés

  Guía de la aplicación "GALERÍAS DE IMÁGENES". Repositorios de imágenes de Webs UCM.