Diseo de webapps

El diseo de webapps incluye actividades tcnicas y no tcnicas que incluyen lo siguiente:

establecer la vista y sensacin de la webapp, creando la distribucin esttica de la interfaz
de usuario, definiendo la estructura arquitectnica general, desarrollando el contenido y la
funcionalidad que residen en la arquitectura y planeando la navegacin que ocurre dentro
de la webapp.
La calidad de una webapp definida en trminos de usabilidad, funcionalidad, confiabilidad,
eficiencia, facilidad de mantenimiento, seguridad, escalabilidad y tiempo para llegar al
mercado se introduce durante la etapa de diseo. Para lograr estos atributos de calidad, un
buen diseo de la webapp debe tener las siguientes caractersticas (metas del diseo):
sencillez, consistencia, identidad, robustez, navegabilidad y atractivo visual. Para lograrlo,
la actividad de diseo de la webapp se centra en seis distintos elementos del diseo.
El diseo de la interfaz describe la estructura y organizacin de la interfaz de usuario e
incluye una representacin de la distribucin de la pantalla, una definicin de los modos de
interaccin y una descripcin de los mecanismos de navegacin. Un conjunto de principios
de diseo de la interfaz y el flujo de trabajo del diseo guan el trabajo de diseo de la
distribucin y los mecanismos de control de la interfaz.
El diseo esttico, llamado tambin diseo grfico, describe el aspecto y sensacin de
la webapp, e incluye esquemas de color; distribucin geomtrica; tamao del texto, de las
fuentes y su colocacin; empleo de imgenes y otras decisiones relacionadas con la
esttica. Un conjunto de lineamientos de diseo grfico da la base para el enfoque de
diseo.
El diseo del contenido define distribucin, estructura y bosquejo de todo el contenido
que se presenta como parte de la webapp, y establece las relaciones entre los objetos del
contenido.
El diseo del contenido comienza con la representacin de sus objetos, as como las
asociaciones y relaciones entre ellos. Un conjunto de primitivas de navegacin establece la
base para el diseo de sta.
El diseo arquitectnico identifica la estructura general de los hipermedios para la
webapp, e incluye la arquitectura del contenido y de la webapp. Los estilos arquitectnicos
para el contenido incluyen estructuras lineales, de malla, jerrquicas y de red. La
arquitectura de la webapp describe una infraestructura que permite que un sistema o
aplicacin basado en web cumpla con sus objetivos de negocios.
El diseo de la navegacin representa el flujo de sta entre los objetos de contenido y
todas las funciones de la webapp. La semntica de la navegacin se define, describiendo
un conjunto de unidades semnticas de navegacin. Cada unidad est compuesta por
formas de navegacin, as como vnculos y nodos para ello. La sintaxis de navegacin
ilustra los mecanismos utilizados para navegar descritos como parte de la semntica. El
diseo de los componentes desarrolla la lgica de procesamiento detallada que se requiere
para implementar componentes funcionales que desarrollen una funcin completa de la
webapp. Las tcnicas de diseo descritas en el captulo 10 son aplicables para la ingeniera
de los componentes de la webapp.
El Mtodo de Diseo de Hipermedios Orientado a Objetos (MDHOO) es una de varias
propuestas para hacer el diseo de webapps. El MDHOO sugiere un proceso que incluye
diseo conceptual, diseo de la navegacin, diseo abstracto de la interfaz y la
implementacin.
Offutt agrega los siguientes atributos a los cinco atributos principales de la calidad
de las webapps:
La seguridad: La seguridad de las webapps tiene importancia capital en muchas
situaciones. La medida clave de la seguridad de una webapp y de su ambiente de servidor
es su capacidad para rechazar los accesos no autorizados o para detener un ataque
proveniente del exterior.
Disponibilidad: Aun la mejor webapp ser incapaz de satisfacer las necesidades de los
usuarios si no se encuentra disponible. En sentido tcnico, la disponibilidad es la medida
porcentual del tiempo que una webapp puede utilizarse.
Escalabilidad: Una webapp y su ambiente de servidor pueden crecer para que manejen
100, 1 000, 10 000 o 100 000 usuarios? No basta construir una webapp exitosa. Tambin
es importante que pueda asimilar la carga del xito (muchos ms usuarios) y que tenga an
ms xito.
Tiempo para llegar al mercado: Aunque el tiempo que toma llegar al mercado en realidad
no es un atributo de la calidad en el sentido tcnico, s lo es desde el punto de vista de la
empresa. Es frecuente que la primera webapp que llega a un segmento especfico del
mercado obtenga un nmero desproporcionado de usuarios finales.
Uno de los retos del diseo de la interfaz de las webapps es la naturaleza indeterminada
del punto en el que entra el usuario. Es decir, ste puede ingresar por una ubicacin inicial
de la webapp (la pgina de arranque, por ejemplo) o por algn vnculo en cierto nivel inferior
de la arquitectura de aqulla. En algunos casos, la webapp se disea de modo que redirija
al usuario a una ubicacin inicial, pero si esto es algo indeseable, entonces el diseo debe
dar caractersticas de navegacin en la interfaz que acompaen a todos los objetos de
contenido y de las cuales se disponga sin importar el modo en el que el usuario ingrese al
sistema.
Diseo de la interfaz.
Los objetivos de la interfaz de una webapp son los siguientes:
1) Establecer una ventana congruente en el contenido y las funciones que brinda.
2) Guiar al usuario a travs de una serie de interacciones con la webapp.
3) Organizar las opciones de navegacin y contenido disponibles para el usuario. Para
lograr una interfaz consistente, primero debe usarse un diseo esttico a fin de establecer
un aspecto coherente.
A fin de implementar las opciones de navegacin, puede seleccionarse alguno de los
siguientes mecanismos:
 Mens de navegacin: contienen palabras clave que enlistan contenido o funciones
