Diseo de Aplicaciones Web*

En las aplicaciones web el diseo es muy diferente de las aplicaciones tradicionales dado que hay que dividir la aplicacin en tres elementos esenciales: Elementos del servidor (pginas del servidor): Aquellos elementos que estn del lado del servidor y se ejecutan en ste para enviar los resultados al cliente. Elementos del cliente (pginas del cliente): Corren del lado del cliente como los scripts, programas ejecutables, etc. y tienen como propsito mostrar informacin que proviene del servidor o del mismo cliente. Elementos de interfaz con el usuario (pginas web): Componentes que determinan la forma de visualizar la informacin desplegada por el cliente en el browser y cuyo propsito es el de facilitar la interaccin con el usuario.
* Tomado del Libro Introduccin a las Tecnologas Informaticas de los
profesores Mauricio Gaona y Hector Angulo - EISC DSII Mara Eugenia Valencia EISC. Pgina 1

Diagramas de Navegacin
Diagrama de navegacin Documento de interfaz y de secuencias de acceso, propios a los aspectos de las aplicaciones web

Durante el modelamiento de la navegacin es necesario especificar los posibles caminos de navegacin para el usuario, funciones que ejecutar en los documentos, enlaces y cmo la informacin ser accesada.
En el lenguaje UML los elementos de un modelo de navegacin para aplicaciones web no estn contemplados de manera directa.

DSII Mara Eugenia Valencia EISC. Pgina 2

Diagramas de Navegacin - UML

Los elementos grficos que conforman la extensin de UML para aplicaciones web son: Server Page (Pgina del servidor): Representa una pgina web que tiene scripts que son ejecutados por el servidor. 1. Programas y/o script que se escriben en diferentes lenguajes de programacin, como PHP, ASP, C, C++, Perl, etc.

2. Programas escritos en Java que corren del lado del servidor (Java Servlets).

DSII Mara Eugenia Valencia EISC. Pgina 3

Diagramas de Navegacin - UML

3. Base de datos. Se usan principalmente para almacenar informacin.

Pgina cliente: Son las pginas cuya ejecucin se realiza del lado del cliente, por lo general tienen datos tipo multimedia, applets y scripts.

Las pginas del cliente se clasifican en: 1. Formas: Representan una coleccin de elementos de entrada estndar, que aceptan entradas del usuario para ser enviadas (submit) a una pgina del servidor.

DSII Mara Eugenia Valencia EISC. Pgina 4

Diagramas de Navegacin - UML

1. Frames: Los frames le permiten al diseador dividir la ventana del browser en reas rectangulares, cada una con una pgina diferente.

1.

Script del cliente: Funciones de JavaScript que son ejecutadas en respuesta a ciertos eventos como movimientos o clic del ratn que son capturados por el browser dentro de la pgina.

1.

Applets: Si una pgina contiene un applet de Java, ste es descargado automticamente del servidor que contiene el applet y se ejecuta localmente del lado del cliente.

DSII Mara Eugenia Valencia EISC. Pgina 5

Diagramas de Navegacin - UML

Enlaces Expresan la estructura relacional de las diferentes pginas que conforman el diagrama. Se representan as: <<relacin>> <<link>>: Se usa para establecer un enlace de navegacin entre dos pginas del cliente, o de una pgina del cliente hacia una pgina del servidor. <<build>>: Se usa para representar la creacin de una pgina del cliente desde una pgina del servidor, las pginas que son creadas de esta forma se llaman pginas de creacin dinmica. <<redirect>>: Se usa para relacionar dos o ms paginas del servidor como por ejemplo dos scripts escritos en PHP.
DSII Mara Eugenia Valencia EISC. Pgina 6

Diagramas de Navegacin - UML

<<submit>>: Se usa para representar el envo de informacin de una pgina forma hacia una pgina del servidor. <<target>>: Se usa para relacionar enlaces dentro de una misma pgina del cliente, estos enlaces permiten moverse dentro de una misma pgina. <<target link>>: Se usa para indicar enlaces entre pginas de un mismo fame o indicar un enlace que crea una nueva pgina dentro de una nueva ventana. <<object>>: Se usa para relacionar objetos que cumplan una actividad espcifica dentro de una pgina. Ejemplo un javaScript que valida los campos de una forma. <<DB_access>>: Indica accesos o cualquier tipo de consulta a una base de datos.
DSII Mara Eugenia Valencia EISC. Pgina 7