modelo de diseÑo enmodelo de diseÑo en...

UNIVERSIDAD DE COLIMAUNIVERSIDAD DE COLIMAUNIVERSIDAD DE COLIMAUNIVERSIDAD DE COLIMA ____________________________●●●●●●●●____________________________

MODELO DE DISEÑO ENMODELO DE DISEÑO ENMODELO DE DISEÑO ENMODELO DE DISEÑO EN

UMLUMLUMLUML E IMPLANTACIÓN DEL SISTEMA DEE IMPLANTACIÓN DEL SISTEMA DEE IMPLANTACIÓN DEL SISTEMA DEE IMPLANTACIÓN DEL SISTEMA DE

GESTIÓN DEGESTIÓN DEGESTIÓN DEGESTIÓN DE DETALLADO TELEFÓNICODETALLADO TELEFÓNICODETALLADO TELEFÓNICODETALLADO TELEFÓNICO PARA LAS DEPENDENCIASPARA LAS DEPENDENCIASPARA LAS DEPENDENCIASPARA LAS DEPENDENCIAS

DE LA UNIVERSIDAD DE COLIMADE LA UNIVERSIDAD DE COLIMADE LA UNIVERSIDAD DE COLIMADE LA UNIVERSIDAD DE COLIMA

Tesis que para obtener el grado de Maestro en Ciencias área computación

Presenta Aníbal Sayid Valdivia Cerda

Asesor

MC. Víctor Hugo Castillo Topete ____________________________●●●●●●●●____________________________

Coquimatlán, Colima., agosto de 2003

Magnolia A Castrejon Delgado


EXPEDIENTE: 607 No. CTA.: 93-5049

C. VALDIVIA CERDA ANIBAL SAYID DOMICILIO: ANDADOR 7 NO. 13 LOCALIDAD: COLIMA, COL

Informo a Usted, que ha sido aprobado como tema de titulación para obtener el grado de MAESTRO EN CIENCIAS AFEA: COMPUTACIÓN.

El solicitado por Usted bajo el título:

"MODELO DE DISEÑO EN UML E IMPLANTACIÓN DEL SISTEMA DE GESTIÓN DE DETALLADO TELEFÓNICO PARA LA DEPENDENCIAS DE LA UNIVERSIDAD DE COLIMA"

Desarrollado bajo los siguientes puntos:

CAPITULO I EL LENGUAJE UNIFICADO DE MODELADO (UML) COMO HERRAMIENTA DE MODELADO VISUAL

CAPITULO II EL MODELO DE DOMINIO CAPITULO III EL MODELO DE CASOS DE USO CAPITULO IV DEFINICIÓN DE LA LÍNEA BASE DE LA ARQUITECTURA CAPITULO V EL MODELO DE DISEÑO CAPITULO VI EL MODELO DE IMPLEMENTACIÓN

CONCLUSIONES BIBLIOGRAFÍA

Al mismo tiempo informo a usted que ha sido designado como asesor de titulación al suscrito M.C.

VICTOR HUGO CASTILLO TOPETE. Km 9 Carretera Colima-Coquimatlán, Colima, Colima, México, C.P 28400 Tel. 01 (312) 316 1165, Ext. 51451, Ext. Fax 51454




Exp. No.: 607 Fecha: 17 de septiembre 2003 Acta No.:________________

C. VALDIVIA CERDA ANIBAL SAYID Domicilio: ANDADOR 7 NO. 13 Localidad: COLIMA, COL Teléfono: 01-312-3076232

En cumplimiento al artículo: 13 y 14 del reglamento de titulación, al artículo 40, Inciso A del reglamento de estudios de Posgrado vigente y al artículo: 46 de las normas complementarias al reglamento de Posgrado, correspondientes al Posgrado de la Facultad de Ingeniería Mecánica y Eléctrica. Informamos a usted que ha sido autorizado por este Consejo Técnico del Posgrado su tema de Tesis para obtener el grado de Maestro en Ciencias Arca: Computación titulado: "MODELO DE DISEÑO EN UML E IMPLANTACIÓN DEL SISTEMA DE GESTIÓN DE DESTALLADO TELEFÓNICO PARA LA DEPENDENCIAS DE LA UNIVERSIDAD DE COLIMA" para ser desarrollado bajo los siguientes puntos:

CAPITULO 1 EL LENGUAJE UNIFICADO DE MODELADO (UML) COMO HERRAMIENTA DE MODELADO VISUAL

CAPITULO II EL MODELADO DE DOMINIO CAPITULO III EL MODELO DE CASOS DE USO CAPITULO IV DEFINICIÓN DE LA LÍNEA BASE DE LA ARQUITECTURA CAPITULO V EL MODELO DE DISEÑO CAPITULO VI EL MODELO DE IMPLEMENTACIÓN

CONCLUSIONES BIBLIOGRAFÍA

Así mismo hacemos de su conocimiento que de acuerdo con la línea de investigación en la

cual se enmarca su proyecto ha sido autorizado como asesor de tesis al C. M.C. VICTOR HUGO CASTILLO TOPETE

A partir de la fecha de aprobación tendrá como plazo un año para presentar su examen de grado, en caso contrario tendrá usted derecho a una prórroga única de seis meses so pena de perder el registro de su proyecto.

Una vez concluidos los trámites de revisión de su documento de tesis e integrado su expediente de titulación deberá recoger el oficio que acompañará el visto bueno de su asesor de tesis, los cuales encabezarán cada uno de los ejemplares de su tesis.


H. CONSEJO ACADÉMICO DEL POSGRADO, FACULTAD DE INGENIERÍA MECÁNICA Y ELÉCTRICA, UNIVERSIDAD DE COLIMA P R E S E N T E

Por este medio notifico que el C. Aníbal Sayid Valdivia Cerda, alumno de la Maestría en Ciencias, Área Computación de esta Facultad, ha concluido el 100% de su trabajo de tesis titulado "Modelo de diseño en UML e implantación del Sistema de Gestión de Detallado Telefónico para las Dependencias de la Universidad de Colima", mismo que he asesorado desde el mes de febrero del presente año.

Sin otro particular, extiendo cordial saludo.



DEDICATORIA

Quiero dedicar esta tesis

A dios, por los tropiezos que me han hecho aprender y por la alegría de seguir aprendiendo.

A mi esposa y amiga, Laura, quien me acompaña en momentos difíciles y gratos, que me hacen disfrutar lo que tengo.

A mi hija, Laura Merarí, porque cuando estoy cansado o busco un aliciente, ahí está su sonrisa y cariño para confortarme.

A mis papás, por darme la vida, también mi padre por ser una persona de la que aprendí y me hizo ver que luchar es lo mejor que podemos hacer y mi mamá, por darme la vida y que supo dar lo mejor de sí para sus hijos, permaneciendo de pie en momentos invaluables.

A mis hermanos, porque sabemos que aunque los tiempos, las personas y las cosas cambian, no ignoramos que existen puntos de equilibrio entre nosotros como los son el cariño y el respeto.

AGRADECIMIENTOS

A todas las personas que aún sin conocerlas mucho han influido en mis decisiones acertadas.

A mi asesor de tesis, que me apoyó en este proyecto. Al personal administrativo de la F.I.M.E.

Índice

Capítulo 1 El lenguaje Unificado de Modelado (UML) como herramienta de modelado visual ………………………………………………………………… 1

1.1 Reseña Histórica …………………………………………………….. 1 1.2 Principios de modelado orientado a objetos ………………………… 3 1.3 Vocabulario de UML ………………………………………………... 6 1.4 Diagramas en UML ………………………………………………..... 12

Capítulo 2 El modelo de dominio ………………………………………………. 25

2.1 Diagramas de clases …………………………………………………. 27 2.2 Diagramas de actividades …………………………………………… 31

Capítulo 3 El modelo de casos de uso ………………………………………….. 35

3.1 Diagramas de casos de uso ………………………………………….. 35 Capítulo 4 Definición de la línea base de la arquitectura ………………………. 41

4.1 Diagrama de bloques representativo de acceso al sistema .…………. 41 4.2 Diagramas de despliegue ……………………………………………. 42

Capítulo 5 El modelo de diseño ………………………………………………… 45

5.1 Diagramas de clases activas …………………………………………. 45 Capítulo 6 El modelo de implementación ………………………………………. 49

6.1 Pantallas de presentación y código fuente del sistema ……………… 49 6.2 Diagramas de componentes …………………………………………112

Conclusiones ………………………………………………………..113

Bibliografía ………………………………………………………….116

I

TABLA DE CUADROS Y FIGURAS

Figura Título Página1 Diagrama de clase ejemplo 7 2 Representación de una interfaz 7 3 Representación de una colaboración 7 4 Representación de un caso de uso 8 5 Representación de una clase activa 8 6 Representación de un componente 8 7 Representación dé un nodo 8 8 Envío de mensajes 9 9 Representación de una máquina de estados 9

10 Ejemplo de un paquete de agrupación 9 11 Un elemento de anotación 10 12 Representación de relación de dependencia 10 13 Ejemplo de asociación 10 14 Representación de la generalización 10 15 Representación de una realización 11 16 Ejemplo de un diagrama de clase 12 17 Ejemplo de diagramas de objetos 13 18 Ejemplo de diagrama de caso de uso 14 19 Ejemplo de diagramas de secuencias 16 20 Ejemplo de diagramas de colaboración 17 21 Representación de un estado 18 22 División del icono de estado en 3 partes 18 23 Ejemplo de diagrama de estado 19 24 Ejemplo de diagramas de actividades 21 25 Ejemplo de diagramas de componentes 22 26 Ejemplo de diagramas de despliegue 23 27 Diagrama de clase para acceder a cuenta de usuario 27 28 Diagrama de clase para cobro del mes deseado 28 29 Diagrama de clase para detalles de llamada 29 30 Diagrama de clase para cambiar password 30 31 Diagrama de actividades para acceder al sistema 31 32 Diagrama de actividades para mostrar cobros y detallados telefónicos 32 33 Diagrama de actividades para cambiar password 33 34 Diagrama Caso de Usos General del Sistema 35 35 Diagrama Caso de Uso Cambiar password usuario 36 36 Diagrama Caso de Uso Consultar ultimo cobro 37 37 Diagrama Caso de Uso Consultar penúltimo cobro 38 38 Diagrama Caso de Uso Consultar antepenúltimo cobro 39 39 Diagrama de bloques representativo de acceso al sistema 41 40 Diagrama de despliegue para ingresar al sistema y mostrar cobros 42 41 Diagrama de despliegue para mostrar detallado telefónico 43 42 Diagrama de despliegue para cambiar password 44

II

43 Diagrama de clase para acceder a cuenta de usuario 45 44 Diagrama de clase para cobro del mes deseado 46 45 Diagrama de clase para detalles de llamada 47 46 Diagrama de clase para cambiar password 48 47 Diagrama de componentes del sistema 112

III

RESUMEN

El lenguaje UML es usado en la actualidad para modelar sistemas orientados a

objetos, el desarrollo de diagramas proporciona diferentes vistas que muestran desde el

comportamiento del sistema con el equipo periférico hasta el comportamiento con los

usuarios en tiempo de interacción.

El proyecto de tesis "Modelo de Diseño en UML e implantación del sistema de

gestión de detallado telefónico para las dependencias de la Universidad de Colima", explica

las bases de UML en el desarrollo de sistemas y a la vez ejemplifica su uso en un sistema

cliente - servidor con información de llamadas y costos telefónicos de las dependencias de

la Universidad de Colima que será implantado para consultas de cobros por internet. Los

diagramas que se utilizan son: Diagramas de clases, de actividades, de casos de uso, de

despliegue, de clases activas y de componentes.

La implementación del sistema está basado en el lenguaje ASP (Páginas de servidor

activas), y accede a bases de datos en Access 2002, los usuarios podrán ingresar a la

información correspondiente con una cuenta y clave válidas, desde cualquier explorador de

internet.

IV

ABSTRACT

Nowadays, UML is used to model OO systems, the development of diagrams

provides different views that show everything from the behavior of the system with the

peripheral equipment to the behavior with the users, during interaction.

The thesis project "Design in UML and implement of the management system of

phone calls for the subsidiaries of the University of Colima", explains the basis of UML in

the development of systems and simultaneously it exemplifies its use in a client-server

system with information of calls and telephone costs of the subsidiaries of the University of

Colima, it will be implemented for consult of telephone costs by Internet. The diagrams

used are: classes, activities, use cases, deployment, active classes and component diagrams.

The implementation of the system is based on ASP language(Active Server Pages),

and reaches data bases in Access 2002, the users will be able to access to the corresponding

information with a valid login and password from any Web explorer.

V

INTRODUCCIÓN

A medida que los sistemas computacionales avanzan, sus mecanismos se transforman en una gama diversa de posibilidades, así como con mayor medida, el acercamiento a la satisfacción de las necesidades planteadas a partir de una situación real. Este cambio, origina el surgimiento de herramientas que evolucionan constantemente y sirven como base para mejorar las estrategias en la búsqueda de soluciones; tal es el caso, de los sistemas desarrollados con lenguajes orientados a objetos, quienes día a día se enfrentan a situaciones más complejas y quienes se empezaron a sobrellevar con enfoques alternativos al análisis y al diseño.

