FUNDACION UNIVERSITARIA LIBERTADORES

Modelado de aplicaciones Web mediante UML

Ing Mabel Quintero Contreras

DESARROLLO DE APLICACIONES WEB

Gracias al desarrollo de nuevas herramientas y tecnologías, las Aplicaciones Web son cada vez más populares.

La facilidad de su desarrollo provoca, a veces, la ausencia de un análisis y diseño correctos, pero están consiguiendo reemplazar a las aplicaciones software tradicionales.

Lo que aquí vamos a ver es una presentación genérica del funcionamiento y estructura de dichas aplicaciones.

Arquitectura de una Aplicación WebSitios Web Una Aplicación Web es un sitio donde la entrada de datos afecta al

estado de la lógica. Es decir, una Aplicación Web se sirve de un sitio o página como entrada a una verdadera aplicación. 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 dinámico. 

Aplicaciones Web

La arquitectura global de una Aplicación Web es idéntica a la de un sitio Web, aunque su desarrollo sea más elaborado.

  Páginas

Las páginas son el componente fundamental de las aplicaciones Web, y se muestran a través de los navegadores que hacen de contenedores del interfaz de usuario. Estas páginas son el resultado de la combinación de páginas HTML junto con scripts de páginas dinámicas. 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 lógica del servidor. Se creen las nuevas páginas que debe mostrar el navegador.

Una cosa importante a tener en cuenta es que el servidor no es el único elemento capaz de ejecutar scripts. Un navegador también 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 navegación.

En general, los procedimientos del lado del servidor son procedurales, mientras que los del lado del navegador o cliente son dirigidos por eventos.

Aplicaciones Web

Formas   Las formas más comunes de introducir información

son las áreas de texto, listas de selección o botones de radio, por ejemplo. Cada uno de estos elementos tiene un nombre o ID asociado a una página de acción, y cuando el usuario introduce la información, el servidor interpreta o ejecuta el código contenido en dicha página.

El resultado, la información introducida por el usuario puede ser procesada.

Aplicaciones Web

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 sólo se utiliza cuando la lógica necesaria para controlar la aplicación es muy extensa y el tiempo es un factor crítico en las decisiones de diseño.

 

Aplicaciones Web

Aplicaciones Web Las páginas formateadas en HTML también

pueden tener referencias a componentes en la máquina del cliente, como son los JavaApplets o los controles ActiveX.

Su presencia supone la extensión de la Aplicación Web al cliente y nuevas posibilidades en cuanto a la interfaz con el usuario, puesto que aumentan la interacción que pueden ofrecer las páginas preformateadas.

Aplicaciones Web Frames

Las capacidades de la interfaz de usuario pueden ser incrementadas con el uso de frames, que permiten tener varias páginas abiertas y activas al mismo tiempo.

Aplicaciones Web Estructura de una pagina web

Aplicaciones Web

Otros Componentes   Con los componentes ya mencionados, se

puede desarrollar una buena Aplicación Web, aunque otros componentes más recientes pueden afectar su arquitectura, como son el caso de XML y los scriptlets.

Estos últimos tienen el inconveniente de que sólo funcionan en navegadores Microsoft.

Modelado   Una de las metodologías o notación empleadas en la

modelización de sistemas Web es la “Metodología Relacional” ( RMM, Relationship Management Methodology ), es una metodología para el diseño, construcción y mantenimiento de sistemas web para intranets e internet.

Su principal objetivo es la reducción de costes de mantenimiento de sitios Web dinámicos dirigidos por la base de datos.

Aplicaciones Web

Pero esta metodología falla a la hora de construir aplicaciones Web, en las que la lógica 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 además pueden crear múltiples instancias del mismo browser y frames en la parte cliente que deben establecer y mantener su propio mecanismo de comunicación.

Todo esto debe ser modelizado también y RMM no es capaz de hacerlo.

 

Aplicaciones Web

La elección de una notación debe estar en función de la necesidad de modelizar la parte de las capas de la parte del servidor.

Con la admisión de UML como notación para la modelización cada vez más sistemas están siendo modelizados con él ya que es capaz de expresar la lógica del sistema en los componentes Web, a lo largo del resto de la aplicación.

Aplicaciones Web

Otro de los modelos importantes ADM ( analisis/desing Model) representa alguna dificultades cuando trata de modelizar páginas Web y el código ejecutable asociado a éstas relacionándolo con el resto de elementos en el modelo.

Decidir cómo modelizar ,determinar el grado de abstracción y el detalle que queremos alcanzar es crítico para los usuarios de ese modelo.

Aplicaciones Web

En UML, los links representarían el path de navegación desde una página a otra.

Extendiendo esta forma de pensar las páginas serían clases en la vista lógica del modelo, por lo tanto los scripsts de las página serían operaciones ( métodos ) de la clase, y las variables de estos scripts cuyo ámbito sea la página, serían los atributos.

Lo anterior no nos ayuda cuando tenemos que saber que operaciones, atributos, etc están activos en el servidor, por lo tanto es mejor modelizarlas como componentes del sistema.

Aplicaciones Web

Un sistema puede ser modelado de diferentes maneras, y todas ellas consistentes.

Por ejemplo. Y esto suscita un nuevo desafío : el cómo modelar dicho sistema cuando tanto el servidor como el cliente ejecutan scripts, puesto que compartir atributos o métodos entre ambos puede llegar a ser muy confuso.

