1

ISOO ISOO
INGENIERIA DE SOFTWARE INGENIERIA DE SOFTWARE
ORIENTADA A OBJETOS ORIENTADA A OBJETOS
Ing. Denny J. Fuentes Adrianzn
Un proceso basado en UML
para aplicaciones Web
Arquitecturas de Aplicaciones Web.
Extensin UML para el modelado de aplicaciones
Web.
Diseo de Aplicaciones Web.
id8264864 pdfMachine by Broadgun Software - a great PDF writer! - a great PDF creator! - http://www.pdfmachine.com http://www.broadgun.com

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

2
Arquitectura de Sitios Web
Sitio Web
Componentes de una Arquitectura Bsica:
Servidor Web.
Conexin de Red.
Uno o ms navegadores (browsers) clientes.
Arquitectura de
Sitios Web Dinmicos
Sitio Web Dinmico
Pginas Web elaboradas en tiempo de ejecucin...
Resultado de ejecutar scripts o mdulos compilados
Utilizando informacin almacenada en BDs, ...

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

3
Arquitectura de Aplicaciones Web
Aplicacin Web
Extiende un Sitio Web, permitiendo al usuario invocar y modificar la
lgica del negocio en el servidor
Componentes bsicos:
! Navegador del cliente (browser HTML/XML)
! Servidor Web (comunica con clientes va HTTP)
! Servidor de Aplicaciones (maneja lgica del negocio)
! (Servidor de Bases de Datos)
Componentes avanzados
! Scripts,
! applets,
! controles, objetos distribuidos,...

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

4
Patrn de Arquitectura Web
Expresa esquemas de organizacin estructural bsica para
sistemas software
Proporciona:
Conjunto de subsistemas predefinidos
Especificacin de responsabilidades de cada subsistema
Reglas y guas para organizar las relaciones entre subsistemas
Patrn de Arquitectura Web
Patrones ms comunes:
Thin Web Client - Cliente Web Ligero
Thick Web Client - Cliente Web Pesado
Web Delivery - Distribucin Web
No es una lista completa
evolucin tecnolgica constante
Es posible aplicar varios patrones a una misma arquitectura

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

5
Cliente Web Ligero: Usado para aplicaciones basadas en Internet donde toda la
lgica de negocios se ejecuta en el servidor.
Cliente Web Pesado: Usado en aplicaciones donde hay una cantidad
significante de lgica de negocio en el cliente, basicamente mediante HTML
dinmico, appletss o controles ActiveX.
Distribucin Web: Usado para aplicaciones donde cliente y servidor adems
de comunicarse mediante http, utilizan otros protocolos como RMI o DCOM
para soportar objetos distribuidos.
Aplicabilidad
til para aplicaciones basadas en Internet
Mnimo control de la configuracin del cliente
El cliente slo necesita un browser Web que realiza peticiones
de pginas
Lgica del negocio ejecutada en el servidor
Cliente Web Ligero

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

6
Cliente Web Ligero
Estructura
Mnima arquitectura para una aplicacin Web
Sus principales componentes estn en el servidor
Componentes:
Browser del cliente
Servidor Web
Conexin HTTP
Pginas HTML
Pginas del servidor
Servidor de Aplicaciones
Cliente Web Ligero
Pgina HTML
Fichero con informacin de contenido y de interfaz de usuario
que no necesita procesamiento en el lado del servidor
Cuando el servidor Web recibe una peticin de una pgina
HTML, recupera el fichero y lo enva al cliente que la solicit

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

7
Cliente Web Ligero
Pgina del servidor
Pgina Web que necesita procesamiento en el lado del servidor (pgina
dinmica):
Scripts (ASP, JSP)
Mdulos compilados (ISAPI/NSAPI DLLs, CGI)
Modifica el estado del negocio en el servidor
Tienen acceso a todos los recursos del servidor:
componentes de lgica del negocio, bases de datos, sistemas heredados, etc..
Construye pginas HTML que sern enviadas al browser que la solicit
Cliente Web Ligero
Servidor de Aplicaciones
Motor principal para ejecutar lgica del negocio en el lado del servidor
Responsable de ejecutar el cdigo en pginas servidor
Puede estar en la misma mquina que el servidor Web (incluso ejecutarse en el
mismo espacio de proceso)
Elemento separado en la arquitectura porque...
Slo interesado en ejecutar la lgica del negocio y
puede usar tecnologa distinta de la del servidor Web

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

