Entradas en la categoria ‘Diseño web’

Requerimientos del sistema y por que IE6 es como Ralph Wiggum

Publicado en Diseño web | 1 Comentarios

ralphie6Algunas cosas simplemente se niegan a morir. Los últimos días ha estado rondando por la internet una nueva campaña que busca acabar con los últimos vestigios de esa obra de lucifer conocida como IE6. El problema es el mismo de los últimos 4 años: retrasa el avance de la red como plataforma, no permite la evolución de las aplicaciones y es un grandísimo dolor de cabeza así como una aspiradora de tiempo para los desarrolladores que intentan soportarla.

¿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.


Como arreglar el misterioso cambio de colores de Photoshop al navegador

Publicado en Diseño web | 5 Comentarios
Tutorial Photoshop

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.

Continuar leyendo Como arreglar el misterioso cambio de colores de Photoshop al navegador »


Tip rápido para sliders horizontales

Publicado en Diseño web | 0 Comentarios

Digamos que quieres hacer uno de esos sliders horizontales como el que se ve en el sitio de Coda. En un mundo ideal podríamos poner un div como contenedor con overflow: hidden en el eje x y varios divs flotados dentro de este. Después los podríamos manipular vía javascript.

Sería algo así:

Overflow

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.

Overflow

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.


Sitios que me gustaron esta semana

Publicado en Diseño web | 0 Comentarios

Yahoo Shine

Yahoo shine

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

Andreas Wildman

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

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

Piperlime

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ó.


El rap del diseño web

Publicado en Diseño web | 0 Comentarios

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.


Sitios que me gustaron esta semana

Publicado en Diseño web | 0 Comentarios

Esta será una especie de sección semanal donde haré una muestra de varios sitios que me hayan llamado la atención, ya sea por su diseño, concepto o por alguna funcionalidad interesante que tengan.

The Leviathan Chronicles

sdls_leviathan.jpg

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

sdld_paolo.jpg

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

sdls_design.jpg

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.