MODELANDO PGINAS WEB CON UML

Vivimos en una poca donde la globalizacin ha permitido eliminar las fronteras fsicas entre los diferentes pases de nuestro planeta, trayendo como consecuencia la proliferacin y la necesidad de desarrollar sistemas en un entorno web que permita ampliar las fronteras de accin de cualquier sistema en general, es en este sentido que la creacin de hojas de HTML y en general de sitios Web, usando herramientas simples, ha hecho que el desarrollo de este tipo de aplicaciones se haga sin un trabajo serio en el modelado.

En este mundo de e-business, e-comerce, y e-govermment, no discutimos que UML debe ser completo sin una discusin del modo de modelar aplicaciones Web. A pesar de ser similar a una tradicional aplicacin cliente / servidor, las aplicaciones Web tienen sus propios y nicos beneficios y cambios, los cuales naturalmente afectan su diseo.

En muchos casos, una aplicacin Web es similar a una tradicional aplicacin distribuida. La lgica es dividir esta en dos o ms reas, o capas. En un mnimo la presentacin lgica es separada en la capa de presentacin, y la lgica del modelo de negocio es separada de la capa de lgica del lado del servidor.

La lgica de negocios corre en el servidor. En muchos casos, la lgica de negocios es separada en dos o ms capas de su propia capa. Por ejemplo, la lgica de las transacciones con la conexin a la base de datos tiene que poder ser separado desde el resto de la lgica del negocio.

Una de las primeras diferencias entre una aplicacin Web y un tradicional sistema distribuido esta en la persistencia de la conexin entre las dos o ms capas. En un sistema distribuido, un objeto tiene que ser inicializado sobre el cliente y el servidor, ellos pueden comunicarse con los otros solo cuando lo necesiten.

En una aplicacin Web, cuando la comunicacin entre el cliente y el servidor finaliza, el servidor pierde informacin acerca del cliente. Si no existe un gran conocimiento de quien tiene o de lo que estn haciendo. Una forma de manejar este cambio es mediante el uso de cookies. Un cookie es un archivo que reside en el cliente y puede almacenar informacin del estado acerca del cliente y la prxima vez que establezcan conexin con el servidor, el contenido del cookie pueda ser aprovechada por el servidor dando la informacin de su estado.

Una ventaja de las aplicaciones Web es la habilidad de alcanzar miles de usuarios sin que necesiten preocuparse acerca de la configuracin de cada mquina. A la vez la misma se convierte en una desventaja, ya que la habilidad de alcanzar miles de maquinas, muchas de las cuales tienen diferentes configuraciones, diferentes buscadores, diferentes sistemas

operativos, diferentes velocidades de conexin, procesador, memoria, y otros factores que pueden complicar el despliegue de la aplicacin Web.

No todos los componentes corren en todos los buscadores, el diseador tiene un trabajo extra que hacer si la aplicacin tiene que correr sobre muy diferentes tipos de buscadores, lo cual no es nuestro caso ya que nuestra aplicacin web correra bajo una misma plataforma.

El proceso de modelado de una aplicacin Web comienza justamente con el anlisis de proceso de modelado de aplicaciones clientes / servidor.

El equipo define los casos de uso, recoger y documentar los requerimientos, y escribir los flujo de eventos para los casos de usos. Nosotros no discutimos esto en detalle.

Una vez definido los flujos de eventos que han sido descritos por cada caso de uso. Esto envuelve la creacin de diagramas de secuencia, estados si es que fuera el caso, clases, componentes y despliegue. Como en una aplicacin cliente / servidor, los diagramas de secuencia y colaboracin muestran los objetos que participan en un escenario de un caso de uso. Como los diseadores son los que construyen y revisan los

diagramas de secuencia, ellos deben recordar mantener la arquitectura Web. En las extensiones para aplicaciones web de UML, (WAE), se incrementan dos diagramas correspondientes al modelo de analisis y diseo: diagrama arquitectnico y el diagrama navegacional, para realizar los mismos es necesario conocer un conjunto de estereotipos que permitan modelar esta arquitectura.

