Diseño web responsive: Imágenes

Qué es Picturefill y para qué sirve

¡Prueba gratis durante 10 días

nuestros 1270 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo presentaremos Picturefill, un polyfill encargado de ofrecer soporte a imágenes responsive en contextos y navegadores que no cuentan con el soporte necesario para poder trabajar con ellas.
03:43

Transcripción

Aunque el concepto de diseño web responsive ya lleva unos años con nosotros, y hay mucho soporte gracias a comunidades como la que estamos viendo ahora mismo en pantalla, son este tipo de comunidades las que ayudan a empujar la oficialización de nuevos elementos que incorporar a tecnologías dentro del mundo web. Dado que la especificación de imágenes responsive sigue siendo, pues bueno, algo relativamente nuevo, digamos que el soporte no es del todo óptimo aún. Lo podemos ver entrando en una página super útil, en este caso, que es la página web de Caniuse.com. Podemos, por ejemplo, poner "srcset", y vamos a echar un vistazo rápido. Si nos fijamos, tenemos soporte muy bueno pues dentro del Safari de iOS, de Opera, Safari, Chrome, Firefox; pero en versiones un poco antiguas de Internet Explorer, como la 8 que apenas ya se usa, la 11, o incluso el navegador Opera Mini, o algunas versiones no muy actuales de Android, bueno, pues no soportan en absoluto este elemento HTML. De manera similar, en vez de "srcset", que es una de las opciones, bueno, pues más rápidas de poder utilizar a la hora de trabajar con imágenes responsive, podemos probar con... vamos a poner el elemento "picture", y vamos a fijarnos que está más o menos en la misma situación. Tenemos un buen soporte en Opera, Safari, Chrome en sus últimas versiones anteriores, Firefox, tenemos soporte en el navegador de Microsoft Edge, pero bueno, en determinados mercados en los que a lo mejor todavía se esté empleando versiones anteriores de Internet Explorer, o usuarios que usen Opera Mini, o versiones de Android Browser anteriores a la 52, bueno, pues no ofrecen soporte para este tipo de elementos. Esto, no obstante, es algo bastante común cuando aparecen nuevas especificaciones y esa es la razón por la que existen sitios como Caniuse, que nos permiten ver rápidamente el soporte de determinadas características dentro de lo que es el mundo del desarrollo web. No obstante, también, como no podemos esperar a que las compañías desarrolladoras terminen siempre de implementar todas las novedades, es aquí donde aparecen conceptos como los Polyfills, que, básicamente, nos permiten hacer una especie de hacks en nuestro código para añadir funcionalidades que no están soportadas de manera oficial. Un caso de Polyfill, bueno, pues sería Picturefill. En el caso de Picturefill, mediante un poquito de javascript, vamos a poder avanzar en este sentido a nivel de soporte total; esto quiere decir que incluso los navegadores que no soportasen correctamente el uso de imágenes responsive, bueno, pues vamos a poder conseguir que incluso estos navegadores las muestren de una manera consistente hasta que, pues en este caso, ya no tanto, pero los equipos oficiales de desarrollo terminasen de implementar oficialmente el marcado necesario y el soporte dentro de sus navegadores para este tipo de elementos. Actualmente, Picturefill es una de las formas más sencillas con las que poder empezar a trabajar con imágenes responsive dentro de cualquiera de nuestros próximos proyectos ofreciendo toda la compatibilidad que pudiésemos necesitar.

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.