8
Cliente Web Ligero:
Vista lgica de la Arquitectura Mnima
Browser HTTP
Servidor Web
Servidor de Aplicaciones
Pginas del Servidor
Pginas HTML
+ Cookies
+ Autenticacin
+Gestin de Cookies Estado de Sesin
+ Form
+Entrada de Datos
+ Active Server Pages
+ Java Servlets
+ ISAPI
+ NSAPI
+ CGI
+ Java Server Pages
Cliente Web Ligero
Dinmica
Comportamiento de aplicaciones construidas con este patrn de
arquitectura
La lgica del negocio slo se ejecuta durante el procesamiento de las
peticiones de pginas Web por el cliente
Una vez satisfecha la peticin,
se devuelve una pgina HTML al cliente
y finaliza la conexin entre cliente y servidor

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

9
Cliente Web Ligero
Consecuencias (del uso de esta arquitectura)
Tiempo de Respuesta:
Adecuada para aplicaciones cuyas respuestas del servidor puedan ser
completadas dentro del tiempo de respuesta aceptable esperado por el
usuario y del valor de timeout permitido por el browser del cliente
No adecuada si la aplicacin necesita permitir al usuario iniciar y controlar
un proceso del negocio duradero
Interfaz de usuario
Capacidad de sofisticacin limitada a lo soportado por el browser y la
especificacin HTML
Extiende el patrn Cliente Web Ligero con el uso de scripts y objetos en el
lado del cliente:
Scripts del cliente, Controles, Applets, Plug-ins
El cliente puede ejecutar algo de lgica del negocio
El browser es ms que un contenedor de interfaces de usuario
generalizado
Aplicabilidad
til para aplicaciones Web en las que pueda asumirse cierto control sobre la
configuracin del cliente y la versin del browser, se desea una interfaz de
usuario sofisticada, donde el cliente puede ejecutar algo de lgica del negocio.
Cliente Web Pesado

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

10
Cliente Web Pesado
Estructura
Uso de capacidades del browser:
Controles ActiveX,
Applets Java
Scripts del cliente
que slo pueden interactuar con objetos en el cliente
comunicacin cliente - servidor va HTTP
Componentes:
Los del patrn Cliente Web Ligero
Scripts del Cliente
Documentos XML
Controles ActiveX
Applets de Java
JavaBeans
Cliente Web Pesado: Vista lgica de la
Arquitectura
HTTP
Objetos del
Negocio
Persistencia
Mapping de
Persistencia
Sistema de
Contabilidad
de Mercado
Interfaz de
Sistema Heredado
Pginas del Servidor
+ Active SP
+ Java SP
+ Java Servlets
+ ISAPI
+ NSAPI
+ CGI
Pginas HTML
+ Form
+ Elementos de Entrada
Servidor de Aplicaciones
+ Estado de Sesin
Servidor Web
+ Autenticacin
+ Gestin de
Cookies
Browser
+ DOM
+ Cookies
Documentos XML
+ Elemento
+ Atributo
Control
ActiveX
Applet Java
Script del
Cliente

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

11
Cliente Web Pesado
Dinmica
Incluye la del Cliente Web Ligero
Comunicacin slo durante peticiones de pginas
Parte de la lgica del negocio puede ejecutarse en el cliente:
Scripts
validacin de campos, etc..
pueden responder a eventos enviados por el browser
Applets y controles
independientes o guiados por scripts en la pgina
peticin/envo/recepcin/parsing de documentos XML
Cliente Web Pesado
Consecuencias
Portabilidad
No todos los browsers soportan JavaScript o VBScript
ActiveX slo soportado por clientes Ms-Windows y el usuario puede
desactivar su uso
Cada browser implementa su propia versin de Java
Diferencias en la implementacin del DOM
Pruebas
Comprobar el comportamiento correcto de los scripts, controles o applets
para cada browser y configuracin del cliente que deba ser soportada

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

12
Sistema de objetos distribuidos basado en un sitio Web
Usa protocolos de comunicacin entre cliente y servidor diferentes a HTTP
Pueden ejecutarse objetos reales en el contexto del cliente o el browser,
Con acceso a recursos del cliente.
Pueden comunicarse directamente con objetos del servidor y con otros
browsers
Distribucin Web
(Web Delivery)
Distribucin Web
Aplicabilidad
Existe un control significativo sobre la configuracin de cliente y de la
red
No muy adecuado para aplicaciones basadas en Internet o cuando la red es
poco fiable
Ms adecuado para intranets (seguridad y rapidez)
Comunicacin directa y persistente entre cliente y servidor
Combinado con otros patrones de arquitectura

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

13
Distribucin Web
Usos Conocidos
CNN Interactive Web Site
acceso pblico va browsers y HTML3.2 tras el sitio Web est una red
basada en CORBA
de browsers, servidores y objetos distribuidos
Compaa de software para el cuidado de la salud
Aplicacin Cliente Web Pesado para gestin de pacientes e historiales
Aplicacin Distribucin Web para facturacin
Distribucin Web
Estructura
Comunicacin entre cliente y servidor mediante protocolos diferentes a
HTTP
Componentes:
Los del patrn Cliente Web Ligero y
DCOM
IIOP
RMI

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

