UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6....

205
I UNIVERSIDAD DE GUAYAQUIL FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD BUCARAM ELMHALIN. PROYECTO DE TITULACIÓN Previa a la obtención del Título de: INGENIERO EN SISTEMAS COMPUTACIONALES AUTORES: JÁCOME CHÓEZ WILLIAM JESSIE PIHUAVE PARRALES HINGRI LISSETHE TUTORA: ING. MARIA QUINZO BRAVO, MSc. GUAYAQUIL ECUADOR 2017

Transcript of UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6....

Page 1: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

I

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS

COMPUTACIONALES

DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL

BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”

.

PROYECTO DE TITULACIÓN

Previa a la obtención del Título de:

INGENIERO EN SISTEMAS COMPUTACIONALES

AUTORES:

JÁCOME CHÓEZ WILLIAM JESSIE

PIHUAVE PARRALES HINGRI LISSETHE

TUTORA:

ING. MARIA QUINZO BRAVO, MSc.

GUAYAQUIL – ECUADOR

2017

Page 2: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

II

REPOSITORIO NACIONAL EN CIENCIAS Y TECNOLOGÍA

FICHA DE REGISTRO DE TESIS

TÍTULO: “Desarrollo de un sistema web para apoyar la gestión de docentes y estudiantes de educación general básica superior del Colegio Fiscal “ASSAD BUCARAM ELMHALIN”.

REVISORES:

INSTITUCIÓN: Universidad de Guayaquil FACULTAD: Ciencias Matemáticas y Físicas

CARRERA: Ingeniería en Sistemas Computacionales

FECHA DE ACTUAL: N° DE PÁGS:

ÁREA TEMÁTICA: Estrategias educativas integradoras e inclusivas. - Software

PALABRAS CLAVES: Calificaciones, cuestionarios, curso, educación, estudiantes, pruebas, rendimiento, sistema web.

RESUMEN: El desarrollo de sistema web diseñado para mejorar el rendimiento académico del

estudiante.

N° DE REGISTRO (en base de datos): N° DE CLASIFICACIÓN: Nº

DIRECCIÓN URL (tesis en la web):

ADJUNTO PDF X SI

NO

CONTACTO CON AUTOR: Jácome Chóez William. Pihuave Parrales Hingri

Teléfono: 0959922462 0982277753

E-mail: [email protected] [email protected]

CONTACTO DE LA INSTITUCIÓN Nombre: Ab. Juan Chávez Atocha.

Teléfono: 04-2307729

Page 3: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

III

APROBACIÓN DEL TUTOR

En mi calidad de Tutor del trabajo de titulación, “DESARROLLO DE UN SISTEMA

WEB PARA APOYAR LA GESTIÓN DE DOCENTES Y ESTUDIANTES DE

EDUCACIÓN GENERAL BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”, elaborado por el Sr. JACOME CHÓEZ WILLIAM

JESSIE y Srta. PIHUAVE PARRALES HINGRI LISSETHE, alumnos no titulados

de la Carrera de Ingeniería en Sistemas Computacionales, Facultad de Ciencias

Matemáticas y Físicas de la Universidad de Guayaquil, previo a la obtención del

Título de Ingeniero en Sistemas, me permito declarar que luego de haber

orientado, estudiado y revisado, la apruebo en todas sus partes.

Atentamente

_____________________________

Ing. María Quinzo B. MSc.

TUTOR

Page 4: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

IV

DEDICATORIA

A Dios, a mi familia quienes me

han apoyado en la educación,

depositando su confianza, a mis

profesores por su dedicación y por

compartir sus conocimientos

conmigo para hacer de mí un

profesional.

William Jácome Chóez

A Dios, mis padres, mi familia, por

su apoyo para seguir creciendo y

formándome cada día, también a

mi novio Wladimir Proaño

Sánchez, mis Hermanas que

estuvieron presentes dándome

ánimos y fuerzas en el desarrollo

de esta tesis.

Hingri Pihuave Parrales

Page 5: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

V

AGRADECIMIENTO

Expreso mis agradecimientos a

mis padres y demás familiares

que estuvieron conmigo

dándome apoyo y fuerza para

lograr mi objetivo.

William Jácome Chóez

Expreso mis agradecimientos a

mis padres, mis familiares, mi

novio, a mis profesores, amigos

y a todas aquellas personas que

estuvieron conmigo dándome

apoyo y de manera especial a

mi Tutora Ing. María Quinzo y al

Ing. Jorge Zambrano.

Hingri Pihuave Parrales

Page 6: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

VI

TRIBUNAL PROYECTO DE TITULACIÓN

________________________________ ______________________________ Ing. Eduardo Santos Baquerizo, MSc. Ing. Abel Alarcón Salvatierra, MGs. DECANO DE LA FACULTAD DIRECTOR DE LA CARRERA CIENCIAS MATEMÁTICAS Y DE INGENIERÍA EN SISTEMAS

FÍSICAS COMPUTACIONALES ______________________________ ______________________________ Ing. María Quinzo Bravo, MSc Ing. Jorge Zambrano Santana MGs

DIRECTORA DEL PROYECTO PROFESOR REVISOR DEL AREA DE TITULACION

___________________________ Ab. Juan Chávez Atocha, Esp.

SECRETARIO

Page 7: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

VII

DECLARACIÓN EXPRESA

“La responsabilidad del contenido de este

Proyecto de Titulación, me corresponden

exclusivamente; y el patrimonio intelectual de la

misma a la UNIVERSIDAD DE GUAYAQUIL”

Jácome Chóez William Jessie.

Pihuave Parrales Hingri Lissethe.

Page 8: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

VIII

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES

DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL

BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”

Proyecto de Titulación que se presenta como requisito para optar por el título de

INGENIERO EN SISTEMAS COMPUTACIONALES

Autor: William Jessie Jácome Chóez

C.I. 093067011-2

Autor: Hingri Lissethe Pihuave Parrales

C.I. 131246503-0

Tutora: Ing. María Quinzo Bravo, MSc.

Guayaquil, Diciembre del 2017

Page 9: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

IX

CERTIFICADO DE ACEPTACIÓN DEL TUTOR

En mi calidad de Tutor del Proyecto de Titulación “DESARROLLO DE UN

SISTEMA WEB APOYAR LA GESTIÓN DE DOCENTES Y ESTUDIANTES DE

EDUCACIÓN GENERAL BÁSICA SUPERIOR DEL COLEGIO FÍSCAL ASSAD

BUCARAM ELMHALIN”, nombrado por el Consejo Directivo de la Facultad de

Ciencias Matemáticas y Físicas de la Universidad de Guayaquil.

CERTIFICO:

Que he analizado el Proyecto de Titulación presentado por las

estudiantes WILLIAM JESSIE JÁCOME CHÓEZ, HINGRI LISSETHE PIHUAVE

PARRALES, como requisito previo para optar por el título de Ingeniero en

Ingeniero en Sistemas Computacionales cuyo tema es:

DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL

BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”

.

Considero aprobado el trabajo en su totalidad.

Presentado por:

Jácome Chóez William Jessie C.I. 093067011-2

Pihuave Parrales Hingri Lissethe C.I. 131246503-0

Tutora: Ing. María Quinzo Bravo, MSc.

Guayaquil, Diciembre de 2017

Page 10: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

X

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS CARRERA DE INGENIERÍA EN SISTEMAS

COMPUTACIONALES

Autorización para Publicación de Proyecto de Titulación en Formato Digital

1. Identificación del Proyecto de Titulación

Nombre Alumno: William Jessie Jácome Chóez

Dirección: Coop. Dignidad Popular Guasmo Norte Mz. 4429, S.32 PB Teléfono: 0959922462 E-mail: [email protected]

Nombre Alumno: Hingri Lissethe Pihuave Parrales Dirección: Coop. Floresta 3 Mz. K Solar 15 Teléfono: 0982277753 E-mail: [email protected]

Facultad: Ciencias Matemáticas y Físicas Carrera: Ingeniería en Sistemas Computacionales Proyecto de titulación al que opta: Ingeniera en Sistemas Computacionales Profesor tutor: Ing. María Quinzo Bravo, MSc.

Título del Proyecto de Titulación: Desarrollo de un sistema web para apoyar la gestión de docentes y estudiantes de educación general básica superior del colegio fiscal “Assad Bucaram Elmhalin”.

Tema del Proyecto de Titulación: Gestión académica para educación general básica superior.

Page 11: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XI

2. Autorización de Publicación de Versión Electrónica del Proyecto de Titulación A través de este medio autorizo a la Biblioteca de la Universidad de Guayaquil y a la Facultad de Ciencias Matemáticas y Físicas a publicar la versión electrónica de este Proyecto de titulación.

Publicación electrónica:

Inmediata X Después de 1 año

Firma Alumno: ___________________________

William Jessie Jácome Chóez Autor del Proyecto de Titulación

___________________________

Hingri Lissethe Pihuave Parrales Autor del Proyecto de Titulación

3. Forma de envío: El texto del proyecto de titulación debe ser enviado en formato Word, como archivo .Doc. O .RTF y. Puf para PC. Las imágenes que la acompañen pueden ser: .gif, .jpg o .TIFF.

DVDROM X CDROM

Page 12: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XII

ÍNDICE GENERAL

APROBACIÓN DEL TUTOR III

DEDICATORIA IV

AGRADECIMIENTO V

TRIBUNAL PROYECTO DE TITULACIÓN VI

DECLARACIÓN EXPRESA VII

CERTIFICADO DE ACEPTACIÓN DEL TUTOR IX

ÍNDICE GENERAL XII

ABREVIATURAS XV

ÍNDICE DE CUADROS XVI

ÍNDICE DE GRÁFICOS XVII

RESUMEN XIX

ABSTRACT XX

INTRODUCCIÓN 1

CAPÍTULO I 3

PLANTEAMIENTO DEL PROBLEMA 3

Ubicación del problema en un contexto 3

Situación conflicto nudos críticos 4

Causas y consecuencias del problema 5

Delimitación del problema 5

Formulación del problema 6

Evaluación del problema 6

OBJETIVOS 8

Objetivo general 8

Objetivos específicos 8

ALCANCES DEL PROBLEMA 8

JUSTIFICACIÓN E IMPORTANCIA 9

METODOLOGÍA DEL PROYECTO 9

Metodología de desarrollo 9

Supuestos y Restricciones 11

Plan de Calidad 12

CAPÍTULO II 14

MARCO TEÓRICO 14

ANTECEDENTES DEL ESTUDIO 14

Fundamentación teórica 15

SCRUM 16

Breve historia de la arquitectura de software 18

Definición de la arquitectura de software 19

Arquitectura modelo vista controlador (mvc) 20

APLICACIÓN WEB 23

Page 13: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XIII

APACHE 24

PHP 25

HTML 26

BASE DE DATOS 27

MYSQL 28

XAMPP 30

FRAMEWORK 31

YII FRAMEWORK 33

SISTEMA OPERATIVO 35

WINDOWS 7 36

LINUX 38

JAVASCRIPT 39

JQUERY 40

DATATABLES 41

CSS 42

BOOTSTRAP 43

HIGHCHARTS 44

FUNDAMENTACIÓN LEGAL 46

HIPÓTESIS 50

VARIABLES DE LA INVESTIGACIÓN 50

DEFINICIONES CONCEPTUALES 51

CAPITULO III 52

METODOLOGÍA DE LA INVESTIGACIÓN 52

Propuesta tecnológica 52

Análisis de Factibilidad 52

Factibilidad Operacional 53

Factibilidad Técnica 53

Factibilidad Legal 54

Factibilidad Económica 55

ETAPAS DE LA METODOLOGÍA DEL PROYECTO 56

Sprint 0 - Análisis de requerimientos 57

Sprint 1 - Diseño de la aplicación 57

Sprint 2 - Login y Menú principal 70

Sprint 3 - Programación del Módulo Seguridad 71

Sprint 4 - Programación del Módulo Académico 74

Sprint 5 - Programación del Módulo Cuestionario 78

Sprint 6 - Configuración del Servidor 80

Sprint 7 - Pruebas del Sistema 80

ENTREGABLES DE PROYECTO 80

CRITERIOS DE VALIDACIÓN DE LA PROPUESTA 81

Plan de Pruebas 82

Page 14: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XIV

Población y Muestra 83

Población 83

Muestra 83

Instrumentos de recolección de datos 85

Tipos de cuestionarios de encuesta 85

Tipos de preguntas en un cuestionario de encuesta 87

Reglas para la formulación de preguntas en un cuestionario 87

MUESTRA DE LA ENCUESTA 87

Procesamiento y Análisis de Datos 88

CAPITULO IV 99

CRITERIOS DE ACEPTACIÓN DEL PRODUCTO 99

CONCLUSIONES 101

RECOMENDACIONES 102

BIBLIOGRAFÍA 103

ANEXOS 105

Anexo 1.- Cronograma de actividades 105

Anexo 2.- Modelo Entidad Relación 108

Anexo 3.- Diagrama de proceso del coordinador académico 109

Anexo 4.- Diagrama de proceso de Registro de Curso 110

Anexo 5.- Diagrama de proceso de Registro de Asignaturas 111

Anexo 6.- Diagrama de proceso de registro de estudiantes 112

Anexo 7.- Diagrama de proceso de Registro de Docente 113

Anexo 8.- Diagrama de proceso del docente 114

Anexo 9.- Diagrama de proceso del estudiante 115

Anexo 10.- Encuesta 116

Anexo 11.- Entrevista a Docentes 119

Anexo 12.- Fotos de Entrevista a Docentes 120

Anexo 13.- Fotos de encuesta a estudiantes 122

Anexo 14.- Carta de Aceptación 124

Anexo 15.- Entrevista a rectora 125

Page 15: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XV

ABREVIATURAS

UG Universidad de Guayaquil

Ing. Ingeniero

MSc. Master of Science

www World Wide Web (red mundial)

Http Protocolo de transferencia de hipertexto

MVC Modelo Vista Controlador

SMS Servicio de mensajes cortos

AS Arquitectura de software

SO Sistema Operativo

API Interfaz de programación de aplicaciones

CSS Cascading style Sheets

HTML Hyper Text Markup Language

JS JavaScript

Sass Syntactically Awesome Stylesheets

TXT Textfile – Archivo de texto

XML Extensible Markup Language

UCP Unidad Central de Proceso

DOM Document Object Model

CATI Computer Aided telephone interview

SQL Structured Query Language

Yii Yes it is

DAO Database Access Objects

RBAC Role-based Access control

WSDL Web Services Description Language

Page 16: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XVI

ÍNDICE DE CUADROS

Cuadro 1 Causas y Consecuencias del Problema ........................................................ 5

Cuadro 2 Delimitación del Problema .............................................................................. 5

Cuadro 3 Factibilidad Técnica. ...................................................................................... 53

Cuadro 4 Hardware para Desarrollo .............................................................................. 54

Cuadro 5 Software para Desarrollo ............................................................................... 54

Cuadro 6 Costo de Recursos Humanos ....................................................................... 55

Cuadro 7 Costo de Recursos Tecnológicos ................................................................ 55

Cuadro 8 Costo de Recursos Hardware ....................................................................... 55

Cuadro 9 Costo de Recursos Materiales y Viáticos .................................................... 56

Cuadro 10 Flujo de General de Pago ............................................................................ 56

Cuadro 11 Casos de Uso realizados ............................................................................. 58

Cuadro 12 Login .............................................................................................................. 59

Cuadro 13 Usuario Olvida Contraseña ......................................................................... 60

Cuadro 14 Perfil Usuario ................................................................................................ 61

Cuadro 15 Restablecer contraseña ............................................................................... 62

Cuadro 16 Asignar Opción al perfil ............................................................................... 63

Cuadro 17 Registro de Usuario ..................................................................................... 64

Cuadro 18 Asignar Asignaturas al Curso ..................................................................... 65

Cuadro 19 Creación de Cuestionario ........................................................................... 66

Cuadro 20 Notificaciones de Resolución Cuestionario .............................................. 67

Cuadro 21 Resolución de Cuestionario ........................................................................ 68

Cuadro 22 Resolución de Cuestionario ........................................................................ 82

Cuadro 23 Población de la Investigación ..................................................................... 84

Cuadro 24 Tamaño de Muestra ...................................................................................... 85

Cuadro 25 Pregunta 1 de la encuesta .......................................................................... 91

Cuadro 26 Pregunta 2 de la encuesta ........................................................................... 92

Cuadro 27 Pregunta 3 de la encuesta ........................................................................... 93

Cuadro 28 Pregunta 4 de la encuesta ........................................................................... 94

Cuadro 29 Pregunta 5 de la encuesta ........................................................................... 95

Cuadro 30 Pregunta 6 de la encuesta ........................................................................... 96

Cuadro 31 Pregunta 7 de la encuesta ........................................................................... 97

Cuadro 32 Pregunta 8 de la encuesta ........................................................................... 98

Cuadro 33 Criterios de aceptación ................................................................................ 99

Cuadro 34 Matriz de Criterios de Evaluación ............................................................. 100

Page 17: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XVII

ÍNDICE DE GRÁFICOS

Gráfico 1 SCRUM ............................................................................................................ 10

Gráfico 2 MODELO INCREMENTAL .............................................................................. 11

Gráfico 3 SCRUM ............................................................................................................ 16

Gráfico 4 ARQUITECTURA DE SOFTWARE ................................................................. 19

Gráfico 5 MVC .................................................................................................................. 20

Gráfico 6 Ciclo de vida MVC .......................................................................................... 22

Gráfico 7 Esquema básico de una aplicación web ...................................................... 23

Gráfico 8 Arquitectura de las aplicaciones web: todo en un servidor ...................... 24

Gráfico 9 Logo Apache ................................................................................................... 24

Gráfico 10 Logo PHP ...................................................................................................... 25

Gráfico 11 Gráfico N° 9 Logo HTML ............................................................................ 26

Gráfico 12 Base de Datos ............................................................................................... 27

Gráfico 13 Logo MySQL ................................................................................................. 28

Gráfico 14 Logo Xampp .................................................................................................. 30

Gráfico 15 Framework .................................................................................................... 31

Gráfico 16 Yii Framework ............................................................................................... 33

Gráfico 17 Windows 7 ..................................................................................................... 36

Gráfico 18 Linux .............................................................................................................. 38

Gráfico 19 JavaScript .................................................................................................... 39

Gráfico 20 Jquery ............................................................................................................ 40

Gráfico 21 Datatables ..................................................................................................... 41

Gráfico 22 CSS ................................................................................................................ 42

Gráfico 23 BOOTSTRAP ................................................................................................. 43

Gráfico 24 HIGHCHARTS ................................................................................................ 44

Gráfico 25 Login .............................................................................................................. 59

Gráfico 26 Usuario olvida Contraseña .......................................................................... 60

Gráfico 27 Perfil usuario ................................................................................................. 61

Gráfico 28 Restablecer Contraseña .............................................................................. 62

Gráfico 29 Asignar Opción al perfil ............................................................................... 63

Gráfico 30 Registro de Usuario ..................................................................................... 64

Gráfico 31 Asignar asignaturas al curso ...................................................................... 65

Gráfico 32 Creación de Cuestionarios .......................................................................... 66

Gráfico 33 Notificaciones de Resolución Cuestionario .............................................. 67

Gráfico 34 Resolución de Cuestionario ........................................................................ 68

Gráfico 35 Diagrama de base de datos ......................................................................... 69

Page 18: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XVIII

Gráfico 36 Login .............................................................................................................. 70

Gráfico 37 Menú Principal .............................................................................................. 71

Gráfico 38 Opción Usuarios ........................................................................................... 72

Gráfico 39 Modificación Usuarios ................................................................................. 72

Gráfico 40 Consulta de opciones asignadas al perfil ................................................. 73

Gráfico 41 Bandeja de usuarios activos ....................................................................... 74

Gráfico 42 Restablecer Contraseña .............................................................................. 74

Gráfico 43 Listado de Cursos ........................................................................................ 75

Gráfico 44 Registro de Curso ........................................................................................ 75

Gráfico 45 Listado de Asignaturas ................................................................................ 76

Gráfico 46 Opción Asignatura ....................................................................................... 76

Gráfico 47 Listado de cursos con asignaturas ............................................................ 77

Gráfico 48 Opción selección de asignaturas a los cursos ........................................ 77

Gráfico 49 Opción docentes .......................................................................................... 78

Gráfico 50 Opción elaborar cuestionario ..................................................................... 79

Gráfico 51 Opción crear preguntas del cuestionario .................................................. 79

Gráfico 52 Pregunta 1 de la encuesta. .......................................................................... 91

Gráfico 53 Pregunta 2 de la encuesta. .......................................................................... 92

Gráfico 54 Pregunta 3 de la encuesta. .......................................................................... 93

Gráfico 55 Pregunta 4 de la encuesta. .......................................................................... 94

Gráfico 56 Pregunta 5 de la encuesta. .......................................................................... 95

Gráfico 57 Pregunta 6 de la encuesta. .......................................................................... 96

Gráfico 58 Pregunta 7 de la encuesta. .......................................................................... 97

Gráfico 59 Pregunta 8 de la encuesta. .......................................................................... 98

Page 19: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XIX

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES

DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL

BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”

RESUMEN

La tecnología cumple un papel importante dentro de todas las etapas

de la educación, ya que permite a los docentes aplicar nuevas

estrategias y mejorar el aprendizaje de los estudiantes. El Colegio fiscal

Assad Bucaram Elmhalin realiza evaluaciones a sus estudiantes que les

permite diagnosticar el aprendizaje mediante pruebas manuales y

alcanzar progresos en su formación.

Se plantea desarrollar una aplicación que de apoyo a la gestión

académica de los estudiantes y docentes del Colegio fiscal Assad

Bucaram, permitiendo elaborar cuestionarios de estudio a través de un

simulador de pruebas que tomarán un grupo de pregunta registrado por

los usuarios. Para el desarrollo del proyecto se aplicará la metodología

Scrum ya que permite obtener resultados por etapas y tener mayor

control de los alcances. La herramienta ayudará al docente a tratar los

temas más críticos previo a la evaluación final. Además, el simulador de

pruebas permitirá al estudiante la ejercitación del aprendizaje basado

en modelos reales, teniendo la ventaja a desarrollar la destreza mental

o física.

Autor: Jácome Chóez William Jessie Pihuave Parrales Hingri Lissethe

Tutor: Ing. María Quinzo Bravo, MSc.

Page 20: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

XX

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES

DEVELOPMENT OF A WEB SYSTEM TO SUPPORT THE MANAGEMENT

OF TEACHERS AND STUDENTS OF GENERAL EDUCATION

SUPERIOR BASIC OF THE FICSC COLLEGE “ASSAD

BUCARAM ELMHALIN”

ABSTRACT

Technology has an important role in all stages of education; it allows

teachers to apply new strategies and improve the student learning

process. Assad Bucaram Elmhalin High School evaluates its students to

diagnose their learning progress through manual tests that let know

students’ academic achievements.

An application to help the academic management of the students and

teachers of Assad Bucaram Elmhalin High School will be the elaboration

of questionnaires by a test simulator that will take a group of questions

entered by the users. For this project development, the Scrum

methodology will be applied because it provides results by stages and

gives a major control of the scopes. This tool will help the teacher to deal

with critical issues before the final evaluation. Also, test simulator will let

to the student the learning exercise based in real models, getting the

advantage for to develop mental and physical skills.

Autor: Jácome Chóez William Jessie Pihuave Parrales Hingri Lissethe Tutor: Ing. María Quinzo Bravo, MSc.

Page 21: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

1

INTRODUCCIÓN

A través del tiempo la tecnología ha jugado un papel muy importante para

el aprendizaje del hombre, la educación actual ha cambiado tanto y ha

evolucionado que ahora los docentes tienen la obligación de interactuar con

tecnologías y rediseñar sus técnicas pedagógicas para el aprendizaje de los

alumnos.

En el país es fundamental la preparación y formación del recurso humano,

indicando que la educación tiene un papel muy importante en el desarrollo del

mismo, en el cual debemos esforzarnos cada día por lograr una sociedad mejor,

la misma que se vea expresada en una convivencia mejor.

Durante los últimos años la tecnología ha progresado de forma relevante,

sin embargo, en algunas instituciones por diferentes motivos no se ha utilizado la

tecnología adecuada para mejorar el desarrollo profesional.

En el Colegio Fiscal Assad Bucaram Elmhalin los docentes evalúan a los

estudiantes para diagnosticar el aprendizaje de cada uno de ellos mediante

evaluaciones manuales, para alcanzar mejoras en su formación. La falta de una

herramienta pedagógica tecnológica para los estudiantes y docentes, ocasiona

que el nivel de aprendizaje disminuya en el proceso académico, esto produce que

su rendimiento no sea óptimo y obtengan puntaje mínimo para aprobar las

materias afectadas.

El sistema web para apoyar la gestión de docentes y estudiantes de

