Imágenes responsive: Picturefill.

Buenos días,
Para estrenarme con las aportaciones al blog voy a hablaros del polyfill Picturefill. Un polyfill es un javascript que permite implementar una funcionalidad que no es soportada en navegadores antiguos. De esta manera podremos utilizar la etiqueta <picture>  con seguridad de cumplir con nuestros navegadores. Picturefill permite servir al usuario la imagen adecuada según una variedad de condiciones tales como tamaño de pantalla, tamaño de la ventana, resolución, etc. Ahorramos un montón de transmisión de datos dándole al usuario móvil una imagen de resolución y tamaño adecuado sin sacrificar a los usuarios de sobremesa o de retina, y todo usando el mismo código.

pandas

Es por eso que necesitaremos generar tantas imágenes como breakpoints tengamos.

En el momento de escribir esta entrada la última versión estable es la v 3.0.2 y podemos encontrarla en: “@RECURSOS\JQUERY\Picturefill o en la web del proyecto: http://scottjehl.github.io/picturefill/ para comprobar cuál es la versión mas actualizada.

 

Generación de imágenes

Si tomamos como referencia los breakpoints necesarios para bootstrap tenemos que generar imágenes para las horquillas de dimensiones:

0 > 480px > 768px  > 992px  > 1200px  > ∞

Es decir, tendremos la misma imagen en 5 dimensiones diferentes.

¿Qué tamaño tiene que tener cada imagen?

Para generar las imágenes utilizaremos de referencia la más grande por cada breakpoint; Por ejemplo, si tenemos una imagen que va al 100% tendríamos las siguientes dimensiones:

pandabp

Además, tendremos que generar las imágenes para dispositivos fullHd o retina; La densidad de píxeles de estas pantallas es el doble de las habituales, por lo que también tendremos que generar las imágenes al doble de tamaño a lo que corresponde en cada breakpoint para servir a estos dispositivos. Siguiendo el anterior ejemplo:

pandabpx2

En total habremos generado 10 imágenes, dos por cada horquilla de breakpoint.

Implementación

Ejemplo funcional: @RECURSOS\JQUERY\Picturefill\examples\demo-pandas.html

Lo primero que debemos hacer es incluir el js en el <head>

<head>
    <script src="picturefill.js"></script>
</head>

Con esto sería suficiente, sin embargo, añadiendo un método javascript nos aseguramos que los navegadores antiguos detecten la etiqueta picture antes por si a nuestro js no le ha dado tiempo a cargarse:


<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.js"></script>
</head>

Ya tenemos la página lista para detectar nuestras etiquetas;

Explicando el MarkUp

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="image/img3000.jpg, image/img6000.jpg 2x" media="(min-width: 1200px)">
    <source srcset="image/img1200.jpg, image/img2400.jpg 2x" media="(min-width: 992px)">
    <source srcset="image/img992.jpg, image/img1984.jpg 2x" media="(min-width: 768px)">
    <source srcset="image/img768.jpg, image/img1536.jpg 2x" media="(min-width: 480px)">
  <!--[if IE 9]></video><![endif]--> 
  <img srcset="image/img480.jpg, image/img960.jpg 2x" alt="..."> 
</picture>

Tenemos un contenedor con la etiqueta <picture> que contiene una etiqueta <img> y una serie de etiquetas <source>. Además, para que funcione en IE9 necesitamos utilizar una etiqueta <video> para engañar al contenedor de los <picture>.

En <source> cargaremos cada una de las imágenes según su horquilla, que indicaremos con el media query. En el siguiente ejemplo, estamos cargando la imagen que aparece cuando tenemos como mínimo un ancho de 769px, es decir, que la imagen que carguemos será visible a partir de 769px y hasta 992px, que es el siguiente corte. Por lo que pondremos la imagen mas grande que admite esa horquilla, es decir la de 992px de ancho:

<source srcset="image/img992.jpg" media="(min-width: 769px)">

Si además queremos cargar una imagen para retina en ese breakpoint, añadiremos un nuevo source indicando que es para retina (2x) tal que así:

<source srcset="image/img992.jpg, ..image/img1984.jpg 2x" media="(min-width: 769px)">

En <img> cargaremos la imagen por defecto,  la más pequeña (si estamos montándolo usando el media query min-width) y añadiremos el alt=””.

<img srcset="image/img480.jpg" alt="Imagen de muestra">

Hay que tener en cuenta que el primer source que cumpla las condiciones dadas por el usuario será el que se descargue, por lo que primero pondremos las imágenes mas grandes cuando utilicemos el condicional min-width y las imágenes mas pequeñas primero cuando utilicemos  max-width.

Si queremos que una imagen no aparezca

Por diseño en uno de los breakpoints no queremos cargar ninguna imagen; Con un simple display:none podemos no verla, pero no evitar que se descargue. Así que podemos pedir una imagen de 1x1px y minimizamos la carga (aunque no evitamos la petición).

<source srcset="image/1x1.jpg" media="(min-width: 480px)">

En resumen; Es una herramienta muy sencilla para que el usuario reciba imágenes con su tamaño optimizado. Mejoramos velocidad de carga, uso de datos y visualización. 

 

La ‘curiosidad’ del viernes – Infografías del pasado y otras novedades

El viernes nos ha dejado un puente muy codiciado a nuestros pies. Pero no podemos irnos a disfrutar de nuestro festivo sin un breve repaso a algunos recursos que hemos encontrado navegando por Internet.

INFOGRAFÍAS

