Curso de Ingeniería Web -...
46
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. [email protected]
Transcript of Curso de Ingeniería Web -...
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.
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 ([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.
