Diseño web responsive: Imágenes

Introducción al elemento picture

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
Veremos en qué consiste el elemento picture y cuáles son sus principales características para que entendamos cómo podemos usar este etiquetado en las imágenes incluidas dentro de nuestros proyectos html.
04:33

Transcripción

Hasta ahora, hemos visto como modificar el uso del etiquetado IMG para poder crear imágenes responsive añadiendo srcset y sizes. Pero recordemos, que a la hora de trabajar con imágenes responsive, también tenemos un nuevo elemento para poder emplear. Me refiero al elemento Picture. El elemento Picture es un contenedor que envuelve un etiquetado de imagen. Aquí empezamos con el etiquetado contenedor. Míralo durante unos segundos y verás que no te resulta tan extraño. Por un lado, tenemos un etiquetado IMG donde tenemos el src correspondiente, la fuente, la etiqueta alt como texto alternativo, y también tenemos incluido el parámetro opcional de srcset por si queremos incluirlo. En este caso he añadido el escriptor 2x para apuntar a la densidad de píxeles de la pantalla del dispositivo. La principal diferencia aquí, son estos source srcset, que nos van a permitir añadir "Media Queries" en casos concretos. Recuerda que con srcset estábamos dejando en cierto modo que el navegador fuera el que escogiese las imágenes a partir de todos los parámetros que nosotros le indicábamos. El ancho de la imagen, como de grande es respecto al viewport, etc. Con el elemento Picture, estamos diciendo qué imagen usar de manera concreta, en un punto específico. Cosa que nos puede interesar mucho si queremos controlar en detalle la dirección de arte del proyecto. Controlando de esa manera muy minuciosa el contenido visual. Normalmente usaremos este elemento, precisamente, vamos a abrir el navegador. Por ejemplo, cuando queramos cambiar completamente el recorte, o el encuadre, o si una imagen es demasiado ancha o panorámica y no quede del todo bien y tengamos que preparar imágenes, en otro tipo de proporción para que funcione bien y se vean de manera correcta en cualquier tipo de dispositivo. Yo tengo aquí dos ejemplos, que están disponibles en la web. Aquí tengo una imagen, tengo un código Picture, donde ya tengo los sources, y bueno, en este caso, lo que haré es activar el emulador. Vamos a mostrar la vista de diseño flexible, y vamos a fijarnos en lo que ocurre en la imagen. A lo mejor, para sistemas de escritorio queremos la imagen de esta manera, pero vamos a ver que ocurre en tablets, por ejemplo, quizá nos encaje mejor rellenar el contenido de nuestro documento, cambiando por completo la imagen. Y eso lo conseguimos gracias a este código que tenemos aquí abajo. Quizá queramos que en el móvil utilicemos una imagen similar a la primera. Pero de esta manera, usando el atributo Picture, podemos realizar un cambio de imagen así de sencillo. Otro ejemplo, que tenemos disponible. Tenemos aquí al presidente Barack Obama. Tenemos una imagen muy panorámica donde el objeto principal de la fotografía está totalmente centrado, pero ya podemos prever que esta es una imagen demasiado panorámica, sobre todo pensando en dispositivos móviles. Vamos a ver que pasa a medida que hacemos más pequeño el viewport. Vamos haciéndolo más pequeño, Aquí ya tenemos un cambio, si nos damos cuenta, hay un pequeño corte, donde estamos viendo más imagen por la zona superior y por la zona inferior. Vamos a seguir haciéndolo más pequeño Aquí tenemos un nuevo corte, donde la imagen es todavía mucho más alta ahora la proporción es mucho menos apaisada, y vamos a seguir haciendo el recorte hasta tener la versión móvil de la imagen. Donde evidentemente, si no hiciesemos este cambio de fotografía, tendríamos una imagen excesivamente panorámica, y no tendría mucho sentido, desde el punto de vista visual. Pasa de manera similar, con las miniaturas de las imágenes que hay por debajo. Si nos fijamos, están en formato cuadrado y a medida que vamos haciéndolas más grandes, vamos a ver que ocurre. Aquí ya cambian por completo, para pasar a un formato panorámico. Y bueno estas son algunas de las opciones que tenemos disponibles gracias al elemento Picture, si queremos incorporar imágenes responsive dentro de nuestro proyecto.

Diseño web responsive: Imágenes

Aprende los conceptos básicos sobre la creación y el uso de imágenes en un entorno digital responsive, donde lo que importa es el usuario y los contenidos que le interesan.

1:54 horas (24 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:25/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.