Hoy es un gran día para la nostalgia. ¿Cómo eran las infografías antes de los ordenadores? Esta es la pregunta que ha decidido contestar ‘The wired’. Después de leer el artículo, nuestra conclusión: eran un poco más difíciles de llevar a cabo y dignas de admiración.

infografias

RECURSOS DESDE FACEBOOK

El equipo de diseñadores de Facebook ha decidido compartir con nosotros algunas páginas de recursos muy útiles: mock-ups, herramientas de diseño y prototipado y alguna sorpresa más. Os dejo el enlace para que le echéis un ojo. Pueden ser muy útiles. Si eres usuario de Mac, con más motivo. recursos-fb

CODEPEN

Y cómo no podía faltar en este pequeño espacio a la curiosidad del viernes, un gracioso efecto desde Codepen. Un cable que se enrolla, así de sencillo, sin más. Y qué espectacular.

codepen

Hasta el próximo viernes.

La ‘curiosidad’ del viernes – Aprende jugando y otros recursos animales

Cuándo te toca investigar durante muchas horas un tema que requiere código y más código, acabas exhausto. Si encuentras la respuesta fácilmente, te sientes poderoso. Pero si no das con ella tan rápidamente puedes: desesperarte, aburrirte, frustrarte o hundirte en la miseria.

Así que es de agradecer, cuándo se está comenzando a aprender alguna destreza nueva, que haya oportunidad de hacerlo de manera entretenida.

Y eso os presento hoy, aprender código con 5 juegos. Es cierto, queridos diseñadores, que son juego orientados a desarrolladores, si bien hay algunos que utilizan J-Query, así que… ahí lo dejo si queréis dedicarle un rato:

5 JUEGOS PARA APRENDER CÓDIGO.

code-combat

 

ANIMALES CON PURO CSS

Y para que no penséis, maquetadores del mundo, que me he olvidado de vosotros, os dejo un enlace a unas bonitas animaciones de animales solo con CSS. ¿No son motivadoras?

css-animales

 

 

365 PSD

Y como hoy es viernes, y en viernes siempre se agradecen los “Freebies” he aquí un recurso estupendo que me han pasado de archivos PSD.

Algunos gratuitos… otros no tanto. Pero buen recurso.

PSD

 

 

Nos vemos el próximo viernes.

La ‘curiosidad’ del viernes – Código limpio, herramientas y pixels

Todos lo sabemos, hay cosas que a la hora de maquetar NO tenemos que hacer… y las hacemos, las hacemos.
Hacks, trucos que sacamos de debajo de la manga, márgenes negativos, propiedades dudosas, “!important”.
Así que ahora tenemos a nuestra disposición una herramienta curiosa.

DIRTY MARKUP

“Dirty Markup” es una ayuda para ver esos pequeños errores que se te han podido pasar: reglas vacías o repetidas, error en el orden de las propiedades con “vendor-prefixes” y cosas por el estilo. Lo único que tienes que hacer es pegar tu código (HTML, CSS o Js) y te hará algunas sugerencias de cómo mejorarlo.

Algunas recomendaciones las podríamos obviar: si, todos sabemos que no hay que incluir “!important” pero… que me digan cómo se sobreescriben los estilos inline de un CMS sin usarlos.

Aún así, es útil.

dirty

Otra cosa más para un viernes cómo hoy ¿estás al día con las herramientas más utilizadas para diseñar?

THE TOOLS DESIGNERS ARE USING TODAY

¿Crees que sí? Bueno, pues cotillea un poco este test. Si no usas las que han sido más votadas, no pasa nada. Pero, si ni siquiera te suenan… es un buen momento para empezar a investigar.

tools

 

 

Y por último, algo curioso… aunque esta vez no os lo traigo de Codepen (hoy he sido infiel).

GLITCH TOP

¿Nunca has sentido deseos de llenar de pixels tu pantalla? Ahora si los vas a tener, aunque solo sea para darle al play y ver cómo funcionan las selecciones de color que has hecho.

glitchtop

 

 

Y con esto me despido hasta la próxima semana.

 

La ‘curiosidad’ del viernes – Juegos web con CSS

Me doy por vencida, ya lo digo claramente: Codepen es la clara inspiración de la curiosidad del viernes.
He intentado resistirme, pero es imposible. Hay demasiado talento ahí suelto.

Hoy de videojuegos (web) va la cosa.

Ha llegado a mis ojos esta curiosidad: un niño jugando a una videoconsola ¡con algo de programación y css! En 3D. Que despropósito tan fantástico.

videojuego-codepen

Podéis dejar que la cámara se active, si queréis estar presente en la televisión dónde juega el niño. O si no le dais acceso, veréis otro juego en el que está inmerso nuestro protagonista.

Y por si esto fuera poco juego, desde Sitepoint nos enseñan a crear un Videojuego Web en 1 hora. ¿Algún voluntario/a en la sala?

game

 

Si alguien se anima, dejadnos ver vuestros juegos.

Si creamos por aquí alguno, lo compartiremos también. Prometido.

 

 

La ‘curiosidad’ del viernes

Aquí os traigo una tontería muy curiosa y en definitiva, muy grande que no podía dejar de compartir. Y menos en un viernes tan festivo.

Crea tu propia ‘Medusa‘… con sus serpientes y su peinado ‘fashion’. En Codepen hay auténticas joyas, como ésta.

medusa

Le podéis echar un ojo al código, no tiene desperdicio.

Ahora solo falta que convierta las cosas en piedra, un Pegaso con su Perseo y ya tendríamos la historia completa.