14
Distribucin Web : Vista lgica de la Arquitectura
Objetos del
Negocio
Persistencia
Mapping de
Persistencia
Sist. Contabilidad
de Mercado
Interfaz de
Sistema Heredado
Pginas del
Servidor
Pginas HTML
Servidor de
Aplicaciones
Servidor Web
Browser
ActiveX del
Servidor
ActiveX del
Cliente
Applet Java
DCOM RMI HTTP
IIOP
Enterprise
JavaBeans
Distribucin Web
Dinmica
El cliente participa en un sistema de objetos distribuidos y se
Comunica directamente con objetos del servidor
El Browser contiene:
Interfaz del cliente y
Objetos del negocio
Descargados por el browser automticamente
desde el servidor
Comunicacin, asncrona e independiente, con
objetos del servidor

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

15
Distribucin Web
Consecuencias
Traslada parte de la carga del servidor al cliente
Portabilidad (anlogo a Cliente Web Pesado)
Requiere una red slida
Conexiones cliente - servidor de larga duracin
Una cada del servidor puede ser muy problemtica
Depende de :
Tipo de aplicacin (intranet/internet)
Necesidades de la aplicacin
Experiencia del equipo de desarrollo con las tecnologas disponibles
Que Arquitectura Elegir ?

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

16
Distribucin Web
NO
SI
Necesaria Comunicacin
Directa, Persistente
y Eficiente entre
cliente y Servidor?
SI
NO
SI
NO
Controles,
Applets
Scripts de
Cliente
Cliente Web Ligero
Cliente Web Pesado
Necesaria Lgica
de Aplicacin
en el Cliente?
Necesaria Lgica
de Aplicacin
Sofisticada en
el Cliente?
Eleccin de la Arquitectura
Principales entradas:
Modelo de Anlisis y Arquitectura
Actividad principal:
Refinar el Modelo de Anlisis para que pueda ser implementado con
los componentes de la arquitectura
Resultado: Modelo de Diseo
Se puede traducir a cdigo
Vincula las abstracciones del negocio y las realidades del software
Diagramas de Clases, Interaccin y de Componentes
Diseo

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

17
Las clases del anlisis evolucionan en clases del diseo y pginas
Web
Implica el descubrimiento de
nuevas clases,
atributos,
mtodos,
pginas Web,
relaciones entre pginas Web y
relaciones entre pginas Web y
clases del sistema
Depende del patrn de arquitectura elegido
Diseo
Definicin de Estereotipos, Valores Etiquetados (tag values), Restricciones
(constraints) para modelar aplicaciones Web.
Estereotipos, Clases, Asociaciones, Atributos y Componentes que
representan los elementos particulares de las aplicaciones web.
Extensin de UML para el
Modelado de Aplicaciones Web

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

18
Estereotipos de Clase
Server Page
Client Page
Form
Frameset
Target
JavaScript Object
nombre
Server Page
Descripcin:
Pgina web con scripts ejecutados por el servidor
Los scripts interactan con recursos del servidor:
BDs, lgica del negocio, sistemas externos, etc..
Las operaciones representan las funciones en el script
Los atributos representan variables visibles en el mbito de la pgina
accesibles por todas las funciones en la pgina
nombre
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

19
Server Page
Restricciones:
Slo puede participar en relaciones con objetos del servidor
Valores etiquetados
Scripting Engine : lenguaje o motor que debera utilizarse para ejecutar o
interpretar la pgina (VBScript, CFML, etc..)
nombre
nombre
Client Page
Descripcin:
Una instancia de Client Page es una pgina Web con formato HTML
Mezcla de datos, presentacin y lgica
Mostrada por un navegador o browser
Puede contener scripts interpretados por el browser
nombre
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

20
Client Page
Descripcin (cont.):
Las operaciones representan funciones en el script en la pgina
Los atributos representan variables del script
accesibles por toda funcin en la pgina
Puede participar en asociaciones con Client Page's o Server
Page's
nombre
nombre
Client Page
Restricciones: Ninguna
Valores etiquetados
TitleTag : ttulo de la pgina mostrado por el browser
BaseTag : URL base para de-referenciar URLs relativas
BodyTag : conjunto de atributos que establece el fondo
y texto por defecto
nombre
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

