UNIVERSIDAD SAN PEDRO

FACULTAD DE INGENIERÍA
PROGRAMA ACADÉMICO PROFESIONAL DE INGENIERÍA
INFORMÁTICA Y DE SISTEMAS

TEMA
“MODELO NAVEGACIONAL”

“INFORME DE INGENIERIA WB”

AUTOR(ES)

o PRINCIPE GUERRA, INGRID

CHIMBOTE 12 DE DICIEMBRE DEL 2018

 MODELO NAVEGACIONAL

Es una fase de la metodología UWE.

METODOLOGIA UWE

Uwe es un método, de ingeniería WEB orientada a objetos basada en UML, que puede
ser utilizado para la especificación de aplicaciones WEB.

El modelo que propone UWE está compuesto por fases:

Modelo Lógico-Conceptual:

UWE apunta a construir un modelo conceptual de una aplicación web, procura no hacer
caso en la medida de lo posible de cuestiones relacionadas con la navegación, y de los
aspectos de interacción de la aplicación web. La construcción de este modelo lógico-
conceptual se debe llevar a cabo de acuerdo con los casos de uso que se definen en la
especificación de requerimientos. El modelo conceptual incluye los objetos implicados
en las actividades típicas que los usuarios realizaran en la aplicación web.

Modelo de Navegación:

Consta de la construcción de dos modelos de navegación, el modelo del espacio de

navegación y el modelo de la estructura de navegación. El primero especifica que objetos
serán visitados por el navegador a través de la aplicación. El segundo define como se
relacionarán.

Modelo de Presentación:

Describe donde y como los objetivos de navegación y accesos primitivos serán

presentados al usuario, es decir, una representación esquemática de los objetivos visibles
al usuario.

Interacción Temporal:

Presenta los objetos que participan en la interacción y la secuencia de los mensajes

enviados entre ellos.

Escenarios Web:

Permiten detallar la parte dinámica del modelo de navegación, especificando los eventos
que disparan las situaciones, definen condiciones y explícitamente incluyen las acciones
que son realizadas. Junto con el modelo de interacción temporal, los escenarios Web
proveen la representación funcional dinámica del modelo de navegación.

2
Diagramas:

Los diagramas usados por UWE, son diagramas UML puro. Entre los más importantes
tenemos: diagramas de estado, de secuencia, de colaboración y diagramas de actividad.

MODELO NAVEGACIONAL

El modelado de navegación incluye enlaces entre nodos o elementos externos, así como
herramientas de navegación. Dicho modelo permite representar la navegación a páginas
relacionadas a través de asociaciones o enlaces hipertextuales. Dichas asociaciones se
etiquetan, pueden tener asociados atributos y pueden ser unidireccionales o
bidimensionales. Además, pueden incluirse relaciones n-arios con varios orígenes o
destinos. El modelo de navegación deberá importar los elementos definidos en el modelo
estructural Web, pero agrega un elemento más en la notación presente en la tabla 1.

TABLA 1

El modelo de estructura de navegación define la estructura de nodos y links de una

WebApp mostrando cómo se puede realizar la navegación utilizando elementos de acceso
tales como índices, visitas guiadas, consultas y menús.

3
Diseño navegacional consta de dos etapas:

 La definición del espacio de navegación

 El diseño de las estructuras de navegación

1. La definición del espacio de navegación:

Se trata de una vista del diagrama conceptual, se define mediante el diagrama de
clases UML y se distinguen con el estereotipo NC.

CARACTERISTICAS:

 Las clases conceptuales que son importantes para el usuario, permanecen en el

modelo navegacional.
 Las clases que no visitan, pero que contienen atributos importantes, no aparecen
en el modelo navegacional, y sus atributos se muestran como parte de otras clases.
 En el caso de vistas complejas se emplea Object Query Language para
construirlas.
 Para evitar caminos navegacionales profundos, se incorporan al modelo de
navegación, asociaciones adicionales que están etiquetadas con un estereotipo y
representan la navegación directa entre clases.
 Las composiciones en el diagrama de clases navegacionales son interpretadas
como la creación de un nodo de hipermedia compuesto, en la que varios nodos se
muestran juntos.

4
2. El diseño de las estructuras de navegación

Establece las estructuras de acceso que permiten visitar los objetos del espacio
navegacional. Están constituidas por menús, índices, visitas guiadas, y formulación.
Todos ellos son clases con estereotipos.

