Aplicaciones Web con UML

Ingienera del software

Ricardo Marmolejo Garca

Objetivos

Introduccin Conceptos : UML , MVC, Sistemas Web Lenguajes en el cliente y en el servidor Algunas Metodologas Web WAE y WAE2 Metodologa gil Conclusiones

Introduccin I

Los sistemas web son relativamente nuevos en el mundo del computacin. Son un nuevo reto para los ingenieros del software. Las aplicaciones web son cada vez ms complejas. Como el software, al principio no se modelaba, pronto surgen metodologas 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 pequeo

Introduccin II

Los modelos son abstracciones que simplifican nuestra comprensin 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 patrn de diseo 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?

Bsicamente UML es un lenguaje estndar con un vocabulario grfico y con reglas para la presentacin de sistemas de informacin. Creadores : Grady Booch, Ivar Jacobson y James Rumbaugh Dependiendo del concepto que queremos comunicar, usaremos un diagrama u otro. UML es insuficiente semnticamente para Aplicaciones Web (en principio).

2 . Patrn Modelo-Vista-Controlador I

Esta patrn (de software) busca la programacin por capas:

Modelo: tienes los datos y su implementacin define como se leen y escriben esos datos. Tipicamente hace querys a una BDD, pero esto podra ser un sistema de archivos, o un banco que nos provee datos por XML. Altamente reutilizable. Vista: presentacin, 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 lgica de negocio, implementa la lgica de lo que le pasa a los modelos en funcin de los eventos que vienen de la Vista.

2 . Patrn Modelo-Vista-Controlador II

Algunos ejemplos de implementacin 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 pginas web y recursos (css, js, imagenes, flash ...) Los recursos se identifican de forma nica mediante URL o URI.

3 . Sistema Web 2/2

La comunicacin entre cliente y servidor utiliza el protocolo HTTP. No mantiene conexin tras una peticin. Eso genera, que sea necesario recurrir a cookies para conocer el estado del cliente. (Sesiones) Una aplicacin web genera una pgina web para un cliente en funcin de N variables. (diferenciar pgina de aplicacin) Una aplicacin web es un sistema Web que nos ofrece la lgica de negocio. (interfaces, formularios ...). Hace de frontend.

Lenguajes en la parte del cliente

Lenguajes de script como javascript (estndar ECMA), y Visual Basic Script(Microsoft). Pueden usarse para complementar la lgica de negocio. Alivian al servidor. La web es sincrona pero la tendencia es la Web asncrona gracias a un conjunto de tcnologas 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 presentacin. Aporta multimedia a la web. Applet java ...

Lenguajes en la parte del servidor

Los ms 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: presentacin(XHTML), lgica de negocio(PHP) y modelo de datos(SQL). Procedimentales. La separacin de capas es dificil ya que tradicionalmente la lgica de negocio se encarga de generar la presentacin dinamicamente. En aplicaciones grandes, es preferible por usar lenguajes que implementan MVC

Complejidad sistemas web

Histrico

Entidad-Relacin

No fue diseado 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 diseo de una aplicacin de hipertexto Es un intento de modelar la estructura del hipertexto-hipermedia, una modelizacin de las estructuras de navegacin. Crear un modelo antes de desarrollar un hipertexto nos ayudar a conseguir una navegacin ms consistente y rica. En HDM la estructura de navegacin viene marcada por la estructura de datos. En principio usado para pginas estticas

RMM

Basado en E/R. Esta metodologa es apropiada para clases de objetos bien definidas, y con claras relaciones entre esas clases Est orientada a problemas con datos dinmicos que cambian con mucha frecuencia, ms que a entornos estticos como HDM Sin embargo, los mecanismos de acceso a la informacin son excesivamente simples y valen para un problema con pocas entidades, pero el modelo se queda corto si hay gran nmero de ellas.

WebML

En principio no coge nada de UML, aunque actualmente existen diagramas para relacionarlos. Es una notacin visual para el diseo de aplicaciones Web complejas que usan datos intensivamente. Provee especificaciones grficas formales para un proceso de diseo completo que puede ser asistido por herramientas de diseo visuales. Tiene UNA herramienta comercial CASE orientada a jsp (WebRatio). Realmente es un plugin de Eclipse.

Estructura WebML

Sitio = Estructura + Composicin + + Navegacin + Presentacin

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 ms barato hacer un estandar ampliando que crendolo de cero. Las aplicaciones Web presentan problemas que UML no contempla solucin. Dificultad para diferenciar cdigo cliente (scripts) de cdigo 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 semntica:

