P. 1
Desarrollo de aplicaciones Web en MicroSoft C# modeladas en UML

Desarrollo de aplicaciones Web en MicroSoft C# modeladas en UML

4.5

|Views: 14.237|Likes:
El Texto guiará al estudiante, por medio de documentos, a través de los entornos de modelación e implementación, utilizando UML y la miniarquitectura Microsoft.NET para el desarrollo de una aplicación Web. La modalidad es teórico práctico, el estudiante deberá complementar con lecturas recomendadas sobre cada capítulo antes de realizar la parte práctica.
El Objetivo general es documentar el desarrollo de una aplicación Web de acuerdo con el lenguaje UML y parte del Processo Unificado de Rational, siguiendo un determinado proceso desarrollo basado en RUP. Todo el texto se basa en un ejemplo práctico que incluirá todos los puntos señalados en los capítulos.

OBJETIVOS ESPECÍFICOS

Conocer las características de la Programación en .NET
Modelar en UML aplicaciones Web
Desarrollar aplicaciones en C# que han sido modeladas en UML
Conocer la nueva filosofía de la programación Web, Web Service y Windows Comunicación Foundation.
Profundizar en las técnicas de Ingeniería de Software de las etapas de Requisitos y Análisis
Profundizar en las técnicas de diseño de aplicaciones de cualquier tipo (clásicas y Web).
El Texto guiará al estudiante, por medio de documentos, a través de los entornos de modelación e implementación, utilizando UML y la miniarquitectura Microsoft.NET para el desarrollo de una aplicación Web. La modalidad es teórico práctico, el estudiante deberá complementar con lecturas recomendadas sobre cada capítulo antes de realizar la parte práctica.
El Objetivo general es documentar el desarrollo de una aplicación Web de acuerdo con el lenguaje UML y parte del Processo Unificado de Rational, siguiendo un determinado proceso desarrollo basado en RUP. Todo el texto se basa en un ejemplo práctico que incluirá todos los puntos señalados en los capítulos.

OBJETIVOS ESPECÍFICOS

Conocer las características de la Programación en .NET
Modelar en UML aplicaciones Web
Desarrollar aplicaciones en C# que han sido modeladas en UML
Conocer la nueva filosofía de la programación Web, Web Service y Windows Comunicación Foundation.
Profundizar en las técnicas de Ingeniería de Software de las etapas de Requisitos y Análisis
Profundizar en las técnicas de diseño de aplicaciones de cualquier tipo (clásicas y Web).

More info:

Published by: Roberto F. Zamuriano Sotés on Feb 09, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

07/23/2015

pdf

text

original

En este documento se inicia el Diseño de la aplicación construyendo el Mapa de Navegación, el cual
permitirá describir de forma general la navegación de la aplicación web se va a desarrollar. Antes de
iniciar se verá algunos de los estereotipos que permiten describir una aplicación web.

Se debe diferenciar un Sitio Web de una Aplicación Web. El primero solo publica información, el cual no
cambia su estructura ni su contenido. Una Aplicación Web es capaz de cambiar el estado de una
organización o negocio, sólo se instala en un servidor para que el usuario obtenga toda la potencialidad
de la aplicación, se necesita de http para la comunicación, este protocolo es robusto y tolerante a fallos.
También, el servidor de la aplicación gira alrededor de páginas web, las cuales tienen incluidas el flujo de
trabajo de la organización o el negocio resolviendo peticiones del los usuarios. Cada página web se
considera como un objeto, es decir, que se al momento de implementar será una clase.

El cambio de la tecnología y la política de Acercamiento al Cliente que disponen las organizaciones han
sido las que han permitido el surgimiento de las Aplicaciones Web, entre las ventajas de este nuevo
paradigma están:

- No se instala en el Cliente. Solo se necesita un servidor que aloje a todas las páginas web que
conforman a la aplicación para que el usuario pueda realizar su trabajo.
- Acceso Universal. No es necesario tomar en cuenta la plataforma que tiene el usuario respecto al
sistema operativo que utilice, solo es necesario que exista en la maquina del usuario un
Navegador de Internet (Browser) que permita interpretar HTML.
- Existencia de muchas plataformas para el desarrollo. Las empresas que se han dedicado a
desarrollar software, por le general han logrado ofrecer una plataforma para el desarrollo de las
aplicación es web, entre algunas de estas se encuentran Microsoft con Fontpage y el Visual
Studio que utilizan ASP y ASP.NET. Otra de las empresas es IBM con su tecnología de WebSphear,
la cual nos permite desarrollar aplicaciones web con la tecnología JSP.