CARACTERISTICAS

Los índices tienen referencias a una colección de objetos, y permiten la navegación

directa a ellos.

 Las visitas guiadas contienen una colección de referencias, y permiten la

navegación secuencial a través de la misma. Los índices y visitas guiadas pueden
definir la colección de objetos a la que están asociados de forma dinámica
mediante el uso de formularios de entrada y condiciones de selección.
 Un menu es un objeto navegacional que tiene un número fijo de asociaciones a
estructuras de acceso u objetos.
 Un formulario permite al usuario ingresar información para completar las
condiciones de selección de objetos pertenecientes a las colecciones de índices y
visitas guiadas.

En general Modelo de Navegación:

 Especificación de las características navegacionales de una aplicación web.

 Basado en un Modela de Objetos y en los requisitos de navegación.
 Se construye a partir de las primitivas de abstracción navegacionales.
 Integrado con las restantes vistas del esquema conceptual.
 Define y estructura el acceso de los diferentes usuarios con el sistema, en función
de su objeto.
 Construye un grafo navegacional asociado a cada usuario formado por
 Nodos
 Unidades de interacción que proporcionan acceso a datos y
funcionalidad relevante para el usuario.
 Enlaces

5
  Relación de alcance entre nodos para conseguir cierto objetivo.

Navegación es el cambio de nodo conceptual al

activar un enlace navegacional

 Primitivas de Abstracción Básicas:

 Mapa Navegacional
“Visión global de una aplicación web según un perfil de usuario”
 Contexto de Navegación
“Conjuntos de objetos que el usuario ira navegar”
 Vinculo de Navegación
“Indica la navegación entre contextos de navegación”
 Clase Navegacional
“Contenido de la información por el cual los usuarios navegaran”
 Relaciones
“Maneras de navegar para acceder al contenido de la información”

 Primitivas de abstracción Mapa de Navegación:

 El Modelo de Navegación está compuesto por un conjunto de mapas de
navegación.
 Define el sitio web
 Asociado a un agente del Modelo Conceptual
 Visión global del sistema para cada tipo de usuario
 Grafo Navegacional formado por:
 Contextos de Navegación(nodos)
 Vínculos Navegacionales(arcos)

6
 Primitivas de abstracción Contexto Navegacional
 Unidad de Interacción Abstracción básica con el usuario.
 Representa una vista parcial del sistema adecuada para una determinada
actividad.
 Proporciona acceso a datos y funcionalidad asociadas con el usuario
propietario del mapa.
 Está compuesta por:
 Clases navegacionales: Recuperan información del sistema
 Relaciones navegacionales: Complementan la información de las
clases navegacionales.

7
  Gráficamente es un paquete UML estereotipo con la palabra reservada
<<context>>

 Primitivas de abstracción Contexto Navegacional

 Los contextos tienen un carácter navegacional que permite estructurar la
navegación por el sistema
 Los caracteres de los contextos pueden ser:
Secuencia: Solo son accesibles siguiendo uno de los caminos de
navegación especificados.
Exploración: Son accesibles desde cualquier ubicación en la aplicación.

8
 Primitivas de abstracción Vinculo Navegacional
 Define una relación de alcance(navegación)entre Contextos de
Navegación.
 Define implícitamente a partir de las relaciones navegacionales definidas
dentro de los contextos y por el carácter de los contextos (de exploración
o de secuencia)

9
 Primitivas de abstracción Clase Navegacional
 Proyecciones de visibilidad sobre clases existentes en el Modelo de
Objetos con respecto a:
 Atributos: datos del sistema visibles por el usuario.
 Servicios: Funcionalidad ejecutable por el usuario.
 Gráficamente son clases UML estereotipadas con la palabra reservada
<<view>>

 Existen de dos tipos:

 Clase Directora: es la clase principal de un contexto. Existe una única por
contexto(obligatoria). El contexto se centra en presentar información y
funcionalidad de esta clase.
 Clases Complementarias: Su utilidad es complementar la información de la
clase directora. Pueden aparecer varias por contexto (no son obligatorias).

10
 Primitivas de abstracción Relación Navegacional
 Es una relación binaria unidireccional existente entre dos clases de un contexto.
 Se define sobre una relación agregación o herencia entre dos clases del Modelo
