Ingeniera Web Captulo 3 Dr.

Mario Rossainz Lpez

2. MTODOLOGAS DE DESARROLLO
DE APLICACIONES WEB
2.1. INTRODUCCIN

El desarrollo de aplicaciones web involucra decisiones no triviales de diseo e

implementacin que inevitablemente influyen en todo el proceso de desarrollo, afectando la
divisin de tareas. Los problemas involucrados, como el diseo del modelo del dominio y
la construccin de la interfaz de usuario, tienen requerimientos disjuntos que deben ser
tratados por separado.
El alcance de la aplicacin y el tipo de usuarios a los que estar dirigida son
consideraciones tan importantes como las tecnologas elegidas para realizar la
implementacin. As como las tecnologas pueden limitar la funcionalidad de la aplicacin,
decisiones de diseo equivocadas tambin pueden reducir su capacidad de extensin y
reusabilidad. Es por ello que el uso de una metodologa de diseo y de tecnologas que se
adapten naturalmente a sta, son de vital importancia para el desarrollo de aplicaciones
complejas.

Existen en la actualidad tecnologas ampliamente usadas para el desarrollo de aplicaciones

web, pero muchas de ellas obligan al desarrollador a mezclar aspectos conceptuales y de
presentacin. Esto sucede principalmente con aquellas tecnologas no basadas en objetos.
La eleccin de tecnologas complejas demora el proceso e incrementa los costos, pero en
ocasiones permite adecuarse a metodologas de diseo ms fcilmente. Tal es el caso de las
tecnologas orientadas a objetos, las cuales tienden a demorar el desarrollo en etapas
tempranas. El tiempo de desarrollo en la actualidad es crtico, tanto por razones de
marketing como por lmites en el presupuesto y los recursos, pero la adopcin de estas
tecnologas hace que el mantenimiento se transforme en una actividad ms simple, la
divisin en capas sea tarea natural del desarrollo y el tiempo invertido en el diseo facilite
el trabajo necesario para el resto de las actividades.

2.2. APLICACIONES WEB Y SU DESARROLLO EN CAPAS

Las aplicaciones hipermedia han evolucionado en los ltimos aos y se han concentrado
mayormente en la web. La complejidad del desarrollo ocurre a diferentes niveles: dominios
de aplicacin sofisticados (financieros, mdicos, geogrficos, etc.); la necesidad de proveer
acceso de navegacin simple a grandes cantidades de datos multimedia, y por ltimo la
aparicin de nuevos dispositivos para los cuales se deben construir interfaces web fciles de
usar. Esta complejidad en los desarrollos de software slo puede ser alcanzada mediante la
separacin de los modelos. La metodologa OOHDM (Object Oriented Hypermedia Design
Method), presentada en la siguiente seccin, ha sido utilizada para disear diferentes tipos
de aplicaciones hipermedia como galeras interactivas, presentaciones multimedia y
aplicaciones web. El xito de esta metodologa es la clara identificacin de los tres
diferentes niveles de diseo en forma independiente de la implementacin: conceptual,
navegacional y de interfaz; y aplicar las tecnologas adecuadas a cada capa en el proceso de
implementacin.

7
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

2.3. OOHDM: METODOLOGIA DE DISEO HIPERMEDIA

ORIENTADA A OBJETOS
Las metodologas tradicionales de ingeniera de software, o las metodologas para sistemas
de desarrollo de informacin, no contienen una buena abstraccin capaz de facilitar la tarea
de especificar aplicaciones hipermedia. El tamao, la complejidad y el nmero de
aplicaciones crecen en forma acelerada en la actualidad, por lo cual una metodologa de
diseo sistemtica es necesaria para disminuir la complejidad y admitir evolucin y
reusabilidad. Producir aplicaciones en las cuales el usuario pueda aprovechar el potencial
del paradigma de la navegacin de sitios web, mientras ejecuta transacciones sobre bases de
informacin, es una tarea muy difcil de lograr. En primer lugar, la navegacin posee
algunos problemas. Una estructura de navegacin robusta es una de las claves del xito en
las aplicaciones hipermedia. Si el usuario entiende dnde puede ir y cmo llegar al lugar
deseado, es una buena seal de que la aplicacin ha sido bien diseada.
Construir la interfaz de una aplicacin web es tambin una tarea compleja; no slo se
necesita especificar cules son los objetos de la interfaz que deberan ser implementados,
sino tambin la manera en la cual estos objetos interactuarn con el resto de la aplicacin.
En hipermedia existen requerimientos que deben ser satisfechos en un entorno de desarrollo
unificado (UML). Por un lado, la navegacin y el comportamiento funcional de la
aplicacin deberan ser integrados. Por otro lado, durante el proceso de diseo se debera
poder desacoplar las decisiones de diseo relacionadas con la estructura navegacional de la
aplicacin, de aquellas relacionadas con el modelo del dominio.

