1. Modelado WebModelado Web
Pedro J. Muñoz MerinoPedro J. Muñoz Merino
http://www.it.uc3m.es/pedmume/http://www.it.uc3m.es/pedmume/
2. 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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
2
― Casos de uso
― De clase
― De interacción
― De estado
― De actividad
― De paquetes
― Físicos
3. 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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
3
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
― UML sin extensiones: OOHDM, WSDM, OO-H
4. 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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
4
― 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
5. 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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
5
― Modelo de datos
― Modelo de hipertexto
― Modelo de gestión de contenido
― Modelo de presentación
6. 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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
6
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
7. WebML: Modelado de Datos
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
7
Imagen extraida de www.webml.org
8. 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
diferentes páginas y sus elementos de contenido
9. 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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
9
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
10. 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
11. WebML: Modelado de Hipertexto
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
11
Imagen extraida de www.webml.org
12. 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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
12
como UML
― Ejemplo: Diagramas de flujo para la lógica
● Aplicación al propio proyecto en grupo
13. 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
14. 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
15. 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