INSTITUTO TECNOLOGIO NACIONAL DE MEXICO

CAMPUS ORIZABA

MATERIA:
Metodologías Emergentes para la Web
CLAVE:
6gAD
SEMESTRE:
ENERO-JUNIO 2020
HORA:
16:00-17:00
CATEDRATICO:
Jorge Luis Villa Paniagua
TEMA:
Elaborar los modelos propuestos por la metodología UWE para un
caso práctico 2. Elaborar los modelos propuestos por la metodología
WebML para un caso práctico.
PRESENTA:
Serapio Lagunes Carlos Alfonso
Índice

Índice.............................................................................................................................2
1. Introducción a UWE.............................................................................................3

1.1 ¿Qué es UWE?............................................................................3

1.2 UWE y su relación con UML........................................................4

1.3 Herramientas SW........................................................................5

1.4 Modelos de UWE.........................................................................6

1.4.1 Modelo de Contenido.....................................................................................6
1.4.2 Modelo de navegación...................................................................................7
1.4.3 Modelo de presentación.................................................................................9
1.4.4 Modelo de Proceso......................................................................................10
2 Caso Práctico: Sistema de control odontológico................................................12
2.1 Planteamiento del problema...............................................................................12
2.2 Uso de la metodología UWE..............................................................................12
2.3 Funciones...........................................................................................................13
2.4 Modelo de Casos de Uso...................................................................................13
2.5 Modelo de Contenido..........................................................................................17
2.6 Modelo de Navegación.......................................................................................17
2.7 Modelo de Presentación.....................................................................................18
2.8 Modelo de Proceso.............................................................................................23
2.9 Modelo de Estructura de proceso.......................................................................23
2.10 Modelo de Flujo de proceso...............................................................................23
3 Referencia...........................................................................................................25
1. Introducción a UWE

1.1 ¿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.
Además de estar considerado como una extensión del estándar
UML, también se basa en otros estándares como por ejemplo: XMI como
modelo de intercambio de formato, MOF para el meta- modelado, los
principios de modelado de MDA, el modelo de transformación del lenguaje
QVT y XML.

El modelo que propone UWE está compuesto por 6 etapas o sub-

modelos:

1. Modelo de Casos de Uso: modelo para capturar los requisitos del

sistema.
2. Modelo de Contenido: es un modelo conceptual para el
desarrollo del contenido.
3. Modelo de Usuario: es modelo de navegación, en el cual se
incluyen modelos estáticos y modelos dinámicos.
4. Modelo de estructura: en el cual se encuentra la presentación del
sistema y el modelo de flujo.
5. Modelo Abstracto: incluye el modelo a de interfaz de usuario y el
modelo de ciclo de vida del objeto.
6. Modelo de Adaptación.
 En cuanto a los requisitos, UWE los clasifica dependiendo del
carácter de cada uno. Además distingue entre las fases de captura,
definición y validación de requisitos.

1.2 UWE y su relación con UML

UWE define una extensión del Lenguaje Unificado de Modelado
(UML). Ésta, es considerada como una extensión ligera de peso e incluye
en su definición tipos, etiquetas de valores y restricciones para las
características especificas del diseño Web, las cuales, unidas a las
definiciones de UML forman el conjuntos de objetos de modelado que se
usarán para el desarrollo del modelo utilizado en UWE.
Las funcionalidades que cubren UWE abarcan áreas relacionadas
con la Web como la navegación, presentación, los procesos de negocio y
los aspectos de adaptación.
Una de las ventajas de que UWE extienda el estándar UML es la
flexibilidad de éste para la definición de un lenguaje de modelado
especifico para el dominio web y sobretodo la aceptación universal de
dicho estándar en el campo de la ingeniería del software.
Otra gran ventaja es que actualmente existen múltiples de
herramientas CASE basadas en UML, con lo cual es relativamente
sencillo su utilización y ampliación para utilizar los objetos de modelado
definidos en UWE. Estas herramientas se verán en el siguiente punto.
1.3 Herramientas SW
Como se ha explicado en la sección anterior, para aplicar las
funcionalidades que añade UWE, se utilizan las mismas herramientas
software de modelado basadas en UML y se les añade una extensión a la
aplicación para que permita estas nuevas funcionalidades.

Se ha desarrollado un plugin para una de las herramientas UML

más conocidas, MagicDraw, que es una herramienta que soporta la
versión 2.1.2 de este estándar para lenguajes de programación como por
ejemplo Java, C++ o C#. Este plugin llamado MagicUWE, es de libre
distribución pudiendo adquirir gratuitamente y está desarrollado para la
versión 16 de MagicDraw. En la página oficial de UWE se encuentra
disponible así como un manual de instalación y uso de esta extensión.

También se ha desarrollado UWEet, que es un plugin para la

herramienta UML de código abierto UMLet. Esta herramienta se
caracteriza por una interfaz simple para el usuario y por su compatibilidad
con Eclipse a la hora de compartir diagramas UML. También puede
exportar estos a distintos formado como el archiconocido PDF. Dicho esto,
este plugin proporciona a UWEet de una paleta en su interfaz con todos
los elementos que son definidos por UWE, permitiendo así la extensión
del lenguaje UML. UWEet también se encuentra disponible de manera
gratuita en la página web oficial de UWE.

