LICENCIATURA

EN SISTEMA DE
INFORMACIÓN
Metodología
para el
Desarrollo de
Aplicaciones
Web: UWE
UNIVERSIDAD
NACIONAL DE
MISIONES
¿El por qué de una Metodología de
Desarrollo Web?
Lo que deseamos es controlar el caos que han
provocado en el pasado procesos creativos de
desarrollo con el fin de proporcionar un proceso
sistemático orientado a la mejora de la calidad de
la aplicación final. En esta nueva disciplina se parte
de la base de que las necesidades de evolución,
mantenimiento, la adaptación a nuevos dispositivos
de acceso y la migración a nuevas plataformas y
entornos de desarrollo deben dirigir el proceso del
ciclo de vida.
Para todo esto se han desarrollado metodologías que
permiten estructurar comunicar, entender,
simplificar y formalizar tanto el dominio como las
decisiones de diseño, así como disponer de
documentación detallada para posibles cambios del
software.
Las distintas metodologías se pueden dividir en tres
generaciones en base a su sofisticación, estas son:
- Primera Generación:(Principios de los 90) Se sientan las
bases de la ingeniería Web, en los que se incluyen
conceptos como construcción de navegación,
separación entre estructuras y el contenido durante
el ciclo de desarrollo.
- Segunda Generación: (Segunda mitad de los 90) Se
refinan los primeros modelos y se añaden los soportes de
funcionalidad básica y se llevan a cabo los primeros
esbozos de proceso donde se delimitan los modelos
conceptual, lógico y físico.
- Tercera generación: (A partir del 2000): Se lleva a cabo la
profundización en el soporte para la funcionalidad,
enfatización de la figura del usuario en los métodos, y se
avanza hacia la estandarización de notaciones,
procesos y lenguajes de especificación.
¿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
notación para especificar el dominio (basada en UML) y un
modelo para llevar a cabo el desarrollo del proceso de
modelado. Los sistemas adaptativos y la sistematización
son dos aspectos sobre los que se enfoca UWE.

Otras características relevantes del proceso y método de

autoría de UWE son el uso del paradigma orientado a
objetos, su orientación al usuario, la definición de un
meta-modelo (modelo de referencia) que da soporte al
método y el grado de formalismo que alcanza debido al
soporte que proporciona para la definición de restricciones
sobre los modelos.
Etapas o Sub Modelos
Modelo de Casos de Uso: modelo para capturar los
requisitos del sistema.

Modelo de Contenido: es un modelo conceptual para el

desarrollo del contenido.

Modelo de Usuario: es modelo de navegación, en el cual

se incluyen modelos estáticos y modelos dinámicos.

Modelo Abstracto: incluye el modelo a de interfaz de

usuario y el modelo de ciclo de vida del objeto.

Modelo de estructura: en el cual se encuentra la

presentación del sistema y el modelo de flujo.

Modelo de Adaptación. Este modelo contiene la

descripción de la forma en que se adapta el contenido, los
enlaces y las actualizaciones al modelo de usuario
Requisitos – Modelo de Caso de
Uso
Para la captura de requisitos se utilizan los
diagramas de casos de usos y los casos de
usos
Modelo de Contenido
Este modelo especifica cómo se encuentran
relacionados los contenidos del
sistema, es decir, define la estructura
de los datos que se encuentran
alojados en el sitio web.

El modelo conceptual propone construir un

modelo de clases con estos objetos,
ignorándoos los aspectos de navegación:
Presentación e Interacción, que serán
tratados posteriormente. Los principales
elementos de modelado son; las clases,
asociaciones y paquetes.
Modelo de Contenido
El diseñador va seguir un proceso de
modelado orientado a objetos basado en
UML, los pasos que seguiremos son:
 Distinguir las clases.
 Especificar los atributos más importantes
y funcionamiento.
 Determinar las asociaciones entre las
clases.
 Agregar las clases e identificar la
composición de estas.
 Definir las jerarquías de herencia.
 Definir los restricciones de los métodos.