educación general básica superior del colegio fiscal Assad Bucaram Elmhalin tiene

como objetivo elaborar cuestionarios de estudios y a través de un simulador de

pruebas en que se tomará al estudiante una evaluación con las preguntas

registradas previamente, esta herramienta ayudará al docente a verificar en qué

punto crítico de la materia está fallando y así poder reforzarla. Al mismo tiempo

Page 22: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

2

aprenderán a manejar, interactuar y diseñar diferentes perspectivas sobre un

mismo tópico.

El desarrollo del sistema web consta de 4 capítulos:

Capítulo I: En este capítulo encontramos el planteamiento del problema,

la situación conflictos nudos críticos, causas y consecuencias, delimitación,

formulación y evaluación de los problemas, además los objetivos con sus

respectivos alcances, metodología e importancia del sistema web para el colegio

fiscal Assad Bucaram Elmhalin.

Capítulo II: En este capítulo se describen los antecedentes del problema

y el marco teórico acerca de los componentes que conforman en la utilización para

el desarrollo del sistema web; además se detalla la fundamentación legal, la

hipótesis y las variables de la investigación.

Capítulo III: Consta el diagnóstico de la propuesta tecnológica para el

desarrollo del software, además se describe el análisis de la factibilidad del

proyecto, la metodología que se aplicara y las encuestas realizadas para verificar

si el proyecto es factible.

Capítulo IV: Dentro de este capítulo se describe los criterios de

aceptación, conclusiones y recomendaciones del proyecto.

Page 23: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

3

CAPÍTULO I

DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL

BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”

PLANTEAMIENTO DEL PROBLEMA

Ubicación del problema en un contexto

La Educación en el país durante los últimos años ha evolucionado de forma

relevante, sin embargo, en algunas instituciones por diferentes motivos no han

aplicado la tecnología adecuada para mejorar el desarrollo profesional.

En la actualidad la educación se encuentra manejada por las tecnologías

digitales y recursos informáticos para todas las etapas educativas, que

representan un papel muy importante para el aprendizaje de los alumnos, y las

estrategias de enseñanza de los docentes.

El Colegio Assad Bucaram Elmhalin es una institución fiscal, donde los

docentes evalúan a los estudiantes para diagnosticar el aprendizaje y la capacidad

individual de cada uno de ellos, mediante test de pruebas manuales y lograr

mejoras en su formación.

La falta de insumos tecnológicos por parte de los estudiantes y docentes

que pertenecen a las instituciones fiscales para preparar y construir conocimientos

del proceso formativo, ocasiona que el nivel de aprendizaje disminuya a la hora

de responder el proceso académico, esto produce que su rendimiento no sea

optimo llegando al punto de rendir varios exámenes de mejoramiento para cumplir

con el puntaje mínimo para aprobar las materias afectadas.

Page 24: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

4

Esto ha permitido que los directivos de la institución antes nombrada

permita la realización de un sistema web para apoyar la gestión de educación

general básica, logrando con esto que los docentes y estudiantes manipulen un

sistema didáctico académico orientado a los estándares educativos, para

transmitir sus conocimientos y habilidades, permitiendo a los alumnos que

reflexionen sobre su propio proceso de pensamiento, se enfrente a los nuevos

retos de la tecnología y la ciencia, para que tome decisiones con el fin de mejorarlo

y adquiera confianza en sí mismo.

Teniendo en cuenta que la institución no dispone con estos recursos

tecnológicos, se desarrollará un sistema para que apoye el aprendizaje en los

estudiantes a través de actividades propuestas por el docente y puedan facilitar la

gestión en las diferentes materias críticas. Al mismo tiempo aprendan a manejar,

interactuar y diseñar diferentes perspectivas sobre un mismo tópico.

El área a fundamentar en este proyecto es contar con un sistema web que

permita al estudiante elaborar sus propios cuestionarios de estudio como

herramienta de preparación antes de rendir una evaluación académica, en virtud

de aquello aumentaría el nivel de conocimiento a la hora de contestar las

preguntas o resolver problemas planteados en el mismo, además ayudaría a los

profesores a realizar simulacros de pruebas y calificarlas, aumentando el grado

de preparación del estudiante con el fin de mejorar el rendimiento académico del

estudiante y del curso en general.

Situación conflicto nudos críticos

La falta de herramienta para cubrir el aprendizaje de los estudiantes de

educación general básica superior del colegio fiscal “Assad Bucaram Elmhalin “,

llevo a la necesidad de establecer un proyecto de mejora, para que los docentes

y estudiantes interactúen durante el proceso de enseñanza y aprendizaje, con el

objetivo de elaborar sus propios cuestionarios de estudio como herramienta de

preparación, además ayudaría a los profesores a realizar ejercicios de pruebas y

Page 25: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

5

calificarlas, aumentando la categoría de preparación del estudiante y del curso en

general.

Causas y consecuencias del problema

Cuadro 1 Causas y Consecuencias del Problema

CAUSAS CONSECUENCIAS

Bajo rendimiento académico

principalmente en las materias básicas.

Rendir un examen de recuperación para

alcanzar la mínima nota requerida.

Desinterés de los estudiantes previo a la

evaluación.

Inseguridad al momento de rendir una

evaluación.

Ausencia de herramientas que ayuden al

docente a identificar los puntos bajo en las

materias que imparte.

Baja el interés del estudiante por seguir

aprendiendo el contenido de las materias.

Carencia de métodos de estudios o

técnicas de trabajo intelectual a los

estudiantes.

Deficiencias pedagógicas (escasa

motivación, falta de recursos didácticos,

inadecuada evaluación)

Elaboración: William Jessie Jácome Ch. Hingri Pihuave P.

Fuente: William Jácome Chóez/ Hingri Pihuave P.

Delimitación del problema

Cuadro 2 Delimitación del Problema

Campo Educación

Área Estrategias Educativas Integradoras e Inclusivas

Aspecto Desarrollo de un Sistema Web

Tema Desarrollo de un sistema web para apoyar la gestión de docentes y estudiantes de educación general básica superior del colegio fiscal “Assad Bucaram Elmhalin“.

Elaboración: William Jácome Ch. Hingri Pihuave P.

Fuente: William Jácome Ch/ Hingri Pihuave P

Page 26: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

6

Formulación del problema

¿La baja calificación en diferentes materias de los estudiantes del colegio fiscal

Assad Bucaram Elmhalin mejorará con el desarrollo del sistema web?

Evaluación del problema

A continuación, se muestran 7 aspectos adecuadamente detallados que permiten

evaluar el problema de investigación:

Delimitado:

El proyecto se desarrollará en la ciudad de Guayaquil con el apoyo de los docentes

que laboran en el colegio fiscal Assad Bucaram Elmhalin. En el transcurso de

levantamiento de información se contará con la ayuda de los profesores en las

materias críticas y con la rectora de la institución.

Claro:

La identificación de los inconvenientes demostrados en la elaboración de los

cuestionarios y calificador de pruebas. Por lo cual se planteó el desarrollo de un

sistema web que cumpla con los objetivos anteriormente especificados,

mejorando el rendimiento académico del estudiante y del curso en general.

Evidente:

En este trabajo se demuestran las ventajas del desarrollo de un sistema web para

la gestión de docentes y estudiantes en elaboración de cuestionarios, con lo cual

aumentaría el nivel de conocimiento a la hora de contestar las preguntas o resolver

problemas planteados en el mismo, además ayudaría a realizar simulacros de

pruebas, aumentando el grado de preparación del estudiante.

Concreto:

El inconveniente planteado, se basa a una situación actual del colegio, donde se

realiza una labor diaria con los estudiantes y docentes, este trabajo plantea

mejoras en el rendimiento académico del estudiante y optimización a los docentes

del colegio fiscal Assad Bucaram Elmhalin.

Page 27: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

7

Relevante:

El principal objetivo del proyecto es brindar una herramienta didáctica para la

gestión de las actividades de docentes y estudiantes, dentro de un sistema web

didáctico que permita plasmar en un informe los resultados obtenidos, y, a partir

de ello dar soluciones posibles al alumno para que se vuelva más independiente

en el proceso de aprendizaje.

Original:

La mayoría de programas se ha orientado más al manejo del control de pensiones

y matriculas, sin embargo, es necesario que el Colegio Fiscal Assad Bucaram

disponga de un software que apoye la gestión de docentes y estudiantes para la

elaboración de cuestionarios y simulador de pruebas. Por lo cual este proyecto

brinda una aplicación perfecta a las instituciones educativas.

Factible:

Este proyecto se desarrollará para el Colegio Fiscal Assad Bucaram que cuenta

con docentes pedagógicos capacitados para el manejo de sistemas didácticas,

por lo cual el manejo de la aplicación web será rápido. Este sistema será

desarrollado aproximadamente en tres meses, contando con la herramienta para

el desarrollo lenguajes de programación de software libres como PHP, la misma

que nos permitirá fácil acceso en cualquier navegador.

Page 28: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

8

OBJETIVOS

Objetivo general

Desarrollar una aplicación web como herramienta de apoyo para la gestión

académica de los estudiantes y docente del colegio fiscal Assad Bucaram

Elmhalin.

Objetivos específicos

Analizar la situación académica actual de la institución y la importancia de

un sistema de apoyo a la gestión académica mediante una aplicación web.

Diseñar y desarrollar la base de datos del sistema.

Desarrollar un sistema web para la elaboración y creación de cuestionarios

de estudio de “lengua y literatura, ciencias sociales”.

Elaborar simulador de pruebas en base a los cuestionarios ingresados al

sistema para los estudiantes.

ALCANCES DEL PROBLEMA

Desarrollar un sistema web para llevar el Registro de cuestionario pre-

establecido por un profesor encargado de las materias “lengua y literatura,

ciencias sociales”.

Generar un cuestionario de preguntas de acuerdo a la materia

seleccionada.

Registrar información de docentes, materias, cursos que maneja.

Utilizar manejo de gráficos estadísticos para los diferentes cuestionarios

de estudio en las materias críticas “lengua y literatura, ciencias sociales”.

Generar descarga de pruebas realizadas para revisión del docente.

Manejar perfiles para el ingreso de Sistemas.

Page 29: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

9

JUSTIFICACIÓN E IMPORTANCIA

En la actualidad el Colegio Fiscal Assad Bucaram lleva el registro y la

elaboración de cuestionarios manual, es decir cada alumno realiza 5 preguntas,

después el profesor recopila toda la información y selecciona la más importante

para elaborar el cuestionario con la que va a utilizar las evaluaciones; la institución

sin poder beneficiarse de los recursos tecnológicos que existen como el uso de

base de datos, lenguajes de programación y almacenamiento de información.

Desde el punto de vista académico, consideramos que las instituciones

deben emplear herramientas tecnológicas enfocadas en la preparación del

estudiante antes de rendir evaluaciones para aumentar el nivel de seguridad

obteniendo mejores puntuaciones en sus notas.

El presente trabajo de investigación, permite generar un nuevo enfoque de

estudio en las instituciones académicas para cubrir el bajo rendimiento en las

materias que consideren críticas y que requieran una mejor atención por parte de

los docentes y estudiantes.

En cuanto su alcance, el desarrollo del proyecto ofrecerá al estudiante una

herramienta de estudio como preparación antes de rendir evaluaciones recreando

un ambiente similar a este, además de brindar apoyo al docente para identificar

en que temas se requiere una mejor preparación.

METODOLOGÍA DEL PROYECTO

Metodología de desarrollo

El desarrollo del software es complejo, por lo cual utilizaremos una

herramienta que ayude a minimizar los riesgos durante el desarrollo del sistema

y, dividir en pequeñas tareas para así conseguir objetivos específicos.

Hemos elegido como metodología ágil más conocida en la actualidad para

la gestión de proyectos Scrum, porque nos permite obtener mejor resultados en la

productividad del equipo. Esta metodología es muy útil para proyectos con

Page 30: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

10

correcciones rápidos en los requerimientos del cliente. El desarrollo del software

se realiza en un proceso de entregas parciales y regulares de funcionalidades.

Esta metodología Scrum se divide en 5 etapas para ver si es exitoso

vuestro proyecto: la reunión de planificación de sprint, los Scrum diarios, el

trabajo de desarrollo, la revisión del sprint y la retrospectiva del sprint.

Gráfico 1 SCRUM

Elaborado: Hingri Pihuave P / William Jácome Ch.

Fuente: http://www.obs-edu.com/int/blog-investigacion/project-management/las-

5-etapas-en-los-sprints-de-un-desarrollo-scrum

Sin embargo, para el desarrollo del software se utilizará el modelo

incremental. Este proceso se realiza en etapas con entrega de funcionalidades

frecuentes. El cual se base a lo que fue construido primero, es decir que el

software va evolucionando con cada una de las entregas, de manera que el cliente

pueda obtener resultados del proyecto. Este modelo se centra en desarrollar el

sistema en partes, puede adaptarse a cualquier tipo de proyecto, este proceso se

divide en 4 partes:

1. Análisis de Requerimientos del software: Se interpretan y analizan los

requerimientos, prototipos y la funcionalidad que tendrán las pantallas.

2. Diseño: Es el encargado de realizar el modelo de diseño, interfaces de

Page 31: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

11

pantallas y arquitectura de software en base a la especificación de

requisitos.

3. Codificación: Es la actividad en la que se elabora y verifica el diseño,

código que es demostrado mediante un lenguaje de programación que

corresponde a la especificación de requisitos.

4. Prueba: Revisión y evaluación del funcionamiento del software, basado

en pruebas unitarias de integración.

Gráfico 2 MODELO INCREMENTAL

Elaboración: Hingri Pihuave P / William Jácome Ch.

Fuente: https://es.slideshare.net/noriver/desarrollo-iterativo-e-incremental

Supuestos y Restricciones

a. Supuesto

Manejo de Perfiles de usuarios.

Los usuarios pueden restablecer su contraseña en caso se hallan olvidado.

La contraseña se restablecerá por medio de un email con una clave

autogenerada por el sistema.

Page 32: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

12

Se dispondrá de un servidor las cuales tendría las siguientes características

como: Sistema operativo Windows 10 y 4 gb de memoria RAM.

En el servidor se instalará XAMPP por ser un software libre el cual constituye

específicamente en la base de datos MySQL, el servidor web Apache y los

interpretes para el lenguaje de desarrollo PHP, y como framework web para

sitios web dinámicos se utilizará YII Framework en su actual versión.

b. Restricciones

El proyecto se ajustará en las materias críticas principales que son Lengua

y literatura, ciencias sociales.

Plan de Calidad

Las pruebas de Software

Las pruebas se centran principalmente en la evolución o la valoración de

la calidad del producto y representan un elemento crítico para la garantía del

mismo. Es una actividad en la cual un sistema o uno de sus componentes se

ejecutan en circunstancias. (Betancourt Rivero, 2012)

Las pruebas son importantes y fundamentales en el ciclo de vida de un

programa, porque verificamos si el desarrollo del sistema web es de calidad en los

procesos, mediante estas revisiones se puede evaluar su funcionalidad y

resistencia del software frente a diferentes acciones que elaborarán los docentes

y estudiantes.

Page 33: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

13

Objetivos de las pruebas del software

Indico (Alonso, Martínez, & Segovia, 2005, pág. 344) los objetivos de las pruebas

son:

Planificar las pruebas de cada iteración

Incluyendo las pruebas de integración (para cada construcción) y del

sistema (al final de cada iteración)

Crear casos de prueba especificando qué probar

Cómo realizar la prueba

Realizar las pruebas y evaluar sus resultados.

Los objetivos de las pruebas de software son elementos fundamentales

porque nos ayudan a comprobar que el sistema es de calidad y cumple con las

especificaciones y requisitos del cliente.

Page 34: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

14

CAPÍTULO II

MARCO TEÓRICO

ANTECEDENTES DEL ESTUDIO

La tecnología está evolucionando constantemente, en tal virtud que el

desarrollo del software ha permitido lograr la elaboración de grandes sistemas

que son de gran ayuda para las instituciones educativas. Con relación a lo

mostrado, las entidades educativas están investigando, analizando y diseñando

software para minimizar tiempo y proceso en sus labores pedagógicas, para poder

cumplir con sus tareas educativas.

El desarrollo de este software es para apoyar la gestión de docente y

estudiantes de educación básica general superior del colegió fiscal Assad

Bucaram, solicita la utilización de servicios web que se puede encontrar en Yii

Framework que nos brindan una Programación orientada a objetos de alta

performance y rendimiento (su acrónimo es “Yes It Is”), el uso de cada una de

ellas depende de lo que se requiera diseñar, o por la disposición de configuración

que éstas puedan facilitar al desarrollador.

Hoy en día las instituciones educativas no cuentan con una herramienta

de gestión para docentes y estudiantes, se verificó que la gran parte de sistemas

están relacionadas en el proceso de matriculación, horarios, asistencia, por lo que

el desarrollo de este software es único, brinda una aplicación perfecta para el

trabajo pedagógico, así como también se mejorará el rendimiento académico

durante todo el proceso de las clases; consiguiendo experiencias y mejoras para

la institución, personal docente, administración y estudiantes.

Page 35: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

15

Fundamentación teórica

Los conceptos indicados a continuación están implicados en el proceso de

investigación, análisis, diseño y desarrollo del sistema web. Se ha dividido la

información de la siguiente forma:

Metodología de proyecto

o Scrum

Arquitectura de software

o Definición de la arquitectura del software

o MVC

o Aplicación web

Tecnologías involucradas

o Apache

o PHP

o HTML5

o Base de datos

• MySQL

o Xampp

o Framework

• Yii Framework

o Sistema operativo

• Windows 7

• Linux

• Componente para la interfaz de usuario

o JavaScript

jquery

Datatables

o CSS

Page 36: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

16

SCRUM

Gráfico 3 SCRUM

Elaboración: ISLAVISUAL

Fuente: http://www.islavisual.com

Es una metodología ágil que nos ayuda en el proceso para el desarrollo

del software, utilizando buenas prácticas para trabajar en equipos, y obtener

resultados positivos de un proyecto. “Scrum es un marco de referencia para crear

software complejo y entregarlo a tiempo de una forma mucho más sencilla. Utiliza

el concepto de Equipos Scrum, los cuales son grupos de trabajo donde los

miembros juegan roles específicos” (Dimes, 2015, p. 4).

Cuando termina el ciclo o sprint de trabajo ésta se integra con nuevas

funcionalidades. Su característica es estar disponible para cualquier cambio, ya

que está especulado en una nueva mejora del software. Esta metodología se

relaciona con el objetivo y cuenta con el apoyo del cliente, ya que este es muy

importante porque forma parte del equipo de trabajo.

Scrum dirige su desarrollo en ciclos de trabajo ya que sus buenas procesos

permiten trabajar en forma colaborativa, es decir, en equipo alcanzando un

resultado. Además, esta metodología permite cumplir entregas parciales es decir

que los miembros del equipo muestran las tareas establecidas identificando y

corrigiendo incidencias que se puedan presentar en el transcurso del desarrollo

Page 37: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

17

del software esta es una de las razones en la que los miembros del equipo se

comprometen a lograr el objetivo planteado.

(Laínez Fuentes, 2015, pág. 128) Escribió: Los principales beneficios y

componente del Scrum de la siguiente manera:

Comunicación

Trabajo en equipo

Flexibilidad

Proveer software funcionando de manera incremental

Los beneficios son importantes porque el equipo de trabajo es íntegro y

transparente en el desarrollo del proyecto, se enfocan en las necesidades del

cliente para involucrarse en conjunto; además los miembros del grupo brindan

confianza entre sus conocimientos y capacidades para así dar mayor satisfacción

y colaboración para las tomas de decisiones sobre el desarrollo. Cada vez que se

termina un sprint se genera un entregable funcionando al cliente capaz de ser

integrado con futuros avances.

(Laínez Fuentes, 2015, pág. 128) Menciono: Los Principales Componentes del

Scrum:

Backlog

Equipos de Desarrollo

Sprints

Reuniones diarias

Reuniones de revisiones. Presentación de Demos.

“El backlog es un conjunto de necesidades, problemas o nuevas ideas para

la implementación” (Laínez Fuentes, 2015, pág. 129). Crea un listado de requisitos

de los usuarios o propietario del sistema para planificar el proyecto.

“Los equipos de desarrollo normalmente son pequeños, hasta 10 persona”

(Laínez Fuentes, 2015, pág. 129). Es el principal grupo de trabajo que es el

encargado de desarrollar el producto.

Page 38: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

18

“Sprints es el periodo para realizar un conjunto de tareas seleccionadas en

el backlog, que por lo general suelen ser nos 15 días” (Laínez Fuentes, 2015, pág.

129). Son iteraciones en las cuales el equipo trabaja durante el desarrollo del

producto.

“Las reuniones diarias suelen tener una duración de 15 minutos como

máximo con el equipo en pie” (Laínez Fuentes, 2015, pág. 129). Se realizan estas

reuniones diarias por cada tarea o sprint para ver el tiempo y los avances que se

han realizado en el proyecto.

“Las reuniones de revisiones ayudan a mantener las promesas, evita el

atraso en el proyecto y cualquier que pueda ser corregido de inmediato” (Laínez

Fuentes, 2015, pág. 129). Estas reuniones se realizan con el propietario del

producto y todas las personas implicadas en el proyecto con la finalidad de

presentar sus nuevas funcionalidades del sistema.

(Laínez Fuentes, 2015, pág. 129) Menciona: Las siguientes preguntas se deben

responder en estas reuniones son:

¿Qué se hizo ayer?

¿Qué tenemos que hacer hoy?

¿Qué problemas hemos encontrado nos impide resolver los problemas

actuales?

La repuesta de estas preguntas permite controlar las tareas de cada miembro del

equipo.

Breve historia de la arquitectura de software

En el desarrollo de software de un sistema es importante conocer que es

la arquitectura de software, ya que nos brinda un estudio, análisis y funcionalidad

para entender su procedimiento.

La arquitectura de software, con alrededor de 15 años de vida (si

consideramos su nacimiento a partir de 1992), ha emergido como una

Page 39: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

19

disciplina de gran importancia dentro de la ingeniería de software. Una

arquitectura adecuada es pieza clave para lograr tanto los requerimientos

funcionales como no funcionales de un sistema. (Fernández Martínez,

2003)

La arquitectura del software es declarada en la década de los años 90,

donde se definen nuevos estilos basados en componentes y programación

orientada, la cual es muy importante porque intervienen los requisitos funcionales

y no funcionales que garantizan la utilización de componentes para determinar la

viabilidad del sistema.

A medida que transcurren los años la arquitectura de software es

importante en la estructura de los programas, porque si no está bien diseñada el

sistema podrá colapsar, además nos sirve para lograr los objetivos en el sistema

y poder evolucionar según las condiciones en el mercado.

Definición de la arquitectura de software

Gráfico 4 ARQUITECTURA DE SOFTWARE

Elaboración: ARQUITECTO DE SOFTWARE.NET

Fuente: http://www.arquitectodesoftware.net/proceso-de-la-arquitectura-de-

software/

“La arquitectura de software en general, se define como un nuevo

paradigma o nueva forma de ver un sistema de información desde un punto de

vista holístico, donde cada componente afecta los requerimientos fundamentales,

Page 40: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

20

ya sean funcionales o no funcionales” (Jimenez Torres, Tello Borja, & Rios Patiño,

2014).

La arquitectura de software se detalla cómo está adecuado un sistema ya

que este tiene un orden por donde seguir y avanzar consecutivamente para la

elaboración de un proyecto, es decir que es una tarea muy importante y necesaria

ya que mediante la arquitectura se mantiene ordenado el desarrollo logrando una

solución en alguna tarea específica de sus componentes.

Modalidades y tendencias de AS (Reynoso, 2004, págs. 12,13)

1. Arquitectura como etapa de ingeniería y diseño orientada a objetos

2. Arquitectura estructural

3. Estructuralismo arquitectónico radical

4. Arquitectura procesual

5. Arquitectura basada en escenarios

6. Arquitectura basada en patrones.

Luego de mencionar un poco de la arquitectura del software y de sus

modalidades con tendencias, se aclara que ya no es necesario crear nuevas

arquitecturas, sino que se podrá utilizar unas que ya existen, porque este motivo

que en nuestro software que esta por desarrollar nos basaremos en MVC.

Arquitectura modelo vista controlador (mvc)

Gráfico 5 MVC

Elaboración: Information Technology Consulting

Fuente: http://www.itc-software.com.ar/Newsletter/024/Newsletter_201410.html

Page 41: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

21

“El modelo vista controlador (MVC) es un patrón de arquitectura de

software que separa los datos y la aplicación de la interfaz de usuario y el modelo

encargado de gestionar los eventos y las comunicaciones” (San Miguel Talledo,

2015, pág. 95).

El MVC es una estructura que combina el desarrollo con la vista del sistema

conjuntamente, y que ayuda al programador con el tiempo de desarrollo. Es decir

que se basa en la separación de la lógica de una aplicación de la interfaz de

