El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Diseño web responsive: Imágenes

Testeo y validación del uso de Picturefill

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En este vídeo comprobaremos si hemos realizado todos los ajustes necesarios para poder ejecutar nuestro proyecto con total satisfacción, comprobando que nuestro navegador alterna entre las diferentes imágenes que hemos preparado.
06:18

Transcripción

Ahora que ya tengo incluido picturefill dentro de mi proyecto web, es el momento de comprobar que todo funcione correctamente. me fijo en que ya tengo cargada la librería. Tengo aquí la carga necesaria también. Me fijo que tengo el archivo correctamente. Y bueno, pues puedo abrir un navegador en este caso Firefox para empezar a ver si todo funciona correctamente. La mejor manera de trabajar con imágenes responsive a la hora de poder probarlas, es, por un lado, teniendo múltiples dispositivos desde los que acceder a la misma URL, teniéndolos sincronizados de una manera o, bueno, empleando alguno de los emuladores que se incluyen, por ejemplo, dentro de Chrome o dentro de Firefox. En este caso, yo estoy empleando Firefox. Lo que voy a hacer es hacer clic derecho sobre el HTML. Hago clic en la opción Inspeccionar elemento y voy a activar la opción de Vista de diseño adaptable. Voy a hacer clic. Voy a cerrar la consola. Y en ese momento, lo que tengo es un completo entorno en el que puedo ajustar el tamaño del view port, tanto como yo desee. Si nos fijamos, ahora mismo tenemos una imagen que se va escalando en función del contenido, pero sin embargo, si recordamos yo en la carpeta de Imágenes del proyecto, tenía diferentes imágenes que había creado. Tengo la imagen original, que es la que estamos viendo, y otras, que había, bueno, puesto esta especie de chuleta, aquí arriba, para que a la hora de que se cargasen dentro del documento se estuviesen viendo. Entonces qué es lo que ocurre, si he cargado la librería, qué es lo que pasa. Bueno, evidentemente lo que pasa es que tenemos que añadir algún código más dentro de mi documento HTML. Para trabajar con imágenes responsive, no basta solo con cargar, en este caso, picturefill y tener las imágenes incluidas dentro de una carpeta. Hace falta referenciarlas de alguna manera dentro del documento HTML. ¿Cómo podemos hacerlo? ¿Cómo podíamos decirle al navegador que teníamos para una misma imagen diferentes opciones disponibles? Bueno, pues empleando, por ejemplo, srcset. Para poder emplearlo, en este caso, bueno, pues ya que tenemos abierto el documento HTML, vamos a colocarnos aquí, donde el etiquetado de la imagen. Y tendríamos que empezar a incluir el etiquetado de srcset. Recordemos que aquí podíamos poner rutas a diferentes imágenes que tuviésemos incluidas dentro de nuestro documento y podíamos usar algunos modificadores para poder atacar o a la densidad de pixel de la pantalla o podíamos indicar el ancho de las imágenes. Vamos a usar, en este caso, el ancho de las imágenes y vamos a fijarnos en los valores que tendríamos que poner. Por un lado, tenemos la imagen original que no teníamos que poner nada. Tenemos una imagen. Este caso cereza-extralarge, que tiene un ancho de 1600. Una large 1200. Una medium 800, y una small 600. Pues podríamos empezar incluyendo esta, por ejemplo. Habría que hacerlo de la siguiente manera. Vamos a escribir la ruta y ponemos cereza-small y le ponemos el ancho con el modificador de w. El ancho era 600, después ponemos w. Escribimos una coma, porque estamos indicando ahora que queremos incluir una imagen diferente. Ponemos images, lo mismo. Ponemos en este caso cereza medium y el ancho, que era 800. Una nueva coma. Volvemos a hacer lo mismo. Barra, en este caso era, cereza large. El ancho era 1200w, Y por último, vamos a poner la última opción que teníamos, que era cereza-extralarge, y era 1600 de ancho, w. Con esto, en teoría ya tendríamos todo lo necesario para poder trabajar en un entorno completamente responsive. Lo que tenemos que hacer es guardar. Vamos a dirigirnos al navegador para comprobar que todo funciona correctamente. Vamos a mostrar aquí. Podríamos simplemente recargar el documento. Hay algo que no hemos terminado de cerrar porque nos está saliendo el etiquetado alta. Así que vamos a volver al documento a ver qué es lo que nos está faltando. No he tardado mucho en darme cuenta que me faltaba la extensión de los archivos. Siempre pasan estas cosas: un punto y coma, una extensión, pero bueno, para eso estamos, para revisar siempre. Ahora, lo tenemos, guardamos, recargamos nuevamente en el navegador. Y ya tenemos ahora completamente funcionando nuestro contenido a nivel de imágenes responsive. Ahora mismo estoy cargando la imagen que había etiquetado como large porque, bueno, tengo un ancho de 1122 del view port y la imagen que más se acerca a ese ancho es la que yo había creado de 1200 pixeles. Que paso de 1200, vamos a ver si podemos hacerlo aquí para que encajase. Tendríamos una imagen mayor. Si tengo menos, aquí tendría la imagen de tamaño medio y también la imagen de tamaño pequeño. Vamos a corregir esta de aquí. Vamos a escribirla bien. Volvemos al navegador. Recargamos y ahora ya vemos que, bueno, pues para pantallas pequeñas se cargaría esta imagen que nosotros habíamos etiquetado como pequeña, como small. Tenemos también una medium, tenemos large y, finalmente, la imagen extralarge.

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.