21
Form
Descripcin:
Formulario: coleccin de campos de entrada de datos, parte de una
Client Page
Los atributos representan campos de entrada del form HTML
No tiene operaciones
Toda operacin que interacta con el form es una propiedad de la pgina
que contiene el form
nombre nombre
Form
Restricciones: Ninguna
Valores etiquetados:
SubmitMethod : mtodo (GET o POST) utilizado para enviar los datos a la
pgina servidor que los procesar
nombre
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

22
Frameset
Descripcin:
Contenedor de mltiples pginas web
rea visible dividida en rectngulos o frames
Cada frame
puede asociarse con un target
puede contener una pgina Web u otro Frameset
Un Frameset es una Client Page:
Puede tener atributos y operaciones
Pero las operaciones slo pueden ser activadas por browsers que no
soportan frames
nombre
nombre
Frameset
Restricciones: Ninguna
Valores etiquetados
Rows : cadena de alturas de fila separadas por comas
Cols : anchuras de columna separadas por comas
nombre
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

23
Target
Descripcin:
Compartimento (con nombre) en una ventana de browser en donde
puede mostrarse pginas web
Puede ser:
Frame en una ventana definido por un Frameset
Una nueva instancia de browser o ventana
Una asociacin Targeted Link especifica un Target como el lugar
en el que una pgina web ha de ser mostrada
nombre
nombre
Target
Restricciones:
El nombre de un Target ha de ser nico por cada cliente del
sistema:
Slo puede existir una instancia de un Target en el mismo cliente
Valores etiquetados : Ninguno
nombre
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

24
JavaScript Object
Descripcin:
Objeto a medida (definido por el usuario)
instancia de objeto genrico al que puede asociarse propiedades y
funciones
puede ser utilizado por los scripts
Una instancia JavaScript Object slo existe en el contexto de
Client Page's
Restricciones: Ninguna
Valores etiquetados : Ninguno
nombre
<<JavaScript Object>>
nombre
Estereotipos de Asociacin
Link
Targeted Link
Frame Content
Submit
Builds
Redirect
DCOM
IIOP
RMI

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

25
Link
Descripcin:
Asociacin o vnculo entre una Client Page y
otra Client Page, o
una Server Page
Restricciones: Ninguna
Valores etiquetados
Parameters : lista de nombres de parmetros que deben ser pasados con la
peticin de la pgina ligada
Targeted Link
Descripcin:
Vnculo entre una pgina y otra que debe ser mostrada en un target
determinado
Restricciones: Ninguna
Valores etiquetados
Parameters : -- igual que en Link --
TargetName : target en el que debe ser mostrada la
pgina apuntada por el vnculo (destino)

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

26
Frame Content
Descripcin:
Agregacin que expresa el contenido de un frame : pgina o target
Puede tambin apuntar a otro frameset, indicando frames anidadas
Restricciones: Ninguna
Valores etiquetados
Row, Col : fila y columna concretas del frame en el
frameset al que pertenece la pgina o target asociado
Submit
Descripcin:
Asociacin entre Form y Server Page
Los forms envan informacin al servidor web a travs de Server Page's
para su procesamiento
Indica qu pginas pueden procesar el Form y los Forms
conocidos por una Server Page
Restricciones: Ninguna
Valores etiquetados
Parameters : lista de nombres de parmetro que deben pasarse junto con la
peticin de la pgina ligada

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

27
Build
Descripcin:
Asociacin entre Server Page y Client Page
Identifica la Server Page responsable de la creacin de una Client
Page
Asociacin unidireccional: la Client Page no sabe cmo lleg a existir
Una Server Page puede generar muchas Client Page's
Una Client Page slo es creada por una Server Page
Restricciones: Ninguna
Valores etiquetados : Ninguno
Redirect
Descripcin:
Asociacin unidireccional entre pginas web
Desde una Server Page a otra pgina:
El procesamiento de la solicitud de pgina puede continuar con la pgina
destino
La pgina destino puede o no participar en la construccin de una Client
Page
Relacin parte estructural y parte dinmica:
captura la pgina a la que redirigir (destino),
pero no cundo y bajo qu condiciones se hace la redireccin

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

28
Redirect
Descripcin (cont.):
Desde una Client Page a otra pgina:
La pgina destino ser solicitada automticamente por el browser, sin
entrada del usuario
Puede establecerse el tiempo de demora hasta que la pgina destino sea
solicitada
Restricciones: Ninguna
Valores etiquetados
Delay : tiempo que una Client Page debe esperar
hasta la redireccin a la siguiente pgina
DCOM, IIOP y RMI
Descripcin:
Relacin entre objetos cliente y objetos servidor
Representa un mecanismo alternativo a HTTP para comunicaciones
cliente/servidor
Restricciones: Ninguna
Valores etiquetados :Ninguno

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