usuario con el objetivo de crear software más robusto y ordenado a nivel de código

promoviendo la reutilización del mismo en diferentes secciones del trabajo.

(San Miguel Talledo, 2015, pág. 95) Propuso: La construcción de tres

componentes distintos que son el modelo, la vista y el controlador:

“Modelo: Es la capa que trabaja con los datos. Deberá contener

mecanismos para acceder a la información y también para actualizar su estado”

(San Miguel Talledo, 2015). Esta capa es relacionada con el almacenamiento base

de datos, puede ser como una representación de las tablas, nos permite realizar

los query para consultar o grabar la información y le entrega los datos al

controlador para que los procese y le devuelva la respuesta.

“Vista: Esta parte es la encargada de mostrar la información solicitada”

(San Miguel Talledo, 2015, pág. 95). Es la capa de presentación al usuario, lo que

interactúa como es el menú, formularios, mensajes, etc.

“Controlador: Esta capa es la responsable de responder a eventos, por

ejemplo, en el caso de peticiones del usuario para hacer una compra, visualizar

un elemento, búsqueda de información, etc., (San Miguel Talledo, 2015, pág. 96).

Es el que maneja toda la lógica del negocio, es decir recibe los datos que el

usuario digita o solicita, lo valida y los procesa, consulta lo que ya está guardado.

Inicialmente esta arquitectura MVC fue desarrollado para aplicaciones de

escritorio y ha sido mejorado para el diseño e implementación en aplicaciones

web, desde el punto de vista permite que varias compañías decidan mejorar sus

Page 42: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

22

modelos a esta arquitectura de programación basada en las tres capas ya que

facilita el código ahorrando espacio y brindando mayor facilidad en el uso.

Gráfico 6 Ciclo de vida MVC

Elaboración: Information Technology Consulting

Fuente: http://www.itc-software.com.ar/Newsletter/024/Newsletter_201410.html

A continuación, vemos paso a paso como sería el flujo de trabajo característico en

un esquema MVC: (Alvarez, 2014)

1. El usuario realiza una solicitud a nuestro sitio web. Generalmente estará

desencadenada por acceder a una página de nuestro sitio. Esa solicitud le

llega al controlador.

2. El controlador comunica tanto con modelos como con vistas. A los modelos

les solicita datos o les manda a realizar actualizaciones de los datos. A las

vistas le solicita la salida correspondiente, una vez se hayan realizado las

operaciones pertinentes según la lógica del negocio.

3. Para producir a salida, en ocasiones las vistas pueden solicitar más

información a los modelos. En ocasiones, el controlador será el

responsable de solicitar todos los datos a los modelos y de enviarlos a las

vistas, haciendo de puente entre unos y otros.

4. Las vistas envían al usuario la salida. Aunque en ocasiones esa salida

puede ir de vuelta al controlador y seria éste el que hace él envió al cliente.

Page 43: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

23

Como su nombre lo indica estos componentes funcionan en la entrada,

salida y procesamiento permitiendo que las tres capas se comuniquen entre sí,

es decir, que la capa modelo se encarga de los datos, la capa vista es la que

muestra la salida de los datos procesados y la capa controlador es la que sirve

de relación entre el modelo y la vista. Este esquema está orientado en separar

los trabajos en una aplicación y las mejorías que brinda para el avance del

desarrollo.

APLICACIÓN WEB

Gráfico 7 Esquema básico de una aplicación web

Elaboración: Jhair Cortez M.

Fuente: https://sciatel.wikispaces.com “El desarrollo de aplicaciones web consiste en la creación de programas

que residen en un servidor web y que pueden ser utilizados en forma de páginas

web desde un navegador de internet” (Katcheroff, 2008, pág. 191).

Se llama aplicación web a todas las herramientas que los usuarios puedan

manejar para ingresar al navegador de internet a través de un servidor web, los

cuales nos ayudan a comprender y mejorar en la elaboración del software.

Clasificación de las aplicaciones web (Luján, 2001)

Procesadores de texto en línea.

Hojas de cálculo en línea.

Aplicaciones y servicios

Editor de diagramas y otras representaciones gráficas.

Page 44: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

24

Gráfico 8 Arquitectura de las aplicaciones web: todo en un servidor

Elaboración: Sergio Luján Mora

Fuente: Lujan Mora Sergio (2002). Programación de Aplicaciones Web

“El Cliente: Es un programa con el que interacciona el usuario para solicitar

a un servidor web él envió de los recursos que desea obtener mediante HTTP”

(Cortez, 2012). Es donde un cliente realiza una petición ya sea de read, créate,

update, delete desde una maquina cualquiera. Es decir que el cliente recibe el

código lo interpreta e interactúa con computadora conectado por medio de una

red.

“El servidor: Es un programa que está esperando permanentemente las

solicitudes de conexión mediante el protocolo HTTP por parte de los clientes”

(Cortez, 2012). El servidor es el que recibe la petición enviada desde el cliente sin

necesidad de estar en la misma máquina, la procesa y le devuelve una respuesta

al cliente según el contenido de la información que solicita.

Por ende, es una aplicación distribuida ya que puede el cliente como el

servidor estar en diferentes maquinas, pero están conectados entre sí.

APACHE

Gráfico 9 Logo Apache

Elaboración: Robert McCool

Fuente: httpd.apache.org

Page 45: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

25

“La historia de apache se remonta a febrero de 1995, donde empieza el

proyecto del grupo Apache, el cual está basado en el servidor Apache httpd de la

aplicación original de NCSA” (Quero Catalinas, Garcia Román , & Peña Rodriguez,

2007, pág. 60).

Apache es un servidor web de código abierto y de distribución libre, siendo

el más popular, disponibles en una gran multitud de plataformas.

“Apache es un servidor web desarrollado por un grupo denominado

apache. Es uno de los servidores web más utilizados en internet” (Quero

Catalinas, Garcia Román , & Peña Rodriguez, 2007).

Apache nos ofrece confianza, seguridad y alta ventaja para la publicación

de sitios web estáticos y dinámicos sin costo ya que es un código abierto, y es un

componente popular.

PHP

Gráfico 10 Logo PHP

Elaboración: PHP

Fuente: www.php.net.

PHP es un lenguaje de programación usado normalmente para la creación

de contenido para sitios web con los cuales se pueden programar las

páginas HTML y los códigos de fuente. PHP es un acrónimo recursivo que

significa Hypertext Pre-processor y se trata de un lenguaje interpretado

usado para la creación de aplicaciones para servidores. (Rodriguez

Villazón, 2014)

Page 46: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

26

Es el lenguaje de programación más utilizado para aplicaciones web, ya

que integra de forma rápida y sencilla el contenido de las páginas web para ser

procesados en un servidor.

“PHP es software libre, licenciado bajo la PHP License, una licencia

incompatible con GNU General Public License (GLP) debido a las restricciones en

los términos de uso de PHP” (Arias M. Á., 2017, pág. 13).

PHP es el lenguaje de código abierto, que brinda a los programadores

todos sus beneficios y facilidad de uso sin tener algún costo alguno en sus

actualizaciones.

HTML

Gráfico 11 Gráfico N° 9 Logo HTML

Elaboración: HTML

Fuente: https://www.w3.org/html

HTML apareció en el año de 1993 y HTML5 es el último estándar de HTML

que apareció por primera vez en el año 2008 como Working Drag.

HTML5 es un lenguaje markup (de hecho, las siglas de HTML significan

Hyper Text Markup Language) usado para estructurar y presentar el

contenido para la web. Es uno de los aspectos fundamentales para el

Page 47: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

27

funcionamiento de los sitios, pero no es el primero. Es de hecho la quinta

revisión del estándar que fue creado en 1990. (hipertextual, 2013)

Es un lenguaje estándar manejado para desarrollar páginas web y sus

elementos integran en los componentes de arquitectura en los sitios web.

Las novedades de Html5 (Lancker, 2012, pág. 15)

Un nuevo doctype simplificado y unificado.

Supresión de etiquetas y atributos de presentación.

Nuevas etiquetas semánticas o de organización.

Nuevas etiquetas de audio y de video que a no necesitan más

plugins dedicados.

Diseño 2D y muy pronto 3D gracias a la nueva etiqueta <canvas>.

Profusión, y la integración de forma nativa en los navegadores de

la validación de datos.

Con esta nueva versión HTML5, los usuarios podrán acceder a las páginas

web de manera offline, es decir que no necesitaran estar conectados a internet y

será muy viable.

BASE DE DATOS

Gráfico 12 Base de Datos

Elaboración: MicroFour

Fuente: https://www.strataframe.net/enterpriseserver_span.aspx

Page 48: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

28

“Llamamos base de datos (o bases de datos) a un conjunto de datos

dispuestos con el objetivo de proporcionar información a los usuarios y permitir

transacciones como inserción, eliminación y actualización de datos” (Arias Á. ,

2015, pág. 17).

La base de datos se define como un conjunto de tablas que contiene filas

y columna que están relacionadas entre sí, además nos permite almacenar y

recopilar información de manera ordenada. Nos facilita que las búsquedas sean

rápidas y se debe acoplar al modelo de negocio de cualquier actividad

empresarial.

Hay varias formas (modelo) para construir una base de datos: (Arias Á. ,

2015, pág. 18)

Flat file

Relacional

Orientado a objetos

Jerárquico

Red

Dimensional

Hay muchos sistemas SBD en el mercado. En las bases de datos relacionales, los

sistemas más populares son: (Arias Á. , 2015, pág. 18)

Oracle

SQL Server

MySQL

PostgreSQL

Las bases de datos mencionadas son un conjunto de programas,

complejos, su funcionalidad es precisa y ayuda al usuario administrar grandes

cantidades de información relacionadas entre sí.

MYSQL

Gráfico 13 Logo MySQL

Elaboración: MySQL Fuente: https://www.mysql.com/

Page 49: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

29

Según (Arías, 2014) Menciona: MySQL es una base de datos relacional

que utiliza el lenguaje SQL (Structured Query Language Lenguaje de Consulta

Estructurado-). Se trata de un SBD de código abierto, lanzado en 1995, que más

tarde fue adquirido por Sun Microsystems en 2008 (más tarde, en 2009, Oracle

compró Sun).

MySQL es un motor de base de datos, que por defecto ya viene con

servidor web, y es muy utilizado en desarrollo web para el lenguaje PHP, porque

permite realizar cambios en sus sitios de manera simple, evitando que tenga que

modificar todo el código.

Características de MySQL (Rodriguez Villazón, 2014)

1. Aprovecha la potencia de sistemas multiprocesador, gracias a su

implementación multihilo.

2. Soporta gran cantidad de tipos de datos para las columnas.

3. Dispone de API’s en gran cantidad de lenguajes (C, C++, Java, PHP, etc.).

4. Gran portabilidad entre sistemas.

5. Soporta hasta 32’ índices por tabla.

6. Gestión de usuario y contraseñas, mantiene un muy buen nivel de

seguridad en los datos.

Ventajas que tiene MySQL: (Rodriguez Villazón, 2014)

Mayor rendimiento

Mejores utilidades de administración

Integración perfecta con PHP

Sin límites en los tamaños de registro

Mejor control de acceso de usuarios

Cliente/Servidor

Se pueden crear respaldos in tener que cerrar los objetos bloqueados por

usuarios.

Gratuito.

Multiplataforma

Page 50: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

30

MySQL es un esquema de alto tráfico debido a su motor de consulta de

alto rendimiento y la interpretación de datos de manera rápida, es decir que trabaja

de manera centralizada en la gestión de los datos.

XAMPP

Gráfico 14 Logo Xampp

Elaboración: APACHE

Fuente: https://www.apachefriends.org/es/

“XAMPP es un servidor independiente de plataforma, software libre, que

consiste principalmente en la base de datos MySQL, el servidor Web Apache y los

intérpretes para lenguajes de script: PHP y Perl “ (Fossati, 2014)

Xampp es un servidor plataforma libre, que se constituye en una sola

aplicación, con el alcanzamos disponer de un servidor, además nos permite

instalar el entorno de MySQL, apache, para así poder revisar localmente una

aplicación web.

Ventajas y desventajas del Xampp encontramos: (Soy Programador, 2016)

Ventajas

Nos permite elegir que componentes instalar, muy útil para no suplicar

instalaciones.

Interfaz donde se concentran todas las opciones de administración.

Fácil instalación y rápido.

Desventajas

A pesar de ser muy administrativo, no nos permite administrar PHP, sería

muy bueno que se pudieran activar o desactivar extensiones de PHP.

Page 51: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

31

FRAMEWORK

Gráfico 15 Framework

Elaboración: COREPHP

Fuente: https: www.corephp.com

“Framework, es una estructura de soporte definido, normalmente con

artefactos o módulos de software concretos, mediante la cual otro proyecto de

software puede ser organizado y desarrollado” (Rodriguez Villazón, 2014).

Los framework nos ayudan poder estructurar de mejor forma un software,

además se puede reutilizar código, y es organizado en el desarrollo.

Los framework nos ofrecen: (Rodriguez Villazón, 2014)

Una estructura que permite a los desarrolladores tener un código más

ordenado.

Fácil de actualizar

Un código más seguro

Robusto

Eficiente

Cada uno proporciona características diferentes, es difícil sugerir cual puede

ser el mejor de todos, habría que conocer cada una, permite tener mayor

productividad en cuanto al desarrollo del software.

Page 52: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

32

Los framework permiten: (Alegsa, 2016)

Facilitar el desarrollo de software.

Evitar los detalles de bajo nivel, permitiendo concentrar más esfuerzo y

tiempo en identificar los requerimientos de software.

(Alcalde, 2017) Indico: 15 frameworks más populares tanto para webs como para

móviles:

1. Angular.js: Un framework basado en JavaScript

2. React: Liberado por Facebook, en JavaScript, permite desarrollar

aplicaciones móviles para IOS y Android

3. Ionic: Para móviles, usando HTML, Js, Sass y Angular

4. Meteor: En JavaScript, para web y móviles

5. Ruby on Rails: Framework MVC basado en Ruby, orientado al desarrollo

de aplicaciones web

6. CodeIgniter: Poderoso framework PHP liviano y rápido

7. Kohana: Un fork de Codelgniter

8. Django: Framework Python que promueve el desarrollo rápido y el diseño

limpio

9. cakePHP: Framework MVC para PHP de desarrollo rápido

10. Zend Framework: Framework para PHP 5, simple, claro y open-source

11. Yii: Framework PHP de alto rendimiento basado en componentes

12. Pylons: Framework web para Python que enfatiza la flexibilidad y el

desarrollo rápido.

13. Catalyst: Framework para aplicaciones web MVC elegante

14. Symfony: Framework full-stack

15. TurboGears: Próxima generación construido sobre Pylons

(CHARLYRED70, 2016) Menciono las siguientes características de los

frameworks:

La autenticación mediante Login y Password que permite restringir el

acceso y el tipo de permiso.

Page 53: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

33

El acceso a los datos en archivo txt, xml por ejemplo mediante interfaces

que integran la base de datos.

Abstracción de URLs y Sesiones ya que el framework se encarga de

manejarlas.

Internacionalización que permite la inclusión de varios idiomas en el

desarrollo.

Controladores fácilmente adaptables a las necesidades del proyecto que

gestionan las peticiones y/o eventos.

Trabajar con un framework es importante porque ayuda a la necesidad de los

desarrolladores en cualquier proyecto que se va realizar, además es productivo y

se trabaja en menos tiempo.

YII FRAMEWORK

Gráfico 16 Yii Framework

Elaboración: Yii framework

Fuente: http://www.yiiframework.com/logo/

“Yii (¡acrónimo de Yes it is! Es un framework open source de programación

utilizado para desarrollar todo tipo de aplicaciones web. El proyecto yii comenzó a

primero de 2008, con el fin de solucionar varios hándicaps de PRADO framework”

(desarrolloweb, 2012).

Yii es un framework orientado a objetos, software libre, de alto rendimiento

basado en componentes, PHP y framework de aplicaciones web. Yii se pronuncia

en español como se escribe y en un acrónimo para “Yes It Is! (en español: ¡Si lo

es!). (Eslava Muñoz, 2013, pág. 120)

Page 54: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

34

Este framework está diseñado para aplicaciones web por su eficiencia en

PHP, es de código abierto y con su generación de código automático nos ayuda

al usuario ahorra mucho tiempo en el desarrollo de la aplicación, por eso es

considerada como una herramienta para crear modelos y controladores.

(Eslava Muñoz, 2013, pág. 120) Mencionó: Algunas características de Yii

que incluyen:

Database Access Objects (DAO), query builder, Active Record y

migración de BD.

Integración con jQuery.

Entradas de Formulario y validación.

Widgets de Ajax, como autocompletado de campos de texto y

demás.

Soporte de Autenticación incorporado. Además, soporta

autorización vía role-based Access control (RBAC) jerárquico.

Personalización de aspectos y temas.

Generación compleja automática de WSDL, especificaciones y

administración de peticiones Web service.

Internacionalización y localización (I18N anda L10N). Soporta

traducciones, formato de fecha y hora, formato de números,

localización de la vista.

Esquema de caching por capas. Soporta el cache de datos, cache

de páginas, cache por fragmentos y contenido dinámico. El medio

de almacenamiento del cache puede ser cambiado.

El manejo de errores y logging. Los errores son manejados y

personalizados, y los logs de mensajes pueden ser categorizados,

filtrados y movidos a diferentes destinos.

Herramientas para pruebas unitarias y funcionales basados en

PHPunit y Selenium.

Generación de código por componentes de Yii y la herramienta por

línea de comandos cumple con los estándares de XHTML.

Page 55: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

35

Cuidadosamente diseñado para trabajar bien con códigos de

terceros. Por ejemplo, es posible usar el código de PHP o Zend

Framework en una aplicación Yii.

Este framework nos brinda un mayor beneficio en el desarrollo de la

aplicación dependiendo de las necesidades que se desea realizar en el software

este reduce el tiempo de desarrollo porque nos permite reutilizar código fuente con

un fundamento totalmente comprobado.

SISTEMA OPERATIVO

“El sistema operativo es un conjunto de programas que ayuda a los

usuarios a explotar las funciones del ordenador. La existencia del sistema

operativo es necesaria para que se ejecuten otros programas en el ordenador”

(Sanchez Estella, 2016, pág. 23).

El sistema operativo se define como un conjunto de programas que nos

permiten gestionar todos los recursos de un ordenador de forma correcta.

(Sanchez Estella, 2016) Indico: En ocasiones se dividen en tres clases los

sistemas operativos:

1. Los sistemas operativos monousuario: permiten que trabaje una

persona en ellos; esta dispone de toda la memoria, recursos de la

UCP y demás dispositivos del sistema para ejecutar las

aplicaciones que desee.

2. En los sistemas operativos multiusuario la maquina es compartida

por varios usuarios. En este tipo de sistema operativos, hay una

persona o personas encargadas de administrar el sistema; como

parte de dicha administración, se establecen políticas para regular

el uso de la memoria y la UCP.

3. En los sistemas distribuidos o en red los usuarios ejecutan un

sistema operativo en cada máquina y comparten algunos recursos

(por ejemplo, dispositivos de almacenamiento o impresoras).

Page 56: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

36

Entre lo más usados actualmente, hay que citar los SO Microsoft Windows,

desarrollados desde 1981, y entre los que destacan Windows XP, que apareció

en octubre de 2001; Windows Vista, en enero de 2007; y Windows 7, en octubre

de 2009. (Romera, 2014)

En el mercado actualmente existen algunos sistemas operativos los más

utilizados son los multiusuarios, ya que permiten procesar más de un proceso a la

vez, es decir donde varios usuarios realizarán peticiones de servicios; el SO

determinara prioridades para responder a las solicitudes y a medida que termine

serán asignados a nuevas tareas.

(Vialfa, 2017) Indico: El sistema operativo cumple varias funciones:

Administración del procesador

Gestión de la memoria de acceso aleatorio

Gestión de entradas/salidas

Gestión de ejecución de aplicaciones

Administración de autorizaciones

Gestión de archivos

Gestión de la información

WINDOWS 7

Gráfico 17 Windows 7

Elaboración: Microsoft

Fuente: https://www.microsoft.com

Page 57: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

37

“Windows 7 es la última versión de Microsoft Windows, un sistema

operativo para uso en ordenadores personales, incluyendo equipos de escritorio

en hogares y oficinas, notebooks, tablets PCs. Netbooks y equipos Media Center”

(Pérez Marqués & Pérez, 2009).

Este sistema operativo Windows 7 ha significado muchas mejoras con sus

actualizaciones como estabilidad, depuración de errores y compatibilidad con

drivers, es el más utilizado porque es compatible con muchos equipos antiguos.

Windows 7 está más enfocado en el rendimiento del sistema operativo que

las versiones anteriores (Windows Vista y Windows XP). Entre los puntos más

relevantes que se han mejorado destacan: empleo de memoria, utilización de

CPU, operaciones de lectura y escritura de disco, operaciones de arranque, cierre

y reposo, rendimiento del sistema base y empleo de disco por parte del sistema.

(Pérez Marqués & Pérez, 2009)

Es importante Windows 7 en su posición tecnológico porque aporta al

usuario una experiencia renovada porque brinda seguridad, integridad y es el más

usado.

(Pérez Marqués & Pérez, 2009) Indico: Seis ediciones de Windows 7

1. Windows 7 Home Basic: solo para mercados emergentes, no se

comercializará en Europa occidental, Estados Unidos y Japón y añadirá a

Starter las vistas en miniatura, soporte avanzado de redes y Mobility

center.

2. Windows 7 Professional: equivalente a Vista Business. Protección de datos

con copia de seguridad avanzada, red administrada con Domain Job,

impresión de Red localizada mediante Location Aware Printing, cifrado de

archivos.

3. Windows 7 Enterprise: protección de datos con Bitlocker en discos duros

externos e interno, únicamente licencias en volumen preinstalados en

equipos nuevos.

Page 58: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

38

4. Windows 7 Ultimate: es la versión más completa e incluye todos los extras.

LINUX

Gráfico 18 Linux

Elaboración: LINUX

Fuente: www.linuxadictos.com

“Linux es software libre lo que significa que podemos ejecutarlo con

cualquier propósito, estudiar cómo funciona, copiarlo cuantas veces queramos y

distribuirlo a quien deseemos y en el modo que creamos más conveniente”

(Fernández Montoro, 2011).

Linux es un sistema operativo que permite interactuar con el computador

para poder comunicarse y recibir instrucciones de los usuarios es eficaz y tiene un

excelente interfaz, es un software libre permitiendo a los usuarios que lo utilicen

de manera simultánea en sus diferentes actividades.

Creado originalmente por Linus Torvalds en 1991, en Finlandia en la

Universidad de Helsinki, a diferencia otros sistemas operativos, este ha sido

desarrollado por miles de usuarios de computadoras a nivel mundial,

contribuyendo todos con el fin de conseguir un sistema operativo confiable,

poderoso, fiable, seguro e interactivo (Linux, 2015).

Este sistema operativo es seguro porque permite que su administración

tenga buen rendimiento en sus procesos, además es propenso a adquirir algún

tipo de virus que afecte el sistema.

Page 59: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

39

(Aranda Vera, 2015) Menciono: existen muchas maneras de instalar

software de Linux, algunos de ellas son:

Centro de software Ubuntu: es una herramienta de Linux que

permite gestionar las instalaciones y actualizaciones de una

manera sencilla.

Gestor de paquete Synaptic: es una herramienta muy potente que

sirve para la gestión de paquetes de Debían GNU/Linux.

Comandos apt-get o aptitudes: en los sistemas Linux, para usuarios

expertos los comandos son la mejor manera de gestionar el

sistema.

Mediante paquetes preparados .deb o bin: estos paquetes podrán

ser descargados desde la página oficial o internet. Estos paquetes

se instalarán a través de comandos o mediante el entorno gráfico

con su ejecución.

JAVASCRIPT

Gráfico 19 JavaScript

Elaboración: MACWORLD

Fuente: http://www.macworld.co.uk

“JavaScript es un lenguaje de programación creado por Netscape y hoy

ampliamente – pero no totalmente – estandarizado, capaz de actuar dentro de los

Page 60: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

40

documentos HTML y darles el carácter dinámico que los códigos HTML dinámico

o DHTML” (Ayoze Castillo, 2017).

Este lenguaje de programación es sencillo y estandarizado, se

recomendable para la realización de aplicaciones web dinámicas porque es fácil

en el manejo de datos y tiene gran cantidad de efectos visuales.

“JavaScript es un lenguaje de programación que se utiliza principalmente

para crear páginas web capaces de interactuar con el usuario” (Mohedano, Saíz,

& Salazar Román, 2012).

JavaScript es un lenguaje de programación que funciona del lado del

cliente, el permite tener acceso a los objetos DOM, hacer interacciones como

aparecer o esconder texto, realizar un alert entre otros.

(Mohedano, Saíz, & Salazar Román, 2012) Indico: Proceso de edición y

ejecución de un programa JavaScript.

Editar código JavaScript

Integrar código JavaScript con código HTML

Abrir con un código navegador

JQUERY

Gráfico 20 Jquery

Elaboración: MACWORLD

Fuente: https://brand.jquery.org/logos/

Page 61: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

41

“Jquery es una biblioteca de JavaScript cross-browser desarrollada para

simplificar los scripts client-side que interactúan con el HTML. Esta fue lanzada en

enero de 2006 en el BarCamp de Nueva York por John Resig” (Ayoze Castillo,

2017, pág. 358). Es decir que el jquery es un framework o librería que se utiliza en

JavaScript para poder hacer tareas mucho más rápido y también interactuar en el

sitio web.

“Jquery se define como una librería “pequeña, rápida y con muchas

características”, que simplifica el trabajo con el DOM de HTLM, el manejo de

eventos, animaciones, el trabajo, con AJAX y que, además, sirve para desarrollar

para múltiples navegadores” (Casanoba & Ceci, 2016).

El uso de esta librería nos ayuda en nuestro código ya que es muy versátil

y veloz para animar, es utilizado por desarrolladores de sitios web para dinamizar

sus páginas HTML y simplifica las tareas más comunes de JavaScript.

(Ayoze Castillo, 2017) Indico: Las principales funcionalidades del jQuery son:

Resolución de la impatibilidad entre los navegadores.

Reducción de código

Reutilización del código a través de plugins.

Utilización de una vasta cantidad de plugins creados por otros

desarrolladores.

Trabaja con AJAX y DOM

Implementación segura de recursos de CSS1, CSS2 Y CSS3.

DATATABLES

Gráfico 21 Datatables

Elaboración: ANAKEEN

Fuente: https://www.anakeen.com

Page 62: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

42

“Un objeto Dataset está formado por una colección de tablas, relaciones y

restricciones. En ADO .NET, los objetos DataTable se utilizan para representar las

tablas de un DataSet” (Microsoft, s.f.). Es una librería de jquery que permite añadir

funcionalidades como pagine, búsqueda, etc. en una tabla html.

“Se puede crear y utilizar DataTable de manera independiente o como

miembro de un DataSet y los objetos DataTable se pueden utilizar también en

combinación con otros objetos de .NET framework, incluido dataView” (Microsoft,

s.f.).

DataTable es un plugins que sirve en la funcionalidad de ordenación de

registro, y búsqueda, ayuda mucho al usuario.

CSS

Gráfico 22 CSS

Elaboración: JAVATPOINT

Fuente: https://www.javatpoint.com/css-tutorial

Las hojas de estilos aparecieron poco después que el lenguaje de

etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó

la necesidad de definir un mecanismo que permitiera aplicar de forma consistente

diferentes estilos a los documentos electrónicos. (Librosweb, s.f.)

Las hojas de estilos son muy usadas ya que permiten añadir una interfaz

básica de forma correcta y rápida, describe como debe ser renderizado el

elemento estructurado en pantalla.

Page 63: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

43

CSS son las iniciales de Cascading Style Sheets (en español, hojas de

estilo en cascada) y se refiere a una técnica utilizada para determinar la apariencia

de una página web. El HTML son las paredes de la casa y el código CSS sería la

pintura y las cortinas que hacen que el HTML adquiera una apariencia atractiva,

hasta la posición de los elementos dentro de la página web. (Panzano, Arrabal, &

Pedros, 2012)

CSS aporta muchas herramientas y funcionalidades ya que es muy sencillo

y sin complicaciones, en las hojas de estilos podemos modificar cada elemento y

puede lograr obtener efectos dinámicos en las páginas.

BOOTSTRAP

Gráfico 23 BOOTSTRAP

Elaboración: TWITTER

Fuente: https://getbootstrap.com/docs/3.3/about/

Bootstrap, es un framework originalmente creado por twitter, que permite

crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la

interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio

web se adapta automáticamente al tamaño de una pc, una Tablet otro dispositivo.

Esta técnica de diseño y desarrollo se conoce como Responsive Design o Diseño

adaptivo. (Jias, 2015)

Es un framework para diseño de sitios y aplicaciones web. Contiene

plantillas de diseño con tipografía, formularios, botones, cuadros, menús de

Page 64: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

44

navegación y otros elementos de diseño basado en HTML y CSS, así como

extensiones de JavaScript.

“Este framework te abstrae de tener que preocuparte por las medias

queries y los porcentajes en tus CSS para hacer una web Responsive, facilitando

la programación del site” (Jias, 2015). Es decir que puedes tener una web bien

organizada de forma visual ya que su manejo es rápido y adaptable a tu dispositivo

y resolución.

HIGHCHARTS

Gráfico 24 HIGHCHARTS

Elaboración: Highcharts Demos

Fuente: https://www.highcharts.com/demo

“Es una librería escrita en Javascript y Ajax capaz de crear gráficos

estadísticos interactivos de todo tipo y estilo, como por ejemplo líneas, tortas, de

barras, áreas, columnas entre otras” (Puro Software, 2010). Esta librería es

sencilla e interactiva que ayuda al usuario para insertar graficas en su sitio web.

“Una de las ventajas principales de este script, es que lo podrás utilizar en

tu proyecto web, sin necesidad de instalar plugins externos en la computadora del

usuario para que pueda visualizar las gráficas, por ejemplo, Flash o Java” (Puro

Software, 2010). Es beneficioso para el usuario porque es código abierto y cuenta

con todas las características para crear todo tipo de gráficos estadísticos, es una

interfaz amigable para los sitios web.

“Cualquier navegador web que tenga habilitado el uso de Javascript, como

la mayoría, podrá mostrar los charts. Solo utiliza y necesita dos archivos para

funcionar” (Puro Software, 2010):

Page 65: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

45

La librería Javascript Highcharts.js

Y la conocida librería jQuery o Mootools.

Requisitos de instalación

No se requiere ninguna configuración o requerimiento en particular en el

servidor web para ejecutar el script, como tampoco tecnologías de scripts del lado

del servidor (PHP y ASP.NET por ejemplo), de este modo incluso puede funcionar

en páginas html estáticas. (Puro Software, 2010)

No se necesita ninguna configuración en especial porque Highcharts es

una librería que viene en los archivos de js, simplemente es descargar la librería

y usarla, incluso en html estático.

Page 66: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

46

FUNDAMENTACIÓN LEGAL

CONSTITUCIÓN DE LA RÉPUBLICA DEL ECUADOR

CAPÍTULO SEXTO

TRABAJO Y PRODUCCIÓN

SECCIÓN SEGUNDA

TIPOS DE PROPIEDAD

Art. 322.- Se reconoce la propiedad intelectual de acuerdo con las condiciones

que señale la ley. Se prohíbe toda forma de apropiación de conocimientos

colectivo, en el ámbito de las ciencias, tecnología y saberes ancestrales. Se

prohíbe también la apropiación sobre los recursos genéticos que contienen la

diversidad biológica y agro-biodiversidad.

REGLAMENTO DE CURSO DE GRADUACIÓN DE LA CARRERA DE

INGENIERÍA EN SISTEMAS

De la propiedad intelectual del proyecto

Art. 33.- La autoría del Proyecto de Grado pertenece al (o los) egresados que lo

realizaron, correspondiéndole a la Universidad los derechos que generen la

aplicación del producto final.

REGISTRÓ OFICIAL N° 320

LEY DE PROPIEDAD INTELECTUAL

SECCIÓN V

DISPOSICIONES ESPECIALES SOBRE CIERTAS OBRAS

PARÁGRAFO PRIMERO

Page 67: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

47

DE LOS PROGRAMADORES DE ORDENADOR

Art. 28.- Los programas de ordenador se consideran como literarios y se protegen

como tales. Dicha protección se otorga independientemente de que hayan sido

incorporado en un ordenador y cualquiera sea la forma en que estén expresados,

ya sea en forma legible por el hombre (código fuente) o en forma legible por

máquina (código objeto), ya sean programas operativos y programas aplicativos,

incluyendo diagramas de flujo, planos, manuales de uso, y en general, aquellos

elementos que conformen la estructura, secuencial y organización del programa.

Art. 29.- Es titular de un programa de ordenador, el productor, esto es la persona

natural o jurídica que toma la iniciativa y responsabilidad de la realización de las

obras. Se considerará titular, salvo prueba de contrario, a la persona cuyo nombre

conste en la obra o sus copias de la forma usual.

Dicho titular está demás legitimado para ejercer en nombre propio los derechos

morales sobre la obra, incluyendo la facultad para decidir sobre su divulgación.

El productor tendrá el derecho exclusivo de realizar, autorizar o prohibir la

realización de modificaciones o versiones sucesivas del programa, y de

programas derivado del mismo.

Las disposiciones del presente artículo podrán ser modificadas mediante acuerdo

entre los autores y el productor.

Art. 30.- La adquisición de un ejemplar de un programa de ordenador que haya

circulado lícitamente, autoriza a su propietario a realizar exclusivamente:

a) Una copia de la versión del programa legible por máquina (código objeto)

