SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
Modelado WebModelado Web
Pedro J. Muñoz MerinoPedro J. Muñoz Merino
http://www.it.uc3m.es/pedmume/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
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
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
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
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
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
WebML: Modelado de Datos
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
7
Imagen extraida de www.webml.org
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
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
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
Pedro J. Muñoz Merino Diseño de Aplicaciones Telemáticas
11
Imagen extraida de www.webml.org
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
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

Más contenido relacionado

La actualidad más candente

Arquitecturas de software exposicion
Arquitecturas de software   exposicionArquitecturas de software   exposicion
Arquitecturas de software exposicionjuca piro
 
Metodologías para el desarrollo de sistemas
Metodologías para el desarrollo de sistemasMetodologías para el desarrollo de sistemas
Metodologías para el desarrollo de sistemasUNEFA
 
Atributos de aplicaciones basadas en WEB
Atributos de aplicaciones basadas en WEBAtributos de aplicaciones basadas en WEB
Atributos de aplicaciones basadas en WEBNoé Arpasi
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del clienteGabriel Mondragón
 
Fundamentos de Pruebas de Software - Capítulo 2
Fundamentos de Pruebas de Software - Capítulo 2Fundamentos de Pruebas de Software - Capítulo 2
Fundamentos de Pruebas de Software - Capítulo 2Professional Testing
 
La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...
La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...
La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...Software Guru
 
Herramientas CASE
Herramientas CASEHerramientas CASE
Herramientas CASEI R
 
MODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORMODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORRené Pilataxi
 
Metricas de software
Metricas de softwareMetricas de software
Metricas de softwaresophialara123
 
Factores de calidad según mc call
Factores de calidad según mc callFactores de calidad según mc call
Factores de calidad según mc callclauddiaa
 
Base de datos (diseño conceptual,logico y fisico)
Base de datos (diseño conceptual,logico y fisico)Base de datos (diseño conceptual,logico y fisico)
Base de datos (diseño conceptual,logico y fisico)claudiachiri
 
FORMATO PARA DICCIONARIO DE DATOS
FORMATO PARA DICCIONARIO DE DATOSFORMATO PARA DICCIONARIO DE DATOS
FORMATO PARA DICCIONARIO DE DATOSPilar Pardo Hidalgo
 
Cuadro comparativo
Cuadro comparativo Cuadro comparativo
Cuadro comparativo Seba Briones
 

La actualidad más candente (20)

Tesis con rup
Tesis con rupTesis con rup
Tesis con rup
 
Arquitecturas de software exposicion
Arquitecturas de software   exposicionArquitecturas de software   exposicion
Arquitecturas de software exposicion
 
Diseño de WebApps
Diseño de WebAppsDiseño de WebApps
Diseño de WebApps
 
Metodologías para el desarrollo de sistemas
Metodologías para el desarrollo de sistemasMetodologías para el desarrollo de sistemas
Metodologías para el desarrollo de sistemas
 
Atributos de aplicaciones basadas en WEB
Atributos de aplicaciones basadas en WEBAtributos de aplicaciones basadas en WEB
Atributos de aplicaciones basadas en WEB
 
Desarrollo de aplicaciones con rup y uml
Desarrollo de aplicaciones con rup y umlDesarrollo de aplicaciones con rup y uml
Desarrollo de aplicaciones con rup y uml
 
Programación del lado del cliente
Programación del lado del clienteProgramación del lado del cliente
Programación del lado del cliente
 
Fundamentos de Pruebas de Software - Capítulo 2
Fundamentos de Pruebas de Software - Capítulo 2Fundamentos de Pruebas de Software - Capítulo 2
Fundamentos de Pruebas de Software - Capítulo 2
 
La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...
La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...
La importancia de la Arquitectura de Soluciones en el Ecosistema Latinoameric...
 
Caracteristicas rup
Caracteristicas rupCaracteristicas rup
Caracteristicas rup
 
Herramientas CASE
Herramientas CASEHerramientas CASE
Herramientas CASE
 
MODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORMODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADOR
 
Metricas de software
Metricas de softwareMetricas de software
Metricas de software
 
Factores de calidad según mc call
Factores de calidad según mc callFactores de calidad según mc call
Factores de calidad según mc call
 
Modelo GOMS
Modelo GOMSModelo GOMS
Modelo GOMS
 
Cascada con subproyectos
Cascada con subproyectosCascada con subproyectos
Cascada con subproyectos
 
Metodología WEB UWE
Metodología WEB UWEMetodología WEB UWE
Metodología WEB UWE
 
Base de datos (diseño conceptual,logico y fisico)
Base de datos (diseño conceptual,logico y fisico)Base de datos (diseño conceptual,logico y fisico)
Base de datos (diseño conceptual,logico y fisico)
 
FORMATO PARA DICCIONARIO DE DATOS
FORMATO PARA DICCIONARIO DE DATOSFORMATO PARA DICCIONARIO DE DATOS
FORMATO PARA DICCIONARIO DE DATOS
 
