Beruflich Dokumente
Kultur Dokumente
2. MTODOLOGAS DE DESARROLLO
DE APLICACIONES WEB
2.1. INTRODUCCIN
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
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
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.
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.
10
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
11
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
12
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
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
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.
15
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
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.
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.
17
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
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.
19
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
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
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.
22
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
23
Ingeniera Web Captulo 3 Dr. Mario Rossainz Lpez
24