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

<<form>>
<<server page>>

updatecart cartform
<<submit>>
 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
<<build>>
componente <<Pagina PHP>> shopcart mycart

Las pginas estaticas slo

implementara la parte del cliente
Las dinmicas implemente cliente y <<ASP Page>>
shopcart.asp
servidor
 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>> Los eventos de cliente =
OnLineCart
{ onLoad=bodyOnLoad() }
eventos de javascript como
onClick , onLoad, etc ...
itemCount : integer
subTotal : currency Pueden ser introducidos en

tax : currency el modelo como listas de

total : currency
taxRate : currency
etiquetas donde el campo
recalculateTotals() es el nombre del evento y el
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-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