El modelado es una parte importante en lo referente a cualquier actividad que conduce a la producción de buen software (Sistema). Construimos modelos para plasmar la estructura deseada y, posteriormente, nuestro sistema. Construimos modelos para visualizar y controlar la arquitectura del sistema. Construimos modelos para comprender mejor el sistema que estamos construyendo, muchas veces descubriendo oportunidades para la simplificación y la reutilización. Construimos modelos para controlar el riesgo. Así, como cuando un arquitecto, antes de construir una casa, requiere una planificación bien detallada, bocetos del aspecto que se quiere que tenga la casa, dibujar planos de forma que se pueda pensar en el uso pretendido de las habitaciones y los detalles prácticos de la electricidad, calefacción y fontanería, estipulando la cantidad de materiales y tiempo que se llevará en la construcción de tal casa, y todo esto, antes de golpear el primer clavo o echar los cimientos. Los modelos pueden involucrar planos detallados, así como planos más generales que ofrecen una visión global del sistema en consideración. Un buen modelo incluye aquellos elementos que tienen una gran influencia y omite aquellos elementos menores que no son relevantes para el nivel de abstracción dado.

UML (Unified Modeling Language) es un lenguaje gráfico de propósito general para visualizar, especificar, construir y documentar los artefactos de aplicaciones, que permite la total abstracción de los sistemas utilizando la implementación final. Fue creado para modelar y documentar aplicaciones orientadas a objetos, UML se ha transformado en una herramienta poderosa a la hora de analizar cualquier sistema en el que seamos capaces de identificar los componentes. Según definición de los creadores modelo es "una simplificación de la realidad" que proporciona los planos de un sistema. Así pues, los diagramas UML además de una forma de documentar un proyecto, son sobre todo, una herramienta que nos ayuda en el proceso de abstracción y definición de las funcionalidades del sistema.

Por ello, a partir de aclarar el uso de UML y conocer las bases de construcción de diagramas con este lenguaje, se diseñarán con el sustento de esta base los diagramas del sistema de gestión de detallados telefónicos de la Universidad de Colima, para tener una perspectiva completa de la interacción de los distintos procesos de obtención de información de adeudo telefónico mensual de la Universidad, a su vez, se implementarán estos modelos en la creación del sistema bajo el lenguaje ASP(Active Server Pages), creado para ejecutar aplicaciones dinámicas e interactivas de servidor Web, así, permitiendo por medio de una cuenta y una clave de acceso acceder al sistema a través de cualquier explorador de web y ver el consumo de los últimos tres meses de facturación por cada dependencia universitaria, obteniendo también, un beneficio económico para la Universidad de Colima, ya que este tipo de software tiene un costo muy elevado (Sobre de 70,000) en el mercado de software.

1

Capítulo 1. El lenguaje Unificado de Modelado (UML) como herramienta de modelado visual. 1.1 Reseña histórica

En algún momento desde la mitad de los setentas y finales de los ochenta, surgieron muchos métodos enfocados al diseño para modelar algunas aplicaciones y sistemas de programación orientados a objetos, el número de métodos orientados a objetos se incrementó de menos de 10 a mis de 50 durante el período entre 1989 y 1994; muchos usuarios de los distintos métodos tenían problemas al intentar encontrar un lenguaje de modelado que cubriera sus necesidades completamente, alimentando de esta forma la llamada guerra de métodos. Con estas experiencias, comenzaron a aparecer nuevas generaciones de métodos, siendo destacados de manera muy clara unos pocos, entre los importantes se cuentan Fusion, Shlaer-Mellor y Coad-Yourdon, y en especial, los siguientes: El método de Booch, el método OOSE (Object - Oriented Software Engineering, Ingeniería del Software Orientada a Objetos) de Jacobson y el método OMT (Object Modeling Technique, Técnica de Modelado de Objetos) de Rumbaugh. Una masa crítica de ideas comenzó a formarse en la primera mitad de los noventa, cuando Grady Booch (Rational Software Corporation), Ivar Jacobson (Objectory) y James Rumbaugh (General Electric) empezaron a adoptar ideas de cada uno de los otros dos métodos, los cuales habían sido reconocidos en conjunto como los tres principales métodos orientados a objetos a nivel mundial, debido a esto, los creadores de los 3 métodos se sintieron motivados para crear un lenguaje unificado de modelado a partir de sus propios métodos. Es así como surge UML - por sus siglas en inglés Unified Modeling Language -, Lenguaje Unificado de Modelado.

UML, trascendió en las versiones 0.8, 0.9, hasta lograr la versión 1.0 gracias al esfuerzo de varias organizaciones que contribuyeron a su definición, tales organizaciones fueron Digital Equipment Corporation, Hewlett-Packard, I-Logix, Intellicorp, IBM, ICON Computing, MCI systemhouse, Microsoft, Oracle, Rational, Texas Instruments y Unisys. Esta colaboración produjo UML 1.0, un lenguaje de modelado bien definido, expresivo, potente y aplicable a un amplio espectro de dominios de problemas. UML 1.0 se ofreció para su estandarización en enero de 1997, y en respuesta a la solicitud de propuestas de Object Management Group (OMG) para un lenguaje estándar de modelado.

Posteriormente, el grupo de trabajo inicial se amplió, incluyendo a más organizaciones tales como Andersen Consulting, Ericsson, ObjectTime Limited, Platinum Technology, Ptech, Reich Technologies, Softeam, Sterling Software y Taskon, además, se incluyó un grupo de trabajo para la semántica, liderado por Cris Kobryn de MCI Systemhouse y coordinado por Ed Eykholt de Rational, para formalizar la especificación de UML y para integrar UML con otros esfuerzos de estandarización. Así, una versión revisada de UML (Versión 1.1) se ofreció al OMG para su estandarización en julio de 1997, y en septiembre de ese año, esta versión fue aceptada por la OMG Análisis and Design Task Force (ADTK) y el OMG Architecture Board y se sometió al voto de todos los miembros del OMG. UML 1.1 fue adoptado por el OMG el 14 de noviembre de 1997 convirtiéndolo en una notación estandarizada para el análisis y diseño orientado a objetos.

2

El control de mantenimiento de UML fue asumido pro la OMG Revisión Task Force, dirigida por Cris Kobryn. La Revisión Task Force (RTF) publicó una versión editorial, UML 1.2 en junio de 1998 en otoño de 1998, la RTF publicó UML 1.3.

3

1.2 Principios de modelado orientado a objetos

El uso del modelado sugiere 4 principios básicos de modelado: Primero, que modelo se va a utilizar, ya que este tiene una profunda influencia sobre cómo se acomete un problema y cómo se da forma a una solución; así que, es importante elegir el modelo de software adecuado. Un modelo adecuado puede arrojar mucha luz sobre los problemas de desarrollo más horribles, ofreciendo una comprensión que simplemente no podríamos obtener de otra manera; los modelos erróneos desorientarán, haciendo que uno se centre en cuestiones irrelevantes.

En el software, los modelos elegidos pueden afectar mucho a nuestra visión del mundo. Si construimos un sistema con la mirada de un desarrollador de bases de datos, probablemente nos centraremos en los modelos entidad-relación que trasladan el comportamiento a disparadores (triggers) y procedimientos almacenados. Si construimos un sistema con la mirada de un analista estructurado, probablemente se obtendrán modelos centrados en los algoritmos, con los datos fluyendo de proceso en proceso. Si construimos un sistema con la mirada de un desarrollador orientado a objetos, se obtendrá un sistema cuya arquitectura se centra en un mar de clases y patrones de interacción que gobiernan cómo trabajan juntas estas clases. Cualquiera de estos enfoques podría estar bien para una aplicación y una cultura de desarrollo dadas, aunque la experiencia sugiere que la visión orientada a objetos es superior al proporcionar arquitecturas flexibles, incluso para sistemas que podrían tener una gran base de datos o una gran componente computacional. No obstante, la cuestión es que cada visión del mundo conduce a un tipo de sistema diferente, con diferentes costes y beneficios.

Así también, el segundo principio básico de modelado establece que, todo modelo puede ser expresado a diferentes niveles de precisión, como en la construcción de un rascacielos, a veces es conveniente dar una vista general para que los inversionistas se den cuenta de la magnitud de la construcción e imaginen su aspecto externo, pero en otras ocasiones, es conveniente descender a niveles más bajos, como cuando hay un recorrido de tuberías enmarañado o un elemento estructural poco usual. En los modelos de software, a veces, un pequeño y sencillo modelo ejecutable de la interfaz del usuario es exactamente lo que se necesita; otras veces, hay que bajar y enredarse con los bits, como cuando se están especificando interfaces entre sistemas o luchando con cuellos de botella en redes. En cualquier caso, los mejores tipos de modelos son aquellos que permiten elegir el grado de detalle, dependiendo de quién está viendo el sistema y porqué necesita verlo. Un analista o un usuario final se centrará en el qué; un desarrollador se centrará en el cómo. Tanto unos como otros querrán visualizar un sistema a diferentes niveles de detalle en momentos diferentes.

El tercer principio menciona que, Los mejores modelos están ligados a la realidad, es preferible tener modelos que tengan una clara conexión con la realidad, y donde esta conexión sea débil saber exactamente cómo se apartan esos modelos del mundo real. Todos los modelos simplifican la realidad; el truco está en asegurarse de que las simplificaciones no enmascaran ningún detalle importante.

4

En el software, el talón de Aquiles de las técnicas de análisis estructurado es el

hecho de que hay una desconexión básica entre el modelo de análisis y el modelo de diseño del sistema. No poder salvar este abismo hace que el sistema concebido y el sistema construido diverjan con el paso del tiempo. En los sistemas orientados a objetos, es posible conectar todas las vistas casi independientes de un sistema en un todo semántico.

El cuarto y último principio define que, Un único modelo no es suficiente. Cualquier sistema no trivial se aborda mejor a través de un pequeño conjunto de modelos casi independientes. La expresión clave aquí es "casi independientes". En este contexto significa tener modelos que podemos construir y estudiar separadamente, pero aún así están interrelacionados. Como en el caso de un edificio, podemos estudiar los planos eléctricos de forma aislada, pero también podemos ver su correspondencia con los planos de planta y quizás incluso su interacción con los recorridos de las tuberías en el plano de la fontanería.

Lo mismo es cierto que para los sistemas software orientados a objetos. Para comprender la arquitectura de tales sistemas, se necesitan varias vistas complementarias y entrelazadas: una vista de casos de uso (Que muestre los requisitos del sistema), una vista de diseño (Que capture el vocabulario del espacio problema y del espacio de la solución), una vista de procesos (Que modele la distribución de los procesos e hilos (threads) del sistema), una vista de implementación (Que se ocupe de la realización física del sistema) y una vista de despliegue (Que se centre en cuestiones de ingeniería del sistema). Cada una de estas vistas puede tener aspectos tanto estructurales como de comportamiento. En conjunto, estas vistas representan los planos del software.

Según la naturaleza del sistema, algunos modelos pueden ser más importantes que otros. Por ejemplo, en sistemas con grandes cantidades de datos, dominarán los modelos centrados en las vistas de diseño estáticas. En sistemas con uso intensivo de interfaces gráficas de usuario (GUI), las vistas de casos de uso estáticas y dinámicas son bastante importantes. En los sistemas de tiempo real muy exigentes, las vistas de procesos dinámicas tienden a ser más importantes. Finalmente, en los sistemas distribuidos, como los encontrados en aplicaciones de uso intensivo de la Web, los modelos de implementación y despliegue son los más importantes. Los ingenieros civiles construyen muchos tipos de modelos. Lo más frecuente es que usen modelos estructurales que les ayudan a visualizar y especificar partes de los sistemas y la forma en que esas partes se relacionan entre sí. Dependiendo de las cuestiones más importantes del sistema o de la ingeniería que les preocupen, los ingenieros podrían también construir modelos dinámicos. Por ejemplo, para ayudarles a estudiar el comportamiento de una estructura en presencia de un terremoto. Cada tipo de modelo se organiza de forma diferente, y cada uno tiene su propio enfoque.

En el software hay varias formas de enfocar un modelo. Las dos formas más comunes son la perspectiva orientada a objetos y la perspectiva algorítmica.

La visión tradicional del desarrollo de software toma una perspectiva algorítmica. En este enfoque, el bloque principal de construcción de todo el software es el procedimiento o función. Esta visión conduce a los desarrolladores a centrarse en cuestiones de control y de descomposición de algoritmos grandes en otros más pequeños.

5

No hay nada inherentemente malo en este punto de vista, salvo que tiende a producir sistemas frágiles. Cuando los requisitos cambian (¡Lo harán!) y el sistema crece (¡Lo hará!), los sistemas construidos con un enfoque algorítmico se vuelven muy difíciles de mantener.

La visión actual del desarrollo de software toma una perspectiva orientada a objetos. En este enfoque, el principal bloque de construcción de todos los sistemas es el objeto o clase. Para explicarlo sencillamente, un objeto es una cosa, generalmente extraída del vocabulario del espacio del problema o del espacio de la solución; una clase es una descripción de un conjunto de objetos similares. Todo objeto tiene identidad (Puede nombrarse o distinguirse de otra manera de otros objetos), estado (Generalmente hay algunos datos asociados a él), y comportamiento (Se le pueden hacer cosas al objeto, y él a su vez puede hacer cosas a otros objetos).

