Diseño de Aplicaciones Web

UNIVERSIDAD DE CASTILLA LA MANCHA
Diseo de aplicaciones Web

Resumen del apartado 5 del libro: Engineering Web Applications y bsqueda de informacin
Ana Beln Peinado Zamora

Asignatura: Desarrollo Web y Multimedia Curso de Adaptacin a Grado en Informtica 2011-2012
Tabla de contenido
PRLOGO ...................................................................................................................................... 3 1. 2. 2.1. 2.1.1. 2.1.2. 2.1.3. 2.2. 3. 4. 4.1. Introduccin .......................................................................................................................... 3 Conceptos bsicos de diseo y su importancia en las aplicaciones Web ............................. 4 Principios de diseo ......................................................................................................... 4 Abstraccin .................................................................................................................. 4 Refinamiento ............................................................................................................... 6 Modularidad ................................................................................................................ 7 Proceso de diseo ............................................................................................................ 7 Diseo de flujo de trabajo..................................................................................................... 8 Diseo de datos..................................................................................................................... 9 Ingeniera de integracin de la informacin .................................................................. 10
Metodologa HERA .................................................................................................................. 11 5. 5.1. Diseo de navegacin ......................................................................................................... 12 Diseo de la estructura de sitio ..................................................................................... 12
Vistas de navegacin y contextos de navegacin ................................................................... 13 Esquema de hipertexto ........................................................................................................... 14 Composicin de la pgina ................................................................................................... 15 Definicin de enlaces........................................................................................................... 16 Parmetros globales ........................................................................................................... 17 Operaciones......................................................................................................................... 17 Comparacin de los mtodos WebML y OOHDM ............................................................... 17 5.2. Diseo del comportamiento de navegacin .................................................................. 18
Interfaces y colecciones de datos ........................................................................................... 20 5.3. Interaccin del servicio web .......................................................................................... 20
Invocacin del servicio web .................................................................................................... 21 Desarrollo de servicios web .................................................................................................... 21 6. 6.1. Diseo de presentacin....................................................................................................... 22 Diseo de presentacin abstracta ................................................................................. 22
Diseo de widgets abstractos ................................................................................................. 22 Espacios de interaccin........................................................................................................... 23
Diseo de aplicaciones Web Vistas abstractas de datos....................................................................................................... 24 6.2. 7. 7.1. Diseo de presentacin concreta .................................................................................. 24 Diseo de la arquitectura.................................................................................................... 25 Extensin de la aplicacin web de Conallen para UML ................................................. 25
Extensiones WAE para el diagrama de clases ......................................................................... 26 7.2. Web Software Arquitectura (WebSA) ............................................................................ 27
El modelo de configuracin..................................................................................................... 28 El Patrn Modelo-Vista-Controlador................................................................................... 29 8. 8.1. 8.2. 8.3. 8.4. 9. 10. 10.1. 10.2. 11. 12. Extensiones enriquecidas para aplicaciones web ............................................................... 29 Extensin WebML .......................................................................................................... 31 Extensin ADRIA............................................................................................................. 31 El mtodo RUX ............................................................................................................... 31 OOH4RIA ........................................................................................................................ 32 Ingeniera dirigida por modelos (MDE) e ingeniera web ................................................... 32 Modelos de hipertexto................................................................................................... 34 Modelos de hiperbase.................................................................................................... 35 Modelos de capas hipermedia ....................................................................................... 35 Relaciones en las metodologas ..................................................................................... 37 Referencias..................................................................................................................... 39
PRLOGO
La fase de diseo en la ingeniera software consiste en un proceso de aplicar distintos principios y tcnicas con el fin de definir un sistema con los suficientes detalles como para permitir su realizacin fsica. Se trata de producir un modelo o representacin traduciendo los requisitos del anlisis que sern construidos posteriormente. Se puede considerar como la primera etapa de la fase de desarrollo de un proyecto, despus de haber realizado la fase de Anlisis y especificacin de requisitos. En este trabajo vamos a ver una visin general de las tcnicas de diseo y las cuestiones con las que trata el diseo de aplicaciones web. Las tcnicas de diseo reflejan las necesidades derivadas del entorno de la World Wide Web y sus tecnologas subyacentes.
1. Introduccin
La principal meta del diseo de aplicaciones web es la de facilitar la comprensin de la solucin que va a ser desarrollada, frente a la comprensin de los usuarios y el contexto en el que se implemente la solucin. Podemos definir el diseo de aplicaciones web como el conjunto de actividades que perfeccionan las abstracciones identificadas durante el anlisis de requisitos con el fin de especificar la organizacin de los datos de las aplicaciones, la navegacin, la presentacin y la arquitectura. Las aplicaciones web se distinguen de los sistemas software regulares, aplicndose esta distincin tambin al diseo de aplicaciones web. Las peculiaridades ms importantes del dominio de las aplicaciones web que requieren mtodos especficos de diseo son:
Mayor accesibilidad a la informacin y los servicios: La World Wide Web permite el acceso a la informacin y servicios para muchos ms usuarios al mismo tiempo que las intranets cerradas o las aplicaciones de escritorio. Deben ser diseadas diferentes modalidades y puntos de vista sobre los datos y servicios para satisfacer las diferentes necesidades del usuario. Interfaz centrada en el documento de hipertexto: Como con los requisitos, esto influye en el diseo de aplicaciones web tambin. La informacin y los servicios han de ser proyectados a documentos de hipertexto. Adems, las interconexiones entre los diversos dilogos, vistas sobre la informacin y pginas hacen el diseo de las aplicaciones web diferente, y requieren abstracciones especficas para entender y representar la composicin de los diferentes elementos de hipertexto y sus recorridos. Diferentes gestiones de datos, acceso a los datos y tecnologas de procesamiento: Los datos son distribuidos en la web en varios formatos y tecnologas, a partir de bases de datos relacionales tradicionales con las
tecnologas ms recientes, como aquellas basadas en XML y RDF. Para ello es necesario que un diseador preste atencin no slo a la organizacin y el procesamiento de las bases de datos locales, sino tambin al acceso (posiblemente heterogneo) a fuentes de datos externas.
Tecnologas de presentacin y motores variables: Las diferencias en los navegadores web y dispositivos de acceso requieren una atencin particular en el diseo de presentacin, para abordar cuestiones tales como los diferentes estilos de presentacin requeridos por los diferentes dispositivos, la densidad de contenido, es decir, el nmero de elementos de contenido que pueden realmente mostrarse en la pantalla de un especfico dispositivo, y as sucesivamente. Arquitecturas ms complejas: La arquitectura de una aplicacin web se asemeja a la arquitectura de sistemas de informacin distribuidos, con componentes de aplicacin residiendo en diferentes niveles. Sin embargo, el front-end de las aplicaciones web hacen cosas ms complejas. Por ejemplo, las pginas web son elementos del cliente que pueden incrustar objetos y scripts requiriendo la interaccin con los recursos del servidor. stas y otras cuestiones necesitan la definicin de patrones de una arquitectura ad hoc y tcnicas de modelado adecuadas.
El propsito principal del diseo de las aplicaciones web es el de comunicar la organizacin lgica de una aplicacin web desde sus diferentes perspectivas (datos, hipertexto, presentacin, arquitectura), y de facilitar la decisin de realizar otras alternativas de implementacin, especialmente con respecto a las peculiaridades discutidas arriba.Los mtodos basados en modelos son propuestos como una forma de facilitar la especificacin del diseo de aplicaciones web gracias a las abstracciones proporcionadas por los modelos.
2. Conceptos bsicos de diseo y su importancia en las aplicaciones Web

