¿Saben qué? no se a ustedes, pero a mi ya me cansó esta discusión.

Despues de tanto tiempo de trabajar en un ambiente tan abierto como la red, deberiamos haber entendido ya que el problema de la diversidad de plataformas siempre va a estar presente. La única forma de lograr un resultado 100% predecible en el desarrollo de software es trabajar en una burbuja cerrada y controlada como el iPhone, donde puedes estar seguro que no importa lo que pase, el usuario siempre va a usar la aplicación bajo las mismas condiciones que tu estás usando en el periodo de prueba.

Lo que muchos desarrolladores no han visto aún, es que el problema no es nuevo, ha existido desde épocas antediluvianas en el desarrollo de software y como sucede en estos casos, los antigüos sabios desarrollaron una solución al conflicto desde hace eones. Lo llamaron requerimientos del sistema.

Si vamos a usar la web como plataforma para aplicaciones, y no solo para documentos como estaba originalmente planeada, entonces tenemos que pensar en ella en términos de desarrollo de software y no solo de arquitectura y maquetado de información. Esto nos va a ayudar eventualmente a entender que no podemos controlar cada caso bajo el que los usuarios van a ejecutar el sitio, y que intentar hacerlo es una empresa inútil que solo terminará en frustraciones y dolores de cabeza.

Lo mejor que podemos hacer es apegarnos lo más posible a los estándares en los que los navegadores modernos están de acuerdo y olvidarnos de el resto. Entiendo perfectamente el deseo de querer que todos los usuarios puedan ver tu sitio, pero en algún punto tenemos que entender que desarrollar con las últimas técnicas de CSS3 y HTML5 e intentar verlo todo en IE6, es como intentar correr juegos de PS3 en una PS2, simplemente no funciona.

Siguiendo la analogía, en ese caso, la parte del trato del usuario consiste en tener la consola apropiada para correr el juego, en nuestro caso, tenemos que hacerle ver que para recibir una buena experiencia de nuestro sitio, su parte consiste en tener un navegador decente y que si no lo hacen, simplemente no pueden esperar obtener los mismos resultados.

Ese es el concepto básico de los requerimientos de sistema. Construyes la aplicación para que funcione bajo ciertas condiciones, si el usuario no las cumple, no puedes prometerle que las cosas funcionen.

No podemos seguir preocupándonos por los usuarios de IE6, me preocupan más los usuarios con navegadores modernos (que ya son mayoría) a los que les estamos evitando una mejor experiencia debido a esto. Imaginen que estamos en la escuela y un niño faltó a clases por un més, además de esto, es indisciplinado, tiene problemas de atención y de vez en cuando se le ve picándose la nariz con un lapiz hasta que le sangra. Ese niño es Internet Explorer 6, ¿vamos a detener el progreso de los demás niños por su culpa?. Exacto.

La situación es clásica, terminas de diseñar el fabuloso nuevo tema para tu sitio y te dispones a exportarlo. Todo bien hasta que empiezas a maquetar, abres Firefox para ver tu obra y te dás cuenta que los colores de las imagenes se ven diferentes, parece que fueron lavadas con un mal detergente que les quitó la vida. Para intentar comprender que pasó, ábres la imagen con cualquier otro programa y oh sorpresa, se ven perfectas. ¿obra del demonio? no exactamente.

Este es uno de esos problemas que cuando te dás cuenta que existen y no encuentras una solución, logran frustrarte al nivel de querer tomar el objeto más pesado que tengas a la mano y lanzarlo furiosamente contra el monitor. Desafortunadamente eso no arreglará nada así que habrá que buscar otra forma de solucionarlo.

Entendiendo el problema

En algún momento a alguien se le ocurrió que sería buena idea inventar una cosa llamada “perfiles de colores”. La idea es que las aplicaciones serían capaces de leer cierta información dentro de las imagenes que les permitiría saber como desplegar los colores en el monitor y de este modo lograr que se vean igual bajo diferentes monitores u otras condiciones variables. Esto es muy útil para fotógrafos o ilustradores que quieren que sus creaciones se vean como ellos las planearon, pero es un dolor de cabeza cuando llegamos a 2009 y nos damos cuenta que los navegadores, como de costumbre, no se ponen de acuerdo en como manejarlos. Safari los soporta, IE no tiene idea de que existen y Firefox los incluye desde 3.0 pero viene con la opción desactivada por defecto. Esto es un problema por que queremos que nuestros sitios se vean igual en cualquiera de los tres, y que esto será cercano a lo que vemos cuando lo estamos diseñando en Photoshop.

Cambiando el espacio de trabajo

Aunque los navegadores no soportan diversos perfiles de color, si vienen con uno estandarizado por defecto y asumen que todas las imagenes deben ser manejadas usándolo; esta es la constante que aprovechar para resolver el problema. El perfil que buscamos es sRGB en alguno de sus múltiples sabores así que vamos a cambiar nuestra area de trabajo para que funcione con el.

