Maestría en Ingeniería

Curso de Ingeniería Web Sesión 2: Metodologías de Diseño de

Aplicaciones Web Parte B

Fernando Barraza A.

fbarraza@javerianacali.edu.co

Sesión 2 – Parte B •  Objetivo: Presentar las metodología para diseño de

aplicaciones Web OOWS y WebML •  Temas:

–  OOWS •  Vision General •  Estrategia de desarrollo •  Técnicas de mapero •  Caso de Ejemplo

–  WebML •  Enfoque •  Modelado •  Caso de Ejemplo

OOWS

•  Object-Oriented Approach for Web Solutions Modeling

•  Es una aproximación para definir semántica de navegación en modelos Orientados a Objeto.

•  Utiliza la notación UML adaptada para definir de una manera precisa un modelo de navegación.

•  Define nuevos conceptos (primitivas navegacionales) que se aplicarán en el Modelo Conceptual.

Visión General OOWS

Aproximación OOWS

Arquitectura

Estrategia de desarrollo

… Estrategia

Mapeo mediante patrones de traducción

… mapeo

… mapeo

… mapeo

Ejemplo: Tienda de música en línea

Descripción del Sistema

Modelo de Objetos

Mapa Navegacional

Contexto Navegacional Autores

Aplicación Web Generada

Web Modeling Language (WebML)

•  Lenguaje conceptual para diseño de alto nivel de aplicaciones web intensivas en el manejo de datos

•  Representa muchos años de investigación y desarrollo en el Politécnico de Milano, Italia.

•  Implementado comercialmente en la herramienta WebRatio (www.webratio.com)

•  Ejemplos reales de su uso para desarrollar aplicaciones comerciales: –  www.acer-euro.com, www.aceradvantage.com,

www.elet.polimi.it, www.image.co.uk,...

El enfoque WebML

– WebML soporta una colección de conceptos poderosos que posibilitan un diseño de alto nivel y provee especificaciones gráficas para producir una descripción (a nivel abstracto) de la aplicación Web.

Objetivos de WebML

•  Los objetivos principales de WebML son: – Expresar la estructura de una aplicación; – Proveer múltiples vistas del mismo contenido; – Separar el contenido de la información de su

composición en páginas, y navegación; – Almacenar meta-información; – Modelar usuarios y comunidades – Posibilitar la especificación de operaciones de

manipulación de datos.

Características WebML

•  Combina técnicas de modelado ER con UML •  Se basa en la distribución de nodos en los niveles del

hipertexto sobre las paginas del nivel de presentación. –  Enlaces Intra-page cuando la fuente y destino están en la

misma pagina (Ej. Un resumen del paper en el primer caso de ejemplo)

–  Enlaces Inter-page cuando la fuente y el destino están en diferentes páginas (Ej. Información detallada del autor y de sus papers)

WebML: Conceptos básicos Web application = Structure + Hypertext + Presentation

data model

entities, relationships

navigation + composition model

units, pages, links, site views

presentation

styles

Modelos

•  Un modelo proporciona los planos de un sistema. – Los modelos pueden involucrar planos

detallados, así como planos mas generales que ofrecen una visión global del sistema en consideración.

Diseño en WebML

•  El diseño de aplicaciones en WebML consiste en especificar sus características en términos de varios tipos de abstracciones ortogonales – Cada una capturada mediante un modelo

distinto los cuáles son: •  El modelo estructural •  El modelo de hipertexto •  El modelo de presentación

El modelo estructural

•  El modelo estructural que describe la organización conceptual de datos; este modelo es compatible con: – el modelo Entidad-Relación [Chen, 76] –  los diagramas de clases en UML.

El modelo de hipertexto

•  El modelo de hipertexto que posibilita la definición de páginas y enlaces de hipertexto que constituyen la aplicación. – Este utiliza, a su vez, dos sub modelos:

•  El modelo de composición •  El modelo de navegación

El modelo de composición

•  El modelo de composición, que concierne con la definición de páginas y su organización interna en términos de unidades elementales de contenido.

El modelo de navegación