Antes de hablar de las tcnicas relevantes para el diseo de aplicaciones web, vamos a resumir los trminos bsicos en el diseo software, y su relevancia en las aplicaciones web. Tambin vamos a comentar de forma breve el proceso de diseo.
2.1.
Principios de diseo
Los tres principios fundamentales en la ingeniera de software son la abstraccin, el refinamiento y la modularidad.
2.1.1. Abstraccin
La abstraccin es uno de los principales principios de diseo para gestionar la complejidad de las aplicaciones software (y web). Cuando se considera una solucin modular a cualquier problema se pueden exponer muchos grados de abstraccin. En un alto grado de abstraccin una solucin se establece en trminos generales con el Ana Beln Peinado Zamora
lenguaje del entorno del problema. En los grados de menor abstraccin se proporciona una descripcin ms detallada de la solucin. Hay muchas formas de aprovechar las ventajas de las abstracciones en el desarrollo de proyectos software.
Abstraccin orientada a dominios: Promueve el uso de terminologa del dominio de aplicacin, como tambin se realiza en la ingeniera de requisitos, para facilitar las interacciones con el usuario o el consumidor. Abstraccin orientada a una solucin:Explota objetos, clases o procedimientos, que son usados como objetivos del lenguaje de programacin, para facilitar la discusin de la organizacin del software dentro del equipo de desarrollo. Abstraccin procedimental:Es una secuencia de instrucciones que tiene una funcin especfica y limitada. Abstraccin de datos: Es una coleccin nombrada de datos. Abstraccionesde control: Utiliza mecanismos de control de programa. Permiten al equipo de desarrollo razonar sobre la organizacin del software de la aplicacin, sin requerir la inspeccin detallada del cdigo de la aplicacin.
A continuacin se muestra un grfico con las principales actividades empleadas en el diseo de aplicaciones web. Estas actividades producen abstracciones de diseo que muestran dependencias mutuas. Dichas dependencias no tienen una ordenada semntica temporal. Estas actividades representan que ciertos modelos de diseo deben depender de cada uno de los otros modelos en trminos de los conceptos empleados.
Ilustracin 1: Las actividades en el diseo de aplicacin Web y sus dependencias.
La decisin sobre cmo secuenciar las actividades de modelado depende de la prioridad que un equipo de desarrollo asigne desde una perspectiva particular. Por ejemplo, en la comunidad de ingeniera web dos principales enfoques han emergido dependiendo de si la aplicacin se aproxima a una informacin o a una perspectiva de usuario:
Los procesos de diseo centrados en la informacincomienzan con actividades relacionadas con el back-end de un sistema de informacin. Normalmente comienzan con el diseo del dominio o de los datos y proceden con el diseo de la navegacin. Al formarse los artefactos de diseo producidos, se puede derivar un flujo de trabajo de diseo. El siguiente paso es el diseo de presentacin y por ltimo el diseo de la arquitectura para estructurar la aplicacin en componentes o mdulos.
Los procesos de diseo centrados en el usuario comienzan con el anlisis de las actividades de los usuarios por lo que el diseo del trabajo de flujo es el primer paso, y el flujo de trabajo resultante sirve como una entrada para el diseo de navegacin donde los flujos de trabajo son transformados en pasos de secuencias de navegacin. Para cada paso de navegacin se realiza un diseo de presentacin. Al mismo tiempo, el diseo de datos es realizado para especificar los datos necesarios para las actividades del usuario.
2.1.2.Refinamiento
La abstraccin y el refinamiento son conceptos complementarios. La abstraccin le permite al diseador especificar procedimientos y datos sin considerar detalles de grado menor. El refinamiento ayuda al diseador a relevar los detalles de grado menor mientras se realiza el diseo. El refinamiento paso a paso es una estrategia de diseo descendente por la que la arquitectura de un programa se desarrolla en niveles sucesivos de refinamiento de detalles procedimentales. Es un proceso de elaboracin, que parte de la descomposicin de la declaracin de una funcin (nivel superior, abstraccin procedimental) de forma sucesiva (refinamientos), hasta obtener secuencias de un lenguaje de programacin (nivel inferior), donde se reflejan los detalles de funcionamiento. El refinamiento juega un papel muy importante en el diseo de aplicaciones web. Dependiendo del mtodo elegido, los modelos de navegacin perfeccionan bien los modelos de datos o los modelos de flujo de trabajo. Los modelos de datos, navegacin y presentacin son trazados sobre la arquitectura que describe la organizacin general de la aplicacin web. Ladivisin estructural es un enfoque comn para estructurar un sistema para el seguimiento de mejoras (refinamientos). La divisin puede ser horizontal o vertical:
La divisinhorizontal identifica los mdulos en la base de las funciones del programa principal. En el diseo de aplicaciones web, la divisin horizontal es usada para distribuir pginas web y operaciones de la lgica de negocio en diferentes visitas a la pgina. Este enfoque es usado, por ejemplo, en el mtodo WebML para distribuir pginas y operaciones en diferentes mdulos de hipertexto, cada uno de ellos respondiendo a las necesidades y la funcionalidad de un segmento de usuarios especficos. La divisin verticalest basada en un principio top-down (de arriba a abajo) de asignacin de trabajo, es decir, los mdulos superiores son mdulos de control, mientras que los mdulos inferiores son aquellos que realizan las tareas sin separar la entrada, transformacin, y salida de funciones. Por ejemplo, en las pginas WebML juega el papel de los controladores que asignan trabajo a unidades de datos y operaciones embebidas, los cuales son mdulos que en realidad acceden y operan sobre los datos.
Ilustracin 2: Divisin estructural de un sistema
2.1.3. Modularidad
La modularidad es un principio que permite que el software sea gestionado. El software se descompone en un conjunto de mdulos que estn integrados para satisfacer los requisitos recogidos. La modularidad contribuye a un mejor entendimiento de los subproblemas que el software se supone debe resolver, para una mejor integridad, y una introduccin ms fcil de cambios que no afecten al sistema completo; esto tambin reduce el impacto de los fallos en submdulos especficos. Una tcnica de modularizacin ampliamente adoptada es la ocultacin de informacin, refirindose a los detalles de implementacin de un objeto, mdulo, paquete o clase, estn escondidos y slo la informacin que se necesita para el uso y la integracin del mdulo se da a conocer a travs de una interfaz adecuada. La modularidad es adoptada en todos los mtodos de diseo de aplicaciones web. Los mtodos de diseo web orientados a objetos emplean clases y objetos que hacen cumplir la ocultacin de informacin. Los sitios web, las vistas de navegacin, las pginas y otros conceptos estructurales ayudan a modularizar y encapsular informacin y operaciones. Del mismo modo, las tcnicas de modelado de arquitectura cuenta con subsistemas, mdulos, componentes y piezas como elementos de modularizacin.
2.2.
Proceso de diseo
El proceso de diseo es una actividad creativa donde la principal meta es transformar y trazar los requisitos de alto nivel sobre un entorno de programacin de aplicacin. Los principales motores son la abstraccin y el continuo refinamiento en modelos ms detallados, que paso a paso llegan a acercarse a la formalizacin requerida por el entorno de programacin. (es decir, el cdigo de aplicacin).
Es difcil definir un proceso de diseo comn para las aplicaciones web, ya que la adopcin de un proceso de diseo depende de muchos factores, incluyendo el enfoque y el lenguaje de modelado seleccionado. Tomando los conceptos basados en el conocido Proceso Unificado, podemos definir las metas del diseo que un proceso de diseo de una aplicacin web debe cumplir:
Entender las cuestiones relacionadas con el entorno tcnico en el que el software funcionar, como los lenguajes de programacin, la tecnologa de la interfaz de usuario, la tecnologa de las bases de datos, la concurrencia, etc. Esto tiene un papel crucial en el diseo de datos de las aplicaciones web. Entender y crear un modelo de requisitos para mdulos individuales y subsistemas. Los requisitos y el diseo estn ntimamente interrelacionados. Usar un diseo para planear y descomponer el trabajo de implementacin en piezas ms pequeas y manejables. Capturar las principales interfaces entre subsistemas. En algunos mtodos de diseo estas interfaces son capturadas en una denominada Web software arquitectura (WebSA). Usar tanto como sea posible una notacin comn para el diseo dentro de un equipo. Para el diseo de aplicaciones web se ha tomado un enfoque diferente: discutir varias notaciones de diseo proporcionadas mediante diferentes mtodos de forma que un diseador pueda comprenderlas y decidir cual se ajusta mejor a l. Decidir sobre una abstraccin de diseo apropiada de forma que la implementacin sea un refinamiento ms o menos sencillo para el diseo sin cambios significantes en la estructura. Esto se puede lograr empleando, bien una abstraccin de diseo comenzando con una apropiada transformacin de la tecnologa y un motor capaz de interpretarlo (por ejemplo WebML), o utilizando UML y un enfoque dirigido por modelos para crear transformaciones de varias abstracciones en entornos de implementacin particulares. (por ejemplo el caso de WebSA)
3. Diseo de flujo de trabajo

El diseo del flujo de trabajo es un proceso de refinamiento de seguimiento de un modelo de proceso de negocio desde una perspectiva organizacional, partiendo de lo obtenido en la etapa anterior de anlisis y especificacin de requisitos. Este diseo se extiende y pone en accin las partes del modelo de proceso de negocio que necesitan ser automatizadas mediante una aplicacin web. Estas caractersticas nos permiten definir el producto de trabajo exacto de un proceso de negocio (un caso) y tambin dnde comienza un proceso de negocio y cmo se procede (la peticin de la actividad). Esta restriccin sobre los procesos de negocio nos ofrece la posibilidad de formalizar una ejecucin de las actividades del flujo de trabajo por un modelo cercano a Ana Beln Peinado Zamora
un entorno de ejecucin. En el caso de las aplicaciones web, el flujo de trabajo deber estar integrado en la aplicacin web que se estn desarrollando. El primer paso en el diseo de un flujo de trabajo es determinar cuales de las actividades en un proceso de negocio sern implementadas por la aplicacin web (existiendo el proceso de negocio de antemano). En este caso, el modelo de diseo de flujo de trabajo es explcito y representa una perspectiva ortogonal en en diseo de aplicaciones web centrndose en actividades y tareas que pueden ser llevadas a cabo en un sistema en conexin con las actividades del negocio realizadas por las personas. Un enfoque alternativo es extender el modelado de hipertexto con conceptos explcitos del flujo de trabajo, pero aqu trataremos slo el primero. El primer enfoque trata el modelo de diseo de flujo de trabajo como un modelo de diseo explcito en el diseo de una aplicacin web. Existen diversas notaciones para ilustrar el diseo del flujo de trabajo como son UML,BusinessProcessModelingNotation (BPMN) y las redes Petri. Es responsabilidad del diseador y depende de su experiencia, que notacin prefiere.
4. Diseo de datos
El diseo de datos es una actividad especialmente fundamental para aquellas aplicaciones web que necesitan gestionar una gran cantidad de datos. El diseo de datos produce un refinamiento del modelo de dominio de la aplicacin identificado durante la ingeniera de requisitos, con el propsito de esquematizar cmo se almacenar y se procesar el contenido a travs de la aplicacin web. El resultado es un modelo de datos que especifica las estructuras usadas para almacenar los datos subyacentes en las entidades y las relaciones previamente identificadas en el modelo de dominio de la aplicacin. El modelo de datos puede variar dependiendo de sistema de gestin de base de datos (DBMS) que sea escogido para el almacenamiento y el procesamiento de los datos. Si se usa un DBMS relacional, un modelo de datos relacional debe ser derivado del modelo de dominio de la aplicacin. Esto se puede hacer siguiendo las reglas tradicionales para transformar el contenido de las entidades y las relaciones en tablas relacionales. Tambin otros DBMS basados en diferentes teoras pueden ser escogidos. Centrndonos en el modelo de datos relacional, que es la principal solucin para el desarrollo de aplicaciones web, sus principales elementos, soportados por cualquier DBMS relacional, son:
Relacin: Un conjunto de tuplas, cada una representando un hecho, sobre un concepto dado (una entidad o una relacin del dominio de aplicacin). Una relacin puede ser tambin como la definicin de una estructura de una tabla (definiciones de un conjunto de columnas) junto con los datos que aparecen en esa estructura (las filas de la tabla). Atributo: Par ordenado, <nombre de atributo, tipo de atributo>. Corresponde con una columna de una tabla de una relacin. El valor del atributo es un valor especfico para el tipo de atributo (es decir, la entrada en una celda especfica de la tabla), que puede ser de tipo escalar, multivaluado, o un elemento de un tipo complejo.
Restriccin: Propiedades que deben ser satisfechas por los elementos de datos para ser correctas y consistentes. Las restricciones ms importantes se refieren a las definiciones de clave primaria y clave ajena.
o
Una clave primaria es un atributo cuyo valor identifica de forma unvoca las tuplas dentro de una relacin. Una clave ajena identifica un conjunto de atributos que son claves primarias en una relacin (referenciada), cuyos valores son los nicos de un conjunto de atributos que son claves primarias en otra (referida) relacin. Las claves ajenas se usan para representar dependencias entre relaciones que corresponden a relaciones 1:1 o 1:n entre entidades en el modelo de dominio de la aplicacin.
Ilustracin 3: TerminologaIlustracin
Algunas abstracciones de alto nivel, generalmente adoptadas en el modelo de dominio de la aplicacin, como las relaciones de generalizacin/especializacin, la cardinalidad N:M en la relacin, y los atributos multivaluados, no estn directamente soportados. Por lo tanto, el modelo de dominio de la aplicacin debe ser reestructurado antes de ser traducido a un modelo de datos relacional.
4.1.
Ingeniera de integracin de la informacin
Hay veces en las que una aplicacin web necesita extraer informacin de fuentes externas distribuidas. Para que esto sea posible tienen que ser desarrollados componentes para el mapeo de esquemas de representacin y la semntica. Las tpicas actividades involucradas en la ingeniera de integracin de la informacin son:
Anlisis del modelo de dominio externo de la aplicacin: Esta actividad tiene que ver con el anlisis del modelo conceptual de la informacin externa relevante para la aplicacin web a desarrollar. Tambin comprende un anlisis del modelo conceptual del entorno donde la informacin tiene que ser entregada. Anlisis de posibles interconexiones entre las aplicaciones web y el anlisis del dominio de la aplicacin externa: El modelo de dominio de aplicacin de la aplicacin web a desarrollar y los modelos conceptuales externos son comparados, y las posibles interconexiones y mapeos son esbozados.
10
Anlisis de los mecanismos de acceso a la informacin externa: Los mecanismos de acceso y los lenguajes de consultas soportados por fuentes externas son analizados y los posibles escenarios para consultar la informacin externa son esbozados. Diseo de la estructura de mediacin: Se designa una arquitectura para integrar informacin o componentes mediadores. Un mecanismo para la mediacin del origen de la informacin es seleccionado (ej: mtodos de integracin global-as-view y local-as-view). Adems, se designa una estrategia para el intercambio de informacin entre la aplicacin web y las fuentes externas. (ej: de publicacin y suscripcin, acceso online y demanda, replicacin, y muchos ms). Implementacin de la infraestructura de mediacin: La infraestructura de mediacin es implementada como un subsistema o capa de la aplicacin web o como un servicio web stand-alone. Testing de la infraestructura de mediacin (Pruebas): La infraestructura es testeada por confiabilidad, rendimiento y escalabilidad, y contra los requisitos funcionales y de datos.
Metodologa HERA
La metodologa HERA (Hojas de Estilo para la Revisin de la Accesibilidad) es una utilidad para revisar la accesibilidad de las pginas web de acuerdo con las directrices de accesibilidad para el contenido Web 1.0 (WGAC 1.0). HERA realiza un anlisis automtico previo de la pgina e informa si se encuentran errores (detectables en forma automtica) y qu puntos de verificacin de las pautas deben ser revisados manualmente. Esta metodologa se refiere a la informacin a nivel de anlisis y diseo mediante la introduccin de los llamados modelos de integracin. Posteriormente, el modelo de integracin da un mayor impulso al desarrollo de aplicaciones. Para la metodologa HERA se distinguen dos fases en la generacin de un sistema de informacin web: 1. Durante la fase de recuperacin e integracin de datos, los datos son recogidos de diferentes fuentes y convertidos a una representacin uniforme. 2. Durante la fase de generacin de la presentacin, los datos recuperados son transformados en una presentacin hipermedia en un formato adecuado para el usuario. Esta fase tiene dos aspectos de modelado: a. La capa de aplicacin define la vista abstracta hipermedia (navegacin) sobre los datos de acuerdo a un modelo de aplicacin. b. La capa de presentacin define la capa de presentacin que junto con las definiciones de la capa de aplicacin son necesarias para la generacin de una presentacin para una plataforma concreta.
11
5. Diseo de navegacin
El diseo de navegacin tiene que ver con la estructura de las rutas de navegacin a travs de la informacin y los servicios prestados por la aplicacin web. Esta es una actividad esencial en la ingeniera de aplicaciones web, en especial cuando las estructuras de navegacin van ms all de las jerarquas simples y la aplicacin web cuenta con un comportamiento de navegacin complejo. Dos aspectos deben ser abordados por el diseo de navegacin: La estructura del sitio, que se centra en como los diferentes nodos de navegacin deben ser definidos y enlazados entre s para formar una interfaz de hipertexto, y el comportamiento de navegacin, que se centra en las acciones de navegacin de los usuarios y en los eventos que stos generan y que a su vez producen cambios en las estructuras de hipertexto recorridas. A continuacin, discutiremos las principales abstracciones de diseo que diferentes mtodos de ingeniera web proponen para dirigir estos problemas.
5.1.
Diseo de la estructura de sitio
Para describir la organizacin de la interfaz de hipertexto se usan una serie de abstracciones de navegacin en el diseo de una aplicacin web, con especial hincape sobre la identificacin de los fragmentos de informacin que se muestra en los nodos de hipertexto y los mecanismos de navegacin que permiten a los usuarios moverse entre diferentes fragmentos. Esta fase es referida por diferentes mtodos de ingeniera web con una terminologa diferente, por ejemplo llamndola diseo de navegacin, diseo de la estructura del sitio, o diseo de hipertexto. Sin embargo, todos ellos comparten un enfoque comn sobre los siguientes conceptos:
Elementos atmicos de navegacin: Representan fragmentos nicos de informacin compuestos por (atributos) instancias de una entidad de datos. Un ejemplo de un elemento atmico de navegacin puede ser la descripcin de un libro mostrada en una pgina en Amazon.com. Normalmente, para cada elemento atmico de navegacin la conexin con la entidad de datos subyacente es especificada. Elementos complejos de navegacin: Representan estructuras complejas compuestas de elementos nicos de navegacin (o recursivamente de otras estructuras complejas). Un ejemplo de estructura compleja de navegacin puede ser un fragmento de informacin de un libro junto con una lista de libros recomendados en Amazon.com. Estructuras contextuales de navegacin: Representan estructuras de navegacin usadas para acceder a elementos de navegacin atmicos o complejos. Ejemplos de estas estructuras son mens, visitas guiadas, ndices, y muchos ms.
A continuacin podemos ver algunas de las tcnicas empleadas para el diseo de hipertexto: las vistas y los contextos de navegacin (UWE), y el esquema de hipertexto (WebML y OOHDM). Ana Beln Peinado Zamora
12
Vistas de navegacin y contextos de navegacin