Estas son unas pocas, pero principales consideraciones: Una primera consideracin a tomar esta en que los diseadores no pueden asumir si los objetos pueden ser accedidos indefinidamente por el otro objeto. Como la conexin entre el cliente y el servidor es rota, los objetos sobre una capa no puede ser accedidos sobre la otra, y el servidor pierde la informacin del estado del cliente. La maquina del cliente puede almacenar el estado de esa informacin, mientras un objeto session es creado sobre el servidor y dicha informacin a travs de la vida de las sesiones del cliente. Despus de un periodo de tiempo de 30 minutos, el servidor asume que el cliente esta fuera de tiempo, y el objeto session es destruido.

Una segunda consideracin en el modelaje de aplicaciones Web, esta en que las paginas cliente, no deben tener acceso a los recursos del servidor. Los diseadores deben asegurar esto en todas las pginas, Applets, u otros

componentes del lado del cliente que no puedan directamente acceder al servidor. Como la construccin de diagramas de secuencia, por consiguiente el equipo no debe usar muchos componentes del lado del cliente. Arquitectura Web La arquitectura de un sitio web tiene tres componentes principales:un servidor web, una coneccion de red, y uno o mas clientes (browsers) Web Server http Client Browser

WebPage

Arquitectura bsica de una aplicacin Web La informacin mostrada en las pginas est tpicamente almacenada en archivos. Sin embargo, muchas veces esta informacin esta almacenada en una base de datos y las pginas son creadas dinmicamente. Los sitios web que usan este esquema son llamados sitios dinmicos: DataBase Web Server http Client Browser

Scripted Page

PageFilter

Pginas Web: son el componente principal de una aplicacin o sitio web. Los browsers piden pginas (almacenadas o creadas

dinmicamente) con informacin a los servidores web En algunos ambientes de desarrollo de aplicaciones web, las pginas contienen cdigo HTML y scripts dinmicos, que son ejecutados por el servidor antes de entregar la pgina Una vez que se entrega una pgina, la conexin entre el browser y el servidor web se rompe Scripts en el cliente: Cuando el browser ejecuta un script en el cliente, ste no tiene acceso directo a los recursos del servidor. Hay componentes que no son scripts, como los applets, los componentes ActiveX, los scripts del cliente son por lo general cdigo JavaScript o VBScript mezclados con cdigo HTML. Servidor web: en muchas aplicaciones web, hay una capa intermedia compuesta por un conjunto de componentes, que se ejecutan no necesariamente en el servidor web, sino en otros servidores de aplicaciones. Esta capa encapsula la lgica del negocios.

El comportamiento de una pgina web en el servidor es completamente diferente al comportamiento en el cliente. Mientras se ejecuta en el servidor, tiene que acceder recursos del lado del servidor (base de datos, sistema de archivos). En el lado del cliente, la pgina

tiene relaciones con el navegador mismo, y con Applets en Java, controles ActiveX o plug-ins que la pagina especifique. La pgina web del lado del servidor puede ser modelada con una clase y la del cliente con otra, con sus estereotipos definidos ServerPage y Client Page Estereotipos a) Server Page y Client Page Los elementos de presentacin ms importantes en una aplicacin web son los componentes de servidor encargados de construir las pginas y las pginas que se visualizan en el navegador del cliente. Los primeros se especifican mediante un estereotipo llamado <<server page>> (pgina de servidor), y las segundas mediante el estereotipo <<client page>> (pgina de cliente).

Server Page

Client Page

Se distinguen dos tipos de <<client page>>: Dinmicas. Son las generadas por un componente de servidor, es decir, una <<server page>>, as que siempre deben aparecer en el modelo del diseo. Para indicar que una <<server page>> crea una determinada
<<client page>> se usa una relacin estereotipada con <<build>>(construye)

desde la <<server page>> a la <<client page>>.

Server Pag e
<<build>>

Client Page

Pagina del Servidor

Pgina del cliente

Estticas. No tienen mucho inters a la hora del modelado, excepto cuando permiten invocar componentes de servidor.

Una <<client page>> puede invocar la ejecucin de un componente del servidor mediante hiperenlaces (<<link>> ) envos de formularios (clasificadores llamados
<<form>>).

