Modelado Web

Pedro J. Muñoz Merino

http://www.it.uc3m.es/pedmume/
 Modelado Software: Visión Global
● Ventajas de Ingeniería Software e Ingeniería Web se
presentaron en la clase de introducción
● En Ingeniería Software, UML es un lenguaje estándar de
modelado para aplicaciones software
● Diagramas UML para el modelado de aplicaciones
― Casos de uso
― De clase
― De interacción
― De estado
― De actividad
― De paquetes
― Físicos
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
2
 Modelado Web: Introducción
● Las aplicaciones Web es un tipo particular de software,
por ello se puede modelar con diagramas UML
● Muchas aplicaciones telemáticas son un caso particular
de aplicaciones Web
● Las aplicaciones Web tienen particularidades, lo que
hace que se puedan plantear modelos específicos o la
forma de realizar el proceso de modelado para ser más
precisos y tener más ventajas
● Muchos tipos de modelados se han propuesto.
Dependiendo de la sintaxis del lenguaje se clasifican en:
― Nuevos lenguajes con diferentes elementos respecto a
UML: WebML, WA-UML
― Extensiones de UML: UWE
Pedro UML
―J. Muñoz Merinosin extensiones: OOHDM, WSDM, OO-H
Diseño de Aplicaciones Telemáticas
3
 Modelado Web: Diferentes tipos
● Para una misma aplicación Web se pueden utilizar varios
modelados. Dependiendo del tipo de aplicación, será
más adecuado uno u otro
― WSDM está orientado para aplicaciones que requiren
diferentes audiencias
― WebML está orientado para aplicaciones que tienen una
alta interacción con datos
― WA-UML está orientado para aplicaciones adaptativas
― OO-H está orientado para aplicaciones con énfasis en el
interfaz
― OOHDM y UWE están orientados para aplicaciones más
genéricas

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

4
 WebML: Introducción
● WebML: Web Modeling Language
― Modelado orientado a aplicaciones con un uso intensivo de
datos, donde hay gran cantidad de datos, con estructura
compleja y las aplicaciones tienen que acceder a ellos
● Modelado de aplicación Web en 4 fases:
― Modelo de datos
― Modelo de hipertexto
― Modelo de gestión de contenido
― Modelo de presentación

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

5
 WebML: Modelado de datos
● El modelo de datos representa las diferentes tablas de
datos y sus relaciones que son necesarias para una
aplicación Web concreta. Se pueden utilizar:
― Diagramas de Entidad-Relación (E-R) que muestran todas las
tablas, los diferentes campos de cada tabla, y las relaciones
entre ellas
― Diagramas UML de clases que pueden representar la misma
información que un diagrama de Entidad-Relación (por lo que
puede usarse de manera equivalente), e incluso información
adicional sobre el modelo de datos

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

6
 WebML: Modelado de Datos

Imagen extraida de www.webml.org

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

7
 WebML: Modelo de Hipertexto
● Un modelo por cada hipertexto
● Cada hipertexto describe una vista del sitio
― Modelo de composición. Representa las páginas de un hipertexto
y cada página que elementos de contenido tiene
― Modelo de navegación. Representa los enlaces entre las
diferentes páginas y sus elementos de contenido

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

8
 Hipertexto: Modelo de composición
● Elementos de contenido de cada página
― Unidades de datos. Dan la información de un solo objeto de
datos. Ejemplo: de una actividad
― Multi-datos. Dan información de varios objetos de datos
― Indice. Da la lista de varios objetos, pero sin mostrar la
información de dichos objetos
― Filtro. Da una página de búsqueda donde se pueden poner
diferentes parámetros para buscar según unos criterios
― Scroller. Da un conjunto de elementos que se puede avanzar
entre ellos con scroll

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

9
 Hipertexto: Modelo de navegación
● Tipos de enlaces
― No contextuales. Conectan semánticamente páginas
independientes. Elemento HYPERLINK
― Contextuales. La página del destino depende de la del origen de
dicho enlace, en el sentido del esquema de datos definido.
Elemento INFOLINK

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

10
 WebML: Modelado de Hipertexto

Imagen extraida de www.webml.org

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

11
 Otros Aspectos
● Modelado de presentación. Layout con hojas de estilo
● Transformación de los diferentes modelos a XML
● Herramientas de autoría: WebRatio
● Modelado de otros aspectos como el propio código del
programa, utilizar técnicas de Ingeniería del Software
como UML
― Ejemplo: Diagramas de flujo para la lógica
● Aplicación al propio proyecto en grupo

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

12
 Prerrequisitos
● Ingeniería Software y UML. Asignatura Software de
Comunicaciones,
http://www.it.uc3m.es/pbasanta/SOFTCOM/

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

13
Trabajo propio del alumno asociado a
la sesión
● Web Modeling Language (WebML): a modeling language
for designing Web sites:
http://www9.org/w9cdrom/177/177.html

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

14
 Referencias Extra
● Libro sobre WebML: http://www.amazon.com/Designing-
Data-Intensive-Applications-Kaufmann-
Management/dp/1558608435

Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas

15