OOHDM propone el desarrollo de aplicaciones hipermedia a travs de un proceso

compuesto por cuatro etapas: diseo conceptual, diseo navegacional, diseo de interfaces
abstractas e implementacin.

2.3.1. DISEO CONCEPTUAL

Durante esta actividad se construye un esquema conceptual representado por los objetos del
dominio, las relaciones y colaboraciones existentes establecidas entre ellos.
En OOHDM, el esquema conceptual est construido por clases, relaciones y subsistemas.
Las clases son descritas como en los modelos orientados a objetos tradicionales. Sin
embargo, los atributos pueden ser de mltiples tipos para representar perspectivas
diferentes de las mismas entidades del mundo real. Se usa notacin extendida UML
(Lenguaje de Modelado Unificado) y tarjetas de clases y relaciones similares a las tarjetas
CRC (Clase Responsabilidad Colaboracin). El esquema de las clases consiste en un
conjunto de clases conectadas por relaciones. Los objetos son instancias de las clases. Las
clases son usadas durante el diseo navegacional para derivar nodos, y las relaciones que
son usadas para construir enlaces.

8
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

2.3.2. DISEO NAVEGACIONAL

La primera generacin de aplicaciones web fue pensada para realizar navegacin a travs
del espacio de informacin, utilizando un simple modelo de datos de hipermedia. En
OOHDM, la navegacin es considerada un paso crtico en el diseo aplicaciones. Un
modelo navegacional es construido como una vista sobre un diseo conceptual, admitiendo
la construccin de modelos diferentes de acuerdo con los diferentes perfiles de usuarios.
Cada modelo navegacional provee una vista subjetiva del diseo conceptual. El diseo de
navegacin es expresado en dos esquemas: el esquema de clases navegacionales y el
esquema de contextos navegacionales. En OOHDM existe un conjunto de tipos
predefinidos de clases navegacionales: nodos, enlaces y estructuras de acceso. La semntica
de los nodos y los enlaces son las tradicionales de las aplicaciones hipermedia, y las
estructuras de acceso, tales como ndices o recorridos guiados, representan los posibles
caminos de acceso a los nodos.
La principal estructura primitiva del espacio navegacional es la nocin de contexto
navegacional. Un contexto navegacional es un conjunto de nodos, enlaces, clases de
contextos, y otros contextos navegacionales (contextos anidados). Pueden ser definidos por
comprensin o extensin, o por enumeracin de sus miembros. Los contextos
navegacionales juegan un rol similar a las colecciones y fueron inspirados sobre el
concepto de contextos anidados. Organizan el espacio navegacional en conjuntos
convenientes que pueden ser recorridos en un orden particular y que deberan ser definidos
como caminos para ayudar al usuario a lograr la tarea deseada.
Los nodos son enriquecidos con un conjunto de clases especiales que permiten de un nodo
observar y presentar atributos (incluidos las anclas), as como mtodos (comportamiento)
cuando se navega en un particular contexto.

2.3.3. DISEO DE INTERFAZ ABSTRACTA

