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. Forma de uso de la aplicación

2. Condiciones para usar esa aplicación
3. 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