Actualmente, el enfoque orientado a objetos forma parte de la tendencia principal para el desarrollo de software, simplemente porque ha demostrado ser válido en la construcción de sistemas en toda clase de dominios de problemas, abarcando todo el abanico de tamaños y complejidades. Más aún, la mayoría de los lenguajes actuales, sistemas operativos y herramientas son orientados a objetos de alguna manera, lo que ofrece más motivos para ver el mundo en términos de objetos. El desarrollo orientado a objetos proporciona la base fundamental para ensamblar sistemas a partir de componentes utilizando tecnologías como Java Beans o COM+.

Varias cuestiones se derivan de la elección de ver el mundo de una forma orientada a objetos. ¿Cuál es la estructura de una buena arquitectura orientada a objetos?, ¿Qué artefactos debería crear el proyecto?, ¿Quién debería crearlos?, ¿Cómo deberían medirse?.

Visualizar, especificar, construir y documentar sistemas orientados a objetos es exactamente el propósito del Lenguaje Unificado de Modelado (Unified Modeling Language).

6

1.3 Vocabulario de UML



7

ELEMENTOS Elementos estructurales.-

Dentro de estos, se encuentran:

Una clase describe un conjunto de objetos con características y comportamientos idénticos, se representa con un rectángulo dividido en 3 secciones: parte superior el nombre, parte medio el atributo y parte inferior las acciones.

Puerta Largo Ancho Tipo Abrir Cerrar

Poner seguro

Figura 1: Diagrama de clase ejemplo

La interfaz se representa por medio de una línea terminada en un círculo junto con su nombre y suele estar conectada a la clase o componente que la realiza. Representa un conjunto de operaciones que especifican el comportamiento completo de una clase o sólo una parte de ese comportamiento.

Figura 2: Representación de una interfaz

La colaboración se representa como una elipse de borde discontinuo unida mediante flechas punteadas a los objetos o clases que participan realmente en un patrón de diseño; es una forma de representar interacción entre objetos, especificando un contrato entre ellos. Las flechas punteadas pueden tener roles, indicando cuál es el papel de cada elemento dentro del patrón.

Un caso de uso se representa por una elipse de borde continuo incluyendo su nombre, denota un requerimiento solucionado por el sistema. Cada caso de uso es una operación completa desarrollada por los actores y por el sistema en un diálogo. El conjunto de casos de uso representa la totalidad de operaciones desarrolladas por el sistema.






8

Figura 4: Representación de un caso de uso

Una clase activa se representa como una clase pero con líneas más gruesas e incluye su nombre, atributos y acciones. Es una clase cuyos objetos tienen uno o más procesos o hilos de ejecución, por lo tanto, dan origen a actividades de control.

Comunicación

Coartar Generar

Figura 5: Representación de una clase activa

Un componente se representa como un rectángulo con pestañas; muestra las dependencias lógicas entre componentes software, sean éstos componentes fuentes, binarios o ejecutables. Los componentes software tienen tipo, que indica si son útiles en tiempo de compilación, enlace o ejecución. Un componente representa el empaquetamiento físico de diferentes elementos lógicos, como clases, interfaces y colaboraciones.

Orderform.java

Figura 6: Representación de un componente

Un nodo que se representa como un cubo 3D; es un objeto físico en tiempo de ejecución que representa un recurso computacional, generalmente con memoria y capacidad de procesamiento. Pueden representarse instancias o tipos de nodos. Se representa como un cubo 3D en los diagramas de implementación.

Figura 7: Representación de un nodo 8







9

Elementos de comportamiento.- Estos son las partes dinámicas de los modelos UML. Así, una interacción es un

comportamiento que comprende un conjunto de mensajes intercambiados entre un conjunto de objetos en una aplicación a través del tiempo; como también muestra el uso de los mensajes de las clases diseñadas en el contexto de una operación; interacción involucra muchos elementos, mensajes, secuencias de acción (El comportamiento invocado por un mensaje) y enlaces (Conexiones entre objetos). Gráficamente, el envío de mensajes entre objetos se denota mediante una línea sólida dirigida, desde el objeto que emite el mensaje hacia el objeto que lo ejecuta, incluyendo casi siempre el nombre de su operación, como se muestra en la siguiente figura:

servir

Figura 8: Envío de mensajes

Una máquina de estados, muestra el conjunto de estados por los cuales pasa un objeto durante su vida en una aplicación, junto con los cambios que permiten pasar de un estado a otro. El comportamiento de una clase individual o una colaboración de clases puede especificarse con una máquina de estados. Una máquina de estados involucra estados, transiciones (El flujo de un estado a otro), eventos (Que disparan una transición) y actividades (La respuesta a una transición). Gráficamente Se representa mediante un rectángulo con los bordes redondeados, incluyendo normalmente su nombre y sus subestados, si los tiene.

Figura 9: Representación de una máquina de estados Elementos de agrupación.-

En algunas ocasiones existirá la necesidad de separar los elementos de un diagrama, como parte de un sistema integral, en grupos, para ello, se utiliza un paquete. Los elementos estructurales, los elementos de comportamiento y otros elementos de agrupación pueden incluirse en un paquete, pero no sucede lo mismo con los componentes (Que existen en tiempo de ejecución), así un paquete es puramente conceptual (Sólo existe en tiempo de desarrollo). Un paquete se representa como una carpeta, que incluye sólo su nombre, y, a veces su contenido.

Figura 10: Ejemplo de un paquete de agrupación 9

Mostrando Valor




10

Elementos de anotación. Cuando es necesario explicar el porqué de alguna parte del diagrama que no esté

muy clara, entonces se utilizan los elementos de anotación o notas, son comentarios que se pueden aplicar para describir, clarificar y hacer observaciones sobre cualquier elemento de un modelo. Este elemento de anotación se llama nota y esta, muestra restricciones y comentarios formales o informales junto a un elemento o una colección de elementos. Se representa como un rectángulo con la esquina doblada, junto con un comentario textual o gráfico.

Figura 11: Un elemento de anotación

Relaciones Dependencia.-

Es la relación que existe entre dos elementos, un elemento dependiente y otro independiente, de tal forma que, un cambio (El elemento independiente) puede afectar la semántica del otro elemento (El elemento dependiente). Y se representa de la siguiente manera:

---------------------> Figura 12: Representación de relación de dependencia

Asociaciones.-

Cuando existe una conexión conceptual entre objetos, se está hablando de una asociación que se representa con una línea continua que une a estos dos objetos, que a veces incluye una etiqueta, y a menudo incluye otros adornos, como la multiplicidad y los nombre de rol.

Automóvil Persona

Dueño

Generalización.-

La relación de generalización denota una relación de herencia entre clases. Se representa dibujando una línea continua con una punta de flecha sin rellenar en el lado de la superclase (El padre). La subclase (El hijo) hereda todos los atributos y mensajes descritos en la superclase (El padre). De esta forma, el hijo comparte la estructura y comportamiento del padre.

________________

Figura 14: Representación de la generalización 10



11

Realización.- La realización es una relación semántica entre clasificadores, en donde un

clasificador especifica un contrato que otro clasificador garantiza que cumplirá. Se pueden encontrar relaciones de realización en dos sitios: entre interfaces y las clases y componentes que las realizan, y entre los casos de uso y las colaboraciones que los realizan. Se representa como una mezcla entre una generalización y una relación; una línea discontinua con una punta de flecha en forma de triángulo sin rellenar que apunte a la interfaz.

-----------------

Figura 15: Representación de una realización 11

12

1.4 Diagramas en UML Diagramas de clases.-

Estos tipos de diagramas son de los más utilizados en el modelado de sistemas orientados a objetos. Para completar un diagrama de clase se requiere un conjunto de clases, interfaces y colaboraciones, así como sus relaciones. Estos modelan la vista de diseño estática de un sistema, su vocabulario, su colaboración o su esquema. Las relaciones pueden ser de dependencia, generalización y asociación. Al igual que lo demás diagramas, los diagramas de clases pueden contener paquetes, notas y restricciones.

Ejemplificando un diagrama de clases con el conjunto de objetos refrigerador, es de notar que cualquier cosa dentro de la clase refrigerador, consta de atributos tales como marca, modelo, número de serie, altura, ancho, entre las acciones de las cosas de esta clase se encuentra: abrir el refrigerador, meter cosas, sacar cosas, regular temperatura.

La siguiente figura muestra un diagrama de clase Refrigerador.

Refrigerador Marca modelo número de serie altura ancho Abrir refrigerador Meter cosas Sacar cosas Regular temperatura

Figura 16: Ejemplo de un diagrama de clase

Diagramas de objetos.-

Los diagramas de objetos muestran un conjunto de objetos y sus relaciones en un momento concreto. Cada objeto tiene una entidad discreta con límites bien definidos, mantiene un estado y una relación precisa con los demás, en un momento determinado. En UML, el diagrama de clases se utiliza para visualizar los aspectos estáticos de los bloques de construcción y los mensajes entre ellos en un sistema; un diagrama de objetos contiene un conjunto de instancias de los elementos encontrados en un diagrama de clases, expresando la parte estática de una interacción (Y a través de ella se representa el ciclo de vida de cada objeto), en cuanto a los objetos que colaboran, pero, sin ninguno de los mensajes enviados entre ellos. Cada objeto se representa por un rectángulo con tres compartimentos. En el primero va el nombre del objeto subrayado, en el segundo sus atributos y en el tercero sus operaciones (Aunque sus operaciones pueden ser omitidas según se requiera).

13

Diagramas de casos de uso.-

Este tipo de diagramas se utilizan para el modelado de aspectos dinámicos de un sistema, muestra las distintas operaciones que se esperan de una aplicación o sistema y cómo se relaciona con su entorno (usuarios u otras aplicaciones). Para representar un sistema con sus distintas variaciones y resultados se utiliza un conjunto de casos de uso, actores y sus relaciones.; a su vez, y al igual que otros diagramas pueden contener notas y restricciones, también, pueden ser agrupados por paquetes.

Para modelar un sistema con diagramas de casos de uso, se destacan los actores en torno al sistema, así, algo importante es definirlos, y de que forma interactúan para restringir la relación de actores que no se necesitan. Por ello:

Hay que identificar los actores en torno al sistema, cuáles requieren realizar solo tareas; cuáles requieren ejecutar funciones; que actores interactúan con el equipo periférico u otros sistemas software; qué actores tienen que ver con cuestiones administrativas y de mantenimiento del sistema. Hay que organizar a los actores similares en jerarquías de generalización/especialización.

Hay que proporcionar un estereotipo para cada uno de esos actores, si así se ayuda a entender el sistema.

Hay que especificar las vías de comunicación de los actores con los casos de uso del sistema.



14

Un actor se representa mediante un , una elipse denota un requerimiento solucionado por el sistema, cada caso de uso es una operación completa desarrollada por los actores y por el sistema en un diálogo. El conjunto de casos de uso representa la totalidad de operaciones desarrolladas por el sistema. Va acompañado de un nombre significativo.

Dentro de los bloques de construcción de diagramas en UML ya se vieron los diferentes tipos de relaciones que existen; para el diagrama de casos de uso, se pueden usar las relaciones de dependencia, generalización y asociación.

En el siguiente caso de cuenta bancaria, se tienen como casos de uso Realizar depósito, Retirar efectivo, Procesar factura, Gestión de información de cuenta, existen diferentes actores como Cliente individual y Cliente corporativo, Empresa, Entidad financiera.





15

Diagramas de secuencia y de colaboración.- Tanto los diagramas de secuencia como los diagramas de colaboración son un tipo

de diagramas de interacción, que se utilizan para modelar los aspectos dinámicos de los sistemas. La diferencia de los diagramas de secuencia y de colaboración radica en que los diagramas de secuencia muestran la organización temporal de los mensajes, pero no incluyen las relaciones entre objetos y los diagramas de colaboración muestran explícitamente las relaciones de los roles estructurales de los objetos que envían y reciben mensajes, también, no muestra el tiempo como una dimensión aparte, por lo que resulta necesario etiquetar con números de secuencia tanto la secuencia de mensajes como los hilos concurrentes. Los diagramas de interacción son importantes también para construir sistemas ejecutables por medio de ingeniería directa e inversa.

El diagrama de secuencia posee dos dimensiones: la vertical representa el tiempo, la horizontal representa los objetos que participan en la interacción; la progresión vertical es la línea de vida, que representa el rol durante cierto plazo de tiempo con la interacción completa, los rectángulos con nombre (Subrayado), que son los objetos, se ordenan de forma horizontal, los mensajes son representados como líneas continuas con una punta de flecha y se colocan entre líneas de vida. Estos diagramas se forman en primer lugar, colocando los objetos que participan en la interacción en la parte superior del diagrama, a lo largo de eje. Normalmente, se coloca a la izquierda el objeto que inicia la interacción, y los objetos subordinados a la derecha. A continuación, se colocan los mensajes que estos objetos envían y reciben a lo largo del eje Y, en orden de sucesión en el tiempo, desde arriba hasta abajo. La línea de vida de un objeto se pone como una línea discontinua vertical que representa la existencia de un objeto a lo largo de un período de tiempo, así con un rectángulo de encabezado, también pueden ir rectángulos a través de la línea de vida que denotan la ejecución de métodos; el rectángulo de encabezado contiene el nombre del objeto y el de su clase, en un formato nombreObjeto: nombreClase. Las líneas de vida de los objetos comienzan con la recepción del mensaje estereotipado como create. Los objetos pueden destruirse durante la interacción. Sus líneas de vida acaban con la recepción del mensaje estereotipado como destroy (Además se muestra la señal visual de una gran X que marca el final de sus vidas).

