Diseño de Aplicaciones Web * En las aplicaciones web el diseño es muy diferente de las aplicaciones tradicionales dado que hay que dividir la aplicación en tres elementos esenciales: Elementos del servidor (páginas del servidor): Aquellos elementos que están del lado del servidor y se ejecutan en éste para enviar los resultados al cliente. Elementos del cliente (páginas del cliente): Corren del lado del cliente como los scripts, programas ejecutables, etc. y tienen como propósito mostrar información que proviene del servidor o del mismo cliente. Elementos de interfaz con el usuario (páginas web): Componentes que determinan la forma de visualizar la información desplegada por el cliente en el browser y cuyo propósito es el de facilitar la interacción con el usuario. * Tomado del Libro Introducción a las Tecnologías Informaticas de los profesores Mauricio Gaona y Hector Angulo - EISC DSII – María Eugenia Valencia – EISC. Página 1

Diagramas de Navegación Durante el modelamiento de la navegación es necesario especificar los posibles caminos de navegación para el usuario, funciones que ejecutará en los documentos, enlaces y cómo la información será accesada. En el lenguaje UML los elementos de un modelo de navegación para aplicaciones web no están contemplados de manera directa. DSII – María Eugenia Valencia – EISC. Página 2 Diagrama de navegación Documento de interfaz y de secuencias de acceso, propios a los aspectos de las aplicaciones web

Diagramas de Navegación - UML Los elementos gráficos que conforman la extensión de UML para aplicaciones web son: Server Page (Página del servidor): Representa una página web que tiene scripts que son ejecutados por el servidor. 1.Programas y/o script que se escriben en diferentes lenguajes de programación, como PHP, ASP, C, C++, Perl, etc. 2. Programas escritos en Java que corren del lado del servidor (Java Servlets). DSII – María Eugenia Valencia – EISC. Página 3

Diagramas de Navegación - UML 3. Base de datos. Se usan principalmente para almacenar información. Página cliente: Son las páginas cuya ejecución se realiza del lado del cliente, por lo general tienen datos tipo multimedia, applets y scripts. Las páginas del cliente se clasifican en: 1.Formas: Representan una colección de elementos de entrada estándar, que aceptan entradas del usuario para ser enviadas (submit) a una página del servidor. DSII – María Eugenia Valencia – EISC. Página 4

Diagramas de Navegación - UML 1.Frames: Los frames le permiten al diseñador dividir la ventana del browser en áreas rectangulares, cada una con una página diferente. 1.Script del cliente: Funciones de JavaScript que son ejecutadas en respuesta a ciertos eventos como movimientos o clic del ratón que son capturados por el browser dentro de la página. 1.Applets: Si una página contiene un applet de Java, éste es descargado automáticamente del servidor que contiene el applet y se ejecuta localmente del lado del cliente. DSII – María Eugenia Valencia – EISC. Página 5

Diagramas de Navegación - UML Enlaces Expresan la estructura relacional de las diferentes páginas que conforman el diagrama. Se representan así: >: Se usa para establecer un enlace de navegación entre dos páginas del cliente, o de una página del cliente hacia una página del servidor. >: Se usa para representar la creación de una página del cliente desde una página del servidor, las páginas que son creadas de esta forma se llaman páginas de creación dinámica. >: Se usa para relacionar dos o más paginas del servidor como por ejemplo dos scripts escritos en PHP. DSII – María Eugenia Valencia – EISC. Página 6 >

Diagramas de Navegación - UML >: Se usa para representar el envío de información de una página forma hacia una página del servidor. >: Se usa para relacionar enlaces dentro de una misma página del cliente, estos enlaces permiten moverse dentro de una misma página. >: Se usa para indicar enlaces entre páginas de un mismo fame o indicar un enlace que crea una nueva página dentro de una nueva ventana. >: Se usa para relacionar objetos que cumplan una actividad espécifica dentro de una página. Ejemplo un javaScript que valida los campos de una forma. >: Indica accesos o cualquier tipo de consulta a una base de datos. DSII – María Eugenia Valencia – EISC. Página 7