Posts Tagged ‘ajax’

Ordenar tablas con Javascript: 7 posibilidades

Wednesday, October 1st, 2008

Este post proviene de un artículo original en alemán, idioma que me resulta, por desgracia, incomprensible, pero cuyo contenido es meridianamente claro. En el artículo se proponen varios sistemas para ordenar tablas.

No todos los sistemas que propone el artículo son accesibles y solo uno de ellos podría decirse que aplica la mejora prograsiva (Hijax), cuatro en las que al menos se ve la tabla y dos que sin javascript nada de nada.

Quien nos iba a decir hace ¿dos o tres años? que podíamos poner una tabla en una web y poder ordenar ascendente o descendentemente por las distintas columnas.

PD: el post no empieza por un número… para que veáis

FW – Ponencia 2: AJAX a prueba de balas

Wednesday, October 3rd, 2007

A que se refiere con el término “a prueba de balas”: se refiere a la metodologóa de “incremento progresivo”. Capas: contenido (el rey), estructura, presentación, comportamiento.

Este planteamiento tiene de bueno que cada capa tiene su propia tecnología

CONTENIDO
ESTRUCTURA-> HTML
PRESENTACIÓN-> CSS
COMPORTAMIENTO.-> Javascript, AJAX

Haciéndolo bien, permite que no usar una capa no impide acceder al contenido. hacerlo bien es usar una tecnología adecuada para cada capa, no mezclar.

Por supuesto también hay que separar el comportamiento y hacerlo como capa que añade pero no afecta a la inferior. En HTML Podemos tener un Enlace, ese es el comportamiento básico, el que se define en la etiqueta A.

Para cambiar el comportamiento la idea no es añadiré un evento onclick al enlace, es mucho más limpio sobre-escribir el comportamiento de todos los enlaces en una función externa. La filosofía que plantea es que al igual que CSS está totalmente separado de la estructura, el comportamiento debe separar de la misma forma

¿Qué ocurre con Ajax? Ajax no es solo utilizar javascript, para el ponente, es comunicarse con el servidor sin refrescar la página (efectivamente). ¿Qué tecnologías permite hacer esto? una posibilidad serían los Frames, realmente cumple con la definición que él hace; también valdrían los iframes, también valdría Flash cuando cargamos movieClips ante determinados eventos, realmente estamos cargando contenido sin refrescar. EVIDENTEMENTE ESO NO ES AJAX

Todo lo anterior es tontería… AJAX es XMLHttpRequest… el objeto javascript clave de todo este asunto. Una breve historia: surgió de Microsoft con el Internet Explorer 5, hace 7 u 8 años. Curiosamente el tema de AJAX es mucho más reciente… ¿En qué momento? cuando otros navegadores, básicamente Mozilla, comenzó a utilizar.

XMLHttpRequest es un elemento intermedio entre navegador y servidor. Realmente es un objeto con propiedades y métodos… en fin… nos explica cómo funciona AJAX y en qué consiste. No voy a postear una información que se puede conseguir en mil sitios.

Tras la explicación vuelve a la base de la ponencia, AJAX como una capa que no debe impedir el acceso al contenido y la visualización de la estructura. Esto es lo importante, no la tecnología sino cómo utilizarla correctamente. AJAX debe ser el medio que nos extrae la información del servidor y punto, no el objetivo en si.

Siguiendo la filosofía correcta un navegador que no disponga de Javascript debe permitir acceder a los mismos contenidos que uno que si lo tenga. El que lo tenga, evidentemente, se beneficiará de la rapidez y comodidad que esta tecnología aporta.

Introduce un término HIJAX, incremento progresivo. :

-Empezar a hacer la web como siempre, html, hipertexto, simplicidad. Se mantiene el procesamiento de los datos en el servidor.
-Si añadimos Ajax lo que cambiaremos es que en vez de solicitar la información mediante un enlace lo podemos hacer con XHR porque el navegador lo permita. Pero no hemos suprimido los enlaces con AJAX, hemos mejorado al cambiar el comportamiento del enlace cuando el navegador lo permite. ¿Donde está la clave? AJAX hay que implementarlo al final, tras haber desarrollado la web en modo tradicional.

Reconoce que lo anterior no es tan sencillo.

AJAX debe utilizarse sólamente cuando es necesario.

-Autentificaciones
-Carritos de la compra
-Sistemas de puntuación / valoración de elementos (la típica estrellita)
-Añadir comentarios en blogs

Defiende que AJAX no debe ser para hacer super aplicaciones webs sino para mejorar las webs, la experiencia del usuario al interactuar con el contenido.

Una magnífica ponencia, una buena explicación de AJAX y defiendo una postura muy coherene: resumiendo, AJAX accesible y cuando hace falta. Hay que asegurarse que el usuario puede acceder al contenido aunque no tenga Javascript. Para super-aplicaciones mejor usar cosas como Flash, que para eso está.

Entra también en el tema de los desafíos que AJAX plantea a nivel de diseño e interacción. Toca el punto clave Si usamos AJAX hay que informar al usuario de lo que está pasando cosa que antes no era necesario debido a que el navegador se encargaba de informar. Un ejemplo, propio, y muy importante… si añado un producto al carrito en el mundo tradicional se me recarga la página, me lleva a la cesta… quedo informado. Con Ajax no, puede añadir el producto al carrito y no observar un solo cambio en la web.

Plantea aprender un poco del mundo Flash. También el utilizar las convenciones que están surgiendo como las que implemente Basecamp (37Signals).

Un ejemplo que pone sobre este tema ¿Qué ocurre con el botón de volver atrás? ¿Cuando debemos permtir al usuario volver hacia atrás?… plantea que para responder a estas preguntas debemos hacer pruebas de usuario.

Buena ponencia, buena postura, un 8

Disponbile la presentacón en breve en Adactio.com