Luis A. Guerrero Universidad de Chile Departamento de Ciencias de la Computación CC61J - Taller de...

Luis A. Guerrero

Universidad de ChileDepartamento de Ciencias de la ComputaciónCC61J - Taller de UML

Modelando aplicacionesModelando aplicaciones

Web con UMLWeb con UML

ContenidoContenido

1. Arquitectura de aplicaciones Web

2. Modelamiento de aplicaciones Web

Arquitectura WebArquitectura Web


Hasta el día de hoy, lo más importante en el desarrollo deaplicaciones Web han sido las herramientas. Poco se hadicho 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 seranalizado y modelado. Las aplicaciones Web, al igual queotras aplicaciones, necesitan métodos formales deanálisis y diseño.

“Una aplicación Web es un sitio Web donde la navegación a travésdel sitio, y la entrada de datos por parte de un usuario, afectan elestado de la lógica del negocio. En esencia, una aplicación Webusa 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 puedeser llamado aplicación Web.” [Conallen 99]

¿Es Altavista (o cualquier search engine) un sitio Web o unaaplicación Web? ¿Qué pasa con un sitio Web como el de Micro-soft donde hay que registrase antes de bajar algún software?


¿Cuál es la diferencia entre un sitio Web y una aplicación 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 losclientes que las solicitan. Los requerimientos son hechos a través deuna conexión de red, y para ello se usa el protocolo HTTP.


Arquitectura básica de una aplicación/sitio Web

La información mostrada en las páginas está típicamente almacenadaen 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.


Páginas Web

Las páginas Web son el componente principal de una aplicacióno sitio Web. Los browsers piden páginas (almacenadas o creadasdiná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 sonejecutados por el servidor antes de entregar la página.

Una vez que se entrega una página, la conexión entre el browsery el servidor Web se rompe (a diferencia de otros esquemas tipocliente/servidor). Es decir que la lógica del negocio en el servidorsolamente se activa por la ejecución de los scripts de las páginassolicitadas por el browser (en el servidor, no en el cliente).


Scripts en el cliente

Cuando el browser ejecuta un script en el cliente, éste no tieneacceso 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 generalcódigo JavaScript o VBSscript, mezclados con código HTML.


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 decampos de entrada: textbox, text area, checkbox, radio button group,button y selection list.

Cuando un formulario es llenado, se envía al servidor usando unaoperación submit solicitada por el usuario típicamente al hacerclick en un botón.


Servidor Web

En muchas aplicaciones Web hay una capa intermedia,compuesta por un conjunto de componentes, que se ejecutanno necesariamente en el servidor Web, sino en otros servidoresde aplicaciones. Esta capa encapsula la lógica del negocio, y,al ser componentes compilados puede contener objetos, consus métodos y atributos (llamados business objects).


Arquitectura generalizada de una aplicación Web


Modelando aplicaciones WebModelando aplicaciones Web


Conallen propone una extensión al UML para diseñaraplicaciones Web:


Dado que las páginas Web son los principales componentesde la arquitectura Web, hay que poder modelarlas. UsandoUML 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 servidory páginas del cliente. Los scripts de las páginas del servidorrepresentan los métodos de esta clase. Las páginas del clientetienen métodos que se ejecutan solamente del lado del cliente,como por ejemplo, Java Applets y controles ActiveX.


Hay una relación fundamental entre las páginas del servidor ylas páginas del cliente, y es que las páginas del servidor creanlas páginas del cliente. Esta relación es en una sola dirección,y para modelarla se usa el estereotipo <<builds>>. De estemodo, se indica cuál página del servidor es encargada de crearla página del cliente. Por ejemplo:


Algunas páginas del servidor podrían redireccionar ciertassolicitudes 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 delegafuncionalidad


Otra relación importante en el diseño de aplicaciones Webes el vínculo (link, o anchor) entre páginas. Las páginasvinculadas podrían ser páginas de cliente o del servidor.El estereotipo <<links>> define relaciones entre páginascliente y otras páginas (cliente o servidoras). Ejemplo:


Si un vínculo (hyper link) incluye parámetros, éstos son modeladoscomo atributos del link fuera de la asociación. Por ejemplo:


Dado que una página podríatener varios formularios (forms)es posible que desde estapágina se acceda a diferentespáginas. Los formularios semodelan con el estereotipo<<form>> (un estereotipopor cada formulario). Laspáginas cliente contienenformularios. Ejemplo:


Usando frames, una páginacliente podría estar compuestapor múltiples páginas al mismotiempo. Los frames se imple-mentan en HTML usando unframeset. Un frameset podríaa su vez estar contenido enotro frameset. Las páginasWeb contenidas en unframe se llaman targets. Elestereotipo <<targeted link>>hace referencia a páginas quevan ser cargadas en un framedistindo del que contiene lapágina que tiene el link.


SearchResults Home

GetProductProductDetail

<<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.


<<boundary>>Home page

<<boundary>>Orders

<<boundary>>Schedule

<<boundary>>Order status

<<boundary>>Account Summary

UserMaintenance

<<boundary>>Detailed info

<<boundary>>Account distributionFull Site Navigation Map

Otro ejemplo: modelando el mapa de navegación según actores.



<<boundary>>Orders


<<boundary>>Account Summary

<<boundary>>Detailed info

<<boundary>>Account distribution

Account Executive

Account Executive Navigation Map



<<boundary>>Orders


Registered User Navigation Map

Registered User

FinFin

Luis A. Guerrero Universidad de Chile Departamento de Ciencias de la Computación CC61J - Taller de...

Documents

Transcript of Luis A. Guerrero Universidad de Chile Departamento de Ciencias de la Computación CC61J - Taller de...