Para los diagramas de colaboración, vale la pena reafirmar a más detalle algunas características que los diferencian de los diagramas de secuencia.

Una de ellas es el camino. Para indicar cómo se enlaza un objeto a otro, se puede asociar un estereotipo de camino al extremo más lejano de un enlace (Como <<local>>), que indica que el objeto designado es local al emisor). Normalmente, sólo se necesita representar explícitamente el camino de enlace para los caminos local, parameter, global y self (pero no association).

Otra característica es el número de secuencia. Para indicar la ordenación temporal de un mensaje, se precede de un número de un número (comenzando con el mensaje número 1), que se incrementa secuencialmente por cada nuevo mensaje en el flujo de control (2,3, etc.). Por ello, para representar el anidamiento, se utiliza la numeración decimal de Dewey (1 es el primer mensaje; 1.1 es el primer mensaje dentro del mensaje 1; 1.2 es el segundo mensaje dentro del mensaje 1; etc.). El anidamiento se puede representar

16

a cualquier nivel de profundidad. Nótese también, a través del mismo enlace, se pueden mostrar varios mensajes (posiblemente enviados desde distintas direcciones), y cada uno tendrá un número de secuencia único.

La mayoría de las veces se modelarán flujos de controles simples y secuenciales. Sin embargo, también se pueden modelar flujos más complejos, que impliquen iteración y bifurcación. Una iteración representa una secuencia repetida de mensajes. Para modelar una iteración, el número de secuencia de un mensaje se precede de una expresión de iteración, como en * [i: =1..n] (o sólo * si se quiere indicar iteración pero no se desea especificar los detalles). Una iteración indica que el mensaje (y cualquier mensaje anidado) se repetirá de acuerdo con la expresión dada. Análogamente, una condición representa un mensaje cuya ejecución depende de la evaluación de una expresión booleana. Para modelar una condición, el número de secuencia de un mensaje se precede de una cláusula de condición [x >0]. Los distintos caminos alternativos de una bifurcación tendrán el mismo de secuencia, pero cada camino debe ser distinguible de forma única por una condición que no se solape con las otras.

Tanto para la iteración como para la bifurcación, UML no impone el formato de la expresión entre corchetes; se puede utilizar pseudocódigos o la sintaxis de un lenguaje de programación específico.



17

Figura 20: Ejemplo de diagramas de colaboración Diagramas de Estados.-

Estos diagramas permiten modificar los procedimientos con el tiempo y son útiles sólo para los objetos con un comportamiento significativo. Cada objeto está en un estado en cierto instante de tiempo, así mismo, el objeto puede tener un tiempo de vida en la aplicación, y este puede ser representado por varios estados que interactúan entre sí con sus respectivos cambios que permiten pasar de un estado a otro.

El estado en que se encuentra un objeto determina su comportamiento, éste muestra la forma en que las partes de un modelo UML cambia con el tiempo, así mismo, cada objeto sigue el comportamiento descrito en el Diagrama de Estados asociado a su clase.

Los Diagramas de Estados y escenarios son complementarios, los Diagramas de Estados son autómatas jerárquicos que permiten expresar concurrencia, sincronización y jerarquías de objetos, son grafos dirigidos y deterministas. La transición entre estados es instantánea y se debe a la ocurrencia de un evento.

Asimilando la transición de estados por medio de un ejemplo podría definirse así: La fabricación de un automóvil requiere de diferentes etapas o estados de armado del todo y cada una de sus partes, para tal proceso, se adquiere el material con que va a ser hecho, se arman las partes del automóvil de acuerdo a las características definidas en el diseño inicial, se realizan pruebas de resistencia de distintos tipos para evitar defectos que no son fáciles de distinguir, se almacena en una bodega especial y se entrega el coche a la agencia especializada en ventas. Obviamente, este es un ejemplo muy general sobre los distintos estados por los que puede pasar este objeto durante el periodo de vida de la fabricación del mismo, pero también, sirve para reconocer que todo objeto desde una vista de




18

comportamiento, puede pasar por cambios necesarios en un tiempo determinado.

En algún sistema que interactúe con los usuarios y posiblemente con otros sistemas, los objetos que lo conforman pasarán por cambios necesarios para obtener una respuesta prevista, esto se obtiene ajustando sus interacciones, así, si se van a modelar sistemas, es necesario contar con un mecanismo para los cambios en el modelo.

El diagrama de estado UML captura este tipo de cambios. Presenta los estados en los que puede centrarse un objeto junto con las transiciones entre los estados, y muestra también, los puntos inicial y final de una secuencia de cambios de estado.

Un diagrama de estados también se conoce como un motor de estado. Es importante aclarar que un diagrama de estados es intrínsecamente distinto de uno de clase, de objeto o de caso de uso. Se han visto diagramas que modelan el comportamiento de un sistema, o al menos un grupo de clases, objetos o cases de uso. Un diagrama de estados muestra las condiciones de un solo objeto, esto no quiere decir que no se puedan definir más objetos, pero estos una vez identificados, se pueden manejar por separado. Simbología

La forma de representar el diagrama de estado es a través de un rectángulo de vértices redondeados, junto con una línea continua y una punta de flecha, mismas que representan a una transición. La punta de la flecha apunta hacia el estado hacia donde se hará la transición. La figura también muestra un círculo relleno que simboliza un punto inicial y la diana que representa a un punto final.

No solo las clases se pueden dividir en tres áreas (Nombre. atributos y operaciones), el lenguaje UML da la opción de agregar detalles al icono de estado, que puede tener tres compartimientos: uno para el nombre, otro para el valor característico de los atributos del objeto en ese estado y otro para las acciones que se realizan al entrar, salir o estar en un estado. El área superior contendrá el nombre del estado, el área central contendrá las variables de estado y el área inferior las actividades.

Figura 22: División del icono de estado en 3 partes 18




19

Las variables de estado como cronómetros o contadores son, en ocasiones, de

ayuda. Las actividades constan de sucesos y acciones: tres de las mas utilizadas son entrada

(que sucede cuando el sistema entra al estado), salida (que sucede cuando el sistema sale

del estado) y hacer (que sucede cuando el sistema esta en el estado). Se pueden agregar

otros conforme sea necesario.

Ejemplificando lo que el objeto cuenta de usuario puede hacer dentro de un sistema, quedaría de la siguiente manera:

Figura 23: Ejemplo de diagrama de estado Diagrama de actividades.-

Un diagrama de actividades representa una actividad: un paso en el flujo de trabajo o la ejecución de una operación. Es una variante del diagrama de estados, organizado respecto de las acciones y principalmente destinado a representar el comportamiento interno de un método (la realización de una operación) o de un caso de uso. Una de las características de un diagrama de actividades es que no posee transiciones internas, ni transiciones desencadenadas por eventos.

Las actividades se enlazan por transiciones automáticas. Cuando una actividad termina se desencadena el paso a la siguiente actividad. Un diagrama de actividades es provechoso para entender el comportamiento de alto nivel de la ejecución de un sistema, sin profundizar en los detalles internos de los mensajes.



20

Un diagrama de actividades contiene estados de actividad que representa la

ejecución de una secuencia en un procedimiento, o el funcionamiento de una actividad en un flujo de trabajo; en vez de esperar un evento, como en un estado de espera normal, un estado de actividad espera la terminación de su cómputo. Cuando la actividad termina, entonces la ejecución procede al siguiente estado de actividad dentro del diagrama. Una transición de terminación es activada en un diagrama de actividades cuando se completa la actividad precedente. Los estados de actividad no tienen transiciones con eventos explícitos, peor pueden ser abortados por transiciones en estados que los incluyen.

Un diagrama de actividades puede contener también estados de acción, que son similares a los de actividad pero son atómicos y no permiten transiciones mientras están activos. Los estados de acción se deben utilizar para las operaciones cortas de mantenimiento.

Un diagrama de actividades puede contener bifurcaciones, así como divisiones de control en hilos concurrentes, los hilos concurrentes representan actividades que se pueden realizar concurrentemente por los diversos objetos o personas. La concurrencia se representa a partir de la agregación, en la cual cada objeto tiene su propio hilo. Las actividades concurrentes se pueden realizar simultáneamente o en cualquier orden. Un diagrama de actividades es como un organigrama tradicional, excepto que permite el control de concurrencia además del control secuencial.

Con respecto a la notación de este tipo de diagramas, un estado de actividad se representa como una caja con los extremos redondeados que contiene una descripción de actividad. Las transacciones simples de terminación se muestran como flechas. Las ramas se muestran como condiciones de guarda en transiciones o como diamantes con múltiples flechas de salida etiquetadas. Una división o una unión de control se representan con múltiples flechas que entran o salen de la barra gruesa de sincronización. Cuando es necesario incluir eventos externos, la recepción de un evento se puede mostrar como un disparador en una transición, o como un símbolo especial que denota la espera de una señal.

A menudo es útil organizar las actividades en un modelo según su responsabilidad. Esta clase de asignación puede mostrarse organizando las actividades en regiones distintas separadas por líneas en el diagrama. Debido a su aspecto, esto es conocido como Calles. Un diagrama de actividades puede mostrar el flujo de objetos como valores. Para un valor de salida, se dibuja una flecha con línea discontinua desde la actividad al objeto. Para un valor de entrada, se dibuja una flecha con línea discontinua desde el objeto a una actividad.

21

Figura 24: Ejemplo de diagramas de actividades Diagrama de componentes.-

Los modelos físicos de un sistema y sus relaciones son descritos por los diagramas de componentes. Un diagrama de componentes representa las dependencias entre componentes software, incluyendo componentes de código fuente, componentes del código binario, y componentes ejecutables. Un módulo de software se puede representar como




22

componente. Algunos componentes existen en tiempo de compilación, algunos en tiempo de enlace y algunos en tiempo de ejecución, otros en varias de éstas. Un componente de sólo compilación es aquel que es significativo únicamente en tiempo de compilación. Un componente ejecutable es un programa ejecutable. Un diagrama de componentes tiene sólo una versión con descriptores, no tiene versión con instancias. Para mostrar las instancias de los componentes se debe usar un diagrama de despliegue.

Un diagrama de componentes muestra clasificadores de componentes, las clases definidas en ellos, y las relaciones entre ellas. Los clasificadores de componentes también se pueden anidar dentro de otros clasificadores de componentes para mostrar relaciones de definición. Un diagrama que contiene clasificadores de componentes y de nodo se puede utilizar para mostrar las dependencias del compilador, que se representa como flechas con líneas discontinuas (dependencias) de un componente cliente a un componente proveedor del que depende. Los tipos de dependencias son específicos del lenguaje y se pueden representar como estereotipos de las dependencias. El diagrama también puede usarse para mostrar interfaces y las dependencias de llamada entre componentes, usando flechas con líneas discontinuas desde los componentes a las interfaces de otros componentes.

El diagrama de componente hace parte de la vista física de un sistema, la cual modela la estructura de implementación de la aplicación por sí misma, su organización en componentes y su despliegue en nodos de ejecución. Esta vista proporciona la oportunidad de establecer correspondencias entre las clases y los componentes de implementación y nodos. La vista de implementación se representa con los diagramas de componentes.



23

Diagramas de despliegue.-