El diseo de la vista de navegacin es una tcnica de diseo de estructura de un sitio soportada en OOHDM y en ingeniera web basada en UML (UWE). Las vistas de navegacin representan elementos de navegacin, atmicos o complejos, que son derivados en proyecciones de entidades de datos del modelo de datos de la aplicacin. Estas vistas se definen como vistas orientadas a objetos, por medio de un lenguaje similar a SQL. La especificacin de una vista de navegacin incluye nombre de la vista, entidad o clase de la base de datos, y otras clases que heredan de la clase padre. Adems de eso, la vista especifica proyecciones de atributos tanto de la clase padre como de las clases heredadas. Las condiciones de seleccin limitan ms la informacin que puede ser navegada a travs de dichas vistas. Una vez que se han definido las vistas stas se pueden agrupar, indexar y enlazar en los denominados contextos de navegacin. Un contexto de navegacin describe los mecanismos de navegacin y las estructuras que se pueden utilizar para acceder a las vistas de navegacin. El contexto de navegacin organiza el espacio de navegacin en colecciones consistentes que pueden ser recorridas siguiendo un orden particular con lo cual el usuario es capaz de llevar a cabo sus tareas previstas. Existen diferentes elementos que pueden ser usados para la definicin de un contexto de navegacin:
Clase de origen simple: Representa un contexto compuesto por aquellos objetos de una clase que satisfacen una propiedad dada. Un ejemplo comn es aquel dado por todas las instancias de una clase. (Historia, todas las historias escritas en una revista online). Grupo de clase de origen: Un conjunto de contextos de clases de origen simple, seleccionados por medio de una propiedad parametrizada. Por ejemplo, por tipo de historia es un grupo de una clase de origen; sus elementos son contextos de clases de origen simple, uno por cada posible valor del atributo Tipo (ciencia, religin, economa, deportes, etc.). Delimitadores de contexto: Delimitan subgrupos de contextos que son mutuamente accesibles (y separados de aquellos que no son accesibles). Enlace de origen simple: Representa todos los objetos relacionados con un objeto dado. Grupo de enlaces de origen simple: Un conjunto de contextos de enlaces de origen simple. Est definido por relaciones especficas 1:1 y definiendo los contextos de enlaces de origen simple por cada posible valor de origen de la relacin. Arbitrario: Describe conjuntos enumerados, donde los elementos pueden pertenecer a diferentes clases, esto ocurre, por ejemplo, cuando los elementos de informacin heterognea son presentados en una coleccin de visitas guiadas. Dinmico: Describe conjuntos donde los elementos pueden cambiar durante la navegacin, por ejemplo, el carrito de compra.
13
Clases dentro del contexto: Clases especiales que decoran contextos, los enriquecen con atributos variables y mtodos (comportamiento). Tambin especifican comportamientos transversales,como caractersticas de comportamiento para calcular los elementos de informacin previos y siguientes en un contexto. El comportamiento transversal puede ser secuencial, circular secuencial, ndice, ndice secuencial dependiendo de cmo sea definido el contexto en la clases de comportamiento. ndices: Describen estructuras de acceso para contextos, como mens, ndices adicionales, y visitas guiadas.
UWE (UML web engineering) es una propuesta orientada a objetos, iterativa e incremental basada en UML y en el proceso de desarrollo de software unificado. UWE proporciona un proceso de diseo sistemtico seguido por una generacin semiautomtica de aplicaciones web a travs de un framework de publicacin XML (UWEXML). UWE define un perfil UML propio que proporciona los elementos necesarios para el modelado de los diferentes aspectos de una aplicacin web: la navegacin, la presentacin En concreto para el modelado de la navegacin propone dos diagramas diferentes:
El modelo del espacio de navegacin, define los caminos de navegacin (asociaciones de navegacin directa) entre los diferentes objetos de la aplicacin (clases de navegacin). El modelo de la estructura de navegacin, detalla las estructuras de acceso que se usan en la navegacin, como son los mens, los ndices, los contextos, las visitas guiadas y las consultas de seleccin.
Adems, UWE utiliza diagramas de estado para el modelado de escenarios web que definen el comportamiento o los aspectos dinmicos de una aplicacin web. OOHDM (ObjectOrientedHypermediaDesignMethod) es una metodologa centrada en el proceso de diseo y desarrollo de aplicaciones hipermedia. Propone un proceso que consta de 5 etapas, siguiendo un modelo de proceso con prototipado, iterativo e incremental: captura de requisitos, diseo conceptual, diseo navegacional, diseo de la interfaz abstracta e implementacin. El modelado de la navegacin para OOHDM es prctimamente similar al de UWE. Las vistas de navegacin y los esquemas de contexto de navegacin proporcionan abstracciones orientadas a objetos potentes para modelos de aspectos ricos de navegacin as como contextos de acceso de navegacin. Las abstracciones permanecen genricas y pueden ser mapeadas a varios entornos de implementacin diferentes. Sin embargo, cada mapeo requiere mayores esfuerzos, bien para desarrollar generadores implementando los mapeos, o bien para implementar la especificacin de navegacin abstracta en un entorno de programacin particular.
Esquema de hipertexto
WebML adopta la nocin de los esquemas de hipertexto para especificar la estructura del hipertexto, en trminos de composicin de unidades de contenido dentro de pginas y en trminos de definicin de enlaces, es decir, permite la definicin de Ana Beln Peinado Zamora
14
pginas de hipertexto y su organizacin interna en trminos de componentes (unidades de contenido), cada una mostrando el contenido extrado en una modalidad diferente, y tambin soporta la especificacin de enlaces entre pginas y unidades de contenido. La estructura modular de un front-end de hipertexto est definida en conceptos de vistas de sitio (hipertexto), reas, pginas, y unidades de contenido. Una vista de sitio (hipertexto) es un hipertexto particular, diseado para dirigir un conjunto especfico de requisitos. Varias vistas de sitios pueden ser definidas al principio de los mismos datos, para servir las necesidades de las diferentes comunidades de usuarios, o para la organizacin de contenidos requeridos por los distintos dispositivos de acceso, como PDAs, smartphones y dispositivos similares. Cada vista de sitio (hipertexto) puede consistir en reas, las cuales son las secciones principales del hipertexto y comprenden recursivamente otras subreas o pginas.
Composicin de la pgina
Las pginas son los actuales contenedores de informacin entregada al usuario. Las unidades de contenido que estn compuestas para representar la publicacin de una o ms instancias de entidades de contenido, son tpicamente seleccionadas por medio de consultas sobre las tablas relacionales derivando de las entidades y relaciones del modelo de dominio de aplicacin. Las unidades de contenido bsicas en WebML son:

