Luis A. Guerrero

1. Universidad de Chile Departamento de Ciencias de la Computación CC61J - Taller de UML Modelando aplicaciones Web con UML Luis A. Guerrero

2. Contenido 1. Arquitectura de aplicaciones Web 2. Modelamiento de aplicaciones Web

3. Arquitectura Web

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

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

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

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

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

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

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

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

12. Arquitectura Web Arquitectura generalizada de una aplicación Web

13. Modelando aplicaciones Web

14. Modelando aplicaciones Web Conallen propone una extensión al UML para diseñar aplicaciones Web:

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

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

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

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

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

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

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

22. <<link>> Home SearchResults Home page <<link>> {productID} 0--* GetProduct ProductDetail <<build>> Modelando aplicaciones Web 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 Web Otro ejemplo: modelando el mapa de navegación según actores. <<boundary>> Home page <<boundary>> Orders <<boundary>> Schedule <<boundary>> Order status <<boundary>> Account Summary User Maintenance <<boundary>> Detailed info <<boundary>> Account distribution Full Site Navigation Map

24. Modelando aplicaciones Web Account Executive <<boundary>> Home page <<boundary>> Orders <<boundary>> Order status <<boundary>> Account Summary <<boundary>> Detailed info <<boundary>> Account distribution Account Executive Navigation Map

25. Modelando aplicaciones Web Registered User <<boundary>> Home page <<boundary>> Orders <<boundary>> Order status Registered User Navigation Map

26. Fin