ARTÍCULO 50. Nueva etiqueta PICTURE en HTML5.1. (I)


Introducción

Aquí verás un vídeo con un resumen de este artículo: Tutorial

Vamos a explicar cómo usar la nueva etiqueta <picture> que ha aparecido junto con la nueva versión de HTML, la 5.1. que es la recomendada desde el 1 de noviembre de 2016 por w3c, organismo que define el estándar del HTML.

Esta nueva etiqueta (tag) supone una mejora respecto a la etiqueta <img> que es la que se viene usando hasta ahora para mostrar imágenes, sobre todo si queremos diseñar páginas web que se adapten a todo tipo de pantallas. A lo largo del artículo iremos viendo en qué consisten estas mejoras.

Actualmente los principales navegadores ya han implementado la nueva etiqueta Picture por lo que ya se puede utilizar en sitios web en producción. Si ya tienes diseñada una web adaptable con las técnicas basadas en la etiqueta img es conveniente que evalues hasta que punto las ventajas de Picture compensan realizar el cambio, pero si vas a diseñar una nueva página adaptable lo más probable es que te interese incorporar la nueva etiqueta ya que es mucho más potente y sencilla de implementar.

En este artículo, en primer lugar, vamos a ver una solución utilizada hasta ahora con la etiqueta img para poder compararla con la nueva picture. A continuación veremos cómo aplicar el nuevo tag picture para mostrar diferentes imágenes en función de la anchura y altura de la ventana, de la orientación de la ventana, del tipo de imagen, y de la resolución del dispositivo.

Una solución adaptable con <img>

Hay muchas formas de implementar el diseño adaptable para mostrar imágenes. Una de las más usadas hasta ahora es utilizar la etiqueta img con un estilo CSS, como vemos en el siguiente ejemplo:

etiqueta_img_con_estilo

El código es el siguiente.

<img src="graficos/en_rio_grande_800.jpg"  style="max-width: 100%; height: auto;">

Se utilizan estilos CSS para definir la anchura máxima al 100% de forma que la imagen no sobrepase el ancho de la ventana, y la altura se establece con la propiedad auto para que se mantenga la proporción de la imagen. Con esto se logra que la imagen se muestre a su tamaño máximo o ajustada a la ventana, lo cual puede ser una buena solución desde el punto de vista estético.

Sin embargo, este método tiene algunas desventajas comparado con el uso de picture que vamos a ir viendo en este artículo.

Existen muchos otros métodos utilizados en diseño adaptable pero no podemos incluirlos en este artículo poque se haría interminable.

Nota: Se ha definido el estilo dentro de la etiqueta img solo a efectos de facilitar la explicación, lo más correcto es definirlo en una hoja de estilos aparte.

La nueva etiqueta <picture>.

Aquí tenemos un ejemplo de la etiqueta picture.

<picture>
<source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">
<source media="(min-width: 600px)" srcset="graficos/en_rio_mediana_600.jpg">
<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>

Como hemos dicho la idea fundamental de picture es mostrar diferentes imágenes según ciertas condiciones. Para cada imagen que queramos mostrar utilizaremos una etiqueta source, es obligatorio poner al menos una. También es obligatorio poner, al final, una etiqueta img.

Para cada etiqueta source se pueden especificar unas condiciones, si se cumplen se mostrará la imagen indicada en la propiedad srcset, y ya no se evaluarán el resto de etiquetas source; si no se cumplen las condiciones se pasará a comprobar la siguiente etiqueta source. Si no se cumplen las condiciones para ninguna etiqueta source, se ejecutará la etiqueta img.

Las condiciones de las etiquetas source pueden ser de diversos tipos, todos los que permiten las Media Query, en este artículo solo vamos a explicar algunos de los que consideramos más útiles. Vamos a empezar por el que será uno de los más utilizados: la anchura de la ventana del navegador en la que se muestran las imágenes.

 

... seguir leyendo.


Marzo-2017
Pág.1 de 3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.