UML based Web Engineering

(UWE)

El por qu de una Metodologa de

Desarrollo Web?
Los principales problemas que nos encontramos es la falta
de fiabilidad, seguridad, escalabilidad, mantenimiento,
integracin y la alta dependencia para su desarrollo e
implantacin junto con la falta de estndares.
Lo que deseamos es controlar el caos que han provocado
en el pasado procesos creativos de desarrollo con el fin de
proporcionar un proceso sistemtico orientado a la mejora
de la calidad de la aplicacin final. En esta nueva disciplina
se parte de la base de que las necesidades de evolucin,
mantenimiento, la adaptacin a nuevos dispositivos de
acceso y la migracin a nuevas plataformas y entornos de
desarrollo deben dirigir el proceso del ciclo de vida.

Evolucin de las metodologas de

Desarrollo Web.
Las distintas metodologas se pueden dividir en tres generaciones en
base a su sofisticacin, estas son:
Primera Generacin:(Principios de los 90) Se sientan las bases
de la ingeniera Web, en los que se incluyen conceptos como
construccin de navegacin, separacin entre estructuras y el
contenido durante el ciclo de desarrollo.
Segunda Generacin: (Segunda mitad de los 90) Se refinan los
primeros modelos y se aaden los soportes de funcionalidad
bsica y se llevan a cabo los primeros esbozos de proceso
donde se delimitan los modelos conceptual, lgico y fsico.
Tercera generacin: (A partir del 2000): Se lleva a cabo la
profundizacin en el soporte para la funcionalidad, enfatizacin
de la figura del usuario en los mtodos, y se avanza hacia la
estandarizacin de notaciones, procesos y lenguajes de
especificacin.

Qu es UWE?
UWE (UML-Based Web Engineering) es una propuesta
basada en UML y en el proceso unificado para
modelar aplicaciones web. Esta propuesta est
formada por una notacin para especificar el dominio
(basada en UML) y un modelo para llevar a cabo el
desarrollo del proceso de modelado.

Herramientas SW
Se utilizan las mismas herramientas software de
modelado basados en UML y se les aade una extensin
a la aplicacin para q permita estas nuevas
funcionalidades. Entre estas extensiones podemos
mencionar:
- MagicUWE
- UWEet: Proporciona una interfaz simple para el
usuario y es compatible con eclipse con eclipse a la
hora de compartir diagramas.
- UWE4JSF
- Argo-UWE: Herramienta SW basado especficamente
en la metodologa UWE.

Ventajas de UWE

Las notaciones UWE son mas claras y estn mejor

documentadas.

Es un profile de UML, es decir, un modelo

navegacional es un diagrama de clases UML con
estereotipos.
Presenta unos modelos de diseo que se ajustan
bastante bien al diseo de sitios web. Por ejemplo el
Modelo de Navegacin, como el Modelo de
Presentacin, son muy tiles a la hora de poder
visualizar como se navegar por un sitio web y como
ser mostrada la informacin al usuario.

 La notacin especifica que ofrece a UML para

representar elementos de una pgina web, as
tenemos elementos como: paginas ndices, pagina
inicial, pagina men, texto de entrada, formularios
web, botones, imgenes, clases de navegacin, clases
de proceso o links entre otros muchos, para los que
tenemos un estereotipo para representarlos, esto es
una carencia de UML que no contempla estos
elementos, as con UWE queda solucionada dicha
carencia y podemos representar esta informacin.

Modelos de UWE
1. Modelo de Contenido
Este modelo especifica cmo se encuentra relacionados
los contenidos del sistema, es decir, define la estructura
de los datos que se encuentran alojados en el sitio web.

En este ejemplo se puede ver representado que el contenido web

est formado por una agenda bsica de contactos, est agenda
representada por la clase AddressBook contiene un conjunto de
uno o ms contactos (clase Contact) , cada uno de ellos tiene un
nombre,un email , una direccin y un telfono. De los 2 primeros
son de tipo String y los dos ltimos son estructuras de otros
atributos, representadas por las clases Address y Phone, cada
contacto puede tener una direccin y un telfono principal y otros

2. Modelo de Navegacin
Este modelo indica como el sistema de paginas web del
sitio esta relacionado internamente. Es decir como se
enlazan los elementos de navegacin.
Para ello se utilizan unidades de navegacin llamadas
nodos conectadas por enlaces de navegacin.
Los elementos que introduce la metodologa UWE en
este modelo son:

Para empezar tenemos AddressBook como pgina de inicio,

as que est etiquetada como {isHome} y como clase de
navegacin con el smbolo correspondiente. La pgina de
inicio enlaza con un men, que sera nuestra pgina de
ndice, para ello la clase Main Menu esta etiquetada como
pagina Menu.

 Desde la clase Main Menu enlazamos con las clases Search

(que implementar la funcin de buscar un contacto y es
etiquetada con la etiqueta de query) que es un proceso
predefinido, y con la clase ConctactCreation (que crear un
contacto), esta clase es un proceso no definido con lo cual
llevar la etiqueta de processClass, as ambos enlaces
sern del tipo process link.

Para finalizar vemos que la clase ConctactCreation est

enlazada con Conctact ya que cuando se crea un nuevo
contacto, este se debe mostrar. Como tambin
cuando se realiza una bsqueda se debe mostrar la lista con
los contactos del resultado, de ah que exista otro
processLink entre las clases Search y ConctactList, esta
ultima adems etiquetada como index, al ser una lista.

3. Modelo de Presentacin
En este modelo se representan las clases de navegacin
y de procesos que pertenecen a cada pagina web. Estos
son los elementos que introduce la metodologa UWE en
este modelo:

 El diagrama de presentacin de la Agenda de Contactos, se

puede ver la clase contacto es presentada como
Presentation_Class, cubriendo tambin diferentes textos y
botones, esto significa que por cada contacto, tiene que ser
mostrado por un email, direcciones y los telfonos.

 Tambien se puede observar que la pagina de inicio

AddressBook contiene un texto de introduccin y
un formulario de bsqueda con un campo de texto
y un botn para lanzar la busqueda

4. Modelo de Proceso
Este modelo especifica las acciones que realiza
cada clase de proceso, en este modelo se
incluye:
Modelo de Estructura de Procesos: Que
define las relaciones entre las diferentes
clases proceso. Un ejemplo de diagrama de
clases de este modelo siguiendo el caso de
la Agenda de contactos sera:

En este diagrama se puede ver que

hay clases para definir 3 operaciones
que necesita una confirmacin. As por
ejemplo si el usuario quiere borrar un
contacto el mensaje ser
mostrado y despus haciendo clic en
ok el contacto ser borrado. Las
operaciones de actualizacin y
creacin funcional de manera similar,
ambas heredan de ConctacProcessing,
asegurando que los campos de datos
tienen valores validos.

Modelo de Flujo de Procesos: Que especifica las

actividades conectadas con cada proceso. Describe los
comportamientos de una clase proceso. Lo que ocurre en
detalle dentro de cada una. Por ejemplo para la operacin
de borrado de contactos tenemos el siguiente diagrama:

En el ejemplo anterior podemos ver que la etiqueta

<<userAction>> es usada para indicar las interaccione
entre el usuario y la pagina web iniciando un proceso o
respondiendo a una peticin de informacin. Se puede
ver el flujo que ocurre en cada operacin con sus
distintas rutas en caso de xito en la operacin o en
caso de error.

Ejemplo con el Mtodo UWE