Universidad de Chile

Departamento de Ciencias de la Computación

CC61J - Taller de UML

Modelando aplicaciones
Web con UML

Luis A. Guerrero
Contenido

1. Arquitectura de aplicaciones Web

2. Modelamiento de aplicaciones Web

Arquitectura Web
Arquitectura Web

Hasta el día de hoy, lo más importante en el desarrollo de

aplicaciones Web han sido las herramientas. Poco se ha
dicho sobre el proceso de desarrollo.

La fácil creación de hojas HTML y en general de sitios Web,

usando herramientas simples, ha hecho que el desarrollo de
este tipo de aplicaciones se haga sin un trabajo serio de
análisis y diseño.

Cualquier sistema de complejidad no trivial, necesita ser

analizado y modelado. Las aplicaciones Web, al igual que
otras aplicaciones, necesitan métodos formales de
análisis y diseño.
Arquitectura Web

¿Cuál es la diferencia entre un sitio Web y una aplicación Web?

“Una aplicación Web es un sitio Web donde la navegación a través

del sitio, y la entrada de datos por parte de un usuario, afectan el
estado de la lógica del negocio. En esencia, una aplicación Web
usa un sitio Web como entrada (front-end) a una aplicación típica.
...Si no existe lógica del negocio en el servidor, el sistema no puede
ser llamado aplicación Web.”
[Conallen 99]

¿Es Altavista (o cualquier search engine) un sitio Web o una

aplicación Web? ¿Qué pasa con un sitio Web como el de Micro-
soft donde hay que registrase antes de bajar algún software?
Arquitectura Web
La arquitectura de un sitio Web tiene tres componentes principales:
un servidor Web, una conexión de red, y uno o más clientes (browsers).

El servidor Web distribuye páginas de información formateada a los

clientes que las solicitan. Los requerimientos son hechos a través de
una conexión de red, y para ello se usa el protocolo HTTP.
 Arquitectura Web
Arquitectura básica de una aplicación/sitio Web

La información mostrada en las páginas está típicamente almacenada

en archivos. Sin embargo, muchas veces esta información está almace-
nada en una base de datos, y las páginas son creadas dinámicamente.
Los sitios Web que usan este esquema, son llamados sitios dinámicos.
Arquitectura Web
Páginas Web

Las páginas Web son el componente principal de una aplicación

o sitio Web. Los browsers piden páginas (almacenadas o creadas
dinámicamente) con información a los servidores Web.

En algunos ambientes de desarrollo de aplicaciones Web, las

páginas contienen código HTML y scripts dinámicos, que son
ejecutados por el servidor antes de entregar la página.

Una vez que se entrega una página, la conexión entre el browser

y el servidor Web se rompe (a diferencia de otros esquemas tipo
cliente/servidor). Es decir que la lógica del negocio en el servidor
solamente se activa por la ejecución de los scripts de las páginas
solicitadas por el browser (en el servidor, no en el cliente).
Arquitectura Web

Scripts en el cliente

Cuando el browser ejecuta un script en el cliente, éste no tiene

acceso directo a los recursos del servidor.

Hay otros componentes que no son scripts, como los applets o

los componentes ActiveX. Los scripts del cliente son por lo general
código JavaScript o VBSscript, mezclados con código HTML.
Arquitectura Web

Formularios

La forma más común de capturar la información dada por el usuario,

es a través de formularios. Un formulario (form) es una colección de
campos de entrada: textbox, text area, checkbox, radio button group,
button y selection list.

Cuando un formulario es llenado, se envía al servidor usando una

operación submit solicitada por el usuario típicamente al hacer
click en un botón.
Arquitectura Web
Servidor Web
En muchas aplicaciones Web hay una capa intermedia,
compuesta por un conjunto de componentes, que se ejecutan
no necesariamente en el servidor Web, sino en otros servidores
de aplicaciones. Esta capa encapsula la lógica del negocio, y,
al ser componentes compilados puede contener objetos, con
sus métodos y atributos (llamados business objects).
Arquitectura Web

