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.

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

Una cosa importante a tener en cuenta es que el servidor no es el nico elemento capaz de ejecutar scripts. Un navegador tambin es 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 6
Laboratorio de Sistemas de Informacin Facultad de Informtica Universidad Politcnica de Valencia

frameset puede contener cualquier pgina cliente, debemos 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

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

Una aplicacin Web no es ms que una especializacin de un proceso cliente/servidor, con lo que se puede aprovechar el modelado 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