clave. Estos mens se implementan de modo que el usuario pueda elegir entre una
jerarqua de subtemas que se despliegan al seleccionar la opcin principal en el men.
Iconos grficos: botones, interruptores y otras imgenes similares que permiten que el
usuario seleccione alguna propiedad o que especifique una decisin.
Imgenes: cierta representacin grfica que el usuario selecciona para establecer un
vnculo hacia un objeto de contenido o funcin de la webapp.
Diseo de la esttica.
El diseo esttico, tambin llamado diseo grfico, es una actividad artstica que
complementa los aspectos tcnicos del diseo de las webapps. Sin esttica, una webapp
tal vez sea funcional pero no atractiva. Con esttica, una webapp lleva a sus usuarios a un
mundo que los sita en un nivel tanto visceral como intelectual.
El diseo grfico toma en cuenta cada aspecto de la vista y sensacin de la webapp. El
proceso de diseo grfico comienza con la distribucin y avanza hacia la consideracin de
los esquemas de color globales; tipos, tamaos y estilos del texto; uso de medios
complementarios (audio, video y animacin) y todos los dems elementos estticos de una
aplicacin.
Diseo del contenido.
El diseo del contenido se centra en dos tareas diferentes del diseo, cada una de las
cuales es dirigida por individuos que poseen habilidades distintas. En primer lugar, se
desarrolla una representacin del diseo para los objetos del contenido y los mecanismos
requeridos para establecer una relacin entre ellos. Adems, se crea la informacin dentro
de un objeto de contenido especfico. El trabajo posterior es llevado a cabo por escritores,
diseadores grficos y otros actores que generan el contenido que se usar en la webapp.
Diseo arquitectnico
El diseo arquitectnico est ligado con las metas establecidas para una webapp, con el
contenido que se va a presentar, con los usuarios que la visitarn y con la filosofa de
navegacin adoptada.
La arquitectura del contenido se centra en la manera en la que los objetos de contenido (o
compuestos, como pginas web) se estructuran para la presentacin y la navegacin. La
arquitectura de la webapp se aboca a la forma en la que la aplicacin queda estructurada
para administrar la interaccin con el usuario, manejar tareas de procesamiento interno,
navegar con eficacia y presentar el contenido.
El diseo del contenido se centra en la definicin de la estructura general de los hipermedios
de la webapp.
Las estructuras lineales se encuentran cuando es comn una secuencia predecible de
interacciones (con cierta variacin o diferencia).
La arquitectura de una webapp describe una infraestructura que permite que un sistema o
aplicacin basados en web alcance sus objetivos empresariales.
Los autores sugieren una arquitectura del diseo en tres capas que desacopla la interfaz
de la navegacin y del comportamiento de la aplicacin. Plantean que mantener separadas
la interfaz, la aplicacin y la navegacin, simplifica la implementacin y mejora la
reutilizacin.
La arquitectura de controlador de la vista del modelo es uno de varios modelos sugeridos
para la infraestructura de webapp sque desacoplan la interfaz de usuario de sus funciones
y contenido informativo. El modelo (a veces denominado objeto de modelo) contiene todo
el contenido y la lgica de procesamiento especficos de la aplicacin, incluso todos los
objetos de contenido, acceso a fuentes de datos o informacin externos y todas las
funciones de procesamiento que son especficas de la aplicacin. La vista contiene todas
las funciones especficas de la interfaz y permite la presentacin de contenido y lgica de
procesamiento, incluidos todos los objetos de contenido, el acceso a fuentes de datos o
informacin del exterior y todas las funciones de procesamiento que requiere el usuario
final. El controlador administra el acceso al modelo y la vista, y coordina el flujo de datos
entre ellos. En una webapp, la vista es actualizada por el controlador con datos del modelo,
basndose en las entradas que da el usuario. En muchos casos, la arquitectura de la
webapp se define en el contexto del ambiente de desarrollo en el que va a implementarse
la aplicacin.
Diseo de la navegacin
Una vez que la arquitectura de la webapp ha sido establecida y se han identificado sus
componentes (pginas, textos, subprogramas y otras funciones de procesamiento), deben
definirse las rutas de navegacin que permitan a los usuarios acceder al contenido y a las
funciones de la web app. Para lograr esto, debe hacerse lo siguiente:
1) Identificar la semntica de navegacin para los distintos usuarios del sitio.
2) Definir la mecnica (sintaxis) para efectuar la navegacin.
Diseo del nivel de componentes.
Las webapps modernas dan funciones de procesamiento cada vez ms complejas que:
1) Realizan un procesamiento localizado para generar contenido y capacidad de
navegacin en forma dinmica.
2) Proporcionan capacidad de cmputo o de procesamiento de datos que resultan
apropiados para el dominio del negocio de la webapp.
3) Dan consulta y acceso complejos a bases de datos.
4) Establecen interfaces de datos con sistemas corporativos externos.