29
Estereotipos de Atributo
Input Element
Select Element
Input Element
Descripcin:
Atributo de un objeto Form
Usado para introduccin de texto
Restricciones: Ninguna
Valores etiquetados
Type : tipo de control de entrada ( Text, Number,
Password, Checkbox, Radio, Submit o Reset )
Size : tamao del rea en pantalla, en caracteres
Maxlength : mximo n de caracteres que el usuario
puede introducir

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

30
Select Element
Descripcin:
Control de entrada usado en un Form
Permite al usuario seleccionar uno o ms elementos de una lista
Mostrado en forma de un combo box o list box
Restricciones: Ninguna
Valores etiquetados
Size : N de elementos mostrados a la vez
Multiple : Booleano que indica si se puede seleccionar ms de un elemento a
la vez
Estereotipos de Componente
Web Page
ASP Page
JSP Page
Servlet
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

31
Web Page
Descripcin:
El browser puede solicitarla por su nombre
Puede o no contener scripts de cliente o servidor
Puede ser :
Fichero de texto accesible por el servidor Web, o
Mdulo compilado cargado e invocado por el servidor
Produce un documento HTML que se enva como respuesta a una
peticin del browser cliente
Restricciones: Ninguna
Valores etiquetados
Path : Path de la Web Page en el servidor Web
nombre
nombre
ASP Page
Descripcin:
Slo en entornos de aplicaciones basadas en Microsofts
Active Server Pages
Web Page que implementa cdigo ASP del lado del servidor
Restricciones: Ninguna
Valores etiquetados : los de Web Page
nombre
<%
%>
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

32
JSP Page
nombre
nombre
Descripcin:
Slo en entornos de desarrollo de aplicaciones que usen Java
Server Pages
Web Page que implementa cdigo JSP del lado del servidor
Restricciones: Ninguna
Valores etiquetados : los de Web Page
Servlet
Descripcin:
Slo en entornos de desarrollo de aplicaciones que soporten
servlets de Sun
Componente de cdigo Java que se ejecuta en el servidor
Restricciones: Ninguna
Valores etiquetados : los de Web Page
nombre
nombre

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

33
Reglas de
Modelos Bien-Formados
Realizacin de Componentes :
Los componentes Web Page pueden realizar:
JavaScript Object
Frameset
Target
Server Page
Client Page
Form
Si se usa un entorno de desarrollo especfico (ej. JSP, ASP), los
componentes Web Page no pueden realizar Server Page's
Reglas de
Modelos Bien-Formados
Generalizacin:
Todos los elementos de modelado en una generalizacin
deben ser del mismo estereotipo
Asociaciones:
Las Client Page's pueden tener slo una relacin Build
con una Server Page
Una Server Page puede tener muchas Build con
diferentes Client Page's

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

34
Reglas de
Modelos Bien-Formados
To:
From:
Client Page Server Page Frameset Target Form
Client
Page
Link
Targeted Link
Redirect
Link
Targeted Link
Redirect
Link
Targeted Link
Redirect
Dependency Aggregation
Server
Page
Build
Redirect
Redirect
Redirect
Build
Frameset Frame Content
Frame
Content
Frame
Content
Target
Form Aggregated By Submit
Asociaciones vlidas entre estereotipos:
El diseo comienza con la transformacin del modelo de anlisis
Diagramas de Secuencia
Diagramas de Clases
Una vez la arquitectura ha sido entendida por el equipo de diseo
Diseo Cliente Web Ligero

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

35
Cliente
Virtual
Aadir Item
al Carro
Tramitar
Pedido
Examinar
Catalogo
<<extend>>
<<extend>>
Modelo de Requisitos:
Diagrama (parcial) de Casos de Uso
Modelo de Anlisis:
Diagrama de Secuencia de Sistema, caso de uso Tramitar Pedido
Sistema
: Cliente Virtual
tramitar pedido
confirmar pedido
El sistema examina el contenido
del carro de la compra, genera una
lista con todos los items que pueden
ser comprados y muestra la lista al
cliente para su confirmacin

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

36
Modelo de Anlisis:
Diagrama de Clases
+Items
Item Carro
Carro
Producto
0..*
+elProducto
1
Modelo de Anlisis:
Diagrama de Secuencia operacin Tramitar Pedido
: Cliente
Virtual
:GUI Carro
:Gestor
Tramitacion
: Carro : Item Carro : Producto
: Resumen
Pedido
tramitar pedido
tramitar pedido
calcular totales
create
mostrar
calcular total
Por cada
tem en
el carro
obtener precio

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

