Qué significa Retina Display en el diseño web

Laptops, teléfonos y tablets están cambiando las reglas respecto a los pixeles, las imagenes y las interfaces. El iPhone 4 fue el primer en ponerle nombre: "Retina Display". Pantallas con el doble de densidad de pixeles de la generación tradicional en la que por años hemos estado acostumbrados a diseñar.

Ese fue solo el inicio. Vivimos en un mundo dominado por 3 tipos de pantalla:

• El teléfono, de uso normal vertical.
• Los tablets. iPad a 4:3 y Android tradicionalmente a 16:9. 
• Los laptops y desktops, que van desde el netbook de 1024x600 hasta la estación de combate dual de 3840x1080.

¿Para qué pantallas diseñamos?

Asumiendo la pantalla 13"~15" como el estandar de los laptops y el iPad y iPhone como el estandar de los móviles, este es el mundo al que nos enfrentamos:

Dos soluciones surgieron. Crear un diseño aparte para móviles, otro especializado para tablets (puagh!) y uno tradicional para laptops. Otra idea, más sensata ha sido el Diseño Adaptable o Responsive Design. Requiere más esfuerzo, pero sólo tiene ventajas, entre ellas un mejor posicionamiento en buscadores para sitios móviles y un diseño uniforme y unificado. 

Pero ninguna de estas soluciones es eficiente para Retina Display.

De Responsive Design a Retina Display, la diferencia es abismal

¿Recuerdan el gráfico de arriba? Este es el gráfico del cambio de resolución entre los dispositivos normales y los dispositivos con pantalla tipo retina. 

¿Crees que aún son pocos? Apple tiene 3 teléfonos retina, la tablet más vendida del mercado, su laptop más poderoso en 15" y este mes saldrá el Macbook Pro Retina de 13" que seguro venderá mucho. En un año, todos los Macbooks serán Retina.

En el mundo Android, desde el Galaxy S2 la densidad aumentó mucho y con el S3 llegó al nivel de Retina Display. HTC, LG y Motorola tienen planes o teléfonos ya con alta densidad de pixeles. En tablets aún están quedados, pero el Nexus 7, la tablet Andriod más vendida, tiene una densidad cercana a Retina.

En el mundo Windows, tanto Samsung, como Lenovo y ASUS lanzarán laptops con pantallas tipo "Retina" y Windows 8 al final de este año. A partir de ahora todos los laptops de gama media y alta tendrán este tipo de pantallas. 

Es una realidad y hay que actuar ahora

¿Qué se ve bien y qué se ve mal en Retina Display?

Todo lo que sea texto se ve perfecto e impecable en Retina Display. El texto es vectorial y las buenas fuentes son adaptables a cualquier pantalla y resolución. Esto ha hecho renacer el font-face de CSS3 y las librerías de fuentes abiertas como Google Fonts. También existen fuentes de iconos que reemplazan los .png (nadie decente usa .gif en el 2012 al diseñar).

¿Pero las imágenes? Las imágenes son la mala noticia. Una imágen normal de 300x300 se ve así en pantallas normales (izquierda) y así en Retina (derecha):

No exajero. Cambiar de mi viejo macbook al Macbook Pepito Retina 15" fue como ver un canal de TV antiguo en un TV LCD HD 1080p de 60". ¿Por qué antes se veía bien y ahora todo se ve mal? Todo es cuestión de perspectiva y comparación. Cuando tienes un Macbook Retina y uno normal lado a lado, no puedes evitar pensar que el normal se ve borroso, aunque lo hayas usado toda la vida. 

La solución es fácil: Pública tus imagenes al doble de resolución. Si quieres que un logo se vea bien a 100x100 en Retina, crea una imagen de 200x200 y ponla de 100x100 usando CSS. Lo mismo con HTML para las imagenes de tu contenido. No hay mejores soluciones.

¿Es más peso? Sí, pero encontré un truco curioso. Si exportas un JPG al doble de resolución, con el 40% de la calidad y por HTML o CSS lo redimensionas a la mitad de su tamaño, se ve impecable en pantallas normales y en pantallas retina. ¡Y pesa menos que un JPG normal a 85%!

¿Y si usas Flash? ¿Flash es vectorial, verdad?

Sí. No. Flash es vectorial pero representa en pantalla visualmente bitmaps rasterizados y rendereados del contenido. Adobe no ha dado soporte en el Flash Player para Retina Display hasta ahora y todos los SWF se verán tan mal como un JPG. Esto es una realidad tanto para el contenido vectorial, texto o incluso bitmaps como imagenes o videos. Una lástima, pero una realidad.