Vamos a Edit -> Color Settings (Shift + Cmd + K en OSX). En Working Spaces cambiamos la opción a sRGB si aún no está seleccionada. En la sección Color Management Policies seleccionamos Convert to Working RGB y activamos la casilla para que Photoshop nos avise cuando encuentre otros perfiles al abrir archivos. Esto último es opcionl y probablemente terminarás desactivandolo en el futuro, pero si es la primera vez que haces uso de estas opciones, es recomendable que Photoshop te recuerde que está cambiando los perfiles.

Probando los colores

Basicamente el paso anterior, es todo lo que se tiene que hacer, sin embargo, si exportamos ahora las imagenes, veremos que los colores siguen siendo diferentes a lo que vemos en Photoshop por que la conversión no sucede hasta que se generan los archivos finales. Lo que tenemos que hacer ahora, es lograr que nos muestre esta versión final mientras estamos trabajando con el archivo.

Para esto vamos a View -> Proof Setup y seleccionamos Monitor RGB. Si no se activa automaticamente, presionamos también View -> Proof Colors (Cmd+Y).

Ahora nuestra area de trabajo se ve completamente como un preview de como se verán las imagenes después de ser “guardadas para web” y podemos ajustar los colores con la seguridad de que se verán exactamente igual tanto en Photoshop como en el navegador.

Desafortunadamente Photoshop no incluye una opción para dejar activada la prueba de colores por defecto, así que este último paso tenemos que hacerlo manualmente cada que arranquemos el programa.

Extra: Diferencias de color entre Windows y Mac

Notarán que justo arriba de la opción Monitor RGB que seleccionamos, se muestran 2 opciones que dicen Macintosh RGB y Windows RGB. Como sus nombres lo indican, irven para probar como se verán las imagenes en una PC si estamos trabajando en una Mac y viceversa. La diferencia es culpa de la configuración en la gama de colores con la que vienen cada una, en Win es de 2.2 mientras que en OS X es de 1.8, lo que provoca que los colores sean un poco más claros en este último. Algunos diseñadores cambian la configuración del monitor para ajustarla a 2.2 y adecuarse a como lo verán la mayoría de los usuarios, pero a mi en particular no me gusta por que los colores pierden un poco de vida, prefiero usar esta opción de Photoshop para darme una idea de como se verá. El resultado no es 100% exacto pero es lo suficientemente cercano para saber si quiero hacer alguna modificación.

Sería algo así:

Ah pero este no es mundo ideal!, este es un mundo donde tenemos más navegadores de los que necesitamos, cada uno con sus caprichos propios y su propia forma de interpretar el código. Nos encontramos con que lo que intentamos arriba no es posible y nuestros divs terminan sobrepuestos verticalmente ignorando las propiedades float: left de los divs internos y el overflow: hidden de el contenedor. No voy a poner el código por que es bastante obvio.

¿La solución? Agregar un contenedor extra con una longitud mayor a la de nuestro contenedor en el que puedan entrar todas las páginas de contenido.

No estoy completamente feliz con como se resuelve por que es agregar un div innecesario y el código para manipularlo tendrá que ser un poco menos elegante, pero funciona y eso es lo que importa.

link: http://shine.yahoo.com/

En Yahoo están lanzando ideas como hot cakes en el desayuno para ver si alguna los salva de las garras de Microsoft. Lo que me gustó de Shine fue el pequeño tour que te dan cuando visitas el sitio por primera ocasión.

Andreas Wildman

link: http://www.andreaswidman.com/

Bonito, limpio y con un toque de AJAX. Así me gustan mis sitios.

Piperlime

link: http://www.piperlime.com/browse/product.do?pid=565084002&tid=PLFR1#

Mientras miraba los zapatos de pacman más espectaculares de la historia me encontré con la pequeña funcionalidad de zoom que usan cuando pasas el cursor sobre los productos y me gustó.

Este personaje que se hace llamar SEO Rapper o ” el poeta profético”, rapea durante más de 3 minutos con algunos consejos sobre como codificar un sitio usando estándares web.

Solo espero que el reggaeton del CSS no se le ocurra a nadie pronto.

The Leviathan Chronicles

url: http://www.theleviathanchronicles.com

Pocas veces me verán recomendando sitios hechos en flash pero este se merece una mención por espectacularidad. Se trata de un podcast de ciencia ficción recién lanzado y el sitio logra el objetivo de introducirte a su mundo.

Portafolio de Paolo Boccardi

url: http://www.fashionphotographer.it

Portafolio del fotógrafo italiano Paolo Boccardi. De algún modo logran hacer funcionar el scroll horizontal y me gustán los detalles que tiene como la información de cada foto que aparece al mover el ratón sobre ella.

Design by humans

url: http://www.designbyhumans.com

Un poco bajo la misma idea de threadless, Design by humans hace concursos de diseños para camisetas que después imprimen y venden. Ironicamente no tienen el toque humano de threadless pero aún me gustó como se ve y nunca hay suficientes tiendas de camisetas en el mundo.