EJEMPLOS UWE

Ejemplo 1: Compañía de Servicio

Casos de Uso

Para ilustrar el proceso de diseño se utiliza como ejemplo un sitio Web de una compañía
de servicio. El sitio Web ofrece información acerca de la compañía, los empleados y sus
relaciones con proyectos, los clientes y los departamentos. La figura 1.1 muestra un
modelo de casos de uso para la administración de proyectos que es parte del modelo de
casos de uso de la aplicación Web. La administración de la compañía, de los
departamentos y los empleados pueden ser modelados de la misma forma.

Administración de Proyectos

Visitar proyecto

Añadir proyecto

Usuario Web

Quitar proyecto

Empleado
Editar proyecto

Figure 1.1: Modelo de Casos de Uso para la Aplicación Compañía de Servicio

Fuente: (Hennicker & Koch, 2001)

Modelo Conceptual

El diseño conceptual del dominio está basado en estos casos de uso que incluyen objetos
envueltos en las actividades típicas que los usuarios realizarán con la aplicación. El
modelo conceptual para el sitio Web de la compañía de servicios es mostrado en la
figura 2.2. Las clases y asociaciones definidas en este paso son utilizadas durante el
diseño de navegación para derivar nodos de la estructura de hipermedia. Las asociaciones
serán usadas para derivar enlaces.
 Compañía
0..1 Nombre: String 1..* tiene►
Dirección: String
...

consisteEn
▼
▲ 1..* 1..*
dirige
Departamento Cliente
trabajaPara► 1 1..* 1
Nombre: String Nombre: String
... realiza ordena
...
AñadirProyecto(p:Project) ▼ ▼

1
cabeza 1..* 1..* 1..*

Empleado Proyecto
trabajaEn► Nombre: String
Nombre: String 1..* 1..*
Budget: Interger
E-mail: String Logo: Image
Imagen: Image ...
Publicaciones:Set(String)
... EditarProyecto ()

Figure 1.2: Modelo de Conceptual

Fuente: (Hennicker & Koch, 2001)

Modelos de Navegación

El modelo de espacio de navegación es construido con las clases de navegación y las

asociaciones de navegabilidad y está gráficamente representado por diagramas de clase
de UML. La figura 1.3 muestra el modelo de espacio de navegación para el sitio Web.

Compañía
0..1 Nombre: String 1
1 Dirección: String
Clientes: Set(String)
...

1..* departamentos

Departamento
1 1..*
Nombre: String
...

1..* empleados 1..* proyectos

1..* Proyecto
Empleado
empleados
1..* 1..* Nombre: String 1..*
Nombre: String
1 Budget: Interger
E-mail: String proyectos proyectos
Logo: Image
cabeza Imagen: Image ...
Publicaciones:Set(String)
...

Figure 1.3: Modelo de Espacio de Navegación

Fuente: (Hennicker & Koch, 2001)
 La figura 1.4 muestra cómo el modelo de espacio de navegación para el sitio Web puede ser
resaltado con índices, visitas guiadas y consultas. Nótese que se incluyen dos posibles caminos de
acceso para empleados de un departamento, mediante un índice y una consulta.

Compañía
1 proyectos
1 empleados
1 departamentos

por Nombre
por Nombre
por Nombre Proyecto
Empleado
Departamento
1..*

Departamento
1 BuscarEmpleados
1 proyectos

empleados 1 ?
Buscar por Nombre
1 Empleado por
{xor} por Nombre
Departamento
Proyecto por
por Nombre Departamento
Empleado por
Departamento
1..* 0..1 1..* 1..*
1..*
1 1..*
1 Empleado Proyecto
proyectos
cabeza
por Nombre
Proyecto por
Empleado

Figure 1.4: Modelo de Espacio de Navegación Resaltado con Índices, Visitas Guiadas y
Consultas formando en Modelo de Estructura de Navegación
Fuente: (Hennicker & Koch, 2001)

La figura 1.5 muestra cómo el modelo de estructura de navegación anterior es

enriquecido por menús, donde cada clase menú es asociada por una asociación de
composición a una clase de navegación. Nótese que los nombres de rol del anterior
modelo ahora son nombres de los ítems correspondientes al menú.
 Compañía

Cabeza
Empleados
Proyectos
Departamentos
1
1
1

por Nombre por Nombre

Empleado Departamento
1..*
por Nombre
Proyecto
Departamento

Empleados
Proyectos
BuscarEmpleados
1
1

1
?
Buscar por Nombre
1 Empleado por
{xor} por Nombre
Departamento
Proyecto por
por Nombre Departamento
Empleado por
Departamento
1..* 0..1
1..*
1 Empleado
1..* 1..*
1 1..*
Proyectos Proyecto
por Nombre
Proyecto por
Empleado

