Diseño web responsive: Imágenes

Cómo usar picture

¡Prueba gratis durante 10 días

nuestros 1241 cursos !

Prueba gratis Mostrar modalidades de suscripción
Realizaremos un ejercicio práctico con el que pondremos en práctica lo aprendido en torno al elemento picture. Aprenderemos cómo incluirlo y qué opciones tenemos disponibles para hacerlo correctamente.
06:32

Transcripción

Vamos a empezar a realizar un ejercicio práctico, viendo como podemos emplear el atributo picture dentro de un ejercicio HTML. Para ello, podemos hacerlo realmente como queramos. Yo tengo aquí una serie de imágenes ya preparadas para el ejemplo. También tengo un HTML, un CSS, realmente vamos a verlos un poco en detalle porque es que tampoco difieren demasiado de los ejemplos que he venido utilizando anteriormente. Voy a abrir el archivo CSS. Lo tengo aquí disponible. Tengo el archivo HTML. Y por un lado, en el archivo CSS no tengo nada especialmente relevante. Sí que mi documento HTML, bueno, pues voy a trabajar con tres puntos de corte, que son los que tengo aquí. Y luego dentro de lo que es el HTML en sí, pues tampoco tengo nada especialmente reseñable. Estoy cargando picture fill. Y luego tengo un contenedor, tengo un elemento de encabezado. Y luego tengo una imagen con el src obligatorio. El etiquetado alt, también. Y luego, de manera opcional, le he incluido un srcset, en el que estoy incluyendo dos imágenes. En vez de apuntar al ancho de las imágenes usando el descriptor w, estoy utilizando el descriptor x para apuntar a diferentes densidades de píxel por pantalla. También tengo un par de párrafos, pero bueno, contexto de relleno. Esto, ¿en qué se traduce en el navegador? Bueno, pues vamos a abrirlo en el navegador. Vamos a abrirlo, por ejemplo, con Firefox, que es el que vengo utilizando. Vamos a cerrar esta ventana de aquí. Y voy a activar la vista de diseño adaptable o flexible. Y aquí tenemos qué es lo que se está viendo en mi documento HTML. Tengo una estructura en la que, bueno, llega un momento en el que deja de crecer. Aquí corta y la imagen se alinea a la derecha. Seguimos haciéndolo más pequeño. Parece que aquí hay un cambio de imagen. Y luego en mobile, bueno, pues se coloca la imagen encima de los párrafos. Vamos a incluir el uso de picture dentro de este HTML. ¿Cómo lo vamos a hacer? Bueno, pues lo vamos a hacer muy sencillo. Vamos a abrir el HTML y vamos a aprovechar el contenido que ya tenemos. Lo primero que tenemos que hacer es recordar que el elemento picture es un contenedor, con lo cual vamos a usarlo...aquí. Como uno de los parámetros que se incluyen dentro de picture es el etiquetado de img, bueno, pues lo vamos a poner aquí. Escribimos "picture". Y la etiqueta de cierre la vamos a colocar aquí debajo. Para completar el elemento picture, lo que necesitamos es añadir al menos un elemento source, con su correspondiente srcset, que vamos a incluir ahora con las imágenes que teníamos preparadas. Vamos a poner "images" y vamos a dirigirnos... dentro de la carpeta para ver qué es lo que teníamos preparado. En este caso, bueno, pues podemos usar las de cereza-wide. Vamos a ponerlo: "cereza-wide.jpg". Ponemos una coma porque, ya que estamos usando el valor del descriptor x abajo, pues vamos a utlizarlo también en este srcset. Con lo cual apuntamos también a esta imagen: "cereza-wide-2x.jpg". Y por cada source que tenga un srcset también tenemos que incorporar un media, que es la condición a partir de la cual el navegador va a empezar a usar esas imágenes. ¿De dónde sacamos esa información? La sacamos de los diferentes puntos de corte que tengamos en nuestro CSS. No es que sea una ley absoluta, pero bueno, es una manera de trabajar bastante práctica. Vamos a empezar por la más grande. Por ejemplo, aquí. Vamos a pegarla. Vamos a ponerle las comillas correspondientes. Y cerramos el etiquetado. Podemos poner tantos source como queramos, como puntos de corte tengamos en la hoja de estilos. En este caso, vamos a hacerlo rápido y voy a dejar solo dos. Me fijo en que tengo otra en 600 píxeles. Lo modifico aquí. "600" y voy a jugar con las otras dos imágenes que tenía disponibles. Me fijo en el nombre, que son estas dos de aquí. Y me vuelvo al código. "cereza", ponemos "tall" y aquí también ponemos "tall" para apuntar a la imagen 2x. En principio parece que todo está bien escrito. Vamos a quitar este intro de aquí. Vamos a guardar. Nos falta una cosa, que me acabo de dar cuenta. Si no ponemos que son para usarlas en 2x, no va a servir para nada. Y aquí, lo mismo. Ahora sí, vamos a dirigirnos al navegador. Vamos a abrir Firefox, que lo teníamos abierto. Vamos a recargar directamente. Y en principio todo debe ir bien, porque ya se ha visto un cambio de imagen. Vamos a poner la ventana lo más grande posible. Y vamos ahora a ir cerrándola poco a poco, para que el ancho disminuya. Se va encajando la imagen, aquí ya tenemos un cambio. Y aparece la imagen modificada. Aquí tenemos otro corte. Y por último, aquí tenemos el corte final que es donde se está usando también la imagen. Bueno, en realidad, es supersencillo usar el elemento picture dentro de nuestros elementos HTML. En el momento en que nos damos cuenta realmente de que se trata de un elemento contenedor, en el que tenemos el etiquetado tradicional img, y lo que estamos haciendo es añadir nuevas imágenes y nuevas condiciones, realmente no hay mucho más. A partir de aquí es simplemente cuestión de hacer diferentes ejercicios prácticos con los que poner en marcha y terminar de entender por completo el uso de este elemento. Y luego, bueno, pues poder incorporarlo ya de manera real en nuestros proyectos HTML.

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.