37
Diagramas de Secuencia
Un actor slo interacta con Client Page's
Una Server Page slo interacta con recursos del servidor
Una Server Page es responsable de...
coordinar las actividades de los objetos del servidor
construir las interfaces de usuario devueltas al cliente
manejar la sesin (estado del cliente)
Diseo Cliente Web Ligero
Uso de objetos especficos de la tecnologa empleada para crear
Server Page's
Objeto Session
Mecanismo para capturar el estado del cliente
Diccionario que almacena valores y objetos
Mantiene su estado a travs de mltiples peticiones de pginas del cliente
Una instancia por cada cliente del sistema
Puede implementase mediante Cookies en el browser
Objeto Application
Diccionario que mantiene el estado general de la aplicacin
Una instancia, compartida por todos los clientes del sistema
Diseo Cliente Web Ligero
ASP
JSP

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

38
Modelo de Diseo: Diagrama de Secuencia
: Cliente
Virtual
: Carro
OnLine
: Tramitar
Pedido
: Resumen
Pedido
: Session : Carro
tramitarPedido
tramitarPedido
mostrar
item("carro")
tramitarPedido
escribirLineaItem
escribirSubtotal
escribirImpuestos
escribirGastosEnvio
escribirTotal
Por cada tem
en el carro
Restar responsabilidad a las Server Page's:
Intentar no incluir implementacin de lgica del negocio
Delegacin en objetos del negocio
Separacin de responsabilidades de:
coordinacin de actividades y
construccin de interfaces
delegacin mediante redireccin a otras pginas servidor
" as, sern ms fciles de mantener y reutilizar
Diseo Cliente Web Ligero

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

39
:Construir
Resumen
Pedido
: Cliente
Virtual
: Carro
Online
:Tramitar
Pedido
:Resumen
Pedido
: Session : Carro
tramitarPedido
tramitarPedido
mostrar
item("carro")
tramitarPedido
redirigir
escribirLineaItem
escribirTotalBruto
escribirImpuestos
escribirGastosEnvio
escribirTotal
<<create>>
Por cada tem
en el carro
Modelo de Diseo: Diagrama de Secuencia
Separacin de responsabilidades de pginas del servidor
Diagramas de Clases para expresar...
Relaciones entre pginas cliente, pginas servidor y objetos
Vnculos (de navegacin) entre pginas cliente
Actividad de una pgina del servidor para construir una pgina de
cliente
relaciones entre la pgina del servidor y los objetos del negocio y del
sistema con los que interacta
relacin entre la pgina servidor y la pgina cliente que genera
Diseo Cliente Web Ligero

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

40
Modelo de Diseo: Diagrama de Clases para Tramitar Pedido
Session Carro
Online
Construir
Resumen
Pedido
Resumen
Pedido
Tramitar
Pedido
Carro
tramitarPedido()
<<build>>
<<redirect>>
<<link>>
+Carro
1
+elCarro
1
Modelo de Diseo:
Diagrama de Clases para Tramitar Pedido (incluyendo form)
Session CarroOnline
Construir
Resumen
Pedido
Resumen
Pedido
Tramitar
Pedido
<<build>>
<<redirect>>
<<submit>>
+Carro
1
+elCarro
1
Formulario
Carro
Carro
tramitarPedido()

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

41
Modelo de Diseo:
Diagrama de Clases centrado en pginas de cliente
Informac
General
UBU
Home Univ
Burgos
Investi
gacion
Planes de
Estudio
Tercer
Ciclo
Estudios
Presen
tacion
Cursos
Informac
cursos
Cursos de
Verano
Cursos
de Verano
2001
Tecnicas
Avanzadas
Lenguaje
Java
<<link>>
<<link>>
<<link>>
<<link>>
<<link>>
<<link>>
<<link>>
<<link>>
<<link>>
<<link>>
<<link>>
Ponentes
TALJ
Programa
TALJ
<<link>>
<<link>>
Modelo de Diseo:
Diagrama de Clases para la construccin de pgina de cliente
Obtener
Carro
+elCarro
1
Carro
OnLine
<<build>>
0..*
1
+Items
+elProducto
Producto
Carro Item Carro
Session
Formulario
Carro

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

42
Diseo de formularios
Un form slo existe en el contexto de una pgina del cliente
Representado como elemento Form agregado
de una Client Page
Atributos !campos de entrada
Pueden llevar un estereotipo (input,selection,...)
Conectado a una Server Page mediante
una asociacin de submit
Diseo Cliente Web Ligero
Carro
OnLine
Formulario
Carro
<<input>> cantidad[0..*]
<<input>> tramitarPedido
<<input>> recalcular
<<input>> seguirComprando
Tramitar
Pedido
<<submit>>
Modelo de Diseo:
Formulario incluido en la pgina web de cliente CarroOnLine

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