Modelo de Contenido
Concepto

Atributo

Relaciones
Modelo de Usuario.
Modelo Navegacional
El diseño navegacional no es solo útil para la generación de la
documentación de la estructura de la aplicación sino que también
permite mejorar la estructura de navegabilidad.
El modelo de la navegación comprende de:

• El modelo de espacio de navegación que especifica qué objetos

pueden ser visitados a través de la aplicación Web.

• El modelo de estructura de navegación que define como se

alcanzan estos objetos a través de la Web.

En el proceso de construir el modelo espacial de navegación las

decisiones del diseñador están basadas en el modelo conceptual y
los requisitos de la aplicación definidos en el modo de caso de uso.
Modelo de Usuario.
Modelo de Espacio Navegacional
El modelo del espacio navegacional se construye con las clases de
navegación y asociaciones entre las mismas y son representadas por un
diagrama de clase en UML.
Modelo de Usuario.
Modelo Navegacional
En el modelo de estructura de navegacional los elementos de acceso
son los índices, consultas, y giras guiadas. Los caminos de la
navegación junto con los elementos de acceso se representan por un
modelo de clases que puede construirse en dos pasos:

• El primer paso consiste en reforzar el espacio de navegación

mediante los índices, tutoriales y consultas.
• El segundo paso consiste en derivar los menús directamente
del modelo.
Modelo de Usuario.
Modelo Navegacional
Modelo de Abstracto
Modelo de Presentación
Vamos a modelar el flujo de la presentación, mostrando “dónde” los objetos
de navegación y elementos de acceso al usuario se presentarán, es decir, en
qué frame o ventana el contenido se desplegará y qué enlaces se activarán.
El diseñador tiene que especificar si usará una sola o múltiples ventanas, si se
usarán los frames, y en ese caso, en cuántos framesets se dividirán.
Modelo de Abstracto
Modelo de Presentación
Desarrollo de
Aplicaciones
WEB
Modelo
UID
User Interaction Diagram
(UID)
 Es una descripción diagramática de la
información que se intercambia descripta en
los casos de usos.
 Se enfoca en el intercambio de información
entre el usuario y la aplicación.
 No presenta aspectos de la GUI ni tampoco
cuestiones de navegabilidad.
User Interaction Diagram
(UID)
 Interaction
States: representa la información que
intercambia el usuario y la aplicación.

 Transitons:
es el cambio del foco de interacción
de un Interaction state a otro.
 User Interaction Diagram
(UID) - Elementos
Data Item Interaction
State
Structura
Initial
Interaction
Set State

Opcional Data Alternative

Interaction
State
User Input

System output Calling of

Other UID:
User Interaction Diagram
(UID) - Elementos
Transition Transition con
la selección
de N
elementos
Transition
cuando se
selecciona la No se cambia
opción X el foco

