1. Luis A. Guerrero
Universidad de Chile
Departamento de Ciencias de la Computación
CC61J - Taller de UML
Modelando aplicacionesModelando aplicaciones
Web con UMLWeb con UML
4. Arquitectura WebArquitectura 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.
5. “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 WebArquitectura Web
¿Cuál es la diferencia entre un sitio Web y una aplicación Web?
6. 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 WebArquitectura Web
7. 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 WebArquitectura Web
8. 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 WebArquitectura Web
9. 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 WebArquitectura Web
10. 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 WebArquitectura Web
11. 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 WebArquitectura Web
15. Modelando aplicaciones WebModelando 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.
16. Modelando aplicaciones WebModelando 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:
17. Modelando aplicaciones WebModelando 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
18. Modelando aplicaciones WebModelando 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:
19. Modelando aplicaciones WebModelando 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:
20. Modelando aplicaciones WebModelando 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:
21. Modelando aplicaciones WebModelando 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.
22. Modelando aplicaciones WebModelando aplicaciones Web
SearchResults Home
GetProduct
ProductDetail
<<link>>
{productID}
0--*
<<link>>
<<build>>
Home page
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.
23. Modelando aplicaciones WebModelando aplicaciones Web
<<boundary>>
Home page
<<boundary>>
Orders
<<boundary>>
Schedule
<<boundary>>
Order status
<<boundary>>
Account Summary
User
Maintenance
<<boundary>>
Detailed info
<<boundary>>
Account distributionFull Site Navigation Map
Otro ejemplo: modelando el mapa de navegación según actores.
24. Modelando aplicaciones WebModelando aplicaciones Web
<<boundary>>
Home page
<<boundary>>
Orders
<<boundary>>
Order status
<<boundary>>
Account Summary
<<boundary>>
Detailed info
<<boundary>>
Account distribution
Account Executive
Account Executive Navigation Map
25. Modelando aplicaciones WebModelando aplicaciones Web
<<boundary>>
Home page
<<boundary>>
Orders
<<boundary>>
Order status
Registered User Navigation Map
Registered User