Unidades de datos (Data units), representa algunos de los atributos de una instancia de una entidad dada. Unidades de multidatos (Multidataunits), representan algunos de los atributos de un conjunto de instancias de entidades. Unidades de ndices (Indexunits), representan una lista de claves descriptivas para un conjunto de instancias de entidades y habilita la seleccin de una de ellas. Unidades desplazadoras (Scrollerunits), habilitan la navegacin para un conjunto de objetos ordenados. Unidades de entrada(Entryunits), no extrae contenido de entidades de contenido, pero publican un formulario de recogida de valores de entrada del usuario.
Ilustracin 4: Unidades bsicas de contenido en WebML
15
Las Data, Multidata, Index, y Scrollerunits requieren la especificacin de una procedencia (origen, fuente) y un seleccionador. El origen es el nombre de la entidad de contenido desde la cual el contenido de la unidad es recuperado. El seleccionador es un predicado, usado para seleccionar los objetos reales para la entidad de contenido que contribuye a la unidad de contenido. Hay disponibles tambin algunas extensiones como el indice de multiseleccin (MultichoiceIndex) y el indice jerrquico (HierarchicalIndex), que son dos variantes de Indexunit. La primera representa la seleccin por medio de los usuario de objetos mltiples y la segunda organiza jerrquicamente una lista de entradas de ndice definidas sobre mltiples entidades.
Definicin de enlaces
Las unidades y las pginas en el esquema de hipertexto estn interconectadas mediante enlaces para formar una estructura de hipertexto.
Ilustracin 5: Unidades bsicas de contenido en WebML.
Existen 2 tipos de enlaces:
Enlaces contextuales: Son enlaces entre unidades porque llevan alguna informacin de las unidades de origen a la unidades de destino, como parmetros necesarios para el clculo de los seleccionadores parametrizados en la unidad de destino Enlaces no contextuales: son enlaces entre pginas.
En algunos casos, puede ser necesario diferenciar un comportamiento especifico de un enlace, se distinguen:
Enlaces automticos: Son enlaces que estn navegados en ausencia de una interaccin de usuario tan pronto como la pgina que contiene la unidad de origen del vnculo es accedida.
Ilustracin 6: Enlace automtico
16
Enlaces de transporte: Son enlaces que son usados slo para pasar informacin contextual desde una unidad a otra y no se necesita para ser representado como un ancla. Destaca de ellos que slo permite el paso de parmetros y no la interaccin de usuario.
Ilustracin 7: Enlace de transporte
Parmetros globales
En algunas circunstancias, la informacin contextual no es transferida punto a punto durante la navegacin, pero puede establecerse como disponible a nivel mundial para todas las pginas de una vista de sitio (hipertexto). Esto es posible a travs de los parmetros globales, que abstraen la nocin a nivel de implementacin de los datos de sesin persistentes. Los parmetros pueden establecerse a travs de Set unit y consumidas dentro de una pgina a travs de una Getunit.
Operaciones
Adems de la especificacin de los sitios web de slo lectura, donde la interaccin del usuario est limitada a la informacin de navegacion, WebML tambin soporta la especificacin de servicios y las operaciones de gestin de contenido requiriendo acceso de escritura sobre la informacin alojada en el sitio (ejemplo: llenar el carrito de compra o actualizar la informacin personal del usuario). Algunas primitivas expresan operaciones de gestin de contenido integrado, tales como crear, eliminar, y modificar una instancia de una entidad y agregar y quitar una relacin entre dos instancias. La especificacin de las operaciones genricasrecogen servicios fuera del contexto de la aplicacin web, tal como la carga de una tarjeta de crdito por medio de un servicio externo, es tambin posible.
Comparacin de los mtodos WebML y OOHDM
WebML es un lenguaje modelado de alto nivel para la especificacin de aplicaciones Web. En esta aproximacin, se propone la especificacin de la aplicacin Web en base a cuatro perspectivas:el modelo estructural o de datos, el modelo de hipertexto, el modelo de presentacin y el modelo de personalizacin. WebML define tambin un proceso iterativo con las siguientes etapas: recoleccin de requisitos, diseo de datos, diseo de hipertexto, diseo de presentacin y diseo de personalizacin. En la etapa de diseo del hipertexto se realiza el modelado de la estructura o esquema de hipertexto, mediante la construccin de dos modelos:
El modelode composicin, en el que se identifican qu pginas componen el hipertexto y con qu contenido. Es muy similar a las vistas diseadas en OOHDM porque determina la composicin de los nodos de navegacin atmicos o complejos.
17
El modelo de navegacin, que expresa cmo se enlazan las pginas para formar el hipertexto. Se asemeja a el esquema de contexto de navegacin de OOHDM porque define como los elementos de navegacin pueden ser accedidos a travs de estructuras de navegacin. Para stos y dems modelos propuestos, WebML define una notacin propia.
La etapa de diseo de OOHDM se realiza a travs de dos modelos:
El modelo de clases navegacionales, se basa en el modelo de datos conceptual y representa los elementos navegables y los atributos a los que se van a tener acceso, teniendo en cuenta los perfiles de los usuarios. El modelo de contextos navegacionales, contiene las estructuras navegacionales y se representa mediante nodos y enlaces.
El contexto navegacional organiza el espacio navegacional en un conjunto que puede ser navegado en un orden particular. Ambos modelos utilizan notacin UML extendida.
5.2.
Diseo del comportamiento de navegacin
El diseo del comportamiento de navegacin mira la navegacin desde la perspectiva de la interaccin de un usuario. Su objetivo es especificar lo que sucede cuando el usuario realiza un accin para navegar o utiliza cualquier funcionalidad ofrecida por un elemento de navegacin. Este diseo proporciona un vista de alto nivel sobre cmo, mediante la ejecucin de una accin ciertos datos pueden ser accedidos a travs de diferentes elementos de navegacin. Esto puede ser til para especificar con una mayor precisin la semntica de la navegacin, es decir, cuales son los posibles estados de navegacin, qu interacciones y acciones de navegacin pueden ser realizadas en cada estado, y como los estados de navegacin cambian en respuesta a la ejecucin de dichas acciones. Por esta razn, esta tcnica tambin puede ser empleada para describir el comportamiento semntico de los lenguajes de modelado de navegacin, como el propio WebML. Normalmente hay varias vas de navegacinen una aplicacin web. Cada va de navegacin es una ruta que el usuario puede seguir dentro de un espacio de navegacin y consiste en estados y transiciones:

Un estado de navegacincorresponde con un fragmento de informacin observado por un usuario en un nodo de hipertexto en un tiempo dado. Una transicin permite moverse de un estado a otro. Las transiciones son normalmente causadas mediante un evento de interaccin del usuario o mediante otros eventos, tales como eventos de tiempo o cualquier otro evento generado por el sistema. Cuando una transicin es activada sta lleva a la produccin de un nuevo nodo de hipertexto un nuevo estado de navegacin.
Para representar las vas de navegacin, se utilizan Diagramas de Estados o Redes Petri. Vamos a centrarnos en el Diagrama de estados en UML (mquinas de estados). Una mquina de estados es un grfico de estados y de transiciones. sta se une a una clase y Ana Beln Peinado Zamora
18
describe, generalmente, la respuesta de una instancia de la clase a los eventos que recibe. La mquina de estados hace uso de los siguientes elementos:
Estados atmicos o simple: Representan el fragmento de informacin ms simple observado por medio de un usuario en un tiempo dado. Cada diagrama puede tener un pseudoestado de partida, que denota el punto de va inicial. Evento: Es una ocurrencia significativa que tiene una localizacin en tiempo y espacio. Desencadena una transicin; incluyen eventos generados por el usuario o por el sistema, y esto ltimos incluyen eventos de tiempo. Los eventos se pueden dividir en varios tipos explcitos e implcitos: eventos de seal, eventos de llamada, eventos de cambio y eventos de tiempo. Transiciones: Representan interconexiones activas entre fragmentos de informacin, y normalmente corresponden a asociaciones en el modelo de dominio de la aplicacin. Para cada transicin es posible especificar el evento que la activa, posibles expresiones de guardia condicionando su activacin, y posibles acciones para ser realizadas tan pronto como la transicin es activada. Superestados: Representan grupos de estados atmicos, que se pueden organizar de manera secuencial (estados disjuntos) o concurrente (ortogonales). Subestados concurrentes: Representan porciones de informacin para ser representadas simultneamente. Los pseudoestados de bifurcacin y unin son usados respectivamente para dividir y unir clculos y permitiendo paralelismos (actividad concurrente). El pseudoestadoestado de sincronizacin es usado para sincronizar subestados de regiones paralelas. Esto significa que los estados de navegacin pueden presentar una porcin de informacin usando varios fragmentos de contenido de diferentes tipos de medios presentados simultneamente.
Cada estado puede tener acciones de efecto secundario que pueden ser llevadas a cabo cuando un estado es introducido (acciones de entrada), abandonado (acciones de salida), o se contina dentro de un estado (hacer accin). Una accin de efecto secundario es, por ejemplo, la inicializacin y el renderizado de un contenido en una pgina web, o la seleccin de estilos de presentacin para una porcin de informacin dada. Las acciones tambin pueden procesar parmetros. La variabilidad en las vas de navegacin es modelada a travs de estados alternos (OR) y por medio de decisiones que simbolizan que pueden dividir una transicin en varias transiciones alternativas. En este sentido, las vas de navegacin pueden especificar rutas alternativas de navegacin y porciones de informacin cuyo acceso es restringido mediante condiciones referenciadas a un usuario especfico, a contenido, a un dispositivo, o a caractersticas del entorno. Los valores etiquetados se pueden usar para extender la semntica de los elementosen los diagramas de estado UML. Estas son propiedades especificas de dominio que pueden referirse a entidades conceptuales del modelo de dominio de la aplicacin, o para especificar trminos especificando requisitos de navegacin adicionales, y esto puede ser usado por los generadores para traducir las especificaciones de la mquina de estados en cdigo de aplicacin.
19
Interfaces y colecciones de datos

