Seguimiento de egresados y graduados

INSTITUTO TECNOLÓGICO SUPERIOR “NUESTRA SEÑORA DEL ROSARIO”

TECNOLOGÍA EN ANÁLISIS DE SISTEMAS

TEMA: ANÁLISIS, DISEÑO Y DESARROLLO DE UNA APLICACIÓN WEB PARA EL REGISTRO Y CONTROL DEL PROCESO DE

SEGUIMIENTO DE EGRESADOS Y GRADUADOS DEL INSTITUTO TECNOLÓGICO SUPERIOR “NUESTRA SEÑORA

DEL ROSARIO”.

AUTOR: Byron Alejandro Guanuchi Reyes

TUTOR: Luis Tillaguango

AÑO LECTIVO: 2015-2016

CERTIFICACIÓN

Tlgo. LUIS TILLAGUANGO DOCENTE DE LA CARRERA DE ANÁLISIS DE

SISTEMAS DEL INSTITUTO TECNOLÓGICO SUPERIOR “NUESTRA SEÑORA

DEL ROSARIO”.

CERTIFICO:

Que el presente trabajo investigativo, previo a optar el grado de Tecnóloga en

Análisis de Sistemas, titulado “ANÁLISIS, DISEÑO Y DESARROLLO DE UNA

APLICACIÓN WEB PARA EL REGISTRO Y CONTROL DEL PROCESO DE

SEGUIMIENTO DE EGRESADOS Y GRADUADOS DEL INSTITUTO

TECNOLÓGICO SUPERIOR “NUESTRA SEÑORA DEL ROSARIO”, elaborado por

la estudiante Byron Alejandro Guanuchi Reyes, ha sido dirigido y revisado en

todo el proceso; cumpliendo con las disposiciones legales vigentes del Instituto

Tecnológico Superior “Nuestra Señora del Rosario”, por lo cual autorizo su

presentación, sustentación y defensa ante la respectiva aprobación de ciclo.

Catamayo, Julio del 2016

Tlgo. LUIS TILLAGUANGO

TUTOR DEL PROYECTO

AUTORÍA

Yo, Byron Alejandro Guanuchi Reyes con C.I.: 1105877763 certifico que el

proyecto titulado: “ANÁLISIS, DISEÑO Y DESARROLLO DE UNA APLICACIÓN

WEB PARA EL REGISTRO Y CONTROL DEL PROCESO DE SEGUIMIENTO DE

EGRESADOS Y GRADUADOS DEL INSTITUTO TECNOLÓGICO SUPERIOR

“NUESTRA SEÑORA DEL ROSARIO”, el cual presento como requisito para optar

por la aprobación de sexto ciclo en Análisis de Sistemas del Instituto

Tecnológico Superior "Nuestra Señora del Rosario”, es el producto de mi ardua

labor investigativa.

Así mismo, doy fe de este trabajo, es original e inédito, el contenido, efectos

legales y académicos que se desprenden del mismo son exclusividad del autor.

Byron Alejandro Guanuchi Reyes

C.I.: 1105877763

AUTOR

RESUMEN

ANÁLISIS, DISEÑO Y DESARROLLO DE UNA APLICACIÓN WEB PARA EL REGISTRO Y CONTROL DEL PROCESO DE SEGUIMIENTO

DE EGRESADOS Y GRADUADOS DEL INSTITUTO TECNOLÓGICO SUPERIOR “NUESTRA SEÑORA DEL ROSARIO”.

El presente trabajo, está dirigido a todos los egresados y graduados del Instituto

“Nuestra Señora del Rosario” pero sobre todo a las personas que necesitan de

un profesional de alta calidad que deseen saber una información completa sobre

profesionales bien instruidos para futuros contratos.

Este sistema también tiene el propósito de mejorar la calidad del Instituto y

sobre todo obtener la acreditación como carrera que exigen las entidades

gubernamentales.

El propósito fundamental con esta herramienta es tener una base de datos de

los egresados y graduados y el administrador podrá obtener una información

eficiente.

El usuario que ingrese al sistema no perderá mucho tiempo ingresando sus

datos los cuales no son repetitivos.

El sistema es amigable y accesible para los usuarios que requiere ingresar ya sea

administrador o los egresados y graduados de la institución.

Este aporte para el Instituto ayudará en la toma de decisiones de acuerdo a los

resultados que el sistema proporcione a los administradores y autoridades.

INTRODUCCIÓN

El Instituto Tecnolo gico Superior “Nuestra Sen ora del Rosario”, propone el

proyecto de implementacio n de una Aplicacio n Web, el cual sera presentado

como requisito para aprobar la materia de programacio n en la culminacio n del

presente ciclo, para lo cual la aplicacio n que se realizara es el Registro y Control

de Proceso de Seguimiento de Egresados y Graduados de la Especialidad de

Ana lisis de Sistemas y Contabilidad y Auditorí a.

Se pretende que todas las facultades tengan informacio n de los egresados y

graduados, modalidad de titulacio n entre otros, adema s que, aprovechando que

el sistema estara desarrollado en entorno web la Institucio n podra disponer de

la informacio n de cada egresado y graduado la misma que podra ser actualizada

por el Administrador y Secretaria desde cualquier punto de acceso a internet,

tambie n los egresados y graduados podra n solicitar o seleccionar la informacio n

que deseen.

El presente proyecto ha sido propuesto a inicio de ciclo del presente año y

permite el registro de datos personales, datos académicos, datos del trabajo

actual, y el envío de sugerencias del egresado y graduado.

CAPÍTULO I

1.1 PLANTEAMIENTO DEL PROBLEMA

En el Instituto Tecnológico Superior “Nuestra Señora del Rosario”, no

cuenta con datos exactos de alumnos egresados y graduados por año ya

que posee un Sistema de Escritorio.

Esto produce una gran dificultad ya que genera una separación entre

egresados, graduados y la posibilidad de tener acceso a fuentes de trabajo

proyectos, seminarios y pasantías para los alumnos en el Instituto.

