Con la finalidad de mostrar gráficos correctamente
para todo tipo de usuario, especificaremos imágenes para diferentes
dispositivos en un documento HTML, según las reglas de este lenguaje. Algunos creadores de páginas web, con diseños impresionantes, tendrían usuarios descontentos por
falta de visualización de una o varias imágenes. Por tal razón, mediante
etiquetas de HTML marcaremos más de un gráfico para favorecer diferentes tipos
de soportes.
Cuando creamos una página web, y diferentes usuarios ingresan a
ella, lo hacen desde dispositivos diferentes, como un celular, una tablet. También, mediante un computador
de 14 pulgadas o, tal vez, de 20. Por lo tanto, las imágenes se muestran en
diferentes dimensiones, y es necesario cuidar la presentación de cada una para
asegurar la nitidez correcta en todas. Para ello, con HTML es posible
especificar más de una imagen, a fin de mostrar al usuario la más acorde con el
tamaño de su pantalla o la capacidad del equipo.
061-01_1106_ilu01. Imagen en diferentes dispositivos
Para marcar varias imágenes para
el usuario con una instrucción de HTML es necesario:
- La
etiqueta img.
- El
atributo src, para indicar la
ubicación de la imagen dentro de las comillas.
- El
atributo srcset, para especificar diferentes
tipos de imágenes y favorecer diferentes dispositivos.
061-01_1106_ilu02. Especificación del
atributo srcset
En el código anterior, dentro de srcset, se observan dos especificaciones
de imágenes, y cada una tiene a un lado un número más la letra x, la cual corresponde a la densidad de
píxeles. El navegador web interpreta
el código de la siguiente forma:
- Muestro la
imagen original, definida en src.
- Muestro la
segunda imagen, con densidad de píxeles o zoom
1.5, cuando el dispositivo o navegador se encuentra sin soporte para la
anterior.
·
Muestro la
tercera imagen, si es imposible interpretar alguna de las dos anteriores.
Al agregar el código en el editor
de texto, vemos con detalle la siguiente instrucción:
- Se
describe la imagen principal en src.
- Se definen
las imágenes secundarias en el atributo srcset.
- Se
especifica cada imagen con un número y la letra w.
061-01_1106_ilu03. Código HTML del atributo
srcset
Cuando especificamos tamaños de
imagen con número y letra w, se
refiere a width, es decir, ancho en
español. Por lo tanto, depende de las dimensiones de la pantalla donde se
ejecute el código, para mostrar alguna de las imágenes especificadas. En una
pantalla de 14 pulgadas de una computadora de escritorio, se mostró la imagen
número 2, el archivo feliz.jpg.
061-01_1106_ilu04. Vista
del usuario del código HTML
Keynotes
- Con HTML es posible especificar más de una
imagen, a fin de mostrar al usuario la más acorde con el tamaño de su pantalla
o la capacidad del equipo.
- El atributo srcset, para especificar diferentes tipos de imágenes y favorecer
diferentes dispositivos.
- Cuando especificamos tamaños de imagen con
número y letra w, se refiere a width, es decir, ancho en español. Por
lo tanto, depende de las dimensiones de la pantalla donde se ejecute el código,
para mostrar alguna de las imágenes especificadas.
MisiónA fin de asegurar la visualización correcta de un
gráfico para todo tipo de usuario, crea la especificación de imágenes para
diferentes cuatro diferentes dispositivos en un documento HTML, según las
reglas de este lenguaje.
Pasos a seguir:
- Ubica el estándar oficial
de HTML, y lee las recomendaciones del atributo srcset.
- Especifica imágenes para
cuatro casos diferentes.
- Muestra el código a un
experto mediante vKontact, y toma
nota de sus recomendaciones
Sabrás que has tenido éxito cuando pruebes el
código en dos equipos diferentes, y la presentación de la imagen cambie.
Modifica la lista, si es necesario, luego de las
recomendaciones y compártela junto al código en tu vPages. Pide a tus compañeros participar en un debate sobre la
optimización de tu código.
Tiempo disponible: 3 horas.
CierreCon la especificación de imágenes para diferentes
dispositivos en un documento HTML, aseguramos la visualización correcta de
todos los gráficos de nuestra página web,
y los usuarios estarán contentos con ello. Al seguir las reglas de este
lenguaje de marcado, y mediante una disciplina en la práctica constante, todo
tipo de navegador y dispositivo mostrará todas las imágenes de nuestra página web.
