Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Tu sitio web a Retina Display con 1 linea de código


  Publicado hace |  Etiquetas: , , , , , , , ,

Con la llegada del iPad 3 o The new iPad y su pantalla retina display, la web sufrió un pequeño problema, la necesidad de ir cambiando nuestros trabajos a una alta resolución, por ejemplo las imágenes, ahora necesitan duplicar su tamaño para verse decentes en estos dispositivos de Apple, tanto el iPad como la nueva Macbook Pro Retina Display.

Quienes ya tienen el gusto de disfrutar estas resoluciones cuentan que la web es horrenda por el cambio tan drastico y no es para menos, pero tiene un inconveniente y no hablo solo del trabajo que nos toca realizar para adaptar nuestros sitios web, hablo de las imágenes, detectar la resolución con Javascript y sustituir las imagenes es algo que decían hacerlo a mano, además entre más grandes son más pesadas se vuelven y para la descarga de nuestros sitios no es nada bueno pero no es nada que no tenga solución.

Adapta tu sitio web a Retina Display con 1 linea de código

¿Qué es Retina.JS?

Es un un script que se encarga de hacer el trabajo sucio para adaptar nuestras imagenes a Retina Display, tanto en la nueva iPad como en la MacBook Pro ahorrando mucho trabajo, pero no solo hace esto, nos ahorra transferencia de datos y tiempos de carga ya que solo sirve las imágenes para dispositivos con esta resolución.

¿Cómo funciona?

Como dije, hace todo el trabajo sucio, detecta cuando un dispositivo con retina display entra a nuestro sitio web, en caso de ser verdadero, busca en nuestro servidor todas nuestras imagenes que componen nuestro sitio web con la diferencia de tener después del nombre y antes de la extensión agregado “@2x”, otra imagen pero con el doble del tamaño y las reemplaza.

El código normal eseria:

<img src="/images/my_image.png" />

Si el dispositivo detecta retina display, el script cambia el código por:

<img src="/images/my_image@2x.png" />

¿Cómo instalo el script?

No tiene ciencia y mucho menos necesitas un curso, simplemente agrega esta linea de código y listo, obviamente descargas el zip, lo descomprimes y subes al servidor tu archivo retina.js:

<script type="text/javascript" src="/scripts/retina.js"></script>

Adapta tu sitio web a Retina Display con 1 linea de código

¿Y para backgrounds en CSS?

Para esto, tenemos LESS, un archivo .less que crea los media querys necesarios para realizar la misma idea pero en CSS y adaptar todas las imagenes al doble de resolución para el caso de los backgrouds, también se aplica el tamaño de la imagen original con el fin de mantener las dimensiones adecuadas.

En el retina.zip viene todo lo necesario para adaptar nuestro sitio web sin mayor esfuerzo, es una gran oportunidad para comenzar a hacer pequeños cambios, quizas sacrifiquemos un poco nuestro tiempo de carga pero vale la pena si tus usuarios comienzan a ver nuestro contenido en esta resolución.

El sitio web oficial es: retinajs.com 

comments powered by Disqus