CAPÍTULO 13 DISEÑO DE WEBAPPS

El diseño del desarrollo web, el enfoque que elegían muchos desarrolladores era el ideal artístico. El
diseño se desarrollaba de manera adhoc y se efectuaba a medida que se genera HTML. Después
evolucionó a partir de la visión artística que surgió de la construcción de webapps.
¿Qué es? El diseño de webapps incluye actividades técnicas y no técnicas que incluyen establecer la
vista y sensación de la webapp, creando la distribución estética de la interfaz de usuario definiendo
la estructura arquitectónica general, desarrollando el contenido y la funcionalidad que residen en la
arquitectura y planeando la navegación que ocurre dentro de la webapp.
13.1 Calidad del diseño de webapps
El diseño es la actividad de la ingeniería que genera un producto de alta calidad.
Principales atributos de la calidad de webapps

 Seguridad
 Disponibilidad
 Estabilidad
 Tiempo para llegar al mercado
Árbol de requerimientos de la calidad

 Calidad de una aplicación web

o Usabilidad
 Comprensión global del sitio
 Retroalimentación y ayuda en línea
 Características y estética de la información
 Características espaciales
o Funcionalidad
 Capacidad de búsqueda y recuperación
 Características de navegación y conexión
 Características relacionadas con el dominio de la app
o Confiabilidad
 Procesamiento correcto de los vínculos
 Recuperación de errores
 Validación y recuperación de entradas de los usuarios
o Facilidad para recibir mantenimiento
 Facilidad de corrección
 Adaptabilidad
 Extensibilidad
13.2 Metas del diseño
Simplicidad
Contenido: Debe ser informativo pero sucinto. Debe utilizar un modo de entrega que resulte
apropiado para la información.
Estética: Debe ser agradable pero no abrumadora.
Arquitectura: Lograr objetivos de la manera más sencilla.
Navegación: Debe ser directa y sus mecánicos obvios para la intuición del usuario.
Funciones: Fáciles de utilizar y entender.
Contenido: Debe construirse de modo congruente.
Estética: Vista consistente en todas las partes de la app.

Consistencia
Diseño Arquitectónico: Establecer plantillas que genere una estructura hipermedios constantes.
Diseño de interfaz: Modos consistentes de interacción, navegación y despliegue de contenidos.
Navegación: Manera consistentes en todos los elementos,
Identidad: El diseño de la app (estética) interfaz, y la navegación de una web app deben ser
consistentes con el dominio de la aplicación para la que se va a elaborar.
Robustez: Que sean relevantes para sus necesidades. Si no existen o son insuficientes, es probable
que la web app fracase.
Navegabilidad: Debe ser sencilla y consistente. Estar diseñada de forma que sea intuitiva y
predecible.
Atractivo visual: Todo radica en base al ojo del espectador; pero muchas características del diseño
aumentan el atractivo visual.
Compatibilidad: Se usará en diferentes ambientes y debe diseñarse para que sea compatible con
todos.

13.3 Pirámide de diseño de webapps

Proyectos grandes: Es aconsejable confiar en la experiencia de:

 Ing. Web
 Diseñadores gráficos
 Programadores
Proyectos pequeños: Un desarrollador único deberá tener varias habilidades.

13.4 Diseño de la interfaz de la webapp

Objetivos
1. Establecer una ventana congruente en el contenido y las funciones que brinda.
2. Guiar al usuario a través de una serie de interacciones con la webapp.
3. Organizar las opciones de navegación y contenido disponible para el usuario.
13.5 Diseño de la estética
El diseño también es llamado ‘diseño gráfico’; es una actividad artística que complementa los
aspectos técnicos del diseño de webapps.
13.5.1 Aspectos de la distribución

 No tema al espacio en blanco

 Hacer énfasis en el contenido
 Organizar los elementos con una distribución que vaya desde arriba a izquierda hacia
abajo.
 Agrupar la navegación del contenido y la función en forma geográfica.
 No aumente la superficie con la barra de desplazamiento.
 Considerar la resolución y tamaño de la ventana.
13.5.2 Aspectos del diseño gráfico

 Comienza con la distribución y avanza hacia los esquemas de color globales; tipos y
tamaños de texto hasta estilos, uso de medios complementarios y todos los elementos
estéticos de una aplicación.
13.6 Diseño del contenido
Se centra en dos tareas diferentes del diseño. Cada una de estas está dirigida por los individuos que
poseen actividades.
13.7 Diseño arquitectónico
Se lleva a acabo en paralelo con el de la interfaz estética y del contenido. Como la arquitectura de la
webapp, tal vez esté muy influida por la navegación, las decisiones que se tomen durante esta acción
del diseño influirán en el trabajo realizado durante el diseño.
13.7.1 Arquitectura del contenido

 Estructuras lineales
 Estructuras de malla
 Estructuras jerárquicas
 Estructura de red

13.8 Diseño de la navegación

Una vez que la arquitectura de la webapp ha sido establecida y se han identificado sus componentes
deben definirse las rutas de navegación que permitan a los usuarios acceder al contenido y a las
funciones de la webapp.
13.8.1 Semántica de la navegación
Comienza con la consideración de la jerárquica del usuario y los casos de uso relacionados,
desarrolladas para cada categoría de usuario.
 13.8.2 Sintaxis de navegación
Se dispone de varias opciones para desarrollar un enfoque de implementación para cada USN:

 Vínculo de navegación individual

 Pestañas
 Columna de navegación vertical
 Barra de navegación horizontal
 Mapas del sitio
13.9 Diseño en el nivel de componentes
Las webapps modernas dan funciones de procesamiento cada vez más complejas que:
1. Realizan un procesamiento localizado para generar contenido y capacidades de navegación
en forma dinámica.
2. Proporcionan capacidad de cómputo
3. Dan consultan y acceso complejo a bases de datos
4. Establecen interfaces de datos con sistemas corporativas externos.
13.10 Método de diseño de Hipermedios Orientado a Objetos (MDHOO)
Está compuesto por cuatro distintas actividades de diseño:

 Diseño conceptual
 Diseño de navegación
 Diseño abstracto de interfaz
 Implementación

13.10.1 Diseño conceptual del MDHOO

Genera una representación de los subsistemas, clases y relaciones que definen el dominio de
aplicación para la webapp.
Se puede utilizar UML para crear diagramas de clases propias, agregaciones y representaciones
compuestas de clase, diagramas de colaboración y otra clase de información que describa el
dominio de aplicación
13.10.2 Diseño de la navegación para MDHOO
Identifica un conjunto de objetos que se derivan de clases definidas en diseño conceptual.
Para incluir estos, se define una serie de “clases de navegación” o “nodos”.
Se utiliza UML para crear casos de uso, tablas de estado y diagramas de secuencia apropiadas;
todas estas son representaciones que ayudan a entender mejor los requerimientos de la
navegación.
13.10.3 Diseño abstracto de la interfaz y su implementación
Identifica un conjunto de “objetos” que se derivan de los casos definidos en el diseño conceptual.
Para incluir estos, se define una serie de “Clases de navegación”.
Especifica los objetos de interfaz que el usuario ve cuando ocurre una interacción con la webapp.
Se emplea un modelo formal de objetos de interfaz, llamado vista de datos abstractos (VDA),
para representar la relación entre objetos de interfaz y navegación. Así como las características
de comportamiento de los objetos de interfaz.