Arquitectura generalizada de una aplicación Web

Modelando aplicaciones Web
Modelando aplicaciones Web

Conallen propone una extensión al UML para diseñar

aplicaciones Web:
Modelando aplicaciones Web

Dado que las páginas Web son los principales componentes

de la arquitectura Web, hay que poder modelarlas. Usando
UML podemos ver una página Web como un objeto.

¿Cuáles serían entonces las propiedades de estos objetos?

Es conveniente hacer la distinción entre páginas del servidor

y páginas del cliente. Los scripts de las páginas del servidor
representan los métodos de esta clase. Las páginas del cliente
tienen métodos que se ejecutan solamente del lado del cliente,
como por ejemplo, Java Applets y controles ActiveX.
Modelando aplicaciones Web

Hay una relación fundamental entre las páginas del servidor y

las páginas del cliente, y es que las páginas del servidor crean
las páginas del cliente. Esta relación es en una sola dirección,
y para modelarla se usa el estereotipo <<builds>>. De este
modo, se indica cuál página del servidor es encargada de crear
la página del cliente. Por ejemplo:
Modelando aplicaciones Web

Algunas páginas del servidor podrían redireccionar ciertas

solicitudes de procesamiento a otras páginas servidoras
(una especie de IF). Permitir modelar estas situaciones es
útil para la reutilización. Para esto se utiliza el estereotipo
<<redirects>>. Por ejemplo:

Página que delega

funcionalidad
Modelando aplicaciones Web

Otra relación importante en el diseño de aplicaciones Web

es el vínculo (link, o anchor) entre páginas. Las páginas
vinculadas podrían ser páginas de cliente o del servidor.
El estereotipo <<links>> define relaciones entre páginas
cliente y otras páginas (cliente o servidoras). Ejemplo:
Modelando aplicaciones Web

Si un vínculo (hyper link) incluye parámetros, éstos son modelados

como atributos del link fuera de la asociación. Por ejemplo:
Modelando aplicaciones Web

Dado que una página podría

tener varios formularios (forms)
es posible que desde esta
página se acceda a diferentes
páginas. Los formularios se
modelan con el estereotipo
<<form>> (un estereotipo
por cada formulario). Las
páginas cliente contienen
formularios. Ejemplo:
Modelando aplicaciones Web
Usando frames, una página
cliente podría estar compuesta
por múltiples páginas al mismo
tiempo. Los frames se imple-
mentan en HTML usando un
frameset. Un frameset podría
a su vez estar contenido en
otro frameset. Las páginas
Web contenidas en un
frame se llaman targets. El
estereotipo <<targeted link>>
hace referencia a páginas que
van ser cargadas en un frame
distindo del que contiene la
página que tiene el link.
Modelando aplicaciones Web

<<link>>

SearchResults Home
Home page

<<link>>
{productID}

0--* GetProduct
ProductDetail
<<build>>

La página SearchResults contiene un número variable de links

(0..*) hacia la página del servidor GetProduct. Para cada
productID se construye una página ProductDetail diferente.
 Modelando aplicaciones Web
Otro ejemplo: modelando el mapa de navegación según actores.

<<boundary>>
Home page

<<boundary>> <<boundary>> <<boundary>> <<boundary>> User

Orders Schedule Order status Account Summary Maintenance

<<boundary>> <<boundary>>
Full Site Navigation Map Detailed info Account distribution
Modelando aplicaciones Web

Account Executive

<<boundary>>
Home page

<<boundary>> <<boundary>> <<boundary>>

Orders Order status Account Summary

<<boundary>> <<boundary>>
Account Executive Navigation Map Detailed info Account distribution
Modelando aplicaciones Web

Registered User

<<boundary>>
Home page

<<boundary>> <<boundary>>
Orders Order status

Registered User Navigation Map

Fin