Esto genera el desconocimiento de parte de la Institución sobre el

impacto que produce las carreras entre la demanda en la sociedad, si el

egresado y graduado responde a las exigencias de la vida laboral.

En lo que se refiere al control de egresados y graduados de las distintas

carreras del Instituto de Análisis de Sistemas y Contabilidad y Auditoría

se realiza de manera local, esto dificulta la actualización de la

información, además produce una pérdida de tiempo para los alumnos y

administrativos ya que este sistema es de escritorio.

1.1.1 FORMULACIÓN DEL PROBLEMA

La institución a pesar de su prestigio en la educación superior aun no

dispone con una aplicación web que le permita cumplir con una de

las exigencias del Ministerio de Educación para la acreditación de

cada una de las carreras del Instituto, la cual es dar seguimiento a los

alumnos egresados y graduados.

La institución cuenta con un sistema el cual ingresa los datos de los

egresados y graduados, pero a pesar de tener este sistema no se

obtuvo ninguna información importante que le permita a la

institución cumplir con una de las exigencias del Ministerio de

Educación ya que esta es de escritorio. Por lo tanto este proyecto está

dirigido a cumplir con dicha demanda.

1.2 OBJETIVOS DE INVESTIGACIÓN.

1.2.1 OBJETIVO GENERAL

Desarrollar una aplicación para el Instituto Tecnológico Superior

“Nuestra Señora del Rosario” que permita el seguimiento de alumnos

egresados y graduados, para almacenar los datos de una forma clara,

ordenada, exacta y precisa, con la finalidad de tener conocimiento del

desempleo laborar de dicho alumnos.

1.2.2 OBJETIVOS ESPECÍFICOS

Identificar los requerimientos necesarios para establecer un control de

los alumnos egresados y graduados.

Desarrollar el sistema de seguimiento de egresados y graduados para el

Instituto Tecnológico Superior “Nuestra Señora del Rosario”.

Realizar un Aplicación web para dicho sistema.

Búsqueda rápida y eficaz de egresados y graduados de la institución,

para generación de empleo, pasantías y vinculación con la sociedad.

1.3 REQUERIMIENTOS

1.3.1 REQUERIMIENTOS FUNCIONALES

Código Descripción de los Requerimientos Categoría

Rqf01 Registro y control de Cuentas de Usuario Evidente Rqf02

Registro y control de datos informativos de los egresados y graduados (Nombre, Apellido, Numero de Cedula, Teléfono, Celular, Sexo País, Cuidad, Estado Civil, Dirección, Email).

Evidente

Rqf03

Registro y control de datos del trabajo actual de los egresados y graduados (Nombre de la institución, Teléfono, Dirección, País, Cuidad, Fecha de ingreso, Dirección, Cargo que desempeña).

Evidente

Rqf04

Actualizar datos del trabajo actual de los egresados y graduados (Nombre de la institución, Teléfono, Dirección, País, Cuidad, Fecha de ingreso, Dirección, Cargo que desempeña).

Evidente

Rqf05

Actualización de datos informativos de los egresados y graduados (Nombre, Apellido, Numero de Cedula, Teléfono, Fecha Nacimiento, Celular, Sexo País, Provincia, Cuidad, Estado Civil, Dirección, Email).

Evidente

Rqf06

Registro y control de datos académicos de los egresados y graduados (Tema de anteproyecto, Fecha de graduación, Fecha de Egresar, Tema de tesis,).

Evidente

Rqf07 Base de datos actualizada de datos de los egresados y graduados. Evidente

Rqf08

El egresado y graduado solicita Información a la institución.- Sobre cursos que ofrece la institución Cursos Online, Cursos Presenciales, Pasantías, Convenios, Proyectos, el Administrador de sistema le enviara esta información a su correo electrónico

Evidente

Rqf09 Presenta reportes del estado actual de los egresados, graduados directores de proyecto de grado, usuarios.

Evidente

Rqf10 Presenta reportes de los datos académicos de los egresados y graduados.

Evidente

Rqf11 Presenta reportes de los datos de trabajo actual de los egresados y graduados, sugerencias, solicitudes de información.

Evidente

Rqf12

El egresado y graduado envía sugerencias a las autoridades de la institución.- (Coordinación, Secretaria, Rectorado). Para ayudar a mejorar en la malla curricular del institutito, crear nuevas materias o eliminarlas para ayudar y reforzar sus conocimientos a los estudiantes.

Evidente

Rqf14

Registro y control de datos informativos del director del proyecto de grado (Nombre, Apellido, Numero de Cedula, Teléfono, Celular, Sexo País, Cuidad, Estado Civil, Dirección, Email).

Evidente

Rqf15 Administra el acceso al sistema para cada usuario. Evidente

1.3.2 REQUERIMIENTOS NO FUNCIONALES

Seguridad: La información del sistema está protegida por claves de

acceso y que solo permite ingresar a los usuarios a distinta áreas de

acuerdo al privilegio que posea el mismo.

Portabilidad: Esta aplicación puede ser manejada en distintos

ordenadores que esté instalada por que tendrá un servidor que se

almacenara toda la información.

Mantenibilidad: El administrador del sistema puede modificar o

actualizar cualquier aspecto de la información cuando se requiera para

así garantizar su mantenimiento.

Usabilidad: La aplicación es fácil de comprender y manejar por el

usuario, ya que ofrece un entorno de sus pantallas amigable.

Rendimiento: El Tiempo de respuesta de la aplicación dependerá de las

características del hardware donde está siendo ejecutada.

1.4 DIAGRAMA DE ACTIVIDADES:

FIGURA 1: Diagrama de Actividades Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”

Responsable: Byron Guanuchi

1.5 DIAGRAMA DE DOMINIO:

FIGURA 2: Diagrama de Dominio Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


1.6 DIAGRAMA DE CLASES:

FIGURA 3: Diagrama de Clases Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


CAPÍTULO II

2.1 MODELO

2.1.1 LENGUAJE UNIFICADO DE MODELO (UML)

