Fuente: usolab.com (http://www.usolab.com/articulos/ajax_banca_internet.php)
Como demostración práctica, ofrecemos ahora un ejemplo funcional de lo que podría ser una consulta de movimientos financieros en una aplicación de banca por Internet utilizando la tecnología AJAX:
Esta demo incluye tres funcionalidades realizadas mediante AJAX:
- Tabla con scroll y ordenación.
Para mostrar todos los movimientos, se ha sustituido la habitual lista paginada (como las páginas de resultados de Google, que ofrecen n elementos por página más una navegación para acceder a otras) por una tabla que permite, desde una misma página, acceder a toda la lista de elementos utilizando la barra de scroll, ahorrándole de ese modo al usuario el tiempo y el impacto visual de cargar nuevas páginas. Además, permite ordenar los movimientos haciendo click en cada uno de los títulos de columna.
- Globos de detalle.
Al pasar el cursor del ratón sobre el concepto de cada movimiento, aparece un globo con toda su información de detalle; al hacer click en el concepto se fija el globo de modo que no desaparece al mover el cursor.
- Edición del campo «comentarios».
Una vez fijado el globo con el detalle, haciendo click en el botón «Editar comentario» o sobre el propio texto del comentario puede editarse y guardarse en la base de datos desde la misma página.
En todos estos elementos, la tecnología AJAX permite crear interacciones con el usuario sin necesidad de cargar diferentes páginas del navegador, ya que la comunicación de datos con el servidor se hace de manera transparente en background mientras el usuario sigue trabajando con la página cargada.
Detalles de implementación; librerías utilizadas
- Para la tabla con scroll se ha realizado una adaptación del elemento ‘LiveGrid’, uno de los disponibles en la librería Ajax Rico. Los datos son cargados en formato XML desde una URL especificada en el código (en este caso, un fichero PHP que devuelve los movimientos desde una base de datos MySQL, aunque podría ser cualquier otra tecnología que devolviera el XML adecuado).La implementación original de este ‘LiveGrid’ utiliza técnicas de buffering de modo que se leen más registros de los que se visualizan en pantalla para mejorar el rendimiento. De hecho, hemos incluido un pequeño retardo en el PHP que proporciona los datos para hacer más patente el hecho de que los datos son obtenidos a medida que el usuario utiliza el scroll.
- Los globos emergentes con información de detalle están basados en los Bubble Tooltips. Los datos que aparecen en el globo se leen en el momento en que se muestran de modo transparente al usuario.
- La edición y grabación del campo «comentarios» in situ utiliza la clase ‘InPlaceEditor’ de la librería script.aculo.us, muy utilizada en diversas aplicaciones AJAX. El portal de fotografía Flickr implementa una técnica similar para añadir títulos y comentarios a las imágenes.
La utilización de este tipo de librerías más o menos extendidas y probadas permite, hasta cierto punto, evitar lo que es la gran pesadilla de los programadores JavaScript: la compatibilidad con diferentes plataformas (navegadores y versiones, sistemas operativos, etc).
¿Qué ventajas aporta?
Como todas las tecnologías de nueva aparición, requieren un cierto grado de autocensura para evitar su utilización únicamente porque están de moda o para demostrar habilidades de programación. La pregunta obligada es, simplemente, «¿aporta alguna ventaja al usuario?».
En el caso de la demo podría ser más o menos discutible la utilización de interfaces complejas en determinados puntos. Por ejemplo, el uso de globos para mostrar detalles puede dificultar la impresión de esos datos, pero ofrece otras ventajas, como una mayor comodidad a la hora de localizar movimientos, compararlos, etc.
Evitar los resultados paginados sí puede considerarse una buena solución en muchos casos, ya que son poco prácticos cuando el usuario necesita localizar datos que no aparecen en la primera página.
Desde el punto de vista del servidor, el uso de esta solución requiere procesos que devuelvan datos en formato XML utilizados por AJAX, algo que en la mayoría de instalaciones no debería de representar mayor dificultad, sobre todo en el caso de sistemas que ya están preparados para generar HTML.
También hay desventajas
Como siempre, el uso de tecnologías más allá del simple HTML implica un riesgo ya que requiere que sean interpretadas correctamente por el navegador. En el caso concreto de AJAX el requerimiento es el soporte de JavaScript, algo que está bastante extendido en las configuraciones de navegación más habituales.
No obstante, uno de los criterios de accesibilidad web establece que las páginas deben seguir siendo usables cuando los lenguajes de scripting están desactivados o no están soportados. En nuestro ejemplo, esto podría conseguirse proporcionando una versión HTML simple de la consulta de movimientos para navegadores que no soporten AJAX.
Desde el punto de vista de las comunicaciones, AJAX introduce una nueva problemática a tener en cuenta: ¿qué ocurre si las conexiones con el servidor son relativamente lentas? Recordemos que AJAX se usa en muchas ocasiones para mejorar el tiempo de respuesta a las acciones del usuario, ventaja que se diluiría si el servidor no responde suficientemente rápido.
Decisiones de interfaz
Como ya se comentaba en el artículo sobre la Web 2.0, la utilización de estas interfaces «ricas» introduce toda una nueva problemática en el diseño de interacción con el usuario y en la creación y utilización de estándares.
En este ejemplo, los elementos y controles utilizados (barras de scroll, tablas, etc.) son los mismos que en las páginas HTML clásicas, por lo que no necesitan un aprendizaje de su funcionamiento por parte del usuario. Sin embargo, la problemática ha surgido, por ejemplo, a la hora de introducir un mensaje de aviso mientras se están leyendo datos. En este caso hemos optado por seguir el mismo diseño de GMail, mostrando este tipo de avisos en la parte superior derecha, con texto blanco y fondo rojo. En otra decisión, al incluir un texto editable por parte del usuario, la solución ha sido mostrarlo con fondo amarillo al igual que hace Flickr; hemos decidido añadir también un botón «Editar comentario» ya que consideramos que dicha funcionalidad puede no ser conocida por los usuarios.
No existe ningún estándar explícito sobre este tipo de interacciones. Sin embargo, ha sido Google quien ha popularizado AJAX al utilizarlo en aplicaciones tan conocidas como GMail y Google Maps; por tanto, es probable que Google siga siendo quien marque el «camino a seguir». En todo caso, copiar cómo funciona un portal popular suele ser una apuesta bastante más segura que intentar crear un estándar propio.
Posibles mejoras
Algunas funcionalidades adicionales podrían conseguirse utilizando extensiones a las librerías utilizadas como LiveGrid Plus, que añade la posibilidad de filtrar elementos, añadir menús contextuales, mayor soporte de navegadores, etc. No obstante, la demo ofrece una buena muestra de qué tipo de interacciones pueden conseguirse con las tecnología AJAX, y cómo se podrían aplicar a un entorno de banca por Internet.
