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 Diseño de Aplicaciones
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 J. Muñoz Diseño de Aplicaciones
3
Pedr―o J. M UuñoMz MeLrinosin extensiones: OOHDM, WSDMDis,eñOo deOAp-
licHaciones Telemáticas

Pedro J. Muñoz Diseño de Aplicaciones

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
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 Diseño de Aplicaciones

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
― Modelo de hipertexto
― Modelo de gestión de contenido
― Modelo de presentación

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

Pedro J. Muñoz Diseño de Aplicaciones
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
puede usarse de manera equivalente), e incluso información
adicional sobre el modelo de datos

Pedro J. Muñoz Diseño de Aplicaciones

7
 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 Diseño de Aplicaciones

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 Diseño de Aplicaciones

1
 WebML: Modelado de Hipertexto

Imagen extraida de www.webml.org

Pedro J. Muñoz Diseño de Aplicaciones

1
 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 Diseño de Aplicaciones

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

Pedro J. Muñoz Diseño de Aplicaciones

1
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 Diseño de Aplicaciones

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

Pedro J. Muñoz Diseño de Aplicaciones

1