Es un lenguaje de modelado visual que se usa para visualizar, especificar,

construir, documentar artefactos de un sistema de software. Captura

decisiones y conocimientos sobre los sistemas que se deben construir. Se

utiliza para entender, diseñar, hojear configurar mantener y controlar la

información pretende unificar la experiencia pasada sobre técnicas de

modelado.

UML capta la información sobre la estructura estática y el

comportamiento dinámico de un sistema, un sistema se modela como

una colección de objetos discretos que interactúan para realizar un

trabajo que finalmente beneficia a un usuario externo, la estructura

estática define los tipos de objetos importantes en el sistema y para su

implementación, así como las relaciones entre los objetos. (Rumbaugh, J.

& Jacobson I. & Booch, B. 2000).

Este lenguaje nos indica cómo expresar o leer los modelos, pero no dice

cómo crearlos. Esto último es el objetivo de las metodologías de

desarrollo, entre sus funciones podemos encontrar:

Visualizar: UML permite expresar de una forma gráfica un

sistema de forma que otro lo puede entender.

Especificar: UML permite especificar cuáles son las

características de un sistema antes de su construcción.

Documentar: Los propios elementos gráficos sirven como

documentación del sistema desarrollado que pueden servir para

su futura revisión.

Un modelo UML está compuesto por tres clases de bloques de

construcción:

Elementos: Los elementos son abstracciones de cosas reales o

ficticias (objetos, acciones, etc.).

Relaciones: relacionan los elementos entre sí.

Diagramas: Son colecciones de elementos con sus relaciones.

(Rumbaugh, J.& Jacobson I. & Booch, B. 2000)

2.1.1 DIAGRAMAS (UML)

Un diagrama es la representación gráfica de un conjunto de elementos

con sus relaciones, un diagrama ofrece una vista del sistema a modelar.

Para poder representar correctamente un sistema, UML ofrece 9 tipos de

diagramas con los cuales se pueden modelar sistemas entre los más

utilizados tenemos:

Diagrama de Casos de Uso para modelar los procesos del

sistema.

Diagrama de Clases para modelar la estructura estática de las

clases en el sistema.

Diagrama de Objetos para modelar la estructura estática de los

objetos en el sistema.

Diagramas de Componentes para modelar componentes.

Diagrama de Implementación para modelar la distribución del

sistema.

Diagramas de Actividad para modelar el comportamiento de los

casos de uso, objetos u operaciones.

Diagrama de Estado para modelar el comportamiento de los

objetos en el sistema.

Diagrama de Secuencia para modelar el paso de mensajes entre

objetos.(Orallo, 2006)

2.2 DISEÑO PRELIMINAR

El diseño preliminar, permite al usuario final tener una visión de cómo la

aplicación se va a visualizar en los prototipos se condensan las ideas del

usuario antes de obtener un resultado final, mezclados con la experiencia

que posee el programador, opiniones y consejos para desarrollar un sistema

de calidad, que cumpla las expectativas de lo que se espera obtener.

Pantalla de Login

CERRAR X

LOGIN

Usuario:

Contraseña:

FIGURA 4: Pantalla de Logeo Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


Pantalla Principal (Administrador)

Pantalla Registrar Estudiante

2.3 METODOLOGÍA

2.3.1.1 METODOLOGÍA EN CASCADA

Inicio Registra Estudiante Sugerencias Administrar Reportes

Nombre:

Cedula:

Sexo:

Fecha de Nacimiento

Email:

Apellido:

Edad:

Dirección:

Teléfono: Provincia:

Celular: Especialidad:

Contraseña

:

País:

Tipo:

Estado Civil:

FIGURA 6: Pantalla de Registro Estudiante Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


Inicio Registra Estudiante Sugerencias Administrar Reportes

SISTEMA DE SEGUIMIENTO

DE EGRESADOS Y

GRADUADOS

FIGURA 5: Pantalla Principal Administrador Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


También conocido como modelo clásico, modelo tradicional o modelo

lineal secuencial. Él método de la cascada es considerado como el

enfoque clásico para el ciclo de vida del desarrollo de sistemas, se

puede decir que es un método puro que implica un desarrollo

rígido. Está es una secuencia de actividades(o etapas) que consisten

en el análisis de requerimientos, él diseño, la implementación, la

integración y las pruebas.

El análisis de requerimientos consiste en reunir las

necesidades del producto y casi siempre su salida es texto.

El diseño describe la estructura interna del producto y suele

representarse con diagramas y texto.

La implementación significa programación. Producto de esta

etapa es el código en cualquier nivel, incluido el producido por

sistemas de generación automática.

La integración es el proceso de integración es el proceso de

ensamblar las partes para completar el producto

2.4 ARQUITECTURA

2.4.1 ARQUITECTURA EN 3 NIVELES

En la arquitectura en 3 niveles, existe un nivel intermediario. Esto

significa que la arquitectura generalmente está compartida por:

1) Un cliente, es decir, el equipo que solicita los recursos, equipado con

una interfaz de usuario (generalmente un navegador Web) para la

presentación 2) El servidor de aplicaciones (también denominado software

intermedio), cuya tarea es proporcionar los recursos solicitados,

pero que requiere de otro servidor para hacerlo. 3) El servidor de datos que proporciona al servidor de aplicaciones los

datos que requiere.

http://es.ccm.net/contents/pc/pc.php3

http://es.ccm.net/contents/www/navigateur.php3

En la arquitectura en 3 niveles, las aplicaciones al nivel del servidor son

descentralizadas de uno a otro, es decir, cada servidor se especializa en una

determinada tarea, (por ejemplo: servidor web/servidor de bases de datos).

La arquitectura en 3 niveles permite:

Un mayor grado de flexibilidad

Mayor seguridad, ya que la seguridad se puede definir

independientemente para cada servicio y en cada nivel

Mejor rendimiento, ya que las tareas se comparten entre servidores

2.5 ESTILO

2.5.1 MODELO VISTA CONTROLADOR(MVC)

Es un estilo de arquitectura de software que separa los datos de una

