Servidor de la Asignatura EXTENSIN DE UML PARA EL MODELADO DE SISTEMAS WEB Versin 1.

Creado por: Jos Milln Medina Javier Pacios Lpez

Fecha: 8/12/2002

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

ndice:

1. Introduccin

................................................................................................... pg. 2 ............................................................................. pg. 3

2. Elementos de modelado

2.1 Pginas de servidor ................................................................................... pg. 3 2.2 Pginas de cliente ...................................................................................... pg. 4 2.3 Frames ...................................................................................................... pg. 9 2.4 Hiperenlaces ........................................................................................... pg. 10 2.5 Formularios ............................................................................................. pg. 11

3. Fuentes

............................................................................................................ pg. 12

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 1

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

1. Introduccin
El Lenguaje Unificado de Modelado (UML) es un lenguaje ideado de manera gnerica para representar la arquitectura y el comportamiento de un sistema del mundo real. Dado que UML est basado en el modelado orientado a objetos, se ajusta muy bien a la representacin de sistemas software orientados a objetos. Sin embargo, para otros sistemas donde los elementos bsicos de UML no son fcilmente identificables (tales como las clases y las relaciones bsicas definidas en UML), el uso de UML tal cual puede llevar a modelos que, aunque representan la realidad, distan de ella lo suficiente como para que no puedan describir con la precisin requerida los detalles y las decisiones de diseo. En estos casos UML permite extender el lenguaje para poder abarcar el modelado de estos sistemas. El mtodo ms usual de extensin de UML son los estereotipos. Para modelar un sistema Web requerimos elementos que la versin bsica de UML no nos proporciona. Por esta razn hemos necesitado extenderlo (mediante estereotipos) para conseguir representar adecuadamente nuestro diseo del sistema.

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 2

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

2. Elementos de modelado
A continuacin se presentan los elementos de modelado que sirven para representar un sistema Web con tecnologa de servidor (se ejecutan tareas en el lado del servidor). Hemos distinguido 5 elementos destacables: Pginas de servidor (server pages). Pginas de cliente (client pages). Frames. Hiperenlaces. Formularios.

2.1 Pginas de servidor

Las pginas de servidor (server pages) son un estereotipo de clase. Son las pginas activas contenidas en el servidor (por ejemplo pginas .php), y que producen pginas de cliente (client pages pginas html ) cuando son preprocesadas por el servidor de aplicaciones (por ejemplo PHP 4.0, que preprocesa pginas php para generar pginas html, visibles por el navegador del cliente). Distngase el servidor de aplicaciones (application server) del servidor web (web server, como por ejemplo Apache). Esquema de funcionamiento:

BROWSER (Internet Explorer) CLIENTE

7. pag.html

WEB SERVER (Apache)

6. pag.html

APP. SERVER (PHP 4.0)

5.

1. Peticin: pag.php 2. Bsqueda pag.php 3.

4.

BASE DE DATOS (MySQL)

SERVIDOR

Segn el tipo de lenguaje usado en la pgina activa podemos distinguir distintos tipos de pginas de servidor: Lenguaje PHP Server Page Java Server Page (Servlet) ... Estereotipo de clase <<psp>> <<jsp>> ...

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 3

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

Una pgina de servidor (<<psp>>, <<jsp>> ...) puede contener atributos (variables de la pgina activa) y operaciones (que pueden ser llamadas desde el exterior para que la pgina activa realice una tarea concreta). Para pasar la informacin de la operacin a ejecutar y de sus argumentos se hace uso del comando GET o del comando POST: GET: Se codifica la informacin en la URL:

http://host/directory/page.php?oper=buscar&arg=valor1+valor2

Los espacios se codifican con el smbolo +. POST: Se pasa la informacin a travs del flujo de entrada estndar (standard input stream):
oper=buscar&arg=valor1+valor2 [Flujo de entrada estndar]

Ejemplo de pgina de servidor:

NOTA: En lo que sigue nos referiremos a las pginas de servidor como <<sp>>, con independencia del tipo de lenguaje.

2.2 Pginas de cliente

Las pginas de cliente (client pages) son las pginas HTML que puede visualizar el navegador. El estereotipo de clase usado es <<cp>>. Las pginas de cliente no contienen ni atributos ni operaciones. Una <<cp>> puede estar almacenada tal cual en el servidor (como html puro), o puede ser producida por una <<sp>>:

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 4

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

As, <<produces>> es un estereotipo de asociacin entre clases. Opcionalmente, la asociacin <<produces>> puede ir acompaada de una guarda (en lenguaje natural) que determine cundo la <<sp>> produce la correspondiente <<cp>>:

Podemos distinguir dos tipos de <<cp>>: 1. <<cp>> que define una configuracin de marcos o frames (son los ficheros html con la etiqueta <FRAMESET>). 2. <<cp>> que define el contenido de una pgina web (los html con <BODY>). Una <<cp>> de tipo 1 slo puede estar compuesta por frames (estereotipo <<frame>>), y por nada ms:

Adicionalmente para las <<cp>> de tipo 1 se puede dar un esquema de la disposicin grfica de los frames: Index: Menu Cabecera Principal

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 5

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

En el siguiente diagrama se muestran los distintos tipos de objetos que pueden componer una <<cp>> de tipo 2:

NOTA: En principio, segn lo dicho las <<sp>> slo pueden producir <<cp>>. Es decir, que las nicas relaciones que pueden salir de una <<sp>> son las <<produces>>:

Por lo tanto, en principio una <<sp>> no puede estar compuesta por ningn elemento web (<<frame>>, <<link>>, <<form>>...). Sin embargo, para simplificar el diagrama consideramos la situacin siguiente: Si todas las <<cp>> producidas por una misma <<sp>> comparten el mismo elemento web (salvo frames, es decir, slo consideramos los elementos web que pueden componer una <<cp>> de tipo 2: link, form, script, applet, text e img), entonces dicho elemento puede ser subido a la <<sp>>:

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 6

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

El diagrama de la derecha del ejemplo se interpreta as: La imagen Ttulo est presente en todas las <<cp>> producidas por la <<sp>> ServerPage. En estos casos s permitimos que una <<sp>> est compuesta por elementos web (NO frames).

Herencia de pginas cliente: Permitimos la jerarqua de pginas cliente:

De esta manera consideramos subtipos de pginas cliente. La <<cp>> padre no existe fsicamente en el sistema, ya que se trata de un elemento abstracto que nos sirve para organizar jerrquicamente el diagrama. Slo existen fsicamente las <<cp>> hojas del rbol de herencia. Adicionalmente, en las ramas del rbol se pueden poner guardas que indiquen en qu casos se usan cada una de las <<cp>> hijas (las guardas deben ser excluyentes). As, el siguiente diagrama:

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 7

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

Representa de manera ms organizada lo siguiente:

La herencia nos permite agrupar los componentes web (NO frames) comunes a las <<cp>> hijas en la <<cp>> padre. As, el siguiente diagrama:

Es equivalente a:

Por lo tanto, los componentes web del padre son heredados por todas las <<cp>> hijas.

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 8

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

2.3 Frames
Un frame es un rea de la pantalla en la que se representa un fichero html. Una <<cp>> de tipo 1 define un conjunto de frames. Cuando esta <<cp>> es cargada en el navegador, los frames son rellenados mediante pginas html por defecto. As, de cada objeto <<frame>> necesariamente sale una flecha <<default>> que apunta a la <<cp>> que ser cargada inicialmente en ese frame. Ejemplo:

Una flecha <<default>> tambin puede apuntar a una <<sp>>. En este caso el frame ser rellenado inicialmente por la pgina html producida por la <<sp>> apuntada por la flecha <<default>>. Si fuera necesario pasar valores a la <<sp>>, en la flecha <<default>> se pondra lo siguiente:

En este ejemplo, en el marco Main se representar inicialmente el html devuelto por la <<sp>> BuscaImagenes, que contendr una imagen de presentacin en tamao mediano. Ntese que al tener slo una operacin la <<sp>> BuscaImagenes, no ha sido necesario pasar como argumento un identificador de esa operacin.

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 9

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

Son casos especiales los frames _top y _blank:

_top: Es un marco que cubre todo el rea de visualizacin del navegador. _blank: Hace referencia a la apertura de un nuevo navegador para representar all una pgina html.

Al contrario que los frames genricos explicados antes, de los frames _top y _blank no sale ninguna flecha <<default>>. Los frames _top y _blank estn presentes en cualquier diagrama.

2.4 Hiperenlaces
Un hiperenlace se modela con el estereotipo de clase <<link>> (sin atributos ni operaciones). De cada <<link>> salen dos flechas: <<links>>: Apunta a una <<cp>> o a una <<sp>>. En este ltimo caso es posible poner en la flecha <<links>> los argumentos que se le pasan a la <<sp>>. <<target>>: Apunta al <<frame>> en el que ser mostrada la <<cp>> apuntada por <<links>>, o la <<cp>> devuelta por la <<sp>> apuntada por <<links>>.

Ejemplo:

Si pulsamos el <<link>> botonNoticias del Menu, entonces en el <<frame>> Principal ser mostrada la pgina de Noticias. Consideramos dos casos especiales de destino de <<target>>: Si <<target>> apunta al frame _top, entonces la pgina apuntada por <<links>> cubrir todo el rea de visualizacin del navegador. Si <<target>> apunta al frame _blank, entonces la pgina apuntada por <<links>> ser mostrada en una nueva instancia del navegador.

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 10

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

Otro caso especial es el de ausencia de la flecha <<target>>. Si de un <<link>> no sale la flecha <<target>> (slo sale <<links>>), entonces la pgina destino (la apuntada por <<links>>) ser mostrada en el mismo frame en el que se encontraba el <<link>>.

2.5 Formularios
Los formularios son modelados con el estereotipo de clase <<form>>, que posee atributos pero no posee operaciones. Los atributos del <<form>> son los campos del formulario. Pueden ser de los siguientes tipos: Text. Checkbox. Radio. Hidden. Password. Select. MSelect (select mltiple). Textarea.

Ejemplo de formulario:

De cada <<form>> sale una flecha <<submits>> que apunta a la <<sp>> que procesar la informacin del formulario.

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 11

INGENIERA DEL SOFTWARE: PROYECTOS

SERVIDOR DE LA ASIGNATURA

3. Fuentes
Para el estudio de HTML 3.0 se ha usado el siguiente libro: HTML, JAVA, CGI, VRML, SGML Web Publishing Unleashed. William Robert Stanek. 1 edicin, 1996, Sams.net Publishing. Se han escogido ideas del siguiente artculo (aunque se ha extendido bastante):

Modeling Web Application Architectures with UML. Jim Conallen. Junio 1999, Rational Software. Se puede consultar este artculo en la siguiente URL:
http://www.rational.com/media/whitepapers/webapps.pdf

Extensin de UML para el modelado de sistemas Web (versin 1.0, fecha: 8/12/02)

Pg. 12