modelos de desarrollo web - primavera...
TRANSCRIPT
![Page 1: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/1.jpg)
MODELOS DE
DESARROLLO WEB
Dr. Mario Rossainz López
Fac. de Cs. de la Computación
Benemérita Universidad Autónoma de Puebla
Primavera 2020
![Page 2: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/2.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
INTRODUCCIÓN:
Modelo de Dominio
Aspectos importantes en las
aplicaciones WEB
Interfaz de usuario
![Page 3: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/3.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
INTRODUCCIÓN:
Aspectos
Conceptuales
Aspectos de
Presentación
Requerimientos
Disjuntos
Mezclan
Separan
Tecnologías Basadas
en objetos
Tecnologías No
Basadas en objetos
![Page 4: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/4.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
INTRODUCCIÓN:
Tecnologías Basadas
en objetos
Acortar el tiempo de desarrollo de la aplicación
Mantenimiento más simple de la aplicación
Desarrollo de la aplicación por capas
CARACTERÍSTICAS:
![Page 5: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/5.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
Desarrollo en Capas de Aplicaciones WEB:
1. Dominios de aplicación (Conceptual)
2. Navegación
3. Interfaz
4. Implementación
![Page 6: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/6.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
1. Diseño Conceptual:
a) Se construye representado por los objetos del dominio, las
relaciones y colaboraciones entre ellos.
b) Se constituye de clases, sus relaciones y subsistemas
c) Se utiliza UML-Extendido y Tarjetas CRC
![Page 7: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/7.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
1. Diseño Conceptual:
![Page 8: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/8.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
2. Diseño Navegacional:
a) Es una vista sobre el diseño conceptual
b) Se construyen modelos diferentes respecto de usuarios diferentes
c) Se utilizan clases y contextos navegacionales para el diseño
d) Las clases navegacionales contienen nodos, enlaces y estructuras
e) Los contextos navegacionales son conjuntos de nodos, enlaces y
clases
![Page 9: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/9.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
2. Diseño
Navegacional:
![Page 10: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/10.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
3. Diseño de la Interfaz Abstracta
a) Construcción de diferentes interfaces para el mismo modelo
navegacional
b) Se utiliza un diseño de interfaz abstracta que especifica la
organización y comportamiento de la interfaz
c) La apariencia física y disposición de las propiedades de la interfaz
abstracta en la pantalla real se lleva a cabo en la fase de
implementación.
![Page 11: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/11.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
3. Diseño de la Interfaz Abstracta
![Page 12: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/12.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
4. Implementación
a) Implementación del diseño
b) En esta fase se tiene en cuenta el entorno donde correrá la
aplicación
c) Se definen los items de información del dominio del problema
![Page 13: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/13.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
4. Implementación
![Page 14: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/14.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
Comparativo de metodologías para el desarrollo de Aplicaciones WEB
![Page 15: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/15.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
![Page 16: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/16.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
1. Metodología Iterativa e Incremental OO basada en UML y PUDS
2. Centrada en actividades de modelado que incluye:
1. Análisis de Requerimientos
2. Diseño Conceptual
3. Diseño de Navegación
4. Modelado de Presentación
5. Modelado de tareas y Visualización de escenarios
3. ArgoUML es una herramienta CASE que soporta el modelado en
UWE y generación semi-automática de código
![Page 17: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/17.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
Modelado de Casos de Uso en UWE
1. Los requerimientos para una aplicación WEB son especificados
mediante un modelo de casos de uso
2. Elementos Principales: Actores, Casos de uso, relaciones
(asociaciones) actor-actor, actor-caso de uso, caso_de_uso-
caso_de_uso
3. Uso de dependencias: <<include>>, <<extends>>
4. Diagramas de casos de uso
5. Descripción textual del funcionamiento de los casos de uso o bien
uso de diagramas de actividades para especificar la secuencia de
acciones realizadas por los actores sobre los casos de uso
UWE (UML-based Web Engineering):
![Page 18: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/18.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Modelado de Casos de Uso en UWE (captura de requerimientos)
![Page 19: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/19.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño Conceptual (Modelado de clases):
1. Se construye una vista estática del sistema en el dominio de la
aplicación
2. Ignora aspectos de navegación, presentación e interacción
3. Se utilizan clases con características adicionales:
1. Asociaciones (agregación, herencia y composición)
2. Roles
3. Multiplicidades
4. En base a los casos de uso y a sus descripciones se construye el
modelo conceptual
![Page 20: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/20.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño Conceptual (Modelado de clases):
![Page 21: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/21.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño de Navegación (clases estereotipadas):
1. Comprende la construcción de dos modelos:
• Modelo del espacio de navegación
• Modelo de la estructura de navegación
2. Los modelos de navegación son representados mediante clases
estereotipadas
• Para entidades:<<navigation-class>>, <<index>>,<<guided-
tour>>, <<query>>, <<menu>>,<<Server Page>>, <<Client
Page>>, <<Form>>
• Para relaciones: <<build>>,<<link>>,<<submit>>
• Otros: <<Javascript>>,<<Applet>>, <<Flash>>
![Page 22: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/22.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño de Navegación. Modelo del Espacio de Navegación
1. Incluye las clases de aquellos objetos que pueden ser visitados
por la navegación sobre la aplicación WEB
2. Los elementos principales son las clases estereotipadas y la
navegabilidad dirigida (asociación estereotipada)
3. Se toman sólo aquellas clases del modelo conceptual reelevantes
para la navegación
4. La información de las clases omitidas pueden ser atributos de
algunas de las clases de navegación
![Page 23: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/23.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):Diseño de Navegación. Modelo del Espacio de Navegación
![Page 24: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/24.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño de Navegación. Modelo de la Estructura de la Navegación
1. Se construye sobre la base del modelo del espacio de navegación
2. Es un refinamiento en la fase de diseño de la aplicación
3. El refinamiento consiste en incluir índices, líneas dirigidas,
consultas y menús
![Page 25: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/25.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño de Navegación. Modelo de la Estructura de la Navegación
![Page 26: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/26.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño o Modelo de Presentación
1. Se representa por un diagrama de clases que tiene una forma
particular utilizando la notación de composición para clases
2. Es un diagrama anidado para modelar interfaces gráficas y
ordenamiento espacial de la información
3. Describe donde y como los objetos de navegación y las primitivas
de acceso son presentadas al usuario
4. Muestra la localización estática de los objetos visibles al usuario
5. Se utilizan los siguientes estereotipos para describir el modelo de
presentación <<text>>, <<form>>, <<button>>, <<image>>,
<<audio>>, <<collection>>, <<anchor>>, <<anchor-collection>>
![Page 27: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/27.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño o Modelo de Presentación
![Page 28: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/28.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño o Modelo de Presentación
![Page 29: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/29.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño de Escenarios WEB (diagramas de interacción y estados)
1. Se utilizan los diagramas de trancisión de estados para visualizar
escenarios de navegación.
2. Los detalles del modelo de la estructura de navegación especifican
los eventos que provocan las transiciones, haciendo explícitas las
acciones a realizarse
3. Se pueden utilizar diagramas de secuencia para mostrar la
interacción de los objetos en orden temporal
![Page 30: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/30.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Diseño de Escenarios WEB (diagramas de interacción y estados)
![Page 31: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/31.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Modelado de Tareas (diagramas de actividades)
1. Se modelan las tareas realizadas por el usuario o por el sistema
que se han propuesto en diferentes notaciones de UML: clases
estereotipadas, casos de uso, diagramas de actividades, de
transición de estados, etc., mediante los diagramas de actividades
2. Los diagramas de actividades son considerados mapas de
caminos del comportamiento funcional de un sistema
![Page 32: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/32.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Modelado de Tareas (diagramas de actividades)
![Page 33: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/33.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Modelado de Componentes (diagramas de componentes)
1. UWE utiliza los diagramas de componentes de UML para
documentar la distribuicón de los componentes de una aplicación
WEB
2. Los elementos principales son los nodos (cubos) y dentro de ellos
objetos y componentes que residen dentro de una fuente
computacional
3. Un componente es una parte física de un sistema modelado en
UML como un rectángulo con 2 rectángulos más pequeños
superpuestos
![Page 34: MODELOS DE DESARROLLO WEB - Primavera 2020rossainz.cs.buap.mx/ModDesWeb_semestral/2_SlidesPPT/2_Metodol… · Metodologías para el Desarrollo de Software Basado en WEB Modelado de](https://reader033.vdocuments.mx/reader033/viewer/2022053015/5f16ba3c0e424028014d61d1/html5/thumbnails/34.jpg)
Metodologías para el Desarrollo de
Software Basado en WEB
UWE (UML-based Web Engineering):
Modelado de Componentes (diagramas de componentes)