Los Diagramas de despliegue muestran las relaciones físicas entre los componentes hardware y software en un sistema final. Un diagrama está compuesto por nodos y el reparto de los componentes sobre dichos nodos. La vista de despliegue representa la disposición de las instancias de componentes de ejecución en instancias de nodos conectados por enlaces de comunicación. Un nodo es un recurso de ejecución tal como una computadora, un dispositivo` o memoria. Los estereotipos permiten precisar la naturaleza del equipo:

Dispositivos Procesadores Memoria

Los nodos se interconectan mediante soportes bidireccionales que pueden a su vez estereotiparse. Esta vista permite determinar las consecuencias de la distribución y la asignación de recursos. Las instancias de los nodos pueden contener instancias de ejecución, como instancias de componentes y objetos. El modelo puede mostrar dependencias entre las instancias y sus interfaces, y también modelar la migración de entidades entre nodos u otros contenedores. Esta vista tiene una forma de descriptor y otra de instancia. La forma de instancia muestra la localización de las instancias de los componentes específicos en instancias específicas del nodo como parte de una configuración del sistema. La forma de descriptor muestra qué tipo de componentes pueden subsistir en qué tipos de nodos y qué tipo de nodos se pueden conectar, de forma similar a un diagrama de clases, esta forma es menos común que la primera.



25

Capítulo 2. El modelo de dominio

Los diagramas que representan el modelo de dominio de un sistema son los diagramas de clases y diagramas de actividades.

Los diagramas de clases, desde el punto de vista conceptual, capturan de forma adecuada el lenguaje de dominio, así, los conceptos de dominios se entrelazan entre sí; en estos diagramas de clase no-se define ninguna operación, sino que, se muestran conceptos, asociaciones entre conceptos y atributos de conceptos. Este diagrama es uno de los más importantes para el análisis y diseño de sistemas, ya que define el ámbito de un conjunto de objetos, donde cada objeto pertenece a una clase (Los objetos se crean por instanciación de las clases) y se relaciona con otros de manera estructural, permitiendo conocer algunas limitantes y acciones de objetos. Ya se mencionaron los componentes de una clase (Nombre, atributos, operaciones) y, concerniente a los atributos, no deberían ser manipulables directamente por el resto de objetos, por esta razón, hay niveles de visibilidad para estos, que son:

(-) Privado: Es el más fuerte. Esta parte es totalmente invisible (Excepto para clases amigas).

(#) Atributos/operaciones protegidos: Están visibles para las clases amigas y para las clases derivadas de la original.

(+) Atributos/operaciones públicos: Son visibles a otras clases.

Ninguna clase se encuentra aislada, por ello, los enlaces entre objetos pueden ser representados al momento de relacionar las clases, utilizando:

Asociación y Agregación. Generalización/Especialización.

En la fase de elaboración se crea un diagrama de clases conceptual inicial del

dominio del problema, y en cada ciclo de construcción se detallarán dichos diagramas para los casos de uso de dicho ciclo.

El flujo de trabajo en el dominio será representado por el diagrama de actividades, dicho diagrama complementa el diagrama de clases, describiendo los pasos que se siguen en el dominio para llevar a cabo las labores objetivo del sistema software. El aspecto crucial de los diagramas de actividad es que fomentan la búsqueda de tareas paralelas, lo cual es importante en la eliminación de secuencias innecesarias en el sistema software.

Con la elaboración del modelo de dominio se persigue un conocimiento básico del vocabulario y de los conceptos que se incluyen en los requisitos. Se empezará con un modelo general que trate de identificar los conceptos obvios expresados en los requisitos.

26

En cada ciclo de construcción se refinará el modelo conceptual ampliándolo con los requisitos referentes al ciclo concreto.

27

2.1 Diagramas de clases

Figura 27: Diagrama de clase para acceder a cuenta de usuario



28

Figura 28: Diagrama de clases para cobro del mes deseado


29

Figura 29: Diagrama de clase para detalles de llamada


30

Figura 30: Diagrama de clase para cambiar password



31

2.2 Diagramas de actividades

Figura 31: Diagrama de actividades para acceder al sistema



32

Figura 32: Diagrama de actividades para mostrar cobros y detallados telefónicos


33

Figura 33: Diagrama de actividades para cambiar password


35

Capítulo 3. El modelo de casos de uso 3.1 Diagrama de casos de uso




36

Figura 35: Diagrama Caso de Uso Cambiar password usuario


37

Figura 36: Diagrama Caso de Uso Consultar ultimo cobro



38

Figura 37: Diagrama Caso de Uso Consultar penúltimo cobro



39

Figura 38: Diagrama Caso de Uso Consultar antepenúltimo cobro



41

Capítulo 4. Definición de la línea base de la arquitectura 4.1 Diagrama de bloques representativo del acceso al sistema

A continuación se mostrará a través de diagramas de bloques la relación que existe entre el usuario y el sistema operativo, al momento de tener contacto con el sistema, se detalla a continuación por la conveniencia de plasmar las entidades que interactúan con el sistema desde le punto de vista conceptual. Figura 39: Diagrama de bloques representativo de acceso al sistema 41

Figura 39: Diagrama de bloques representativo de acceso al sistema


42

4.2 Diagramas de despliegue

Figura 40: Diagrama de despliegue para ingresar al sistema y mostrar cobros


43

Figura 41: Diagrama de despliegue para mostrar detallado telefónico



44

Figura 42: Diagrama de despliegue para cambiar password

45

Capítulo 5. El modelo de diseño 5.1 Diagramas de clases activas

Figura 43: Diagrama de clase para acceder a cuenta de usuario



46

Figura 44: Diagrama de clase para cobro del mes deseado



47

Figura 45: Diagrama de clase para detalles de llamada


48

Figura 46: Diagrama de clase para cambiar password



49

Capítulo 6. El modelo de implementación 6.1 Pantallas de presentación y código fuente del sistema Pantalla principal.

INFORME PERSONALIZADO

Reporteador Avanzado

DIGESETDIRECCIÓN GENERAL DE SERVICIOS TELEMÁTICOS

SSSeeerrrvvviiiccciiiooo TTTeeellleeefffóóónnniiicccooo

Bienvenido al Servicio de Consulta del saldo u detallado por internet Este es un servicio de valor agregado para los universitarios, que le permite tener acceso al detalle de su facturación mensual de su servicio telefónico. Por favor, para contar con este servicio ingrese su login y su password correctamente

Login

Password

Entrar





50

principal.asp <html> <head> <title>Detalle de consumo telefónico por el web</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1 "> </head> <body bgcolor="#FFFFFF" t text="#000000" background="imagenes/background.GIF" leftmargin="0" topmargin="0"> <br>

<br> <br> <table width="760" border="0" height="80" align="left">

<tr> <td width="74%" height="243" valign="top">

<p> </p> <form name="forml" method="post" action="layout1.asp">

<table width=" 100%" border="0" height="62"> <tr>

<td width="60%" height="2"> </td> <td width="40%" height="2"> Login

<input type="text" name="login" maxlength=" 10" size=" 12"> </td>

</tr> <tr>

<td width="60%" height="28"> </td> <td width="40%" height="28">Password

<input type="password" name="password" maxlength=" 10" size=" 12"> </td>

</tr> <tr>

<td width="60%" height="28"> </td> <td width="40%" height="28">

<inputtype="image"src="imagenes/entrar.GIF"

width="83" height="42"></td>

</tr> </table>

</form> </td> <td width="26%" height="243" valign="top">

<div align="center"> <p> </p> <p><b><font color-`#993 333">Bienvenido al Servicio de Consulta de saldo

51

y detallado por internet</font></b><br> <font face="Geneva, Arial, Helvetica, san-serif' size="2" color-“#990033 ">Este es un servicio de valor agregado para los universitarios,<br> </font><font color="#993333" face="Geneva, Arial, Helvetica, san-serif'

size="2">que le permite tener acceso al detalle de su facturación mensual de su servicio telefónico. Por favor, para contar con este servicio ingrese su login y su password</font><font face="Geneva, Axial,

Helvetica, san-serif' size="2" color "#990033"> correctamente. </font></p>

</div> </td>

</tr> <tr>

<td width="74%" height="243" valign="top"> </td> <td width="26%" height="243" valign="top"> </td>

</tr> </table> <p> </p> <p> </p>

</body> </html>

53

layout1.asp (Presentación de entrada) <HTML> <SCRIPT language=JavaScript> <!-- <!-- Begin var day=””; var month="”; var myweekday="”; var year=””; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; year= mydate.getYear(); if (year<2000) {year = 1900+year}; if(myday == 0) day = " Domingo " else if(myday = = 1) day = " Lunes " else if(myday = = 2) day = " Martes " else if(myday = = 3) day = " Miércoles " else if(myday = = 4) day = " Jueves " else if(myday = = 5) day = " Viernes " else if(myday = = 6) day = " Sábado " if(mymonth = = 0){ month = "enero "} else if(mymonth = =1) month = "febrero " else if(mymonth = =2) month = "marzo " else if(mymonth = =3) month = "abril " else if(mymonth = = 4) month = "mayo " else if(mymonth = = 5) month = "junio " else if(mymonth = = 6) month = "julio " else if(mymonth = =7)

54

month = "agosto " else if(mymonth = = 8) month = "septiembre " else if(mymonth = = 9) month = "octubre " else if(mymonth = = 10) month = "noviembre " else if(mymonth = = 11) month = "diciembre " // End --> </SCRIPT> <BODY lefimargin="0" topmargin="0" bgcolor="#FFFFFF" ackground="imagenes/imagelayout1.GIF"> <table width="103%" border="0" height="90">

<tr> <td width="47%" height="63"> </td> <td width="15%" height="63"> </td> <td width=" 12%" height="63"> </td> <td width="26%" height="63"> </td>

</tr> <tr>

<td width="47%" height="37"><font face="Arial" size="1" color="#FFFFFF"> <script>

document.write(day+ " " + myweekday + " de "); document.write(month+" de "+year);

</script> </font></td> <td width="15%" height="37"><font face="Arial" size="2"><a

href="passwordchange.asp"><font color="#FFFFFF">Cambiar password</font></a></font></td>

<td width="12%" height="37"><font face="Arial" size="2" color-"#490613"><a href="cerrarsesion.asp"><font color="#FFFFFF">Cerrar

Sesión</font></a> </font></td> <td width="26%" height="37"> </td>

</tr> </table> <table width=" 103%" border="0">

<tr> <td width="74%" bgcolor="#FFFFFF" bordercolor="#FFFFCC">

<div align="center"> <i><font face="Arial" size=" 1 " color-`#490613 "> <%

set cons=server.createobject("ADODB.Connection") set rs= server.createobject("ADODB.Recordset")

cons.open "accesobd" If session("usuario") <> "" then

SQL ="select * from admin where log=` & session("usuario") & “”

55

rs.open SQL, cons, 1, 1 else

SQL ="select * from admin where log=” & request.form("login") & ""' rs.open SQL, cons, 1, 1 encontrado=false IF NOT rs.eof THEN

if rs("log")=request.form("login") and rs("pas")=request.form("password") then

encontrado=true session("i'd")= rs("id")

session("division")= rs("nomdivi") session("usuario")=request.form("login")

session("password1 ")=request.form("password") end if

END IF If encontrado=false then

response.redirect "principal.asp" end if

end if %>

</font>Servicio Telefónico de <% response.write rs("nomdivi") %> </i> </div>

</td> <td width="26%" bgcolor="#FFFFFF"> </td>

</tr> </table> <table width=" 103%" border="0">

<tr> <td width="74%" height="21" bgcolor="#FFFFFF">

<div align="left"></div> <div align="left"><Jdiv> <div align="left"><a href="ultimocobro.asp">Consumo del último

cobro</a></div> </td> <td width="26%" height="21" bgcolor="#FFFFFF"> </td>

</tr> <tr>

<td width="74%" bgcolor="#FFFFFF"> <div align="left"><a href="penultimocobro.asp">Consumo del penúltimo

cobro</a></div> </td> <td width="26%" bgcolor="#FFFFFF"> </td>

</tr> <tr>

<td width="74%" bgcolor="#FFFFFF">

56

<div align="left"><a href="antepenultimocobro.asp">Consumo del antepenúltimo

cobro</a></div> </td> <td width="26%" bgcolor="#FFFFFF"> </td>

</tr> </table> <table width="103%" border="0'*height="168" bgcolor="#FFFFFF">

<tr> <td width="73%" height="27"> </td> <td width="27%" height="27">

<div align="left"> </div> </td>

</tr> <tr>

<td width="73%"> </td> <td width="27%"> </td>

</tr> <tr>

<td width="73%" height="202"> </td> <td width="27%" height="202"> </td>

</tr> <tr>

<td width="73%" height="14"><img src="imagenes/line.GIF" width="760" height="9"></td>

<td width="27%" height=" 14"> </td> </tr> </table> <p><font face="Anal" size="1" color--'W490613 "> </font></p> <p><font face="Arial" size="1" color="#490613"> </font></p> <p><font face="Arial" size="1" color-`#33663Y> </font><font face="Arial" size="1" color-`#33663Y>

</font> </p> <%

rs.close cons.close

set rs = nothing set cons = nothing

%> <BODY> </HTML>

57

cerrarsesion.asp <html> <%session("usuario")="" session("passwordl ")="" response.redirect "principal.asp" %> </html>

58

Pantalla último cobro.

59

ultimocobro.asp <HTML> <SCRIPT language=JavaScript> <!-- <!-- Begin var day=""; var month="”; var myweekday="”; var year=""; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; year= mydate.getYear(); if (year<2000) {year = 1900+year}; if(myday == 0) day = " Domingo " else if(myday = = 1) day = " Lunes " else if(myday = = 2) day = " Martes " else if(myday = = 3) day = " Miércoles " else if(myday = = 4) day = " Jueves " else if(myday = = 5) day = " Viernes " else if(myday = = 6) day = " Sábado " if(mymonth = = 0) { month = "enero "} else if(mymonth = = 1) month = "febrero " else if(mymonth = = 2) month = "marzo " else if(mymonth = = 3) month = "abril " else if(mymonth = = 4) month = "mayo " else if(mymonth = = 5) month = "junio " else if(mymonth = = 6) month = "julio " else if(mymonth = = 7)

60

month = "agosto " else if(mymonth = = 8) month = "septiembre " else if(mymonth = = 9) month = "octubre " else if(mymonth = = 10) month = "noviembre " else if(mymonth = = 11) month = "diciembre " // End --> </SCRIPT> <BODY leftmargin="0" topmargin="0" background="imagenes/imagecultimo.GIF"> <p><font face="Arial" size="1" color="#FFFFFF">

<script> document.write(day+ " " + myweekday + " de "); document.write(month+" de "+year);

</script> </font></p>

<% If session("usuario") <> "" then

Set cons = server.createobject("ADODB.CONNECTION") SET rs = SERVER.CREATEOBJECT("ADODB.RECORDSET") cons.open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" &

SERVER.Mappath("/bd/Listadoultimocobro/cultimo.mdb") rs.open "select * from cultimo where nomdivi="' & session("division") & "', cons, 3, 3 If rs.Eof then

Response.write "<center><h2>NO EXISTEN REGISTROS </h2></center>" ELSE

