Como usar Ajax con HTML5

Evitar el uso de almacenamiento en el lado servidor nos ayudará a mejorar el rendimiento y tiempo de respuesta de nuestras páginas, en este artículo explicamos como lograrlo.

Cuando trabajamos en la elaboración e implementación de algún sistema de gestión, ya sea de contenido, documental, administrativo financiero o de cualquier otro tipo, la usabilidad se convierte en un factor clave para la aceptación y continuo uso del mismo.

Si no ofrecemos una funcionalidad que fomente una correcta interacción con el usuario, complementada por una interfaz adecuada, adaptable y personalizable, es muy probable que el sistema caiga en desuso y su instalación pase a ser deshabilitada.

En los sistemas de gestión es posible manejar el contenido y la funcionalidad sin tener una dependencia al diseño, por lo que en cualquier momento se puede aplicar un diseño distinto al sitio web sin tener que darle formato al contenido de nuevo.

Siempre es importante mantenernos a la vanguardia y que tu sistema se encuentre actualizado, ofreciendo mejores soluciones para los problemas de tus usuarios.

Uso de AJAX

Al diseñar un sistema gestión, es muy común utilizar paneles y módulos que permitan desplegar la información y delimitar las acciones en base a cierta funcionalidad definida.

Por ejemplo en un gestor de contenido, es usual que se cuente con un módulo para escribir el contenido o simplemente ingresarlo, otro módulo para administrar su publicación, quizás un módulo para llevar un control de los pagos a los escritores, y así sucesivamente se va ordenando.

Cuando implementamos este tipo de estructuras, es recomendado que cada uno de los widgets con los que el usuario interactúa, se puedan mover, expandir y contraer, para que de esa manera pueda mostrar, ocultar y organizar sus paneles de la manera en que más le agrade trabajar.

Pero puede resultar bastante frustrante tener que hacer esta acción cada vez que entre al sistema, así que para evitar esto los desarrolladores comúnmente recurren a salvar el estado en que el usuario configuró el sistema, de esa manera la siguiente vez que ingresa todo sigue en el orden en que lo dejó.

Esta funcionalidad normalmente era implementada utilizando AJAX, por más de una década esta técnica ha permitido al usuario realizar las modificaciones que desee en la configuración, para después mediante una petición al servidor, guardar dichos cambios y mantenerlos para cuando sean requeridos una vez más.

Desventajas del uso de AJAX

Esta funcionalidad ofrece muchos beneficios, pero tiene tres grandes desventajas.

• La primera de ellas es la preferencia compartida, en muchas ocasiones nuestros clientes utilizan una sola cuenta para administrar el sistema, por lo que todos los usuarios utilizan esas mismas credenciales para accede. Al almacenar las preferencias del usuario en el servidor, ligado a una cuenta, todos los usuarios que utilicen esa cuenta tendrán que compartir la misma configuración de la interfaz de usuario.
• Otra desventaja es la necesidad almacenamiento de información sin ningún valor analítico en la base de datos de nuestros sistema. Los datos que guardamos son simplemente preferencias de interfaz, y no representan o mantienen algún otro tipo de valor, sin embargo destinamos parte de la capacidad de nuestro servidor para almacenarlos.
• La tercera gran desventaja es el rendimiento, una interfaz de usuario que recibe una buena cantidad de tráfico, va a enviar una exponencialmente mayor cantidad de peticiones AJAX al servidor, esto puede afectar en gran medida el rendimiento de nuestro sitio web.

Uso del lado del cliente con HTML5

Si estas dispuesto a abandonar por completo tu soporte a estos navegadores, mejorarás progresivamente la experiencia del usuario, si aún no estás listo, puedes ofrecer una opción de AJAX en caso de que dichos navegadores se utilicen para acceder.

Para demostrar la capacidad de esta funcionalidad, podemos continuar con el ejemplo de expandir y contraer paneles de control. Esta tarea se puede codificar estableciendo sencillos pasos como base.

Primero necesitamos almacenar una sola variable codificada en JSON, y para esto utilizaremos la función localStorage del navegador.

Esta variable identificará qué widgets deben ser colapsados cuando se cargue la página. Finalmente cuando un usuario haga clic en el icono para colapsar o expandir un widget, la variable localStorage se actualizará y de esa manera la nueva configuración quedará guardada.

jQuery(document).ready(function() {
    /* funcionalidad para configurar el evento expandir/colapsar y almacenar la preferencia en localStorage */
    jQuery('.accion-widget .toggle').click(function() {
        jQuery(this).parent().siblings('.contenido-widget').slideToggle();
        jQuery(this).parent().parent().toggleClass('colapsado');

        if (typeof Storage !== 'undefined') {
            var colapsados = [];
            jQuery('.widget').each(function() {
                if (jQuery(this).hasClass('colapsado')) {
                    colapsados.push(jQuery(this).attr('id'));
                }
            });
            window.localStorage.setItem('paneles_colapsados', JSON.stringify(colapsados));
        }
    });

    /* funcionalidad para comprobar la existencia de una variable localStorage y colapsar los widgets necesarios */
    if (typeof Storage !== 'undefined') {
        var paneles_colapsados = window.localStorage.getItem('paneles_colapsados');
        if (paneles_colapsados) {
            paneles_colapsados = JSON.parse(paneles_colapsados);
            jQuery.each(paneles_colapsados, function(index, elemento) {
                jQuery('#' + elemento).find('.toggle').click();
            });
        }
    }
})();