maestría en ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… ·...
TRANSCRIPT
![Page 1: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/1.jpg)
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. [email protected]
![Page 2: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/2.jpg)
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
![Page 3: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/3.jpg)
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?
![Page 4: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/4.jpg)
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
![Page 5: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/5.jpg)
Génesis de los Métodos
![Page 6: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/6.jpg)
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)
![Page 7: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/7.jpg)
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)
![Page 8: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/8.jpg)
Web Pages
![Page 9: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/9.jpg)
Hipervínculos en Web Pages
![Page 10: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/10.jpg)
Modelo del lado cliente
![Page 11: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/11.jpg)
Modelo del lado servidor
![Page 12: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/12.jpg)
Modelado de Formas
![Page 13: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/13.jpg)
Modelo de frames
![Page 14: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/14.jpg)
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.)
![Page 15: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/15.jpg)
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
![Page 16: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/16.jpg)
Modelo de Navegación
![Page 17: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/17.jpg)
Primitivas de Abstracción Básicas
![Page 18: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/18.jpg)
Mapa Navegacional
![Page 19: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/19.jpg)
Contexto de Navegación
![Page 20: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/20.jpg)
Vínculo de Navegación
![Page 21: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/21.jpg)
Ejemplo Mapa Navegacional
![Page 22: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/22.jpg)
Clases Navegacionales
![Page 23: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/23.jpg)
Relaciones entre clases
![Page 24: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/24.jpg)
Relaciones de Contexto
![Page 25: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/25.jpg)
Relación de dependencia Contextual
![Page 26: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/26.jpg)
Ejemplo relación de contexto
![Page 27: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/27.jpg)
Conceptos avanzados de modelado
![Page 28: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/28.jpg)
UWE: UML Web Engineering
• Basado en UML y RUP • Sigue un proceso de tres modelos:
![Page 29: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/29.jpg)
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.
![Page 30: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/30.jpg)
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.
![Page 31: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/31.jpg)
UWE: Metamodelo de los elementos del modelo de navegación
![Page 32: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/32.jpg)
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.)
![Page 33: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/33.jpg)
UWE: Metamodelo de una GUI abstracta (storyboard)
![Page 34: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/34.jpg)
UWE: Metamodelo del modelo de presentación
![Page 35: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/35.jpg)
Caso ejemplo: Sistema de conferencias – Caso de Uso
![Page 36: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/36.jpg)
Caso de Ejemplo: Someter un paper - Diagrama de actividad
![Page 37: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/37.jpg)
Caso de Ejemplo: Dominio del problema - Diagrama de clases
![Page 38: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/38.jpg)
Caso de Ejemplo: Ciclo de vida de un paper - Diagrama de estados
![Page 39: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/39.jpg)
Consistencia de modelos
![Page 40: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/40.jpg)
Caso de Ejemplo: Modelo de navegación
![Page 41: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/41.jpg)
Caso de Ejemplo: Modelo de presentación
![Page 42: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/42.jpg)
Caso de Ejemplo: Escenario de revisión – diagrama de secuencia
![Page 43: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/43.jpg)
Caso de ejemplo: Librería en línea – Caso de Uso
![Page 44: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/44.jpg)
Caso de ejemplo: Modelo conceptual – Diagrama de clases
![Page 45: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/45.jpg)
Caso de ejemplo: Modelo de navegación (espacio)
![Page 46: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/46.jpg)
Caso de ejemplo: Modelo de navegación (estructura)
![Page 47: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/47.jpg)
Caso de ejemplo: Modelo de presentación (Sketch)
![Page 48: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/48.jpg)
Caso de ejemplo: Diagrama de implementación
![Page 49: Maestría en Ingenieríacic.puj.edu.co/wiki/.../fetch.php?media=materias:ingweb_sesion2-201… · Metodologías Web • Existen varias aproximaciones para el desarrollo de aplicaciones](https://reader034.vdocuments.mx/reader034/viewer/2022042209/5eaca9e77152ef6b673fe8c7/html5/thumbnails/49.jpg)
Créditos • Jill Aden ([email protected]) Lead Technologist – Minnesota
Solution Centre. • M.W. Richardson ([email protected]) Lead Applications
Engineer. I-Logix UK • Simon Pickin ([email protected]) 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.