En el primer caso, se pondr una relacin <<link>> desde la <<client page>> a la

<<server page>> con valores etiquetados para los parmetros.

En el segundo caso, se usar una relacin <<submit>> desde el <<form>> a la

<<server page>> etiquetada con el mtodo HTTP utilizado (get o post).

Client Page <<link>> {me thod =post; pa ram 1=valor1;..; pa ram N=valorN}

Server Page

b) Formularios El mecanismo principal para enviar datos en una pgina web es la forma. Las formas son definidas en un documento HTML con etiquetas <<form>>. La forma contiene un nmero de elementos de entrada, todas representadas como etiquetas HTML. Las etiquetas ms comunes son <<input>>, <<select>>, y <<textarea>>
Form

C) Frame (Marcos) Permiten que mltiples paginas estn activas y visibles para el usuario. Usando cdigo dinmico y componentes en estas paginas permiten que interacten entre ellas mismas. Para definir los marcos se pueden emplear los siguientes estereotipos: Frameset: representa un objeto contenedor y direcciona directamente a la etiqueta de HTML. Al ser un contenedor de mltiples pginas web, puede asociarse con un target, puede contener una pagina web u otro frameset.
FrameSet

Target: es nombrada marco o instancia de navegador que es referenciada por otras paginas cliente. Compartimiento en una ventana de browser en donde puede mostrarse paginas web.
Content

JavaScript Object: instancia de objeto genrico al que puede asociarse propiedades y funciones puede ser utilizado por los scripts, solo existe en el contexto del cliente
f(){ JavaScript

Diseo de la pagina cliente

Client Page
<<link>>

Server Page

{param1=valor1; param2=valor2; .. ; paramN=valorN}

Los contenidos importantes de una <<client page>> se especifican mediante relaciones de composicin o agregacin entre pgina cliente y clasificadores estereotipados con <<form>> (formularios), <<javascript>> (JavaScript), <<applet>> (applets Java) o <<activex>> (componentes ActiveX). Las relaciones y los clasificadores que componen la pgina se pueden etiquetar para indicar parmetros pasados o el nombre de los elementos. Una pgina HTML incluye muchos otros elementos que no suelen ser de inters para el modelo del diseo, aunque si lo son, se pueden indicar con notas, atributos y/o mtodos de clase.

Form

Client Page

f(){ } JavaScript

<<ActveX>>

<<Applet>>

Un tipo especial de pgina cliente es el <<frameset>>, que se asocia con los frames que contiene (clasificadores llamados <<target>>) mediante relaciones de agregacin. Por otro lado, un hiperenlace a una pgina que se debe cargar en un frame concreto, se especifica con una relacin estereotipada con
<<targeted link>> hacia la pgina a cargar, que debe incluir como valor etiquetado

el nombre del frame.

FrameSet

Content

ClientPage2

<<t argeted link>> {target=Content}

Client Page

La pgina ClientPage2 carga la pgina Client Page en el Content.

Los hiperenlaces convencionales (sin atributo target) se indican con relaciones de tipo <<link>>, y pueden ir desde una <<client page>> a otra <<client
page>> o a una <<server page>>. En el caso de pasar parmetros a otra <<client page>> se aadir a la relacin un valor etiquetado por cada parmetro (lista de

pares variable=valor encerrados entre llaves y separados por punto y coma); en la implementacin se usar JavaScript para este paso de parmetros, as que se puede dejar explcito en el modelo que la pgina llamadora incluye cdigo JavaScript. De los clasificadores indicados, el ms til desde el punto de vista del modelado es el <<form>>, ya que su especificacin debe incluir los campos que componen el formulario mediante atributos, quedando claro qu parmetros recibe la <<server page>> a la que apunta la relacin <<submit>>, el submit es una

asociacin entre un form y pagina del servidor, donde los formularios envian los datos a la pagina del servidor para ser procesados Diseo de la Pgina Servidor Una <<server page>> puede conectarse con otra <<server page>> mediante las relaciones <<include>> o <<redirect>> cuando se delega en ella algn procesamiento, incluyendo su contenido o hacindole un forwarding respectivamente.

Server Page3

<<include>>

Se rver Page

<<redirect>>

Server Page2

La dependencia de una <<server page>> con la sesin actual se puede dejar implcita, o bien indicarse con una relacin de dependencia que apunta al objeto sesin.

Por ltimo, los parmetros pasados con un <<link>> (codificados en la URL),

<<include>> o <<redirect>> (codificados en la URL, objeto peticin o sesin) se

pueden indicar con valores etiquetados en la relacin. La asociacin redirect es una asociacin unidireccional con otra pagina web, puede ser dirigida y hasta una pagina cliente o de servidor. Si la relacin origina desde una pagina del servidor entonces indica que el procesado de la pagina solicitada debe continuar en la otra pagina. Si la relacin se origina desde una pgina del cliente, entonces esto indica que la pgina destino ser automticamente solicitada por el navegador, sin la participacin activa del usuario.

Ejemplo: Sistema de inscripciones via web A) Diseo Navegacional