Una vez que las estructuras navegacionales son definidas, se deben especificar los aspectos
de interfaz. Esto significa definir la forma en la cual los objetos navegacionales pueden
aparecer, cmo los objetos de interfaz activarn la navegacin y el resto de la funcionalidad
de la aplicacin, qu transformaciones de la interfaz son pertinentes y cundo es necesario
realizarlas.
Una clara separacin entre diseo navegacional y diseo de interfaz abstracta permite
construir diferentes interfaces para el mismo modelo navegacional, dejando un alto grado
de independencia de la tecnologa de interfaz de usuario.
El aspecto de la interfaz de usuario de aplicaciones interactivas (en particular las
aplicaciones web) es un punto crtico en el desarrollo que las modernas metodologas
tienden a descuidar. En OOHDM se utiliza el diseo de interfaz abstracta para describir la
interfaz del usuario de la aplicacin de hipermedia. El modelo de interfaz ADVs (Vista de
Datos Abstracta5) especifica la organizacin y comportamiento de la interfaz, pero la
apariencia fsica real o de los atributos, y la disposicin de las propiedades de las ADVs en
la pantalla real son hechas en la fase de implementacin.

9
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

2.3.4. IMPLEMENTACION

En esta fase, el diseador debe implementar el diseo. Hasta ahora, todos los modelos
fueron construidos en forma independiente de la plataforma de implementacin; en esta
fase es tenido en cuenta el entorno particular en el cual se va a correr la aplicacin.
Al llegar a esta fase, el primer paso que debe realizar el diseador es definir los tems de
informacin que son parte del dominio del problema. Debe identificar tambin, cmo son
organizados los tems de acuerdo con el perfil del usuario y su tarea; decidir qu interfaz
debera ver y cmo debera comportarse. A fin de implementar todo en un entorno web, el
diseador debe decidir adems qu informacin debe ser almacenada.

2.4. COMPARATIVO DE METODOLOGAS

En la tabla siguiente se presenta un comparativo de distintas metodologas extradas de
parte de la bibliografa que sustenta este documento, teniendo en cuenta:

los pasos que componen el proceso

la tcnica de modelado
la representacin grfica
la notacin elegida para los modelos y
la herramienta CASE de soporte proporcionada para el desarrollo

Las metodologas comparadas son:

HDM (Hypermedia Design Method - Mtodo de Diseo Hipermedia)

RMM (Relationship Management Methodology - Metodologa de Administracin de
Relaciones)
EORM (Enhanced Object Relationship Methodology - Metodologa de Relaciones de
Objetos Mejorada)
OOHDM (Object Oriented Hypermedia Design Method - Metodologa de Diseo
Hipermedia orientada a objetos)
SOHDM (Scenario-based Object-oriented Hypermedia Design Methodology -
Metodologa de Diseo Hipermedia basada en escenarios),
WSDM (Web Site Design Method - Mtodo de Diseo de Sitios Web) y
WAE-Proceso Conallen (Web Application Extension for UML Process Conallen -
Extensin de Aplicacin Web para UML).

10
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

En la tabla siguiente se presenta un segundo comparativo, que relaciona los conceptos de

diseo de los tres niveles tpicos de diseo web: conceptual, estructural y visible. La
mayora de estos mtodos realizan una clara separacin entre el anlisis del dominio, la
especificacin de la estructura navegacional y el diseo de la interfaz de usuario.

11
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

2.5. METODOLOGIA UWE

La metodologa UWE (UML-based Web Engineering Ingeniera Web basada en UML)
presentada por Hennicker y Koch soporta el desarrollo de aplicaciones Web con un especial

12
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

inters en la sistematizacin, personalizacin y generacin semi-automtica de cdigo. Es

una metodologa iterativa e incremental orientada a objetos basada en el Lenguaje de
Modelado Unificado (UML) y en Proceso Unificado de Desarrollo de Software (PUDS).
UWE se centra en actividades de modelado tales como el anlisis de requerimientos y el
diseo conceptual, de navegacin y de presentacin complementado con modelado de
tareas y visualizacin de escenarios Web. Existe una aplicacin encargada de la generacin
semi-automtica de cdigo Web en base a los modelos de diseo generados llamada
ArgoUML.

2.5.1. CASOS DE USO PARA LA ESPECIFICACION DE REQUERIMIENTOS