Cuadro comparativo
Cuadro comparativo Cuadro comparativo
Cuadro comparativo
 

Similar a Modelado conceptual de app web

UML. un analisis comparativo para la diagramación de software
UML.  un analisis comparativo para la diagramación de softwareUML.  un analisis comparativo para la diagramación de software
UML. un analisis comparativo para la diagramación de softwareYaskelly Yedra
 
Leo métodos de modelado para aplicaciones web-4
Leo métodos de modelado para aplicaciones web-4Leo métodos de modelado para aplicaciones web-4
Leo métodos de modelado para aplicaciones web-4Leo Jm
 
Visteme con 'Clean Architecture' que tengo prisas
Visteme con 'Clean Architecture' que tengo prisasVisteme con 'Clean Architecture' que tengo prisas
Visteme con 'Clean Architecture' que tengo prisasJosé María Pérez Ramos
 
Dasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uwe
Dasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uweDasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uwe
Dasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uweJeroan Castillo
 
Modelado de datos
Modelado de datosModelado de datos
Modelado de datosmanuel
 
Metodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelosMetodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelosJose R. Hilera
 
Principios de Diseño de Componentes Web
Principios de Diseño de Componentes WebPrincipios de Diseño de Componentes Web
Principios de Diseño de Componentes WebJavier Vélez Reyes
 
TEMAS RELACIONADOS WEB2
TEMAS RELACIONADOS WEB2TEMAS RELACIONADOS WEB2
TEMAS RELACIONADOS WEB2guest33bc33
 
Desarrollo de una aplicación móvil basada en gráficos estadísticos paper
Desarrollo de una aplicación móvil basada en gráficos estadísticos   paperDesarrollo de una aplicación móvil basada en gráficos estadísticos   paper
Desarrollo de una aplicación móvil basada en gráficos estadísticos paperLeo Ruelas Rojas
 
1 Mori Propuesta Tesis
1 Mori Propuesta Tesis1 Mori Propuesta Tesis
1 Mori Propuesta Tesisrocio2881
 

Similar a Modelado conceptual de app web (20)

Web app
Web appWeb app
Web app
 
S01-s1-MVC.pptx
S01-s1-MVC.pptxS01-s1-MVC.pptx
S01-s1-MVC.pptx
 
Metodologias para el desarrollo de aplicaciones web
Metodologias para el desarrollo de aplicaciones webMetodologias para el desarrollo de aplicaciones web
Metodologias para el desarrollo de aplicaciones web
 
UML. un analisis comparativo para la diagramación de software
UML.  un analisis comparativo para la diagramación de softwareUML.  un analisis comparativo para la diagramación de software
UML. un analisis comparativo para la diagramación de software
 
182000
182000182000
182000
 
Metodologia oohdm
Metodologia oohdmMetodologia oohdm
Metodologia oohdm
 
Leo métodos de modelado para aplicaciones web-4
Leo métodos de modelado para aplicaciones web-4Leo métodos de modelado para aplicaciones web-4
Leo métodos de modelado para aplicaciones web-4
 
Visteme con 'Clean Architecture' que tengo prisas
Visteme con 'Clean Architecture' que tengo prisasVisteme con 'Clean Architecture' que tengo prisas
Visteme con 'Clean Architecture' que tengo prisas
 
Dasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uwe
Dasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uweDasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uwe
Dasbd metodolog-a das-paraeldesarrollodeaplicacionesweb_uwe
 
Tema modeloobjeto-1pp
Tema modeloobjeto-1ppTema modeloobjeto-1pp
Tema modeloobjeto-1pp
 
Modelado de datos
Modelado de datosModelado de datos
Modelado de datos
 
Cliente/Servidor
Cliente/ServidorCliente/Servidor
Cliente/Servidor
 
Metodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelosMetodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelos
 
Principios de Diseño de Componentes Web
Principios de Diseño de Componentes WebPrincipios de Diseño de Componentes Web
Principios de Diseño de Componentes Web
 
Diagramas uml(1)
Diagramas uml(1)Diagramas uml(1)
Diagramas uml(1)
 
TEMAS RELACIONADOS WEB2
TEMAS RELACIONADOS WEB2TEMAS RELACIONADOS WEB2
TEMAS RELACIONADOS WEB2
 
Modelado conceptual de aplicaciones web
Modelado conceptual de aplicaciones webModelado conceptual de aplicaciones web
Modelado conceptual de aplicaciones web
 
Desarrollo de una aplicación móvil basada en gráficos estadísticos paper
Desarrollo de una aplicación móvil basada en gráficos estadísticos   paperDesarrollo de una aplicación móvil basada en gráficos estadísticos   paper
Desarrollo de una aplicación móvil basada en gráficos estadísticos paper
 
1 Mori Propuesta Tesis
1 Mori Propuesta Tesis1 Mori Propuesta Tesis
1 Mori Propuesta Tesis
 
Arquitectura de Software
Arquitectura de SoftwareArquitectura de Software
Arquitectura de Software
 

Modelado conceptual de app web

  • 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