Desde el punto de vista sobre dnde y cmo son definidas las colecciones de datos y los mtodos usados dentro de las acciones, el diseo de las vas de navegacin se puede abordar de dos formas:
Tomando un enfoque a alto nivel sobre los estados de navegacin, como un refinamiento de modelos de tareas desde la fase de anlisis de requisitos. Los refinamientos paso a paso pueden ser aplicados para descomponer los estados de alto nivel en subestados. Sin embargo, el diseo detallado de las vas de navegacin se preocupa tambin de la especificacin de las operaciones de renderizado, para identificar los mtodos que podrn ser llamados y los objetos que podrn ser instanciados cuando un estado particular es introducido, abandonado o manipulado internamente. Por lo tanto, una parte integral del diseo de las vas de navegacin es la promulgacin de los modelos conceptuales definidos durante el anlisis de requisitos con colecciones, interfaces, y mtodos expresando ms detalles sobre la lgica de negocio de la aplicacin. Construir el modelo de va de navegacin en la parte superior de las vistas de navegacin, como la ltima actividad en el diseo de navegacin, de forma similar a como se ha hecho en los esquemas de contexto de navegacin OOHDM. Para ser capaces de hacer esto, por ejemplo con las abstracciones OOHDM, el diseo de navegacin necesita ser perfeccionado y promulgado con la definicin de los mtodos para ser invocado en las especificaciones de la mquina de estados.
En ambos enfoques se consigue llegar a un modelo que es un refinamiento de algunos tipos de modelos estructurales.
5.3.
Interaccin del servicio web
Los servicios web son un ingrediente esencial en el desarrollo de las aplicaciones web modernas. La interaccin con los servicios web es dirigida por medio de los usuarios, esto es, el usuario proporciona la entrada necesaria y toma las decisiones necesarias para guiar la ejecucin de todos los procesos soportados por los servicios web. Para describir los principales elementos de una interaccin de un servicio web que se consideran para un nivel conceptual, vamos a mostrar las abstracciones modeladas presentadas por WebML, que ha sido extendido con algunas unidades de servicio web (web serviceunits) que implementan las operaciones WSDL de los servicios web SOAP/WSDL. Las operaciones WSDL son las unidades bsicas de interaccin con un servicio, por lo tanto WebML soporta las 4 categoras de operaciones, distinguiendo entre dos categoras:
20
Operaciones iniciadas por el cliente (one-way y request-response.), se usa en la especificicacin de una aplicacin web de hipertexto, consumiendo un servicio. Operaciones iniciadas por el servicio (notificationy solicit-response), es especificado dentro de las denominadas vistas de servicioque contienen la definicin para un servicio que va a ser publicado.
Invocacin del servicio web

La especificacin para la invocacin del servicio web dentro de una aplicacin web explota las operaciones de request-response yone-way. Request-response consiste en el intercambio de dos mensajes: la solicitud enviada al servicio y la respuesta recibida del servicio. Ms especficamente, la operacin se activa cuando el usuario navega por su enlace de entrada (un ejemplo, cuando el usuario hace click sobre el botn de bsqueda en la pgina) One-wayse modela de forma similar a la operacin request-response, con la principal diferencia de que el servicio no proporcionar ninguna respuesta. Por lo tanto, una vez el mensaje es enviado al servicio, el usuario contina con su navegacin sin esperar ninguna respuesta.
Desarrollo de servicios web

WebML tambin soporta el desarrollo de servicios web que pueden ser invocados mediante aplicaciones de terceros. Desde el punto de vista de la aplicacin, desarrollar y publicar un servicio web no requiere la especificacin de la interaccin por medio de los usuarios. Las acciones sern realizadas cuando la notificacin o las operaciones solicitresponse se activan no especificndose a travs de las pginas, sino como una cadena de operaciones (por ejemplo, para el almacenamiento o la recuperacin de datos, o para la ejecucin genrica de operaciones como el envo de emails). Por lo tanto la publicacin de servicios web puede ser especificada separadamente desde la vista de sitio (hipertexto) que describe la interfaz de hipertexto para la aplicacin web, en una vista de un servicio dedicado que recoge los puertos que exponen la funcionalidad de un servicio web a travs de operaciones WSDL. Dentro de la vista de servicio, un puerto representa el servicio individual, compuesto por un conjunto de operaciones WSDL, mientras que cada operacin individual es modelada a travs de una cadena de operaciones WebML a partir de una solicitresponse o de una operacin de notification. La lgica de negocio de una operacin WSDL es descrita mediante una cadena de operaciones WebML, especificando las acciones a realizar como consecuencia de la invocacin del servicio y, posiblemente, se construya el mensaje de respuesta para ser enviado de vuelta al invocador. Cada operacin WSDL se inicia con una unidad de solicitud (solicitunit) activando el servicio, y termina con una unidad de respuesta (response unit), que enva un mensaje de vuelta al servicio.
21
6. Diseo de presentacin
El diseo de presentacin para las aplicaciones web tiene como objetivo producir un modelo para la definicin de las estructuras de presentacin de apoyo a la presentacin de la informacin y la invocacin de servicios dentro de los cuadros de dilogo que proporciona la aplicacin web. Esto significa identificar la ubicacin espacial de las estructuras simples y compuestas de presentacin y las caractersticas visuales que lo decoran. Las capacidades de visualizacin del navegador deben ser tenidas en cuenta. La interfaz de hipertexto centrada en el documento para los navegadores web actuales, de hecho, no proporciona medios fciles para hacer frente a complejas caractersticas interactivas. Adems, la posicin coherente de los elementos de la interfaz, dentro de los espacios interactivos dedicados a las diferentes clases de contenidos y servicios, deben ser cuidadosamente diseados. Las interfaces incorrectamente compuestas pueden causar una sobrecarga cognitiva, y dar lugar a un problema conocido, que los usuarios se pierdan en el hiperespacio de la informacin y de los servicios. El diseo de la presentacin puede consistir en dos actividades principales, en dos niveles diferentes de abstraccin:
El diseo de la presentacin abstracta, es un refinamiento para el diseo de la navegacin cuyo objetivo es especificar la composicin de los elementos abstractos en las pginas web. Estos elementos abstractos corresponden principalmente a los elementos de contenido y las funciones anteriormente identificadas durante el diseo de navegacin. El diseo de presentacin concreta, identifica los elementos de presentacin concretos (por ejemplo botones, prrafos de texto, imgenes, etc) que se utilizan para la representacin de los elementos abstractos en las pginas web, y las combina en un modelo que pueda directamente traducirlos en una representacin concreta de carcter tcnico de las pginas web, como HTML.
6.1.
Diseo de presentacin abstracta
El diseo de presentacin abstracta describe la composicin de elementos para mostrar informacin y la invocacin de funciones en interfaces de usuario web. Para este propsito se pueden adoptar tres tcnicas principales:
Diseo de widgets abstractos

Describe una interfaz de usuario como una composicin de widgets que representan las clases de elementos de presentacin jugando el mismo rol abstracto dentro de una interfaz de usuario web:

SimpleActivators: Reaccionan a eventos externos, como los clics de ratn. ElementExhibitors: Presentan algn tipo de contenido. VariableCapturers: Captura valores para una o ms variables; pueden ser cajas de texto, listas desplegables, casillas de verificacin (check boxes), y otros ms.
22
IndefinitiveVariables: Captura valores sin tipo introducidos por los usuarios. PredefinedVariables: Permite la seleccin de un subconjunto de los valores de un conjunto de valores predefinidos. CompositeInterfaceElements: Representa composiciones de cualquier widget anterior.
El diseo de widgets abstractos proporciona los medios para especificar qu tipo de control puede representar el contenido y funciones identificadas durante el diseo de navegacin, y la forma en que se agrupan en pginas web. Esta tcnica abstrae el diseo de navegacin y las lgicas de composicin de contenido y se centra ms en la composicin pura de los elementos de presentacin dentro de las pginas. Como tal, puede ser utilizada de forma fructfera si los widgets abstractos se asignan a los elementos de diseo de navegacin. En particular, si bien puede ser redundante cuando se utiliza en combinacin con las tcnicas que ya permiten la especificacin de la composicin de pgina (por ejemplo, el diseo de hipertexto de WebML), que puede ser til cuando se combina con tcnicas que no se refieren a la agrupacin de elementos de contenido y funciones dentro de las pginas web externas (por ejemplo, la vista de diseo de navegacin de OOHDM). En este caso, los widgets abstractos se utilizan como fachadas o decoradores de vistas de navegacin, enriquecindolas con las caractersticas de presentacin.
Espacios de interaccin
En la fase de diseo, la especificacin de los espacios de interaccin puede ser ms refinada y extendida a travs de los siguientes elementos:

Input Elements: Especifica los elementos de presentacin que permiten a los usuarios introducir alguna entrada. Output elements: Especifica los elementos de presentacin que presentan alguna salida para el sistema. Actions: Especifica los elementos de presentacin que permiten a los usuarios interactuar con la aplicacin para invocar acciones especficas. Navigationrelationships: Especifica la navegacin entre los espacios de interaccin.
Las entradas, salidas y acciones pueden ser derivadas del modelo de tarea definido durante la ingeniera de requisitos. Las acciones representan tareas; los elementos de entrada (input elements) los parmetros de entrada procesados por la accin; los elementos de salida (output elements) representan los datos mostrados y usados por los usuarios para producir una entrada. Las acciones normalmente son representadas a un alto nivel de abstraccin, en forma de etiquetas compresibles para los usuarios, sin ninguna referencia a los mtodos de los objetos de accin a los que corresponden. Los requisitos adicionales son por lo tanto necesarios para obtener un modelo de presentacin prximo a la implementacin. Para este propsito, los espacios de interaccin pueden ser, por ejemplo, combinados con vas de navegacin, donde el estado y las transiciones de las acciones son precisamente unidos a los mtodos de los objetos.
23
Los espacios de interaccin proporcionan un medio para expresar la composicin de los elementos de entrada y salida de la presentacin en pginas, las acciones que un usuario puede realizar, y la navegacin sobre diferentes espacios de interaccin. Estos pueden ser utilizados como una sola tcnica, para representar todo el diseo de presentacin abstracta, o pueden ser utilizados en combinacin con el diseo de los widgets abstractos para enriquecer esta tcnica con la especificacin de las acciones.
Vistas abstractas de datos