43
Diseo de conjuntos de frames
Un frameset es una pgina Web cuya rea de visin se divide en
subreas (frames)
Representado como Frameset ligado a Client Pages y Targets
mediante agregacin
Uso de Targeted Link y constraints UML para representar posibles
contenidos de los Target
Diseo Cliente Web Ligero
Modelo de Diseo:
Representacin de Frames
Libro
Contenido
Capitulo2
Captulo1
Indice
Prefacio
<<targeted link>>
<<targeted link>>
<<targeted link>>
{target=Contenido}
{target=Contenido}
{target=Contenido}
<<frame content>>
<<frame content>>

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

44
: Carro
OnLine
: Cliente Virtual
cambiarCantidad
recalcularCostesTotales
recalcular
actualizarFormulario
actualizarCantidadItems
Modelo de Diseo:
Expresin de scripts en una pgina cliente
: Carro
OnLine
: Cliente Virtual
cambiarCantidad
actualizarFormulario
actualizarCantidadItems
:Formulario
Carro
recalcularCosteTotal
recalcular
Modelo de Diseo:
Otra forma de expresar scripts en una pgina cliente

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

45
Modelo de Diseo: Diagr. de Clases
Session
Obtener
Carro
Item
<<JavaScript Object>>
Producto
Carro
OnLine
0..*
Formulario
Carro
Carro ItemCarro
+Items
<<build>>
+carro
Application
+itemsCarro
+elProducto
Calendar
day()
month()
year()
value()
nextMonth()
today()
refresh()
<<ActiveX Control>>
IRealAudio
getSource()
setSource()
doPlayPause()
doStop()
doGoToURL()
doPlay()
doPause()
getTitle()
<<Interface>>
Noticiario
Universitario
Descripcion
NoticiasDiarias
pelicURL [ ]
fechaCambiada()
hayPelicula()
Resumen
Noticias
<<targeted link>>
+visorPeliculas
+calendario
{parameters=fecha,
target=Descripcion}
Modelo de Diseo:
Diagrama de clases con pginas cliente que usan componentes
ActiveX

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