Un modelo de casos de uso se utiliza para describir los requerimientos funcionales de una
aplicacin en terminos de los casos de uso. Un caso de uso UML es una unidad coherente
de funcionalidad proporcionada por la aplicacin que interacta con uno o ms actores que
estan fuera de la aplicacin. Un caso de uso describe una pieza del comportamiento de la
aplicacin sin definir su estructura interna.
En esta seccin se muestra como los requerimientos para una aplicacin Web pueden ser
especificados con un modelo de casos de uso. Como sabemos, los diagramas de casos de
uso son construidos utilizando tres elementos principales en el modelado con UML: los
casos de uso, los actores y las relaciones entre estos elementos, tales como las asociaciones
entre un actor y un caso de uso y las dependencias <<includes>> y <<extends>> entre
casos de uso.

Como un ejemplo que ilustra las tcnicas UML utilizadas en UWE, se muestra el sitio Web
de una biblioteca en lnea personalizada. Esta aplicacin de biblioteca en linea ofrece
informacin sobre las publicaciones registradas por usuarios annimos. Una publicacin
captura informacin sobre revistas, libros y proceedings. Estas publicaciones son descritas
mediante un ttulo, un nmero, una publicacin, una fecha de publicacin y un conjunto de
artculos y autores por cada artculo. Los libros consisten de exactamente un artculo cuyo
titulo es el mismo que el ttulo del libro. Adems se asocian un conjunto de palabras clave a
cada artculo y a cada publicacin.
Identificamos adems los siguientes tipos de usuarios para la aplicacin de la biblioteca en
lnea: Lectores registrados y no registrados y un administrador de la biblioteca. El lector
registrado es modelado por el inters de ste en artculos y en registrar los artculos que
visita. Este lector registrado puede marcar artculos de especial inters para l. Una lista
personal de palabras clave para cada lector es administrado por la aplicacin. El sistema
realiza la actualizacin del modelo de usuario acorde con las observaciones en el
comportamiento de los lectores (limitado a los artculos marcados o visitados
frecuentemente). Esta lista puede incluir tanto palabras clave positivas como negativas. Las
palabras clave negativas son utilizadas para ocultar publicaciones irrelevantes.

13
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

El modelo de casos de uso de la aplicacin de la biblioteca en lnea es mostrado

parcialmente en la figura 2. Para entrar en detalle en estos casos de uso se puede utilizar
una forma textual o utilizar los diagramas de actividades para especificar la secuencia de
acciones que sern realizadas por los actores que intervienen en estos casos de uso.

2.5.2. DIAGRAMA DE CLASES PARA MODELADO CONCEPTUAL

Un diagrama de clases en UML es utilizado para representar grficamente un modelo

conceptual como una vista esttica que muestra una coleccin de elementos estticos en el
dominio de la aplicacin. Siguiendo la metodologa OOHDM, UWE construye un modelo
conceptual de una aplicacin Web que ignora tanto como sea posible aspectos de
navegacin, presentacin e interaccin. Estos aspectos son pospuestos para los pasos
navegacional y presentacional del diseo.
Los elementos de modelado principales que se utilizan en el modelo conceptual son: las
clases y las asociaciones. Sin embargo, el poder de los diagramas de clases es dado por una
variedad de caractersticas adicionales que pueden ser utilizadas semnticamente dentro de
esos diagramas. Ejemplos de estas caractersticas son las asociaciones y roles,
multiplicidades y diferentes formas de asociacin soportadas por UML: agregacin,
herencia, composicin y clases de asociacin, las cuales son representadas grficamente por
la notacin UML.

14
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

En base a los casos de uso de la seccin previa y en base a la descripcin a detalle de estos
casos de uso, se construye el modelo conceptual. El modelo conceptual incluye los objetos
que intervienen en las actividades tpicas de los usuarios sobre la aplicacin. La figura 3,
muestra el modelo conceptual del ejemplo de la biblioteca en lnea. El ejemplo esta
limitado a datos y funcionalidad para cada clase y otros aspectos pueden ser incluidos
mediante un proceso iterativo e incremental.

