Maestría en Ingeniería

Curso de Ingeniería Web Sesión 2: Métodologías de Diseño de

Aplicaciones Web

Fernando Barraza A. fbarraza@puj.edu.co

Sesión 2 •  Objetivo: Presentar las aproximaciones actuales y

métodos propuestos para diseñar aplicaciones Web •  Temas:

– Que son los métodos en general y como se aplican en la ingeniería Web

– Génesis de los métodos para diseño de aplicaciones Web

– Características de los métodos para diseño de aplicaciones Web

– Revisión de métodos basados en UML – Revisión de otros métodos de diseño

Motivación metodologías Web

• Dadas las carácterísticas propias de una aplicación Web, se requiere de un método particular para desarrollarlas? – R/: Se puede utilizar métodos derivados,

híbridos y probados con las respectivas consideraciónes de las aplicaciones Web

• Que aproximaciones a dichos métodos existen?

Metodologías Web •  Existen varias aproximaciones para el desarrollo de

aplicaciones web dentro de un proceso de producción de software bien definido.

•  La mayoría de estas aproximaciones centran o en aspectos hipermedia o en aspectos más convencionales.

•  Algunas propuestas se basan en: –  Aproximaciones OO que utilizan técnicas de modelado

conceptual para el desarrollo de aplicaciones web. –  Híbridos entre modelado OO y ER –  Ambas utilizan lenguajes propios para modelos particulares o

extensiones mediante perfiles UML

Génesis de los Métodos

Modelado de aplicaciones web con UML

•  Se requiere de una especialización del UML general para representar aspectos específicos como por ejemplo la navegación del sistema.

•  El mecanismo de perfiles es uno de los más usados más no es una metodología para modelar las aplicaciones

•  Existen varias propuestas de metodologías basadas en esta aproximación (Ej. WAE, UWE, WebML)

Revisión WAE: Web Application Extension

•  Propuesto por Jim Conallen (Rational) • Utiliza una aproximación mediante un

perfil UML • Considera como elementos de modelado:

– Páginas web (Web Pages) – Formas (Forms) – Marcos de ventanas (Frames)

Web Pages

Hipervínculos en Web Pages

Modelo del lado cliente

Modelo del lado servidor

Modelado de Formas

Modelo de frames

Consideraciones WAE

• Modelos sencillos mediante extensión UML

• Divide el modelo logíco del lado cliente del lado servidor

• No representa la navegación mediante un modelo conceptual si no mediante las clases que representan las unidades de programa (paginas, scripts, etc.)

Aproximaciones OO •  Los métodos de diseño orientados a objetos que utilizan

técnicas de modelado conceptual no proporcionan primitivas para especificación de la navegación, presentación, etc.

•  Como elicitar y representar la semántica navegacional en modelos conceptuales? –  R / Extender los método de producción OO para la construcción

de aplicaciones web a través de la incorporación de un modelo que representa las características propias de las aplicaciones web.

•  El modelo se representa: –  Utilizando patrones conceptuales para representar los requisitos

de los usuarios (navegación, presentación, etc..). –  Definiendo la semántica navegacional de una aplicación web

capturada mediante un Modelo de Navegación

Modelo de Navegación

Primitivas de Abstracción Básicas

Mapa Navegacional

Contexto de Navegación

Vínculo de Navegación

Ejemplo Mapa Navegacional

Clases Navegacionales

Relaciones entre clases

Relaciones de Contexto

Relación de dependencia Contextual

Ejemplo relación de contexto

Conceptos avanzados de modelado

UWE: UML Web Engineering

•  Basado en UML y RUP •  Sigue un proceso de tres modelos:

UWE: Modelado Conceptual

•  El objetivo del diseño conceptual es construir el modelo conceptual del dominio de la aplicación tomando en cuenta los requerimientos capturas con los casos de uso

•  Se apoya en técnicas tradicionales para construir dicho modelo tales como encontrar clases y asociaciones y definir estructuras de herencia

•  El modelo conceptual se representa por un diagrama de clases de UML común y corriente.

UWE: Modelado de la Navegación

•  Parte del modelo conceptual •  Propone un conjunto de guías para construir el modelo

de navegación el cual representa el espacio de navegación y el acceso a los elementos que pueden ser usados para la navegación.

•  El modelo utiliza elementos como queries, menus, tour guiados e índices.

UWE: Metamodelo de los elementos del modelo de navegación

UWE: Modelado de presentación

•  Ayuda en el diseño de GUI’s abstractas y la interacción del usuario con la aplicación Web.

•  Consiste de dos pasos: –  Tablero de animación (storyboarding) para la GUI (Look and

Feel) –  Construcción del modelo de presentación que provee la fuente

para una implementación (Frames, Páginas dinámicas, etc.)

UWE: Metamodelo de una GUI abstracta (storyboard)

UWE: Metamodelo del modelo de presentación

Caso ejemplo: Sistema de conferencias – Caso de Uso

Caso de Ejemplo: Someter un paper - Diagrama de actividad

Caso de Ejemplo: Dominio del problema - Diagrama de clases

Caso de Ejemplo: Ciclo de vida de un paper - Diagrama de estados

Consistencia de modelos

Caso de Ejemplo: Modelo de navegación

Caso de Ejemplo: Modelo de presentación

Caso de Ejemplo: Escenario de revisión – diagrama de secuencia

Caso de ejemplo: Librería en línea – Caso de Uso

Caso de ejemplo: Modelo conceptual – Diagrama de clases

Caso de ejemplo: Modelo de navegación (espacio)

Caso de ejemplo: Modelo de navegación (estructura)

Caso de ejemplo: Modelo de presentación (Sketch)

Caso de ejemplo: Diagrama de implementación

Créditos •  Jill Aden (jill.aden@eds.com) Lead Technologist – Minnesota

Solution Centre. •  M.W. Richardson (mrichardson@ilogix.com) Lead Applications

Engineer. I-Logix UK •  Simon Pickin (spickin@it.uc3m.es) Departamento de Ingeniería

Telemática, Universidad Carlos III de Madrid. •  Nora Koch, Andreas Kraus. The Expressive Power of UML-based

Web Engineering. •  Nora Koch, Rolf Hennicker. Modeling the User Interface of Web

Applications with UML. •  Armando Arce O. Instituto Tecnológico de Costa Rica. •  Oscar Pastor. Universidad Politécnica de Valencia.