%> <table width="88%" border="O">

<tr> <td width="74%" height="3 1 ">

<div align="center"> <%response.write rs("nomdivi")%> <br> Mes de <% response.write rs("mes") %> de <% response.write rs("anio")%>

</div> <tr>

<td width="74%" height=" 106"> <div align="left">

<table width="99%" border="1" height="95" align="center" bordercolor="#996666" bgcolor="#FFFFFF">

<tr>

61

<td bordercolor="#FFFFCC" width=" 17%"> <div align="center">Renta</div>

</td> <td bordercolor="#FFFFCC" width=" 18%">

<div align="center">Servicio Medido</div> </td> <td bordercolor="#FFFFCC" width=" 18%">

<div align="center">Celulares</div> </td> <td bordercolor="#FFFFCC" width="22%">

<div align="center">Importe L.D.</div> </td> <td bordercolor="#FFFFCC" width="25%">

<div align="center">Importe Total</div> </td>

</tr> <tr>

<td bordercolor="#FFFFCC" width=" 17%"> <div align="center">

<%response.write rs("renta")%> </div>


<div align="center"> <%response.write rs("servicio_medido")%>

</div> </td> <td bordercolor="#FFFFCC" width="18%">

<div align="center"> <%response.write rs("sm_imptots")%>


<div align="center"> <%response.write rs("sm imptld")%>


<div align="center"> <%response.write rs("sm importe")%>

</div> </td>

</tr> </table>

</div> <tr>

62

<td width="74%" height="24"> <table width=" 100%" border="0">

<tr> <td width="87%"><a href="detalleultimo.asp">Mostrar detallado

telefónico</a> </td> <td width="13%"><a href="layout1.asp">Regresar .. </a></td>

</tr> </table>

</table> <%

rs.CLOSE cons.close

set cons=nothing set rs=nothing

End if Else Response.redirect "cerrarsesion.asp" End if %> </HTML>

63

Pantalla detallado último cobro.

No.

Nom. división

Extensión

Fecha

Hora

No. Marcado

Ciudad

Importe

1 Servicios Telemáticos

320003 7/30/2003 11:29 0443123178571 LLAMADA A CELULAR

5.87



2.93



5.87



5.87



5.87



8.8



5.87



8.8



2.93


320003 7/15/2003 11:16 018009098000 L.D. 800 NACIONAL

0


32003 7/16/2003 14:21 018009098000 L.D. 800 NACIONAL

0


32003 7/19/2003 14:26 018009098000 L.D. 800 NACIONAL

0


320003 7/16/2003 15:06 018009098000 L.D. 800 NACIONAL

0


32003 7/4/2003 18:30 018005022000 L.D. 800 NACIONAL

0

Guardar detallado en disco (Formato Excel) Regresar..

64

detalleultimo. asp <HTML> <BODY leftmargin="0" topmargin="0"> <% If session("usuario") <> "" then Set cons = server.createobject("ADODB.CONNECTION") SET rs = SERVER.CREATEOB-JECT("ADODB.RECORDSET") cons.open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & SERVER.Mappath("/bd/Listadoultimocobro/dultimo.mdb") rs.open "select * from dultimo where nomdivi-"' & session("division") & "', cons, 3, 3

If rs.Eof then Response.write"<center><h2>NO EXISTEN REGISTROS </h2></center>"

ELSE %> <table width="90%" border="O">

<tr> <td width="74%" height=" 19">

<div align="center"></div>

<tr> <td width="74%" height="106">

<div align="left"> <table width=" 100%" border=" 1" height="95" align="center"

bordercolor="#996666" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0"> <tr bgcolor="#996666">

<td bordercolor="#FFFFCC" width="5%" height="44"> <div align="center"> <font face="Arial" size="3" color="#FFFFFF" >No.</font> </div>

</td> <tdbordercolor="#FFFFCC" width=" 15%" height="44">

<div align="center"> <font face="Arial" size="3" color="#FFFFFF" >Nom.

división </font> </div>

</td> <td bordercolor="#FFFFCC" width=" 10%" height="44">

<div align="center"> <font face="Arial" size="3" color="#FFFFFF">Extensión

</font> </div>


<div align="center"> <font face="Anal" size="3" color="#FFFFFF">Fecha </font>

65

</div> </td> <td bordercolor="#FFFFCC" width="13%" height="44">

<div align="center"> <font face="Arial" size="3" color="#FFFFFF">Hora </font> </div>


<div align="center"> <font face="Anal" size="3" color="#FFFFFF">No. Marcado

</font> </div>


<div align="center"> <font face="Anal" size="3" color="#FFFFFF">Ciudad </font> </div>


<div align="center"> <font face="Anal" size="3" color="#FFFFFF">Importe </font> </div>

</td> </tr> <% numero=l

DO WHILE NOT rs.Eof %> <tr bgcolor="#FFFFCC"> <td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans-

serif' size="3 "><%=numero%></font></td> <td bordercolor="#FFFFCC" width="15%">

<div align="center"><font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("nomdivi")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("extension")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("fecha")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("d2")%></font></div>


66

<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("d9")%></font> </div>


<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("ciudad")%></font></div>


<div align="centet"'> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("importe")%></font></div>

</td> </tr>

<% rs.movenext numero= numero+1

if not rs.eof then%> <tr bgcolor="#FFFFFF">

<td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans- serif' size="3 "><%=numero%></font> </td>

<td bordercolor="#FFFFCC" width=" 15%"> <div align="center"><font face="Arial, Helvetica, sans-serif'

size="3 "><%=rs("nomdivi")%></font></div> </td> <td bordercolor="#FFFFCC" width=" 10%">



<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("fecha")%></font></div>

</td> <td bordercolor="#FFFFCC" width="13%">



<div align="center"> <font face="Arial, Helvetica, sans-serif size="3 "><%=rs("d9")%></font> </div>




<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("importe")%></font></div>

</td>

67

</tr> <% rs.movenext

numero= numero+1 end if loop

%> </table>

</div> <tr>


<tr> <td width="89%"><a href="detalleultimoexcel.asp">Guardar detallado en disco (Formato Excel)</a></td> <td width="11%"><a href="ultimocobro.asp">Regresar ..</a></td>

</tr> </table>

</table>

<% rs.CLOSE cons.close set cons=nothing set rs=nothing end if

else Response.redirect "cerrarsesion.asp" end if %> </HTML>

68

detalleultimoexcel.asp (Detalle en formato excel) <HTML> <BODY leftmargin="0" topmargin="0"> <% if session("usuario") <> "" then Response.ContentType = "application/vnd.ms-excel" Set cons = server.createobject("ADODB.CONNECTION") SET rs = SERVER.CREATEOBJECT("ADODB.RECORDSET") cons.open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & SERVER.Mappath("/bd/Listadoultimocobro/dultimo.mdb") rs.open "select * from dultimo where nomdivi="' & session("division") & ""', cons, 3, 3 If rs.Eof then Response.write"<center><h2>NO EXISTEN REGISTROS </h2></center>" ELSE %> <table width="90%" border="0">


<div align="center"></div> <tr>


<table width=" 100%" border=" 1" height="95" align="center" bordercolor="#996666" bgcolor="#FFFFFF" cellpadding="O" cellspacing="0">

<tr bgcolor="#996666"> <td bordercolor="#FFFFCC" width="5%" height="44">

<div align="center"> <font face="Arial" size="3" color="#FFFFFF" >No.</font> </div>





<div align="center"> <font face="Anal" size="3" color="#FFFFFF">Extensión

</font> </div>


<div align="center"> <font face="Arial" size="3" color="#FFFFFF">Fecha </font>

69

</div> </td> <td bordercolor="#FFFFCC" width=" 13%" height="44">



<div align="center"> <font face="Arial" size="3" color="#FFFFFF">No. Marcado

</font> </div>





</td> </tr>

<% numero=1 DO WHILE NOT rs.Eof %>

<tr bgcolor="#FFFFCC"> <td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans-

serif' size="3"><%=numero%></font></td> <td bordercolor="#FFFFCC" width="15%">





<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("fecha")%></font></div>




70

<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3"><%=rs("d9")%></font> </div>




<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3"><%=rs("importe")%></font></div>

</td> </tr> <% rs.movenext

numero= numero+1 if not rs.eof then%>

<tr bgcolor="#FFFFFF"> <td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans-serif'

size="3"><%=numero%></font> </td> <td bordercolor="#FFFFCC" width="15%">

<div align="center"><font face="Arial, Helvetica, sans-serif' size=" 3 "><%=rs("nomdivi")%></font></div>


<div align="center"> <font face="Acial, Helvetica, sans-serif' size="3 "><%=rs("extension")%></font></div>




<div align="center"> <font face="Arial, Helvetica, sans-serif' size=" 3 "><%=rs("d2")%></font></div>




<div align="center"> <font face="Anal, Helvetica, sans-serif' size=" 3 "><%=rs("ciudad")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3"><%=rs("importe")%></font></div>

</td>

71

</tr> <% rs.movenext


%> </table>

</div> </table> <%

rs.CLOSE cons.close set cons=nothing set rs=nothing End if

else Response.redirect "cerrarsesion.asp" End if %> </HTML>

72

Pantalla penúltimo cobro Lunes 18 de agosto de 2003

Servicio Telemáticos Mes de junio de 2003

Renta

Servicio Medido

Celulares

Importe L.D.

Importe Total

900

3229.44

1222.82

697.610000000001

6049.87

Mostrar detallado telefónico

Regresar…


73

penultimocobro.asp <HTML> <SCRIPT language=JavaScript> <!-- <!--Begin var day=””; var month=""; var myweekday="; var year=""; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; year= mydate.getYear(); if (year<2000) {year = 1900+year}; if(myday = = 0) day = " Domingo " else if(myday = = 1) day = " Lunes " else if(myday = = 2) day = " Martes " else if(myday = = 3) day = " Miércoles " else if(myday = = 4) day = " Jueves " else if(myday = = 5) day = " Viernes " else if(myday = = 6) day = " Sábado " if(mymonth = = 0) { month = "enero "} else if(mymonth = = 1) month = "febrero " else if(mymonth = = 2) month = "marzo " else if(mymonth = = 3) month = "abril " else if(mymonth = = 4) month = "mayo " else if(mymonth = = 5) month = "junio " else if(mymonth = = 6) month = "julio " else if(mymonth = = 7)

74

month = "agosto " else if(mymonth = = 8) month = "septiembre " else if(mymonth = = 9) month = "octubre " else if(mymonth = = 10) month = "noviembre " else if(mymonth = = 11) month = "diciembre " // End --> </SCRIPT> <BODY leftmargin="0" topmargin="0" background="imagenes/imagecultimo.GIF"> <p><font face="Arial" size="1" color="#FFFFFF">



<% If session("usuario") <> "" then


SERVER.Mappath("/bd/Listadopenultimocobro/cpenultimo.mdb") rs.open "select * from cpenultimo where nomdivi="' & session("division") & cons,

3,3 If rs.Eof then

Response.write"<center><h2>NO EXISTEN REGISTROS </h2></center>" ELSE


<tr> <td width="74%" height="3 1 ">

<div align="center"> <%response.write rs("nomdivi")%> <br> Mes de <% response.write rs("mes") %> de <% response.write rs("anio")%>

</div> <tr>



75

<tr> <td bordercolor="#FFFFCC" width=" 17%">

<div align="center">Renta</div> </td>

<td bordercolor="#FFFFCC" width=" 18%"> <div align="center">Servicio Medido</div> </td>

<td bordercolor="#FFFFCC" width="18%"> <div align="center">Celulares</div>


<div align="center">Importe L.D.</div> </td>

<td bordercolor="#FFFFCC" width="25%"> <div align="center">Importe Total</div>

</td> </tr> <tr>






<div align="center"> <%response.write rs("sm imptots")%>


<div align="center"> <%response.write rs("sm imptld")%> </div>


<div align="center"> <%response.write rs("sm importe")%>

</div> </td>

</tr> </table>

</div>

76


<table width=" 100%" border="0"> <tr>

<td width="87%"><a href="detallepenultimo.asp">Mostrar detallado telefónico</a></td>

<td width=" 13%"><a href="layout1.asp">Regresar .. </a></td> </tr>

</table> </table>


Else Response.redirect "cerrarsesion.asp" End if %> </HTML>

77

Pantalla detallado penúltimo cobro No.

Nom. División

Extensión

Fecha

Hora

No. Marcado

Ciudad

Importe

1 Servicio Telemáticos

1004 6/13/2003 15:42 3147250 LLAMADA LOCAL

1.74


1004 6/13/2003 15:47 3147250 LLAMADA LOCAL

1.74


1005 6/2/2003 16:40 3132427 LLAMADA LOCAL

1.74


32003 6/17/2003 10:19 0443123182669 LLAMADA CELULAR

2.93


32003 6/3/2003 10:37 0443125933121 LLAMADA CELULAR

5.87


32003 6/30/2003 12:45 0443123180122 LLAMADA CELULAR

5.87


32003 6/12/2003 13:03 0443125933121 LLAMADA CELULAR

2.93


32003 6/19/2003 13:21 0443125932964 LLAMADA CELULAR

11.73


32003 6/4/2003 14:00 0443123195263 LLAMADA CELULAR

5.87


32003 6/3/2003 14:21 0443123180122 LLAMADA CELULAR