aplicación, la interfaz de usuario, y la lógica de control en tres componentes

distintos. El estilo de llamada y retorno MVC, se ve frecuentemente en

aplicaciones web, donde la vista es la página HTML y el código que provee de

datos dinámicos a la página. El modelo es el Sistema de Gestión de Base de

Datos y la Lógica de negocio, y el controlador es el responsable de recibir los

eventos de entrada desde la vista.

2.5.2 DESCRIPCIÓN

El Modelo es el objeto que representa los datos del programa.

Maneja los datos y controla todas sus transformaciones. El Modelo

no tiene conocimiento específico de los Controladores o de las

Vistas, ni siquiera contiene referencias a ellos. Es el propio

sistema el que tiene encomendada la responsabilidad de

mantener enlaces entre el Modelo y sus Vistas, y notificar a las

Vistas cuando cambia el Modelo.

http://www.ecured.cu/Arquitectura_de_software

http://www.ecured.cu/Desarrollo_Web

http://www.ecured.cu/HTML

http://www.ecured.cu/index.php?title=Sistema_de_Gesti%C3%B3n_de_Base_de_Datos&action=edit&redlink=1

http://www.ecured.cu/index.php?title=Sistema_de_Gesti%C3%B3n_de_Base_de_Datos&action=edit&redlink=1

La Vista es el objeto que maneja la presentación visual de los

datos representados por el Modelo. Genera una representación

visual del Modelo y muestra los datos al usuario. Interactúa con el

Modelo a través de una referencia al propio Modelo.

El Controlador es el objeto que proporciona significado a las

órdenes del usuario, actuando sobre los datos representados por

el Modelo. Cuando se realiza algún cambio, entra en acción, bien

sea por cambios en la información del Modelo o por alteraciones

de la Vista. Interactúa con el Modelo a través de una referencia al

propio Modelo.

2.5.3 VENTAJAS DE UTILIZAR MVC

Una separación total entre lógica de negocio y presentación. A

esto se le pueden aplicar opciones como el multilenguaje, distintos

diseños de presentación, etc. sin alterar la lógica de negocio. La

separación de capas como presentación, lógica de negocio, acceso

a datos es fundamental para el desarrollo de arquitecturas

consistentes, reutilizables y más fácilmente mantenibles, lo que al

final resulta en un ahorro de tiempo en desarrollo en posteriores

proyectos.

Al existir la separación de vistas, controladores y modelos es más

sencillo realizar labores de mejora como:

Agregar nuevas vistas.

Agregar nuevas formas de recolectar las órdenes del usuario

(interpretar sus modelos mentales).

Modificar los objetos de negocios bien sea para mejorar el

performance o para migrar a otra tecnología.

Las labores de mantenimiento también se simplifican y se reduce

el tiempo necesario para ellas. Las correcciones solo se deben

hacer en un solo lugar y no en varios como sucedería si

tuviésemos una mezcla de presentación e implementación de la

lógica del negocio.

Las vistas también son susceptibles de modificación sin necesidad

de provocar que todo el sistema se paralice. Adicionalmente el

patrón MVC propende a la especialización de cada rol del equipo,

por tanto en cada liberación de una nueva versión se verán los

resultados.

CAPÍTULO III

3 DESARROLLO DEL PROYECTO

3.1 DIAGRAMAS Y DESCRIPCIÓN DE CASOS DE USO

ud Jerarquías de Usuario

Usuario

Administrador SecretariaGraduado

FIGURA 7: Jerarquía de Usuarios Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


FIGURA 8: Diagrama de Casos de Usos Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


3.2 HERRAMIENTAS

El presente trabajo se utilizara las siguientes herramientas:

NetBenns

Es un entorno de desarrollo integrado libre, hecho

principalmente para el lenguaje de programación java el cual

me servirá para la creación de la aplicación web.

Navegador

Es el programa el cual me permitirá navegar por internet u

otra red informática de comunicación el cual será un

intérprete entre mi sistema y el servidor.

Apache Tomcat

Es un contenedor web con soporte de servlets y JSPs. Incluye

el compilador Jasper, que compila JSPs convirtiéndoles en

servlets.

Mysql

Es un sistema de gestión de base de datos relacional

desarrollado bajo licencia dual GPL/Licencia comercial,

considerada como la base de datos open source más popular

del mundo.

Enterprise Architect

Abarca el ciclo de vida completo del desarrollo de software,

con herramientas que pueden proveerle una estructura

competitiva en modelado de negocio, diseño de software,

ingeniería de sistemas, arquitectura de empresas, gestión de

requisitos, testing y mucho más.

3.3 DIAGRAMA DE ROBUSTEZ

FIGURA 9: Diagrama Robustez: Iniciar Sesión Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


FIGURA 10: Diagrama Robustez: Registrar Egresado Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


3.4 DIAGRAMA DE SECUENCIAS

FIGURA 11: Diagrama de Secuencia Iniciar Sesión Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


FIGURA 12: Diagrama de Secuencia Registrar Egresado Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


3.5 DIAGRAMA DE ESTADOS

Administrar Egresados/Graduados

Nro. Prueba Modulo Descripción

001 Registrar, Modifica cuentas de Usuario

Administra/ Ingresa, Modifica cuentas Usuarios

002 Registrar, Modifica datos personales del Egresado/Graduado

Administra/ Ingresa, Modifica Egresados/Graduados

003 Registrar, Modifica datos personales del Director Proyecto de Grado

Administra/ Ingresa, Modifica Director Proyecto de Grado

004 Registrar, Modifica datos Trabajo actual del Egresado/Graduado

Administra/ Ingresa, Modifica Datos Trabajo de los Egresados/Graduados

005 Registrar, Modifica datos Académicos del Egresado/Graduado

Administra/ Ingresa, Modifica Datos Académicos de los Egresados/Graduados

006 Sugerencias Sugieren cambios a la institución

007

Reportes

Imprimen reportes de los egresados, graduados, directores proyecto de grado, datos de trabajo actual del egresado y graduado, datos académicos del egresado y graduado, usuarios, sugerencias, solicitudes de información.