Registrar Materia

Registrar Profesor

Registrar Plan Estudios

Registrar Calificaciones

<<Index>> Menu_Seguimiento

Registrar Recibo <<subsystem>> Inscripcion

<<Index>> Menu_Inscripcion Registrar Alumno

<<Index>> menu_habilitacion Registrar Carrera <<subsystem>> Programacion <<subsystem>> Seguimiento <<subsystem>> Habilitacion

<<Index>> Menu_Programaciones

Registrar Programacion <<subsystem>> Tramites Registrar reprogramacion <<Index>> Menu_Tramites

<<subsystem>> Seguridad

<<Index>> MenuPrincipal

<<Index>> Menu_Seguridad

<<subsystem>> Matriculacion

Registrar Tramites

<<Index>> Menu_Matriculacion Registrar Usuarios

Registrar tipos tramites

Buscar Alumno

Asignar Tareas a Usuarios Registrar Matricula

Diseo arquitectnico - Subsistema de Inscripcin Registro de inscripcin de alumnos

<<Build>> formDatosAlumno psVerificar Verificar() pcVerificar <<Submit>>

(f rom pcRegistarAlumno)

<<Build>>

ps RegistrarAlumno FormDatos
(f rom pcVerif icar)

pcRegistarAlumno Regis trarAlum no() <<Submit>>

<<HTML Input>> CI : text <<HTML Input>> NoRecibo : text <<HTML Input>> Aceptar : submit <<HTML Input>> Cancelar : button

psRegirtrarDatos Regs itrarDatos()

<<Submit>>

pcRegis trarDatos

<<HTML Input>> CI <<HTML Input>> CU <<HTML Input>> Fecha_Ins cripcion <<HTML Input>> NoMatricula <<HTML Select>> Carrera <<HTML Select>> Plan <<HTML Input>> Apellido Paterno <<HTML Select>> Apellido Materno <<HTML Input>> Nombres <<HTML Input>> Departam ento <<HTML Input>> Provincia <<HTML Input>> Localidad <<HTML Select>> Dia <<HTML Select>> Mes <<HTML Input>> ao <<HTML Select>> sexo <<HTML Select>> edad <<HTML Select>> Es tado civil <<HTML Select>> No Hijos <<HTML Input>> Direccion Sucre <<HTML Input>> Telefono <<HTML Input>> Castellano <<HTML Input>> Qechua <<HTML Input>> Aymara <<HTML Input>> Guarani <<HTML Input>> Otros <<HTML Input>> Colegio <<HTML Input>> Otra Actividad <<HTML Input>> Residencia <<HTML Input>> Gestion

Listar alumnos inscritos por gestin

<<Build>> <<Submit>> <<Build>>

psSeleccionarCarrera oSeleccionarCarrera()

pcSeleccionarCarrera_Client
(f rom psSeleccionarCarrera)

psLista_Alumnos_Carrera Lista_Alumnos_carrera()

pcLista_Alumnos_Carrera_ Client
(f rom psLista_Alumnos_Carrera)

<<Link>> FSeleccionar
(f rom pcSeleccionarCarrera_Client)

