Diseño web responsive: Imágenes

Ejemplo de layouts avanzados usando srcset y sizes

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
Profundizaremos en el uso de srcset y sizes mediante otro sencillo ejemplo práctico en el que podremos ver alguna particularidad adicional que tenemos disponible cuando estamos trabajando con este etiquetado.
06:21

Transcripción

Cuando ya estamos trabajando con imágenes responsive , tenemos que asegurarnos que lo que estamos haciendo, lo estamos haciendo de manera correcta, y que el marcado HTML que incluimos dentro de nuestro documento, sobre todo en relación a las imágenes, tiene sentido respecto al CSS con el que estemos trabajando. Y este es uno de los problemas a la hora de trabajar en layouts o estructuras complejas. Siempre se ha dicho que hay que separar la presentación del contenido, pero la realidad es que actualmente hay parte de la presentación que ha de incluirse en el contenido. Lo ideal sería poder contar con sistemas de automatización que ejecuten los cambios de manera automática, y que no tengamos que hacerlo nosotros, en el caso de que realicemos alguna modificación en el CSS. Pero bueno, esto es una reflexión grosso modo. Lo que quiero ver rápidamente a continuación es un ejemplo en el que estamos utilizando "srcset" "w" y "sizes" con opciones más complejas. Lo que yo tengo en pantalla ahora mismo es una evolución del ayat que he usado como ejemplo anteriormente donde solo tenía una imagen y un texto, ahora mediante Flexbox he creado una especie de galería donde se van ubicando los diferentes elementos. Vamos a poner el diseño adaptable para que podamos ver cómo se van ajustando los diferentes elementos. Una columna, dos columnas, tres columnas. Esto lo he hecho... Si le hecho un vistazo al código, vamos a abrir el CSS, por un lado, y el HTML que ya lo tenemos aquí, realmente no tiene grandes cambios. Tengo todas las librerías con las que estaba trabajando. Aquí tengo el contenedor de cada una de las imágenes. Lo he puesto cuatro veces para tener cuatro imágenes diferentes. Tengo el srcset, tengo los modificadores de w y luego añadí un sizes que tenía anteriormente. Todo ello lo he metido dentro de una capa llamada gallery, a la que le he dado ese nombre de clase. Y luego, en el style.css, en la hoja de estilos, bueno, pues aquí tengo gallery, estoy utilizando el estilo de caja de Flexbox, y simplemente, bueno, pues estoy utilizando una serie de parámetros con los que estoy trabajando para calcular de manera dinámica el ancho de las imágenes. Ahora mismo, si volvemos al navegador y nos fijamos, bueno pues vamos a poder movernos, vamos a ejecutar y vamos a fijarnos dónde están los cambios y los cortes de las imágenes. Lo ideal es que, evidentemente, si estamos jugando con determinados cálculos dentro del CSS, los apliquemos dentro de nuestro HTML. Vamos a hacerlo. Lo que vamos a hacer es fijarnos, lo primero, en el punto de corte, que es lo que nos va a servir como condición para nuestras imágenes. Vamos a coger esta condición, la copiamos. Vamos a llevarla dentro de nuestra declaración de tamaños en la imagen. Lo pegamos. Vamos a borrar y esto vamos a dejarlo aparte. Aquí. Vamos a añadir el ancho, en este caso, que le estamos dando a la imagen. En este caso es un ancho dinámico. Pero también podemos usarlo dentro de la declaración. Lo escribimos aquí. Y lo que sí que tenemos que tener en cuenta es que el navegador no entiende valores porcentuales a la hora de entender el ancho dentro de sizes, con lo cual siempre podemos recurrir, pues, a poner vw. En este caso le estamos restando 1en como imagen a los laterales y con esto ya tendríamos la primera pareja de condiciones: la condicional, el ancho que le vamos a dar a la imagen. Siempre tendríamos que poner al final un valor por defecto. Vamos a poner esto aquí debajo para que no nos moleste. Vamos a ponerlo tal que aquí... Y esta es una de las primeras condiciones, pero sabemos que dentro de sizes podemos poner diferentes condiciones. Y aquí tenemos otra más, con lo cual, pues vamos a hacer exactamente lo mismo. Copiamos, vamos a añadir una más. Vamos a ponerla aquí arriba. Pegamos la condición y también el ancho que se calcula de manera dinámica. Recordemos que tenemos que modificar también el valor porcentual. Y en vez de 33%, 33vw. Vamos a poner aquí la coma, que no se nos olvide. Guardamos. Y si volvemos al navegador, vamos a recargar. Si nos fijamos, ya ha habido un cambio. Aquí ya se está cargando una imagen diferente que en las otras tres imágenes que tenemos duplicadas. Vamos a ponernos en uno de los casos más pequeños. Y vamos a ir haciendo más grande la ventana del navegador. Aquí hay un punto de corte en el que las imágenes siguen siendo iguales. Ya tenemos un cambio, aquí. Todas han cambiado al tamaño medio. Seguimos con medio, seguimos con pequeño. Y vamos a ponernos en la situación en la que, bueno, pues ahora mismo sí que tenemos el marcado de manera sincronizada, por así decirlo, entre la imagen y los diferentes puntos de corte que yo he definido en la hoja de estilos. Y evidentemente esto es de lo que hablaba al principio del vídeo. Puede ser muy pesado el hecho de tener que replicar todo este código en una, dos, tres o cien imágenes. Y lo ideal, evidentemente, es poder contar con sistemas automatizados. En cualquier caso, eso es simplemente una nota a pie de página, por así decirlo. Lo que hemos visto en este ejemplo es que, bueno, ya entendemos cómo es el proceso de buscar los diferentes puntos de corte con los que estemos trabajando dentro de nuestra hoja de estilo e incorporar estas condiciones dentro de nuestros atributos sizes dentro de nuestras imágenes, en el marcado HTML, para que el navegador lo pueda entender.

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.