in javascript, programación

Una de las cosas que más me llamaron de la atención cuando empecé a probar el nuevo Twitter fue la curiosa sintaxis de sus urls, que comienzan con los simbolos #!, también conocidos como hash-bang,

Como ustedes seguramente saben, el nuevo Twitter es una aplicación ligera construida íntegramente con Javascript/HTML/CSS sobre la API misma de Twitter. En aplicaciones Ajax, es común el uso del hash (lo que sigue del # en la url) para denotar estado y para preservar el uso de los botones atrás y adelante del navegador así como hacer links permanentes.

Éste uso del hash es más o menos un hack, puesto que no fue diseñado para eso sino para enlazar secciones dentro de un documento (como este enlace a la forma de comentarios de este post. Pero este nuevo uso, sin embargo, se ha vuelto tan popular que existen frameworks enteros desarrollados alrededor de esta idea, como Sammy, que inspirado en Sinatra, usa el hash para simular rutas.

Rsuelto eso, aún quedaba el misterio uso del (!) bang (Nosotros le llamamos signo de admiración, lo cual es aburrido, asi que perdonen si uso el término gringo). ¿Qué ventaja tiene usar twitter.com/#!/mentions por sobre el más clásico twitter.com/#mentions? para averiguarlo, desempolvé mi cuenta y pregunté en Quora (requirer registro).

Para mi sorpresa, un empleado de Twitter se tomo la molestia de resolver mi duda.


Yo trabajo en Twitter. Este esquema fue elegido deliberadamente para estar alineado con la especificación de Google para indexar applicaciones web AJAX.

¡Problema resuelto! La especificación a la que se refiere—que yo noconocía— es una especificación de Google para que las aplicaciones AJAX puedan ser indexadas por sus robots (alerta SEO).


En corto, la solución funciona de esta manera: el crawler encuentra una URL AJAX bonita (esto es, una URL que contiene un fragmento #! en el hash). Éste entonces hace una petición por el contenido de esta URL a tu servidor en una manera un tanto distinta. Tu servidor web regresa el contenido en la forma de un snapshot HTML, que es entonces procesada por el crawler. El resultado de búsqueda mostrará la URL original.

Esquema de URLs AJAX indexables

La especificación completa está publicada en éste sitio: Making AJAX Applications Crawlable

Ahora espero que sepan algo que antes no sabían, porque como dicen, saber es la mitad de la batalla.

Write a Comment

Comment

  1. facebook ya tenía implementadas todas sus url con un hash, cuando google presentó el esquema que mencionas, tan sólo tuvieron que agregar un bang.

    el nuevo flickr también lo tiene http://www.flickr.com/photos/diveofficer/5075206811/ dale click a la imagen para que aparezca el lightbox. si estás en firefox, aparecerá un hash bang en tu url, pero si estás en webkit, cambiará la url. esto es una especificación nueva de HTML5 http://www.spoiledmilk.dk/blog/?p=1922

    saludos