8.8


32003 6/17/2003 15:09 0443123104068 LLAMADA CELULAR

2.93


32003 6/17/2003 18:38 0443123151364 LLAMADA CELULAR

5.87


32003 6/10/2003 18:53 0443123009729 LLAMADA CELULAR

2.93

Guardas detallado en disco (Formato Excel) Regresar …

78

detallepenultimo.asp <HTML> <BODY leftmargin="0" topmargin="0"> <% if session("usuario") <> "" then

Set cons = server.createobject("ADODB.CONNECTION") SET rs = SERVER.CREATEOBJECT("ADODB.RECORDSET") cons.open "DRIVER={Mictosoft Access Driver (*.mdb)}; DBQ=" &

SERVER.Mappath("/bd/Listadopenultimocobro/dpenultimo.mdb") rs.open "select * from dpenultimo where nomdivi="' & session("division") & “”, cons,

3,3 If rs.Eof then




<div align="center"></div>


<div align="left"> <table width=" 100%" border=" 1" height="95" align="center"

bordercolor="#996666" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0"> <tr bgcolor="#996666">

<td bordercolor="#FFFFCC" width="5%" height="44"> <div align="center"> <font face="Anal" size="3" color="#FFFFFF" >No.</font> </div>






</font> </div>


<div align="center">

79

<font face="Anal" size="3" color="#FFFFFF">Fecha </font> </div>

</td> <td bordercolor="#FFFFCC" width="13%" height="44">

<div align="center"> <font face="Anal" size="3" color="#FFFFFF">Hora </font> </div>



</font> </div>





</td> </tr> <% numero=1

DO WHILE NOT rs.Eof %> <tr bgcolor="#FFFFCC">

<td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans- serif' size="3 "><%=numero%></font></td>

<td bordercolor="#FFFFCC" width="15%"> <div align="center"><font face="Arial, Helvetica, sans-serif'







</td>

80

<td bordercolor="#FFFFCC" width=" 14%"> <div align="center"> <font face="Arial, Helvetica, sans-serif'

size="3"><%=rs("d9")%></font> </div> </td> <td bordercolor="#FFFFCC" width=" 14%">




</td> </tr>



<td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans- serif' size="3"><%=numero%></font> </td>














81

</td> </tr>


end if loop

%> </table>

</div> <tr>


<tr> <td width="89%"><a href="detallepenultimoexcel.asp">Guardar detallado en disco (Formato Excel)</a></td> <td width="11%"><a href="penultimocobro.asp">Regresar ..</a></td>

</tr> </table>

</table>



82

detallepenultimoexcel.asp (Detalle en formato excel) <HTML> <BODY leftmargin="0" topmargin="O"> <% if session("usuario") <> "" then

Response.ContentType = "application/vnd.ms-excel" Set cons = server.createobject("ADODB.CONNECTION") SET rs = SERVER.CREATEOBJECT("ADODB.RECORDSET") cons.open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" &

SERVER.Mappath("/bd/Listadopenultimocobro/dpenultimo.mdb") rs.open "select * from dpenultimo where nomdivi="' & session("division") & “”, cons,

3,3 If rs.Eof then


%> <table width="90%" border="0">

<tr> <td width="74%" height=" l 9">



<table width=" l00%" border=" 1" height="95" align="center" bordercolor="#996666" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">


<div align="center"> <font face="Arial" size="3" color="#FFFFFF" >No.</font> </div>




</td> <td bordercolor="#FFFFCC" width=" 10%" height="44"> <div align="center">

<font face="Anal" size="3" color="#FFFFFF">Extensión </font>

</div> </td> <td bordercolor="#FFFFCC" width=" 10%" height="44">


83

<font face="Anal" size="3" color="#FFFFFF">Fecha </font> </div>




<div align="center"> <font face="Anal" size="3" color="#FFFFFF">No. Marcado

</font> </div>




<div align="center"> <font face="Arial" size="3" color="#FFFFFF">Importe </font> </div>



<td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans- serif' size="3"><%=numero%></font></td>

<td bordercolor="#FFFFCC" width="15%"> <div align="center"><font face="Anal, Helvetica, sans-serif'


<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("extension")%></font></div>





</td>

84


size="3 "><%=rs("d9")%></font> </div> </td> <td bordercolor="#FFFFCC" width=" 14%">


</td> <td bordercolor="#FFFFC'C" width=" 19%">




<tr bgcolor="#FFFFFF"> <td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans

serif' size="3"><%=numero%></font> </td> <td bordercolor="#FFFFCC" width="15%">

<div align="center"><font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("nomdivi")%></font></div>


<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3"><%=rs(" extension")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif size="3 "><%=rs("fecha")%></font></div>









85



%> </table>

</div> </table> <%

rs.CLOSE cons.close set cons=nothing set rs=nothing end if

Else Response.redirect "cerrarsesion.asp" End If %> </HTML>

86

Pantalla antepenúltimo cobro Lunes 18 de agosto de 2003

Servicios Telemáticos Mes de mayo de 2003

Renta

Servicio Medido

Celulares

Importe L.D.

Importe Total

900

3963.22

1149.55

947.03

5959.8

Mostrar detallado telefónico Regresar …

87

antepenultimocobro.asp <HTML> <SCRIPT language=JavaScript> <!-- <!-- Begin var day=””; var month="”; var myweekday=”"; var year=""; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; year= mydate.getYear(); if (year<2000) {year = 1900+year}; if(myday == 0) day = " Domingo " else if(myday = = 1) day = " Lunes " else if(myday = = 2) day = " Martes " else if(myday = = 3) day = " Miércoles " else if(myday = = 4) day = " Jueves " else if(myday = = 5) day = " Viernes " else if(myday = = 6) day = " Sábado " if(mymonth = = 0) { month = "enero "} else if(mymonth = = 1) month = "febrero " else if(mymonth = = 2) month = "marzo " else if(mymonth = = 3) month = "abril " else if(mymonth = = 4) month = "mayo " else if(mymonth = = 5) month = "junio " else if(mymonth = = 6) month = "julio " else if(mymonth = = 7)

88

month = "agosto " else if(mymonth = = 8) month = "septiembre " else if(mymonth = = 9) month = "octubre " else if(mymonth = = 10) month = "noviembre " else if(mymonth = = 11) month = "diciembre " // End --> </SCRIPT> <BODY leftmargin="0" topmargin="O" background="imagenes/imagecultimo.GIF"> <p><font face="Arial" size="1" color="#FFFFFF">



<% if session("usuario") <> "" then


SERVER.Mappath("/bd/Listadoantepenultimocobro/cantepenultimo.mdb") rs.open "select * from cantepenultimo where nomdivi-"' & session("division") &

cons, 3, 3 If rs.Eof then


%> <table width="88%" borden--"O"> <tr>

<td width="74%" height="31 "> <div align="center"> <%response.write rs("nomdivi")%> <br> Mes de <% response.write rs("mes") %> de <% response.write rs("anio")%>

</div> <tr>



89

<tr> <td bordercolor="#FFFFCC" width=" 17%">

<div align="center">Renta</div> </td> <td bordercolor="#FFFFCC" width=" 18%">

<div align="center">Servicio Medido</div> </td> <td bordercolor="#FFFFCC" width="18%">

<div align="center">Celulares</div> </td> <td bordercolor="#FFFFCC" width="22%">

<div align="center">Importe L.D.</div> </td> <td bordercolor="#FFFFCC" width="25%">

<div align="center">Importe Total</div> </td>

</tr> <tr>





</div> </td> <td bordercolor="#FFFFCC" width=" 18%">

<div align="center"> <%response.write rs("sm imptots")%>


<div align="center"> <%response.write rs("sm imptld")%>


<div align="center"> <%response.write rs("sm_importe")%>

</div> </td>

</tr> </table>

</div>

90


<table width=" l00%" border="0"> <tr>

<td width="87%" height="23"><a href="detalleantepenultimo.asp">Mostrar detallado telefónico</a></td> <td width=" 13 %" height="23 "><a href="layout 1. asp">Regresar .. </a></td>

</tr> </table>

</table> <%

rs.CLOSE cons.close set cons=nothing set rs=nothing end if


91

Pantalla detalleantepenultimo

No.

Nom. División

Extensión

Fechas

Hora

No. Marcado

Ciudad

Importe


#92 5/24/2003 10:37 01641750500 ENSENADA 1.17


#92 5/20/2003 10:07 3147052 LLAMADA LOCAL

1.74


1005 5/30/20032 12:26 3076232 LLAMADA LOCAL

1.74


1005 5/30/2003 12:28 3076232 LLAMADA LOCAL

1.74


1005 5/30/2003 12:43 3076232 LLAMADA LOCAL

1.74


32003 5/24/2003 11:57 0443123182721 LLAMADA CELULAR

14.66


32003 5/24/2003 11:59 0443125933121 LLAMADA CELULAR

2.93


32003 5/12/2003 12:08 0443121111874 LLAMADA CELULAR

8.8


32003 5/7/2003 12:35 0443123195056 LLAMADA CELULAR

8.8


32003 5/15/2003 12:39 0043125933121 LLAMADA CELULAR

23.46


32003 5/2/2003 13:59 0443123172217 LLAMADA CELULAR

2.93


32003 5/29/2003 14:02 0443123170264 LLAMADA CELULAR

11.73


32003 5/29/2003 14:23 0443125933121 LLAMADA CELULAR

5.87

