presentacionumlweb
TRANSCRIPT
Aplicaciones Web con UML
Ricardo Marmolejo García
Ingienería del software
Objetivos
Introducción Conceptos : UML , MVC, Sistemas Web Lenguajes en el cliente y en el servidor Algunas Metodologías Web WAE y WAE2 Metodología Ágil Conclusiones
Introducción I
Los sistemas web son relativamente nuevos en el mundo del computación. Son un nuevo reto para los ingenieros del software.
Las aplicaciones web son cada vez más complejas. Como el software, al principio no se modelaba, pronto
surgen metodologías que intentan solucionar el problema.
Los sistemas Web fomentan un entorno de requisitos muy cambiantes.
Gran numero de usuarios y/o requisitos (mundial) El equipo de desarrolladores suele ser pequeño
Introducción II
Los modelos son abstracciones que simplifican nuestra comprensión de los sistemas.
Como lenguaje de modelado ya existente deberiamos considerar si UML tiene capacidad para modelar en aplicaciones Web
Jim Conallen recomienda modelar webs extediendo UML y aplicacando un patrón de diseño llamado MVC (modelo-vista-controlador).
Conceptos a ver: UML , MVC, sistema Web y Lenguajes en el cliente y en el servidor.
1 . ¿Qué es UML?
Básicamente UML es un lenguaje estándar con un vocabulario gráfico y con reglas para la presentación de sistemas de información.
Creadores : Grady Booch, Ivar Jacobson y James Rumbaugh
Dependiendo del concepto que queremos comunicar, usaremos un diagrama u otro.
UML es insuficiente semánticamente para Aplicaciones Web (en principio).
2 . Patrón Modelo-Vista-Controlador I
Esta patrón (de software) busca la programación por capas:
Modelo: tienes los datos y su implementación define como se leen y escriben esos datos. Tipicamente hace querys a una BDD, pero esto podría ser un sistema de archivos, o un banco que nos provee datos por XML. Altamente reutilizable.
Vista: presentación, es lo que ve el usuario. Ofrece al usuario los casos de uso que el negocio ofrezca.
Controlador: esta entre la Vista y el Modelo y une a ambos. Tambien llamado lógica de negocio, implementa la lógica de lo que le pasa a los modelos en función de los eventos que vienen de la Vista.
2 . Patrón Modelo-Vista-Controlador II
Algunos ejemplos de implementación de MVC son Rails(Ruby), Structs(Java), CakePHP,Kumbia,Symfony(PHP), TurboGears,Django(Python) ... etc
Ruby on Rails y Django son frameworks orientados al desarrollo web eficiente. Estos abstraen el uso de base de datos.
3 . Sistema Web 1/2
El servidor web ofrece páginas web y recursos (css, js, imagenes, flash ...)
Los recursos se identifican de forma única mediante URL o URI.
3 . Sistema Web 2/2 La comunicación entre cliente y servidor utiliza
el protocolo HTTP. No mantiene conexión tras una petición.
Eso genera, que sea necesario recurrir a cookies para conocer el estado del cliente. (Sesiones)
Una aplicación web genera una página web para un cliente en función de N variables. (diferenciar página de aplicación)
Una aplicación web es un sistema Web que nos ofrece la lógica de negocio. (interfaces, formularios ...). Hace de frontend.
Lenguajes en la parte del cliente Lenguajes de script como javascript (estándar
ECMA), y Visual Basic Script(Microsoft). Pueden usarse para complementar la lógica de negocio. Alivian al servidor.
La web es sincrona pero la tendencia es la Web asíncrona gracias a un conjunto de técnologías denominadas como AJAX.
Para el renderizado Web se usa HTML, XHTML o XML. Complementados con CSS (hojas de estilo en cascada)
Flash como lenguaje de presentación. Aporta multimedia a la web. Applet java ...
Lenguajes en la parte del servidor Los más conocidos son PHP(software libre), JSP
(Sun Microsystems) y ASP/ASP.NET(Microsoft) Las primeras versiones de PHP y ASP no
separaban bien las capas. Pudiendo llegar a tener mezcladas las tres capas: presentación(XHTML), lógica de negocio(PHP) y modelo de datos(SQL). Procedimentales.
La separación de capas es dificil ya que tradicionalmente la lógica de negocio se encarga de generar la presentación dinamicamente. En aplicaciones grandes, es preferible por usar lenguajes que implementan MVC
Complejidad sistemas web
Histórico
Entidad-Relación
No fue diseñado para uso de modelado de aplicaciones Web
HDM Basado de E/R. El objetivo era crear un modelo
que fuera de utilidad para realizar el diseño de una aplicación de hipertexto
Es un intento de modelar la estructura del hipertexto-hipermedia, una modelización de las estructuras de navegación.
Crear un modelo antes de desarrollar un hipertexto nos ayudará a conseguir una navegación más consistente y rica.
En HDM la estructura de navegación viene marcada por la estructura de datos.
En principio usado para páginas estáticas
RMM Basado en E/R. Esta metodología es apropiada
para clases de objetos bien definidas, y con claras relaciones entre esas clases
Está orientada a problemas con datos dinámicos que cambian con mucha frecuencia, más que a entornos estáticos como HDM
Sin embargo, los mecanismos de acceso a la información son excesivamente simples y valen para un problema con pocas entidades, pero el modelo se queda corto si hay gran número de ellas.
WebML En principio no coge nada de UML, aunque
actualmente existen diagramas para relacionarlos.
Es una notación visual para el diseño de aplicaciones Web complejas que usan datos intensivamente.
Provee especificaciones gráficas formales para un proceso de diseño completo que puede ser asistido por herramientas de diseño visuales.
Tiene UNA herramienta comercial CASE orientada a jsp (WebRatio). Realmente es un plugin de Eclipse.
Estructura WebML
Sitio = Estructura + Composición ++ Navegación + Presentación
WAE y WAE2
Es el único exclusivamente basado en UML. Desarrollado por Jim Conallen (Rational
Software Corporation) WAE como UML es recomendado usarlo en
lenguajes orientdados a objetos. Es más barato hacer un estandar ampliando
que creándolo de cero. Las aplicaciones Web presentan problemas
que UML no contempla solución. Dificultad para diferenciar código cliente
(scripts) de código servidor.
WAE y WAE2
Jim Conallen desarrolla WAE y WAE2 basandose en estereotipos, listados de etiquetas(tags) y restricciones(constraints) que proporciona UML
UML puede ser extendido para permitir nueva semántica:
Estereotipos: define una nueva semántica al modelo.
Lista de etiquetas: podemos entregar una lista de campo-valor.
Restricciones : definen las reglas para trabajar con determinados estereotipos.
Estereotipos en clases Define los siguientes estereotipos para las entidades. Tipos de estereotipo en clases principales:
<<Server Page>> Son las páginas que contienen scripts o código ejecutable por el servidor. (.php , .asp , .jsp)
<<Client Page>> Son las páginas que estan en el lado del cliente, normalmente páginas HTML y scripts (jsvascript).
<<Form>> Es la representación de un formulario. Es código HTML que contiene etiquetas de formulario como : <input>, <textarea>, <select> ...
Estereotipos en relaciones
Define los siguientes estereotipos para las relaciones. Tipos de estereotipo en las relaciones:
<<build>> Una relación entre una página servidor y una página cliente. La página servidor ”construye” a la página cliente.
<<link>> Es una relación entre una página y otra página del sistema.
<<submit>> Es una relación entre un formulario y un servidor de página
Añadidos al <<Client Page>> Añadidos
Script Formulario Flash Applet
Iconos de los estereotipos
m ycart
cartform
shopcart<<build>>
<<server page>> <<client page>>
<<form >>
updatecart<<subm it>>
<<server page>>
dailyspecia l<<link>>
Diagrama de Componentes Los Diagramas de Componentes ilustran las
piezas del software que conformarán un sistema. Pueden ser: ejecutables, librerías estáticas o dinámicas, clases de Java, ... Tienen Interfaz
Los estereotipos de las componentes pueden ser <<Pagina PHP>> o <<Pagina HTML>> por ejemplo.
m ycartshopcart<<build>>
<<ASP Page>>shopcart.asp
Encapsula <<Cliente Page>> y <<Server Page>> en un componente <<Pagina PHP>>
Las páginas estaticas sólo implementara la parte del cliente
Las dinámicas implemente cliente y servidor
Casos de uso
Los casos de uso de una aplicación web son igual de útiles que en una aplicación de software. Su funcionamiento es igual.
Con especial incapie debemos tener en cuenta que tenemos visitantes de diferentes tipos y debeíamos crear un tipo de actor en función del tipo de usuario.
Por ejemplo : En el formulario de registro le preguntamos si se considera un usuario avanzado o no.
Diagrama de secuencia Explica un caso de uso en función del tiempo. Se usa como en UML. Aparecen las lineas de tiempo de los actores y
componentes implicadas. Actores y componentes se envian mensajes
entre ellos. Las paginas del cliente pueden enviarse
mensajes a si mismo (funciones javascript donde el servidor no interviene)
La tecnología web es sincrona. Las flechas asincronas solo pueden ser interpretadas como el uso de AJAX.
Eventos en el cliente Los eventos de cliente =
eventos de javascript como onClick , onLoad, etc ...
Pueden ser introducidos en el modelo como listas de etiquetas donde el campo es el nombre del evento y el valor es el nombre de la función.
< < C lien t P age> >O nL ineC art
{ onLoad= bodyO nLoad() }
item C oun t : in tegersubT o ta l : cu rrencytax : cu rrencyto ta l : cu rrencytaxR a te : cu rrency
reca lcu la teT o ta ls ()upda teF orm ()bodyO nLoad()
En la clase pondremos las variables y los metodos, que normalmente vienen de javascript.
Metodología ágil Metodología ágil (No usa UML necesariamente) Tiene al menos 4 fases:
Diseño conceptual Diseño gráfico y arbol de navegación Desarrollo
Desarrollo gráfico y HTML Desarrollo de lógica de negocio y bases de datos Pruebas y benchmark
Producción
Diseño conceptual
Se realiza una entrevista al cliente, en busca de definir los requisitos correctos. Como se navegara, tipos de cliente al que va dirigido, nivel cultural de los visitantes.
Se pueden presentar una ”prueba de concepto” de diseño y funcionalidad muy básica.
”Proof of concept” → Ayuda a convencer al cliente y a tener un primer análisis y diseño previo.
Diseño gráfico y arb. de navegación
Aqui los diseñadores gráficos deben comunicarse con los programadores, si bien un diseñador no deben conocer la lógica si deben conocer las restricciones que le imponen el diseño.
Los programadores pueden ir planteando los diseños de aplicación y base de datos.
Desarrollo gráfico y HTML 1/3
No podemos exigir a un diseñador conocimientos de programación.
Cada diseñador puede usar sus herramientas favoritas, siempre que cumpla el estandar y codificación especificados por el proyecto. Por ejemplo: XHTML 1.0 Strict + UTF8
Los diseñadores crearán los gráficos, y el código HTML, en el contenido dinámico escribierán ejemplos.
Desarrollo gráfico y HTML 2/3 Los programadores pueden hacer
recomendaciones a los diseñadores para evitar problemas de integración.
Comentar las secciones del HTML Documentar cada XPATH del CSS Validar la página por W3C durante el desarrollo
gráfico (HTML , CSS , AAA ...) Algún consejo :
Es mejor no usar las características más novedosas de los navegadores.
Tener un criterio al nombrar las páginas acorde al modelo de datos. Rutas relativas.
Desarrollo gráfico y HTML 3/3
UIML (User Interface Markup Language) Lenguaje de extensión del XML que promueve la creación de páginas web que puedan ser vistas en cualquier dispositivo como monitores para PC, teléfonos o PDAs.
Por problemas del visitante visuales, motrices, auditivas o cognitivas. La W3C investiga una rama llamada WAI vela por la accesibilidad con 3 niveles, A, AA y AAA.
Existe software que mide la accesibilidad (TAW, HERA ...)
Desarrollo de lógica de negocio
Al tiempo, los programadores van programando, haciendo pruebas con HTML muy simple.
El proyecto debería estar en un repositorio, con acceso remoto (SSH) en cualquier momento del día. Flexibilidad de horario. Productividad.
Los modulos finalizados por los diseñadores se iŕan integrando paulatinamente.
Pruebas, si tenemos un producto funcional se puede ir mostrando al cliente y pedirle que haga pruebas y revise requisitos.
Conclusiones sobre UML y la WEB Se concluye que UML se puede ampliar al modelo
web con componentes específicos como las páginas, enlaces, cliente de scripts y otras formas abstracción y detalle adecuados para modeladores web.
Debido a la complejidad de los sistemas Web es necesario modelar. Con UML o con otras formas de modelado.
Actualmente los problemas de mantenibilidad y escalabilidad de las aplicaciones Web estan solventados por soluciones de Ingeniería del Software. El objeto de la ingeniería del software se ha ampliado.
Los frameworks que más impacto tienen hoy en día son Rails y Django. (Basados en MVC)
Bibliografía
[ Conallen, 1998 ] Conallen, Jim. “Modeling Web Application Design with UML” Presentation – Conallen, Inc. http://www.rational.com/media/whitepapers/webapps.pdf Junio, 1998.
Ricardo Galli : http://bulma.net/body.phtml?nIdNoticia=734
http://gallir.wordpress.com/2008/04/16/disenos-ingenieria-agiles-y-frameworks/
HDM : http://www.hipertexto.info/documentos/hdm.htm
OMT: http://www.monografias.com/trabajos6/meto/meto.shtml
Booch, G., Jacobson, I., Rumbaugh, J. The Unified Modeling Language Users Guide. Addison Wesley, Reading, MA, 1998
WebML: http://www10.org/paper-sample/html-sample.html