•  El modelo de navegación, que describe los enlaces entre páginas y unidades de contenido. – Esto permite que la información contextual

necesaria esté disponible al computar el contenido de las páginas que presentarán dicha información a los usuarios.

El modelo de presentación

•  El modelo de presentación que describe la apariencia (look & feel) de las páginas. – Este es específico para un dispositivo de

acceso dado. – Este modelo usualmente asocia

construcciones de un lenguaje de presentación (p.ej., HTML o WML) con cada unidad de presentación (p.ej., páginas, marcos).

Naturaleza de cada modelo

•  Cada uno de los modelos anteriores corresponden con distintos aspectos de una aplicación Web. – Los recursos de datos son un valor

empresarial que es relativamente estable. – Los aspectos de composición y navegación

son aspectos más dinámicos.

Modelos extendidos

•  Los modelos pueden ser extendidos para lidiar con la especificación de administración de contenido e integración con servicios externos, – Se pueden agregar que pueden ser definidas

y agregadas al modelo de hipertexto. – Dichas operaciones son invocadas como un

efecto colateral de la navegación.

El desarrollo en WebML

•  El ciclo de desarrollo de una aplicación Web se basa en un núcleo sólido de conceptos y notaciones. – El proceso de desarrollo en WebML consiste

de diferentes fases incrementales, que abarcan desde la recolección de requerimientos hasta la implementación, y que son ejecutadas en forma iterativa.

Especificación de requerimientos

•  La especificación de requerimientos es la actividad en que el arquitecto de información recolecta y formaliza la información esencial sobre el dominio de la aplicación y funciones esperadas. – El insumo de esta etapa es el conjunto de

requerimientos del negocio que motivan el desarrollo de la aplicación.

El diseño de datos

•  El diseño de datos es la fase en que se organizan los principales objetos de información en un modelo conceptual de datos que sea comprensivo y coherente. – El resultado del diseño de datos es un

esquema conceptual. – Este muestra en una forma simple y legible el

conocimiento disponible sobre los datos de la aplicación.

El diseño de hipertexto

•  El diseño de hipertexto es la actividad que transforma los requerimientos funcionales en una o más vistas del sitio abarcando la entrega de la información necesaria y los servicios de manipulación de datos. – El diseño de hipertexto opera en un nivel

conceptual que permite al arquitecto de información el especificar cómo las unidades, definidas sobre objetos de datos, son compuestas dentro de las páginas

La implementación

•  Implementación es la actividad de producir los módulos de software necesarios para transformar los diseños de datos e hipertexto en una aplicación ejecutable en la plataforma seleccionada. – La implementación se divide en sub

actividades: •  implementación de datos •  implementación de hipertexto.

La implementación de datos

•  La implementación de datos consiste de transformar los esquemas E-R en una o más fuentes de datos.

La implementación de hipertexto

•  La implementación de hipertexto consiste de la producción de plantillas de páginas dinámicas o programas, traduciendo las unidades y páginas del nivel conceptual en lenguaje de marcado (HTML) y guiones (scripts).

WebML: Hipertextos Papers Page

Papers Index

Paper Paper

[OID=CurrPaper]

Paper DataCurrPaper:OID

Authors Page

Authors Multidata

Author

All Authors Index of Papers

• Daml-s and WSDL • WebML • Web services

Selected paper title: Web services abstract: XXX Go to all authors page

WebML: Operaciones

Entry - Author Page

Entry unit Modify

Author

Error Page

KO

OK Success Page

Insert Your Data

• Fname • Lname

submit

Ejemplo: Un sitio de música

•  Caso de Uso ver Álbum de un artista

•  Incluye (included): –  Ver información del álbum

•  Opcional (extend): –  Ver listado de canciones del

álbum –  Ver comentarios del álbum –  Ver biografía del artista

Diagrama de clases

Ejemplo: Un sitio de música (2)

Especificación de los diagramas De composición y navegación

Ejemplo: Un sitio de música (3) Algunas unidades y su representación en HTML

Ejemplo: Un sitio de música (4) Vista general del sitio

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.