Transition
cuando se
cumple la
condición Y
User Interaction Diagram
(UID) - Pasos
1. De los casos de usos identificar los datos que se
intercambia entre el usuario (Actor) y la aplicación.
2. Ubicar los datos en los Interaction State. (Considerar
las dependencias)
3. Distinguir los datos ( ingresados, obligatorios,
opcional, salidas)
4. Definir las Transitions
5. Determinar las operaciones de las Transitions
6. Requerimientos no funcionales pueden ser
representados con <Text>
User Interaction Diagram
(UID) – Caso de Uso
El usuario ingresa el nombre del artista, opcionalmente
puede ingresar el año del CD buscado. El sistema retornará
un conjunto de datos con los datos de los artistas que
coincidan con el ingresado; si solo un nombre es encontrado,
entonces se mostrara los CD del artista. El actor selecciona
el artista que le interesa. El sistema retorna los CD del artista
seleccionado. Por cada CD encontrado, se mostrara el titulo,
el nombre del artista, el año, precio, disponibilidad. El
usuario puede acceder a más información acerca del CD si lo
desea ( caso de uso Ver CD). Si el usuario desea comprar uno
o más CD, puede seleccionarlo y agregarlo al canasto de
compra para confirmar la compra más adelante (caso de uso
Comprar)
User Interaction Diagram (UID)
– Caso de Uso 1. De los casos de usos
El usuario ingresa el nombre del
artista, opcionalmente puede identificar los datos que se
ingresar el año del CD buscado. intercambia entre el
El sistema retornará un conjunto usuario (Actor) y la
con los nombre de los artistas
que coincidan con el ingresado; si aplicación.
solo un nombre es encontrado, 2. Ubicar los datos en los
entonces se mostrara los CD del Interaction State. (Considerar
artista. El actor selecciona el
artista que le interesa. El las dependencias)
sistema retorna los CD del 3. Distinguir los datos
artista seleccionado. Por cada ( ingresados, obligatorios,
CD encontrado, se mostrara, el opcional, salidas)
titulo, el nombre del artista, el
año, precio, disponibilidad. El 4. Definir las Transitions
usuario puede acceder a más 5. Determinar las operaciones
información acerca del CD si lo de las Transitions
desea ( caso de uso Ver CD). Si el
usuario desea comprar uno o más 6. Requerimientos no
CD, puede seleccionarlo y funcionales pueden ser
agregarlo al canasto de compra representados con <Text>
para confirmar la compra más
adelante (caso de uso Comprar)
User Interaction Diagram (UID)
– Caso de Uso 1. De los casos de usos
identificar los datos que se
intercambia entre el usuario
(Actor) y la aplicación.
2. Ubicar los datos en los
Interaction State.
(Considerar las
dependencias)
3. Distinguir los datos
( ingresados, obligatorios,
opcional, salidas)
4. Definir las Transitions
5. Determinar las operaciones
de las Transitions
6. Requerimientos no
funcionales pueden ser
representados con <Text>
User Interaction Diagram
(UID) – Caso de Uso
1. De los casos de usos
identificar los datos que se
intercambia entre el usuario
(Actor) y la aplicación.
2. Ubicar los datos en los
Interaction State. (Considerar
las dependencias)
3. Distinguir los datos
( ingresados, obligatorios,
opcional, salidas)
4. Definir las Transitions
5. Determinar las operaciones
de las Transitions
6. Requerimientos no
funcionales pueden ser
representados con <Text>
 Definir el Modelo Conceptual
a partir de los UID
1. Por cada Struture en los UID definir una clase

Artist

CD
Definir el Modelo Conceptual
a partir de los UID
1. Por cada data item, definir un
atributo en una clase, de acuerdo a
lo sigueinte:
1. Dado una instancia de la clase X,
es posible obtener el valor del
atributo A.
Si la respuesta es afirmativa para
una sola clase, entonces este
atributo es de la clase X.
Si la respuesta es afirmativa para
mas de una clase, realizar las
siguientes preguntas:
Artist CD
1. Dado una instancia de la
titulo clase X, es posible obtener la
name información de un valor
año simple de la clase Y.?
precio 2. Dado una instancia de la
… clase Y, es posible obtener la
información de un valor
simple de la clase X.?
El atributo va a formar
parte de la clase que no
puede obtener el atributo
de la otra clase.
Definir el Modelo Conceptual
a partir de los UID
3. Por cada atributo a que aparece en una structure que no
corresponde a la clase del atributo a, establecer un
relación entre la clase del atributo a y la estructura.
4. Para cada UID, por cada structure s1 que este contenida
en otra structure s2, crear una asociación entre las clases.
5. Por cada Transition en cada UID, si hay diferentes clases,
definir una asociación entre las clases
6. Por cada opción que tiene diferentes fuentes, definir las
relación entre las clases
7. Por cada operación, se pude definir como operaciones de
la clase
8. Ajustes Finales
1. Definir las Generalizaciones
2. Definir Asociaciones no encontradas
Definir el Modelo Conceptual
a partir de los UID
Artist CD
name titulo
año
precio
…