con fines de seguridad o resguardo;

Page 68: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

48

b) Fijar el programa en la memoria interna del aparato, ya sea que dicha

fijación desaparezca o no al apagarlo, con el único fin y en la medida

necesaria para utilizar el programa; y,

c) Salvo prohibición expresa, adaptar el programa para su exclusivo uso

personal, siempre que se limite al uso normal previsto en la licencia. El

adquiriente no podrá transferir a ningún título el soporte que contenga el

programa así adaptado, ni podrá utilizarlo de ninguna otra forma sin

autorización expresa, según las reglas generales.

Se requerirá de autorización del titular de los derechos para cualquier otra

utilización, inclusive la reproducción para fines de uso personal o el

aprovechamiento del programa por varias personas, a través de redes u otros

sistemas análogos, conocidos o por conocerse.

Art. 31.- No se considerará que exista arrendamiento de un programa de

ordenador cuando este no sea el objeto esencial de dicho contrato. Se considerará

que el programa es el objeto esencial cuando la funcionalidad del objeto materia

del contrato, dependa directamente del programa de ordenador suministrado con

dicho objeto; como cuando se arrienda un ordenador con programas de ordenador

instalados previamente.

Art. 32.- Las excepciones al derecho de autor establecidas en los artículos 30 y

31 son las únicas aplicables respecto a los programas de ordenador.

Las normas contenidas en el presente párrafo se interpretarán de manera que su

aplicación no perjudique la normal explotación de la obra o los intereses legítimos

del titular de los derechos.

Page 69: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

49

DECRETO 1014

SOBRE EL USO DEL SOFTWARE LIBRE

Art. 1: Establecer como política pública para las entidades de administración

pública central la utilización del Software Libre en sus sistemas y equipamientos

informáticos.

Art. 2: Se entiende por software libre, a los programas de computación que se

pueden utilizar y distribuir sin restricción alguna, que permitan el acceso a los

códigos fuentes y que sus aplicaciones puedan ser mejoradas. Estos programas

de computación tienen las siguientes libertades:

Utilización de programa con cualquier propósito de uso común.

Distribución de copias sin restricción alguna.

Estudio y modificación de programa (Requisito: código fuente disponible).

Publicación del programa mejorado (Requisito: código fuente disponible).

Art. 3: Las entidades de la administración pública central previa a la instalación

del software libre en sus equipos, deberán verificar la existencia de capacidad

técnica que brinde el soporte necesario para este tipo de software.

Art. 4: Se faculta la utilización de software propietario (no libre) únicamente

cuando no exista una solución de software libre que supla las necesidades

requeridas, o cuando esté en riesgo de seguridad nacional, o cuando el proyecto

informático se encuentre en un punto de no retorno.

Art. 5: Tanto para software libre como software propietario, siempre y cuando se

satisfagan los requerimientos.

Art. 6: La subsecretaría de Informática como órgano regulador y ejecutor de las

políticas y proyectos informáticos en las entidades de Gobierno Central deberá

realizar el control y seguimiento de este Decreto.

Art. 7: Encargue de la ejecución de este decreto los señores Ministros

Coordinadores y el señor Secretario General de la Administración Pública y

Comunicación.

Page 70: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

50

CONSTITUCIÓN DE LA REPUBLICA DEL ECUADOR 2008

Art. 26.- La educación es un derecho de las personas a lo largo de su vida y un

deber ineludible e inexcusable del Estado. Constituye un área prioritaria de la

política pública y de la inversión estatal, garantía de la igualdad e inclusión social

y condición indispensable para el buen vivir. Las personas, las familias y la

sociedad tienen el derecho y la responsabilidad de participar en el proceso

educativo.

Art. 343.- El sistema nacional de educación tendrá como finalidad el desarrollo de

capacidades y potencialidades individuales y colectivas de la población, que

posibiliten el aprendizaje, y la generación y utilización de conocimientos, técnicas,

saberes, artes y cultura. El sistema tendrá como centro al sujeto que aprende, y

funcionará de manera flexible y dinámica, incluyente, eficaz y eficiente.

HIPÓTESIS

La aplicación de un sistema WEB, para apoyo de gestión a los docentes inciden

en la mejora y desempeño escolar de los estudiantes de Educación Básica

Superior del Colegio Fiscal Assad Bucaram Elmhalin.

VARIABLES DE LA INVESTIGACIÓN

Variable independiente.

Desarrollo de un sistema Enseñanza Aprendizaje empleando SCRUM

Variables dependientes.

Desempeño Escolar de la Educación General Básica Superior del Colegio

Fiscal Assad Bucaram Elmhalin.

Page 71: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

51

DEFINICIONES CONCEPTUALES

- SCRUM: Es una metodología de desarrollo ágil que permite desarrollar

software funcional en base a las necesidades del cliente.

- PHP: Lenguaje de programación Orientado a Objetos.

- MVC: Arquitectura de desarrollo web (Model - View - Controllers).

- HTML: Lenguaje para el desarrollo de interfaces que permiten al usuario

interactuar con el sistema y manipular los datos.

- YII FRAMEWORK: Yii framework se utilizara para el desarrollo de la

aplicación web en PHP y basado en programación orientada a objetos.

- CSS: Hojas de estilos en cascada y se refiere a una técnica utilizada para

determinar la apariencia de una página web.

Page 72: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

52

CAPITULO III

METODOLOGÍA DE LA INVESTIGACIÓN

Propuesta tecnológica

El proyecto de titulación diseñado se presenta como una solución

tecnológica y académica que ayude a las necesidades que tiene el Colegio Fiscal

Assad Bucaram Elmhalin, ya que sus procesos de elaboración de cuestionarios

se llevan normalmente cada mes.

Esta aplicación web está dividida por siete módulos desarrollados, y

utilizando lenguaje de programación Yii Framework, que permitirá registrar cada

fase del proceso de la elaboración de las preguntas y formación del cuestionario.

Además, se contará con el apoyo de la gestión académica en forma digital, y será

almacenada en una base de datos. A través de alerta en el perfil del usuario se

mantendrá comunicado al usuario informando de las pruebas que deberá realizar.

Con la ayuda de esta aplicación web se podrá brindar un mejor apoyo a la

gestión académica de los docentes y estudiantes, disminuyendo el riesgo de que

un estudiante se vea afectado en una materia, porque se desarrollará una interfaz

en la que se podrá visualizar las evaluaciones que hayan realizado.

Análisis de Factibilidad

Este sistema web es una herramienta de gran ayuda para el apoyo de la

gestión académica de los docentes y estudiantes con la finalidad de llevar los

controles de las evaluaciones y realización de cuestionarios. Los procesos son

manejados por los usuarios que laboran en la institución académica, y el sistema

les presenta un ambiente flexible en el diseño, amigable, y los procesos que se

presentan al usuario son asignados dependiendo del rol que desempeñe para la

optimización de tiempo y recursos.

Page 73: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

53

Todos los procesos se guardarán en un historial, el sistema mostrará alerta

en el perfil del estudiante y enviará notificaciones al correo electrónico tanto al

docente como a los estudiantes para que realice la gestión adecuada en su labor.

Por lo que permitirá una buena gestión y coordinación en sus labores diarias en la

institución.

Factibilidad Operacional

La funcionalidad de esta aplicación web ayuda a la institución educativa en

la preparación de los estudiantes mediante un simulador de pruebas académicas

en un entorno web, por lo que el estudiante aumentará su nivel de seguridad al

momento de rendir una prueba real, y por otra parte ayudará al docente en la

publicación de cuestionarios y mantener un mejor seguimiento en la realización

simulacros de pruebas; mediante cuadros estadísticos sobre los cuestionarios

realizados de las materias.

Factibilidad Técnica

El análisis de factibilidad técnica para la elaboración de la aplicación web en el

colegio Fiscal Assad Bucaram Elmhalin se estableció en las especificaciones

técnicas que se debe tener para el desarrollo del proyecto son:

Cuadro 3 Factibilidad Técnica.

Descripción Características

Sistema Operativo Linux o Windows 7

Lenguaje de Programación PHP Yii Framework

Lenguaje de Salida de Hipertexto HTML 5

Base de Datos MySQL 5.0

Framework YII Framework 1.1.19

Servidor Web Apache 2.0

Navegadores Firefox - Google Chrome

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

Page 74: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

54

Cuadro 4 Hardware para Desarrollo

Especificaciones del Equipo

Procesador: Intel ® Core™ i5-2450M CPU @ 2.50GHz

Memoria Instalada (RAM): 4,00 GB

Tipo de sistema: Sistema operativo de 64 bits, procesador x64

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

Cuadro 5 Software para Desarrollo

Especificaciones

Sistema Operativo Windows 7

Servidor: XAMPP

Base de Datos: MySQL

Lenguaje de Programación: Yii Framework

Navegador: Chrome, Firefox

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

Factibilidad Legal

Este software está básicamente orientado para la gestión y apoyo de

docentes y estudiantes de la institución fiscal, cuyos requerimientos legales están

controlados dentro de la funcionalidad.

Todos los equipos y el software son independientes, como se lo indicó en

el capítulo II, las leyes ayudan a cumplir con el orden y las autorizaciones para

que su procesamiento sea legal respetando el derecho de autor, esto es para que

el sistema se encuentre bajo un sistema operativo 100%, además el sistema se

encuentra en óptimas condiciones, con la ayuda de las herramientas tecnológicas

ayudan a cultivar un mejor futuro.

Page 75: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

55

Factibilidad Económica

El proyecto a desarrollar es factible para el colegio fiscal Assad Bucaram

Elmhalin porque va a optimizar y apoyar la gestión de los docentes y estudiantes.

Los costos necesarios para el desarrollo del sistema web son las siguientes:

Cuadro 6 Costo de Recursos Humanos

Cargo Horas

Trabajadas

Precio

Unitario

Subtotal

Desarrollador 100 h $ 10,00 $ 1.000,00

Total $ 1.000,00

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

Cuadro 7 Costo de Recursos Tecnológicos

Descripción Cantidad Precio

Unitario

Subtotal

Laptop 1 $ 890,00 $ 890,00

Total $ 890,00

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

Cuadro 8 Costo de Recursos Hardware

Descripción Cantidad Precio

Unitario

Subtotal

Licencia PHP 1 $ 0,0 $ 0,00

Licencia MySQL 1 $ 0,0 $ 0,00

Licencia XAMPP 1 $ 0,0 $ 0,00

Total $ 0,00

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

Page 76: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

56

Cuadro 9 Costo de Recursos Materiales y Viáticos

Materiales Cantidad Precio Unitario Subtotal

Resma Papel Bond A4 4 $ 4,00 $ 16,00

Cartuchos para

impresora

2 $ 30,00 $ 60,00

Movilización $ 34,00 $ 34,00

Total $ 110,00

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

Cuadro 10 Flujo de General de Pago

Recursos Costos

Recursos Humanos $ 1.000,00

Recursos Tecnológicos $ 890,00

Recursos Materiales y Viáticos $ 110,00

Total $ 2.000,00

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: William Jácome Ch / Hingri Pihuave P

ETAPAS DE LA METODOLOGÍA DEL PROYECTO

Utilizamos la metodología Scrum, para obtener mejor resultados y

disminuir los riesgos de cada etapa del sprint durante el desarrollo del proyecto.

Identificando inconvenientes que nos permitan adelantar en cada etapa, este

proceso nos ayuda y beneficia al avance de nuestro software.

El proceso de Scrum es colaborativo en cuanto al trabajo en equipo el cual

nos ayuda a tener un excelente resultado, este trabajo en equipo son más

productivos ya que los integrantes cumplen con entregas de tareas asignadas y

se encuentran unidos y comunicados entre sí, brindan confianza entre sus

Page 77: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

57

conocimientos e identifican más rápido los problemas y sus correcciones son

efectivas, esto produce que la competitividad, la flexibilidad, la innovación y la

producción sean primordiales. Este proyecto se divide en 7 sprint las cuales se

detallan a continuación:

Sprint 0 - Análisis de requerimientos

En la ejecución de este sprint se empezó la reunión con el Product Owner

para revisar sus requerimientos que se encuentran detallados en el alcance del

proyecto y definir las actividades a realizar durante la ejecución del mismo:

Definir el tiempo de duración de cada reunión.

Definir el motor de la base de datos para el sistema.

Definir el framework del lenguaje de programación PHP que se utilizará.

Definir los componentes del front end que se utilizará.

Definir el tiempo que tomará cada ejecución de cada sprint.

Definir el tiempo de duración del proyecto según la duración de todos los

sprints.

Definir las actividades del equipo de trabajo en los sprints.

Sprint 1 - Diseño de la aplicación

Diseño de los prototipos de todo el sistema.

Revisión de los prototipos con el Product Owner y corrección de los

prototipos.

Definir la estructura del modelo entidad relación de la base de datos.

Creación de las tablas con sus respectivas relaciones de claves primarias

y foráneas.

Especificar el componente a utilizar para la validación de formulario para

el ingreso de información.

Definir la forma que se mostraran las diferentes bandejas de información

que mostrar el sistema.

Page 78: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

58

En el cuadro No. 11 se refiere a los casos de uso más significativo del proyecto

que se analizaron durante la etapa del diseño de la interface y análisis del

levantamiento de información:

Cuadro 11 Casos de Uso realizados

Casos de Uso Descripción Referencia

Login Inicio de sesión al sistema Ver Figura 22

Recupera

contraseña

Usuario olvida contraseña Ver Figura 23

Asignar opciones

perfil

Selección de perfil de usuario para carga

de opciones

Ver Figura 24

Restablecer

contraseña

contraseña mediante usuario

administrador

Ver Figura 25

Asignar opciones Asignar opciones al perfil de usuario Ver Figura 26

Registrar usuario Registro de Usuario Ver Figura 27

Asignar

asignaturas a los

cursos

Asignar asignaturas a curso

Ver Figura 28

Crear cuestionarios Creación de cuestionario de estudio Ver Figura 29

Notificación

resolución

cuestionario

Notificación de resolución de cuestionario

Ver Figura 30

Resolución

cuestionario

Resolución de cuestionario Ver Figura 31

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 79: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

59

Cuadro 12 Login

Caso de uso: Login

Actores: Usuario, Sistema, Base de datos

Propósito: Verifica si un usuario puede o no acceder a la aplicación web.

Resumen: El individuo ingresa su usuario y contraseña, el sistema valida si puede o no ingresar a la aplicación.

Precondiciones: El sistema debe recibir la siguiente información: Nombre de usuario y contraseña

Flujo principal: 1. El individuo ingresa a la página de Login y digita su usuario y

contraseña 2. El sistema lee los datos 3. Consulta a la base y valida la información ingresada 4. Redirecciona a la página de inicio de la aplicación web

Flujo excepción: E1: Mostrar mensaje de campos obligatorios E2: Mostrar mensaje de que el usuario no existe

Resultado a obtener: Usuario autenticado y direccionado a la página de inicio del sistema

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 25 Login

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 80: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

60

Cuadro 13 Usuario Olvida Contraseña

Caso de uso: Usuario olvida contraseña

Actores: Usuario, Servidor SMTP, Sistema, Base de datos

Propósito: Restablecer la contraseña del usuario.

Resumen: El individuo accede a una pantalla emergente donde debe ingresar el usuario o su email para que el sistema restablezca su contraseña

Precondiciones: El sistema debe recibir la siguiente información: Nombre de usuario o email

Flujo principal: 1. El individuo ingresa a la página de Login cliquea un link que levanta

una pantalla emergente 2. Ingresa el usuario o su correo 3. El sistema valida la información 4. consulta la configuración SMTP 5. Envía un email con la nueva contraseña 6. El usuario revisa su bandeja mensaje 7. Caso de uso Loguearse

Flujo excepción: E1: Mostrar mensaje de campos obligatorios E2: Mostrar mensaje de que el usuario o el email no existe en el sistema E3: Problema de timeout por él envió de mensaje E4: Bloqueo de puertos E5: Error en la configuración SMTP