<<HTML Input>> Carrera : text <<HTML Input>> Aceptar : submit <<HTML Input>> Cancelar : button pcReporte_Lista_Alumn os_Carrera

Subsistema de Programacin Registra programacin de materias

PCImprimirProg <<Link>>

<<Build>>

<<Include>>

PSResBuscar opname()

PCVerMatricula <<Include>>

PCProgramarMat <<Submit>>

ProgramarMat
(from PCProgramarMat)

<<HTML Input>> Seleccionar : checkbox = false

PCNoExisteMat

PSGuardarProg

Subsistema de Seguimiento Registro de materias

<<Build>>

<<Submit>>

<<Build>>

psRegistroMaterias

psRegistroMaterias_Client
(from psRegistroMaterias)

psAlmacenar_Datos_Materia Almacenar_Datos_Materia()

pcAlmacenar_Datos_Mate ria
(from psAlmacenar_Datos_Ma...)

RegsitroMaterias()

fMateria
(from psRegistroMaterias_Cli ent)

<<HTML Input>> Codigo Materia : text <<HTML Input>> Nombre materia : text <<HTML Input>> Aceptar : submit <<HTML Input>> Cancelar : button

Registro de Carreras

<<Build>>

<<Submit>>

<<Build>>

psRegistroCarreras

psRegistroCarreras_Client
(from psRegistroCarreras)

psAlmacenarDatosCarrera AlmacenarDatosCarrera()

pcAlmacenarDatosCarrera
(from psAl macenarDatosCarrera)

RegsitroCarreras()

fCarrera
(from psRegi stroCarreras_Cli ent)

<<HTML Input>> codigo carrera : text <<HTML Input>> Nombre Carrera : text <<HTML Input>> Aceptar : submit <<HTML Input>> Cancelar : button

Registrar Calificaciones

<<Build>>

<<Submit>>

<<Build>>

psRegistrarCalificaciones RegistrarCalificacion()

pcRegistrarCalificaciones_Client
(from psRegistrarCali ficaciones)

psAlmacenarDatosCalificaciones AlmacenarDatosCalificaciones()

pcAlmacenarDatosCalificaciones_Client
(from psAlmacenarDatosCalificaciones)

fRegistrarCalificaciones
(from pcRegistrarCalificaci ones_Client)

fAlamcenarDatosCalificaciones
(from pcAlmacenarDatosCalificaci on...)

<<HTML Select>> Materia : Select <<HTML Select>> Gestion : Select <<HTML Select>> Grupo : Select

<<HTML Input>> Nombres y Apellidos : text <<HTML Input>> Nata1 : text <<HTML Input>> Nota2 : text <<HTML Input>> Nota Sem : text <<HTML Input>> Examen Final : text <<HTML Input>> Nota Final : text <<HTML Input>> Habilitacion : text

DIAGRAMA DE SECUENCIAS Registrar Materia

: Kardex

: psRegistroMaterias... 1: Ver Lista Materias

: fMateria

: psRegistroMaterias

2: <<Submit>>Hacer Click para Aadir Materia

3: get(Codigo,Nombre_Materia)

Registrar Carrera

: Kardex

: psRegistroCarreras...

: fCarrera

: psRegistroCarreras

1: Ver Lista de Carreras

2: <<Submit>>Hacer Click para Aadir Carrera

3: get(Codigo,Nombre_materia)

Registrar Calificaciones

Usuario : Kardex

: pcRegistrarCalifica...

: fRegistrarCalificac...

: psRegistrarCalif...

1: Seleccionar Datos(Materia,Gestion,Grupo) 2: <<Submit>>Hacer Click para Regisitrar Calificaciones 3: get(Nombres y Apellidos,Nota1,Nota2,NOta_Sem,Exa_Final,Nota_Final,Habilitacion)

Programar Materias

Registrar Docentes o Profesores

: Kardex

: pcRegistroProfesores 1: Ver lista de Profesores

: fProfesor

: psRegistroProfe...

2: <<Submit>>Hacer Click para Aadir Profesor

3: get(CI,Apellido_Paterno,Apellido_Materno,Nombres,Profesion)

Matricular Alumno