Figure 1.5: Modelo de Estructura de Navegación

Fuente: (Hennicker & Koch, 2001)

Modelos de Presentación

La figura 1.5 muestra cómo se construye una plantilla para la presentación de empleados.
 Empleado
Nombre
Fotografía
E-mail

Publicaciones

Figure 1.6: Clase Presentación para Empleado

Fuente: (Hennicker & Koch, 2001)

Las figuras 1.7 a 1.10 muestran parte del modelo de presentación de la aplicación. En este
ejemplo se utilizan framesets para partir la presentación en frames, a través del cual el
frame izquierdo muestra el árbol de navegación actual y el frame derecho muestra el
contenido correspondiente. La figura 1.7 muestra la presentación de la compañía. La
figura 1.8 muestra la presentación de la cabeza de la compañía (después de seleccionar
Cabeza), la figura 1.9 muestra la presentación del índice del departamento mediante una
lista de anclas (después de seleccionar Departamentos) y la figura 1.10 muestra cómo un
departamento seleccionado (por ejemplo el departamento i-seleccionado Dep_i) es
presentado.

<<frameset>> <<frameset>>
Frameset Compañía Frameset Cabeza
<<clase presentación>> <<clase presentación>>

Árbol de Navegación Árbol de Navegación

de la Compañía Cabeza

Home
Cabeza
<<clase presentación>> <<clase presentación>>
Cabeza
Departamentos Compañía Empleado
Empleados Proyectos
Proyectos

Departamentos

Empleados

Proyectos

Figure 1.7: Frameset para Compañía Figure 1.8: Frameset para Cabeza
Fuente: (Hennicker & Koch, 2001) Fuente: (Hennicker & Koch, 2001)
 <<frameset>> <<frameset>>
Frameset Compañía Frameset Cabeza
<<clase presentación>> <<clase presentación>>

Árbol de Navegación Árbol de Navegación

de la Compañía Cabeza

Home
Cabeza
<<clase presentación>> <<clase presentación>>
Cabeza
Departamentos Compañía Empleado
Empleados Proyectos
Proyectos

Departamentos

Empleados

Proyectos

Figure 1.9: Frameset para Índice de Figure 1.10: Frameset para Departamento
Departamento Fuente: (Hennicker & Koch, 2001)
Fuente: (Hennicker & Koch, 2001)

Ejemplo 2: Biblioteca Online

La biblioteca online (Koch, 2000) ofrece información acerca de publicaciones para

usuarios registrados y anónimos. La información de publicación comprende revistas,
libros y procedencias (proceedings); estos están descritos por un título, un número, un
editor, una fecha de publicación, un conjunto de artículos y autores para cada artículo.
Los libros consisten de exactamente un artículo cuyo título es el mismo que el del libro.
Además, para cada artículo una serie de palabras claves almacenada.

El usuario es modelado haciendo un seguimiento de sus intereses en artículos y

registrando los artículos que visita, también puede marcar artículos (bookmarks) que sean
de su especial interés. Una lista de palabras clave para cada usuario es administrada por el
sistema, la lista es inicializada por el usuario y es actualizada ya sea por el mismo o por el
sistema. El sistema realiza las actualizaciones de acuerdo con las observaciones sobre el
comportamiento del usuario (en este caso limitado a los artículos que marca o visita
frecuentemente). La lista puede incluir palabras clave positivas así como negativas, las
palabras clave negativas son utilizadas para esconder publicaciones y artículos
irrelevantes para el usuario.

Modelo de Casos de Uso

A continuación se resumen las funciones que la biblioteca online ofrece al usuario:

 Acceso a la información publicada tanto para los usuarios registrados como para
los anónimos.
  Actualización dinámica del modelo del usuario.
 Diferentes posibilidades de búsqueda para publicaciones, artículos y autores.
 Mecanismos de búsqueda para artículos visitados previamente
 Adaptación dinámica de los resultados de búsqueda al estado actual del modelo
del usuario.
 Personalización de la presentación de artículos
 Notificación de los artículos recientemente publicados mediante correo
electrónico o incluida en una página de noticias.

La figura 2.1 representa el modelo de casos de uso de la biblioteca virtual.

Encontrar <<includes>> Actualizar

Publicación Publicación

Encontrar <<includes>> Actualizar

Artículo Artículo

Encontrar <<includes>> Actualizarar

Administrador
Autor Autor
biblioteca
Usuario