Estereotipos: define una nueva semntica 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 pginas que contienen scripts o cdigo ejecutable por el servidor. (.php , . asp , .jsp) <<Client Page>> Son las pginas que estan en el lado del cliente, normalmente pginas HTML y scripts (jsvascript). <<Form>> Es la representacin de un formulario. Es cdigo 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 relacin entre una pgina servidor y una pgina cliente. La pgina servidor construye a la pgina cliente. <<link>> Es una relacin entre una pgina y otra pgina del sistema. <<submit>> Es una relacin entre un formulario y un servidor de pgina

Aadidos al <<Client Page>>

Aadidos

Script Formulario Flash Applet

Iconos de los estereotipos

<<server page>> <<client page>>

<<build>>

<<link>>

shopcart

mycart

dailyspecial

<<server page>>

<<form>>

updatecart

<<submit>>

cartform

Diagrama de Componentes

Los Diagramas de Componentes ilustran las piezas del software que conformarn un sistema. Pueden ser: ejecutables, libreras estticas o dinmicas, clases de Java, ... Tienen Interfaz Los estereotipos de las componentes pueden ser <<Pagina PHP>> o <<Pagina HTML>> por ejemplo.

Encapsula <<Cliente Page>> y <<Server Page>> en un componente <<Pagina PHP>> Las pginas estaticas slo implementara la parte del cliente Las dinmicas implemente cliente y servidor

<<build>>

shopcart

mycart

<<ASP Page>> shopcart.asp

Casos de uso

Los casos de uso de una aplicacin web son igual de tiles que en una aplicacin de software. Su funcionamiento es igual. Con especial incapie debemos tener en cuenta que tenemos visitantes de diferentes tipos y debeamos crear un tipo de actor en funcin 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 funcin 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 tecnologa web es sincrona. Las flechas asincronas solo pueden ser interpretadas como el uso de AJAX.

Eventos en el cliente
<<Client Page>> OnLineCart { onLoad=bodyOnLoad() } itemCount : integer subTotal : currency tax : currency total : currency taxRate : currency

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 recalculateTotals() updateForm() valor es el nombre de la bodyOnLoad() funcin. En la clase pondremos las variables y los metodos, que normalmente vienen de javascript.

Metodologa gil

Metodologa gil (No usa UML necesariamente) Tiene al menos 4 fases:

Diseo conceptual Diseo grfico y arbol de navegacin Desarrollo

Desarrollo grfico y HTML Desarrollo de lgica de negocio y bases de datos Pruebas y benchmark

Produccin

Diseo 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 diseo y funcionalidad muy bsica. Proof of concept Ayuda a convencer al cliente y a tener un primer anlisis y diseo previo.

Diseo grfico y arb. de navegacin

Aqui los diseadores grficos deben comunicarse con los programadores, si bien un diseador no deben conocer la lgica si deben conocer las restricciones que le imponen el diseo. Los programadores pueden ir planteando los diseos de aplicacin y base de datos.

Desarrollo grfico y HTML 1/3

No podemos exigir a un diseador conocimientos de programacin. Cada diseador puede usar sus herramientas favoritas, siempre que cumpla el estandar y codificacin especificados por el proyecto. Por ejemplo: XHTML 1.0 Strict + UTF8 Los diseadores crearn los grficos, y el cdigo HTML, en el contenido dinmico escribiern ejemplos.

Desarrollo grfico y HTML 2/3

Los programadores pueden hacer recomendaciones a los diseadores para evitar problemas de integracin. Comentar las secciones del HTML Documentar cada XPATH del CSS Validar la pgina por W3C durante el desarrollo grfico (HTML , CSS , AAA ...) Algn consejo :

Es mejor no usar las caractersticas ms novedosas de los navegadores. Tener un criterio al nombrar las pginas acorde al modelo de datos. Rutas relativas.

Desarrollo grfico y HTML 3/3

UIML (User Interface Markup Language) Lenguaje de extensin del XML que promueve la creacin de pginas web que puedan ser vistas en cualquier dispositivo como monitores para PC, telfonos 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 lgica de negocio

Al tiempo, los programadores van programando, haciendo pruebas con HTML muy simple. El proyecto debera estar en un repositorio, con acceso remoto (SSH) en cualquier momento del da. Flexibilidad de horario. Productividad. Los modulos finalizados por los diseadores se ian 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 especficos como las pginas, enlaces, cliente de scripts y otras formas abstraccin 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 Ingeniera del Software. El objeto de la ingeniera del software se ha ampliado. Los frameworks que ms impacto tienen hoy en da son Rails y Django. (Basados en MVC)

Bibliografa

[ 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-yframeworks/ 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