Las aplicaciones web deben lograr capturar la lógica del negocio que garantice su cambio de estado, para
esto los investigadores han presentado muchas sugerencias para el desarrollo de la interfaz y de su
estructura interna para hacerlas más útiles y eficaces, una de las recomendaciones es que se debe tomar
más importancia a la lógica del negocio que a los aspecto de presentación, en otras palabras, debe ser
prioritaria la funcionalidad de la aplicación web y que el diseño de la interfaz no sea complejo. Por este
motivo, la lógica y la interfaz deben llevarse por separado.

Una página web puede contener script que se ejecutan en el servidor y/o script que se ejecutan en el
cliente, dentro de la modelación se debe diferenciar cada uno de estos.

Para modelar las aplicaciones web se deben tomar en cuenta las siguientes características de las páginas:

- Los enlaces de unas a otras
- Todo el contenido dinámico asociado a cada solicitud hacia el servidor.
- Todo el contenido dinámico asociado a las páginas del cliente.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

280

Ingeniería de Sistemas Informáticos

Entre la modelación orientada a objetos y el desarrollo de la aplicación es Web se toman las siguientes
equivalencias:

- Cada Página será representada por medio de una Clase.
- Los link entre páginas serán representados por medio de asociaciones entre clases.
- Los script de las páginas serán representados por medio de las responsabilidades de las clases

(métodos).
- Las variables en el script serán los atributos de las clases.

Estas cuatro equivalencias servirán para interpretar y abstraer la aplicación hacia el paradigma orientado
a objetos. Se debe señalar que las nuevas plataformas de desarrollo han separado en gran medida estas
equivalencias, esta separación se pondrá en práctica de forma física en el capítulo de implementación.
Dentro de la modelación del negocio se han creado estereotipos que permitan representar y desarrollar
una aplicación web, entre estos tenemos los siguientes:

Client Page (Pagina Cliente). Una instancia de una página cliente es una página Web
con formato HTML y es una mezcla de datos, presentación e incluso lógica. Las páginas clientes
son representadas por los navegadores clientes y pueden contener scripts que son interpretados
por el navegador. Las páginas cliente pueden tener asociaciones con otras páginas cliente o
servidor. Representará a una página Web como .ASPX, .JSP, .ASP, .PHP

HTML Form (Formulario HTML). Una clase estereotipada como «HTML form» es
una colección de campos de entrada que forman parte de una página cliente. Una clase form se
mapea directamente con la etiqueta HTML form. Los atributos de esta clase representan los
campos de entrada del formulario HTML (input boxes, text areas, radio buttons, check boxes, y
campos hidden). Un «HTML form» no tiene operaciones, por lo que no pueden ser encapsuladas
en un formulario. Cualquier operación que interactúe con el formulario es una propiedad de la
página que contiene al formulario.

Server Page (Página Servidora). Una página de servidora representa una página web
que tiene scripts que son ejecutados por el servidor. Estos scritps interactúan con recursoss del
servidor como bases de datos, lógica de negocio y sistemas externos. Las operaciones del objeto

NewClass

(from WebForm)

NewClass

(from WebForm)

NewClass

(from WebForm)

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

281

Ingeniería de Sistemas Informáticos

representan las funciones en el script, y sus atributos representan las variables que son visibles
en el ámbito de la página (accesibles por todas las funciones de la página).

Entre estos estereotipos existirán tipos de asociaciones que se describen a continuación:

- link. Un link (enlace) es un puntero desde una página cliente a otra «Page». En un diagrama de
clases, un link es una asociación entre una «client page» y cualquier otra «client page» o una
«server page». Una asociación Link se mapea directamente con la etiqueta HTML ancla.
- built. La relación «builds» es un tipo especial de relación que une el vacío entre las páginas cliente
y de servidor. Las páginas de servidor existen únicamente en el servidor. Son usadas para crear
páginas cliente. La asociación «builds» identifica que página de servidor es responsable de la
creación de una página cliente. Ésta es una relación direccional, pues la página cliente no tiene
conocimiento de cómo ha sido creada. Una página de servidor puede crear múltiples páginas
cliente, pero una página cliente tan solo puede ser construida por una página de servidor.
- submit. Una asociación “submit” es siempre entre un “form” (formulario) y una “server-page”
(página servidor). Los formularios envían los valores de sus campos al servidor a través de páginas
servidor para procesarlos. El servidor web procesa la página servidor, la cual acepta y usa la
información dentro del formulario enviado.
- redirect. Una relación «redirect» es una asociación unidireccional con otra página web. Puede ser
dirigida desde y hasta una página cliente o de servidor. Si la relación se origina desde una «server
page» entonces indica que el procesado de la página solicitada debe continuar en la otra página.
Esto indica que la página destino siempre participa en la creación de la página cliente. Esta
relación no es completamente estructural, pues la invocación de una operación de redirección se
debe hacer a través de programación en el código de la página origen. Si la relación se origina
desde una «client page» entonces esto indica que la página destino será automáticamente
solicitada por el navegador, sin la participación activa del usuario. Se puede especificar un tiempo
de demora (en segundos) antes de que la segunda página sea solicitada. El uso de la redirección
se corresponde con la etiqueta META y HTTP-EQUIV el valor de "Refresh".
- include. Indica que la página en el servidor incluye un objeto al construir la página en el cliente.
- Object. Representa a una asociación de composición entre una página en el cliente a una clase
lógica que representa un componente embebido, que puede ser un ActiveX, un Applet u otro
componente.