Resultado a obtener: Restablece la contraseña del usuario para que pueda ingresar al sistema

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 26 Usuario olvida Contraseña

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 81: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

61

Cuadro 14 Perfil Usuario

Caso de uso: Selección de perfil de usuario para carga de opciones

Actores: Sistema, Usuario, Base de datos

Propósito: Restablecer la contraseña del usuario.

Resumen: El sistema comprueba de que el usuario tiene más de un perfil y le muestra una bandeja con sus perfiles para que el usuario seleccione uno para cargar sus respectivas opciones.

Precondiciones: El usuario debe estar autenticado

Flujo principal: 1. El sistema consulta los perfiles que tiene el usuario autenticado en

la aplicación 2. Muestra una bandeja de información en base a los perfiles que

tiene el usuario 3. El usuario autenticado selecciona un perfil 4. El sistema consulta a la base las opciones que tiene asignado 5. El sistema re-dibuja el HTML del sidebar de la master page

Flujo excepción: E1: El usuario no tenga un perfil asignado

Resultado a obtener: Dibujado del HTML del sidebar de la master page en base al perfil del usuario

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 27 Perfil usuario

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 82: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

62

Cuadro 15 Restablecer contraseña

Caso de uso: contraseña mediante usuario administrador

Actores: Sistema, Usuario Administrador, Base de datos

Propósito: Restablecer la contraseña del usuario.

Resumen: El usuario administrador consulta los usuarios activos en el sistema y restablece su contraseña de inicio de sesión por una contraseña temporal.

Precondiciones: Solo el usuario administrador tiene el privilegio de realizar este proceso

Flujo principal: 1. El sistema consulta los perfiles que tiene el usuario autenticado en

la aplicación 2. Muestra una bandeja de información en base a los perfiles que

tiene el usuario 3. El usuario autenticado selecciona un perfil 4. El sistema consulta a la base las opciones que tiene asignado 5. El sistema re-dibuja el HTML del sidebar de la master page

Flujo excepción: E1: Problema de timeout por él envió de mensaje E2: Bloqueo de puertos E3: Error en la configuración SMTP

Resultado a obtener: Restablece la contraseña de los usuarios por una contraseña temporal

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 28 Restablecer Contraseña

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 83: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

63

Cuadro 16 Asignar Opción al perfil

Caso de uso: Asignar opciones al perfil de usuario

Actores: Sistema, Usuario Administrador, Base de datos

Propósito: Asigna las opciones activas del sistema a un perfil en especifico

Resumen: El administrador del sitio selecciona un perfil y se le cargar se forma asíncrona una bandeja con todas las opciones disponibles para que sean asignada.

Precondiciones: Solo el usuario administrador tiene el privilegio de realizar este proceso

Flujo principal: 1. El administrador selecciona un perfil 2. El sistema de forma asíncrona carga una bandeja con las opciones

activas 3. El administrador chequea las opciones que desee asignar al perfil 4. El administrador pulsar guardar los cambios 5. El sistema elimina las opciones del perfil y registra los nuevos

cambios

Flujo excepción: E1: El usuario no chequee ninguna opción

Resultado a obtener: EL perfil se le reasigna opciones del sistema

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 29 Asignar Opción al perfil

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 84: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

64

Cuadro 17 Registro de Usuario

Caso de uso: Registro de Usuario

Actores: Sistema, Usuario Administrador, Base de datos

Propósito: Registrar un nuevo usuario al sistema.

Resumen: El administrador ingresa la información del usuario y especifica los perfiles que tendrá asignada.

Precondiciones: Debe tener la información personal del usuario que son: Nombres y apellidos, cedula y correo electrónico

Flujo principal: 1. El administrador ingresa la información del usuario 2. El administrador chequea los perfiles que tendrá asignado el

usuario 3. Envía a crear el usuario 4. El sistema procesa y valida la información 5. Guarda en la base el nuevo usuario

Flujo excepción: E1: El usuario ya existe E2: El email ya existe E3: No especifica los perfiles del usuario E4: La cedula no es valida

Resultado a obtener: Usuario creado y habilitado en el sistema

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 30 Registro de Usuario

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 85: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

65

Cuadro 18 Asignar Asignaturas al Curso

Caso de uso: Asignar asignaturas a curso

Actores: Sistema, Usuario Vicerrectorado, Base de datos

Propósito: Registra las asignaturas a un determinado curso

Resumen: El usuario especifica el nivel académico del curso y en base al nivel de educación se cargará una bandeja con las asignaturas disponible al curso

Precondiciones: Debe estar creados los cursos en el periodo electivo en curso Debe estar registradas las diferentes asignaturas en la base de datos

Flujo principal: 1. El usuario selecciona el nivel académico del curso 2. El usuario selecciona el nivel de educación de las asignaturas 3. El sistema de forma asíncrona muestra una bandeja con las

asignaturas disponibles 4. El usuario chequea las asignar que vera el curso en el periodo

electivo 5. El usuario guarda los cambios 6. El sistema registra el curso en el sistema

Flujo excepción: E1: El usuario no chequee ninguna asignatura

Resultado a obtener: Asignado las asignaturas a un curso en un periodo electivo

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 31 Asignar asignaturas al curso

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 86: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

66

Cuadro 19 Creación de Cuestionario

Caso de uso: Creación de cuestionario de estudio

Actores: Sistema, Docente, Base de datos

Propósito: Crea un cuestionario y lo publica en el sistema

Resumen: El usuario con perfil de docente crea un cuestionario de estudio lo genera y lo publica en el sistema, notificando a los estudiantes que estén recibiendo clase con el mismo.

Precondiciones: Debe estar creados los cursos en el periodo electivo en curso Debe estar registradas las diferentes asignaturas en la base de datos

Flujo principal: 1. El usuario docente ingresa la información del cuestionario 2. Selecciona el tipo de cuestionario 3. En base al tipo de cuestionario se crear las preguntas 4. El usuario docente especifica la respuesta y puntaje a tener 5. Visualización previa del cuestionario antes de enviar a guardar 6. Envía a guardar el cuestionario a la base de datos 7. El sistema procesa y valida la información enviada

Flujo excepción: E1: El usuario no especifique el tipo de cuestionario E2: No especifique la respuesta de la pregunta

Resultado a obtener: Nuevo cuestionario lista para ser resuelto por los estudiantes

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 32 Creación de Cuestionarios

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 87: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

67

Cuadro 20 Notificaciones de Resolución Cuestionario

Caso de uso: Notificación de resolución de cuestionario

Actores: Sistema, Estudiante, Base de datos

Propósito: Notificar al estudiante que tiene un cuestionario pendiente por resolver.

Resumen: Los usuarios con perfil de estudiante al ingresar al sistema se le notifica con una alerta de que tiene un cuestionario pendiente por resolver y el sistema lo dirigirá a la bandeja de cuestionarios del estudiante para que seleccione el cuestionario a resolver

Precondiciones: El docente debió publicar el cuestionario desde su sesión

Flujo principal: 1. El usuario inicia su sesión 2. El sistema enviara una alerta al usuario de que tiene un

cuestionario pendiente por resolver 3. El sistema bloquea cualquier otra opción y lo redirige a la bandeja

de cuestionario 4. El usuario selecciona el cuestionario 5. Caso de uso Resolución de Cuestionario

Flujo excepción:

Resultado a obtener: Aviso de cuestionario pendientes y visualización del mismo

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 33 Notificaciones de Resolución Cuestionario

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 88: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

68

Cuadro 21 Resolución de Cuestionario

Caso de uso: Resolución de Cuestionario

Actores: Sistema, Usuario con perfil de Estudiante, Base de datos

Propósito: Resolución de cuestionario de estudio

Resumen: El estudiante selecciona el cuestionario si le presenta un formulario con las preguntas e inicia el proceso de resolución una vez culminada guarda su proceso y lo envía a la base de datos

Precondiciones: Seleccionar el cuestionario pendiente a resolver

Flujo principal: 1. Selecciona el cuestionario 2. El sistema consulta y genera un formulario de pregunta en base al

cuestionario seleccionado. 3. El usuario responde las preguntas y guarda los cambios 4. El sistema genera una nota en base a lo respondido 5. El sistema envía los resultados de la prueba al docente que elaboro

la prueba

Flujo excepción:

Resultado a obtener: Cuestionario resuelto

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Gráfico 34 Resolución de Cuestionario

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 89: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

69

Gráfico 35 Diagrama de base de datos

Elaboración: William Jácome Ch / Hingri Pihuave P.

Fuente: Elaboración propia

Page 90: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

70

Sprint 2 - Login y Menú principal

Analizar el desarrollo de la pantalla del login y menú principal del sistema.

o Definición de las opciones que tendrá la aplicación

o Definición de los perfiles de usuario para la aplicación

o Definición del mecanismo para restablecer contraseña de los

usuarios

Desarrollar vista y formulario de la pantalla login.

Desarrollar procedimiento de base de datos para la verificar existencia de

usuarios.

Desarrollar procedimiento para validar el usuario para restablecer su

contraseña

Desarrollar el controlador y modelo para la vista Login

Desarrollar vista y formulario de la pantalla menú principal.

Desarrollar procedimiento de base de datos para consultar opciones según

el perfil del usuario.

Probar y corregir las pantallas Login y Menú principal.

Gráfico 36 Login

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Page 91: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

71

Gráfico 37 Menú Principal

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Sprint 3 - Programación del Módulo Seguridad

Tarea N°1: Bandeja de Usuarios del sistema

Analizar el desarrollo de la pantalla usuarios.

Desarrollar vista y de la pantalla usuarios.

Desarrollar el action para insertar, modificar, eliminar registros de las

siguientes tablas Persona, Usuario, Docente y Estudiante

Desarrollar el action para Cambiar el estado de los usuarios en el sistema.

Desarrollar procedimiento almacenado para la consulta general y por el

estado del usuario.

Desarrollar el controlador y modelo para la vista Usuarios.

Realizar pruebas de consulta, ingreso, modificación, habilitar e inactivar

usuarios.

Page 92: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

72

Gráfico 38 Opción Usuarios

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Gráfico 39 Modificación Usuarios

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Tarea N°2: Asignación de opciones a perfil de usuario

Analizar el desarrollo de la pantalla asignar opciones.

Desarrollar vista y de la pantalla para la asignación de opciones.

Page 93: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

73

Desarrollar el procedimiento para insertar y eliminar los registros en la tabla

Perfilopciones

Desarrollar el procedimiento consultar las opciones que tiene asignada un

perfil

Realizar pruebas de asignación de opciones a perfil seleccionado

Gráfico 40 Consulta de opciones asignadas al perfil

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Tarea N°3: Restablecer contraseña desde el perfil administrador

Analizar el desarrollo de la pantalla Restablecer contraseña

Desarrollar la vista y el proceso de envío de email.

Desarrollar el procedimiento para consultar el usuario que se restablecerá

la contraseña.

Elaboración del arte de cuerpo del email.

Crear el proceso para la generación automática de contraseñas

temporales

Realizar pruebas de envío y generación de contraseñas.

Page 94: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

74

Gráfico 41 Bandeja de usuarios activos

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Gráfico 42 Restablecer Contraseña

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Sprint 4 - Programación del Módulo Académico

Tarea N°1: Mantenimiento de cursos

Analizar el desarrollo de la pantalla curso

Page 95: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

75

Desarrollar el proceso de consultas, registro y actualización de curso

Realizar pruebas del mantenimiento de la tabla Curso.

Gráfico 43 Listado de Cursos

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Gráfico 44 Registro de Curso

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Tarea N°2: Mantenimiento de Asignaturas

Analizar el desarrollo de la pantalla Asignaturas

Desarrollar el proceso de consultas, registro y actualización de asignatura

Realizar pruebas del mantenimiento de la tabla Asignatura.

Page 96: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

76

Gráfico 45 Listado de Asignaturas

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Gráfico 46 Opción Asignatura

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Tarea N°3: Asignación de asignaturas a cursos del periodo electivo

Analizar el desarrollo de la pantalla Asignaturas – curso

Desarrollar el proceso de anidación de lista desplegable para la selección

de curso.

Page 97: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

77

Desarrollar el proceso consulta para filtrar la bandeja de Asignaturas según

el nivel educativo

Desarrollar el proceso de consultas, registro y actualización de asignatura

Realizar pruebas del mantenimiento de la tabla Asignatura Curso

Gráfico 47 Listado de cursos con asignaturas

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Gráfico 48 Opción selección de asignaturas a los cursos

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Page 98: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

78

Tarea N°4: Asignación de docentes a asignaturas a impartir en los cursos del

periodo electivo

Analizar el desarrollo de las pantallas docentes y docente.

Desarrollar la bandeja de docentes

Desarrollar el formulario de mantenimiento de docentes

Validar la selección de asignaturas que impartirá el docente.

Envío de notificación al docente de las asignaturas que impartirán en el

periodo electivo

Pruebas de asignación de asignaturas y curso

Pruebas de envío de notificación al docente de las asignaturas a impartir

Gráfico 49 Opción docentes

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Sprint 5 - Programación del Módulo Cuestionario

Tarea N°1: Elaboración de Cuestionario

Analizar el desarrollo de la pantalla Elaborar cuestionario

Desarrollar el proceso de consultas de las materias disponibles que el

docente tiene para elaborar cuestionarios

Crear proceso de registro de ficha de cuestionario

Page 99: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

79

Crear proceso de registro de preguntas

Crear proceso de visualización de preguntas

Crear proceso de descarga de cuestionario.

Pruebas de elaboración de cuestionario y publicación del mismo.

Gráfico 50 Opción elaborar cuestionario

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Gráfico 51 Opción crear preguntas del cuestionario

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Page 100: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

80

Sprint 6 - Configuración del Servidor

Instalación de sistema operativo.

Instalación de apache en el servidor virtualizado

Instalación de Yii Framework

Sprint 7 - Pruebas del Sistema

Pruebas de unión de cada módulo

Correcciones.

ENTREGABLES DE PROYECTO

Entre los entregables del proyecto constará:

Manual Técnico.- El manual detalla toda la información de los recursos

utilizado dentro del desarrollo, instalación del yii framework, instalación de la base

de datos e instalación del sistema. Se entregará de forma digital e impreso.

Manual Usuario.- El manual es una guía que ayuda a entender el

funcionamiento del sistema, explicación de cada uno de los módulos con sus

debidas opciones, verificación de las alertas del sistema, y manejo de cada

pantalla con texto e imágenes para que facilite la comprensión.

Código Fuente.- Es el archivo con las instrucciones necesarias

elaboradas en un lenguaje de programación que contiene cada una de los

archivos JS, librerías, CSS, modelo entidad relación, procedimiento para el

funcionamiento del sistema y script de cada tabla.

Page 101: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

81

CRITERIOS DE VALIDACIÓN DE LA PROPUESTA

La aplicación web cuenta con los siguientes procesos y funcionalidades:

Módulo de Seguridad

o Usuarios

o Asignación Opciones

o Restablecer contraseñas

Módulo Académico

o Curso

o Docente

o Estudiante

o Asignaturas

Módulo de Docente

o Elaborar pruebas académicas

o Historial pruebas académicas

Módulo de Cuestionario

o Elaborar Cuestionario

o Historial cuestionario

Módulo de Reporte

o Reporte de pruebas realizadas por los estudiantes en el sistema

o Reporte de cuestionarios realizados por los docentes en el

sistema

Módulo de Estadísticas

o Estadísticas de Rendimiento académico

Módulo Simulador de Pruebas académicas

o Pruebas publicadas

Resolver prueba

o Rendimiento académico

Page 102: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

82

Plan de Pruebas

El propósito de las pruebas al sistema web es para verificar si se está

cumpliendo adecuadamente con los alcances y requisitos.

Cuadro 22 Resolución de Cuestionario

Objetivos Procedimientos Resultados

Se verifica la funcionalidad de acuerdo a los requerimientos del cliente.

Se realiza la creación del registro de la información.

El sistema mostrara mensaje de error cuando ingresen datos no válidos.

Interfaz de usuario

Se comprueba los Requerimientos de interfaz de usuario, donde el cliente da por aceptada la interfaz de la aplicación.

Se valora cada detalle de los formularios.

Portabilidad Se define el sitio específico donde va hacer instalado el sistema.

Se documentan las pruebas establecidas que tiene el software.

Integridad Se validará la información que debe estar dentro del archivo y que no estén manipulados.

En caso de existir alguna anomalía no direcciona a ningún almacenamiento correcto.

Seguridad Administración de usuarios solo podrá el administrador. Historial de la información registrada. Registro de clave será encriptada.

Menor manipulación de los datos, se tendrá la disponibilidad, confidencialidad e integridad de la información.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Page 103: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

83

Población y Muestra

Población

“Población es el conjunto de todos los elementos a los cuales se refiere la

investigación. Se puede definir como el conjunto de todas las unidades de

muestreo” (Bernal Torres, 2006).

El tamaño poblacional es el conjunto de individuos que constituyen la

población. Según el número de sujetos, el tamaño puede ser finito o infinito. Los

conjuntos infinitos son algo artificial o conceptual, ya que toda población de

entidades físicas es finita. (Universo Fomulas, 2014)

Muestra

En la investigación científica, el tamaño de la muestra debe estimarse

siguiendo los criterios que ofrece la estadística, y por ello es necesario

conocer algunas técnicas o métodos de muestreo. El método de muestreo

utilizado para estimar el tamaño de una muestra depende del tipo de

investigación que desea realizarse y, por lo tanto de la hipótesis y del

diseño de investigación que se hayan definido para desarrollar el estudio.

(Bernal Torres, 2006)

(Otzen & Manterola, 2017)Indico: Ventajas y Desventajas de la aplicación de

técnicas de muestreo

Se puede comentar que cada técnica de muestreo tiene sus ventajas y

desventajas; sim embargo, en términos generales existen ventajas y desventajas

comunes para todas ellas:

Ventajas

Reducción de costos: Los costes de un estudio serán menores si los

datos de interés se pueden obtener a partir de una muestra de la población.

Eficiencia: Al trabajar con un número reducido de sujetos a estudio,

representativos de la población; el tiempo necesario para conducir el

estudio y obtener resultados y conclusiones será ostensiblemente menor.

Page 104: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

84

Desventaja

Inadecuada representación de la población de la población: Esto

puede ocurrir si se decide trabajar con muestras pequeñas.

Cuadro 23 Población de la Investigación

Población Cantidad

Estudiantes 270

Autoridades 2

Total 272

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Para realizar el proceso de generar la muestra se utilizó la siguiente

fórmula:

Siendo,

• m = tamaño de la muestra

• e = Error de estimación

• n = tamaño de la muestra

Tamaño de la muestra de estudiante

m = 270; e = 0.06

n= 270/(0.06)2 (270-1) +1

n= 137.16

n= 137

n= 𝒎/e2 (m-1) +1

Page 105: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

85

Cuadro 24 Tamaño de Muestra

Población Cantidad Muestra

Estudiantes 270 137

Total 270 137

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: William Jácome Chóez / Hingri Pihuave

Instrumentos de recolección de datos

Para la obtención de la información emplearemos las encuestas que va

dirigida a los estudiantes de Educación General Básica Superior del Colegio Fiscal

Assad Bucaram Elmhalin, con la finalidad de conocer una herramienta que ayude

a obtener mejores conocimientos académicos.

Encuesta

La encuesta se puede definir como una técnica primaria de obtención de

información sobre la base de un conjunto objetivo, coherente y articulado

de preguntas, que garantizan que la información proporcionada por una

muestra puede ser analizada mediante métodos cuantitativos y los

resultados sean extrapolables con determinados errores y confianza a una

publicación. (Abascal & Grande Ildefonso, 2005)

Tipos de cuestionarios de encuesta

a. Cuestionarios de entrevista personal. Requieren del empleo de

encuestadores personales.

b. Cuestionarios por correo. Se envían por correo, es una modalidad más

económica que la anterior, pero tiene el inconveniente de un índice de

respuesta no elevado, por lo que hay que hacer sucesivas oleadas, lo que

puede hacer que la muestra no sea representativa.

c. Cuestionarios telefónicos. No se controla a la persona que responde, es

una forma económica de realizar encuestas.

Page 106: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

86

d. Cuestionarios autodidácticos. Se realizan a una población ya cautiva o de

personas que está comprobado que usan determinado producto o servicio.

(Universidad de Champagnat, 2002)

Para la obtención de la información de las encuestas escogimos el tipo de

cuestionario de entrevista personal, porque nos permite realizar la encuesta

directamente en el establecimiento del entrevistador.

“Las encuestas personales consisten en un encuentro entre dos personas en

el cual una de ellas obtiene información proporcionada por la otra sobre la base

de un cuestionario “ (Abascal & Grande Ildefonso, 2005).

(Abascal & Grande Ildefonso, 2005) Indico: Las encuestas personales pueden ser

de varias clases en función de donde se realicen.

A domicilio, si el encuentro tiene lugar en la vivienda del encuestado. Es

una técnica costosa, que lleva tiempo en desplazamiento y localizaciones

de los elementos de las muestras.

En establecimientos, cuando se obtiene información en tiendas,

supermercados, grandes almacenes, etc. El cuestionario suele ser

estructurado, esta predeterminado.

En la encuesta telefónica la obtención de la información se efectúa

mediante una conversación por teléfono entre el entrevistador y la persona

seleccionada, sobre la base de un cuestionario, generalmente

estructurado.

Telefónica asistida, o CATI (Computer Aided Telephone Interview). En esta

modalidad de encuesta los teléfonos se conectan a un ordenador, que

tienen en su memoria el cuestionario y las características de las muestras.

Page 107: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

87

Tipos de preguntas en un cuestionario de encuesta

a. Preguntas cerradas

Contienen categorías o alternativas de repuesta que han sido delimitadas.

b. Preguntas abiertas

No delimitan de antemano las alternativas de respuesta. Por lo cual el

número de categorías de respuestas es muy elevado. (Universidad de

Champagnat, 2002)

Reglas para la formulación de preguntas en un cuestionario

a. Los cuestionarios no deben ser excesivamente largos, porque en

cuestionarios largos disminuye el porcentaje de respuestas.

b. Las preguntas tienen que ser sencillas y redactadas de tal forma que

puedan comprenderse con facilidad (no utilizar términos técnicos).

c. Deben ser formuladas relacionadas con el tema de interés

d. Nunca sugerir la respuesta, incitando a contestar más en un sentido que

en otra.

e. No hacer preguntas que obliguen a esfuerzos o cálculos mentales, en ese

caso debe facilitarles la labor. (Universidad de Champagnat, 2002)

MUESTRA DE LA ENCUESTA

Identificación de la Institución

Colegio Fiscal Assad Bucaram Elmhalin

Objetivo que persigue

Conocer el pensamiento de los estudiantes y docentes acerca del proceso

actual de elaboración sobre el proceso/aprendizaje que tiene el colegio y como

considerarían informarse y obtener mayores conocimientos académicos a través

de un dispositivo, el cual se mostrara la información de manera objetiva,

clasificada y según prioridades de cada docente.

Page 108: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

88

Instrucciones de cómo se debe contestar

Elaborado el cálculo se definió realizar encuestas a los estudiantes y

entrevista a los docentes.

Las preguntas que se hicieron para esta encuesta son de tipo cerradas, de

manera que ellos tengan facilidad y rapidez de contestar.

Procesamiento y Análisis de Datos

Una vez recopilada la información procederemos a procesarla utilizando los

siguientes mecanismos:

La tabulación de datos mediante un conteo manual a cada una de las

preguntas realizadas en la encuesta.

Diseño y elaboración de gráficos estadísticos con los resultados obtenidos.

Análisis e interpretación de los resultados del procesamiento de datos.

Se realizó un banco de preguntas en la encuesta para tener información

si el sistema web es viable en la institución académica.

Page 109: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

89

ENCUESTA A ESTUDIANTES

COLEGIO FISCAL ASSAD BUCARAM ELMHALIN

TESIS: DESARROLLO DE UN SISTEMA WEB PARA POYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL BÁSICA

SUPERIOR DEL COLEGIO FÍSCAL “ASSAD BUCARAM ELMHALIN”.

1. Qué tipo de recursos tecnológicos usted utiliza generalmente para

comunicarse con el profesor

Correo personal

Plataformas de aprendizajes

Redes sociales

Todas las anteriores

Ninguna

2. ¿Elabora junto con su profesor algún cuestionario de estudio como

apoyo antes de rendir una prueba?

a. Nunca Casi siempre Siempre

3. Cree usted que las plataformas de apoyo para la enseñanza mejoran

los conocimientos entre el docente y el estudiante

Si

No

4. ¿Antes de rendir una prueba académica, cual es el tiempo que toma

para preparase?

a. De 1 a 2 días

b. De 3 a 4 días

c. De 5 a 6 días

d. Con una semana de anticipación

e. Horas antes de rendir la prueba

Page 110: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

90

5. Le gustaría a Ud., un sistema web que permita a los docentes llevar

