¿Qué tiene que hacer un desarrollador web para que su página se adapte a las pantallas retina? /@PELAYO1974


diagrama web retina

Muchos de los que han visto ya con sus propios ojos la pantalla retina del nuevo MacBook Pro se han echado las manos a la cabeza apreciando la definición. Pero los que también se han echado las manos a la cabeza y no precisamente por sorpresa positiva son los desarrolladores web, porque queda claro ya que las pantallas retina se extenderán por todas partes y eso implica que las páginas web se tendrán que adaptar.

Muchos deducen que lo único que hay que hacer para que una web se pueda ver bien en una pantalla retina es doblar la resolución de la imagen y listo, pero hay mucho más trabajo por detrás. Thomas Fuchs, desarrollador web especializado en Ruby on Rails, lo ha demostrado publicando un diagrama donde se puede ver todos los pasos necesarios a tomar para “retinizar” una página web.

La clave está en dividir las tareas por tipo de archivo. ¿Texto? No hay que hacer nada. ¿El favicon que se ve en las pestañas del navegador? Se crea un archivo .ico con las dos resoluciones necesarias y listo. Es en las imágenes donde hay más problemas, ya que además de tener que doblar su resolución (y si son iconos o botones eso implica retoques adicionales) hay que incluir código CSS adicional en la hoja de estilo. Es más, dependiendo de si la imagen es o no es una imagen de fondo, hay que aplicar retoques diferentes.

A día de hoy la única web que he visto enteramente preparada para las pantallas retina es la propia de Apple, y aún así hay partes que aún no se han actualizado. El proceso será largo, pero es de esperar que poco a poco los servicios optimicen sus webs a medida que las pantallas retina van conquistando toda la gama de ordenadores y pantallas de Apple.

Anuncios

Publicado el julio 11, 2012 en Tutoriales y etiquetado en , , , , , . Guarda el enlace permanente. Deja un comentario.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: