Modelado de aplicaciones Web mediante UML

Inmaculada Blanco Sierra

Miguel Angel Almudver Galn
.
Facultad de Informtica - Universidad Politcnica de Valencia

Las Aplicaciones Web ya forman parte de nuestro qu hacer

cotidiano. Si hasta hace poco tiempo slo se esperaba el recoger
cierta cantidad de informacin de una pgina Web, hoy no se concibe
el no poder interactuar con ella. Se sigue buscando la informacin,
pero slo aquella que el usuario considera interesante.

El desarrollo de Internet, el comercio electrnico y las

tecnologas de la informacin orientan el futuro de las aplicaciones a
un entorno global, donde cualquier usuario al que se le permita el
acceso pueda interactuar con el entorno. Dicho entorno se deber
comportar en funcin de lo que exija el usuario, lo que permitir a
una Aplicacin Web distinguirse de una simple pgina o incluso de
una pgina dinmica.

Y para alcanzar el objetivo propuesto sobre estas lneas, es

necesario un modelado capaz de recoger y mostrar todas las
estructuras, formas y componentes presentes en el entorno Web. A
continuacin vamos a ver como hacerlo...

DESARROLLO DE APLICACIONES WEB

Introduccin

Gracias al desarrollo de nuevas herramientas y tecnologas, las

Aplicaciones Web son cada vez ms populares. La facilidad de su
desarrollo provoca, a veces, la ausencia de un anlisis y diseo
correctos, pero estn consiguiendo reemplazar a las aplicaciones
software tradicionales. Lo que aqu vamos a ver es una presentacin
genrica del funcionamiento y estructura de dichas aplicaciones.
En este documento nos vamos a encontrar con tres partes bien
definidas para el desarrollo de una aplicacin Web. En primer lugar,
veremos la arquitectura de dichas aplicaciones. A continuacin
veremos el porqu de utilizar UML para su modelado. Y finalmente
haremos un recorrido por los distintos elementos que las componen y
sus posibilidades de evolucin en un futuro prximo.

1
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia
Arquitectura de una Aplicacin Web
Sitios Web

Una Aplicacin Web es un sitio donde la entrada de datos afecta

al estado de la lgica. Es decir, una Aplicacin Web se sirve de un
sitio o pgina como entrada a una verdadera aplicacin. Veamos

primero
la

estructura de un sitio Web :

Figura 1: A la izquierda tenemos la arquitectura de un sitio Web

tradicional, y a la derecha uno dinmico.

Aplicaciones Web

A veces la distincin entre una Aplicacin Web y un sitio Web es

muy sutil por ejemplo, un buscador forma parte de un sitio Web,
mientras que si se acepta informacin para registrar a un usuario, se
trata de una Aplicacin Web -. De todas maneras, lo que s es
evidente es que la arquitectura global de una Aplicacin Web es
idntica a la de un sitio Web, aunque su desarrollo sea ms
elaborado.

Pginas

Las pginas son el componente fundamental de las aplicaciones

Web, y se muestran a travs de los navegadores que hacen de
contenedores del interfaz de usuario. Estas pginas son el resultado
de la combinacin de pginas HTML junto con scripts de pginas
dinmicas. El nuevo formato obtenido como mezcla de los dos
anteriores ser lo que mostrar el navegador.

Los scripts pueden contener tanto variables como procedimientos

y funciones, cuyo objetivo final es actuar sobre el servidor de manera
que:
- Se actualice el estado de la lgica del servidor.
- Se creen las nuevas pginas que debe mostrar el navegador.

Una cosa importante a tener en cuenta es que el servidor no es el

nico elemento capaz de ejecutar scripts. Un navegador tambin es

2
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia
capaz de hacerlo, aunque presenta el inconveniente de que no tiene
acceso al servidor, con lo que su trabajo se limita al control de datos y
asistencia en la navegacin. En general, los procedimientos del lado
del servidor son procedurales, mientras que los del lado del
navegador o cliente son dirigidos por eventos.

Formas

Las formas ms comunes de introducir informacin son las

reas de texto, listas de seleccin o botones de radio, por ejemplo.
Cada uno de estos elementos tiene un nombre o ID asociado a una
pgina de accin, y cuando el usuario introduce la informacin, el
servidor interpreta o ejecuta el cdigo contenido en dicha pgina. El
resultado, la informacin introducida por el usuario puede ser
procesada.

Componentes

Hay Aplicaciones Web que se sirven de una tercera capa de

componentes, entre el interfaz de usuario y el sistema permanente,
que suele estar formado por objetos compilados que funcionan en un
servidor de aplicaciones. Esta capa slo se utiliza cuando la lgica
necesaria para controlar la aplicacin es muy extensa y el tiempo es
un factor crtico en las decisiones de diseo.

Las pginas formateadas en HTML tambin pueden tener

referencias a componentes en la mquina del cliente, como son los
JavaApplets o los controles ActiveX. Su presencia supone la extensin
de la Aplicacin Web al cliente y nuevas posibilidades en cuanto a la
interfaz con el usuario, puesto que aumentan la interaccin que
pueden ofrecer las pginas preformateadas.

Frames

Las capacidades de la interfaz de usuario pueden ser

incrementadas con el uso de frames, que permiten tener varias
pginas abiertas y activas al mismo tiempo.
Figura 2 : estructura de una pgina Web

3
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia
Otros Componentes

Con los componentes ya mencionados, se puede desarrollar una

buena Aplicacin Web, aunque otros componentes ms recientes
pueden afectar su arquitectura, como son el caso de XML y los
scriptlets. Estos ltimos tienen el inconveniente de que slo
funcionan en navegadores Microsoft.

Modelado

Una de las metodologas o notacin empleadas en la

modelizacin de sistemas Web es la Metodologa Relacional ( RMM,
Relationship Management Methodology ), es una metodologa para el
diseo, construccin y mantenimiento de sistemas web para intranets
e internet. Su principal objetivo es la reduccin de costes de
mantenimiento de sitios Web dinmicos dirigidos por la base de
datos.

Pero esta metodologa falla a la hora de construir aplicaciones

Web, en las que la lgica de negocio es la parte central, ya que no las
cubre adecuadamente.
Las aplicaciones Web pueden ser usadas como mecanismo servidor
para aplicaciones distribuidas, y adems pueden crear mltiples
instancias del mismo browser y frames en la parte cliente que deben
establecer y mantener su propio mecanismo de comunicacin. Todo
esto debe ser modelizado tambin y RMM no es capaz de hacerlo.

La eleccin de una notacin debe estar en funcin de la

necesidad de modelizar la parte de las capas de la parte del servidor.
Con la admisin de UML como notacin para la modelizacin cada vez
ms sistemas estn siendo modelizados con l ya que es capaz de
expresar la lgica del sistema en los componentes Web, a lo largo del
resto de la aplicacin.

Otro de los modelos importantes ADM ( analisis/desing Model)

representa alguna dificultades cuando trata de modelizar pginas
Web y el cdigo ejecutable asociado a stas relacionndolo con el
resto de elementos en el modelo. Decidir cmo modelizar
,determinar el grado de abstraccin y el detalle que queremos
alcanzar es crtico para los usuarios de ese modelo.

En UML, los links representaran el path de navegacin desde

una pgina a otra. Extendiendo esta forma de pensar las pginas
seran clases en la vista lgica del modelo, por lo tanto los scripsts de
las pgina seran operaciones ( mtodos ) de la clase, y las variables
de estos scripts cuyo mbito sea la pgina, seran los atributos, pero
esto no nos ayuda cuando tenemos que saber que operaciones,

4
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia
atributos,etc estn activos en el servidor, por lo tanto es mejor
modelizarlas como componentes del sistema.

Un sistema puede ser modelado de diferentes maneras, y todas

ellas consistentes. Sin embargo, asumiremos que el centro de dicho
sistema ser una pgina. Esto levanta las siguientes dudas: una
pgina puede ser modelada como un objeto, pero cules son sus
atributos ?. Pues bien, deben de ser aquellos elementos que afecten
al comportamiento del sistema, es decir, los scripts, por ejemplo. Y
esto suscita un nuevo desafo : el cmo modelar dicho sistema
cuando tanto el servidor como el cliente ejecutan scripts, puesto que
compartir atributos o mtodos entre ambos puede llegar a ser muy
confuso.

Extensiones del modelado

UML no es perfecto para todas las situaciones, y es por ello que

se definen mecanismos de extensin como las Etiquetas, Estereotipos
y Restricciones. Para resolver el problema presentado anteriormente,
se podran definir los Estereotipos <<mtodo de cliente >> y <<
mtodo de servidor >>, que nos permitiran hacer una distincin
adecuada en el diseo. An as, al representar las relaciones no se
garantiza que slo sean vlidas desde el lado del servidor o el del
cliente

Estereotipos de pgina

Una mejor solucin al modelado de pginas pasa por la creacin

de dos clases con estereotipo:
Pgina de servidor
Pgina de cliente

Su implementacin puede aparecer en el mismo fichero o

componente, pero la distincin es clara. Mientras la pgina de
servidor se ocupa del acceso a los componentes, scripts, datos y, u
otros elementos que se encuentren en la parte del servidor, la pgina
del cliente se ocupa de los Applets de Java, los controles ActiveX y, o
el formateado de la pgina, por ejemplo.

Veamos los estereotipos en detalle.

1. Hay una relacin importante entre ambas pginas, definida
unidireccional y descrita bajo el estereotipo <<construye>>. Y
es que una pgina de servidor se encarga de construir una de
cliente. Incluso podra darse el caso de que una pgina de
servidor construya varias de las pginas cliente.
2. Otro estereotipo es el definido como <<redirige>>.
Dependiendo de la entrada y de las exigencias de procesado,
5
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia
 una pgina de servidor puede redirigirse hacia otras que