el control en la preparación de pruebas académicas.

Si

No

6. ¿Considera usted que al implementar un sistema web mejorará el

rendimiento académico del estudiante?

Muy de acuerdo

De acuerdo

Indiferente

En desacuerdo

Muy en desacuerdo

7. ¿Considera Usted importante que mediante la elaboración de los

cuestionarios en el portal web se obtenga una mejor preparación a la

hora de rendir alguna prueba?

a. Si

b. No

8. ¿Cuál cree Usted que serían los principales beneficios al

implementarse el portal web?

Facilidad en la comunicación

Disponibilidad de los cuestionarios

Mejorar el rendimiento académico

Mejor preparación a la hora de rendir alguna prueba

Todas las anteriores

Page 111: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

91

ENCUESTA DIRIGIDA A LOS ESTUDIANTES DE COLEGIO FISCAL

ASSAD BUCARAM ELMHALIN.

Pregunta Nº 1.- Qué tipo de recursos tecnológicos usted utiliza, generalmente

para comunicarse con el profesor.

Cuadro 25 Pregunta 1 de la encuesta

Opción Categoría Resultados Porcentajes

1 Correo personal 24 18%

2 Plataformas de aprendizajes 12 9%

3 Redes sociales 35 26%

4 Todas las anteriores 9 7%

5 Ninguna 57 42%

TOTAL 137 100% Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 52 Pregunta 1 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 1 se obtuvo los siguientes resultados: 42% los

estudiantes indican que no utilizan ningún tipo de recurso para poder comunicarse

con el docente, un 26% utilizan redes sociales ,18% utilizan correos electrónicos,

por lo tanto, se observa que existe una falta de comunicación de los docentes con

estudiantes.

18%

9%

26%7%

42%

Correo personal

Plataformas de aprendizajes

Redes sociales

Todas las anteriores

Ninguna

Page 112: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

92

Pregunta Nº 2.- ¿Elabora junto con su profesor algún cuestionario de estudio

como apoyo antes de rendir una prueba?

Cuadro 26 Pregunta 2 de la encuesta

Opción Categoría Resultados Porcentajes

1 Nunca 8 6%

2 Casi siempre 36 26%

3 Siempre 93 68%

TOTAL 137 100% Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 53 Pregunta 2 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 2 se obtuvo los siguientes resultados: 68% los

estudiantes siempre elaboran cuestionarios de estudio para elaborar las pruebas,

un 26 % indica que casi siempre, un 6% nunca, por lo tanto está herramienta será

de vital para los estudiantes por medio de los cuestionarios de evaluaciones.

6%

26%

68%

Nunca

Casi siempre

Siempre

Page 113: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

93

Pregunta Nº 3.- Cree usted que las plataformas de apoyo para la enseñanza

mejoran los conocimientos entre el docente y el estudiante

Cuadro 27 Pregunta 3 de la encuesta

Opción Categoría Resultados Porcentajes

1 Si 119 87%

2 No 18 13%

TOTAL 137 100% Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 54 Pregunta 3 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 3 se obtuvo los siguientes resultados: 87% los

estudiantes indicaron que se mejoraría los conocimientos, un 13 % indica que no

se mejoraría, en tal virtud habrá una mejor interacción alumnos-profesor.

87%

13%

Si

No

Page 114: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

94

Pregunta Nº 4.- ¿Antes de rendir una prueba académica, cual es el tiempo que

toma para preparase?

Cuadro 28 Pregunta 4 de la encuesta

Opción Categoría Resultados Porcentajes

1 De 1 a 2 Días 53 39%

2 De 3 a 4 Días 34 25%

3 De 5 a 6 Días 18 13%

4 Con una semana de anticipación 15 11%

5 Horas antes de rendir la prueba 17 12%

TOTAL 137 100% Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 55 Pregunta 4 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 4 se obtuvo los siguientes resultados: 39% de

los estudiantes se prepararán para rendir prueba académica de 1 a 2 días, un 25

% estudia de 3 a 4 días, un 13 % de 5 a 6 días, por lo tanto, se necesita un

simulador de pruebas académicas para que el alumno se preparare de una

manera más rápida.

39%

25%

13%

11%

12% De 1 a 2 Días

De 3 a 4 Días

De 5 a 6 Días

Con una semana de anticipación

Horas antes de rendir la prueba

Page 115: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

95

Pregunta Nº 5.- Le gustaría a Ud., un sistema web que permita a los docentes

llevar el control en la preparación de pruebas académicas.

Cuadro 29 Pregunta 5 de la encuesta

Opción Categoría Resultados Porcentajes

1 Si 124 91%

2 No 13 9%

TOTAL 137 100% Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 56 Pregunta 5 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 5 se obtuvo los siguientes resultados: 91% de

los estudiantes indicaron que, si le gustaría un sistema web para su preparación

de pruebas, un 9 % indica que no le gustaría un sistema web, por lo tanto se

necesita de un sistema web que permita a los docentes llevar un control en la

preparación de los cuestionarios y verificar en el simulador de pruebas en que

tema los estudiantes tienen problemas.

91%

9%

Si

No

Page 116: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

96

Pregunta Nº 6.- ¿Considera usted que al implementar un sistema web mejorará

el rendimiento académico del estudiante?

Cuadro 30 Pregunta 6 de la encuesta

Opción Categoría Resultados Porcentajes

1 Muy de acuerdo 34 25%

2 De acuerdo 85 62%

3 Indiferente 7 5%

4 En desacuerdo 6 4%

5 Muy en desacuerdo 5 4%

TOTAL 137 100%

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 57 Pregunta 6 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 6 se obtuvo los siguientes resultados: 62% de

los estudiantes indicaron que están de acuerdo que se implemente un sistema

web mejorara el rendimiento académico, un 9 % indica muy de acuerdo en

implementar, un 4% indica muy en desacuerdo que no implemente, los alumnos

manifestaron que tendrá mejores opciones para preparase mejor por medio de

esta herramienta de estudio

25%

62%

5%4%4%

Muy de acuerdo

De acuerdo

Indiferente

En desacuerdo

Muy en desacuerdo

Page 117: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

97

Pregunta Nº 7.- ¿Considera Usted importante que mediante la elaboración de los

cuestionarios en el portal web se obtenga una mejor preparación a la hora de

rendir alguna prueba?

Cuadro 31 Pregunta 7 de la encuesta

Opción Categoría Resultados Porcentajes

1 Si 116 85%

2 No 21 15%

TOTAL 137 100% Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 58 Pregunta 7 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 7 se obtuvo los siguientes resultados: 85% de

los estudiantes indicaron que, si es importante la elaboración de los cuestionarios

en el portal web para una mejor preparación de las pruebas, un 15 % indica que

no es importante un portal web,

85%

15%

Si

No

Page 118: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

98

Pregunta Nº 8.- ¿Cuál cree Usted que serían los principales beneficios al

implementarse el portal web?

Cuadro 32 Pregunta 8 de la encuesta

Opción Categoría Resultados Porcentajes

1 Facilidad en la comunicación 30 22%

2 Disponibilidad de los cuestionarios 8 6%

3 Mejorar el rendimiento académico 54 39%

4 Mejor preparación a la hora de rendir alguna prueba 16 12%

5 Todas las anteriores 29 21%

TOTAL 137 100%

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Gráfico 59 Pregunta 8 de la encuesta.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Datos tomados de la encuesta realizada

Análisis:

De los resultados en la pregunta Nº 8 se obtuvo los siguientes resultados: 39% de

los estudiantes indicaron que el beneficio de implementar el portal web es para

mejorar rendimiento académico, un 22 % indica la facilidad de comunicación, un

21 % indica que el beneficio es la facilidad de comunicación, un 6% la

disponibilidad de los cuestionarios, un 12% para mejorar la preparación a la hora

de rendir alguna prueba, en resumen podemos analizar que esta herramienta le

brindará buenos benéficos académicos a los alumnos

22%

6%

39%

12%

21%

Facilidad en la comunicación

Disponibilidad de loscuestionarios

Mejorar el rendimientoacadémico

Mejor preparación a la horade rendir alguna prueba

Todas las anteriores

Page 119: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

99

CAPITULO IV

CRITERIOS DE ACEPTACIÓN DEL PRODUCTO

En el desarrollo de la aplicación web para apoyar la gestión de docentes y

estudiantes de educación general básica superior del colegio Assad Bucaram

Elmhalin, se utiliza la arquitectura modelo vista controlador porque permite trabajar

ordenado y bien organizado en el acceso al sistema. Se realizó tres perfiles que

son: rol administrador (acceso a todo el sistema), rol docente (accede solo a crear

cuestionarios, pruebas con respuesta múltiple, abierta, única, reportes, historial de

cuestionarios), rol estudiante (acceso a descargar cuestionarios, simulador de

pruebas, notificaciones de nuevos cuestionarios publicados), se realizaron las

pruebas correspondientes, el cual indica que el sistema cumple con las

especificaciones requeridas.

Cuadro 33 Criterios de aceptación

Objetivo Criterio de Aceptación

Analizar la situación académica actual de la institución y la importancia de un sistema de apoyo a la gestión académica mediante una aplicación web.

El sistema web permite apoyar la gestión de docentes y estudiantes.

Diseñar y desarrollar la base de datos del sistema.

Se realizó el modelado de la base de datos, permitiendo un registro óptimo y seguro de la información registrada por el usuario.

Desarrollar un sistema web para la elaboración y creación de cuestionarios de estudio de “Lengua y Literatura, Ciencias Sociales”.

Para el desarrollo se utilizó herramientas open source junto con arquitectura MVC y Yii Framework.

Elaborar simulador de pruebas en base a los cuestionarios ingresados al sistema para los estudiantes.

El sistema permite la realización de evaluaciones para así poder diagnosticar el aprendizaje de los estudiantes.

Elaboración: William Jácome Chóez / Hingri Pihuave Fuente: Elaboración propia

Page 120: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

100

Cuadro 34 Matriz de Criterios de Evaluación

Alcances del Sistema

Alcances del Proyecto Medición y evaluación del Alcance de Proyecto

Desarrollar un sistema web para llevar el Registro de cuestionario pre-establecido por un profesor encargado de las materias “lengua y literatura, ciencias sociales”.

Para el desarrollo se utilizó herramientas open source junto con arquitectura MVC y Yii Framework.

Generar un cuestionario de preguntas de acuerdo a la materia seleccionada.

Permite el ingreso de preguntas con tres tipos de respuestas: Una respuesta, varias respuestas, respuesta abierta.

Registrar información de docentes, materias, cursos que maneja.

Permite el ingreso de los datos de docentes de la institución que a su vez pueden ser usuarios del sistema, también registramos materias y cursos en el sistema.

Utilizar manejo de gráficos estadísticos para los diferentes cuestionarios de estudio en las materias críticas “lengua y literatura, ciencias sociales”.

Permite la visualización en gráficos estadísticos tipo pastel indicando el porcentaje y cantidad de cuestionarios realizados en las materias de lengua y literatura, ciencias sociales.

Generar descarga de pruebas realizadas para revisión del docente.

Permite obtener la descargar de las pruebas en PDF para que el docente pueda visualizar las notas y los problemas que tuvieron los alumnos al responder.

Manejar perfiles para el ingreso de Sistemas.

Permite ingresar el usuario y contraseña registrados al sistema y posteriormente visualizar las opciones asignadas a su perfil.

Elaboración: William Jácome Chóez / Hingri Pihuave

Fuente: Elaboración propia

Page 121: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

101

CONCLUSIONES

Se realizó el levantamiento de información de la elaboración de

cuestionarios y evaluaciones de las materias más críticas entre el docente

con los estudiantes mediante el cual se definieron los perfiles y opciones

que deberá tener el sistema.

La base de datos se diseñó para el almacenamiento de la información de

manera eficiente y rápida, que sirvió para diseñar el sistema web de

manera fácil para el usuario, logrando apoyar la gestión académica de los

docentes y estudiantes.

El desarrollo del sistema web para el colegio fiscal Assad Bucaram

Elmhalin será una herramienta de mucha utilidad en las habilidades

académicas de los estudiantes, que mejorará el aprendizaje y la calidad de

la educación.

La realización del sistema ha permitido apoyar la gestión académica de

forma rápida, a través de la elaboración de cuestionarios de estudio a

través de un simulador de pruebas para tener un control de los puntos

críticos que tiene el estudiante en dicha materia.

Page 122: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

102

RECOMENDACIONES

Se recomienda implementar esta aplicación en el Colegio Fiscal Assad

Bucaram Elmhalin, para que apoye a la gestión de docentes y estudiante

de educación general básica superior en la elaboración de cuestionarios y

simulador de pruebas.

Capacitar a docentes y estudiantes sobre el uso del sistema.

Incorporar a todos los alumnos del nivel básico del colegio fiscal Assad

Bucaram, para que realicen los cuestionarios de estudio en el sistema de

web.

Que la utilización de los simuladores de prueba les ayudará a los alumnos

a adquirir mayores conocimientos al momento de rendir evaluaciones, por

lo tanto, se recomienda conocer de esta herramienta.

Page 123: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

103

BIBLIOGRAFÍA

Abascal, E., & Grande Ildefonso, E. (2005). Análisis de Encuesta.

Alarcón González, J. A. (1998). Reingenieria de Procesos Empresariales.

Madrid: Fundación Confemetal.

Alcalde, A. (4 de 7 de 2017). El Baul del Programador. Obtenido de El Baul del

Programador: https://elbauldelprogramador.com/los-10-mejores-

frameworks-gratis-de-aplicaciones-web/

ALEGSA. (26 de 06 de 2016). Definición de Aplicaciones Web. Obtenido de

Definición de Aplicaciones Web:

http://www.alegsa.com.ar/Dic/aplicacion%20web.php

Alegsa, L. (2016). Alegsa. Obtenido de Alegsa:

http://www.alegsa.com.ar/Dic/framework.php

Alonso, F., Martínez, L., & Segovia, F. J. (2005). Inroducción a la ingenieria del

software Modelo de desarrollo de programas. España.

Alvarez, M. A. (02 de Enero de 2014). Desarrolloweb.com. Obtenido de

https://desarrolloweb.com/articulos/que-es-mvc.html

Anexsoft. (21 de 01 de 2016). ¿Que es Composer? Obtenido de ¿Que es

Composer?: http://anexsoft.com/p/118/que-es-composer-y-como-se-usa-

en-php

Arías, A. (2014). Bases de datos con MySQL.

Arias, Á. (2015). bases de Datos con MySQL: 2ª Edición.

Arias, M. A. (2013). Introducción a PHP. IT Campus Academy.

Arias, M. Á. (2017). Aprende Programación Web co PHP y My SQL:2ª Edición.

Ayoze Castillo, A. (2017). Curso de Programación web: JavaScript, Ajax y

jQuery, 2ª Edición.

Bernal Torres, C. A. (2006). Metodología de la investigación: para

administración, Economía, humanidades.

Betancourt Rivero, L. (2012). Proceso de prueba de un software. TINO.

Casanoba, E., & Ceci, R. (2016). Sitios Multiplataforma con HTML5 + CSS2:

Domine el nuevo paradigma de la web.

DesarrolladoresWeb. (27 de 05 de 2014). Javascript a fondo. Obtenido de

Javascript a fondo: http://www.desarrolloweb.com/javascript/

desarrolloweb. (2012). Obtenido de desarrolloweb:

https://desarrolloweb.com/de_interes/yii-framework-php-6453.html

Dimes, T. (2015). Conceptos Básicos de Scrum.

El Informático. (22 de 10 de 2015). Características del XAMPP. Obtenido de

Características del XAMPP: http://blogdelinformatico-

reizer.blogspot.com/2015/11/caracteristicas-de-xampp.html

Eslava Muñoz, V. (2013). El Nuevo PHP, Conceptos Avanzados. Bubok

Publishing S.L.

Fernández Martínez, L. F. (2003). Arquitectura de Software. SG Buzz.

Fernández Montoro, A. (2011). Cámbiate a LINUX.

Fossati, M. (2014). Todo sobre MySQL.

Gallego Sánchez, A. J. (20 de 12 de 2015). Laravel. Obtenido de Laravel:

https://ajgallego.gitbooks.io/laravel-5/content/introduccion.html

Page 124: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

104

Innovation Technologies for IT. (4 de 9 de 2009). Conceptos básicos de SQL.

Obtenido de Conceptos básicos de SQL:

https://msp2lti.wordpress.com/2009/09/04/conceptos-basicos-de-sql/

Instituto Tecnológico de Matehuala. (19 de 05 de 2009). Programación Web.

Obtenido de Programación Web:

https://programacionwebisc.wordpress.com/2-1-arquitectura-de-las-

aplicaciones-web/

Jias. (04 de 05 de 2015). Apuntes de Programación. Obtenido de Apuntes de

Programación: http://programacion.jias.es/2015/05/web-%C2%BFque-es-

el-framework-bootstrap-ventajas-desventajas/

Katcheroff, P. (2008). Desarrollador .net.

Laínez Fuentes, J. R. (2015). Desarrollo de Software Ágil: Extremme

programming y scrum 2ª Edición.

Lancker, L. V. (2012). HTML5: Los fundamentos del lenguaje.

Librosweb. (s.f.). Obtenido de Librosweb:

https://librosweb.es/libro/css/capitulo_1.html

Linux. (2015). El rincón de Linux. Obtenido de El rincón de Linux:

http://www.linux-es.org

Luján, S. (2001). Programamción de Aplicaciones Web. Club Universitario.

Machado, J. M. (4 de 12 de 2012). Levantamientode Información. Obtenido de

Levantamientode Información:

http://miguedt.blogspot.com/2012/12/levantamiento-de-informacion.html

Menéndez, R., & Asencio, B. (2 de 10 de 2012). Aplicación Web. Obtenido de

Aplicación Web:

http://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/H

istoria-desarrollo-aplicaciones-web.html

Otzen, T., & Manterola, C. (2017). SCIELO. Obtenido de SCIELO:

http://www.scielo.cl/scielo.php?pid=S0717-

95022017000100037&script=sci_arttext

Puro Software. (15 de 11 de 2010). Obtenido de Puro Software:

http://www.purosoftware.com/desarrollo-web-scripts-graficos-

estadisticos/10-highcharts-charts-interactivos.html

Quero Catalinas, E., Garcia Román , A., & Peña Rodriguez, J. (2007).

Mantenimiento de portales de la Información. España.

Reynoso, B. (2004). Introducción a la Arquitectura de Software. Buenos Aires.

Page 125: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

105

ANEXOS

Anexo 1.- Cronograma de actividades

Page 126: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

106

Page 127: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

107

Page 128: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

108

Anexo 2.- Modelo Entidad Relación

Page 129: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

109

Anexo 3.- Diagrama de proceso del coordinador académico

Page 130: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

110

Anexo 4.- Diagrama de proceso de Registro de Curso

Page 131: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

111

Anexo 5.- Diagrama de proceso de Registro de Asignaturas

Page 132: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

112

Anexo 6.- Diagrama de proceso de registro de estudiantes

Page 133: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

113

Anexo 7.- Diagrama de proceso de Registro de Docente

Page 134: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

114

Anexo 8.- Diagrama de proceso del docente

Page 135: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

115

Anexo 9.- Diagrama de proceso del estudiante

Page 136: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

116

Anexo 10.- Encuesta

Objetivo: Estimados estudiantes, nos gustaría conocer su opinión sobre el

proceso de la realización de cuestionarios y las evaluaciones, con la finalidad de

apoyar a la gestión académica.

a) Instrucciones

Las preguntas que acepten ingresaran estos símbolos. ● X

1. Qué tipo de recursos tecnológicos usted utiliza generalmente para

comunicarse con el profesor

Correo personal

Plataformas de aprendizajes

Redes sociales

Todas las anteriores

Ninguna

2. ¿Elabora junto con su profesor algún cuestionario de estudio como

apoyo antes de rendir una prueba?

a. Nunca Casi siempre Siempre

3. Cree usted que las plataformas de apoyo para la enseñanza mejoran

los conocimientos entre el docente y el estudiante

Si

No

UNIVERSIDAD DE GUAYAQUIL FACULTAD DE CIENCIAS MATEMATICAS Y

FISICAS CARRERA DE INGENIERIA EN SISTEMAS COMPUTACIONALES

Encuesta dirigida a los Estudiantes del

Colegio Fiscal Assad Bucaram Elmhalin

Page 137: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

117

4. ¿Antes de rendir una prueba académica, cual es el tiempo que toma

para preparase?

a. De 1 a 2 días

b. De 3 a 4 días

c. De 5 a 6 días

d. Con una semana de anticipación

e. Horas antes de rendir la prueba

5. Le gustaría a Ud., un sistema web que permita a los docentes llevar

el control en la preparación de pruebas académicas.

Si

No

6. ¿Considera usted que al implementar un sistema web mejorará el

rendimiento académico del estudiante?

Muy de acuerdo

De acuerdo

Indiferente

En desacuerdo

Muy en desacuerdo

7. ¿Considera Usted importante que mediante la elaboración de los

cuestionarios en el portal web se obtenga una mejor preparación a la

hora de rendir alguna prueba?

a. Si

b. No

Page 138: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

118

8. ¿Cuál cree Usted que serían los principales beneficios al

implementarse el portal web?

Facilidad en la comunicación

Disponibilidad de los cuestionarios

Mejorar el rendimiento académico

Mejor preparación a la hora de rendir alguna prueba

Todas las anteriores

Page 139: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

119

Anexo 11.- Entrevista a Docentes

1. ¿Es favorable el uso de la tecnología como herramienta de trabajo en

la educación?

2. ¿Qué oportunidades de aprovechamiento académico tienen los

alumnos a los que se les facilita el uso de las tecnologías en su

educación?

3. ¿Desde el punto de vista educativo ¿Por qué el uso de la tecnología

es adecuado?

4. Cree Usted, que la tecnología que existe actualmente en la institución

es suficiente para los métodos de enseñanza que requieren los

estudiantes

5. Considera Usted que a la hora de rendir alguna evaluación académica

aumentaría el nivel de conocimiento en el grado de preparación del

estudiante.

6. Desde su punto de vista, los estudiantes que manipulen este sistema

podrán transmitir sus conocimientos permitiéndoles reflexionar

sobre sus propios pensamientos

7. Considera beneficioso para los docentes realizar pruebas de

simulacros en la preparación del estudiante, con el fin de mejorar el

rendimiento académico.

UNIVERSIDAD DE GUAYAQUIL FACULTAD DE CIENCIAS MATEMATICAS Y

FISICAS CARRERA DE INGENIERIA EN SISTEMAS COMPUTACIONALES

Entrevista dirigida a los docentes del

colegio Fiscal Assad Bucaram Elmhalin

Page 140: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

120

Anexo 12.- Fotos de Entrevista a Docentes

Entrevista a Directora del Colegio

Inspectora del Colegio Fiscal Assad Bucaram Elmhalin

Page 141: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

121

Docente de materia estudios Sociales

Docente de materia Literatura

Page 142: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

122

Anexo 13.- Fotos de encuesta a estudiantes

Encuesta a los alumnos de Noveno

Page 143: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

123

Encuesta a los alumnos de decimo

Page 144: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

124

Anexo 14.- Carta de Aceptación

Page 145: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

125

Anexo 15.- Entrevista a rectora

Page 146: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

1

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS

COMPUTACIONALES

DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL

BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”

.

PROYECTO DE TITULACIÓN

Previa a la obtención del Título de:

INGENIERO EN SISTEMAS COMPUTACIONALES

MANUAL DE USUARIO

AUTORES:

JÁCOME CHÓEZ WILLIAM JESSIE

PIHUAVE PARRALES HINGRI LISSETHE

TUTORA:

ING. MARIA QUINZO BRAVO, MSc.

GUAYAQUIL – ECUADOR

2017

Page 147: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

2

MANUAL DE USUARIO

Sistema Gestión Académica Manual de usuario que describe el funcionamiento del sistema para la

gestión académica del colegio “Assad Bucaram Elmhalin”

Page 148: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

3

INDICE GENERAL

INDICE DE IMÁGENES ................................................................................................... 5

INDICE DE TABLAS ........................................................................................................ 8

Inicio sesión a la aplicación .......................................................................................... 9

Pantalla de inicio al sistema después de la autenticación .................................... 9

Perfiles de usuario y sus respectivas opciones para el sistema de Gestión

Académica ................................................................................................................. 10

Módulos para usuarios con perfil administrador ..................................................... 10

Módulo Administrador ............................................................................................. 10

Opción: Tablas Sistema ....................................................................................... 11

Opción: Crear opciones del sistema .................................................................. 11

Opción: Catálogos Sistema ................................................................................. 13

Opción: Configuraciones Sistema ...................................................................... 14

Opción: Configuración Correo ............................................................................ 15

Opción: Perfiles ..................................................................................................... 16

Opción: Actualización datos................................................................................ 17

Módulo Reporte ......................................................................................................... 17

Opción: Reporte de usuarios............................................................................... 17