Con los conceptos anteriormente descritos se puede desarrollar el diagrama de navegación. Para este
propósito utilizaremos el Rational Rose.

El Diagrama de Mapa de Navegación representa una idea general de la navegación entre páginas de la
aplicación web. Este Mapa de Navegación se debe crear por subsistema o bien, si es que es pequeña la
aplicación, un solo Mapa de Navegación. Este mapa es de gran ayuda para identificar con mucha rapidez
la ubicación de las opciones dentro del sistema y de las características de cada subsistema.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

282

Ingeniería de Sistemas Informáticos

El primer Mapa de Navegación que se desarrolla para ejemplificar es el de Seguridad. Para esto se debe
realizar un clic derecho sobre la carpeta que representa al subsistema de Seguridad, de inmediato
aparecerá una ventana con varias opciones de las cuales se debe seleccionar New y Class Diagram, como
se puede ver en la Pantalla 1, lo cual permitirá crear un diagrama de clases que servirá para alojar al
Mapa de Navegación.

Pantalla 1. Crear el Mapa de Navegación

Una vez hecha esta operación se debe crear clases que formaran parte del Mapa de Navegación. No se
debe olvidar que se ha determinado una arquitectura, la cual se debe obedecer para el entendimiento
del desarrollo. Las clases que se crearan deben estar en la carpeta de User Services, ya que corresponden
a la capa de presentación. Adicionalmente, las clases deben llevar el estereotipo de Client Page, descrito
anteriormente.
Para crear una clase se debe realizar un clic en la carpeta que representa a la capa de presentación que
es User Services, luego, un clic derecho en la carpeta de WebForm, inmediatamente se visualizará una
ventana con opciones de las cuales se debe seleccionar New y Class, esta opción creará una clase, el

nombre de esta será PInicio, donde la letra “P” significará “Página” e “Inicio” el nombre de la Clase,

como se puede ver en la Pantalla 2.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

283

Ingeniería de Sistemas Informáticos

Pantalla 2. Crear una clase que representa a un WebForm

Una vez creada la clase se debe cambiar el estereotipo a Client Page, para esto se debe realizar clic
derecho y seleccionar Open Standard Specification, como se puede ver en la Pantalla 3.

Pantalla 3. Especificaciones de la Clase

Al realizar clic se visualizará una ventana con varias opciones, de las cuales se debe seleccionar la opción
General, luego se debe escribir o seleccionar el nombre del estereotipo que es Client Page como se pude
ver en la Pantalla 4. Una vez hecha esta actividad se debe realizar un clic en el botón OK para completar
con la definición de tipo de clase para la aplicación.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

284

Ingeniería de Sistemas Informáticos

Pantalla 4. Definiendo el estereotipo de Página Cliente

Esta creación de clases está en función de los diagramas de colaboración que se ha desarrollado en la
parte de análisis, si no se ha realizado los diagramas de colaboración del análisis se aconseja realizar
primero los diagramas de secuencia por cada realización de diseño, para tener una idea general de las
páginas (Clases Client Page) básicas para la aplicación.

Esta primera clase, que se ha creado, es la página inicio de la aplicación de ejemplo, ahora crearemos un
mapa de navegación sencillo para el subsistema de Seguridad, las clases Client Page serán las siguientes:
- PAutenticar. Página Web que permitirá autenticar al usuario.
- PCambiarContrasena. Página Web que permitirá cambiar contraseña de los usuarios.

El resultado de esta actividad se puede ver en la Pantalla 5.

Pantalla 5. Creación de las Client Page de Subsistema Seguridad

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

285

Ingeniería de Sistemas Informáticos