Registrar

Consultar

Modificar

Cambiar Estado

Crear Cuentas de Usuario

Registrar

Consultar

Modificar

FIGURA 13: Diagrama de Estado Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


3.6 DIAGRAMA DE PAQUETES

FIGURA 14: Diagrama de Paquetes Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


3.7 DIAGRAMA DE DISTRIBUCIÓN

FIGURA 15: Diagrama de Distribución Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


CAPÍTULO IV

4.1 PROTOTIPADO

El prototipo de interfaces gráficas de usuario, permite al usuario final tener una

visión de cómo la aplicación se va a visualizar en los prototipos se condensan

las ideas del usuario antes de obtener un resultado final, mezclados con la

experiencia que posee el programador, opiniones y consejos para desarrollar un

sistema de calidad, que cumpla las expectativas de lo que se espera obtener

Pantalla de Login

Esta pantalla damos a conocer como es el ingreso al sistema lo cual

requiere un usuario y password.

FIGURA 16: Pantalla Login Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


Pantalla Administrador En esta pantalla se mostrara el perfil del administrador el cual tendrá

todas las opciones que presenta el sistema.

FIGURA 17: Pantalla Administrador Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


Pantalla Registro Estudiante

En la siguiente pantalla se muestra la opción de registro de los

estudiantes.

FIGURA 18: Pantalla Registro Estudiante Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


Pantalla Secretaria

En la siguiente pantalla se muestra el perfil de le secretaria la cual podrá

registrar, modificar, enviar reportes a los estudiantes

(Egresados/Graduados)

FIGURA 19: Pantalla Secretaria Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


4.2 CODIGO

Dentro del desarrollo de software, una pieza clave es la generación de

código, que debe ser uniforme y claro para facilitar el entendimiento y

a su vez para ahorrar tiempo a futuras modificaciones o expansiones

del software.

Pantalla Login

<%-- 2 Document : login

3 Created on : 15/08/2016, 17:58:35

4 Author : usuario

5 --%>

6

7 <%@page import="javax.swing.JOptionPane"%>

8 <%@page import="Modelo.Consulta"%>

9 <%@page session="true"%>

10 <%@page contentType="text/html" pageEncoding="UTF-8"%>

11 <!DOCTYPE html>

12 <html>

13 <head>

14 <meta http-equiv="Content-Type" content="text/html;

charset=UTF-8">

15 <title>ITR</title>

16 <meta charset="UTF-8">

17 <link rel="stylesheet" href="css/estilos1.css"/>

18 <script type="text/javascript">

19 function desplegar(_valor) {

20 document.getElementById("bgventana").style.visibility =

_valor;

21 }

22 </script>


charset=UTF-8"/>

24 <meta name="description" content="Expand, contract, animate

forms with jQuery wihtout leaving the page" />

25 <meta name="keywords" content="expand, form, css3, jquery,

animate, width, height, adapt, unobtrusive javascript"/>

26 <link rel="shortcut icon" href="../favicon.ico" type="image/x-

icon"/>

27 <link rel="stylesheet" type="text/css" href="css/stylez.css" />

28 <script src="js/cufon-yui.js" type="text/javascript"></script>

29 <script src="js/ChunkFive_400.font.js"

type="text/javascript"></script>


31 Cufon.replace('h1', {textShadow: '1px 1px #fff'});

32 Cufon.replace('h2', {textShadow: '1px 1px #fff'});

33 Cufon.replace('h3', {textShadow: '1px 1px #000'});

34 Cufon.replace('.back');

35 </script>

36 </head>

37 <body>

38

39 <img src="images/inici.png"

style="width:1288px;height:648px;">

40 <div id="wrapper">

41 <div id="bgventana">

42 <div class="wrapper">

43 <div class="content">

44 <div id="form_wrapper" class="form_wrapper">

45 <div class ="cerrar"><a

href="javascript:desplegar('hidden');">CERRAR &nbsp</a></div>

46 <form class="login active">

47 <h3>Login</h3>

48 <div>

49 <label>Usuario:</label>

50 <input type="text" name="txtusuario">

51 <span class="error">This is an error</span>

52 </div>

53 <div>

54 <label>Password: <a

href="forgot_password.html" rel="forgot_password" class="forgot

linkform">Ha olvidado su password?</a></label>

55 <input type="password" name="txtcontra">


57 </div>

58 <div class="bottom">

59 <input type="submit" name="btningresar"

value="Login">

60 <div class="clear"></div>

61 </div>

62 </form>

63 <form class="forgot_password">

64 <h3>Recuperar la contraseña</h3>

65 <div>

66 <label>Nombre de usuario o correo

electrónico:</label>

67 <input type="text" />


69 </div>

70 <div class="bottom">

71 <input type="submit" value="Enviar">

72 <a href="index.html" rel="login"

class="linkform">Regresar</a>

73 </div>

74 </form>

75

76 </div>

77 </div>

78 </div>

79 

80 <script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></sc

ript>


82 $(function () {

83 //the form wrapper (includes all forms)

84 var $form_wrapper = $('#form_wrapper'),

85 //the current form is the one with class active

86 $currentForm = $form_wrapper.children('form.active'),

87 //the change form links

88 $linkform = $form_wrapper.find('.linkform');

89

90 //get width and height of each form and store them for later

91 $form_wrapper.children('form').each(function (i) {

92 var $theForm = $(this);

93 //solve the inline display none problem when using fadeIn

fadeOut

94 if (!$theForm.hasClass('active'))

95 $theForm.hide();

96 $theForm.data({

97 width: $theForm.width(),

98 height: $theForm.height()

99 });

100 });

101 setWrapperWidth();

102 $linkform.bind('click', function (e) {

103 var $link = $(this);

104 var target = $link.attr('rel');

105 $currentForm.fadeOut(400, function () {

106 //remove class active from current form

107 $currentForm.removeClass('active');

108 //new current form

109 $currentForm = $form_wrapper.children('form.' +

target);

110 //animate the wrapper

111 $form_wrapper.stop()

112 .animate({

113 width: $currentForm.data('width') + 'px',

114 height: $currentForm.data('height') + 'px'

115 }, 500, function () {

116 //new form gets class active

117 $currentForm.addClass('active');

118 //show the new form

119 $currentForm.fadeIn(400);

120 });

121 });

122 e.preventDefault();

123 });

124

125 function setWrapperWidth() {

126 $form_wrapper.css({

127 width: $currentForm.data('width') + 'px',

128 height: $currentForm.data('height') + 'px'

129 });

130 }

131 });