Mtodo de desarrollo de hipermedios orientado a objetos.

El Mtodo de Diseo de Hipermedios Orientado a Objetos(MDHOO), que est compuesto
de cuatro distintas actividades de diseo: diseo conceptual, diseo de navegacin, diseo
abstracto de la interfaz e implementacin.
El diseo conceptual del MDHOO genera una representacin de los subsistemas, clases y
relaciones que definen el dominio de aplicacin para la webapp. Se puede utilizar UML para
crear diagramas de clase apropiados, agregaciones y representaciones compuestas de
clase, diagramas de colaboracin y otra clase de informacin que describa el dominio de la
aplicacin.
El diseo de la navegacin identifica un conjunto de objetos que se derivan de las clases
definidas en el diseo conceptual. Para incluir stos, se define una serie de clases de
navegacin o nodos. Se utiliza UML para crear casos de uso, tablas de estado y
diagramas de secuencia apropiados; todas stas son representaciones que ayudan a
entender mejor los requerimientos de la navegacin. Adems, conforme se desarrolla el
diseo, se utilizan patrones para el diseo de la navegacin. El MDHOO emplea un conjunto
predefinido de clases de navegacin: nodos, vnculos, anclas y estructuras de acceso.
Una vez definidas las clases de navegacin, el MDHOO estructura el espacio de
navegacin, agrupando los objetos de navegacin en conjuntos llamados contextos. Un
contexto incluye la descripcin de la estructura de navegacin local, la restriccin impuesta
al acceso de los objetos de contenido y los mtodos (operaciones) requeridos para acceder
a los objetos de contenido.
La accin de diseo abstracto de la interfaz especifica los objetos de la interfaz que el
usuario ve cuando ocurre una interaccin con la webapp.
Se emplea un modelo formal de objetos de interfaz, llamado vista de datos abstractos
(VDA), para representar la relacin entre objetos de interfaz y de navegacin, as como las
caractersticas de comportamiento de los objetos de interfaz. El modelo VDA define una
plantilla esttica que representa la metfora de la interfaz e incluye una representacin de
los objetos de navegacin dentro de la interfaz y la especificacin de los objetos de sta
(como mens, botones e iconos) que ayudan a la navegacin y a la interaccin. Adems,
el modelo VDA contiene un componente de comportamiento (similar al diagrama de estado
UML) que indica la forma en la que los eventos disparan la navegacin y cules son las
transformaciones de la interfaz que ocurren cuando el usuario interacta con la aplicacin.