Adaptar
Ver noticias Navegación
>
s>
de
in cl u
Marcar << Adaptar
artículos s >> Contenido
de
in cl u
<<
Seleccionar artícu- Adaptar
los visitados Presentación

Sistema
Actualizar perfil
biblioteca
Usuario del usuario
Enviar noticias
Registrado por e-mail

Figure 2.1: Modelo de Casos de Uso para la Aplicación Biblioteca Online

Fuente: (Koch, 2000)

Modelo Conceptual

El modelo conceptual de la biblioteca online es mostrado en la figura 2.2. El ejemplo está

limitado al corazón de los datos y la funcionalidad, aunque muchos otros aspectos
deberían ser incluidos en la biblioteca online, en un proceso incremental e iterativo. Estos
aspectos pueden ser clases adicionales y más avanzadas funciones de búsqueda, tales
como editores de publicaciones, clasificación de autores, búsquedas por autor y título del
artículo. Además de motores de búsqueda, funciones de autoría deben ser incorporados
permitiendo un modelo de usuario.
 Biblioteca contacta►
Nombre: String 1..*
Dirección: String bibliotecas
...

biblioteca

tiene
1..* publicaciones editores *
Publicación ◄ edita Editor
1..* 1..* 1
Título: String publicaciones editor Nombre: String
publicaciones Fecha: Date Dirección: String
... publicación ...

tiene 1
tiene

* autores artículos

Autor Artículo
escribe► contiene► Palabra clave
Nombre: String * 1..* Título: String 1..* 1..*
E-mail: String autores artículos Resumen: String artículos palabras Palabra: String
Imagen: Image clave ...
... Imprimir ()
variantes
Completo: (pdf, html) {tipo= positivo}

Figure 2.2: Modelo Conceptual de la Aplicación Biblioteca Online

Fuente: (Koch, 2000)

Modelo de Espacio de Navegación

La figura 2.3 muestra el modelo de espacio de navegación para aplicación biblioteca