Luego de crear a las clases se debe crear un diagrama de clases dentro del subsistema de Seguridad. Para
realizar esta actividad se debe realizar un clic derecho en la carpeta que representa a al subsistema de
Seguridad como se pude ver en la Pantalla 6.

Pantalla 6. Crear un diagrama de Clases para el Mapa de Navegación de Seguridad

El nombre del nuevo diagrama de clases será Mapa de Navegación de Seguridad. Una vez introducido el
nombre se debe realizar doble clic a este para poder acceder a la plantilla que permitirá describir la
asociación entre las clase anteriormente descritas. Para realizar esta actividad, una vez visualizada la
plantilla se debe arrastrar cada una de las clases Client Page, el resultado se puede ver en la Pantalla 7.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

286

Ingeniería de Sistemas Informáticos

Pantalla 7. Creación del Mapa de Navegación de Seguridad sin Asociaciones

Para terminar con mapa de navegación se debe determinar las asociaciones entre cada una de estas.
Para esto realizar se debe utilizar el botón de Uniderectional Association , el cual permitirá definir la
asociación.

Para el ejemplo tendremos las siguientes asociaciones entre las clases:
- PInicio con PAutenticar. Asociación de tipo Link.
- PAutenticar con PCambiarContrasena. Asociación e tipo Link

El resultado de esta definición determinar el tipo de Asociación se puede ver en la Pantalla 8.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

287

Ingeniería de Sistemas Informáticos

Pantalla 8. Mapa de Navegación de Seguridad sin el tipo de asociación.

Para determinar el tipo de asociación, que debe ser Link, se debe realizar un clic derecho sobre la flecha
que determina la asociación, inmediatamente se visualizará una ventana con varias opciones como se
puede ver en la Pantalla 9.

Pantalla 9. Opciones para determinar el tipo de relación en un mapa de navegación

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

288

Ingeniería de Sistemas Informáticos

Se debe seleccionar la opción de Open Standard Specification, la cual permitirá visualizar una ventana la
cual se puede ver en la Pantalla 10. Dentro de esta ventana se de seleccionar en el campo de Stereotype
el Link.

Pantalla 10. Selección del tipo de Relación para la asociación dentro del mapa de navegación

Para finalizar con la determinación del tipo de asociación entre clases Client Page se debe realizar un clic
en el botón OK.

De la misma formase debe determinar el tipo de relación para la asociación entre PAutenticar y
PCambiarContrasena. El resultado de esta actividad se puede ver en la Pantalla 11.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

289

Ingeniería de Sistemas Informáticos

Pantalla 11. Mapa de Navegación de Seguridad

El diagrama describe que existirá un enlace para ir desde PIncio a PAutenticar, esa última permitirá
autenticar y determinar las autorizaciones que tiene el usuario respecto a su cuenta y contraseña. Una
vez autenticado tendrá la autorización para cambiar su contraseña para esto podrá acceder a una nueva
interfaz con el nombre de PCambiarContrasena.

De esta misma forma se puede realizar para los demás subsistemas, no se debe olvidar que está en
función de los diagramas de colaboración que se han desarrollado en la fase análisis, si no se ha realizado
estará en función de los diagramas de secuencia de diseño por cada realización de diseño.
Ahora se muestra una propuesta de navegación para los otros subsistemas.

Todas las clases deben ser creadas en la carpeta de WebForm dentro de la capa de User Services. La
Pantalla 12, muestra el mapa de navegación para el subsistema de Administración.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

290

Ingeniería de Sistemas Informáticos

Pantalla 12. Mapa de Navegación de Administración

La Pantalla 13, muestra el mapa de navegación para el subsistema de Cocina.

Pantalla 13. Mapa de Navegación de Cocina

La Pantalla 14, muestra el mapa de navegación para el subsistema de Hospedaje.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

291

Ingeniería de Sistemas Informáticos

Pantalla 14. Mapa de Navegación de Hospedaje

Para finalizar con el ejemplo se realiza un mapa de navegación de forma general que se puede ver en la
Pantalla 15. Este mapa no es necesario para aplicaciones relativamente grandes ya que será su
visualización muy compleja.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

292

Ingeniería de Sistemas Informáticos

Pantalla 15. Mapa de Navegación General de la Aplicación.

De esta forma se ha terminado de desarrollar el Mapa de Navegación. Mencionar que es muy
importante desarrollar antes el diagrama de colaboración o el diagrama de secuencia para determinar
las clases Client Page. Estas clases servirán para iniciar el Diagrama de Clases Web, como se podrá
estudiar en el próximo documento.

Universidad Privada del Valle – Bolivia
Unidad Académica Sucre

293

Ingeniería de Sistemas Informáticos

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->