Módulo 9 Interactividad y usabilidad
Introducción a AJAX
Interactividad y usabilidad. La interactividad es una de las claves de la interconexión entre los navegadores y el servidor. Esta interactividad beneficia enormemente a los usuarios finales, hace muchos más fácil las tareas mas usuales como actualizar y eliminar registros, utilizar de forma correcta formularios web, utilizar árboles jerárquicos, etc Utilizando AJAX se obtiene una mayor interacción, gracias a la reducción de la información intercambiada entre servidor y cliente, ya que parte del proceso de la información lo hace el propio cliente y no el servidor.
Usabilidad La definición más extendida de este término es la ofrecida por la ISO " Grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos". La usabilidad es la forma de usar y condiciones de uso por parte de los usuarios de esa aplicación. Aportando una nueva definición menos técnica, podríamos decir que la usabilidad de una aplicación debe de afectar a 3 aspectos: 1. 2. 3.
Forma de uso de la aplicación Condiciones para usar esa aplicación Necesidades de los usuarios frente a la aplicación
El Diseño Centrado en el Usuario (CDU) es un “Standard” práctico de como diseñar aplicaciones de forma que sus usuarios puedan usarlas con un mínimo de estrés y un máximo de eficiencia Cuanto más adaptadas estén a los usuarios, más usables serán.
Usar la metodología DCU nos proporciona una forma fiable de realizar aplicaciones con gran usabilidad porque no se basa las decisiones en suposiciones, sino en hechos.
Errores en el uso de AJAX en una aplicación Web Cuando nos planteamos realizar una aplicación en un entorno Web, una de las posibilidades que existe actualmente es la utilización de AJAX. Otras veces, nos disponemos a realizar esta aplicación directamente con AJAX sin ver si está bien tomada esta decisión o no, sin evaluar otras herramientas y opciones. Usar AJAX por ser lo último Al ser AJAX un de las últimas novedades muchas de las implementaciones que encontramos usando AJAX no son realmente necesarias para mejorar la usabilidad o la experiencia del usuario, sino únicamente experimentos para comprobar qué puede hacer AJAX o empeños de ponerlo donde realmente no se necesita. Botón de back (Vuelta atrás) El botón de retroceso a las páginas anteriores, no se lleva muy bien con las aplicaciones AJAX (javascript). Sin embargo, un buen diseño web debe poner al alcance del usuario todo lo que necesita para navegar correctamente por el.
2
Introducción a AJAX
No transferir los cambios en una página a otras partes de la página o del sitio Es normal que los cambios realizados en una página o parte de ella no se transmitan a otras partes del sitio o portal y con el paso de la navegación encontremos errores de datos o títulos. Usar el método GET y POST de forma indiferente La gran mayoría de aplicaciones AJAX tienden a usar simplemente el método GET cuando realizan peticiones con XMLHTTPRequest. AJAX es sólo válido para una plataforma Uno de los errores mas comunes es tratar las aplicaciones AJAX como si fuesen monoplataforma cuando realmente son multiplataforma. De hecho funciona con el motor javascript del IE, Mozilla, Safari y otros. Aplicaciones usadas por monousuarios Debemos tener en cuenta que una aplicación web puede, y normalmente así será, ser utilizada por mas de 1 usuario a la vez, por lo que es necesario tener en cuenta que va estar siendo usada por más de una persona a la vez. Dar por supuesto que todo el mundo dispone de JAvascript Es un punto que normalmente se nos suele olvidar, existen aun navegadores que no soportan javascript, entonces, ¿que ocurre con estos usuarios. Tratar los enlaces como si fuesen enlaces de una pagina web normal AJAX tiene grandes problemas para usar el modelo normal web, esto es debido a que al generar dinámicamente la página con Javascript en vez de desde el servidor, la url no necesariamente apunta al mismo contenido, y no puede ser usada para lo que estamos acostumbrados. Inserción de texto masivo de forma dinámica Otro problema de insertar texto en una página de forma dinámica es que puede afectar al scroll y puede resultar molesto para el usuario. Realizar operaciones por lotes de forma asíncrona AJAX permite que la edición de campos de un formulario se realice de forma inmediata, pero so puede acarrear muchos problemas. Envío de información no segura La seguridad en las aplicaciones AJAX tiene las mismas reglas que cualquier otra aplicación web. El único punto que tenemos que tener en cuenta es que al ser aplicaciones que se ejecutan en modo ASINCRONO, pueden pasar por alto esa seguridad haciendo códigos poco seguro. No dar Señales del progreso inmediatas en una operación Cualquier acción que provoquemos en AJAX debe de mostrar alguna pista visual para indicar que está ocurriendo algo, sino lo hacemos así el usuario puede pensar que no se está haciendo nada y dejará de usarla No avisar cuando haya errores Con las aplicaciones en el lado cliente, puede pasar que no tengas ni idea de que algo ha ido mal si desconoces cómo programar correctamente y guardar esas excepciones (errores) que se producen remotamente (en el navegador del cliente) en tu servidor
Patrones Podríamos definir los patrones de diseño como:
3
Introducción a AJAX
“la base para la búsqueda de soluciones a problemas comunes en el desarrollo de software y otros ámbitos referentes al diseño de interacción o interfaces.” (wikipedia). Un patrón de diseño es una solución a un problema de diseño con unas ciertas características Los patrones de Ajax demuestran cómo la gente ha con eficacia en los usos del mundo real de Ajax. Disponemos de alrededor de 60 patrones por lo que es útil agrupar los patrones para su utilización en varios niveles. En un de alto nivel, tendríamos 4 agrupaciones denominadas 1. Tecnología Foundational 2. Programación 3. Funcionalidad y Utilidad 4. Desarrollo Cada uno de estas agrupaciones modelan / proponen diferentes número de patrones para realizar los diferentes caso de estudio: Tecnología (propone 11 patrones), Programación (propone 23 patrones), Funcionalidad y Utilidad (propone 28 patrones)
Tecnología Foundational Estos patrones son la base de las aplicaciones en AJAX. Son mas patrones de referencia que de diseño real. Estos patrones se incluyen para introducir los tipos de tecnologías que se pueden utilizar, para proporcionar un vocabulario común, y para facilitar los pros y los contra de los diseños. Los patrones mas significativos que incluye esta agrupación son: - Ajax Architecture - Display Manipulation - Web Remoting - Dynamic Behaviour - Javascript OOP patterns - Extension
Programación Estos patrones definen las características de la arquitectura y del código de diseño de los patrones enumerados anteriormente. Éstos incluyen, entre otras cosas, el diseño de los servicios web; flujo de información de manejo entre el browser y el servidor; Objetos DOM y su gestión, optimizaciones de respuesta; generación de código y su reutilización. Los patrones mas significativos que incluye esta agrupación son: - Web Services - Browser-Server Dialogue - DOM Population - Performance Optimisation - Code Generation and Reuse
Funcionalidad y Utilidad Estos patrones incluyen la catalogación de los estilos de la interacción que están llegando a ser comunes en aplicaciones de AJAX. Su utilización puede beneficiar de la interacción entre el cliente y el servidor utilizando el objeto XMLHttpRequest. Los patrones mas significativos que incluye esta agrupación son:
4
Introducción a AJAX
-
Content Widgets Form Widgets Page Architecture Visual Effects Functionality
Desarrollo Estos patrones aconsejan sobre las mejores prácticas para el desarrollo, en comparación con todos los patrones anteriores. Los patrones más habituales están relacionados sobre la diagnosticación de problemas en las aplicaciones y la realización de pruebas para su correcto funcionamiento. Los patrones mas significativos que incluye esta agrupación son: - Diagnosis - Testing
5