Google Chrome, ¿y ahora qué?

No he podido resistir escribir algo sobre Google Chorme después de ver el estupendo comic de Scott McCloud. Otra vez la gran G da la campanada y se lanza de pleno a la guerra de los navegadores 2.0. Hasta los menos tecnófilos se habrán enterado de la noticia porque ha salido en todas partes.

Pero a mi me ha gustado mucho la noticia por muchos motivos. Por un lado, que Google es una marca de prestigio (posiblemente mucho más que Microsoft), con lo que mucha gente del entorno Windows reacia a usar Firefox va a tener otra opción muy interesante, lo que puede romper de verdad la lamentable hegemonia de Internet Explorer.

Por otro lado, me encanta que usen el motor Webkit porque es el que usa Safari y Konqueror y eso aumentará la necesidad de hacer sitios web compatibles con este motor. Se pueden ignorar un poco a los maqueros (aunque cada vez son más) y por supuesto se ignoran olímpicamente los linuxeros, pero Google simplemente no se puede ignorar. Así que habrá que hacer las cosas bien.

¿Y ahora qué? Pues muchos tendremos que plantearnos cómo enfocar la orientación de los sitios web y la adherencia a los estándares debe ser una necesidad. Ahora se puede cubrir gran cantidad de visitantes simplemente asegurando que la navegación es correcta en Firefox y Internet Explorer 7, pero claro, no se puede olvidar el 6 porque hay gente que inexplicablemente no se actualiza (la mayoría debe ser por tener versiones muy viejas de windows o ilegales de XP). Así que con esos ya son 3 versiones. Ahora también Chrome, ya son 4 navegadores y 3 motores dispares entre sí.

Así que, cada vez está más claro que la única opción viable va a ser adherirse a los estándares web, especialmente de CSS y ser implacable con las malas implementaciones. Y si nuestra web no se ve con un navegador defectuoso (especialmente IE6), insistir a nuestros clientes que no es de recibo usar esos navegadores y por nuestra parte, cumplir a rajatabla los estándares, que para algo están.

Eso sí, habrá que ver si en esta nueva guerra de navegadores no hay que lamentar bajas como hubo que hacer en la primera. Larga vida a Netscape.

Google anuncia Google Doctype

No suelo escribir sobre actualidad pero la ocasión lo merece, porque el anuncio me ha gustado y encuentro que es una gran iniciativa por parte de Google: Google Doctype.

La idea del gigante, llevada a cabo por Mark Pilgrim, autor de un par de libros (Dive into Python y Greasemonkey Hacks) es sencillamente un wiki sobre desarrollo web (HTML, CSS, Javascript, …) bajo una licencia Creative Commons Attribution y permitiendo a todo el mundo con una cuenta de Google modificar, mejorar y ampliar los contenidos. Incluso se pueden descargar todos los contenidos a través de Subversion.

Desde luego es una iniciativa poderosa, en la que además se presentan código interno de Google en la documentación liberado open source y pretenden convertirse en un referente para todos los desarrolladores web. Viendo el video de Mark (un poco largo y con mucho ruido de fondo), el propósito es permitir a la gente crear webs universales, aptas para cualquier dispositivo, navegador y sistema operativo, algo que cada día es más demandado. ¿Sabías que el iPhone no tiene reproductor Flash? Pues eso deja fuera de juego a todas las webs que usan Flash. El futuro depara una cantidad ingente de clientes web heterogéneos y Google apuesta por el HTML, las CSS y el Javascript como una respuesta a esta situación.

En resumen, que hay un nuevo referente en cuanto a documentación para el desarrollo web, que viene a completar los que hay ahora, como el sitio oficial del W3C o una de mis favoritas: Quirksmode.

Via | Google Doctype: Documenting the Open Web (ajaxian.com)

Ahorrando ancho de banda con sprites y CSS

Los sprites son en realidad simples imágenes que contienen varias imágenes y se muestran solamente una a una usando técnicas para recortarlos. Estos se han venido usando desde los primeros videojuegos para realizar animaciones, por ejemplo o para guardar iconos y dibujos. Eran tiempos en que la memoria era un lujo y las velocidades bajas por lo que poder guardar los sprites en el buffer de la memoria de video y así usarlos rápidamente era una ventaja.Sprites

Ahora, esto ya no suele ser un problema: tarjetas gráficas con cientos de megabytes de memoria, motores de cálculo 3D, montones de texturas. No es un problema por lo menos para los juegos pero en Internet el ancho de banda sigue siendo un lujo. No siempre para el usuario sino también para el proveedor de contenidos. Con los sprites se pueden conseguir varias cosas:

  • Reducción del peso total de una página web, con el consecuente ahorro de tiempo de descarga y de coste del alojamiento (Ahorrando 10kb por visita, si hay 1.000.000 de visitas mensuales son unos 10Gb, que no es algo despreciable)
  • Reducción del número de peticiones HTTP, con, de nuevo, ahorro del tiempo de descarga, reducción de la carga del servidor. Con un servidor menos potente se pueden servir más páginas.

Evidentemente si no tenemos cientos de miles de visitas, todo este ahorro en realidad no es para tanto, pero cada vez son más los internautas y es algo (y será) a tener muy en cuenta.

La técnica básica es jugar con las propiedades CSS  de width y height para recortar lo que muestra la imagen que se indica en el background y además usar las propiedades de background-position para desplazar el sprite y mostrar la zona que se desea ver. En A List Apart, como siempre tienen un artículo interesante sobre el tema.

Un caso real, explicado por los autores se puede encontrar en el rediseño de Google Code, donde se usaron sprites para las imágenes de la primera página, de modo que se descargasen todas a la vez y así ahorrar llamadas. Desde luego estos de Google son los genios del ahorro.

También existe un interesante libro sobre el tema, aunque mucho más extenso: High Performance Web Sites de Steve Sounders, empleado ex-empleado de Yahoo! (ahora en Google y artífice de las mejoras comentadas) que se dedica exclusivamente a este asunto. Además hay tiene una pequeña pero jugosa web sobre el tema.

Finalmente, si queréis probar las mieles de los sprites con vuestras propias imágenes existe el Generador de Sprites CSS online, aunque siempre será mejor usar algun editor de imágenes para estos menesteres.