de Objetos.
 Complementa la información sobre la clase de la cual parte la relación,
recuperando la población relacionada.
 Dos tipos:
 Relaciones de Dependencia Contextual
 Relaciones de Contexto
 Relación de Dependencia Contextual
 Indica la existencia de una relación entre dos clases de un contexto, pero
no define una semántica navegacional entre ellas.
 Complementa la clase navegacional origen con su población relacionada
 Indicada una recuperación de información relacionada de las instancias
de la clase complementaria.
 Gráficamente se representa mediante una línea discontinua

11
  Relación de Contexto
 Complementa la clase navegacional origen con su población
relacionada
 Define un vínculo navegacional entre contextos, indicando la
dirección de navegación.
 Implica necesariamente la existencia de un contexto
navegacional(destino) en el que la clase directora es la clase destino de
la relación
 Gráficamente se representa mediante una línea continua

Primitivas de abstracción Relación Navegacional

12
El modelo de estructura de navegación se representa mediante diagramas de clases UML
estereotipados con las clases de navegación y procesos, menús y primitivas de acceso y
así también los links de navegación y proceso.

EJEMPLO:

En un sistema para la web es útil saber cómo están enlazadas las páginas. Ello significa
que necesitamos un diagrama conteniendo nodos (nodes) y enlaces (links).

Pero, ¿qué es un nodo? Nodos son unidades de navegación y están conectados por medio
de enlaces. Nodos pueden ser presentados en diferentes páginas o en una misma página.

UWE provee diferentes estereotipos, los que presentaremos mediante nuestro ejemplo.
La forma más simple de obtener un Diagrama de Navegación básico es utilizando
la Transformación Content to Navigation. En este caso obtenemos para nuestro ejemplo
un diagrama que contiene más nodos de los necesarios. Para los nodos y enlaces son
usados los estereotipos «navigationClass» and «navigationLink»:

13
¿Queremos realmente modelar el enlace desde el contacto a la dirección o el teléfono? -
No, porque no son relevantes para la navegación. Pues borremos ambos del árbol de
contenido del modelo.

AddressBook será nuestra página principal del sitio web. Lo cual se indica con el tagged
value {isHome}.
¿Es pensable un sitio web para una agenda de direcciones con la información de todos los
contactos en la misma página web? - No es eso lo que queremos.

El objetivo es una aplicación en la cual se puede acceder a las operaciones de

nuestro diagrama de casos de uso. Por este motivo necesitamos un sitio que provee
conexiones a diferentes nodos:

1. ContactList - cada contacto debe ser alcanzable usando un enlace desde la página
principal del sitio web
2. (contact)Search - buscar un contacto
3. ContactCreation - crear un nuevo contacto y visualizarlo

14
En UWE, puede usarse un «menu», para navegar a diferentes clases. Insertar uno y
asignarle el nombre "MainMenu":

1. Podemos insertar la lista de contactos (ContactList) casi del mismo modo. El

estereotipo «index» es usado para listar una cantidad de objetos del mismo tipo.
Agrega las otras dos clases usando el panel de MagicUWE:
2. La clase para la búsqueda debe tener un estereotipo «query». Una búsqueda implica
ejecución de código, por ello conectamos esta clase con una asociación «processLink» .
3. ContactCreation es también un proceso, pero no uno predefinido, por ello usamos el
estereotipo «processClass» (modelaremos la acción asociada más adelante).

Si un nuevo contacto es creado, es útil visualizarlo luego, y en el caso de una búsqueda,

se espera la visualización de un lista (ContactList) con los resultados. Usamos un
estereotipo «processLink» para estas asociaciones salientes y dirigidas para prohibir la
navegación hacia atrás como en el caso de ContactCreation. Esto evita la creación por
error de duplicados.

15
nombres de estereotipos y sus iconos

clase de navegación menú

índice pregunta

visita guiada clase de proceso

nodo externo

Para completar nuestro Modelo de Navegación (Navigation Model), tenemos que

agregar la funcionalidad faltante de borrar y actualizar contactos (ContactDeletion y
ContactUpdate) (nuevamente véase diagrama de casos de uso). Estas dos clases son
ambas accedidas desde el contacto concreto, por ello necesitamos nuevamente un
menú (y lo nombramos ContactMenu indicando que está ubicado en la página de cada
contacto):

16
17