Diseño web responsive: Imágenes

Uso de srcset y w

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
A través de un ejemplo práctico, entenderemos cómo podemos empezar a usar srcset y el parámetro w para definir anchos de imagen y para empezar a incluir diferentes imágenes responsive en nuestros documentos html.
05:31

Transcripción

(hombre) Vamos a echar un vistazo en profundidad al marcado HTML, que incluimos en el documento HTML para tener imágenes que funcionen de manera flexible o responsive. Recordémoslo es la forma más tradicional, tenemos que recordar que tenemos el atributo fuente, el atributo SRC junto a una etiqueta alt para indicar texto alternativo que se muestre allá donde no se pueda visualizar la imagen. Incluimos SRC set para incluir un listado de imágenes adicionales con las que poder trabajar y añadimos el parámetro opcional W precedido de un valor numérico. Este valor numérico nos indica el ancho de la imagen, si el navegador soporta el uso de SRC set pues empleará las imágenes listadas cuando considere necesario y si no pues recurrirá al SRC tradicional. Para que lo entendamos bien, un usuario accede por ejemplo a una determinada web en la que tenemos este código y bueno pues, su ventana el view port es de 1200 píxeles si el navegador soporta SRC set va a tomar la imagen que esté marcada con el 1200 W, lo hace por aproximación, es decir, mostrará la imagen que mejor encaje con el view port con el que esté visualizando ese contenido. Si fuese una ventana por ejemplo, de 350 píxeles bueno pues, cogería en este caso cereza.jpg porque hemos marcado que el ancho de esa imagen es de 400 píxeles y es el valor más aproximado. Si tuviésemos un view port de 1600 bueno pues, en este caso la imagen con mayor aproximación sería la de cereza-big que es de 1200 píxeles de ancho. ¿Qué ocurre cuando entran a jugar diferentes densidades de pixel en pantalla? Supongamos que, tenemos un móvil con una resolución de 720 píxeles de ancho pero tiene doble densidad de pixel en pantalla lo que se conoce como 2X. Pues con el atributo SRC set el navegador cogería la imagen más grande, pues entiende que lo que necesita es una imagen lo más próximo posible a los 1440 píxeles que en realidad se está generando. ¿De dónde salen esos 1440? Bueno pues, de 720 por dos. Visto esto, en cualquier caso recordemos lo sencillo que es aplicar esta metodología en nuestros proyectos. Yo tengo aquí un archivo que voy a abrir ahora mismo con el navegador. Vamos a mostrar el ejemplo donde tengo un contenido con una fotografía y un texto, voy a activar el modo de, lo tenemos aquí, de diseño adaptable. Simplemente haciendo clic voy a cerrar la ventana y si re-escalo el view port bueno pues absolutamente no pasa nada, tengo una única imagen que esta dentro de un contenedor y he dicho por CCS que esta imagen ocupe el 100 por 100 del contenedor. Para incluir diferentes imágenes y convertirlas en contenido responsive, lo único que tengo que hacer es dirigirme al archivo HTML. Vamos a abrirlo con un editor. Por ejemplo, sublime, aquí tengo el etiquetado y lo que voy a hacer es escribir el SRC set, en este caso, tendría que escribir SRC set, voy a escribir la ruta a las imágenes y voy a fijarme en el nombre que tenían. Cereza extra large, large, medium, y small Vamos a ponerlo cereza-small.jpg seguido de un 600w, que es el ancho que tiene esta imagen. cerezasmall, cerezamedium, vamos a poner una coma, ponemos images cereza medium JPG 800 y repetimos con el resto de imágenes que teníamos preparadas. cerezalarge.jpg de 1200w, coma y hacemos lo mismo con la última. .jpg 1600w lo que tenemos que hacer es guardar el documento, volvemos al navegador recargamos para comprobar que todo haya funcionado correctamente , aquí tenemos la imagen de ancho 1200 todo variará en función del ancho del navegador, vamos a hacer más grande aquí nos falta algo que no hemos escrito bien, nuevamente vamos a corregir ahora si tendría que funcionar, recarguemos. Aquí tenemos la imagen extra grande, también vamos haciendo mas pequeño hasta mostrar la pequeña. En el momento en que pasemos de 600 ya pasará al punto de corte siguiente, en el momento en que tengamos ya 601 salta al siguiente. En el momento en que tengamos más de 800 pasamos a la siguiente. Y así consecutivamente. Con esto, ya tenemos preparadas nuestras imágenes responsive de una manera muy fácil.

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.