UPDATE: El honorable @elecash me ha hecho hacer más experimentos con el Flash Player. Se ve muy bien en vectorial el SWF si lo insertas de la manera correcta y si todos tus assets son no vectoriales. El problema sigue siendo que Flash recomprime los JPG, pero es cuestión de configurarlo pesado. En video, no hay solución, pero esto es una realidad incluso con HTML5. 


Las pantallas de alta densidad son una realidad inmediata que mucha gente está usando y para las que deberías adaptar tus sitios y apps ya. ¿Ya lo hiciste?
Fuente : Cristalab.com

El desarrollo de software, una profesión vocacional

La programación, desarrollo de aplicaciones informáticas en todas sus variantes. Plasmada en el profesional por excelencia: el pica código. Personaje profundamente desconocido e incomprendido por el resto de la sociedad, que no encuentra la causa de la complejidad y capacidad que requiere todo aquel que haga programas pero se lamenta profusamente cuando se rompe el ordenador o hay un fallo informático.

En este post quiero compartir años de experiencia con aquellos que desean iniciarse en esta fascinante profesión, para intentar plasmar de una forma clara las ventajas y desventajas que este trabajo implica. Y con ello ayudar a los que aún estén tomando decisiones que afecten a su carrera laboral.

Qué no es un programador

Lo primero que tienes que tener muy en cuenta es que la palabra informático debiera ser reconstruida y volverse a definir para eliminar el lastre que esta imponiendo su erróneo significado, a todo un cúmulo de profesiones y especializaciones. Dentro de este palabro la sociedad iguala a los compañeros de sistemas, a los de telecomunicaciones, a los electricistas, a los de servicio técnico y a los usuarios de fotocopiadoras. Todos somos informáticos. Y se extrañan mucho cuando les dices que no sabes programar el blue ray o que un gestor de pedidos no cuesta 200€ y dos días para hacerlo.

Un programador no es el que sabe instalar un sistema operativo desde cero y dejar configurado todo el software. No es el que puede montar el hardware de un equipo con una brazo atado y en la oscuridad. No es quien puede hacer un diseño a la página web de una multinacional. No es el hacker que entra en los ordenadores de la NASA mientras tira a AlaMuerte en 25H. No es quien consigue el software pirateado en la empresa o en la familia. Y no es Steve Jobs. Si que lo fué Bill Gates.

Entonces, qué es un programador

Un desarrollador es un trabajador puramente intelectual que partiendo desde un básico lenguaje binario, que es lo que entiende el procesador de cualquier dispositivo informático, va creando abstracciones cada vez más profundas para hacer que los ordenadores hagan lo que se espera obtener de ellos.

Osea, es tan programador el ingeniero que diseña las puertas lógicas físicas de un microprocesador, como el que ha programado la Bios, como el que ha desarrollado el Sistema Operativo, como el que ha desarrollado un lenguaje de programación de alto nivel, como el que lo ha utilizado para hacer MAGIA. Que una máquina de turing corra una maravilla gráfica como Crysis 2 o almacenar y analizar los datos del Cern.

Básicamente, justo a partir de la capa física del hardware, el programador es la piedra angular sobre la que se ha construido la inmensa industria de la Informática. O, como dicen en el Estado, La Sociedad de la Información.

Que tengo que tener para ser programador

El desarrollo de aplicaciones informáticas es un profesión dura. No hay paños calientes para ello. Es una profesión en donde el estudio no se detiene nunca ya que la evolución tecnológica tanto del hardware como el propio desempeño de la programación, es simplemente vertiginosa.

Obviamente no es dura físicamente, pero si lo es a nivel intelectual. Todos los días te has de sentar durante horas para resolver los más complejos problemas lógicos y matemáticos. La capacidad de concentración, de intuición, de pensamiento lógico es imprescindible. Cada vez hay más ayuda por parte de aplicaciones, programadas por otros desarrolladores, para realizar estas labores. Pero al final solamente la lógica humana y su capacidad para interpretar las líneas de código y los resultados obtenidos, consiguen la respuesta adecuada.

Otro característica necesaria para ser desarrollador es la vocación, o pasión. Si no se disfruta programando, del reto de superar el reto intelectual que tenemos delante, de dedicar horas a ser mejor aprendiendo aquello que aún no sabemos, no vamos a ser programadores. Llegaremos a un equilibrio en donde cobraremos por el mínimo trabajo posible y nos perderemos lo más importante de esta profesión: el divertirte con tu trabajo, por lo cual deja de serlo. En eso nos asimilamos a los deportistas, artistas o a los empresarios/emprendedores.

Se podría señalar como un tercer requisito el talento. Pero yo pienso que eso solamente marca la diferencia a partir de un punto en donde el conocimiento adquirido ya es muy alto. Eso sí, entonces las diferencias son abismales. Pero como sería de esperar en un cualquier deportista de élite.