Guardar detallado en disco (Formato Excel Regresar ...

92

detalleantepenultimo.asp <HTML> <BODY leftmargin="0" topmargin="0"> <% If session("usuario") <> "" then


SERVER.Mappath("/bd/Listadoantepenultimocobro/dantepenultimo.mdb") rs.open "select * from dantepenultimo where nomdivi="' & session("division") &





<div align="center'5</div>


<div align="left"> <table width=" 100%" border=" 1 " height="95" align="center"

bordercolor="#996666" bgcolor="#FFFFFF" cellpadding="O" cellspacing="0"> <tr bgcolor="#996666">

<td bordercolor="#FFFFCC" width="5%" height="44"> <div align="center"> <font face="Arial" size="3" color="#FFFFFF" >No.</font> </div>






</font> </div>



93

<font face="Arial" size="3" color="#FFFFFF">Fecha </font> </div>


<div align="center"> <font face="Anal" size="3" color="#FFFFFF">Hora </font> </div>



</font> </div>





</td> </tr> <% numero=1



<td bordercolor="#FFFFCC" width="15%"> <div align="center"><font face="Arial, Helvetica, sans-serif'







</td>

94


size="3"><% rs("d9")%></font> </div> </td> <td bordercolor="#FFFFCC" width=" 14%">




</td> </tr>



<td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sansserif' size="3 "><%=numero%></font> </td>

<td bordercolor="#FFFFCC" width="15%"> <div align="center"><font face="Arial, Helvetica, sans-serif' size="3

"><%=rs("nomdivi")%></font></div> </td> <td bordercolor="#FFFFCC" width=" 10%">

<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("extension")%></font></div>








<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("ciudad")%></font></div>



95

</td> </tr>


end if loop

%> </table>

</div> <tr>

<td width="74%" height="26"> <table width=" 100%" borden--"O">

<tr> <td width="89%"><a href="detalleantepenultimoexcel. asp ">Guardar detallado en disco (Formato Excel)</a></td> <td width=" 11 %"><a href="antepenultimocobro.asp">Regresar '>Regresar..</a></td>

</tr> </table>

</table>



96

detalleantepenultimoexcel.asp (Detalle en formato excel) <HTML> <BODY leftmargin="0" topmargin="0"> <% If session("usuario") <> "" then

Response.ContentType = "application/vnd.ms-excel" Set cons = server.createobject("ADODB.CONNECTION") SET rs = SERVER.CREAI`EOBJECT("ADODB.RECORDSET") cons.open "DRIVER={Microsoft Access Driver (*.mdb){; DBQ=" &

SERVER.Mappath("/bdlListadoantepenultimocobro/dantepenultimo.mdb") rs.open "select * from dantepenultimo where nomdivi="' & session("division") &







<table width=" 100%" border=" 1 " height="95" align="center" bordercolor="#996666" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">


<div align="center"> <font face="Anal" size="3" color="#FFFFFF" >No.</font>

</div> </td> <td bordercolor="#FFFFCC" width="15%" height="44">

<div align="center"> <font face="Arial" size="3" color="#FFFFFF" >Nom. división </font> </div>


<div align="center"> <font face="Anal" size="3" color="#FFFFFF">Extensión

</font> </div> </td> <td bordercolor="#FFFFCC" width=" 10%" height="44">

<div align="center"> <font face="Arial" size="3" color="#FFFFFF">Fecha </font> </div>

</td> <td bordercolor="#FFFFCC" width="l3%" height="44">

97



<div align="center"> <font face="Anal" size="3" color="#FFFFFF">No. Marcado </font> </div>




<div align="center"> <font face="Arial" size-="3" color="#FFFFFF">Importe </font> </div>










<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("d2")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif' size="3 "><%=rs("d9")%></font> </div>


<div align="center"> <font face="Arial, Helvetica, sans-serif size="3 "><%=rs("ciudad")%></font></div>


98




<tr bgcolor="#FFFFFFF'> <td bordercolor="#FFFFCC" width="5%"> <font face="Arial, Helvetica, sans-

serif' size="3"><%=numero%></font> </td> <td bordercolor="#FFFFCC" width="15%">



<div align="center"> <font face="Arial, Helvetica, sans-serif size="3 "><%=rs("extension")%></font></div>




<div align="center"> <font face="Arial, Helvetica, sans-serif size="3 "><%=rs("d2")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif size="3"><%=rs("d9")%></font> </div>


<div align="center"> <font face="Anal, Helvetica, sans-serif' size="3 "><%=rs("ciudad")%></font></div>


<div align="center"> <font face="Arial, Helvetica, sans-serif size="3 "><%=rs("importe")%></font></div>



%> </table>

</div>

99

</table> <%

rs.CLOSE cons.close set cons=nothing set rs=nothing

end if Else Response.redirect "cerrarsesion.asp" End if %> </HTML>

100

7Pantalla cambiar password.

INFORME PERSONALIZADO

Reporteador Avanzado DIGESET

DIRECCIÓN GENERAL DE SERVICIOS TELEMÁTICOS

Servicio Telefónico Lunes 18 de agosto de 2003

Cambio de password

Digite su password actual |

Digite el password nuevo

Repita password nuevo

Aceptar

101

passwordchange.asp (Pantalla de presentación para cambio de password) <HTML> <SCRIPT language=JavaScript> <!-- <!-- Begin var day=""; var month=""; var myweekday="; var year=""; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday= mydate.getDate(); weekday= myweekday; year= mydate.getYear(); if (year<2000) {year = 1900+year}; if(myday == 0) day = " Domingo " else if(myday = = 1) day = " Lunes " else if(myday = = 2) day = " Martes " else if(myday = = 3) day = " Miércoles " else if(myday = = 4) day = " Jueves " else if(myday = = 5) day = " Viernes " else if(myday = = 6) day = " Sábado " if(mymonth = = 0) { month = "enero "} else if(mymonth = = 1) month = "febrero " else if(mymonth = = 2) month = "marzo " else if(mymonth = = 3) month = "abril " else if(mymonth = = 4) month = "mayo " else if(mymonth = = 5) month = "junio " else if(mymonth = = 6) month = "julio " else if(mymonth = = 7)

102

month = "agosto " else if(mymonth = = 8) month = "septiembre " else if(mymonth = = 9) month = "octubre " else if(mymonth = = 10) month = "noviembre " else if(mymonth = = 11) month = "diciembre " // End --> </SCRIPT> <BODY leftmargin="0" topmargin="0" bgcolor="#FFFFFF" background="imagenes/imagelayoutl.GIF"> <table width="103%" border="0" height="90">

<tr> <td width="47%" height="63 "> </td> <td width="15%" height="63"> </td> <td width=" 12%" height="63"> </td> <td width="26%" height="63"> </td>

</tr> <tr>

<td width="47%" height="37"><font face="Arial" size="1" color="#FFFFFF"> <script>

document.write(day+ " " + myweekday + " de "); document.write(month+" de "+year);

</script> </font></td>

<td width="15%" height="37"> </td> <td width=" 12%" height="37"> </td> <td width="26%" height="37"> </td>

</tr> <%

if session("usuario") <> "" then %> </table>

<table width=" 103 %" border="O"> <tr>

<td width="74%" bgcolor="#FFFFFF" bordercolor="#FFFFCC"> <div align="center"> <i><font face="Arial" size="2" color-`#49061315

Cambio de password</font></i> </div> </td> <td width="26%" bgcolor="#FFFFFF"> </td>

</tr> </table>

<table width=" 103%" border="O"> <form name="form1" method="post" action="passcheck.asp">

103

<td width="30%"> <tr>

<td width="18%" height="21" bgcolor="#FFFFFF"> <div align="left">

Digite su password actual </div>

</td> <td width="81 %" height="21'.' bgcolor="#FFFFFF">

<input type="password" narre="passwordactual" maxlenght=" 10" size=" 12"> </td> <td width=" 1 %" height="21 " bgcolor="#FFFFFF"> </td>

</tr> <tr>

<td width=" 18%" bgcolor="#FFFFFF"> <div align="left">Digite el password nuevo</div>

</td> <td width="8 1 %" bgcolor="#FFFFFF">

<input type="password" narre="passnew" maxlength=" 10" size=" 12"> </td>

<td width" 1 %" bgcolor="#FFFFFF"> </td> </tr> <tr>

<td width=" 18%" bgcolor="#FFFFFF" height"27"> <div align="left">Repita password nuevo</div>

</td> <td width="81 %" bgcolor="#FFFFFF" height="27">

<input type="password" narre="confirmpassnew" maxlength=" 10" size=" 12"> </td> <td width=" 1 %" bgcolor="#FFFFFF" height="27"> </td>

</tr> <tr>

<td width="18%" height="27"> </td> <td width="81 %" height="27">

<input type="image" src="imagenes/aceptar.GIF" width="68" height="38" name="image">

</td> </tr>

</form> <tr>

<td width="18%"><a href="layoutl.asp">Regresar.... </a></td> <td width="81 %"> </td> <td width=" 1 %"> </td>

</tr> <tr>

<td width=" 18%" height="202"></td> <td width="81%" height="202"> </td>

104

<td width=" 1 %" height="202"> </td> </tr> <tr>

<td width=" 18%" height=" 14"> </td> <td width="81 %" height=" 14"> </td> <td width=" 1 %" height=" 14"> </td>

</tr> </table>

<% Else Response.redirect "cerrarsesion.asp" End if

%> <p><font face="Anal" size=" 1 " color-`#490613 "> </font></p> <p><font face="Anal" size=" 1 " color-`#490613 "> </font></p> <p><font face="Acial" size="1" color-`#33663Y> </font><font face="Arial" size="1" color-“#33663”>

</font> </p> <BODY> </HTML>

105

passcheck.asp (Chequeo de password) <HTML> <BODY leftmargin="O" topmargin="O" bgcolor="#FFFFFF"> <% if session("usuario") <> "" then

set cons=server.createobject("ADODB.Connection") set rs= server.createobject("ADODB.Recordset")

cons.open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & SERVER.Mappath("/bd/acceso.mdb")

SQL ="select * from admin where log=` & session("usuario") & rs.open SQL, cons, 3, 3

encontrado=false IF NOT rs.eof THEN

if rs("pas") = request.form("passwordactual") then encontrado=true

end if END IF

If encontrado=false then Response.redirect "Passerror.asp" end if

if encontrado = true then

if request.form("passnew") = request.form("confirmpassnew") then cons.execute "UPDATE admin SET pas=’” &

request.form("passnew") & "' WHERE pas = "' & request.form("passwordactual") &""' Response.redirect "cambpass.asp"

Else Response.redirect "confpasserror.asp"

End if End if

cons.close set cons = nothing

rs.close set rs = nothing

Else Response.redirect "cerrarsesion.asp" End if

%> </BODY> </HTML>

106

Pantalla mensaje de error password actual no coincide. El password actual es incorrecto … Puede intentar de nuevo dando click en Regresar..

107

Passerror.asp (password actual incorreto) <HTML> <BODY leftmargin=”0” topmargin=”0” bgcolo=”#FFFFFF”> <%

if session(“usuarios”) <> “” then %> <table width=”100%” border=”0”>

<tr> <td>

<div align=”left”>El password actual es incorrecto ... Puede intentar de nuevo dando clic en <a ref.=”passwordchange.asp”>Regresar..</a></div>

</td> </tr>

</table> <%

Else Response.redirect “cerrarsesion.asp” End if

%> </BODY>

</HTML>

108

Pantalla mensaje de error confirmación de password nuevo no coincide. Error al comparar el password nuevo con la confirmación del mismo, teclee correctamente ambos campos de tal forma que coincidan entre sí ....Puede intentara ¡nuevo dando click en Regresar..

109

confpasserror.asp (Confirmación de password nuevo incorrecto) <HTML> <BODY leftmargin="0" topmargin="0" bgcolor="#FFFFFF"> <%

If session("usuario") <> "" then %> <table width=" 100%" border="0">

<tr> <td>

<div align="left">Error al comparar el password nuevo con la confirmación del mismo, teclee correctamente ambos campos

de tal forma que coincidan entre sí ....Puede intentar de nuevo dando click en <a href="p asswordchange. asp ">Regresar.. </a></div>

</td> </tr>

</table> <%


%> </BODY> </HTML>

110

Pantalla mensaje de cambio de password correcto. Se realizó correctamente el cambio del password .... Para regresar a la página de inicio de click en Regresar ...

111

cambpass.asp (Confirmación de cambio de password) <HTML> <BODY leftmargin="0" topmargin="O" bgcolor="#FFFFFF"> <%

If session("usuario") <> "" then %> <table width=" 100%" border="O">,

<tr> <td>

<div align="left">Se realizó correctamente el cambio del password .... Para regresar a la página de inicio de click en <a href="layoutl.asp">Regresar ...</a> </div>

</td> </tr>

</table> <%


%> </BODY> </HTML>

112

6.2 Diagramas de componentes

Figura 47: Diagrama de componentes del sistema



113

Conclusiones

La creación de algún sistema requiere de análisis minucioso, pues de ello dependerá

el funcionamiento del mismo. Una mala planeación en el análisis podría traer

consecuencias desagradables.

Para efectuar el modelado de un sistema existen muchas herramientas, sin embargo,

grandes desarrolladores han unido esfuerzos para unificar criterios, estos criterios se

hicieron convergentes desde la creación de UML (Unified Modeling Language);

inicialmente, se puede pensar que UML es un lenguaje de programación, pero no es así,

simplemente es una herramienta indispensable que permite el modelamiento de un sistema

en una descripción muy general o muy particular, según el interés o la necesidad de

detallarlo.

En este proyecto de tesis, se realizó tanto el modelamiento como la implantación del

sistema, pero, considerando que para que la implantación se aproxime al modelamiento

inicial, es necesario que quien desarrolle el sistema en algún lenguaje en particular,

entienda los conceptos de UML, sus diagramas, relaciones y elementos, ya que sin ese

conocimiento previo es poco probable una relación intrínseca del modelo y el sistema.

En UML a su vez, se puede detallar la estructura estática y el comportamiento

dinámico de un sistema permitiendo tener vistas que anteriormente no había forma de

especificarlas, ahora, es posible con estos diagramas, definir desde aspectos de interacción

de software y procesos hasta la relación existente entre el equipo periférico. Es importante

mencionar que, un sistema se modela como una colección de objetos discretos que

interactúan para realizar un trabajo que finalmente beneficia al usuario final.

114

Los diagramas en UML varían, así, no es necesario que se utilicen todos los

diagramas para modelar un sistema, aún así, entre los diagramas recomendados para

cualquier sistema -y fueron utilizados en este trabajo de tesis-, son los diagramas de clases

y diagramas de casos de uso con sus respectivas interacciones, y además, para un sistema

cliente-servidor, como es este el caso, se pueden agregar los diagramas de despliegue y/o de

componentes, dependiendo de la complejidad del mismo. Además, se utilizaron los

diagramas de actividades que aunque siendo una variante del diagrama de estados,

representan el flujo de trabajo o la ejecución de una operación.

El tiempo dedicado a la realización de los diagramas es proporcional al tamaño del

producto a realizar, así, en la realización del modelado es común, realizar diagramas y

corregir, replantear como se acometerá un sistema si es necesario, aunque conforme se

avanza en el modelado, las correcciones van siendo mínimas, hasta llegar a lo

representativo del sistema. En la implantación del software es necesario valorar qué

lenguaje se va a utilizar, dependiendo del sistema operativo y de los recursos de hardware

disponibles, actualmente, en la Universidad de Colima existen equipos periféricos lo

suficientemente robustos como para soportar el acceso simultáneo a información en tiempo

real y por la web. Debido a que ASP ha sido un lenguaje muy difundido, se puede utilizar

en diferentes versiones de sistemas operativos (Como por ejemplo: Windows NT, 2000,

XP), así también, la Universidad de Colima cuenta con este tipo de servidores, por ello, se

utilizó este lenguaje para realizar la implantación del sistema.

El objetivo de este proyecto fue cubierto, ya que se realizaron los diagramas de UML

representativos del sistema y se tomaron de base para desarrollarlo en ASP y accede a bases

de datos en formato dbf y a los archivos en excel vinculándolos con Access 2002, además,

se configuró el Internet Information Server en el sistema operativo Windows XP y se

115

montó ahí, donde actualmente está funcionando, a su vez, es posible que se cambie de

servidor, ya que se dejó corriendo en una computadora que no es de uso exclusivo para

sistemas cliente-servidor, y parar evitar, que algún proceso que no tenga nada que ver con

el sistema ocasione algún error que interfiera en el funcionamiento correcto del sistema

operativo, entonces, cambiará a otro servidor exclusivo de sistemas cliente-servidor. En

cuanto al beneficio económico, existe un ahorro, ya que el software no se tiene que adquirir

fuera de la Universidad de Colima, además, se puede tener acceso al código fuente para

hacer modificaciones futuras conforme se requiera.

116

Bibliografía

Booch Grady, et-al, "El lenguaje unificado de modelado", Addison Wesley, 1999.

Schmuller Joseph, "Aprendiendo UML en 24 horas", Prentice Hall, 2000.

OMG, manual técnico de UML versión 1.4, OMG.

modelo de diseÑo enmodelo de diseÑo en...

Documents