Formulario de Login
Figura 17: Fase de desarrollo, Formulario login Fuente: Código fuente (Anexo 3)
Elaborado por: Alex Silva
Formulario Menú
Figura 18: Fase de desarrollo, Formulario menú Fuente: Código fuente (Anexo 3)
68
Formulario Línea Base
Figura 19: Fase de desarrollo, Formulario línea base Fuente: Código fuente (Anexo 3)
69
3.6. Fase de Pruebas
Pruebas de Caja Negra
Se identificará los distintos tipos de prueba que serán ejecutadas sobre la Aplicación Colaborativa para el Consejo cantonal de protección de derechos del cantón Tisaleo, junto con las características a probar.
Requisito: Gestión de Usuarios
Características a
probar:
Administrar los datos de los usuarios y actualización de los mismos.
Activación e Inactivación de los usuarios
Tipo de prueba: Valores típicos de errores como en la
actualización del registro
Criterio: La prueba se lo realizo y se solucionó los errores
encontrados.
Requisito: Gestión de Procesos
Características a
probar:
Inserciones / Actualizaciones del POA,
Agenda, Seguimiento.
Tipo de prueba: Valores típicos de errores como la validación
de campos de la cedula de identidad
Criterio: La prueba se lo realizo y se solucionó los errores
encontrados.
Requisito: Gestión de Reportes Gráficos
Características a
probar:
Datos Obtenidos de la Línea Base
Tipo de prueba: Pruebas de consultas en la base de datos para
obtener el reporte requerido por el usuario
Criterio: La prueba se lo realizo y se solucionó los errores
encontrados. Tabla 15: Determinación de Pruebas de Caja Negra Elaborado por: Alex Silva
70
Pruebas de Caja Blanca
Se realizó pruebas unitarias, Se revisó los procedimientos de rutina, tales como: ingresos, modificaciones, eliminaciones, consultas.
Pruebas de interfaz de usuario
Objetivos: Comprobar los objetos y características de las
ventanas, tales como menús, submenús, listas desplegables, tamaño y diseño del sistema acorde a las necesidades del Consejo cantonal de protección de derechos del cantón Tisaleo.
Técnicas: Crear y modificar pruebas para cada ventana de
aplicación para verificar la navegación adecuada.
Criterios de finalización: Los diferentes menús, submenús, botones,
cuadros de ingreso, cuadros de búsqueda y cuadros de mensajes utilizados en el sistema permiten que el usuario tenga mayor visibilidad, facilidad de acceso, interactividad con las diferentes opciones.
Tabla 16: Pruebas de Caja Blanca, Pruebas de interfaz de usuario Elaborado por: Alex Silva
Pruebas de funcionalidad
Objetivos: Asegurar la funcionalidad requerida incluyendo la
navegación, procesamiento.
Técnicas: Ejecutar cada función, utilizando valores válidos,
típicos de error e incorrectos.
Criterios de finalización: Permite al usuario navegar de una manera sencilla
en las diferentes opciones del sistema.
Consideraciones especiales:
El sistema está desarrollado para ejecutarse sobre el navegador MozillaFirefox, Google Chrome. Y debe tener instalado una versión de Acrobat PDF. Tabla 17: Pruebas de Caja Blanca, Pruebas de funcionalidad
71
3.7. Implementación
Una vez instalado apache como servidor web, mysql el motor de la base de datos y php, procedemos a implementar el sistema desarrollado.
Requerimientos de Software
Características de alojamiento (hosting)
Espacio en disco ilimitado
Ancho de banda ilimitado
10 cuentas de correo electrónico
400 bases de datos MySQL
PHP 5.4, 5.5, 5.6, 7.0
MySQL 5.6
Apache 2.4 con .htaccess
Linux 3.2
Nombre de dominio secundario libre
SSL gratuito en todos los sitios web
Free Cloudflare CDN
72
3.7.1. Proceso de Implementación
Paso 1: Acceder al Cpanel del hosting
Figura 20: Interfaz del Cpanel Elaborado por: Alex Silva
Paso 2: Crear en el Cpanel la base de datos para restaurar
Figura 21: Interfaz Bases de datos MySQL en Cpanel Elaborado por: Alex Silva
73
Paso 3: Restaurar base de datos
Junto al sistema se provee un backup de la base de datos ccpdt.sql
Figura 22: Archivo de la base de datos a restaurar Elaborado por: Alex Silva
Paso 4: Importar la base de datos a restaurar
Figura 23: Interfaz de PHPMyAdmin de Cpanel Elaborado por: Alex Silva
74
Paso 5: Confirmar en PHPMyAdmin del Cpanel la base de datos restaurada
Figura 24: Interfaz de PHPMyAdmin Elaborado por: Alex Silva
Paso 6: Configurar en el sistema en la clase cls_conexion.php el código de
acceso al servidor de alojamiento
Figura 25: Código de acceso al servidor de alojamiento Elaborado por: Alex Silva
75
Paso 7: Usar el software FileZilla para la transferencia de archivos del sistema
al Hosting
Figura 26: Interfaz de FileZilla Elaborado por: Alex Silva
Paso 8: Se procede a transferir los archivos del sistema al hosting a la carpeta
.htdocs
Figura 27: Proceso de Transferencia de archivos del Sistema al hosting Elaborado por: Alex Silva
76
Paso 9: Confirmar la transferencia de archivos del sistema en el Cpanel
Figura 28: Interfaz de Administrador de Archivos del Cpanel Elaborado por: Alex Silva
Paso 10: Acceder con el dominio creado en cualquier navegador y se podrá
visualizar el Portal web y la Aplicación Colaborativa desarrollada
Figura 29: Interfaz del Portal web Elaborado por: Alex Silva
77 Figura 30: Interfaz de la Aplicación Colaborativa
78
CONCLUSIONES
Desde el punto de vista social, resultaría muy beneficioso debido a que se está resolviendo una problemática existente en el consejo cantonal de protección de derechos del cantón Tisaleo ante la necesidad de una aplicación colaborativa para obtener una mayor optimización de tiempo al momento de obtener la información para la línea base.
Con la implementación de una aplicación colaborativa se fomentó una gestión
adecuada de los procesos y la colaboración entre los miembros del Consejo cantonal de protección de derechos del cantón Tisaleo, facilitando recursos que con anterioridad se realizaba de una forma manual.
Por ser un sistema automático su tiempo de respuesta permite obtener los reportes gráficos deseados por el usuario en forma más rápida.
Al realizar la aplicación colaborativa bajo un entorno web nos da la capacidad de usarla en cualquier parte con una conexión a internet y sobre casi cualquier navegador web que soporte la tecnología usada y hasta en dispositivos móviles permitiéndonos ganar tiempo consultándolo en cualquier momento, lugar o situación.
La interface gráfica ha sido diseñada pensando en la facilidad de uso de modo que el usuario se sienta familiarizado con la aplicación colaborativa y casi no necesite el uso de manuales ya que el funcionamiento es similar en todas las instancias del programa haciéndolo intuitivo y útil.
79
RECOMENDACIONES
Establecer e iniciar el proyecto como innovadores en esta tecnología en el país para tener la mayor acogida por parte de los usuarios.
Se recomienda que en el sistema se cree un administrador que será el encargado de gestionar a los usuarios para poder mantener la seguridad y confidencialidad de información en base a la instrucción de trabajo de cada miembro del Consejo cantonal de protección de derechos del cantón Tisaleo.
Para la visualización de la aplicación colaborativa en tablets o móviles se debe utilizar dispositivos de tamaño mínimo 10” ya que el sistema está compuesto de varias entradas que requieren la mencionada resolución para su correcto funcionamiento.
Finalmente se recomienda una buena retroalimentación entre los usuarios y
el desarrollador referente a su funcionamiento pueden hacer de esta aplicación una verdadera herramienta de trabajo
BIBLIOGRAFÍA
Beati, H. (2010). PHP Creación de páginas Web dinámicas. Buenos Aires•
Bogotá • México DF • Santiago de Chile: Alfaomega.
Carrasco, J. B. (2008). Gestion de Procesos (Con Responsabilidad Social) Desde la mejora hasta el rediseño. Santiago de Chile: Evolucion.
Delgado, D. (Junio de 2008). Monografias. Obtenido de Herramientas
tecnológicas para la gestión moderna:
http://www.monografias.com/trabajos76/herramientas-tecnologicas- gestion-moderna/herramientas-tecnologicas-gestion-moderna2.shtml Egea, F. (2000). Servidores para internet con apache httpserver.
Madrid(España): EIDOS.
Eguíluz Pérez, J. (2008). Introduccion a CSS. España: Creative Commons Reconocimiento-No Comercial-Sin Obra Derivada 3.0.
Freire Silva, J. E. (08 de 2016). Repositorios Universidad Tecnica de Ambato. Obtenido de http://repo.uta.edu.ec/handle/123456789/23661
Gallego Sanchez, A. J. (2017). Bootstrap 3 Introduccion al diseño Responsive. Alicante: RA-MA.
Garcia Moreno, M. A. (1998). Groupware y gestion de documentos en la empresa. Revista General de informacion y documentacion, 11-30. Geronimo, G., & Canseco, V. (2002). Breve Introduccion a los Sistemas
Colaborativos Groupware y Workflow. Temas de Ciencia y Tecnología, 49-54.
Gilfillan, I. (2003). La biblia MySQL. Madrid: ANAYA MULTIMEDIA.
Gonzalez Garcia, R. A., & Priego Azcuaga, J. C. (2005). Ensayo sobre software colaborativo. Revista de Ciencias Basicas UJAT, 23-33.
Maldonado, J. A. (2011). Gestion de Procesos. Málaga: EUMED. Mateu, C. (2004). Desarrollo de aplicaciones web. Barcelona: UOC.
McGinn, S. (2000). Manual de Dreamweaver. San Francisco: macromedia. Murphey, R. (2013). Fundamentos de jQuery. United States: Creative Commons
Attribution-Share Alike.
Ramirez Velarded, R. V. (2009). Herramientas Web 2.0 para el Aprendizaje Colaborativo. Monterrey: CYTED.
Sommerville, I. (2005). Ingenieria de Softawre. Madrid: Pearson Educacion S.A. TISALEO, G. (2017). Gobierno Autonomo Descentralizado Municipal de Tisaleo.
Obtenido de http://tisaleo.gob.ec/
Zamora Torres, D. A. (06 de 09 de 2016). Repositorio PUCE. Obtenido de http://repositorio.puce.edu.ec/handle/22000/11162?show=full
ANEXO 1
FICHA DE OBSERVACIÓN
Observador:
ASPECTO A OBSERVAR:
Gestión de Procesos:
Mala Regular Muy Bueno a) La coordinación, comunicación y cooperación
entre los miembros de la organización para la
Obtención de la Línea Base es.
b) El control de actividades realizadas y de
seguimiento es.
c) En la obtención de la información para la Línea base el control de la existencia de demoras de tiempo es.
d) En la documentación generada la existencia de datos erróneos no controlados es.
e) En la documentación generada el control de la existencia de duplicación de la información es. f) En los Procesos a realizar se lo hace de forma manual el cual se usa grandes cantidades de papel en la documentación generada el cual el consumo de recursos físicos es.
Tabla 18: Ficha de Observación Elaborado por: Alex Silva
FICHA DE OBSERVACIÓN Fecha:
Sector: Observador:
ASPECTOS A OBSERVAR:
1. COMPORTAMIENTO DE LOS GRUPOS VULNERABLES:
SI NO
NO SE OBSERVA
Se puede evidenciar reuniones de grupos adolescentes.
Se evidencia personas discapacitadas y adultos mayores transitar solos por la vía.
Se observa mujeres con niños y mujeres solas transitar por las
calles de Tisaleo.
Se observa relaciones amorosas normales.
Se observa relaciones amorosas conflictivas.
Se identifica adolescentes libando en lugares públicos.
Se observa la vulneración de los derechos de los adolescentes y mujeres.
Se observa comportamientos inapropiados en los grupos de adolescentes.
Se evidencia agresiones físicas hacia adultos mayores.
Se puede observar discriminación a personas con discapacidad.
Los adolescentes se relacionan de manera adecuada con su grupo.
Existe respeto entre los adolescentes y adultos mayores.
Anexo 2
Guía para la entrevista
Entrevista a Abg. Alejandra Aldaz en calidad de Secretaria Ejecutiva.
1.- ¿Que es el CCPDT y cuáles son sus funciones?
2.- ¿Cuál es su cargo y que funciones cumple en el CCPDT?
3.- ¿Cómo difunde/socializa la información de consejo cantonal de protección de derechos del cantón Tisaleo?
4.- ¿Cómo realiza la planificación de sus actividades?
5.- ¿Usted realiza seguimiento de las actividades a su cargo?
6.- ¿Cuál es el proceso para presentar reportes o informes de sus actividades?
7.- ¿Describa la forma que se maneja actualmente los procesos en el consejo cantonal de protección de derechos del cantón Tisaleo?
8.- ¿Qué procesos son los que a su criterio requiere automatizar como apoyo a sus labores diarias?
Entrevista a Lic. Ana Cristina Arcos en calidad de coordinadora zona 3 CNII
1.- ¿Qué es el CNII y cuáles son sus funciones?
2.- ¿En su lugar de trabajo Cómo se gestiona las agendas de actividades de los consejos cantonales?
3.- ¿Qué información deben entregar las secretarias cantonales y con qué frecuencia?
4.- ¿Considera que los procesos que se realizan en secretaria podrían ser automatizados?
5.- ¿Considera necesario o importante mantener actualizada la información para la línea base, con qué frecuencia se debería recolectar esa información?
6.- ¿Considera útil recopilar información para la Línea base en los eventos que se organizan?
Anexo 3 Código de desarrollo Formulario Login <!DOCTYPE html> <html lang="es"> <head> <title>Inicio de sesión</title> <?php $LinksRoute="../"; include '../inc/links.php'; ?>
<link rel="stylesheet" href="../css/login.css"/>
<script src="../js/SendForm.js"></script>
<script src="../ajax/ajax.js"></script>
</head>
<body class="full-cover-background" style="background-image:url(../assets/img/font-login.jpg);">
<div class="form-container">
<p class="text-center" style="margin-top: 17px;">
<i class="zmdi zmdi-account-circle zmdi-hc-5x"></i>
</p>
<h4 class="text-center all-tittles" style="margin-bottom: 30px;">inicia sesión con tu cuenta</h4>
<form action="../process/login.php" method="post" class="form_SRCB" data-type-form="login" autocomplete="off">
<div class="group-material-login">
<input type="text" class="material-login-control" name="loginName" required maxlength="70">
<span class="highlight-login"></span>
<span class="bar-login"></span>
<label><i class="zmdi zmdi-account"></i> Nombre</label>
</div><br>
<div class="group-material-login">
<input type="password" class="material-login-control" name="loginPassword" required maxlength="70">
<span class="highlight-login"></span>
<span class="bar-login"></span>
<label><i class="zmdi zmdi-lock"></i> Contraseña</label>
</div>
<div class="group-material">
<option value="" disabled="" selected="">Tipo de usuario</option>
<option value="Student">Secretaria ejecutiva</option>
<option value="Teacher">Encuestador</option>
<option value="Personal">Personal administrativo</option>
<option value="Admin">Administrador</option>
</select>
</div>
<button class="btn-login" type="submit">Ingresar al sistema <i class="zmdi zmdi-arrow- right"></i></button>
</form>
</div>
<div class="msjFormSend hidden"></div>
</body> </html> Formulario Menú <!DOCTYPE html> <html lang="es"> <head> <title>Institución</title> <?php session_start(); $LinksRoute="../"; include '../inc/links.php'; ?> </head> <body> <?php include '../library/configServer.php'; include '../library/consulSQL.php'; include '../process/SecurityAdmin.php'; include '../inc/NavLateral.php'; ?>
<div class="content-page-container full-reset custom-scroll-containers">
<?php
include '../inc/NavUserInfo.php';
?>
<div class="container">
<h1 class="all-tittles">Accesos Directos<small>Home</small></h1>
</div>
</div>
<div class="container-fluid">
<div class="container-flat-form">
<div class="title-flt-form title-flat-blue">Linea Base</div>
<form method="" enctype="multipart/form-data" >
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 text-justify">
<div class="group-material"><span class="highlight"></span>
<span class="bar"></span>
<button type="button" value="Enviar" class="btn btn-primary" style="margin-right: 1px;" ><i class="zmdi zmdi-male zmdi-hc-fw tile-icon"></i><a href="../formularios/admininstitution.php" style="color:#fff; font-size:16px;text-decoration:none;"> Adolescentes</a></button>
<button type="button" value="Enviar" class="btn btn-primary" style="margin-right: 1px;" ><i class="zmdi zmdi-accounts-alt zmdi-hc-fw tile-icon"></i><a href="../formularios/AdultoMayor.php" style="color:#fff; font-size:16px;text-decoration:none;"> Adulto Mayor</a></button>
<button type="button" value="Enviar" class="btn btn-primary" style="margin-right: 1px;" ><i class="zmdi zmdi-airline-seat-recline-normal tile-icon"></i><a href="../formularios/Personacondiscapacidad.php" style="color:#fff; font-size:16px;text- decoration:none;"> Personas con discapacidad</a></button>
<button type="button" value="Enviar" class="btn btn-primary" style="margin-right: 1px;" ><i class="zmdi zmdi-female tile-icon"></i><a href="../formularios/Mujeres.php" style="color:#fff; font- size:16px;text-decoration:none;">&bsp; Mujeres</a></button> </div> </div> </div> </form> </div> </div> <div class="container-fluid"> <div class="container-flat-form">
<div class="title-flat-form title-flat-blue">Gestion de Procesos</div>
<form method="" enctype="multipart/form-data" >
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 text-justify">
<div class="group-material"><span class="highlight"></span>
<span class="bar"></span>
<button type="button" value="Enviar" class="btn btn-success" style="margin-right: 1px;" ><i class="zmdi zmdi-file-text tile-icon"></i><a href="../formularios/GPOA_TITULO.php" style="color:#fff; font- size:16px;text-decoration:none;"> POA</a></button>
<button type="button" value="Enviar" class="btn btn-success" style="margin-right: 1px;" ><i class="zmdi zmdi-folder-person tile-icon"></i><a href="../formularios/GINFORME_TITULO.php" style="color:#fff; font-size:16px;text- decoration:none;"> AGENDA</a></button>
<button type="button" value="Enviar" class="btn btn-success" style="margin-right: 1px;" ><i class="zmdi zmdi-search-in-file tile-icon"></i><a href="../formularios/GSEGUIMIENTO.php" style="color:#fff; font-size:16px;text- decoration:none;"> SEGUIMIENTO</a></button> </div> </div> </div> </form> </div> </div> <div class="container-fluid"> <div class="container-flat-form">
<div class="title-flat-form title-flat-blue">Administracion del PORTAL WEB</div>
<form method="" enctype="multipart/form-data" >
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 text-justify">
<div class="group-material"><span class="highlight"></span>
<span class="bar"></span>
<button type="button" value="Enviar" class="btn btn-info" style="margin-right: 1px;" ><i class="zmdi zmdi-view-carousel tile-icon"></i><a href="../formularios/sliderslist.php" style="color:#fff; font- size:16px;text-decoration:none;"> Imegenes Slider</a></button>
<button type="button" value="Enviar" class="btn btn-primary" style="margin-right: 1px;" ><i class="zmdi zmdi-edit tile-icon"></i><a href="../formularios/Admin_PAGWEB_DI_lainstitucion.php" style="color:#fff; font-size:16px;text- decoration:none;"> Datos e Informacion</a></button>
<button type="button" value="Enviar" class="btn btn-success btn-