Qué estudios debo tener

Peliaguda cuestión. Cuando estuve en la facultad, sin duda los mejores desarrolladores se autoformaban y casi no tenian importancia los estudios reglados. El gran ejemplo, Bill Gates, que no necesito de una carrera para hacer un enorme trabajo como desarrollador y luego como el magnate de Microsoft.

Actualmente, el no tener una titulación mínima como puede ser un módulo superior es un handicap. Y más en estos tiempos de crisis. La titulación universitaria sigue teniendo poco valor ya que los temarios siguen muy alejados de las necesidades de las empresas, y de formar estudiantes que puedan competir con una persona que ha utilizado esos años en programar en el mundo real. Sobre la función de la universidad como motor del I+D en desarrollo en nuestro país, a los hechos me remito.

En cambio si trabajas para el estado de forma directa o indirecta, es importante la titulación. Ya que funciona por un sistema de títulitis en donde no importa tanto lo que sepas si no lo que hayas estudiado. También en las grandes empresas privadas se mira el título en la progresión que se entiende en España de lo que debe ser la carrera de un desarrollador: junior, programador, senior, analista-programador, analista funcional, jefe de equipo/proyecto y de allí a puestos de gestión o comerciales.

Los estudios realmente importantes son los que te imponen el programar. Si picas código todos los días, si atiendes a eventos, si escuchas podcast, si sigues foros, blogs, si ves webcast y si estudias el 1% de la literatura existente, serás cada día mejor. Y te será más fácil el desarrollar y obtendras código de más calidad.

Que esperan de tí

La mayoría de las empresas ven a los desarrolladores como un mal necesario. Realmente no se han dado cuenta aún que el motor del negocio de la construcción y mantenimiento de las aplicaciones informáticas es dependiente en exclusiva de la calidad de los programadores. Y muchas te pedirán horarios interminables o mentirle a los clientes para que muestres una experiencia que aún no tienes. Sobre todo en las grandes cárnicas. Eso se plasma en el terrible término de recurso, que se ha impuesto en el lenguaje empresarial de nuestro sector y que nos asimila a las impresoras o a los teléfonos.

También es importante para la empresa que no seas un autista social o el típico perro verde. Y nadie soporta mucho tiempo a los prepotentes, cosa en la que los desarrolladores caemos con mucha frecuencia ya que la sensación de superioridad intelectual que embarga al programador es muy poderosa al compararse con la inmensa mayoría de los usuarios; y que ha de ser contrarrestada con humildad y deseo permanente de aprender, siendo consciente que siempre hay alguien mejor que tu y casi siempre muchos mucho mejores.

Conclusión

El desarrollador informático, también llamado pica código, es una profesión vocacional, con poco reconocimiento social y sueldos bajos en este país para el esfuerzo formativo que se debe de mantener de buen gusto para mantenerse actualizado y en la búsqueda constante de la mejora. Pero con una demanda constante por parte del mercado, con un desempleo relativo muy bajo en comparación con la mayoría de los demás sectores, y con un grado de satisfacción personal y profesional tan grande que hace que merezca la pena dejarse las pestañas en conseguir que la maldita función pinte en la pantalla “Hola Mundo”

STOP SOPA ---> NO A SOPA!!!

NO A SOPA - Libertad en Internet

NO A SOPA - Explicación de la ley contra INTERNET

Facebook ya no soportará a Internet Explorer 7

Facebook anuncia que ya no soportará a la versión 7 del Internet Explorer.

La intención de ir dejando atrás a las viejas versiones de los navegadores de Microsoft de parte de los diversos servicios y redes sociales en la red, parece ser un objetivo que desde hace unos meses han decidido llevar adelante tanto Google, como Facebook y YouTube. Después de que el Internet Explorer 6 sufriera actualizaciones forzadas, poco le quedaba a la versión 7 para comenzar a tocar la retirada.

Y Facebook será uno de los ejecutores de la versión 7. Los visitantes de Facebook que utilicen esa versión, ya no serán capaces de ver la Timeline, una de las nuevas características de Facebook agregadas a principios de este mes; en lugar de ello verán el viejo diseño de la red social. Si bien podrán navegar por Facebook, habrá algunos detalles que no funcionen debidamente o algunos renderizados que no se desplegarán correctamente.

Se produce otro golpe mortal para IE7, luego de que la misma Google anunciara que algunos de sus servicios ya no serían soportados desde la vieja versión del navegador. En IE6, casi a punto de fenecer, el panorama es aún peor porque Facebook es directamente innavegable y el chat no se abre.