Para uno de los entornos de desarrollo más utilizados en todo el

mundo, Eclipse, también se ha creado una extensión. Este plugin se
denomina UWE4JSF y permite la generación automática de aplicaciones
web para JavaServer Faces (JSF) platform.

Por último destacar que existe una herramienta software basada

específicamente en la metodología UWE, esta herramienta fue
desarrollada como una extensión de ArgoUML, herramienta de modelado
basada en UML. Se trata de la aplicación ArgoUWE que permite la
semiautomática generación de los modelos característicos de UWE como
son el de navegación, el de presentación, el de procesos y el de
adaptación. Está herramienta también se encuentra disponible en la
página web oficial de UWE.
1.4 Modelos de UWE
En esta sección se explicarán los modelos para cada una de los
aspectos web que cubre la metodología UWE, recordemos que estos
aspectos eran navegación, presentación, los procesos de negocio y
adaptación. Así procedemos a explicar con un breve ejemplo cada uno de
estos modelos.

1.4.1 Modelo de Contenido

Este modelo especifica cómo se encuentra relacionados los
contenidos del sistema, es decir, define la estructura de los datos que se
encuentran alojados en el sitio web. A continuación, se muestra un
ejemplo de este modelo contenido en la página web de UWE.

Ilustración 1

En este ejemplo se puede ver representado que el contenido web

está formado por una agenda básica de contactos, está agenda
representada por la clase AddressBook contiene un conjunto de uno o
más contactos (clase Contact) , cada uno de ellos tiene un nombre,
 un email, una dirección y un teléfono. De los cuales los dos primeros
son de tipo String y los dos últimos a son estructuras de otros
atributos, das por las clases Address y Phone, cada

represent
contacto puede tener una dirección y un teléfono principal y otros
secundarios.

1.4.2 Modelo de navegación

 Ilustración 3

Para empezar tenemos AddressBook como página de inicio, así

que está etiquetada como {isHome} y como clase de navegación con el
símbolo correspondiente (ver símbolos más abajo). La página de inicio
enlaza con un menú, que sería nuestra página 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 función 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 serán 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 también cuando se realiza una búsqueda se debe mostrar
la lista con los contactos del resultado, de ahí que exista otro processLink
entre las clases Search y ConctactList, esta ultima además etiquetada
como index, al ser una lista.
1.4.3 Modelo de presentación

Ilustración 5
 1.4.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 sería:
 Ilustración 6

En este diagrama se puede ver que hay clases para definir 3 operaciones que necesita una
confirmación. Así por ejemplo si el usuario quiere borrar un contacto el mensaje será
mostrado y después haciendo clic en “ok” el contacto será borrado. Las operaciones de
actualización y creación 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 operación de borrado de contactos tenemos el
siguiente diagrama:

Ilustración 7

Aquí podemos ver que la etiqueta <<userAction>> es usada para indicar las
interaccione entre el usuario y la página web iniciando un proceso o respondiendo a una
petición de información. Se puede ver el flujo que ocurre en cada operación con sus
distintas rutas en caso de éxito en la operación o en caso de error.
 2 Caso Práctico: Sistema de control
odontológico
2.1 Planteamiento del problema.
¿Cómo influenciará el uso de una metodología web adecuada en el desarrollo de las
aplicaciones informáticas?
Mediante el análisis comparativo de metodologías se seleccionará la herramienta
metodológica más adecuada para el control del desarrollo de aplicaciones web, lo cual
permitirá construir software de calidad, debido a que los modelos mencionados hacen un
enfoque detallado en el análisis de requerimientos y en los procesos de modelado
conceptual y navegacional, analizando principalmente la interfaz abstracta del software
desarrollado, garantizando de esta manera la estructuración formal y la correcta
implementación de la aplicación informática.

¿Cómo ayudará la selección de una metodología web adecuada en el desarrollo de la

aplicación odontológica?

El uso de una metodología adecuada ayudará en la construcción de una buena aplicación

web, cumpliendo con los requerimientos detallados en la fase de análisis previo, realizando
de igual manera el análisis del modelado conceptual, navegacional e interfaz abstracta,
presentando un software eficiente, robusto y con una interfaz muy visual y aceptable por el
usuario final, entregando de esta manera una herramienta informática muy útil y funcional,
la cual será de gran utilidad para el sector médico odontológico.

2.2 Uso de la metodología UWE

Es el enfoque en la creación e implementación de la aplicación de control odontológica
mediante el uso de la metodología UWE que resultó ser el estándar metodológico mejor
adaptable en el desarrollo de aplicaciones web.
El software odontológico fue desarrollado con el objetivo de automatizar los procesos de
control, y de esta manera garantizar la calidad y seguridad de la información en la
institución dental.
Para el levantamiento de requerimientos se realizó una entrevista al odontólogo
beneficiario de la aplicación web, quien expuso las necesidades mediante la siguiente
tabla.
De acuerdo con los requerimientos se estableció la existencia de un usuario del sistema
identificado como Administrador quién tendrá acceso total a la aplicación informática, a
continuación, se detalla las funciones del usuario:

2.3 Funciones
Control de Usuarios
Tendrá el acceso al sistema mediante la autenticación de la aplicación y podrá
realizar las
siguientes tareas:
 Control de acceso.
 Ingreso de usuarios.
 Actualización de usuarios.
 Eliminación de usuarios.
 Lectura de usuarios.

Control de Pacientes.
Podrá controlar la información de los pacientes realizando las siguientes tareas:
 Ingreso de pacientes.
▪ Control odontológico
 Actualización de pacientes.
 Eliminación de pacientes.
 Lectura de pacientes.
Control de Médicos (Opcional).
Podrá controlar la información de los médicos realizando las siguientes tareas:
 Ingreso de médicos.
 Actualización de médicos.
 Eliminación de médicos.
 Lectura de médicos.
Control de Procedimientos.
Podrá controlar la información de los procedimientos que realiza la entidad,
ejecutando las
siguientes tareas:
 Ingreso de procedimientos.
 Actualización de procedimientos.
 Eliminación de procedimientos.
 Lectura de procedimientos.

Posterior a la identificación de requisitos se desarrolla las siguientes fases del

modelo UWE para la construcción de la aplicación odontológica.

2.4 Modelo de Casos de Uso.

La fase Modelo de casos de uso establece los requerimientos del sistema
mediante el modelado de casos de uso de UML, donde el actor principal es el
usuario Administrador, que tendrá acceso a la aplicación odontológica y a su
vez realizará el control de usuarios, pacientes, médicos, procedimientos y
reportes, en la Figura 40 se muestra el diagrama de casos de uso donde se
identifica al actor y sus funciones.

Usuarios
La Figura 41 presenta el diagrama de casos de uso que identifica las funciones
que cumple el Administrador para el acceso y control de usuarios del sistema.
Pacientes
La Figura 42 presenta el diagrama de casos de uso que identifica las funciones
que cumple el Administrador, para el control de pacientes.

Médicos
La Figura 43 presenta el diagrama de casos de uso que identifica las funciones
que cumple el Administrador, para el control de médicos.
Procedimientos
La Figura 44 presenta el diagrama de casos de uso que identifica las funciones que
cumple el Administrador, para el control de procedimientos.
2.5 Modelo de Contenido.
Posterior a la identificación de requisitos, se desarrolla la fase del modelo de
contenido que se identifica con la elaboración del diagrama de clases de UML sin
necesidad de detallar los elementos y notaciones adicionales o específicas como se
realizó en la fase anterior, a continuación, se presenta la Figura 45 que detalla el
modelo mencionado.

2.6 Modelo de Navegación.

La fase de navegación utiliza el diagrama de navegación de UML, el cual
permite especificar la exploración que el usuario efectúa en la aplicación web,
los menús, link de dirección y procesos que realiza el Administrador al moverse
en el software desarrollado. A continuación, se presenta la Figura 46 que
identifica el modelo de navegación de la tecnología informática en construcción.
2.7 Modelo de Presentación.

La fase de presentación permite presentar una interfaz abstracta de la interfaz

de usuario, mediante el diagrama de presentación de UML se podrá diseñar las
pantallas principales y los elementos que tendrán las interfaces de la aplicación
web. En la Figura 47 se presenta el diseño de la página principal del software a
desarrollarse.
La Figura 48 presenta los elementos que contendrá el formulario de acceso a la
aplicación informática.
La Figura 49 presenta el diseño estándar de todas las páginas de la aplicación
web, posterior al acceso correcto del sistema

En la Figura 50 presenta la estructura de la página de usuarios mediante el

diagrama de presentación de UML.
En la Figura 51 se presenta la estructura de la página de pacientes mediante el
diagrama de presentación de UML.

En la Figura 52 se presenta la estructura de la página de médicos mediante el

diagrama de presentación de UML.
En la Figura 53 se presenta la estructura de la página de procedimientos
mediante el diagrama de presentación de UML.
2.8 Modelo de Proceso.
En esta fase se detalla a profundidad las acciones y funcionalidades que debe
cumplir el software. Para el desarrollo del modelo se utiliza los diagramas UML
de estructura y de flujo de proceso.

2.9 Modelo de Estructura de proceso.

En esta sub fase se describe las relaciones entre las clases de proceso, en la
Figura 54 se describe el modelo estructura de proceso de la tecnología a
desarrollarse.

2.10 Modelo de Flujo de proceso.

En esta sub fase se describe las actividades de la aplicación web, en la Figura 55 se
especifica el modelo de flujo de proceso mediante el diagrama de flujo de UML.
3 Referencia
 http://repositorio.utn.edu.ec/bitstream/123456789/7874/1/04%20ISC
%20452%20TRABAJO%20DE%20GRADO.pdf

 https://metodologiauwe.wordpress.com/2015/06/25/hello-world/

 https://core.ac.uk/download/pdf/19718949.pdf