Aplicaciones Web

Extensiones del modelado   UML no es perfecto para todas las situaciones, y es por

ello que se definen mecanismos de extensión como las Etiquetas, Estereotipos y Restricciones. Para resolver el problema presentado anteriormente, se podrían definir los Estereotipos <<método de cliente >> y << método de servidor >>, que nos permitirían hacer una distinción adecuada en el diseño.

Aún así, al representar las relaciones no se garantiza que sólo sean válidas desde el lado del servidor o el del cliente…

Aplicaciones Web

Estereotipos de página   Una mejor solución al modelado de páginas pasa por la creación de dos clases con estereotipo:

Página de servidor Página de cliente

Aplicaciones Web

Su implementación puede aparecer en el mismo fichero o componente, pero la distinción es clara.

Mientras la página de servidor se ocupa del acceso a los componentes, scripts, datos y, u otros elementos que se encuentren en la parte del servidor, la página del cliente se ocupa de los Applets de Java, los controles ActiveX y, o el formateado de la página, por ejemplo.

Aplicaciones Web

Veamos los estereotipos en detalle.1. Hay una relación importante entre ambas

páginas, definida unidireccional y descrita bajo el estereotipo <<construye>>.

Y es que una página de servidor se encarga de construir una de cliente. Incluso podría darse el caso de que una página de servidor construya varias de las páginas cliente.

Aplicaciones Web

2. Otro estereotipo es el definido como <<redirige>>. Dependiendo de la entrada y de las exigencias de procesado, una página de servidor puede redirigirse hacia otras que cumplan una labor más específica. Redirigir toma en este caso el significado de delegar.3. <<presenciar>>. Es algo más sutil que los anteriores y se sumaría a un diagrama que ya conste de un estereotipo <<construye>>. Una página de servidor construye una de cliente y, bajo ambas, existe un elemento Web que se da cuenta, que presencia, al menos una de ambas páginas. Un componente Web presenciaría ambas páginas a la vez.

Aplicaciones Web

4. Una relación que no se puede olvidar viene definida por el estereotipo <<enlace>>. Y sabiendo lo que significa un hiperenlace, está claro que sólo tiene sentido definirlo desde una página cliente hacia una página servidor – que generará una nueva página cliente -, o desde la página cliente hacia otra de su misma clase. Si dicho enlace contiene parámetros, se modelan fuera de la relación.

Aplicaciones Web

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 quién puede servirse de ellos.

 

Aplicaciones Web

Formas   El significado de una forma se puede resumir diciendo que

una página cliente contiene formas.

Es decir, las formas existen porque hay una serie de atributos que no tienen significado a lo largo de toda la página cliente, y porque además desde dicha página queremos llegar a destinos diferentes.

De aquí se puede deducir que una forma no tenga métodos y que los métodos de una página cliente tengan acceso a los atributos de todas las formas en ella contenidas.

Aplicaciones Web

Por tanto, hemos de considerar el estereotipo <<forma>> que a su vez va a generarnos otro nuevo: <<envía>>.

Dicho estereotipo se justifica con la necesaria relación entre una forma y la página que la procesa. Es más, la relación es bidireccional puesto que la página que va a llevar a cabo el proceso tiene acceso a los atributos de la forma, que son enviados en tiempo de ejecución.

Aplicaciones Web

Framesets   Los framesets o conjuntos de marcos aparecen con la posibilidad

de mostrar varias páginas Web al mismo tiempo. Puesto que un frameset puede contener cualquier página cliente, debemos considerarlo como una especialización de las mismas y, con ello, generar un nuevo estereotipo <<marcos>>.

Coordinar la actividad entre las páginas requiere la habilidad de poder referenciar las páginas dentro de los marcos, y a dicha referencia la llamaremos objetivo.

Un objetivo es muy distinto de un marco y una página sólo puede referenciar objetivos de navegadores abiertos, así que nos vamos a crear un nuevo estereotipo para mostrar tal descripción: <<objetivo>>.

Aplicaciones Web

La mayor ventaja de haber creado dicho estereotipo es que puede ser compartido y referenciado por muchas páginas cliente.

No posee atributos ni métodos. Pero surge una especialización 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>>.

 

Aplicaciones Web

Aplicaciones Web- Enlace con objetivos

Otros estereotipos

Las extensiones Web para UML están a punto de finalizarse en su fase inicial.

Sin embargo, hay otros estereotipos que están bajo consideración como son <<xml>> o <<scriplet>>...

Aplicaciones Web

Aplicaciones Web

Consideraciones del proceso  Una aplicación Web no es más que una

especialización 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.

 

Aplicaciones Web

En el modelado, es importante tener en cuenta el que debemos empezar por las páginas cliente.

En general, un caso de uso nos dará lugar a una página cliente distinta. Las páginas de servidor serán el último eslabón del proceso de producción, puesto que se generarán prácticamente ellas mismas al identificar los componentes del servidor y relacionarlos con las páginas cliente.

 

Aplicaciones Web

Finalmente, es necesario considerar que se trata de un proceso abierto debido a los posibles cambios en el diseño y las extensiones propuestas, pero es una imagen clara y precisa de la aplicación Web.

bibliografia

www.conallen.com Whitepapers – modelling Web

applications with UML.-   Modeling Web Application Architecture

with UML Jim Conallen   

Aplicaciones Web