online. El diagrama incluye una invariante que define el conjunto de nuevos artículos que
es navegable por los usuarios. Los artículos pertenecientes a este conjunto dependen de la
última fecha de autenticación del usuario. La restricción es adjuntada como una nota a la
clase correspondiente. Alternativamente, las restricciones pueden ser especificadas
separadamente como la invariante listada debajo del diagrama.
 inv= NuevosArtículos -> select(a: Artículo|a.FechaPublicación
> UsuarioActual.UltimaAutenticación

1
Biblioteca
1 Nombre: String 1
Dirección: String
...
1

1..* publicaciones
1
Publicación
Título: String editor
1..*
Fecha: Date
/Editor: String 1

autores 1..* artículos

Autor Artículo 1..*

1..* Nombre: String 1..* Título: String artículos
*
autores E-mail: String artículos Resumen: String
Imagen: Image /Palabra clave:Set(String) *
...
artículos nuevos
Imprimir ()
variantes *
Completo: (pdf, html) artículos visitados

context Biblioteca
inv: ArtículoVisitado -> select ( a:Artículo | a.Visitado.contar y UltimaVisita.Año= AñoActual )

Figure 2.3: Modelo de Espacio de Navegación de la Aplicación Biblioteca Online

Fuente: (Koch, 2000)

Modelo de Estructura de Navegación

(Primera Fase: Añadir índices, visitas guiadas y consultas)

La figura 2.4 muestra como el modelo de espacio de navegación de la aplicación

biblioteca online puede ser resaltada añadiendo índices, visitas guiadas y consultas.
Nótese que el acceso a todos los autores o a todos los artículos de la biblioteca está
restringido para los mecanismos de búsqueda mediante consultas. Los artículos nuevos
son accedidos directamente mediante un índice y se hace uso de una visita guiada para
recorrer los artículos de una publicación.
 Biblioteca1

Buscar
Autores Buscar todos Buscar Artículos
1 publicaciones
los Artículos Visitados
1
1 1

? ? ?
Publicación
Buscar Autor por Título Buscar Artículo Buscar Artículos
por Nombre 1..* por Título Visitados por Título
artículos
1 autores Publicación 1 artículos 1 visitados
artículos
1..* 1 nuevos

Autor por Artículo Artículo Visitado

1 autores 1 artículos 1
Nombre por título por Título
Nuevo Artículo
por Título
editor
Autor por Nombre * Artículo por Título
por Publicación por Publicación

1 1..* 1..*
1..*
1..* 1 1..*
Autor artículos Artículo
* 1..*

Autor por Título por

Autor por Publicación

Figure 2.4: Modelo de Estructura de Navegación (Primera Fase) de la Aplicación Biblioteca

Online
Fuente: (Koch, 2000)

(Segunda Fase: Añadir menús)

La figura 2.5 muestra cómo los menús enriquecen el modelo de estructura de navegación
de la subsección anterior en donde cada clase menú está asociada con una asociación de
composición a una clase navegación. Nótese que los nombres de rol que ocurren en el
modelo previo (ver figura 2.4) ahora son los nombres de los ítems correspondientes al
menú.
 Biblioteca
1

ArtículosNuevos
BuscarArtículosVisitados
BuscarArtículo
BuscarAutor
Publicaciones
MenuBiblioteca
1
1
1 1

? ? ?
Publicación
por Título
Buscar Autor Buscar Artículo Buscar Artículos
por Nombre 1..* por Título Visitados por Título

1..* 1 artículos
1 autores Publicación 1 artículos 1 visitados
editor
1

Autor por Artículo Artículo Visitado

Nombre 1 1 por título por Título
Artículos
Nuevo Artículo
Autores por Título

Autor por Nombre MenúPublicación

* Artículo por Título
por Publicación
por Publicación
1
1..* 1..* 1..*
Autor 1..*
1..* Artículo 1..*
1
Artículos
MenúAutor Autor por Título por
Autor por Publicación

Figure 2.5: Modelo de Estructura de Navegación (Segunda Fase) de la Aplicación Biblioteca

Online
Fuente: (Koch, 2000)

Modelo de Presentación

Modelo de Interfase de Usuario Abstracta

De la figura 2.6 a la figura 2.11 se muestran algunas clases de presentación que son parte
del modelo de interfase de usuario abstracta de la biblioteca online.

La figura 2.6 muestra el menú principal de la aplicación y la figura 2.7 representa una
variante del MenuBiblioteca que incluye al MenúAutor. Estos menús y otras variantes del
menú principal son visibles mientras se navega en toda la aplicación.
 Biblioteca MenúAutor
MenúBiblioteca
Publicaciones
Publicaciones Artículos
Artículos Autores
Autores IndiceAutor por Nombre

ArtículosNuevo Artículos
ArtículosVisitados
ArtículosNuevo

ArtículosVisitados

Figure 2.6: Clase Presentación del Menú Figure 2.7: Clase Presentación del Menú de la
Principal de la Biblioteca Biblioteca Compuesta y el Menú Autora
Fuente: (Koch, 2000) Fuente: (Koch, 2000)

Las anclas del menú deben ser anotadas, es decir subrayadas o con el color cambiado,
para mostrar que están seleccionadas. Otra jerarquía de herencia puede ser utilizada por
el menú principal para representar esta clase de notación.

La figura 2.8 y la figura 2.9 representan cómo los elementos del modelado descritas
arriba son utilizadas para construir una plantilla para la presentación del autor y el
artículo respectivamente.

Autor Artículo
Título
Nombre Audio
Abstract
Fotografía Dirección
Start Audio
Artículo Completo
E-mail {variante: pdf,ps,html}
Palabra Clave

Figure 2.8: Clase Presentación Autor Figure 2.9: Clase Presentación Artículo
Fuente: (Koch, 2000) Fuente: (Koch, 2000)

La figura 2.10 muestra la presentación que el usuario ve después de seleccionar la opción

autor en el MenúBiblioteca. Esta es una forma que debe ser llenada por el usuario, como
respuesta al envío de esta forma una lista de autores coincidiendo con el campo de
entrada de la búsqueda es mostrada como se representa en la figura 2.11, donde puede
seleccionar un autor (ítem de un índice). La lista de autores es clasificada y anotada de
acuerdo a los valores del modelo de usuario actual.

Buscar Autor por Indice de Autor

Nombre por Nombre

Buscar Autor Nombres de Autores

{Clasificado, Anotado}

Figure 2.10: Clase Presentación Buscar Autor Figure 2.11: Clase Presentación Índice de
por Nombre Autor por Nombre
Fuente: (Koch, 2000) Fuente: (Koch, 2000)

Modelo de Estructura de Presentación

Un modelo de presentación está construido con clase estereotipadas. También incluye

asociaciones del tipo <<presents>> que especifica que el objeto objetivo de la asociación
es desplegado en la locación indicada por el objeto de origen.

La figura 2.12 muestra una vista parcial del modelo de estructura de presentación de la
biblioteca online. Esta es la vista que sigue al enlace correspondiente al menú
BuscarAutor del menú principal (ver figura 2.5). Las vistas similares pueden ser
construidas por los otros ítems de menú del MenúBiblioteca, es decir, publicaciones,
BuscarArtículos, BuscarArtículosVisitados, y ArtículosNuevos. Nótese que para el
MenúBiblioteca una subclase es incluida que extiende el menú para incluir el
MenúAutor. Este modelo es obtenido del modelo de estructura de navegación.
 <<windows>> 1
VentanaPrincipal
Ventana 1
1

1
1 <<windows>>
<<frameset>>
SubVentana
Principal Ventana 2
1 1
1 1
<<presents>> <<presents>>
{xor}
1 1
1 1
<<clase pres.>> <<clase pres.>>
<<frame>> <<frame>> ÍndiceAutor ÍndiceArtículo
PrincipalIzquierdo PrincipalDerecho por Nombre por Título

1 1
1 1
<<presents>> <<presents>>
1 <<presents>> <<presents>>
{xor} {xor}
1 1 1
<<clase pres.>>
<<clase pres.>> <<clase pres.>> <<clase pres.>>
MenúBiblioteca
Buscar Autor Autor Artículo

<<clase pres.>>
MenúBiblioteca
Autor

Figure 2.12: Modelo de Estructura de Presentación de la Aplicación Biblioteca Online (Vista

Parcial)
Fuente: (Koch, 2000)

La figura 2.13 y la figura 2.14 muestran dos representaciones diferentes de un fremaset,

sus frames y la clase presentación asociada, utilizando los elementos del modelado de
composición de UML. Este es un ejemplo de una página Web completa (nodo de
presentación). Este es un fremeset que tiene dos frames. El frame izquierdo presenta a la
clase presentación menú principal de la aplicación, y el frame derecho presenta el
contenido seleccionado.

Esta clase de representación es opcional, da una idea de cómo las páginas de la aplicación
de verán, es decir un bosquejo de la interfase de usuario. Nótese que el MenúBiblioteca
incluye ítems adicionales que permiten la navegación de vuelta al punto inicial de la
aplicación. La figura 2.14 presenta también las restricciones que expresan que los ítems
del menú de ArtículosNuevos y ArtículosVisitados no son mostrados para usuarios
anónimos.
 FremesetPrincipal

Principal
PrincipalDerecho
Izquierdo

1 1
<<presents>> <<presents>>

MenúBiblioteca Indice de Autor

por Nombre
Publicaciones
1 1
Artículos
Autores
Nombres de Autores
ArtículosNuevo
ArtículosVisitados
{Clasificado, Anotado}

Figure 2.13: Página Presentación

Fuente: (Koch, 2000)

Frameset ÍndiceAutor

MenúBiblioteca Indice de Autor

por Nombre
Publicaciones
Artículos
Inv usuario anónimo:
UsuarioActualBiblioteca-> EsVacio implica
Autores
(ItemsArtículosVisitados-> EsVacio e
ItemsArtículosNuevos -> EsVacio) Nombres de Autores
ArtículosNuevo
ArtículosVisitados
{Clasificado, Anotado}

Figure 2.14: Representación Alternativa para la Página

Fuente: (Koch, 2000)

Modelo de Flujo de Presentación

La figura 2.15 muestra el modelo de flujo de presentación para el escenario “buscar autor
en” en la aplicación biblioteca online. C onsiste de la representación del flujo de m ensajes
entre usuarios, ventanas y objetos de frame. El modelo de flujo de presentación muestra
una representación abstracta ya que la implementación incluirá más objetos, en particular
algunos objetos de control que colaboran en este proceso interactivo.

<<windows>> <<frame>> <<frame>>

Ventana1
u: Usuario

ejecutar (BibliotecaOnline)

mostrar (MenúBiblioteca)

mostrar (InfoBiblioteca)

seleccionar (ItemBuscarAutor)
mostrar (FormaBuscarAutor)

llenar + enviar (FormaAutor)

<<windows>>
abrir ( )
Ventana2

mostrar (ÍndiceAutor)

seleccionar (Autor)

mostrar (Autor)

mostrar (MenúBibliotecaAutor)

seleccionar (ItemArtículo)
mostrar ÍndiceArtículo)

seleccionar (Artículo)

mostrar (Artículo)

Figure 2.15: Modelo de Flujo de Presentación del escenario “ B u sca r A u to r” d e la a p lica ció n
biblioteca online
Fuente: (Koch, 2000)

Bibliografía

Hennicker, R., Koch, N. (2001). A UML-based Methodology for Hypermedia Desing.

Institute of Computer Science Ludwig-Maximilians University of Munich. Munchen
Germany.

Koch, N., (2000). Software Engineering for Adaptive Hypermedia Systems. Reference
Model, Modeling Techniques and Development Process. Ludwig-Maximilians-
Universität München, Germany.