Redes sociales y la adopción de los nuevos estándares

Publicado por

Mucho se ha dicho y comentado de la nueva interfaz de Facebook, cambios que hacen muy parecido a Google+ y Twitter, algunos dicen que hasta tiene la escencia de 4Chan. Pero desde hace tiempo se ha venido comentando mucho acerca de la adopción de los nuevos estándares web en Facebook, como el reproductor de videos en HTML5. Es algo muy técnico, pero creo yo que es importante resaltarlo, ya que ahora con la nueva interfaz me he podido percatar de que en las URLs ya no aparece el HashBang del que les había comentado antes, empezé a analizar un poco, viendo el codigo fuente me encontre con el doctype de HTML5, posteriormente con el Firebug empezé a ver las consultas AJAX, y efectivamente las actualizaciones se hacían sin recargar toda la pagina, pero cambiaba completamente la URL en la barra de direcciones.

Recorde que hace tiempo ya había visto un tutorial para el manejo de URLs en HTML5, esto era cambiar la dirección que estaba en la barra de dirección ejecutando una sola función en Javascript.

Como sabemos, en Javascript el objeto principal es el window, con el cual podemos controlar todo lo que es la ventana de navegación, historial, DOM, etc. Ya habíamos hablado también del Hash, el cual es toda esa cadena de caracteres que tenemos en la URL despues del #. Este Hash esta en el subobjeto history. Es decir:

[js]window.history[/js]

Este objeto contiene una serie de funciones que nos ayudan a manejar el historial de navegación, sin embargo en el nuevo estandar HTML5, tenemos las funciones:

[js]

window.history.pushState(object,title,url);

window.history.setState(object,title,url);

[/js]

Estas funciones nos ayudan a controlar lo que tenemos en la barra de navegación, sin embargo con sus diferencias. pushState es para indicarle una nueva dirección, el primer parametro que recibe esta función es un objeto que almacena un nuevo historial de las secciones en las cuales hemos navegado, el segundo parametro es un titulo de la pagina, este titulo no tiene nada que ver con la etiqueta <title> en HTML, solo es para identificarla en el objeto mencionado en el primer parametro. Por último el tercer parametro es para indicarle la nueva dirección que debe de escribir, pero cuidado, esta dirección es despues del dominio, es decir, unicamente nos cambia la ruta en el dominio en el cual estamos navegando.

La función setState es muy parecido a pushState, sin embargo este no es guardado en el historial, ya que solo declara la nueva URL pero no hay un historial para poder hacer un retroceso en el contenido del sitio.

Hay otras funciones más que nos ayudan a controlar la navegación, por ejemplo popState que nos ayuda a retroceder en el historial de navegación, o replaceState que es muy parecido a pushState pero que solo reemplaza a la dirección actual.

Si bien observamos y para los que ya hemos programado estructuras de datos, las funciones push y pop son muy parecidas al funcionamiento de una pila.

Conclusión

Ya hablamos de Facebook y todo muy padre, y bueno no soy muy dado a escribir alguna conclusión, pero esta vez si merece la pena hacerla. Hemos visto los cambios en la web ahora con la adopción de los nuevos estándares por parte de Facebook, YouTube y muchos otros sitios de grandes empresas de la internet, además del crecimiento y mejoramiento acelerado que estan sufriendo los navegadores. Yo como desarrollador web no pensaba todavía adaptar estos estándares por eso de los navegadores, sin embargo esto ya me da la pauta para empezar a adoptar todos estos estándares en los nuevos proyectos, ya que con seguridad puedo apostar que se verá bien en los navegadores, sin embargo hay que seguir al pendiente de las estadísticas de uso de los navegadores.

Espero les haya ayudado esta entrada, un saludo!.

Fuentes:

HTML5: Changing the browser-URL without refreshing page | Spoiled Milk

Manipulating the browser history – Mozilla Developer Network

5/5 - (1 voto)

Deja un comentario