132 </script>

133 </div>

134 </div>

135 <%

136 Consulta op = new Consulta();

137 if (request.getParameter("btningresar") != null) {

138 String usuario =

request.getParameter("txtusuario");

139 String pass = request.getParameter("txtcontra");

140 HttpSession sesion = request.getSession();

141 switch (op.InicioSesion(usuario, pass)) {

142 case 1:

143 sesion.setAttribute("user", usuario);

144 sesion.setAttribute("nivel", "1");

145 response.sendRedirect("Admin.jsp");

146 break;

147 case 2:



150 response.sendRedirect("Secretaria.jsp");

151 break;

152 case 3:



155 response.sendRedirect("Estudiante.jsp");

156 break;

157

158 default:

159 JOptionPane.showMessageDialog(null,

"Usuario no existe contraseña invalida...!");

160 break;

161 }

162 if (request.getParameter("cerrar") != null) {

163 sesion.invalidate();

164 }

165

166 }

167 %>

168

169 <form method="post" action="javascript:desplegar('visible');">

170 <input type=image src="images/seguir.png" name="ventana"

type="submit" id="boton" class="boton" style="position: absolute; left:

19%; top: 91%;width:120px;height:50px;">

171 </form>

172 </body>

173 </html

Pantalla Administrador

<%-- 2 Document : Admin

3 Created on : 21/07/2016, 13:46:11

4 Author : byrt_s

5 --%>

6 <%@page session="true"%>


8 <!DOCTYPE html>

9 <html>

10 <head>


charset=UTF-8">

12 <title>JSP Page</title>

13 <link rel="stylesheet" href="css/estilos2.css">

14 </head>

15 <body>

16 <div class="contenedor">

17 <header>

18 <div class ="log">

19 <img src="images/in.jpg" alt="">

20 </div>

21

22 <div class="logo">

23

24

25 <a href="#"><h3>Seguimiento de Egresados</h3></a>

26 </div>

27

28 <nav>

29 <a href="Admin.jsp">Inicio</a>

30 <a href="Registro.jsp">Administrar</a>

31 <a href="Sugerencias.jsp">Segerencias</a>

32 <a href="Reportes.jsp">Reportes</a>

33 </nav>

34 </header>

35 <%


37 String usu;

38 String nivel;

39 String pass;