Las vistas abstractas de datos (ADVs) son extensiones de modelos software orientados a objetos, presentados para especificar los objetos de interfaz de usuario y sus relaciones con los objetos de aplicacin. ADVs observan los objetos de aplicacin, llamados ADV propietarios, que gestionan los datos de aplicacin y las lgicas de negocio. En otras palabras, ADVs son vistas sobre aquellos estados de los propietarios que los usuarios pueden ver, interactuar con ellos, y manipular. Una interfaz de usuario puede ser representada mediante la combinacin de diferentes ADVs. Cada ADV puede estar compuesta de niveles inferiores de ADVs. Las relaciones de generalizacin/especializacin pueden tambin ser usadas para la composicin de ADV, fomentando as la reutilizacin de algunos objetos de la interfaz recurrentes, tales como las barras de navegacin globales. La relacin entre las ADVs y sus propietarios es especificada en diagramas de composicin similares a los diagramas de clases de UML. Estas relaciones no slo modelan que una ADV proporcione la interfaz de usuario para el propietario, sino tambin que la ADV pueda desencadenar algunos de sus mtodos. Cada relacin implica el intercambio de mensajes que representan las peticiones de los servicios desde una ADV a sus propietarios y la provisin de servicios desde un propietario a sus ADVs. Las ADVs han sido adoptadas por la especificacin de las interfaces de usuario web en el contexto de la metodologa OOHDM. La notacin adoptada utiliza cajas para representar una ADV o una ADV propietario, lneas discontinuas para representar peticiones de servicio, y lneas continuas para representar provisiones de servicio.
6.2.
Diseo de presentacin concreta
El diseo de presentacin concreta se refiere a la composicin de elementos de interfaz concretos dentro de pginas web. El mtodo UWE propone un modelo de presentacin basado en UML, donde algunos estereotipos de clases son usados para modelar elementos de presentacin, como fragmentos de texto, imgenes, audio, video, anclas, botones, y formularios, que pueden tambin ser anidados para modelar la estructura jerrquica de las pginas web. Un elemento complejo, llamado objeto de presentacin, es usado para modelar cualquier composicin arbitraria de los objetos previos. Una clase de presentacin que no est contenida en otra clase representa una pgina web. El comportamiento de cada interfaz de usuario puede, adems, ser descrito por una mquina de estados.
24
7. Diseo de la arquitectura
El diseo de la arquitectura tiene como objetivo la captura de las decisiones sobre la organizacin de un sistema software, para poner de relieve los subsistemas constituyentes, los componentes y las interacciones. En una aplicacin web, esto implica resolver algunas decisiones sobre la lgica de negocio de la aplicacin, para establecer un modelo de referencia para la actividades de implementacin. Un enfoque comn es definir una descomposicin de la aplicacin software, para representar la distribucin de los componentes en los diferentes niveles de aplicacin (por ejemplo, pginas dinmicas y estticas, formularios, applets, y cualquier otro tipo de componente software enriqueciendo las pginas web del lado del cliente o ejecutado desde el lado del servidor), y las relaciones definidas entre ellos. (por ejemplo, pginas que se enlazan). En los siguientes puntos se dar una visin general de los temas principales del diseo de la arquitectura mediante la revisin de dos mtodos bien conocidos: la tcnica de diseo propuesta por Conallen en el contexto de la Extensin de la aplicacin web para UML (WAE), y el enfoque de la arquitectura web software (WebSA) tambin basada en un conjunto de extensiones UML, cuya principal ventaja es la provisin de modelos de arquitectura que pueden ser fcilmente integrados en los pre-existentes modelos funcionales definidos.
7.1.
Extensin de la aplicacin web de Conallen para UML
En 2000, JimCollanen propuso una tcnica para el diseo de la arquitectura, que extenda de UML con semnticas adicionales y restricciones para modelar los elementos arquitectnicos web especficos denominada WAE (Web ApplicationExtension) para UML. De acuerdo con este mtodo, el diseo de la arquitectura comienza con la definicin del diagrama de componentes, representando los componentes de aplicacin, sus interfaces, sus relaciones, y las clases del modelo de dominio que los realizan. Adems de identificar las clases y colaboraciones, las actividades de diseo tambin incluyen la divisin de los componentes en objetos residiendo en los diferentes niveles de la aplicacin. La distribucin de los objetos en el lado del cliente y del servidor es el foco principal, pero las otras capas de aplicacin, tambin se pueden considerar como tal. Una de las principales novedades de este mtodo es la especificacin de pginas web como elementos arquitectnicos. Siendo parte de la aplicacin front-end, las pginas web son elementos fundamentales en el diseo de presentacin y navegacin. Sin embargo, las pginas web representan el enlace entre el navegador y todos los dems subsistemas de una aplicacin web, por esta razn, ofrecen la oportunidad de capturar los principales elementos arquitectnicos y sus colaboraciones. Desde la perspectiva del modelado, las pginas web pueden ser consideradas objetos y, como tal, pueden ser especificadas, por ejemplo, a travs de clases UML. No obstante, la notacin tradicional UML no captura algunas caractersticas que son especficas de las aplicaciones web, tales como que no facilita la tarea de diferenciar cdigo cliente (scripts) de cdigo servidor.
25
UML puede ser extendido para permitir una nueva semntica: estereotipos, listados de etiquetas(tags) y restricciones (constraints):

Estereotipos: Define una nueva semntica al modelo. Lista de etiquetas: Podemos entregar una lista de campo-valor. Restricciones: Definen las reglas para trabajar con determinados estereotipos.
Extensiones WAE para el diagrama de clases

Todo lo anterior es abordado mediante estereotipos que extienden de la notacin tradicional UML.
En la vista de componentes, adoptada para representar los mdulos fsicos y los ejecutables que componen el sistema de ejecucin, encontramos los dos estereotipos <<static page>>y <<dynamic page>>que representan las dos clases de pginas web. En la vista lgica, cada uno de estos objetos es despus distribuido a lo largo de los diferentes niveles de aplicacin. Las pginas web en el front-end de la aplicacin son por lo tanto modelados por medio del estereotipo <<client page>>. Este estereotipo puede incluir formularios (representados a travs del estereotipo <<Web form>>), o cualquier tipo de componente integrado (representado a travs del estereotipo <<object>>). La lgica de negocio de la aplicacin web es en cambio modelada mediante el estereotipo <<server page>>. Algunos de los ejemplos ms comunes de estereotipos que se pueden asociar a las clases y a las relaciones entre estas, para representar una aplicacin web son los siguentes:
26
7.2.
Web Software Arquitectura (WebSA)
La mayora de los mtodos de ingeniera web especialmente centrados en una perspectiva funcional, proporcionan elementos para datos, hipertexto y el diseo de presentacin. Muy pocos mtodos soportan las actividades de implementacin mediante las tcnicas o herramientas para la generacin automtica de cdigo. WebSA introduce el modelado arquitectnico como una especfica y ortogonal actividad de diseo, que puede sin embargo ser integrada completamente con los modelos funcionales de diseo definidos a travs de cualquier otro mtodo de ingeniera web. La adopcin de WebSA es especialmente fructfera en metodologas que tambin proporcionan soporte para la generacin de cdigo (por ejemplo, WebML), ya que les da poder con la posibilidad de especificar explcitamente el modelo de la arquitectura, reduciendo la necesidad de adherirse a las opciones arquitectnicas predefinidas, en general establecida por el motor de generacin automtica. WebSA se caracteriza por tres modelos arquitectnicos:

El modelo de subsistemas: Identifica los subsistemas de aplicacin y su distribucin a lo largo de capas, de acuerdo con los patrones arquitectnicos. El modelo de configuracin: Detalla los componentes y los conectores que constituyen la aplicacin. El modelo de integracin: Fusiona la vista arquitectnica, especificada por los dos modelos anteriores, con la vista funcional expresando datos, hipertexto, y el diseo de presentacin.
Ilustracin 8: Modelo de arquitectura en WebSA
27
La vista funcional puede ser definida a travs de cualquiera mtodo de diseo . El modelo de subsistema y de configuracin define la arquitectura Web de aplicacin de acuerdo con las primitivas WebSA. WebSA es compatible con el paradigma MDE (ver apartado 8). Por lo tanto, los modelos son formalizados mediante un metamodelo MOF, y las transformaciones son proporcionadas para generar el modelo de implementacin final. Primero los modelos conceptuales (funcionales y arquitectnicos) son mapeados a una plataforma de modelo independiente, el denominado modelo de integracin, que fusiona los elementos funcionales y arquitectnicos mediante la definicin de mapeos entre ellos. El modelo de integracin es entonces sensible a las transformaciones en cualquier modelo de implementacin, llenando los requisitos de cualquier posible plataforma de ejecucin. El modelo de configuracin de WebSA es el que mejor representa el punto de vista arquitectnico.
El modelo de configuracin
El modelo de configuracin WebSA define la arquitectura de una aplicacin web mediante los elementos que representan los diferentes componentes software y los conectores. Ms especialmente, cada elemento en el modelo representa una abstraccin de uno o ms componentes software concurriendo a la misma funcionalidad o rol.
1.
Componente Web: Representa una clase de componentes software compartiendo el mismo rol en la aplicacin web. Un ejemplo de componente web es un pgina de servidor (server page) como contenedor genrico para alguna funcionalidad del lado del servidor. Parte Web: Representa una clase de funcionalidad software que es parte de un componente web y que necesita ser representado explcitamente dentro del componente web, mientras, por ejemplo, exprese requisitos especficos para la comunicacin hacia o desde otros componentes. Un ejemplo de Parte Web es una porcin de una pgina de servidor que sirver el propsito de calcular un men. Conector Web: Abstrae la comunicacin entre los componentes web o las partes web. La conexin es establecida a travs de los Puertos Web (WebPorts), que son puntos de interaccin entre un componente web, o una parte web y sus entornos. Patrn Web: Es una abstraccin de un patrn arquitectnico que puede ser usado para expresar la composicin especfica de los elementos arquitectnicos. Un ejemplo de una entidad de un patrn web es el conocido patrn modelovista-controlador (MVC).
2.
3.
4.
El modelo de configuracin representa un diseo abstracto de un motor de ejecucin genrico capaz de interpretar los modelos funcionales de una aplicacin web. Por ejemplo, la estructura de ejecucin para las aplicaciones basadas en WebML, como las generadas por la herramienta WebRatio. El motor WebRatio fusiona la vista funcional descrita a travs del modelo de diseo WebML en un modelo de ejecucin que puede ser interpretado mediante el motor WebRatio. El enfoque WebSA abre esa transformacin y el proceso de fusin , y permite a un diseador definir su propias reglas de transformacin.
28
El modelo de integracinWebSA suministra el diseo estructural de una aplicacin web de una manera independiente a la plataforma. Este integra el modelo de subsistema y el modelo de configuracin con el punto de vista funcional de la aplicacin. La fusin y la transformacin entre las vistas funcionales y de configuracin consiste en anotar los componentes del modelo de configuracin con etiquetas de datos, de navegacin, y de los modelos de presentacin, y asignarlos despus a los patrones arquitectnicos usado en el modelo de configuracin. La sintaxis del modelo de integracin es similar a la del modelo de configuracin. Sin embargo, en vez de WebParts y WebComponents, se usan estereotipos concretos, tales como server pages, model, view, and controller, que corresponden con los elementos definidos en el modelo de configuracin. El modelo de integracin, de hecho, instancia los elementos del modelo de configuracin, y etiqueta aquellos con los nombres definidos en los modelos funcionales de la aplicacin.
El Patrn Modelo-Vista-Controlador
Es un patrn de arquitectura de software que separa los datos de una aplicacin, la interfaz de usuario, y la lgica de negocio en tres componentes distintos. El patrn de llamada y retorno MVC (segn CMU), se ve frecuentemente en aplicaciones web, donde la vista es la pgina HTML y el cdigo que provee de datos dinmicos a la pgina. El modelo es el Sistema de Gestin de Base de Datos y la Lgica de negocio, y el controlador es el responsable de recibir los eventos de entrada desde la vista.
Modelo: Este componente es la representacin especfica de la informacin con la cual el sistema opera. En resumen, el modelo se limita a lo relativo de la vista y su controlador facilitando las presentaciones visuales complejas. El sistema tambin puede operar con ms datos no relativos a la presentacin, haciendo uso integrado de otras lgicas de negocio y de datos afines con el sistema modelado. Vista: Este componente presenta el modelo en un formato adecuado para interactuar, usualmente la interfaz de usuario. Controlador: Este componente responde a eventos, usualmente acciones del usuario, e invoca peticiones al modelo y, probablemente, a la vista.
Algunos ejemplos de implementacion de MVC son Rails(Ruby), Structs, Spring(Java), CakePHP, Kumbia, Symfony(PHP), TurboGears,Django(Python) ... etc.
8. Extensiones enriquecidas para aplicaciones web