46
: Visitante
: Noticias
Diarias
: Calendar : IRealAudio
: Construir
Resumen
Noticias
: Resumen
Noticias
:Descripcion
seleccFecha
fechaCambiada
mostrar
targetedLink (Descripcion,fecha")
<<create>>
doGoToURL
doPlay
hayPelicula
buscarResum
Modelo de Diseo:
Diagrama de secuencia que incluye componentes del lado del cliente
Tanto los scripts como los objetos de cliente pueden interactuar
con el browser
Si se necesita modelar dicha interaccin...
Representar el browser como un objeto en los diagramas de
secuencia
Y en los de clases, si es necesario
Objeto y operaciones definidos en el DOM
Diseo Cliente Web Pesado

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

47
Representacin de la posible comunicacin entre objetos en el
cliente y en el servidor
Asociacin estereotipada con el mecanismo de comunicacin:
RMI
IIOP
DCOM
Importante desde el punto de vista de la arquitectura:
conexin abierta e independiente entre los objetos
Diseo Distribucin Web
Mantenimiento
Productos
TablaDatos
<<ActiveX Control>>
IConjuntoRegistros
<<Interface>>
<<DCOM>>
1
Modelo de Diseo:
Diagrama de clases con objetos distribuidos y mecanismo de comunicacin DCOM

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

48
: TablaDatos
: Cliente Virtual
:Mantenimiento
Productos
:IConjunto
Registros
obtenerConjuntoDatos
abrir
siguiente
siguiente
navegar
abajo
editar entrada
actualizar
Modelo de Diseo:
Diagrama de secuencia
Expresar en los diagramas de clases la funcionalidad de la lgica
del negocio y NO aspectos detallados de diseo de la interfaz de
usuario
Separacin de Responsabilidades entre cliente y servidor,
permite...
Mayor reutilizacin de pginas individuales
Separacin de presentacin y lgica del negocio
Beneficia a la implementacin
Diseo: consideraciones

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

49
Intentar mantener baja la complejidad del lado del cliente
Es el elemento sobre el que menos control tiene el equipo de
desarrollo
Desconfiar de las capacidades ms novedosas de los browsers
Pueden no llegar a convertirse en estndares
DOM carece de elementos que cada browser implementa a su modo
(modelo de eventos,...)
Diseo: consideraciones
Evitar usar mltiples ventanas de browser al mismo tiempo
Facilitar el diseo de pruebas
Denominacin consistente de pginas web
Poltica establecida en el equipo de desarrollo
Ejemplo:
pginas del servidor con prefijos Procesar- o Construir-
Diseo: consideraciones

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

50
Session
ObtenerCarro
<<Server Page>>
Item
<<JavaScript Object>>
Producto
CarroOnLine
<<Client Page>>
0..*
Formulario
Carro
<<Form>>
Carro ItemCarro
+Items
0..*
<<build>>
+carro
Application
+lineasPedido
+elProducto
Modelo de Diseo:
Diagrama final de Clases (parcial) sin iconos
Modelo de Diseo: Diagr. de Clases
(atributos y operaciones)
FormularioCarro
<<input>> cantidad[0..*] :Integer
<<input>> tramitarPedido
<<input>> recalcular
<<input>> seguirComprando
<<Form>>
Session
ObtenerCarro
numItems : Integer
impuesto : Currency
costesEnvio : Currency
total : Currency
obtenerCarro()
construirTabla()
escribirFilaTabla()
crearJSItem()
crearItems()
main()
<<Server Page>>
Item
idProducto : Long
numProducto : String
descripcion : String
cantidad : Integer
precioUnidad:Currency
peso : Float
coste : Currency
calculaTotal()
pesoTotal()
<<JavaScript Object>>
Producto
idProducto : Long
numProducto : String
nombreProducto: String
costeUnidad: Currency
peso : Single
imagen : String
calcularCoste()
disponibilidad()
CarroOnLine
numItems : Integer
totalBruto : Currency
impuesto : Currency
total : Currency
costeEnvio : Currency
tarifaImpuestos : Float
actualizarItems()
recalcularTotales()
actualizarForm()
bodyOnLoad()
<<Client Page>>
0..*
Carro
impuesto : Currency
envio : Currency
peso : Single
total : Currency
obtenerNumItems()
tramitarPedido()
aadirItem()
eliminarItem()
obtenerItems()
crearPedido()
borrar()
obtenerItemDeCarro()
Class_Initialize()
ItemCarro
cantidad : Integer
id : Long
coste()
peso()
+items
<<build>>
+carro
Application
tarifaImpuestos : Currency
+lineasPedido
+elProducto
carro
nombreProducto: String

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

51
Definicin de los componentes que realizan o implementan las
pginas y clases del diseo
Dividir la vista de componentes en dos paquetes:
Componentes del Servidor
Objetos de negocio, capa de persistencia, ...
Pginas Web
Abstraccin de Directorio de Servidor Web
Usar estereotipos especficos segn las tecnologas empleadas
Diseo de Componentes
<<ActiveX DLL>>
AlmacenOnLine
Componentes del Servidor
Modelo de Diseo: Vista (parcial) de
Componentes
Paginas Web
<%
%>
ObtenerCarro
<%
%>
Actualizar
Carro
<%
%>
Tramitar
Pedido
<%
%>
Construir
Resumen
Pedido

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

52
Modelo de Diseo:
Realizacin de pginas mediante componentes
Obtener
Carro
Carro
OnLine
Formulario
Carro
Tramitar
Pedido
Actualizar
Carro
ObtenerCarro
<<ASP Page>>
TramitarPedido
<<ASP Page>>
ActualizarCarro
<<ASP Page>> <<ASP Page>>
Construir
ResumenPedido
Construir
Resumen
Pedido
Resumen
Pedido
Implementacin de pginas de servidor
Componentes de mdulo compilado:
suelen realizar (implementar) varias Server Page's
diseo ms complejo
o Componentes de pgina scripted
cada componente realiza una Server Page
tambin puede implementar las Client Page's generadas (build) por la
Server Page
Diseo de Componentes

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

53
Implementacin de pginas de cliente
Pgina HTML (componente Web Page)
Puede contener scripts (JavaScript)
o Parte de un componente que
implementa una Server Page
En ambos casos, incluye los Form
contenidos por la Client Page
Etiqueta <form>
Diseo de Componentes
Bienvenida Datos
Conexion
Conectar
Implementacin de Links
Ancla HTML: etiqueta <a> en la pgina origen
Implementacin de Frames
Pgina HTML (componente Web Page)
Elemento <frameset>
Un <frame> por cada Client Page fija y Target
Implementacin de Objetos de Cliente
Applet Java o control ActiveX
dentro de pginas HTML (etiqueta <object>)
Diseo de Componentes

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA

54
Bibliografa
Conallen, Jim: Building Web Applications with UML, Addison-Wesley,
1999.
http://www.conallen.com
Kruchten, Philippe: The Rational Unified Process. An introduction
Addison-Wesley, 1999.

pdfMachine - is a pdf writer that produces quality PDF files with ease!
Get yours now!
Thank you very much! I can use Acrobat Distiller or the Acrobat PDFWriter but I consider your
product a lot easier to use and much preferable to Adobe's" A.Sarras - USA