Con la finalidad de agregar diferentes opciones para una imagen, usaremos la
etiqueta picture en un documento
HTML, según las recomendaciones oficiales de este lenguaje de marcado.
Algunas imágenes de páginas web se ven correctamente en un computador y, cuando son mostradas
en teléfonos móviles, es difícil comprender su contenido, porque están
diseñadas para pantallas grandes. Para evitarlo, identificaremos, paso a paso,
la implementación de la etiqueta picture con
sus atributos.
Una imagen disponible en internet es
vista por diversas personas, y cada una con dispositivos de diferentes
dimensiones de pantalla, por lo tanto, mediante la etiqueta picture es posible especificar varios
archivos de imagen. En la siguiente ilustración tenemos un ejemplo sencillo, en
el cual se muestra la imagen con un texto en las pantallas grandes y con
posiciones diferentes; sin embargo, cuando la imagen se visualiza por un
teléfono, el texto ya no aparece.
061-01_1110_ilu01. Aplicación de la
etiqueta picture
El procedimiento para marcar un
texto con el elemento picture es el
siguiente:
- Definimos
la etiqueta de inicio y cierre correspondiente a picture.
- Agregamos
dos elementos source, en cada uno de
los cuales se especifica la imagen a mostrarse.
- Especificamos,
al final, la etiqueta correspondiente a imagen, img.
061-01_1110_ilu02. Creación de la etiqueta picture
Con el fragmento de código
anterior, el navegador web entiende:
si el dispositivo cumple con los requerimientos del cuadro uno muestra esa
imagen; de lo contrario, pasa al cuadro dos. En el caso de tener problemas en mostrar
la imagen descrita en los cuadros uno y dos, muestra la especificación de la
etiqueta img. Por este motivo, es
importante agregar siempre la etiqueta de imagen, la cual es la imagen
principal aunque exista más de un source.
Ahora bien, en el elemento source, se detallan los requerimientos con
los siguientes atributos:
- Src, indica la ruta de la imagen.
- Type, indica el tipo de recurso señalado en src, es decir, la extensión.
- Media, indica la descripción de las características necesarias para
mostrar la imagen especificada en src.
061-01_1110_ilu03. Creación del elemento source
Veamos el siguiente fragmento de
código, con la especificación picture,
donde:
- Se
especifica en ambos source la
propiedad min-width, cuyo significado
en español es mínimo de ancho.
- Se agregan,
en el atributo type, los valores jpg y png, por ser los tipos de imágenes en src.
- Se define
la etiqueta img, donde está una
imagen con extensión jpg.
Por lo tanto, la interpretación
del navegador es mostrar feliz.png si
el dispositivo cumple el mínimo de ancho indicado en el primer source; si no, verifica el cumplimiento
del segundo y muestra esa imagen.
061-01_1110_ilu04. Instrucción completa con
picture
Keynotes
- Una imagen disponible en internet puede ser
vista por diversas personas, y cada una con dispositivos de diferentes
dimensiones de pantalla, por lo tanto, mediante la etiqueta picture es posible especificar varios
archivos de imagen.
- El procedimiento para marcar un texto con el
elemento picture es el siguiente: Definimos
la etiqueta de inicio y cierre correspondiente a picture. Agregamos dos elementos source, en cada uno de los cuales se especifica la imagen a
mostrarse. Especificamos, al final, la etiqueta correspondiente a imagen, img.
- en el elemento source, se detallan los requerimientos con los siguientes atributos: Src, indica la ruta de la imagen. Type, indica el tipo de recurso
señalado en src, es decir, la
extensión. Media, indica la
descripción de las características necesarias para mostrar la imagen
especificada en src.
RetoAgrega la etiqueta picture en un documento HTML, según las recomendaciones oficiales
de este lenguaje. Asegura la especificación de tres diferentes opciones para
una imagen con la ayuda de tus compañeros.
¡Comparte el resultado del reto en tu vPages!
Tiempo disponible: entre 15 y 30 minutos.
CierreCon el uso de la etiqueta picture en
un documento HTML, según las recomendaciones oficiales de este lenguaje de
marcado, aseguramos la correcta visualización de una imagen en diferentes
tamaños de pantallas, debido a la oportunidad de especificar más de una opción.
Con paciencia y organización, las imágenes serán interpretadas correctamente
por los diferentes navegadores web.