cumplan una labor ms especfica. Redirigir toma en este caso
el significado de delegar.
3. <<presenciar>>. Es algo ms sutil que los anteriores y se
sumara a un diagrama que ya conste de un estereotipo
<<construye>>. Una pgina de servidor construye una de
cliente y, bajo ambas, existe un elemento Web que se da
cuenta, que presencia, al menos una de ambas pginas. Un
componente Web presenciara ambas pginas a la vez.
4. Una relacin que no se puede olvidar viene definida por el
estereotipo <<enlace>>. Y sabiendo lo que significa un
hiperenlace, est claro que slo tiene sentido definirlo desde
una pgina cliente hacia una pgina servidor que generar
una nueva pgina cliente -, o desde la pgina cliente hacia otra
de su misma clase. Si dicho enlace contiene parmetros, se
modelan fuera de la relacin.

Componentes

Los componentes, presentados como interfaces disponibles

para los distintos objetos - por ejemplo, DLLs, controles ActiveX... -, se
identifican como <<componente servidor>> o <<componente
cliente>>, para poder diferenciar quin puede servirse de ellos.

Formas

El significado de una forma se puede resumir diciendo que una

pgina cliente contiene formas. Es decir, las formas existen porque
hay una serie de atributos que no tienen significado a lo largo de toda
la pgina cliente, y porque adems desde dicha pgina queremos
llegar a destinos diferentes. De aqu se puede deducir que una forma
no tenga mtodos y que los mtodos de una pgina cliente tengan
acceso a los atributos de todas las formas en ella contenidas.
Por tanto, hemos de considerar el estereotipo <<forma>> que
a su vez va a generarnos otro nuevo: <<enva>>. Dicho estereotipo
se justifica con la necesaria relacin entre una forma y la pgina que
la procesa. Es ms, la relacin es bidireccional puesto que la pgina
que va a llevar a cabo el proceso tiene acceso a los atributos de la
forma, que son enviados en tiempo de ejecucin.

Framesets

Los framesets o conjuntos de marcos aparecen con la

posibilidad de mostrar varias pginas Web al mismo tiempo. Puesto
que un frameset puede contener cualquier pgina cliente, debemos

6
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia
considerarlo como una especializacin de las mismas y, con ello,
generar un nuevo estereotipo <<marcos>>.
Coordinar la actividad entre las pginas requiere la habilidad de
poder referenciar las pginas dentro de los marcos, y a dicha
referencia la llamaremos objetivo. Un objetivo es muy distinto de un
marco y una pgina slo puede referenciar objetivos de navegadores
abiertos, as que nos vamos a crear un nuevo estereotipo para
mostrar tal descripcin: <<objetivo>>.
La mayor ventaja de haber creado dicho estereotipo es que puede ser
compartido y referenciado por muchas pginas cliente. No posee
atributos ni mtodos. Pero surge una especializacin del mismo :
cuando queremos cargar un enlace en un navegador distinto de s
mismo. En este caso, estamos frente a un nuevo estereotipo que
llamaremos <<enlace con objetivo>>.

Figura 3: Enlace con objetivos

Otros estereotipos

Las extensiones Web para UML estn a punto de finalizarse en

su fase inicial. Sin embargo, hay otros estereotipos que estn bajo
consideracin como son <<xml>> o <<scriplet>>...

Consideraciones del proceso

Una aplicacin Web no es ms que una especializacin de un

proceso cliente/servidor, con lo que se puede aprovechar el modelado

7
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia
de dichas aplicaciones. En particular, los casos de uso son una
herramienta fundamental en la captura de requisitos.

En el modelado, es importante tener en cuenta el que debemos

empezar por las pginas cliente. En general, un caso de uso nos dar
lugar a una pgina cliente distinta. Las pginas de servidor sern el
ltimo eslabn del proceso de produccin, puesto que se generarn
prcticamente ellas mismas al identificar los componentes del
servidor y relacionarlos con las pginas cliente.

Finalmente, es necesario considerar que se trata de un proceso

abierto debido a los posibles cambios en el diseo y las extensiones
propuestas, pero es una imagen clara y precisa de la aplicacin Web.

Conclusin

El propsito principal del documento presente ha sido mostrar

el diseo de aplicaciones Web con UML. Asumiendo que el modelado
es importante y que deberamos modelar los componentes de un
sistema, descubrimos que un diseador de aplicaciones Web deber
trabajar con pginas. Y puesto que UML est fundamentalmente
orientado a objetos, no hay ms remedio que descubrir los aspectos
ocultos del modelado orientado a objetos que pueden presentar
dichas pginas.

Bibliografa.

www.conallen.com
Whitepapers modelling Web applications with UML.-

Modeling Web Application Architecture with UML

Jim Conallen
Comunication of ACM October 1999

8
Laboratorio de Sistemas de Informacin
Facultad de Informtica
Universidad Politcnica de Valencia