40 if (sesion.getAttribute("user") != null &&

sesion.getAttribute("nivel") != null) {

41 usu = sesion.getAttribute("user").toString();

42 nivel = sesion.getAttribute("nivel").toString();

43 %>

44

45 <section class="main">

46 <label><h1>BIENVENIDO <%=usu%> </h1></label>

47

48 <DIV ALIGN=right>

49 <%

50 out.print("<a href='login.jsp?cerrar=true'><h5>Cerrar

Sesion</h5></a>");

51 } else {

52

out.print("<script>location.replace('login.jsp');</script>");

53 }

54 %>

55 </DIV>

56 <article>

57 <center><img src="images/egresados.png"/></center>

58 </article>

59 </section>

60 <footer>

61 <section class="links">

62 <a href="#">Inicio</a>

63

64 <a href="#">Blog</a>

65 <a href="#">Proyectos</a>

66 <a href="#">Contacto</a>

67 </section>

68 <div class="social">

69 <a href="#">FB</a>

70 <a href="#">TW</a>

71 </div>

72 </footer>

73 </div>

74 </body>

75 </html>

Pantalla Registro Estudiante

<%-- 2 Document : Registrar_Estudiante

3 Created on : 22/07/2016, 0:47:33

4 Author : byrt_s

5 --%>

6

7 <%@page import="javax.swing.JOptionPane"%>

8 <%@page import="Modelo.Consulta"%>

9 <%@page import="Controlador.usuario"%>


11 <!DOCTYPE html>

12 <html>

13 <head>


charset=UTF-8">



17 </head>

18 <body>


20 <header>



23 </div>



26 </div>

27 <nav>


29 <a href="Registro.jsp">Administrar</a>



32

33 </nav>

34 </header>

35 <aside>

36 <div class="menu">

37 <ul>

38 <a href="Registrar_Estudiante.jsp">Registrar

Estudiante</a>

39 <a href="Matriz_Estudiante.jsp">Matriz Estudiante</a>

40 <a href="#">Datos Inf.</a>

41 <a href="#">Crear Cuenta</a>

42 <a href="#">Registrar Docente</a>

43 </ul>

44 </aside>


46 <article1>

47 <div class="degradado" >

48 <form name="emp" method="post"

action="Registrar_Estudiante.jsp">

49 <center><h2 class="titulo">Registro de

Estudiante</h2><br><br>

50 <dl>

51 <table class="table" border="0" width="85%"

hight="30%">

52 <tr style="height:55px">

53 <td class="verde">Nombre:</td>

54 <td><i>* <input type="text"

name="Nombre" placeholder="Ingrese su Nombre" style="text-

transform:uppercase;width:200px; height:25px"/></i></td>

55 </tr>

56


58 <td class="verde">Apellidos:</td>


name="Apellido" placeholder="Ingresa su Apellido" style="text-


60 </tr>


62 <td class="verde">Cédula: </td>

63 <td><i>* <input type="text" name

="Cedula" placeholder="Ingrese su Cedula" style="text-


64 </tr>


66 <td class="verde">Correo: </td>

67 <td><i>* <input type="text" name="Email"

placeholder="Ingresa su Email" style="text-


68 </tr>


70 <td class="verde">Telefono: </td>


name="Telefono" placeholder="Ingresa su Telefono" style="text-


72 </tr>


74 <td class="verde">Fecha de Nacimineto:

</td>

75 <td><input type="text"

name="FechaNacimiento" placeholder="Ingresa su Telefono" style="text-

transform:uppercase;width:200px; height:25px"/></td>

76 </tr>


78 <td class="verde">Sexo: </td>

79 <td>

80 * <select name="Sexo" type="txt"

style='width:200px; height:25px'>

81 <option

value=0>Selecciones</option>

82 <option

value=Masculino>Masculino</option>

83 <option

value=Femenino>Femenino</option>

84 </select>

85 </td>

86 </tr>


88 <td class="verde">Especialidad: </td>

89 <td>

90 * <select name="Especialidad" type="txt"


91 <option


92 <option value="Analisis de

Sistemas">Analisis de Sistemas</option>

93 <option value="Contabilidad y

Auditoria">Contabilidad y Auditoria</option>

94 </select>

95 </td>

96 </tr>


98 <td class="verde">Estado Civil: </td>

99 <td>

100 * <select name="EstadoCivil" type="txt"


101 <option


102 <option

value=Soltero>Soltero</option>

103 <option

value=Casado>Casado</option>

104 </select>

105 </td>

106 </tr>


108 <td class="verde">Ciudad:</td>


name="Ciudad" placeholder="Ingrese su Ciudad" style="text-


110 </tr>


112 <td class="verde">Dirección:</td>


name="Direccion" placeholder="Ingrese su Direccion" style="text-


114 </tr>


116 <td class="verde">Estado: </td>

117 <td>

118 * <select name="Estado" type="txt"

style='width:200px; height:25px' >

119 <option


120 <option

value=Egresado>Egresado</option>

121 <option

value=Graduado>Graduado</option>

122 </select>

123 </td>

124 </tr>

125 <tr>

126 <td></td>

127 <td></td>

128 </tr>

129 </table>

130 <center>

131 <br><br><input type="submit"

value="Guardar" style='width:100px; height:25px'/>

132 </center>

133 </dl>

134

135

136 </center>

137 </form></div>

138 <%

139

140 if (request.getParameter("Nombre") != null &&

request.getParameter("Apellido") != null &&

request.getParameter("Cedula") != null && request.getParameter("Email")

!= null && request.getParameter("Telefono") != null &&

request.getParameter("FechaNacimiento") != null &&

request.getParameter("Sexo") != null &&

request.getParameter("Especialidad") != null &&

request.getParameter("EstadoCivil") != null &&

request.getParameter("Ciudad") != null &&

request.getParameter("Direccion") != null &&

request.getParameter("Estado") != null) {

141

142 //Inscritos ins=new Inscritos(0,

request.getParameter("Nombres"),request.getParameter("Apellidos"),reque

st.getParameter("Correo"),request.getParameter("Fecha_Nacimiento"),requ

est.getParameter("Cedula"),request.getParameter("Direccion"),request.getP

arameter("Telefono"),request.getParameter("Taller"),request.getParameter(

"Forma_Pago"));

143 usuario tb = new usuario(0,

request.getParameter("Nombre"), request.getParameter("Apellido"),

Integer.parseInt(request.getParameter("Cedula")),

request.getParameter("Email"),

Integer.parseInt(request.getParameter("Telefono")),

Integer.parseInt(request.getParameter("FechaNacimiento")),

request.getParameter("Sexo"), request.getParameter("Especialidad"),

request.getParameter("EstadoCivil"), request.getParameter("Ciudad"),

request.getParameter("Direccion"), request.getParameter("Estado"));

144 boolean respuesta =

Consulta.insertarEstudiante(tb);

145 if (respuesta != false) {

146 JOptionPane.showMessageDialog(null, "Los

datos se an guardado exitosamente...!!");

147 } else {

148 JOptionPane.showMessageDialog(null, "Los

datos no se an guardado...!!");

149 }

150 }

151 %>

152 </article1>

153 </section>

154 <footer>






160 </section>


162 <a href="#">FB</a>

163 <a href="#">TW</a>

164 </div>

165 </footer>

166 </div>

167 </body>

168 </html>

Pantalla Secretaria

<%-- 2 Document : Secretaria

3 Created on : 15/08/2016, 18:50:02

4 Author : usuario

5 --%>

6


8 <!DOCTYPE html>

9 <html>

10 <head>


charset=UTF-8">



14 </head>

15 <body>


17 <header>



20 </div>

21


23

24


26 </div>

27

28 <nav>


30 <a href="Registro1.jsp">Administrar</a>



33 </nav>

34 </header>

35 <%


37 String usu;

38 String nivel;

39 String pass;

40 if (sesion.getAttribute("user") != null &&

sesion.getAttribute("nivel") != null) {

41 usu = sesion.getAttribute("user").toString();

42 nivel = sesion.getAttribute("nivel").toString();

43 %>

44


46 <label><h1>BIENVENIDO <%=usu%> </h1></label>

47

48 <DIV ALIGN=right>

49 <%

50 out.print("<a href='login.jsp?cerrar=true'><h5>Cerrar

Sesion</h5></a>");

51 } else {

52

out.print("<script>location.replace('login.jsp');</script>");

53 }

54 %>

55 </DIV>

56 <article>

57 <center><img src="images/egresados.png"/></center>

58 </article>

59 </section>

60 <footer>



63




67 </section>


69 <a href="#">FB</a>

70 <a href="#">TW</a>

71 </div>

72 </footer>

73 </div>

74 </body>

75 </html>

4.3 PRUEBA

Al culminar por completo el sistema se realizó las pruebas del

aplicativo que la metodología utilizada demanda, con la finalidad de

buscar posibles falencias que pudieran existir con la utilización del

software, dichas pruebas fueron satisfactorias verificando así la

eficiencia del mismo.

4.3.1 Prueba de Funcionamiento (Administrador/Secretaria)

Nro. Prueba Modulo Descripción Resultados Observaciones

001 Registrar, Modifica cuentas de Usuario Administra/ Ingresa, Modifica cuentas Usuarios

Factible

002 Registrar, Modifica datos personales del Egresado/Graduado


Factible

003 Registrar, Modifica datos personales del Director Proyecto de Grado


Factible

004 Registrar, Modifica datos Trabajo actual del Egresado/Graduado


Factible

005 Registrar, Modifica datos Académicos del Egresado/Graduado


Factible

006 Sugerencias Sugieren cambios de información a los Egresados/Graduados

Factible

007

Reportes

Imprimen reportes de los egresados, graduados, directores proyecto de grado, datos de trabajo actual del egresado y graduado, datos académicos del egresado y graduado, usuarios, sugerencias, solicitudes de información.

Factible

4.3.1 Prueba de Funcionamiento (Egresados/Graduados)

Nro. Prueba Modulo Descripción Resultados Observaciones

001 Visualiza, Modifica datos personales del Egresado/Graduado


Factible

002 Visualiza, Modifica datos personales del Director Proyecto de Grado


Factible

003 Visualiza, Modifica datos Trabajo actual del Egresado/Graduado


Factible

004 Visualiza, Modifica datos Académicos del Egresado/Graduado


Factible

005 Sugerencias Sugieren cambios a la institución Factible

006

Reportes

Imprimen reportes de los egresados, graduados, directores proyecto de grado, datos de trabajo actual del egresado y graduado, datos académicos del egresado y graduado

Factible

4.4 MANUALES

4.4.1 DESCRIPCIÓN DE BOTONES.

Botón Iniciar Sesion: Selo utiliza para que permita el ingreso al sistema, una vez que se ayan llenado los campos de usuario y contraseña.

Botón Guardar: Se lo utiliza para guardar datos de

todos los registrosc (egresado, director de proyecto de

grado, datos trabajo, datos academicos).

Botón Buscar: Se lo utiliza para buscar en la base de

datos según el tipo de busqueda que quiera realizar se

encuentran en todos los formularios.

Boton Enviar: Se lo utiliza para enviar sugerencias

desde el perfil del egresado.

4.4.2 MANUAL DEL ADMINISTRADOR.

Descripción: Esta interfaz permite ingresar su usuario y clave para

poder ingresar al sistema, si son correctos ingres a la pantalla

principal, y si los datos son mostrara un mensaje de error y tendrá

que volver a ingresar sus datos.

PANTALLA PRINCIPAL DEL ADMINISTRADOR

Descripción: En esta interfaz tendrá un menú con las siguientes

opciones: Inicio, Administrar, Sugerencias, Registrar, Reportes.

PANTALLA DE REGISTRO

Descripción: La interfaz de registro de datos del egresado permite

registrar los datos académicos, datos de trabajo y también los datos

del director de proyectos. Una vez llenados todos los campos se

guardaran directamente en la base de datos

PANTALLA MATRIZ DEL ESTUDIANTE

Descripción: La presente interfaz permitirá que el Administrador pueda

verificar los datos registrados, y también le permite buscar por parámetros y

modificar cualquier dato.

1.1. DOCUMENTACIÓN:

FIGURA 20: Java Doc Paquetes Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


CONTROLADOR CONEXION:

CONTROLADOR:

FIGURA 21: Conexión Java Doc Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


FIGURA 22: Java Doc Controlador Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


PAQUETE MODELO:

PAQUETE REPORTES:

FIGURA 23: Java Doc Paquetes Modelo. Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


FIGURA 23: Java Doc Paquetes Reportes. Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”


1.2. CONCLUSIONES:

La siguiente Aplicación Web permitirá mantener un contacto

permanente con los Egresados de la Institución, ya que al

encontrarse en Internet permitirá actualizar su información en

cualquier lugar que se encuentren, ya se dentro del País o en el

exterior.

La importancia del Seguimiento de Egresados es para estar

enterado si los estudiantes una vez terminada su carrera

ejercen un trabajo dentro del campo en el que se han

graduado.

Del mismo modo le permitirá a la Institución elevar su nivel de

calidad ya que se tendrá conocimiento del lugar de trabajo en

donde se encuentran laborando los egresados y graduados

dependiente del área han la que se hayan graduado.

1.3. RECOMENDACIONES:

Como primera recomendación es muy necesario leer el

manual de usuario para así tener conocimiento de cómo

utilizar el sistema.

En la aplicación web los egresados podrán enviar

sugerencias al administrador o secretaria para solicitar

información de algo o para actualizar sus datos, por lo que

tiene que enviar cosas concretas a solicitar.

1.4. BIBLIOGRAFÍA O WEB GRAFIA:

Ble, Carlos. (2013). Modelo en Cascada. Recuperado de:

http://librosweb.es/libro/tdd/capitulo_1/modelo_en_cascada.htm

l {30/06/2015}

Mora, J. (2011). Arquitectura de Software para Aplicaciones

Web. Recuperado de:

http://delta.cs.cinvestav.mx/~pmalvarez/tesis-tahuiton.pdf

{30/06/2016}.

Dominguez, J. (2009). Aprenda Reportes con NetçBeans y

iReport. Recuperado de:

http://es.slideshare.net/ajdgeniz/aprenda-reportes-con-

netbeans-y-ireport {03/08/2016}

Garcia, A. (2014). Aplicación de la Metodología ICONIX para el

desarrollo de software implementación y publicación de un

sitio web Recuperado de: http://www.laccei.org/LACCEI2014-

Guayaquil/RefereedPapers/RP246.pdf {30/06/2016}

Torres, M. (2015). Proyecto de Seguimiento de Egresados.

Recuperado de:

http://www.aragon.es/estaticos/GobiernoAragon/ACPUA/Docu

mentos/Areas_Prospectiva/150323_proyecto_SE_SUA.pdf

{10/05/2015}

Seguimiento de egresados y graduados

Engineering

Transcript of Seguimiento de egresados y graduados