2.5.3. DIAGRAMA DE CLASES ESTEREOTIPADAS PARA EL MODELADO DE

NAVEGACION Y PRESENTACION

El modelado de navegacin y presentacin no es exclusivo de las aplicaciones Web, sin

embargo los conceptos de navegacin y presentacin son ms importantes en el desarrollo
de software con ncleo en la Web. Adicionalmente, la separacin del modelado conceptual,
de navegacin y presentacin en distintos aspectos de las aplicaciones Web, incrementan la
independencia y posibilidades de reuso.

2.5.3.1. MODELOS DE NAVEGACION

El modelado de navegacin de aplicaciones Web comprende la construccin de dos

modelos de navegacin: El modelo del espacio de navegacin y el modelo de la estructura
de navegacin. Este modelado especifica qu objetos pueden ser visitados por la
navegacin sobre la aplicacin. Este es un modelado en el nivel de anlisis. Los modelos de
navegacin son representados mediante diagramas de clases estereotipadas.
El modelo del espacio de navegacin incluye las clases de aquellos objetos que pueden ser
visitados por la navegacin sobre la aplicacin Web. UWE proporciona un conjunto de
caminos y mecanismos semi-automticos para modelar la navegacin de un aplicacin.

15
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

La figura 4 muestra el modelo del espacio de navegacin para la aplicacin de la biblioteca

en lnea. Los elementos principales de modelado son las clases estereotipadas y la
navegabilidad dirigida que es definida como una asociacin estereotipada. Hay que hacer
notar que slo aquellas clases del modelo conceptual que son relevantes para la navegacin
son incluidas en el modelo de navegacin. La informacin de las clases omitidas pueden ser
los atributos de algunas de las clases de navegacin (por ejemplo el atributo Publisher de la
clase de navegacin Publication.

El modelo de la estructura de navegacin es construido sobre la base del modelo del

espacio de la navegacin y es considerado como un paso de refinamiento en el proceso de
diseo de UWE. UWE proporciona un conjunto de lineamientos y mecanismos semi-
automticos para refinar este proceso que consiste en refinar el modelo del espacio de
navegacin mediante indices, lneas dirigidas, consultas y mens.

16
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

Las clases estereotipadas para el acceso de elementos son <<index>>, <<guided tour>>,
<<query>> y <<men>>. La figura 5 muestra el diagrama de clases estereotipadas que
representa el modelo de la estructura de navegacin del ejemplo.

2.5.3.2. MODELO DE PRESENTACION

El modelo de presentacin es representado por un diagrama de clases que tiene una forma
particular. Este es un diagrama de clases utilizando la notacin de composicin UML para
clases. Es decir, este diagrama es representado por medio de un grfico anidado de los
smbolos de las partes dentro del smbolo de la composicin. Este tipo de representaciones
es apropiado para modelar las interfaces grficas, as como el ordenamiento espacial y las
dimensiones relativas de la informacin que no puede ser manejada mediante herramientas
case estndar.

El modelo de presentacin describe donde y como los objetos de navegacin y las

primitivas de acceso son presentadas al usuario. El diseo de la presentacin soporta la

17
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

transformacin del modelo de la estructura de navegacin en un conjunto de modelos que

muestran la localizacin esttica de los objetos visibles al usuario, es decir, se tiene una
representacin esquemtica de esos objetos (sketches de las pginas). La figura 6 muestra
un sketch de presentacin para la clase de navegacin publication.

El conjunto de elementos de modelado estereotipados propuesto por UWE para describer el

modelo de presentacin consiste de: <<text>>, <<form>>, <<button>>, <<image>>,
<<audio>, <<anchor>>, <<collection>> y <<anchored collection>>.

Las clases collection y anchored collection proporcionan una conveniente representacin de

las composiciones frecuentemente usadas. Anchor y form son elementos interactivos
bsicos. Un Anchor es asociado con un link para navegacin.

2.5.4. DIAGRAMAS DE ESTADOS Y DE INTERACCION PARA

MODELAR ESCENARIOS WEB
Para modelar los aspectos dinmicos de una aplicacin Web, UML proporciona diagramas
de transicin de estados y de interaccin. Un diagrama de transicin de estados muestra una
secuencia de estados en que un objeto puede estar durante su ciclo de vida, junto con

18
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

acciones de respuesta, eventos y condiciones de guardas que provocan las transiciones entre
estados.
En UWE los diagramas de transicin de estados se utilizan para visualizar escenarios de
navegacin. Los detalles del modelo de la estructura de navegacin especifican los eventos
que provocan las transiciones, definiendo condiciones de seguridad, haciendo explcitas las
acciones a realizarse. La figura 7 muestra el diagrama de transicin de estados para la
interface de usuario de la aplicacin de la biblioteca en lnea. Los estados son nombrados
despus de las clases de presentacin que son mostradas en la interface de usuario.
Un diagrama de secuencia UML muestra la interaccin del objeto en orden temporal. Este
diagrama presenta los objetos que participan en la interaccin y en la secuencia de mensajes
entre ellos.
El propsito de UWE es usar los diagramas de secuencia para presentar los flujos, es decir,
los aspectos dinmicos de la presentacin, tales como interacciones entre ventanas y
frames.

El tipo de diagrama elegido para este diseo de la representacin de escenarios Web

depende del nivel de granularidad elegido.

19
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

2.5.5. DIAGRAMAS DE ACTIVIDAD PARA MODELAR TAREAS

El concepto de tarea (task) viene del campo de la Interaccin Humano-Computadora (HCI).
Una tarea esta compuesta de una o ms subtareas o acciones que un usuario puede llevar a
cabo para cubrir una meta. Una meta representa un cambio en el estado del sistema y puede
ser realizado por la formulacin de un plan compuesto de tareas que se llevan a cabo
(acciones como tareas primitivas que no tienen estructura).

Aqu, queremos utilizar el concepto de tarea en el sentido de considerar aquellas tareas

realizadas por el usuario o por el sistema. Para modelar las tareas se han propuesto
diferentes notaciones en UML: clases estereotipadas, casos de uso, diagramas de
actividades, diagramas de transicin de estados, etc.

UWE utiliza diagramas de actividades para modelar una tarea siendo los elementos de
modelado para tareas los propios de los diagramas de actividades: actividades, transiciones,
rombos, etc. Los diagramas de actividades son considerados como mapas de caminos del
comportamiento funcional de un sistema. La figura 8 muestra el modelo de tarea para la
tarea: borrado de publicacin.

20
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

2.5.6. DIAGRAMA DE COMPONENTES PARA DOCUMENTAR LA

DISTRIBUCION DE LOS COMPONENTES DE UN APLICACIN
WEB
UWE utiliza los diagramas de componentes para documentar la distribucin de los
componentes de una aplicacin Web. Los elementos principales en los diagramas de
componentes UML son nodos que son dibujados grficamente por cubos. Un nodo es un
elemento fsico que existe en tiempo de ejecucin y representa una fuente computacional.
Un nodo puede contener objetos y componentes que residen dentro de una fuente
computacional. Un componente en UML es una parte fsica y reemplazable de un sistema
que realiza y proporciona la realizacin de un conjunto de interfaces y es dibujado como un
rectngulo con dos rectngulos ms pequeos que sobresalen por uno de sus lados.

La figura 9 muestra una parte del diagrama de componentes para el ejemplo de la

aplicacin Web de la biblioteca en lnea. Este diagrama se centra en el elemento
Publication y en las relaciones de dependencia entre sus componentes.
El elemento Publication del modelo conceptual puede ser realizado por un componente
Enterprise Java Bean (EJB) que reside dentro del nodo Servidor de la aplicacin. El modelo
de presentacin del elemento Publication es realizado por un componente JSP que reside en
el nodo del Servidor Web. Este utiliza el componente EJB denotado con la dependencia

21
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

<<uses>>. Finalmente dentro del nodo del Navegador Web, el componente de la pgina
del cliente para el elemento Publication es desplegado al usuario.

2.5.7. NOTACIONES GRAFICAS DE LA METODOLOGIA UWE

22
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

23
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez

24