Reporte de Docentes ............................................................................................ 18

Reporte de Estudiantes ........................................................................................ 18

Reporte de Administradores................................................................................ 18

Reporte de coordinadores académicos ............................................................. 18

Módulo Seguridad..................................................................................................... 19

Opción: Usuarios .................................................................................................. 19

Opción: Asignación opciones ............................................................................. 21

Opción: Restablecer contraseña ......................................................................... 22

Módulos para usuarios con perfil de coordinador académico. .............................. 22

Módulo Académico ................................................................................................... 22

Opción: Curso ....................................................................................................... 22

Opción: Asignaturas ............................................................................................. 23

Opción: Asignatura – curso ................................................................................. 24

Opcion: Estudiantes ............................................................................................. 24

Opción: Docentes ................................................................................................. 26

Módulo: Cuestionario ............................................................................................... 27

Opción: Elaborar cuestionarios .......................................................................... 27

Creación de preguntas .................................................................................... 28

Page 149: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

4

Configuración cuestionario............................................................................. 29

Opción: Historial ................................................................................................... 29

Módulo: Docente ....................................................................................................... 29

Opción: Elaborar prueba académica .................................................................. 29

Edición de la respuesta de la pregunta: ........................................................ 30

Configuración prueba académica .................................................................. 31

Opción: Historial pruebas académicas .............................................................. 31

Módulo Estadística ................................................................................................... 32

Opción: Rendimiento estudiantil ........................................................................ 32

Módulo Reporte ......................................................................................................... 32

Opción: Reporte de pruebas realizadas ............................................................. 32

Módulos para usuarios con perfil de estudiante ...................................................... 33

Módulo: Cuestionario ............................................................................................... 33

Opción: Ver cuestionarios ................................................................................... 33

Opción: Cuestionarios publicados ..................................................................... 34

Cantidad de cuestionarios publicados en el periodo electivo ................... 34

Revisar uno a uno los cuestionarios publicados por el docente ............... 35

Descargar cualquier cuestionario que se encuentre en la bandeja. .......... 35

Módulo: Estudiante................................................................................................... 35

Opción: Actualizar datos ...................................................................................... 35

Opción: Pruebas publicadas ............................................................................... 36

Opción para resolverla en el simulador de pruebas ......................................... 36

Simulador Prueba académica ......................................................................... 36

Estudiante podrá realizar las siguientes acciones: ..................................... 38

Opción: Historial pruebas académicas realizadas ........................................... 39

Page 150: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

5

INDICE DE IMÁGENES

Imagen 1 Inicio de Sesión ................................................................................. 9

Imagen 2 Pantalla de inicio del sistema. ........................................................... 9

Imagen 3 Mensaje emergente con las respuestas a las preguntas frecuentes. . 9

Imagen 4 Tablas principales del sistema. ........................................................ 11

Imagen 5 Creación de módulos y opciones. .................................................... 11

Imagen 6 Formulario para el registro de módulos del sistema ........................ 12

Imagen 7 Formulario de registro de opción del sistema. ................................. 12

Imagen 8 Ventana emergente para editar información de la opción de un módulo. ........................................................................................................... 13

Imagen 9 Interfaz para el mantenimiento de los catálogos del sistema. .......... 13

Imagen 10 Formulario para registro de catálogos del sistema. ....................... 15

Imagen 11 Bandeja con las configuraciones SMTP de la institución. .............. 15

Imagen 12 Formulario de registro para la nueva configuración SMTP ............ 16

Imagen 13 Formulario para el registro de nuevos perfiles de usuario. ............ 17

Imagen 14 Interfaz para mostrar datos personales y del usuario .................... 17

Imagen 15 Selección del tipo de reporte de usuario. ....................................... 18

Imagen 16 Bandeja para el reporte de docente del colegio. ............................ 18

Imagen 17 Bandeja reporte de estudiantes agrupados por curso. .................. 18

Imagen 18 Bandeja para el reporte de usuarios con el perfil de administrador 18

Imagen 19 Bandeja para el reporte de usuarios con el perfil de coordinadores académicos ..................................................................................................... 19

Imagen 20 Bandeja de usuarios registrados en el sistema. ............................ 19

Imagen 21 Validación del formulario para el registro de un nuevo usuario ...... 19

Imagen 22 Mensaje de validación de la cedula. .............................................. 20

Imagen 23 Selección del o los perfiles para el nuevo usuario. ....................... 20

Imagen 24 Mensaje de confirmación por la creación del nuevo usuario. ......... 21

Imagen 25 Bandeja de las opciones que tiene disponible el sistema para su asignación. ...................................................................................................... 22

Imagen 26 Envío de notificación al usuario con la clave temporal para el ingreso al sistema. .......................................................................................... 22

Imagen 27 Bandeja de cursos registrados para el actual periodo electivo. ..... 23

Imagen 28 Bandeja de asignaturas que pueden impartir un docente para actual periodo electivo. .............................................................................................. 23

Imagen 29 Bandeja que muestra las asignaciones de las materias a los diferentes cursos para el actual periodo. ......................................................... 24

Imagen 30 Interfaz para la asignación de un grupo de materias para un curso......................................................................................................................... 24

Imagen 31 Bandeja de los estudiantes registrados para el actual periodo electivo. ........................................................................................................... 25

Imagen 32 Formulario para el registro de datos personales del estudiante. .... 25

Imagen 33 Interfaz para la asignación de curso para el nuevo estudiante. ..... 25

Imagen 34 Mensaje de confirmación de la asignación del curso al nuevo estudiante. ...................................................................................................... 26

Imagen 35 Bandeja de docentes registrados en el actual periodo electivo...... 26

Imagen 36 Formulario de registro de datos personales del docente. .............. 26

Imagen 37 Interfaz para la asignación de las asignaturas que el docente impartirá en el actual periodo electivo. ............................................................ 27

Imagen 38 Mensaje de confirmación de la asignación. ................................... 27

Page 151: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

6

Imagen 39 Bandeja de las asignaturas que el docente imparte en el actual periodo electivo. .............................................................................................. 27

Imagen 40 Formulario para el registro del cuestionario. .................................. 28

Imagen 41 Interfaz para el registro de las preguntas del cuestionario. ............ 28

Imagen 42 Ventana emergente para ingresar el título de la pregunta y especificar su tipo de respuesta. ..................................................................... 28

Imagen 43 Lista de las alternativas a respuesta de la pregunta formulada. .... 28

Imagen 44 Pantalla para la configuración del cuestionario. ............................. 29

Imagen 45 Historial de cuestionarios elaborados por el docente. .................... 29

Imagen 46 Formulario para el registro de pruebas académicas. ..................... 29

Imagen 47 Interfaz para elaborar las diferentes secciones de la prueba académica. ..................................................................................................... 30

Imagen 48 Selección y agregación de una pregunta a la sección de la prueba académica. ..................................................................................................... 30

Imagen 49 Edición de la respuesta a la pregunta seleccionada. ..................... 30

Imagen 50 Configuración de la prueba académica. ........................................ 31

Imagen 51 Bandeja que muestra el historial de las pruebas académicas elaboradas en todos los periodos electivos. .................................................... 31

Imagen 52 Descarga de la prueba académica. ............................................... 31

Imagen 53Ficha de la prueba académica. ....................................................... 32

Imagen 54Cuadro estadístico del rendimiento académico de los estudiantes para una asignatura de un curso específico .................................................... 32

Imagen 55 Listado de pruebas académicas para la generación de reportes. .. 32

Imagen 56 Reporte de calificaciones obtenidas por los estudiantes................ 33

Imagen 57 Interfaz donde se muestran las asignaturas que el estudiante se encuentra recibiendo en el actual periodo electivo. ......................................... 33

Imagen 58 Listado de cuestionario que se encuentra disponible para que estudiante los revise. ...................................................................................... 34

Imagen 59 Grupos de cursos por periodos electivos donde el estudiante puede descargar cuestionarios. ................................................................................. 34

Imagen 60 Cantidad de cuestionarios publicados por el docente. ................... 34

Imagen 61 Datos principales del cuestionario ................................................ 35

Imagen 62 Visualización y descarga del cuestionario. .................................... 35

Imagen 63 Visualización de datos personales y de usuario del estudiante. .... 35

Imagen 64 Bandeja de las pruebas académicas publicadas por todos los docente que el estudiante recibe clase. .......................................................... 36

Imagen 65 Información y consejos para antes de resolver la prueba académica......................................................................................................................... 36

Imagen 66 Mensaje al estudiante previo a la realización de la prueba académica. ..................................................................................................... 37

Imagen 67 Interfaz del simulador de pruebas académicas. ............................. 37

Imagen 68 Preguntas resueltas en el simulador. ............................................. 37

Imagen 69 Mensaje cuando el tiempo culmino para resolver la prueba. ........ 38

Imagen 70 Interfaz que muestra los resultados de la prueba académica realizada en el simulador. ............................................................................... 38

Imagen 71 Descarga de la prueba realizadas indicando cuales fueron erradas......................................................................................................................... 38

Imagen 72 Listado de preguntas erradas. ....................................................... 39

Imagen 73 Detalle de la pregunta errada. ....................................................... 39

Page 152: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

7

Imagen 74 Vista previa del cuestionario que se encuentra relacionado la prueba académica. ..................................................................................................... 39

Imagen 75 Bandeja de las pruebas académicas que el estudiante ha resuelto desde el simulador de pruebas académicas. .................................................. 40

Page 153: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

8

INDICE DE TABLAS

Tabla 1. Tabla con el detalle de cada sección de la pantalla de inicio al sistema........................................................................................................................... 9

Tabla 2. Desglose de los módulos asignados a cada perfil de usuario dentro del sistema. .......................................................................................................... 10

Page 154: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

9

Inicio sesión a la aplicación

Imagen 1 Inicio de Sesión

Pantalla de inicio al sistema después de la autenticación

Imagen 2 Pantalla de inicio del sistema.

Imagen 3 Mensaje emergente con las respuestas a las preguntas frecuentes.

Tabla 1. Tabla con el detalle de cada sección de la pantalla de inicio al sistema.

Cabecera pagina Cuerpo pagina Pie pagina

Nombre de usuario que inicio la sesión

Icono de las notificaciones del sistema

Botón para cerrar sesión

Menú lateral con los módulos y sus respectivas opciones del sistema, según el perfil del usuario que inicio sesión.

Información de la pagina

Información del colegio

Preguntas frecuentes con respecto al sistema

Page 155: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

10

Perfiles de usuario y sus respectivas opciones para el sistema de Gestión

Académica

Tabla 2. Desglose de los módulos asignados a cada perfil de usuario dentro del sistema.

Administrador

Administrador Reporte Seguridad

Tablas Sistema Crear opciones sistema Catálogos Sistema Configuraciones Sistema Configuración Correo Perfiles Actualización Datos

Reporte de usuarios

Usuarios Restablecer contraseña Asignación opciones

Coordinador académico

Académico

Curso Asignatura – Curso Asignaturas Docentes Estudiantes Docente

Cuestionario Docente Estadísticas Reporte

Elaborar Cuestionario Historial

Elaborar pruebas académicas Historial pruebas académicas Actualizar datos

Rendimiento académico

Pruebas realizadas

Estudiante

Cuestionario Estudiante

Ver cuestionarios Cuestionarios publicados

Pruebas publicadas Historial pruebas realizadas Actualizar datos

Módulos para usuarios con perfil administrador

Módulo Administrador

El módulo de seguridad permite gestionar las principales tablas del sistema y

configuraciones como son la presentación de mensajes y validaciones para los

cuestionarios y pruebas académicas.

Page 156: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

11

Opción: Tablas Sistema

Imagen 4 Tablas principales del sistema.

La opción tablas del sistema es de uso único para el administrador, le permite ubicar de

forma centralizada las principales tablas del sistema (tablas maestras y detalle).

Cada tabla mostrada en los paneles tiene vinculada su interfaz de mantenimiento donde

le permitirá realizar cualquier gestión a nivel de Administrador de Base de Datos.

Opción: Crear opciones del sistema

Imagen 5 Creación de módulos y opciones.

Al ingresar a la opción se mostrara dos bandejas de información donde se indica los

módulos creados para el sistema y las opciones que tiene asignado cada módulo.

Para registrar un nuevo módulo en el sistema debe pulsar el siguiente enlace

, el cual lo Re direccionará a un formulario de registro de módulo de

sistema:

Page 157: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

12

Imagen 6 Formulario para el registro de módulos del sistema

La información a ingresar al formulario es la siguiente:

Nombre del módulo a crear, este campo es obligatorio su llenado.

Breve descripción del módulo no más de 150 caracteres, este campo es

obligatorio su llenado.

Para guarda el registro del formulario con la información ingresada pulsar el botón

Para editar la información de un módulo del sistema, debe pulsar el icono el cual

levantar una ventana emergente mostrando un formulario donde estará cargada la

información del registro seleccionado. Y para guardar los cambios realizados debe

pulsar el botón para que los cambios sean aplicados.

Para inactivar un módulo del sistema debe pulsar el icono el cual cambiara el estado

de la configuración en el sistema de activo (A) a inactivo (I).

Para activar un módulo del sistema debe pulsar el icono el cual cambiara el estado

de la configuración en el sistema de inactivo (I) a activo (A).

Para registrar un nueva opción en el sistema debe pulsar el siguiente enlace

, el cual lo Re direccionará a un formulario de registro de opción de

sistema.

Imagen 7 Formulario de registro de opción del sistema.

Page 158: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

13

La información a ingresar al formulario es la siguiente:

Seleccionar el módulo a que se quiere asociar la nueva opción

Nombre de la opción que se visualizara en el menú lateral

Clase Css del icono de Booststrap

Ruta de la acción en donde se debe realizar la programación (Solo se especifica

donde se debe realizar la programación de la opción para el desarrollador)

Breve descripción de la opción

Para guarda el registro del formulario con la información ingresada pulsar el botón

Para editar la información de una opción del sistema, debe pulsar el icono el cual

levantar una ventana emergente mostrando un formulario donde estará cargada la

información del registro seleccionado.

Imagen 8 Ventana emergente para editar información de la opción de un módulo.

Para guardar los cambios realizados debe pulsar el botón

Para inactivar una opción del sistema debe pulsar el icono el cual cambiara el estado

de la configuración en el sistema de activo (A) a inactivo (I).

Para activar una opción del sistema debe pulsar el icono el cual cambiara el estado

de la configuración en el sistema de inactivo (I) a activo (A).

Opción: Catálogos Sistema

Imagen 9 Interfaz para el mantenimiento de los catálogos del sistema.

Page 159: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

14

La interfaz muestra dos secciones donde se registra la cabecera del catálogo

enmarcada con el cuadro de color verde y el detalle del catálogo enmarcada con el

cuadro de color rojo. Cada uno muestra sus correspondientes opciones para: Crear,

editar e inactivar una cabecera o su detalle para el catalogo del sistema

Para crear un nuevo catálogo debe pulsar el botón

Para crear un nuevo detalle para un catálogo en el sistema debe pulsar el botón

Una vez pulsado el botón para crear un nuevo registro, el sistema lo Re direccionará a

un formulario para el respectivo ingreso de información

Para inactivar un catálogo o su correspondiente detalle en el sistema debe pulsar el

icono

Para activar un catálogo o su correspondiente detalle en el sistema debe pulsar el icono

Para editar un registro correspondiente a una cabecera o detalle de un catálogo debe

pulsar el icono

Opción: Configuraciones Sistema

Al ingresar a la opción se muestra una bandeja con las configuraciones del sistema el

cual permite la parametrizar información como:

Título de formularios generalizados.

Mensajes personalizados.

Títulos para las ventanas emergentes.

La bandeja de configuraciones del sistema indica lo siguiente:

Código de referencia para agrupar configuraciones

Configuración 1 guarda el texto a parametrizar

Las columnas configuración 2,3 son utilizados para guardar información

adicional

La columna estado muestra una letra indicando el status del registro en el

sistema:

o A: Activo

o I: Inactivo

Las acciones que el usuario puede realizar en esta opción son las siguientes:

1. Registrar una nueva configuración

2. Editar una configuración del sistema

3. Inactivar una configuración del sistema

4. Activar una configuración del sistema

Page 160: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

15

Para registrar una nueva configuración del sistema debe pulsar el siguiente enlace

, el cual lo Re direccionará a un formulario de registro de configuraciones.

Imagen 10 Formulario para registro de catálogos del sistema.

La información a ingresar al formulario es la siguiente:

Código de referencia de 10 caracteres para agrupar configuraciones del sistema

el campo es obligatorio su llenado.

Configuración 1, guarda un texto con la configuración a registrar, este campo es

obligatorio para el registro.

Configuración 2, campo no obligatorio, usado para configuraciones adicionales.

Configuración 3, campo no obligatorio, usado para configuraciones adicionales.

Configuración 4, campo no obligatorio, usado para configuraciones adicionales.

Para guarda el registro del formulario con la información ingresada pulsar el botón

Para editar la información de una configuración del sistema, debe pulsar el icono

el cual levantar una ventana emergente mostrando un formulario donde estará cargada

la información del registro seleccionado.

Para guardar los cambios realizados debe pulsar el botón

Para inactivar una configuración del sistema debe pulsar el icono el cual cambiara

el estado de la configuración en el sistema de activo (A) a inactivo (I).

Para activar una configuración del sistema debe pulsar el icono el cual cambiara el

estado de la configuración en el sistema de inactivo (I) a activo (A).

Opción: Configuración Correo

Imagen 11 Bandeja con las configuraciones SMTP de la institución.

Page 161: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

16

Al ingresar a la opción se visualizara una bandeja con todas las configuraciones de

correo de la institución donde solo se activara un en especifica cada vez que ingrese

una nueva configuración.

Para inactivar una configuración de correo debe pulsar el icono el cual cambiara el

estado de la configuración en el sistema de activo (A) a inactivo (I).

Para activar una configuración de correo debe pulsar el icono el cual cambiara el

estado de la configuración en el sistema de inactivo (I) a activo (A).

Para registrar una nueva configuración SMTP pulsar el botón

Imagen 12 Formulario de registro para la nueva configuración SMTP

Opción: Perfiles

Carga los diferentes perfiles para los usuarios del sistema los cuales serán asignados

módulos con sus correspondientes opciones.

Para inactivar un perfil de usuario debe pulsar el icono el cual cambiara el estado en

el sistema de activo (A) a inactivo (I).

Para activar un perfil de usuario debe pulsar el icono el cual cambiara el estado de

la en el sistema de inactivo (I) a activo (A).

Para registrar un nuevo perfil debe pulsar el botón el cual lo re

direccionará al siguiente formulario para el ingreso de la información. Para aplicar los

cambios deberá pulsar el botón

Page 162: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

17

Imagen 13 Formulario para el registro de nuevos perfiles de usuario.

Opción: Actualización datos

Al ingresar a la opción, se cargara la información de datos personales y del usuario

donde la misma se podrá editarla.

Imagen 14 Interfaz para mostrar datos personales y del usuario

Una vez editado la información personal o del usuario, para que los cambios sea

aplicados debe pulsar el botón , el cual enviara a que se actualice la

información en el sistema.

Módulo Reporte

El modulo del reporte para el perfil del administrador es utilizado para generar los

diferentes listados de usuario donde se detalle su información personal y el usuario y

contraseña con la cual puedan acceder al sistema.

Opción: Reporte de usuarios

El reporte de usuarios sirve para obtener un listado en formato PDF, la información

principal de los usuarios agrupados por docentes, estudiantes, administradores y

coordinadores académicos.

Page 163: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

18

Imagen 15 Selección del tipo de reporte de usuario.

EL usuario debe especificar el tipo de reporte que desea generar, una vez presenta y

cargada en la bandeja, para generar el reporte debe pulsar el icono

Reporte de Docentes

Imagen 16 Bandeja para el reporte de docente del colegio.

Reporte de Estudiantes

Imagen 17 Bandeja reporte de estudiantes agrupados por curso.

Reporte de Administradores

El reporte de administradores le indicara además de la información del usuario, las

opciones que tiene asignada a su perfil.

Imagen 18 Bandeja para el reporte de usuarios con el perfil de administrador

Reporte de coordinadores académicos

El reporte de coordinadores académicos le indicara además de la información del

usuario, las opciones que tiene asignada a su perfil.

Page 164: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

19

Imagen 19 Bandeja para el reporte de usuarios con el perfil de coordinadores

académicos

Módulo Seguridad

El módulo de seguridad permite gestionar la administración de usuarios operativos,

restablecer contraseñas de inicio de sesión en caso de pérdidas y la asignación de

opciones del sistema a un perfil de usuario.

Opción: Usuarios

La opción muestra una bandeja con todos usuarios creados mediante el sistema esto

incluye usuarios con el perfil de estudiante y docente, mostrando la siguiente

información:

Imagen 20 Bandeja de usuarios registrados en el sistema.

Además el usuario con el perfil adecuado podrá realizar las siguientes acciones:

Para registrar un nuevo usuario en el sistema debe pulsar el siguiente enlace

, el cual lo re direccionará a un formulario para efectuar el registro:

Imagen 21 Validación del formulario para el registro de un nuevo usuario

Page 165: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

20

Los campos que se deben llenar son los siguientes:

Nota: El sistema valida el formato de la cedula de identidad y de que no existan cedulas

duplicadas.

Imagen 22 Mensaje de validación de la cedula.

Para guarda el registro del formulario con la información ingresada pulsar el botón

Una vez que guardado la información del usuario, el sistema generara el nombre de

usuario con el siguiente formato mediante la concatenación de lo siguiente:

Primera letra del nombre

Primer apellido completo

Primera letra del segundo apellido

Y la contraseña de inicio de sesión será auto generada con una longitud de 5 caracteres

alfanuméricos y luego será encriptado, la clave encriptado es la que se registrar en el

sistema.

Si la creación del usuario es correcta lo re direccionará a la siguiente pantalla donde

deberá asignarle un perfil de usuario:

Imagen 23 Selección del o los perfiles para el nuevo usuario.

Una vez seleccionado el perfil de usuario a asignar, se debe pulsar el botón

para terminar con el proceso de registro de usuario.

Page 166: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

21

Imagen 24 Mensaje de confirmación por la creación del nuevo usuario.

Para actualizar la información de un usuario del sistema, debe pulsar el icono el

cual levantar una ventana emergente mostrando un formulario donde estará cargada la

información del registro seleccionado.

Nota: El sistema restringe la actualización de la siguiente información del usuario como

son:

Nombre de usuario

Dirección de correo electrónico

Debido a que estos son utilizados como medios para restablecer contraseñas.

Para inactivar una configuración del sistema debe pulsar el icono el cual cambiara

el estado en el sistema de activo (A) a inactivo (I).

Para habilitar un usuario en el sistema debe pulsar el icono el cual cambiara el

estado en el sistema de inactivo (I) a activo (A).

Opción: Asignación opciones

Esta opción le permite al usuario marcar las opciones a las cuales podrá acceder un

perfil de usuario. Para realizar la asignación el usuario deberá especificar el perfil el cual

mostrar las opciones que tiene actualmente asignado, luego podrá marcar o desmarcar

según sea el caso.

Para completar la asignación se debe pulsar el botón

Page 167: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

22

Imagen 25 Bandeja de las opciones que tiene disponible el sistema para su

asignación.

Opción: Restablecer contraseña

Al iniciar la opción el usuario podrá restablecer la contraseña de cualquier usuario, el

cual se realizara al pulsar el icono , el cual enviara un mensaje personalizado a la

cuenta de correo registrada en el sistema donde tendrá un clave temporal para el

ingreso al sistema.

Imagen 26 Envío de notificación al usuario con la clave temporal para el ingreso

al sistema.

Nota: Para esta opción se debe tener acceso a internet para que se realice el envío del

mensaje a la cuenta de correo del usuario.

Módulos para usuarios con perfil de coordinador académico.

Módulo Académico

El coordinador académico es el encargado de registrar los cursos, asignaturas, docentes

y estudiantes al igual que su respectiva asignación para el actual periodo electivo.

Opción: Curso

La opción consiste en registrar los diferentes cursos que se impartirá en el nuevo periodo

electivo los cuales luego serán asignados un grupo de asignaturas y luego a los

diferentes estudiantes.

Page 168: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

23

Nota: Para cada nuevo periodo electivo se debe realizar los respectivos registros de

cursos.

Imagen 27 Bandeja de cursos registrados para el actual periodo electivo.

Para registrar un nuevo curso debe pulsar el botón el cual lo re

direccionará a un formulario para respectivo registro.

Para editar información de un curso específico debe pulsar el icono

Para inactivar un curso en el sistema debe pulsar el siguiente icono de la bandeja

Para activar un curso en el sistema debe pulsar el siguiente icono de la bandeja

Opción: Asignaturas

La opción asignaturas le permitirá registrar nuevas asignaturas que se impartirán

durante el periodo electivo. Para registrar una nueva asignatura el usuario deberá pulsar