Las Aplicaciones de Internet Enriquecidas (RIA) se tratan de una clase adicional de aplicaciones ms interactivas y sensibles. RIAs han sido concebidas primero por Adobe en la introduccin de productos para multimedia de creacin, como Flash. Recientemente con la introduccin de AJAX, la mayora de las aplicaciones Web 2.0, especialmente las conocidas Facebook o Google Desktop, se acercan a funcionalidades interactivas, similares a aquellas proporcionadas por la aplicaciones de escritorio. Las siguientes funciones caracterizan a RIA:
29
Comportamientos sofisticados de interfaz, como drag&drop (arrastrar y soltar), animaciones, sincronizacin multimedia. Mecanismos para minimizar las transferencias de datos cliente-servidor moviendo de la interaccin y las capas de presentacin del servidor al cliente. Almacenamiento de datos en ambos lados, cliente y servidor. Procesamiento de datos. (ejemplo, la creacin de nuevos elementos de datos o el filtrado de datos) ejectado en ambos lados, cliente y servidor.
Para hacer frente a las caractersticas anteriores, los mtodos de diseo para aplicaciones web tradicionales requieren algunas extensiones, para soportar especialmente el modelado de los clculos del cliente y del servidor y su sincronizacin. En la siguiente tabla se resumen las nuevas primitivas conceptuales introducidas en diferentes niveles y una pequea descripcin.
30
8.1.
Extensin WebML
WebML introduce la distincin entre los objetos del cliente y los objetos del servidor. Adems, se introduce el concepto de persistencia de objetos de datos, que permite la distincin entre los objetos permanentes y temporales. Las extensiones ms significativas del modelo de datos estn relacionadas con la representacin de los objetos temporales del lado del cliente y su asociacin con los objetos persistentes del lado del servidor. El modelo de hipertexto extendido a continuacin ofrece nuevos elementos de modelado para especificar unidades y pginas para ser calculadas en el cliente.
8.2.
Extensin ADRIA
ADRIA propone una extensin del diseo de anlisis orientado a objetos con modelos de tareas y espacios de interaccin para modelar caracteristicas RIA como los clculos del cliente y la sincronizacin entre los objetos del servidor y los del cliente.
8.3.
El mtodo RUX
RUX es un mtodo que aborda de forma especfica el diseo de mltiples dispositivos y de las interfaces Web interactivas multimedia. Se ha concebido de forma independiente de los mtodos de diseo conocidos para aplicaciones Web, pero, como lo demuestra su integracin con WebML y UWE, puede ser fcilmente conectado a cualquier otro mtodo modelando los datos de aplicacin y la lgica de negocio. RUX cuenta con un proceso de tres pasos de refinamiento para el diseo de interfaces de usuario enriquecidas:
1)
De forma similar a otros mtodos, el diseo de la interfaz abstracta inicia el proceso con una especificacin de alto nivel que es independiente de cualquier tipo de detalle espacial, de comportamiento o de look and feel (apariencia). Esta etapa de diseo aprovecha los elementos como los conectores (estableciendo las relaciones entre los objetos de interfaz y los objetos de datos en el modelo de datos), los medios de comunicacin (que denotan fragmentos de informacin independientes de los dispositivos, que pueden ser renderizados a travs de diferentes tipos de medios de comunicacin), y vistas (representando grupos de medios de comunicacin), en un camino que recuerda el modelado de AVD OOHDM. El diseo concreto de interfaces es todava independiente de la plataforma pero especfico de un dispositivo o un grupo de dispositivos. Se centra en aspectos espaciales, temporales y de interaccin de los objetos de la interfaz. El diseo de la interfaz final contiene todo los detalles necesarios para producir el cdigo de la interfaz de usuario dirigidos a la plataforma de implementacin seleccionada (por ejemplo, FLEX, AJAX, etc) y a los dispositivos del cliente.
2)
3)
31
El mtodo es conforme al paradigma MDA (apartado 8), porque usa las reglas de transformacin para transformar el modelo abstracto inicial en el diseo de interfaz concreto, y para convertir este modelo intermedio en el diseo de la interfaz final.
8.4.
OOH4RIA
OOH4RIA es una extensin del modelo de diseo OOHDM dirigido por modelos, que tiene por objetivo apoyar el desarrollo de los RIAs. Se compone de dos nuevos modelos, el modelo de presentacin y el modelo orquestacional, que complementa los modelos existentes OO-H para el diseo del contenido de la aplicacin (modelo de dominio) y navegacin (diagrama de acceso de navegacin). El modelo de presentacin es especficamente definido para el Google Web Toolkit, capturando sus diferentes widgets. Los widgets son bien elementos bsicos de la GUI (por ejemplo, un botn), o bien widgets complejos (por ejemplo, un grid). Las capturas de pantalla pueden ser usadas para especificar la disposicin espacial de los widgets que sern renderizados juntos sobre la pantalla. Una captura de pantalla por lo tanto acta como un contenedor de widgets. Una vez el modelo de presentacin ha sido definido, el modelo de orquestacin captura la interaccin entre los widgets y el resto del sistema, la navegacin entre las capturas de pantalla y la forma en que los widgets reaccionan a las acciones de los usuarios. Los modelos OOH4RIA, as como cualquier otro modelo OO-H, son especificados en UML por medio de metamodelos MOF. Esta caracterstica soporta soporta la generacin semiautomtica de cdigo de aplicacin basada en los modelos de transformacin, tanto para los componentes de aplicacin del cliente como los del servidor.
9. Ingeniera dirigida por modelos (MDE) e ingeniera web

La ingeniera dirigida por modelos (MDE) hace referencia al uso sistemtico de modelos, como los elementos principales en la ingeniera de software, durante el ciclo de vida completo del proyecto. Los ingenieros de diseo Web capturan las diferentes preocupaciones en diferentes modelos especialmente definidos para su propsito particular: los requisitos, los datos, la navegacin (incluyendo tambin la funcionalidad), y los modelos de presentacin. De esta forma el diseador puede concentrarse en un diseo particular de preocupacin, reduciendo la complejidad de disear una aplicacin web de gran tamao. Es decir que bsicamente en esta forma de ingeniera los modelos son especificados y gradualmente redefinidos. La iniciativa de ingeniera dirigida por modelos ms conocida es la Arquitectura dirigida por modelos (MDA Model-DrivenArchitecture), iniciada por el Grupo de Gestin de Objetos (OMG, Object Management Group). Se basa en los estndares de OMG, principalmente en el Lenguaje de Modelado Unificado (UML), para modelar propsitos, MetaObjectFacility (MOF) como especificacin de metamodelado y Query/View/Transformation (QVT) para los propsitos de transformacin. MDA se compone de tres tipos de modelos, dependiendo del punto de vista especifico del sistema:
32
Computational-independentModel (CIM): se centra en los requisitos y representa el nivel ms alto del modelo de negocio. Usa un lenguaje para modelar procesos de negocios que no es UML, aunque ste puede ser derivado perfectamente utilizando MOF. Platform-independentModel (PIM): Representa el modelo de procesos de negocio que va a ser implementado. Comnmente se usa UML o un derivado de l para describir el PIM. El PIM modela los procesos y la estructura del sistema, sin hacer ninguna referencia a la plataforma en la que ser desplegada la aplicacin. Ignora los sistemas operativos, los lenguajes de programacin, el hardware y la topologa de red. Platform-specificModel (PSM): Es usado para aadir necesariamente detalles especficos de implementacin como objetivo de las plataformas de implementacin. Es decir, tiene que lidiar precisamente con los sistemas operativos, los lenguajes de programacin, las plataformas (CORBA, .NET, Java EE),etc.
El modelo de cdigo representa el cdigo desplegable normalmente en un lenguaje de programacin de alto nivel, como, Java, C#, C++, VB, JSP y otros. Idealmente el modelo de cdigo est listo para compilar y no debera requerir la intervencin humana; el despliegue de la aplicacin podra ser automatizado.
Ilustracin 9:Un ejemplo de modelo MDA y sus relaciones.
Las transformaciones definidas entre los diferentes modelos permiten convertir (en parte) un modelo en otro. Para ilustrar el paradigma dirigido por modelos en el contexto de la ingeniera de las aplicaciones web, vamos a mostrar los principales ingredientes de UWE, un mtodo de ingeniera web basado en los estndares OMG, adherido al paradigma MDA.
33
El proceso de desarrollo UWE consiste en el modelado funcional, arquitectnico y de negocio, como un conjunto de transformaciones de modelo. Como tal, un conjunto de modelos es creado, perteneciendo cada uno a los puntos de vista de MDA:
Durante el modelado del proceso de negocio, el diseador web describe los requisitos de contenido, los requisitos funcionales en funcin de la necesidades de navegacin y los procesos de negocio, y los escenarios de interaccin para los diferentes grupos de usuarios. Para ello, UWE propone el uso de diagramas de casos de uso, posiblemente mejorado con los diagramas de actividad UML. Estos modelos se adhieren a MOF compatible con el metamodeloWebRE, y corresponden a CIM en el paradigma MDA. Durante el modelado funcional, el diseador describe el contenido, la funcionalidad, la navegacin y la presentacin. UWE aplica la misma separacin describiendo los diferentes modelos por funcionalidad, contenido, navegacin y presentacin. El primero utiliza diagramas de actividad UML como herramienta de modelado; todos los dems usan diagramas de clase UML, extendido con algunos elementos web especficos, que son definidos en un perfil UWE. Para el modelado arquitectnico, UWE se basa en WebSA, descrito como un MOF compatible con el metamodelo UML. Una vez estos modelos han sido creados, UWE propone un paso intermedio para fusionarlos en el denominado bigpicturemodel, tpicamente logrado mediante la aplicacin de transformaciones de modelos. Todos los modelos mencionados corresponden con PIM en el paradigma MDA. Para el modelado arquitectnico, se describen enfoques alternativos. Un enfoque consiste en la adicin (posiblemente mltiple) de los detalles arquitectnicos lo ms pronto posible, complementando los modelos funcionales a nivel PIM. El modelo arquitectnico podra ser integrado con el bigpicturemodel,obteniendo el modelo integrado, tambin situado a nivel del PIM. Una tercera propuesta consistira en la incorporacin de los detalles arquitectnicos directamente dentro del proceso final de generacin, obteniendo la implementacin de la plataforma especfica. En ese caso, los detalles arquitectnicos estn (implicitamente) situados entre el nivel PIM y el PSM.
Todos los modelos UWE estn descritos en el metamodelo UWE, definido usando MOF como una extensin del metamodelo UML. El metamodelo UWE tambin est asignado a un perfl UML de dominio especfico, con notacin propietaria para los elementos web especficos.
10.
Modelos de hipertexto
Los modelos de hipertexto son una perspectiva histrica en la ingeniera Web de aplicacin cuyo origen est en los modelos tericos de hipertexto. Varios de los mtodos de diseo (OOHDM, WebML, UWE...) se basan directa o indirectamente en ello. La web en s misma, como se haba concebido por Tim Berners-Lee y Robert Cailliau, tuvo su inspiracin en los modelos de hipertexto. Los modelos de hipertexto fueron introducidos a principios de los 90 para proporcionar descripciones sin ambigedad y sistemticas de la estructura offline (es decir, no publicadas en la web) de los sistemas de hipertexto. El objetivo fue investigar cuestiones tales como la Ana Beln Peinado Zamora
34
interoperabilidad entre los diferentes sistemas, y la integracin de la funcionalidad de hipertexto dentro de los sistemas de escritorio. Basado en sus principales contribuciones, los modelos propuestos pueden dividirse en modelos hiperbasey modelos de capas hipermedia, el primero centrado en la organizacin de los datos de hipervnculos, el segundo proporcionando una arquitectura de referencia para los sistemas hipermedia.
10.1.
Modelos de hiperbase
Fundamentada en la investigacin sobre los modelos de datos conceptuales, los modelos hiperbase fueron propuestos para especificar la estructura de los datos (hiper)vinculados y las operaciones para la manipulacin y la gestin de datos dentro de las redes de hipertexto. Se basan en la idea de nodos representando fragmentos de informacin y enlaces representando interconexiones entre la informacin. Un modelo hiperbase pionero fue HAM (Modelo abstracto de hipermedia). Usando grafos para definir una estructura nodo-enlace, este modelo investig y resolvi algunas cuestiones clave, como la especificacin de las historias, el uso de filtros basados en consultas directas (precursores de la funcin de bsqueda muy comn en las aplicaciones web actuales) para complementar el acceso navegacional, y la implementacin del control de acceso. Por un lado este modelo era sencillo e intuitivo, pero por otro lado la teora de grafos mostraba algunas limitaciones, por ejemplo, en apoyar el intercambio de informacin entre diferentes nodos, y la definicin de los objetos complejos. Por esta razn, se plantearon nuevos modelos alternativos. En 1989, Tompa introdujo un nuevo formalismo basado en los hipergrafos. La contribucin ms relevante fue la distincin entre contenido (la informacin) y estructura (los nodos). Tambin introdujo la definicin de enlaces donde tanto el origen como el objetivo podan ser un grupo de nodos, no simplemente nodos nicos como se impona mediante el mtodo basado en grafos. De forma similar, el Modelo Trellis sugera la separacin entre la estructura de hipertexto y el contenido de informacin. Su contribucin ms relevante fue sin embargo la especificacin de la semntica de navegacin. Las redes Petri fueron usadas para modelar las rutas actuales de navegacin a travs de los nodos, tanto atmicos como compuestos. Estos y otros modelos inspiraron los primeros modelos hipermedia, tales como HypermediaDesignModel (HDM), y su versin orientada a objetos, OOHDM.
10.2.
Modelos de capas hipermedia
El modelo de referencia Dexteres uno de los ejemplos ms conocidos, probablemente el modelo ms influyente. Propuso una arquitectura de referencia proporcionando un vocabulario comn para la comparacin de diferentes sistemas y modelos de hipertexto. Tambin tena por objetivo sentar las bases para el desarrollo de estndares de interoperabilidad. El modelo se caracteriza por tres capas:
35
Capa de almacenamiento: Es la capa central y el principal foco del modelo Dexter. Representa la red nodo-enlace de hipertexto como la base de datos compuesta por una jerarqua de componentes (es decir, nodos en una red de hipertexto) interconectados mediante enlaces. Capa de tiemo de ejecucin: est relacionada con los aspectos dinmicos de los componentes, es decir, las herramientas para acceder, ver, y manipular la estructura de la red. El modelo cubre slo los mecanismos bsicos de presentacin, capturando los esenciales para la interaccin. Capa del interior del componente trata la estructura interna y el contenido de cada componente. Esta capa no esta elaborada dentro del modelo Dexter, y se deja abierta a todos los posibles tipos de datos y estructuras que pueden ser incluidos en un nodo de hipertexto.
Ilustracin 10: Arquitectura por capas propuesta por el modelo de referencia Dexter.
La interfaz entre la capa de tiempo de ejecucin y la capa de almacenamiento es la especificacin de la presentacin. La interfaz entre la capa de almacenamiento y la capa del interior del componente es la especificacin Anchoring, relacionada con la identificacin de las localizacines del origen y el destino de los enlaces dentro del contenido del nodo. Otros modelos fueron sucesivamente propuestos para extender el modelo de Dexter. Por ejemplo, el modelo hipermedia Amsterdam perfeccionado con la habilidad de especificar la presentacion y composicin de varios tipos de informacin multimedia (especialmente secuenciales). El modelo de aplicacin de hipermedia adaptativa (AHAM) a continuacin extendi la capa de almacenamiento con la especificacin del modelo maestro y el modelo usuario. El primero sirve como base para la adaptacin y ofrece un mecanismo para modelar la estructura de las caractersticas del usuario, tales como el conocimiento, las preferencias, las metas, y otros ms. El modelo maestro especifica las reglas de adaptacin.
36
Tochtermann and Dittrich introdujeron DortmundFamily of HypermediaModels (DFHM), que generaliza algunas de las caractersticas arquitectnicas que son comnesa varios modelos de hipermedia. El objetivo del modelo era la flexibilidad, en particular el apoyo a las diferentes variaciones de los tipos de datos. Por lo tanto, podra considerarse como una familia de modelos interrelacionados, en vez de un modelo con especificaciones de tipos de datos fijados. DFHM soporta construcciones de componentes, nodos, enlaces, nodos compuestos, vistas, carpetas, yhiperdocumentos:

Un componente es una abstraccin de un tipo de medio de comunicacin concreto. Un nodo es un contenedor propio de una unidad de informacin y encapsula uno o ms componentes o nodos. Los enlaces conectan varios nodos y son adjuntados a los componentes mediante un ancla. Los enlaces pueden ser agrupados en estructuras de enlaces, que soportan la definicin de diferentes contextos de acceso. Las vistas agrupan nodos, enlaces, componentes y objetos de medios de comunicacin, e identifican contextos de acceso especficos, por ejemplo personalizados para usuarios especficos. Las carpetas tienen una semntica parecida a la de los sistemas de ficheros. Los objetos anteriores juntos forman un hiperdocumento.
11.
Relaciones en las metodologas
En las metodologas presentes a lo largo del trabajo existen muchos puntos en comn en la forma en la que se afronta el desarrollo de sistemas. Esto se debe a que algunas propuestas han surgido basndose en trabajos anteriores o asumiendo algunas de sus ideas. En el siguiente esquema se ofrece una visin de las metodologas de modelado y el orden de aparicin que han ido teniendo en el tiempo. Algunas de estas propuestas ya no se utilizan, como es el caso de HDM y RMM, que son las nicas no orientadas dentro del paradigma de la orientacin a objetos.
37
Ilustracin 11: Relaciones en las metodologas
A pesar de que las propuestas son diferentes y las ideas y formas de concebir el proceso de ingeniera web difiere de un grupo a otro, muchas propuestas han asumido ideas y experiencias de grupos y metodologas anteriores para definir sus aproximaciones. Esta relacin se muestra en la figura mediante lneas continuas dirigidas. De esta froma, si se analiza la propuesta de UWE, por ejemplo, se puede observar que tiene grandes influencias de parte de OOHDM. En otros casos la relacin se muestra ms fuerte en el sentido de que incluso parte del equipo de desarrollo de una propuesta forman parte del equipo de desarrollo de otra, o incluso,otras que incorporan una o varias fases de otras propuestas. Esta relacin viene representada por una lnea discontinua. La aparicin de HDM ha sido un hito en el entorno de las metodologas para la web. A pesar de que HDM no se utiliza, la necesidad que plantea de ofrecer nuevas vas de trabajo dentro del entorno de la hipermedia, proponiendo nuevos elementos de modelado para el trabajo con la hipermedia, result una fuente de inspiracin para muchas propuestas (OOHDM, W2000 o WebML). Otro hito destacable es OOHDM. sta, junto con HDM, son quiz las propuestas ms referenciadas en todos los trabajos. OOHDM y la idea de separacin de conceptos que propone, separando el tratamiento de lo conceptual, de la navegacin y de la interfaz, as como el uso de diagramas de clases navegacionales, son de las propuestas ms aceptadas dentro de los grupos de investigacin. De hecho propuestas como UWE, OOH o HFPM las han tomado como vlidas en sus propuestas de desarrollo.
38
12.
Referencias
Engineering Web Applications Resumen y adaptacin del captulo 5: Web ApplicationDesign SvenCasteleyn, Florian Daniel, Peter Dolog, Maristella Matera Introduccin a la ingeniera del software Jos Luis Roda Garca, Julio Brito Santana Ingeniera del software. Un enfoque prctico Roger S. Pressman, 6edicin Blog de Ingeniera de Sistemas de la Universidad Mundo Maya, Mxico[1] Metodologa HERA[2] Modelando Procesos de Negocio Web desde una perspectiva Orientada a Aspectos.[3] Roberto Rodrguez-Echeverra,Fernando Snchez, Jos M. Conejero, Javier Pedrero. HPG: A Tool for Presentation Generation in WIS[4] Bas Rutten, Peter Barna, Flavius Frasincar, Geert-Jan Houben, and Richard Vdovjak Aproximacin MDA para el desarrollo orientado a servicios de sistemas de informacin Web:Del modelo de negocio al modelo de composicin de servicios Web[5] Mara Valeria de Castro Uso de UML en aplicaciones Web: pginas y relaciones[6] Modelos y tcnicas para la especificacin y el anlisis de la navegacin en sistemas software[7] Mara Jos Escalona Cuaresma Arquitectura dirigida por modelos[8] white-paper de Valerio Adrin Anacleto WebML[9] Politecnico di Milano, Italia. Patrn Modelo-Vista-Controlador[10] Apuntes de Bases de Datos. Tema 5 Modelo relacional. Escuela Superior de Informtica de Ciudad Real, UCLM.
39

Diseño de Aplicaciones Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Diseño de Aplicaciones Web

Uploaded by

Copyright:

Available Formats

UNIVERSIDAD DE CASTILLA LA MANCHA

Diseo de aplicaciones Web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Diseo de widgets abstractos ................................................................................................. 22 Espacios de interaccin........................................................................................................... 23

Ana Beln Peinado Zamora

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

2. Conceptos bsicos de diseo y su importancia en las aplicaciones Web

Diseo de aplicaciones Web

Ilustracin 1: Las actividades en el diseo de aplicacin Web y sus dependencias.

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Ilustracin 2: Divisin estructural de un sistema

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

3. Diseo de flujo de trabajo

Diseo de aplicaciones Web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Ingeniera de integracin de la informacin

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Diseo de la estructura de sitio

Diseo de aplicaciones Web

Vistas de navegacin y contextos de navegacin

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Diseo de aplicaciones Web

Ilustracin 4: Unidades bsicas de contenido en WebML

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Ilustracin 5: Unidades bsicas de contenido en WebML.

Existen 2 tipos de enlaces:

Ilustracin 6: Enlace automtico

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Ilustracin 7: Enlace de transporte

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

La etapa de diseo de OOHDM se realiza a travs de dos modelos:

Diseo del comportamiento de navegacin

Diseo de aplicaciones Web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Interfaces y colecciones de datos

Interaccin del servicio web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Invocacin del servicio web

Desarrollo de servicios web

Ana Beln Peinado Zamora

Diseo de aplicaciones Web

Diseo de presentacin abstracta

Diseo de widgets abstractos

Ana Beln Peinado Zamora

Diseo de aplicaciones Web