el siguiente botón el cual lo re direccionará a un formulario donde

deberá ingresar la respectiva información.

Imagen 28 Bandeja de asignaturas que pueden impartir un docente para actual

periodo electivo.

Para inactivar una asignatura en el sistema debe pulsar el siguiente icono de la bandeja

Page 169: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

24

Para activar una asignatura en el sistema debe pulsar el siguiente icono de la bandeja

Opción: Asignatura – curso

Esta opción le permite al usuario asignar un grupo de asignaturas a un curso en

específico.

Imagen 29 Bandeja que muestra las asignaciones de las materias a los

diferentes cursos para el actual periodo.

Para asignar asignaturas a un curso el usuario debe pulsar el botón

, el cual lo redireccionara al siguiente formulario:

Imagen 30 Interfaz para la asignación de un grupo de materias para un curso.

En este se debe seleccionar el nivel de eduacacion para que se carge las diferentes

asignaturas según el nivel seleccionado. Una vez cargado debe especificar las materias

que se les asignaran al curso.

Opcion: Estudiantes

La opcion es utilizada para el registro de nuevos estudiantes para el actual periodo

electivo.

Page 170: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

25

Imagen 31 Bandeja de los estudiantes registrados para el actual periodo

electivo.

Para registrar un nuevo estudiante se debe pulsar el boton el cual

lo redireccionara al siguiente formulario donde se registran los datos personales:

Imagen 32 Formulario para el registro de datos personales del estudiante.

Una vez registrado los datos personales, el sistema lo redireccionara al formulario para

la asignacion del curso para el nuevo estudiante, donde se debera especificar el nivel

academico del curso para que se enlisten los diferentes cursos asociados al nivel que

se especifico:

Imagen 33 Interfaz para la asignación de curso para el nuevo estudiante.

Para matricular el estudiante al curso despues de haber selecciondo, se debe pulsar el

boton para que sea aplicada asignación, presentandole el siguiente

mensaje.

Page 171: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

26

Imagen 34 Mensaje de confirmación de la asignación del curso al nuevo

estudiante.

Opción: Docentes

La opion permite al coordinador academico registra docentes del colegio y su respectiva

asignacion a las diferentes asignaturas que se impartan en el actual periodo electivo.

Imagen 35 Bandeja de docentes registrados en el actual periodo electivo.

Para inicar con el registro de docentes, se debe pulsar el boton

donde lo redireccionara a la sigueinte pantalla donde se realizara la especificacion de

las asignaturar que impartira el docente durante el transacurso del periodo electivo.

Imagen 36 Formulario de registro de datos personales del docente.

Una vez registrados los datos personales para el docente, el sistema lo redireccionara

a la siguiente pantalla donde debera marcar las diferentes asignaturas que imopartira el

docente para el actual periodo electivo:

Page 172: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

27

Imagen 37 Interfaz para la asignación de las asignaturas que el docente impartirá

en el actual periodo electivo.

Para que se muestren las diferentes asignaturas en los diferentes curso, se debe realizar

una busqueda donde se debe especificar el nivel de educación y el área de conocimiento

para luego pulsar el botón una vez especificadas las asignaturas debe

pulsar el botón para que se aplique la asignación el mostrara el siguiente

mensaje confirmando la acción.

Imagen 38 Mensaje de confirmación de la asignación.

Módulo: Cuestionario

Opción: Elaborar cuestionarios

Imagen 39 Bandeja de las asignaturas que el docente imparte en el actual

periodo electivo.

La opción mostrara una bandeja de las asignaturas que el docente podrá seleccionar

para elaborar un cuestionario.

Page 173: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

28

Para iniciar con la creación del cuestionario, se deberá registra información principal

como son: el título y el objetivo del cuestionario.

Imagen 40 Formulario para el registro del cuestionario.

Creación de preguntas

Imagen 41 Interfaz para el registro de las preguntas del cuestionario.

La interfaz permite al docente agregar preguntas al cuestionario donde podrá especificar

el tipo de respuesta. Los tipos de respuesta son:

Pregunta de respuesta cerrada:

o Única respuesta

o Varias respuesta

Pregunta de respuesta abierta

Imagen 42 Ventana emergente para ingresar el título de la pregunta y especificar

su tipo de respuesta.

Una vez ingresada la pregunta y agregado las diferentes opciones deberá especificar la respuesta.

Imagen 43 Lista de las alternativas a respuesta de la pregunta formulada.

Page 174: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

29

Configuración cuestionario

La configuración del cuestionario, el docente podrá especificar si el estudiante podrá descargar su solución. Podrá visualizar las preguntas del cuestionario agrupadas por tipo de respuesta

Imagen 44 Pantalla para la configuración del cuestionario.

Opción: Historial

La opción le muestra al docente su historial de cuestionarios realizados en todos los

periodos electivos en la cual el impartió clase, además de un resumen mediante un

gráfico correspondiente a su historial. Además de poder descargar el cuestionario con

su respectiva solución.

Imagen 45 Historial de cuestionarios elaborados por el docente.

Módulo: Docente

Opción: Elaborar prueba académica

Registro de la información básica para iniciar el proceso de elaboración de la prueba, donde se ingresar el título, el objetivo de la prueba y especificar el cuestionario que se

utilizara como plantilla para continuar deberá pulsar el botón .

Imagen 46 Formulario para el registro de pruebas académicas.

Page 175: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

30

La interfaz de creación de secciones de la prueba académica podrá ejecutar lo siguiente:

Edición del título de la prueba académica

Edición del objetivo de la prueba académica

Agregar nuevas secciones

Visualización previas de la elaboración de la prueba académica

Configuración y publicación de la prueba académica

Imagen 47 Interfaz para elaborar las diferentes secciones de la prueba

académica.

Carga la interfaz para elaborar una prueba académica donde el docente deberá crear

secciones donde se añadirán preguntas en base al cuestionario seleccionado.

Cuando la sección sea creada, el docente deberá especificar las preguntas que se

añadirán a la sección creada:

Imagen 48 Selección y agregación de una pregunta a la sección de la prueba

académica.

Edición de la respuesta de la pregunta:

El docente al especificar la edición de la respuesta de la pregunta, se podrá redefinir el

tipo de respuesta a la pregunta y de poder agregar nuevas respuesta a la pregunta.

Imagen 49 Edición de la respuesta a la pregunta seleccionada.

Page 176: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

31

Configuración prueba académica

La configuración de la prueba académica consiste en:

Asignar un tiempo de resolución

Calificación de la prueba

Puntajes a las preguntas de cada sección de la prueba

Habilitar la descarga de la solución de la prueba

Imagen 50 Configuración de la prueba académica.

Opción: Historial pruebas académicas

La opción registra todas las pruebas académicas que ha elaborado un docente durante

los periodos electivos del colegio Assad Bucaram Elmhalin, además mostrar de forma

gráfica un resumen del historial.

Imagen 51 Bandeja que muestra el historial de las pruebas académicas

elaboradas en todos los periodos electivos.

En la opción podrá descargar la solución de la prueba o la versión para el simulador de pruebas.

Imagen 52 Descarga de la prueba académica.

Page 177: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

32

Mostrar información en forma de ficha de la prueba académica

Imagen 53Ficha de la prueba académica.

Módulo Estadística

Opción: Rendimiento estudiantil

Imagen 54Cuadro estadístico del rendimiento académico de los estudiantes para

una asignatura de un curso específico

La opción le permite al docente mediante un grafica ver el rendimiento de cada

estudiante por asignatura que el imparte en el periodo electivo mediante un porcentaje

obtenido en base al siguiente cálculo:

Módulo Reporte

Opción: Reporte de pruebas realizadas

Imagen 55 Listado de pruebas académicas para la generación de reportes.

X = (Total puntaje obtenido por el estudiante * 100) / Total puntos de todas las pruebas publicadas por el docente

Page 178: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

33

La opción le permite al docente descargar un informe en formato PDF de las

calificaciones obtenidas por los estudiantes en base a una prueba publicada. Para debe

seleccionar la signatura luego especificar del listado de las pruebas publicar presionar

el siguiente icono para descargar el informe.

Imagen 56 Reporte de calificaciones obtenidas por los estudiantes.

Módulos para usuarios con perfil de estudiante

Los usuarios con el perfil de estudiantes pueden revisar y descargar cuestionario al igual

que las pruebas académicas publicadas por el docente y podrá realizarlo desde los

siguientes módulos del sistema.

Módulo: Cuestionario

El módulo cuestionario permite al estudiante realizar lo siguiente:

Visualizar cuestionarios por asignatura

Descargar el cuestionario en formato PDF

Revisar cuestionario de otros cursos del mismo nivel académico del estudiante

Opción: Ver cuestionarios

Imagen 57 Interfaz donde se muestran las asignaturas que el estudiante se

encuentra recibiendo en el actual periodo electivo.

Al iniciar la opción se visualizara una imagen por cada asignatura de curso donde se

encuentra registrado el estudiante.

Page 179: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

34

El estudiante al pulsar un clic en la imagen se mostrara una ventana emergente con los

cuestionarios publicados por los docentes donde lo podrá descargar para su respectivo

análisis

Imagen 58 Listado de cuestionario que se encuentra disponible para que

estudiante los revise.

Opción: Cuestionarios publicados

Imagen 59 Grupos de cursos por periodos electivos donde el estudiante puede

descargar cuestionarios.

Esta opción permite al estudiante revisar cuestionario publicados por otros docentes en

otros cursos y en diferentes periodos electivos. Donde podrá observar lo siguiente:

Cantidad de cuestionarios publicados en el periodo electivo

Imagen 60 Cantidad de cuestionarios publicados por el docente.

Page 180: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

35

Revisar uno a uno los cuestionarios publicados por el docente

Imagen 61 Datos principales del cuestionario

Descargar cualquier cuestionario que se encuentre en la bandeja.

Imagen 62 Visualización y descarga del cuestionario.

Módulo: Estudiante

El modulo estudiante le permite realizar la actualización de sus datos personales, revisar

las pruebas académicas publicadas y realizar una simulación de prueba en un ambiente

controlado.

Opción: Actualizar datos

Al ingresar a la opción el estudiante visualizara su información personal y de usuario.

Con la opción el estudiante podrá cambiar su contraseña y datos personales.

Imagen 63 Visualización de datos personales y de usuario del estudiante.

Para aplicar los cambios deberá pulsar el botón .

Page 181: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

36

Opción: Pruebas publicadas

En la opción se mostrara una bandeja con todas las pruebas publicadas por el docente donde se observa lo siguiente:

Nombre completo del docente

Asignatura que imparte en el actual periodo electivo

Título de la prueba académica

Fecha de publicación

Opción para resolverla en el simulador de pruebas

Imagen 64 Bandeja de las pruebas académicas publicadas por todos los docente

que el estudiante recibe clase.

Simulador Prueba académica

El simulador de pruebas académicas le permitirá al estudiante prepararse antes de

rendir una prueba real. Al iniciar la simulación se presentara una pantalla con

información básica de la prueba académica y algunas recomendaciones para el

estudiante.

Imagen 65 Información y consejos para antes de resolver la prueba académica.

Page 182: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

37

Para iniciar la simulación de la prueba debe pulsar el botón

Para cancelar la simulación deberá pulsar el botón

Una vez pulsado el botón Resolver prueba, dará inicio al simulador mostrando la

siguiente pantalla.

Imagen 66 Mensaje al estudiante previo a la realización de la prueba académica.

Al presionar el botón OK, iniciar el cronometro en base al tiempo que definió el docente.

Se visualizara la prueba con las diferentes sección donde el estudiante analizara y

responderá según su criterio.

Imagen 67 Interfaz del simulador de pruebas académicas.

Cada vez que el estudiante guarde una pregunta se ocultara su la opciones que tiene

definida la pregunta.

Imagen 68 Preguntas resueltas en el simulador.

Una vez terminado el tiempo mostrar un mensaje informándole al estudiante, al

presionar el botón OK lo re direccionará a los resultados de la prueba.

Page 183: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

38

Imagen 69 Mensaje cuando el tiempo culmino para resolver la prueba.

El resultado de la prueba le indicara al estudiante lo siguiente:

Numero de preguntas acertadas

Cantidad de preguntas erradas

Cantidad de preguntas no respondidas

Puntaje obtenido según la ponderación de la pregunta y cantidad de pregunta

que respondió el estudiante de forma correcta.

Imagen 70 Interfaz que muestra los resultados de la prueba académica realizada

en el simulador.

Estudiante podrá realizar las siguientes acciones:

Descargar su prueba realizada indicando en que pregunta se equivocó desde el botón

.

Imagen 71 Descarga de la prueba realizadas indicando cuales fueron erradas.

Ver el listado de las preguntas erradas y correspondiente solución

Page 184: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

39

Imagen 72 Listado de preguntas erradas.

Imagen 73 Detalle de la pregunta errada.

Ver el cuestionario asociado a la prueba académica al presionar el botón

Imagen 74 Vista previa del cuestionario que se encuentra relacionado la prueba académica.

Para volver a la bandeja de pruebas publicadas debe pulsar el botón. Opción: Historial pruebas académicas realizadas

Page 185: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

40

Imagen 75 Bandeja de las pruebas académicas que el estudiante ha resuelto

desde el simulador de pruebas académicas.

La opción muestra una bandeja con las pruebas académicas resultas en el simulador por parte del estudiante. Donde indicara lo siguiente:

Periodo electivo

Curso

Asignatura

Título de la prueba

Número de intentos

Calificación al primer intento

Calificación del último intento registrado en el sistema

Tiempo que le tomo al estudiante resolver la prueba

Page 186: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

1

UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS

CARRERA DE INGENIERÍA EN SISTEMAS

COMPUTACIONALES

DESARROLLO DE UN SISTEMA WEB PARA APOYAR LA GESTIÓN

DE DOCENTES Y ESTUDIANTES DE EDUCACIÓN GENERAL

BÁSICA SUPERIOR DEL COLEGIO FÍSCAL “ASSAD

BUCARAM ELMHALIN”

.

PROYECTO DE TITULACIÓN

Previa a la obtención del Título de:

INGENIERO EN SISTEMAS COMPUTACIONALES

MANUAL TECNICO

AUTORES:

JÁCOME CHÓEZ WILLIAM JESSIE

PIHUAVE PARRALES HINGRI LISSETHE

TUTORA:

ING. MARIA QUINZO BRAVO, MSc.

GUAYAQUIL – ECUADOR

2017

Page 187: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

2

MANUAL TÉCNICO

Manual que contiene la información para instalar y configurar el sistema

Page 188: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

3

INDICE GENERAL INDICE DE IMAGENES .................................................................................... 4

Instalación de XAMPP .................................................................................... 5

El Panel de Control de XAMPP ................................................................... 9

El panel de control de XAMPP se divide en tres zonas: ......................... 10

Instalación de Yii Framework ....................................................................... 11

Requerimientos previos a la instalación: ................................................ 11

Pasos a seguir: .......................................................................................... 11

Importar la base de datos para el sistema .................................................. 13

Diccionario de datos de las tablas de base de datos ................................. 15

Page 189: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

4

INDICE DE IMÁGENES

Imagen 1 Aviso para activar control de cuenta de usuario 5

Imagen 2 Dar clic en botón next 5

Imagen 3 Selección de componentes 6

Imagen 4 Escoger la carpeta 6

Imagen 5 Información sobre instaladores de aplicaciones Xampp 7

Imagen 6 Confirmación de la instalación 7

Imagen 7 Instalación de xampp 8

Imagen 8 Dar permiso en firewall a apache 8

Imagen 9 Finalizar instalación de xampp 9

Imagen 10 Selecciona el idioma 9

Imagen 11 Configuración de Panel de control de xampp 10

Imagen 12 Quit de Panel de control de xampp 10

Imagen 13 Cerrar panel de control de xampp 11

Imagen 14 Lista de aplicación 12

Imagen 15 Carpeta fuente proyecto 12

Imagen 16 Administrador de base de datos y mysql 13

Imagen 17 Sección importar 13

Imagen 18 Modelo creación de datos del sistema 14

Imagen 19 Pestaña importar y seleccionar archivo 14

Imagen 20 login 15

Imagen 21 Diccionario de datos de las tablas de base de datos 20

Page 190: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

5

Instalación de XAMPP

Una vez obtenido el archivo de instalación de XAMPP, hay que hacer doble clic sobre

él para ponerlo en marcha. Al poner en marcha el instalador XAMPP nos muestra un

aviso que aparece si está activado el Control de Cuentas de Usuario y recuerda que

algunos directorios tienen permisos restringidos:

Imagen 1 Aviso para activar control de cuenta de usuario

A continuación se inicia el asistente de instalación. Para continuar, haga clic en el botón

"Next".

Imagen 2 Dar clic en botón next

Page 191: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

6

Los componentes mínimos que instala XAMPP son el servidor Apache y el lenguaje

PHP, pero XAMPP también instala otros elementos. En la pantalla de selección de

componentes puede elegir la instalación o no de estos componentes. Para seguir estos

apuntes se necesita al menos instalar MySQL y phpMyAdmin.

Imagen 3 Selección de componentes

En la siguiente pantalla puede elegir la carpeta de instalación de XAMPP. La carpeta de

instalación predeterminada es C:\xampp. Si quiere cambiarla, haga clic en el icono de

carpeta y seleccione la carpeta donde quiere instalar XAMPP. Para continuar la

configuración de la instalación, haga clic en el botón "Next".

Imagen 4 Escoger la carpeta

Page 192: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

7

La siguiente pantalla ofrece información sobre los instaladores de aplicaciones para

XAMPP creados por Bitnami. Haga clic en el botón "Next" para continuar. Si deja

marcada la casilla, se abrirá una página web de Bitnami en el navegador.

Imagen 5 Información sobre instaladores de aplicaciones Xampp

Una vez elegidas las opciones de instalación en las pantallas anteriores, esta pantalla

es la pantalla de confirmación de la instalación. Haga clic en en el botón "Next" para

comenzar la instalación en el disco duro.

Imagen 6 Confirmación de la instalación

Page 193: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

8

El proceso de copia de archivos puede durar unos minutos.

Imagen 7 Instalación de xampp

Durante la instalación, si en el ordenador no se había instalado Apache anteriormente,

en algún momento se mostrará un aviso del cortafuego de Windows para autorizar a

Apache a comunicarse en las redes privadas o públicas. Una vez elegidas las opciones

deseadas (en estos apuntes se recomienda permitir las redes privadas y denegar las

redes públicas), haga clic en el botón "Permitir acceso".

Imagen 8 Dar permiso en firewall a apache

Page 194: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

9

Una vez terminada la copia de archivos, la pantalla final confirma que XAMPP ha sido

instalado. Si se deja marcada la casilla, se abrirá el panel de control de XAMPP. Para

cerrar el programa de instalación, haga clic en el botón "Finish".

Imagen 9 Finalizar instalación de Xampp

El Panel de Control de XAMPP

Abrir y cerrar el panel de control

Al panel de control de XAMPP se puede acceder mediante el menú de inicio "Todos los

programas > XAMPP > XAMPP Control Panel" o, si ya está iniciado, mediante el icono

del área de notificación.

La primera vez que se abe el panel de control de XAMPP, se muestra una ventana de

selección de idioma que permite elegir entre inglés y alemán.

Imagen 10 Selecciona el idioma

Page 195: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

10

El panel de control de XAMPP se divide en tres zonas:

1. La zona de módulos, que indica para cada uno de los módulos de XAMPP: si

está instalado como servicio, su nombre, el identificador de proceso, el puerto

utilizado e incluye unos botones para iniciar y detener los procesos,

administrarlos, editar los archivos de configuración y abrir los archivos de registro

de actividad.

2. La zona de notificación, en la que XAMPP informa del éxito o fracaso de las

acciones realizadas

3. La zona de utilidades, para acceder rápidamente

Imagen 11 Configuración de Panel de control de xampp

Para cerrar el panel de control de XAMPP hay que hacer clic en el botón Quit (al cerrar

el panel de control no se detienen los servidores):

Imagen 12 Quit de Panel de control de xampp

El botón Cerrar en forma de aspa no cierra realmente el panel de control, sólo lo

minimiza:

Page 196: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

11

Imagen 13 Cerrar panel de control de Xampp

Instalación de Yii Framework

Requerimientos previos a la instalación:

Tener instalado y funcionando XAMPP preferentemente la última versión.

Descargar Yii framework versión 1.X

Un editor de texto, puede ser el block de notas o algún otro yo por ejemplo uso

notepad++ o sublime Text

Pasos a seguir:

1. vamos a suponer que instalamos XAMPP en su ubicación por defecto o

sea C:\xampp, luego vamos a descomprimir el comprimido yii-1.1.19.5790cb.tar

ubicado dentro del CD en la carpeta Instaladores y renombrarla con el nombre

de Yii y lo vamos a colocar en la siguiente ruta C:\xampp\htdocs.

2. Ahora con el explorador de archivos vamos a ir a la carpeta C:\yii\framework y

vamos a editar el archivo yiic.bat con el editor de texto y vamos a buscar la

siguiente línea:

o if “%PHP_COMMAND%” == “” set PHP_COMMAND=php.exe

3. Remplazamos donde dice php.exe por la ruta donde esta php en Xampp

que quedaría como lo siguiente si utilizamos las rutas que acordamos

anteriormente y a continuación guardamos los cambios:

o if “%PHP_COMMAND%” == “” set

PHP_COMMAND=C:\xampp\php\php.exe

4. Luego abrimos la terminal de comandos de Windows, en el menú de inicio en la

caja de texto de búsqueda colocamos “CMD” sin las comillas y entraremos a la

terminal, vamos a la carpeta de donde esta yiic.bat o

sea C:\xampp\htdocs\yii\framework.

Page 197: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

12

5. Por ultimo vamos a ejecutar el siguiente comando remplazando

nombre_del_proyecto por lo que nosotros queramos:

o yiic.bat webapp C:\xampp\htdocs\yii\nombre_del_proyecto

Para que este tal como se desarrolló el sistema colocar como nombre del

proyecto GestionAcademica

6. Yii nos preguntara si estamos seguros de generar la nueva aplicación,

presionamos la tecla “y” para continuar y listo tenemos nuestra aplicación lista.

Imagen 14 Lista de aplicación

Una vez realizado el paso descomprimir el siguiente archivo zipiado con nombre

yii_fuentes ubicado en la carpeta Fuente Proyecto dentro del CD y reemplazar las

carpetas que se muestran en la imagen en la siguiente ruta C:\xampp\htdocs\yii

Imagen 15 Carpeta fuente proyecto

Page 198: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

13

Importar la base de datos para el sistema

Pasos:

1. Abrir el administrador de Base de datos desde el XAMPP, pulsando el botón

Admin de MySQL. El cual abrirá una página en el navegador donde se mostrar

el administrador de MySQL.

Imagen 16 Administrador de base de datos y MySQL

2. Ir a la sección Importar ubicada en la cabecera de la página , donde

le mostrar una pantalla la cual le indicara que debe especificar un archivo para

la importación.

Imagen 17 Sección importar

Page 199: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

14

Buscar el archivo que se encuentra en el CD en la siguiente ruta \Instaladores\Script

Base Datos\. El archivo a seleccionar tiene el siguiente nombre: gestionacademica.sql

Dicho archivo contiene la creación de todo el modelo relacional de la base de datos del

sistema.

Una vez creado el modelo de la base de datos se debe presentar lo siguiente cuando

se especifique la base.

Imagen 18 Modelo creación de datos del sistema

3. Cargar datos a las principales tablas de la base de datos del sistema. Una vez

seleccionada la base de datos “gestionacademica_pre” ir a la pestaña Importar

y seleccionar el siguiente archivo gestionacademica_datos.sql, ubicado en la

ruta \Instaladores\Script Base Datos\, el cual contiene datos para las tablas

maestras del sistema.

Imagen 19 Pestaña importar y seleccionar archivo

Page 200: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

15

Y pulsar el botón continuar para realizar la carga de los datos.

Para verificar que los datos fueron subidos de forma correcta realizar lo siguiente:

Verificar que el servidor web de apache de XAMPP este levantado

Copiar la siguiente URL http://localhost:8089/yii/GestionAcademica/site/login en el

navegador se deberá cargar un página de Login utilizar la siguiente credencial para

entrar al sistema:

o Usuario: admin

o Contraseña: 123456

Si el sistema lo redireccionará a la siguiente pantalla la carga de datos se realizó de

forma correcta

Imagen 20 login

Diccionario de datos de las tablas de base de datos

Page 201: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

16

Page 202: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

17

Page 203: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

18

Page 204: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

19

Page 205: UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/40780/1/B-CISC-PTG... · 2019. 6. 12. · JAVASCRIPT 39 JQUERY 40 DATATABLES 41 CSS 42 BOOTSTRAP 43 HIGHCHARTS 44 ...

20

Imagen 21 Diccionario de datos de las tablas de base de datos