trabajo especial de grado - saber ucv: página de...
TRANSCRIPT
i
Universidad Central de Venezuela
Facultad de Ciencias
Escuela de Computación
Aplicación Web para la gestión del proceso
de inscripción de Métodos de Investigación
y de Laboratorio de la Escuela de Biología
de la Universidad Central de Venezuela
Trabajo Especial de Grado
Presentado ante la ilustre
Universidad Central de Venezuela
Por los bachilleres:
Alejandra N. Omaña M.
Alisandro A. Montoya A.
Para optar al título de
Licenciado en Computación
Tutores:
Profa. Yosly Hernández
Prof. Jesús Romero
Caracas, Octubre de 2014
ii
Acta de Veredicto
Quienes suscriben, Miembros del Jurado designado por el Consejo de la Escuela de
Computación de la Facultad de Ciencias de la Universidad Central de Venezuela, para
examinar el Trabajo Especial de Grado, presentado por los bachilleres Alejandra Nazareth
Omaña Milla CI No.V-20.005.309 y Alisandro Antonio Montoya Aramburu CI No. V-
17.978.681, con el título “Aplicación Web para la gestión del proceso de inscripción de
Métodos de Investigación y de Laboratorio de la Escuela de Biología de la Universidad
Central de Venezuela”, a los fines de cumplir con el requisito legal para optar al título de
Licenciado en Computación, dejan constancia de lo siguiente:
Leído el trabajo por cada uno de los Miembros del Jurado, se fijó el día 30 de Octubre de
2014, a las 2:00pm, para que sus autores lo defendieran en forma pública en el Aula PB-3 de
la Escuela de Computación, Facultad de Ciencias de la Universidad Central de Venezuela, lo
cual realizaron mediante una presentación oral de su contenido y luego respondieron
satisfactoriamente a las preguntas que les fueron formuladas por el Jurado, todo ello conforme
a lo dispuesto en la Ley de Universidades y demás normativas vigentes de la Universidad
Central de Venezuela. Finalizada la defensa pública del Trabajo Especial de Grado, el jurado
decidió aprobarlo con la nota de _______ puntos.
En fe de lo cual se levanta la presente Acta, en Caracas el 30 de Octubre de 2014.
________________________ ________________________
Profa. Yosly Hernández (Tutor) Prof. Jesús Romero (Tutor)
________________________ ________________________
Guillermina Alonso (Jurado) Franklin Sandoval (Jurado)
iii
Dedicatorias
A ti madre, por todo tu amor y cariño, por enseñarme el valor de los estudios.
Has formado todo lo que soy, mis principios y valores, mi perseverancia y mi empeño.
A ti padre, por confiar en mí y darme la motivación
necesaria para superarme.
A ti hermano, para que esto te sirva de motivación y
tengas la certeza que con esfuerzo todas
las cosas se pueden lograr.
A ti hermana, que has estado conmigo en las buenas y malas,
siempre apoyándome a pesar de las adversidades
A ustedes abuelos (Pedro y Juana), que me han visto crecer
Me enorgullece poder dedicarles este logro. Los amo!
Agradecimientos
A Dios, por darme la vida y por siempre
mostrarme el buen camino.
A mis padres (Gladys y Pedro) por guiarme por el
camino correcto y siempre creer en mí.
A mis otros padres (Elisa y Alberto), gracias por adoptarme
como a una hija más y apoyarme durante todo este camino.
Gracias por confiar en mí y estar allí siempre.
A mis tías, tíos, primas y primos que de alguna u otra forma estuvieron
conmigo en esta etapa de mi vida.
A ti Alisandro, que llegaste para apoyarme y motivarme a que
juntos alcanzáramos esta meta. Lo logramos!!!!
A ti Yosly por ser mi guía en el desarrollo de este proyecto,
por entenderme y por tu apoyo en los peores momentos.
A ti Jesús, gracias por tus palabras de motivación cuando
creí todo perdido.
Alejandra Omaña
iv
Dedicatorias y Agradecimientos
Alisandro Montoya
Agradezco principalmente a mi padre, por el apoyo incondicional en cada una de mis etapas.
A mis abuelos, Consuelo y Eufrasio Antonio Aramburu por su irremplazable compañía y
apoyo.
A Carla Salazar por su inmenso apoyo en cada decisión fundamental.
A mis hermanos, en especial a María Alejandra Montoya por ser el mejor ejemplo a seguir.
A mis familiares cercanos, primos y tíos, por estar en los mejores y peores momentos.
A mis amigos Cesar Duarte, José Roa, Edwin Suarez, Yorman Castellanos por ser hermanos,
compañeros desde que tengo memoria.
A Darwin Martínez, compañero en cada materia de mi carrera.
A Leonardo Chacón, Franklin Ballesteros, Jorman Núñez, por el apoyo y flexibilidad en el
trabajo para culminar mi carrera.
A mi tutora Yosly Hernández y Jesús Romero quienes me permitieron el desarrollo de este
Trabajo Especial de Grado.
Y a la mejor compañera, Alejandra Omaña, sin ella no hubiese sido posible terminar mi
carrera.
Este logro es dedicado a la memoria de mi madre: Chela
v
Resumen
Actualmente en la Escuela de Biología de la Facultad de Ciencias de la Universidad Central
de Venezuela se lleva a cabo el proceso de inscripción de las materias Métodos de
Investigación y Métodos de Laboratorio de forma manual, por lo que existe gran cantidad de
movimiento de documentos en físico, además de que la información se encuentra
descentralizada, originando en ocasiones retrasos en el desarrollo de las actividades del
proceso. Tomando en cuenta esta situación, el objetivo que se persiguió con el Trabajo
Especial de Grado es desarrollar una herramienta de calidad que permita la gestión de forma
automatizada del proceso de inscripción de las materias mencionadas. Dicha herramienta es
una aplicación construida bajo ambiente web que tendrá por nombre Biotec. Para la
elaboración de este proyecto fueron empleados frameworks, aplicaciones y tecnologías libres,
entre ellos se pueden mencionar: Hypertext Pre-processor, por sus siglas en inglés PHP como
lenguaje de programación del lado del servidor, Laravel como framework de desarrollo para
PHP, Bootstrap como framework para la programación del lado del cliente, MySQL como
Sistema Manejador de Base de Datos, Apache como servidor de aplicaciones, Google Chrome
como navegador web para realizar las pruebas, entre otros. Para la construcción de la
aplicación web se aplicó una adaptación del método de desarrollo de software AgilUs, el cual
permitió guiar la parte práctica del presente Trabajo Especial de Grado. Este Método está
enfocado en el usuario final y en la incorporación de usabilidad desde etapas tempranas del
desarrollo de software.
Palabras Clave: UCV, Biotec, Aplicación Web, MySQL, Apache, Bootstrap, Laravel,
AgilUs,
vi
Índice General
Índice de Figuras ....................................................................................................................... xi
Índice de Cuadros ..................................................................................................................... xv
Introducción ............................................................................................................................ xvii
Capítulo 1. Problema de Investigación ..................................................................................... 19
1.1 Contexto de la Investigación ........................................................................................... 19
1.2 Planteamiento del Problema ........................................................................................... 20
1.3 Justificación .................................................................................................................... 25
1.4 Objetivo General ............................................................................................................. 26
1.5 Objetivos Específicos ..................................................................................................... 26
1.6. Alcance .......................................................................................................................... 26
1.7 Metodología de Desarrollo ............................................................................................. 27
Capítulo 2. Marco Conceptual .................................................................................................. 29
2.1 Aplicaciones Web ........................................................................................................... 29
2.1.1 Características de una Aplicación Web .................................................................... 30
2.1.2 Arquitectura de una Aplicación Web ....................................................................... 31
2.1.3 Patrón de Diseño: Modelo Vista Controlador (MVC) ............................................. 32
2.2 Sistema Manejador de Base de Datos ............................................................................. 33
2.3 Tecnologías Web ............................................................................................................ 34
2.3.1 Tecnologías de lado del Cliente: .............................................................................. 34
2.3.1.1 Lenguaje de Marcado de Hipertexto (HTML) .................................................. 34
2.3.1.2 Hoja de Estilo en Cascada (Cascading Style sheets CSS) ................................. 36
vii
2.3.1.3 JavaScript ......................................................................................................... 37
2.3.1.4 JQuery ................................................................................................................ 37
2.3.2 Tecnologías del lado del Servidor Web: .................................................................. 38
2.3.2.1 Procesador de hipertexto (Hypertext Preprocessor PHP) .................................. 38
2.3.3 Tecnologías del lado del Servidor de Base de Datos: .............................................. 39
2.3.3.1 MySQL .............................................................................................................. 39
2.4 Servidor Web Apache ..................................................................................................... 41
2.4.1 Características de Apache ..................................................................................... 42
2.4.2 Ventajas de Apache .............................................................................................. 42
2.4.3 Desventajas de Apache ......................................................................................... 43
2.5 Xammp ............................................................................................................................ 44
2.6. Control de Versiones: Git .............................................................................................. 44
2.7 Bootstrap ......................................................................................................................... 45
2.8 Laravel ............................................................................................................................ 45
2.9. StarUML ........................................................................................................................ 46
2.10 Flujo de Trabajo ............................................................................................................ 47
2.10.1 Modelo de Procesos de Negocio y Notación (BMPN) .......................................... 48
Capítulo III. Marco Aplicativo ................................................................................................. 49
3.1 Recolección y Análisis de Requerimientos ................................................................. 49
3.1.1 Entrevista .............................................................................................................. 49
3.1.2 Tormenta de Ideas ................................................................................................ 49
3.1.3 Requerimientos Funcionales y No Funcionales ................................................... 50
3.1.4 Perfil de Usuario ................................................................................................... 51
3.1.5 Diagramas de Casos de Uso ................................................................................. 51
viii
3.1.6 Modelo del Diagrama de Entidad/Relación.......................................................... 82
3.2 Elaboración de la Interfaz de Usuario ......................................................................... 84
3.2.1 Prototipaje ............................................................................................................. 84
3.2.2 Guía de estilos ...................................................................................................... 85
3.2.3 Elementos de accesibilidad ................................................................................... 91
3.3Flujo de Trabajo de Proceso de Inscripción Automatizado ......................................... 92
3.4 Desarrollo .................................................................................................................... 93
3.3.1 Elección y Adaptación del Framework ................................................................ 93
3.3.1.1 Instalación de la Aplicación ......................................................................... 94
3.3.1.2 Creación de los Modelos .............................................................................. 98
3.3.1.3 Creación de Controladores ......................................................................... 100
3.3.1. Creación de Vistas y Adaptación del Prototipo ............................................ 101
Capítulo IV. Resultados .......................................................................................................... 103
4.1 Página Principal ............................................................................................................ 103
4.1.1 Página de Listado de Temas ................................................................................... 104
4.2 Módulo de Personal Administrativo - Inicio ................................................................ 104
4.2.1 Cargar Listados ...................................................................................................... 105
4.2.2 Configuración de Departamentos ........................................................................... 106
4.2.3 Listado de Profesores ............................................................................................. 107
4.2.3.1 Crear Nuevo Profesor ...................................................................................... 108
4.2.3.2 Editar Profesor ................................................................................................. 109
4.2.3.3 Eliminar Profesor ............................................................................................. 110
4.2.3.4 Búsqueda por Nombre y Departamento .......................................................... 110
4.2.4 Listado de Estudiantes ............................................................................................ 111
ix
4.2.4.1 Crear Nuevo Estudiante ................................................................................... 112
4.2.4.2 Editar Estudiante ............................................................................................. 113
4.2.4.3 Eliminar Estudiante ......................................................................................... 114
4.2.4.4 Búsqueda por Nombre y Departamento ......................................................... 115
4.2.5 Listado de Planillas ................................................................................................ 116
4.2.6 Imprimir Listado de Solicitudes ............................................................................. 116
4.2.7 Cambiar Contraseña ............................................................................................... 117
4.3 Módulo de Profesor - Inicio .......................................................................................... 117
4.3.1 Actualizar Datos ..................................................................................................... 118
4.3.2 Solicitudes de Tutoría............................................................................................. 118
4.3.3 Cambiar Contraseña ............................................................................................... 119
4.3.4 Notificaciones......................................................................................................... 119
4.4. Módulo de Tutor – Inicio ............................................................................................. 120
4.4.1 Tutoría .................................................................................................................... 120
4.4.2 Cargar Notas ........................................................................................................... 121
4.4.3 Notificaciones......................................................................................................... 122
4.5 Módulo de Representante de UDPP - Inicio ................................................................. 122
4.5.1 Listado de Temas ................................................................................................... 123
4.5.2 Listado de Estudiantes ............................................................................................ 124
4.5.3 Listado de Planillas ................................................................................................ 125
4.5.4 Observar Notas Cargadas ....................................................................................... 125
4.5.5 Enviar Comunicados .............................................................................................. 126
4.6. Módulo de Jefe de Departamento - Inicio ................................................................... 127
4.6.1 Listado de Temas ................................................................................................ 127
x
4.6.2 Listado de Estudiantes ........................................................................................ 128
4.6.3 Listado de Planillas ............................................................................................. 129
4.6.4 Observar Notas Cargadas ................................................................................... 130
4.7. Módulo de Director - Inicio ......................................................................................... 130
4.8 Módulo de Estudiante – Inicio ...................................................................................... 131
4.8.1 Actualizar Datos ..................................................................................................... 131
4.8.2 Seleccionar Tema ................................................................................................... 132
4.8.3 Cargar Documento ................................................................................................. 133
4.8.4 Imprimir Planilla .................................................................................................... 133
4.8.5 Ver Observaciones ................................................................................................ 134
4.8.6 Cambiar Contraseña ............................................................................................... 135
4.8.7 Notificaciones......................................................................................................... 135
4.9 Prueba de Usabilidad .................................................................................................... 136
4.10 Licencia CreativeCommons Venezuela ..................................................................... 137
Conclusiones ........................................................................................................................... 138
Recomendaciones y Trabajos Futuros .................................................................................... 140
Referencias Bibliográficas ...................................................................................................... 141
Anexos .................................................................................................................................... 144
Anexo 1. Evaluación Heurística a un Experto .................................................................... 145
Anexo 2. Instrumento de Validación .................................................................................. 147
Anexo 3. Licencia CreativeCommons Venezuela .............................................................. 150
xi
Índice de Figuras
Figura 1. Organigrama Estructural de la Escuela de Biología. ................................................ 20
Figura 2. Proceso Manual de Inscripción de Métodos de Laboratorio y Métodos de
Investigación Parte I ............................................................................................................. 23
Figura 3. Proceso Manual de Inscripción de Métodos de Laboratorio y Métodos de
Investigación Parte II. ........................................................................................................... 24
Figura 4. AgilUs: Etapas, Actividades y Artefactos. ................................................................ 28
Figura 5. Interfaz del Menú Principal de Estudiantes en CONEST ......................................... 30
Figura 6. Arquitectura Cliente-Servidor (Modelo de tres capas). ............................................ 32
Figura 7. Panel de Control Xammp .......................................................................................... 44
Figura 8. Casos de Uso Aplicación Web Biotec Nivel 0 ......................................................... 52
Figura 9. Casos de Uso Aplicación Web Biotec Nivel 1. ........................................................ 52
Figura 10. Casos de Uso Aplicación Web Biotec – Personal Administrativo ......................... 54
Figura 11. Casos de Uso Aplicación Web Biotec – Profesor ................................................... 66
Figura 12. Casos de Uso Aplicación Web Biotec – Tutor ....................................................... 68
Figura 13. Casos de Uso Aplicación Web Biotec - Representante de UDPP .......................... 71
Figura 14. Casos de Uso Aplicación Web Biotec - Jefe de Departamento. ............................. 76
Figura 15. Casos de Uso Aplicación Web Biotec – Director ................................................... 77
Figura 16. Casos de Uso Aplicación Web Biotec – Estudiante ............................................... 79
Figura 17. Diagrama Entidad/Relación Biotec ......................................................................... 83
Figura 18. Prototipo de Interfaz de Inicio de Sesión ................................................................ 84
Figura 19. Prototipo de Interfaz de Menú de Usuario .............................................................. 85
Figura 20. Guía de Estilo de Biotec .......................................................................................... 85
Figura 21. Logotipo Biotec ....................................................................................................... 86
Figura 22. Iconos de Biotec ...................................................................................................... 86
Figura 23. Mapa de Navegación – Inicio. ................................................................................ 87
Figura 24. Mapa de Navegación Inicio - Secretaria. ................................................................ 87
Figura 25. Mapa de Navegación deInicio – Profesor ............................................................... 88
Figura 26. Mapa de Navegación de Inicio – Tutor. .................................................................. 88
xii
Figura 27. Mapa de Navegación Inicio – Representante de UDPP .......................................... 89
Figura 28. Mapa de Navegación de Inicio – Jefe de Departamento ......................................... 89
Figura 29. Mapa de Navegación de Inicio –Director ............................................................... 90
Figura 30. Mapa de Navegación de Inicio – Estudiante ........................................................... 90
Figura 31. Sección Principal de Biotec con aumento de tamaño de 200% .............................. 91
Figura 32. Sección Principal de Biotec con tamaño predeterminado ....................................... 91
Figura 33. Flujo de Trabajo - Proceso de Inscripción Automatizado. Elaboración Propia ...... 92
Figura 34. Parámetros de Configuración de Base de Datos ..................................................... 95
Figura 35. Especificación de la Migración de la Creación de la Tabla Roles ......................... 96
Figura 36. Seeding sobre la tabla roles ..................................................................................... 97
Figura 37. Definición del Modelo User .................................................................................... 99
Figura 38. Parte de la definición de SessionController .......................................................... 101
Figura 39. Página de Inicio de Biotec..................................................................................... 103
Figura 40. Página de Listado de Temas .................................................................................. 104
Figura 41. Módulo de Personal Administrativo – Inicio ........................................................ 105
Figura42. Módulo de Personal Administrativo - Cargar Listados ......................................... 106
Figura 43. Módulo de Personal Administrativo – Configuración de Departamentos ............ 107
Figura 44. Módulo de Personal Administrativo – Listado de Profesores ............................... 108
Figura 45. Módulo de Personal Administrativo – Listado de Profesores: Crear Nuevo Profesor
............................................................................................................................................ 109
Figura 46. Módulo de Personal Administrativo – Listado de Profesores: Editar Profesor .... 109
Figura 47. Módulo de Personal Administrativo – Listado de Profesores: Eliminar Profesor 110
Figura 48. Módulo del Personal Administrativo –Listado de Profesores: Búsqueda por
Nombre ............................................................................................................................... 111
Figura 49. Módulo del Personal Administrativo –Listado de Profesores: Búsqueda por
Departamento...................................................................................................................... 111
Figura 50. Módulo de Personal Administrativo – Listado de Estudiantes ............................. 112
Figura 51. Modulo Personal Administrativo – Listado de Estudiantes: Crear Nuevo Estudiante
............................................................................................................................................ 113
Figura 52. Modulo Personal Administrativo – Listado de Estudiantes: Editar Estudiante
Elaboración Propia ............................................................................................................. 114
xiii
Figura 53. Modulo Personal Administrativo – Listado de Estudiantes: Eliminar Estudiante 114
Figura 54. Módulo del Personal Administrativo –Listado de Estudiantes: Búsqueda por
Nombre ............................................................................................................................... 115
Figura 55. Módulo del Personal Administrativo –Listado de Estudiantes: Búsqueda por
Departamento...................................................................................................................... 115
Figura 56. Modulo Personal Administrativo – Listado de Planillas....................................... 116
Figura 57. Modulo Personal Administrativo – Listado de Solicitudes................................... 116
Figura 58. Módulo Personal Administrativo – Cambiar Contraseña ..................................... 117
Figura 59. Modulo de Profesor - Inicio .................................................................................. 117
Figura 6. Arquitectura Cliente-Servidor (Modelo de tres capas). ............................................ 32
Figura 60. Módulo de Profesor - Actualizar Datos ................................................................ 118
Figura 61. Módulo de Profesor – Solicitudes de Tutoría ....................................................... 118
Figura 62. Modulo de Profesor – Cambiar Contraseña .......................................................... 119
Figura 63. Modulo de Profesor – Notificaciones ................................................................... 119
Figura 64. Modulo de Tutor - Inicio ....................................................................................... 120
Figura 65. Módulo de Tutor – Tutoría .................................................................................... 121
Figura 66. Módulo de Tutor – Cargar Notas .......................................................................... 122
Figura 67. Módulo de Tutor - Notificaciones ......................................................................... 122
Figura 68. Módulo de Representante de UDPP - Inicio ......................................................... 123
Figura 69. Módulo de UDPP - Listado de Temas .................................................................. 124
Figura 70. Módulo de Representante de UDPP - Listado de Estduiantes .............................. 124
Figura 71. Módulo de Representante de UDPP – Listado de Planillas .................................. 125
Figura 72. Módulo Representante UDPP – Observar Notas Cargadas .................................. 126
Figura 73. Módulo Representante UDPP – Enviar Comunicados ......................................... 126
Figura 74. Módulo Jede de Departamento – Inicio ................................................................ 127
Figura 75. Módulo de Jefe de Departamento – Listado de Temas ......................................... 128
Figura 76. Módulo de Jefe de Departamento – Listado de Estudiantes ................................. 129
Figura 77. Módulo de Jefe de Departamento – Listado de Planillas ...................................... 129
Figura 78. Módulo de Jefe de Departamento – Observar Notas Cargadas............................. 130
Figura 79. Módulo de Director - Inicio .................................................................................. 130
Figura 80. Modulo de Estudiante - Inicio ............................................................................... 131
xiv
Figura 81. Módulo de Estudiante – Actualizar Datos ............................................................ 132
Figura 82. Módulo de Estudiante – Seleccionar Tema ........................................................... 132
Figura 83. Módulo de Estudiante – Cargar Documento ......................................................... 133
Figura 84. Módulo de Estudiante – Imprimir Planilla ............................................................ 134
Figura 85. Módulo de Estudiante – Ver Observaciones ......................................................... 135
Figura 86. Módulo de Estudiante – Cambiar Contraseña ....................................................... 135
Figura 87. Módulo de Estudiante – Notificaciones ................................................................ 136
Figura 87. Resultados de la Evaluación Heurística ................................................................ 137
Figura 88. Reconocimiento No Comercial Sin Obra Derivada. CC BY-NC-ND .................. 137
xv
Índice de Cuadros
Tabla 1. Descripción caso de uso Iniciar Sesión………………………..…………………….53
Tabla 2. Descripción caso de uso Ver Cartelera………………………………………………53
Tabla 3. Descripción caso de uso Recuperar Contraseña…………………………………..…53
Tabla 4. Descripción caso de uso Cargar Listado…………………………………………….55
Tabla 5. Descripción caso de uso Cargar Profesor……………………………………………55
Tabla 6. Descripción caso de uso Cargar Estudiante…………………….…………………....56
Tabla 7. Descripción caso de uso Cargar Estudiante Métodos de Laboratorio……………….56
Tabla 8. Descripción caso de uso Cargar Métodos de Investigación…………………………57
Tabla 9. Descripción caso de uso Configurar Departamento…………………………………57
Tabla 10. Descripción caso de uso Ver Listado de Profesor…………….……………………58
Tabla 11. Descripción caso de uso Agregar Profesor……………………..…………………..58
Tabla 12. Descripción caso de uso Eliminar Profesor……………………….………………..59
Tabla 13. Descripción caso de uso Modificar Profesor……………………….………………59
Tabla 14. Descripción caso de uso Ver Listado de Estudiantes………………………………60
Tabla 15. Descripción caso de uso Agregar Estudiante………………………………………60
Tabla 16. Descripción caso de uso Eliminar Estudiante……………………….……………..61
Tabla 17. Descripción caso de uso Modificar Estudiante…………………………………….61
Tabla 18. Descripción caso de uso Ver Listado de Planilla…………………………………..62
Tabla 19. Descripción caso de uso Imprimir Planillas………………………………………..62
Tabla 20. Descripción caso de uso Aceptar Planilla por CE………………………………….63
Tabla 21. Descripción caso de uso Rechazar Planilla por CE……………………….………..63
Tabla 22. Descripción caso de uso Agregar Observación…………………………………….63
Tabla 23. Descripción caso de uso Imprimir Listado de Solicitudes…………………………64
Tabla 24. Descripción caso de uso Cambiar Contraseña……………………………….……..64
Tabla 25. Descripción caso de uso Cerrar Sesión…………………………………………….65
Tabla 26. Descripción caso de uso Ver Notificación…………………………………………65
xvi
Tabla 27. Descripción caso de uso Ver Solicitud………………………………………….….66
Tabla 28. Descripción caso de uso Aceptar Tutoría…………………………………………..67
Tabla 29. Descripción caso de uso Rechazar Tutoría…………………………………………67
Tabla 30. Descripción caso de uso Agregar Observación…………………………………….67
Tabla 31. Descripción caso de uso Actualizar Datos…………………………………………68
Tabla 32. Descripción caso de uso Ver Tutoría……………………………………………….69
Tabla 33. Descripción caso de uso Revisar Planilla…………………………………………..69
Tabla 34. Descripción caso de uso Aceptar Planilla………………………………………….69
Tabla 35. Descripción caso de uso Rechazar Planilla………………………………………...70
Tabla 36. Descripción caso de uso Agregar Observación…………………………………….70
Tabla 37. Descripción caso de uso Cargar Nota………………………………………………70
Tabla 38. Descripción caso de uso Enviar Comunicado……………………………………...71
Tabla 39. Descripción caso de uso Ver Nota Cargada………………………………………..72
Tabla 40. Descripción caso de uso Ver Listado de Planilla (Aceptada por Tutor)……….…..72
Tabla 41. Descripción caso de uso Aceptar Planilla………………………………………….73
Tabla 42. Descripción caso de uso Rechazar Planilla………………………………………...73
Tabla 43. Descripción caso de uso Agregar Observaciones…………………….…………….73
Tabla 44. Descripción caso de uso Ver Listado Estudiante (Departamento)………………....74
Tabla 45. Descripción caso de uso Ver Listado de Tema…………………………………….74
Tabla 46. Descripción caso de uso Agregar Tema……………………………………………75
Tabla 47. Descripción caso de uso Modificar Tema………………………………………….75
Tabla 48. Descripción caso de uso Eliminar Tema……………………………………….......75
Tabla 49. Descripción caso de uso Ver Listado de Planilla Aprobada por UDPP……………76
Tabla 50. Descripción caso de uso Iniciar Proceso…………………………………………...78
Tabla 51. Descripción caso de uso Detener Proceso………………………………………….78
Tabla 52. Descripción caso de uso Finalizar Proceso………………………………………...79
Tabla 53. Descripción caso de uso Seleccionar Tema………………………………………...80
Tabla 54. Descripción caso de uso Enviar Solicitud………………………………………….80
Tabla 55. Descripción caso de uso Cargar Documento……………………………………….81
Tabla 56. Descripción caso de Imprimir Planilla……………………………………………..81
Tabla 57. Descripción caso de uso Ver Observación…………………………………………82
xvii
Introducción
Hoy en día son muchas las organizaciones que aprovechan el uso de las tecnologías web
para difundir su información institucional, dar a conocer sus actividades a un grupo de
usuarios y automatizar sus procesos internos mediante el uso de aplicaciones que faciliten y
ayuden en sus actividades cotidianas.
Estos beneficios se logran con la implementación de aplicaciones web, que no son más que
programas que se ejecutan en servidores y utilizan páginas web como interfaz del lado del
cliente. Son sencillas, de fácil uso, económicas, confiables, seguras, portables, y ofrecen la
posibilidad de ser accedidas desde cualquier lugar sólo con un dispositivo que cuente con un
navegador y acceso a Internet.
La Escuela de Biología de la Facultad de Ciencias de la Universidad Central de Venezuela
(UCV), no disfrutaba de estos grandes beneficios ofrecidos por aplicaciones de ésta índole,
pues llevaba a cabo un proceso manual para la gestión de la inscripción de las asignaturas
Métodos de Investigación y Métodos de Laboratorio.
Debido a esto, surgió la necesidad de trabajar en conjunto con la Escuela de Biología de la
Facultad de Ciencias de la UCV, para desarrollar e implementar una aplicación web que
permitiese gestionar dicho proceso de inscripción de forma automatizada, para mejorar el
desenvolvimiento de las actividades realizadas por todos los usuarios participantes dentro del
mismo.
El siguiente Trabajo Especial de Grado está estructurado en los siguientes capítulos:
Capítulo I: Problema de Investigación. Se describe la problemática en el cual se
enmarca el presente Trabajo Especial de Grado. Así mismo se propone una solución y se
justifica la misma; se define el objetivo general, los objetivos específicos y el alcance.
Además se explica brevemente la metodología de desarrollo adaptada durante el desarrollo de
la aplicación web Agilus.
xviii
Capítulo II: Marco Conceptual. Se presentan las bases teóricas de la investigación.
Este capítulo abarca todas las definiciones relacionadas con Aplicaciones Web, así como la
descripción de las herramientas tecnológicas que se utilizaron para el desarrollo de la
aplicación como: el Sistema Manejador de Base de Datos MySQL, el framework Laravel,
PHP, Apache, entre otros.
Capitulo III: Marco Aplicativo. Se presenta la adaptación del método de desarrollo de
software AgilUs y se detalla cada uno de los artefactos utilizados en el desarrollo de la
aplicación web.
Capítulo IV: Resultados. Este capítulo muestra los resultados obtenidos luego de
culminar el desarrollo del Trabajo Especial de Grado y se describen de forma resumida todas
las funcionalidades de la aplicación web con sus respectivas interfaces.
Así mismo, se presenta las conclusiones más relevantes de este Trabajo Especial de Grado,
tanto los aportes como las recomendaciones de trabajos a futuro. Por último, se muestra las
referencias bibliográficas consultadas para la elaboración de esta investigación.
19
Capítulo 1. Problema de Investigación
En el presente capítulo se presenta el problema de investigación identificado en la Escuela
de Biología de la Facultad de Ciencias de la UCV en cuanto al proceso de inscripción de
Métodos de Investigación y Métodos de Laboratorio, se explica la importancia y justificación
del mismo, se describe el objetivo general, los objetivos específicos, el alcance y el método de
desarrollo empleado.
1.1 Contexto de la Investigación
La Escuela de Biología surge en el año 1946, con la creación del Departamento de Ciencias
Naturales, un proyecto que fue presentado por el Dr. Tobias Lasser a petición del Dr. Luis
Manuel Peñalver. Posteriormente en el año 1958, por mandato del Rector Dr. Francisco de
Venanzi, se funda la Facultad de Ciencias, donde se encuentra ésta en la actualidad.
Está conformada por:
El Consejo de Escuela, quien es la máxima autoridad y está constituido por el Director
quien lo preside y ejecuta las decisiones emanadas en el mismo, cinco (5) jefes de
departamentos, cinco (5) representantes de los profesores y dos (2) representantes
estudiantiles.
La Dirección integrada por la Unidad Docente de Pasantías y Prácticas Profesionales
(UDPP) y el Personal Administrativo.
Cinco (5) departamentos quienes manejan la docencia: el de Biología Celular,
Botánica, Ecología, Tecnología de Alimentos y Zoología;
Otras dependencias adscritas cuyo desempeño principal es en el área de investigación
y el área de servicio, ellas son el Centro de Microscopía Electrónica, el Laboratorio de
Fotografía, el Laboratorio de Ecología y Plantas Epífitas, el Laboratorio de Invertebrados.
Los institutos de Zoología y Ecología Tropical, Ciencia y Tecnología de Alimentos y
Biología Experimental.
A continuación en la Figura 1 se muestra el organigrama de la Escuela, donde se aprecia
cada una de las entidades pertenecientes a la misma.
20
Figura 1. Organigrama Estructural de la Escuela de Biología. Elaboración Propia
Su misión es formar recursos humanos para: prestar asesoría técnica, desempeñarse en
industrias, docencia, investigación básica y aplicada, utilizando los resultados obtenidos en la
solución de problemas biomédicos, agroecológico, alimentarios, zoológicos, ambientales, de
producción marina y otros relacionados con los seres vivos.
1.2 Planteamiento del Problema
Actualmente la Escuela de Biología de la UCV ofrece a sus estudiantes un conjunto de
asignaturas electivas que podrán cursar siempre y cuando se hayan aprobado todas aquellas
materias que de acuerdo al Pensum vigente de la mencionada Escuela no impidan su
inscripción por prelación.
Dentro del conjunto de las asignaturas electivas ofrecidas se encuentran: Métodos de
Laboratorio y Métodos de Investigación, éstas son de naturaleza especialmente experimental,
deben ser cursadas en semestres distintos, pueden o no estar relacionadas con el TEG y el
requisito necesario para su inscripción es tener aprobadas todas las materias obligatorias hasta
el sexto (6º) semestre de acuerdo con el Pensum en vigencia de la Escuela.
21
El Reglamento de Métodos de Laboratorio y Métodos de Investigación (1999) de la
referida Escuela, dicta cada una de las reglas que deben ser cumplidas desde el momento de la
inscripción de alguna de las dos materias hasta su aprobación o reprobación.
Cuando un estudiante de Licenciatura en Biología decide inscribir cualquiera de las dos (2)
materias debería ocurrir, según el Reglamento mencionado, el proceso que se describe a
continuación:
1. Aproximadamente tres (3) semanas antes de las inscripciones a través del portal web
Control de Estudios al Estudiante (CONEST), cada Unidad Docente realiza entrega a los
Representantes de la UDPP los temas disponibles en ambas materias, con los profesores que
los dictarán (tutores). Cada cierto tiempo son nombrados cinco (5) Representantes de UDPP
así como también cinco (5) Jefes de Departamento. En ambos casos son uno por
Departamento: Botánica, Biología Celular, Zoología, Tecnología de Alimentos y Ecología.
- Los Representantes de la UDPP se encargan de publicar en una cartelera física,
dentro de la Facultad de Ciencias de la UCV, los temas recibidos (de ambas
materias con el profesor que los dictará).
2. El estudiante se informa a través de las carteleras, de los temas disponibles en el
semestre a inscribir, selecciona el de su interés y contacta al profesor encargado del mismo
para notificar que se encuentra interesado en inscribir la asignatura.
3. El día pautado para la inscripción del semestre, el estudiante realiza su inscripción de
una de las dos materias mencionadas a través de CONEST.
4. Una vez inscrito el estudiante, los Representantes de la UDPP ingresan a CONEST y
descargan el listado de estudiantes inscritos en la materias según el Departamento
correspondiente, con ese listado, ubican los correos de cada estudiante y coordinan una
reunión por Departamentos para explicar las pautas de las materias y hacer entrega de: la
“Planilla de Inscripción” también llamada “Proyecto” y la “Planilla de Evaluación”.
5. Cada estudiante debe contactar a su Tutor para hacerle entrega de la “Planilla de
Evaluación” y para llenar la “Planilla de Inscripción” que le fue entregada en la reunión
previa.
22
6. Una vez llenada y firmada la “Planilla de Inscripción” por el estudiante y su Tutor, ésta
debe ser entregada en la Dirección de la Escuela.
7. La Secretaria de la Dirección de la referida Escuela debe clasificar las planillas
recibidas por Departamentos y posteriormente las envía a los Representantes de la UDPP
correspondientes.
8. Cada Representante de la UDPP debe revisar las “Planillas de Inscripción” con el
listado de alumnos inscritos para corroborar que todos los estudiantes que se inscribieron
hayan entregado su planilla, de lo contrario debe contactar al estudiante para informase del
motivo por el cual no la entrego.
9. Los Representantes de la UDPP deben revisar las “Planillas de Inscripción y añadir un
informe con las observaciones necesarias. Se tienen en existencia dos documentos por cada
estudiante inscrito en un Departamento: la “Planilla de Inscripción” y el “Informe de
Observaciones” agregado. Éstos son nuevamente enviados a la Dirección de la Escuela.
10. Una vez recibidos todos los documentos, en la comentada Dirección, son entregados al
Consejo de Escuela, el cual decide si acepta o rechaza cada Proyecto entregado.
11. La Secretaria de la Dirección de la Escuela señalada debe notificar a los estudiantes y a
los tutores de la aceptación o rechazo del proyecto.
NOTA:
En caso de ser aceptado el proyecto, el estudiante continúa cursando la materia
normalmente hasta el final del semestre.
En caso de ser rechazado el proyecto se debe suministrar al estudiante los motivos por
el cual no se le aprobó. Pueden originarse dos (2) casos: el primero es la modificación de
algún apartado en la “Planilla de Inscripción” donde el estudiante debe realizar la
modificación correspondiente y volverla a entregar a la Dirección de la referida Escuela para
su ingreso al siguiente Consejo de Escuela; el segundo caso es el rechazo total del proyecto en
el que el estudiante debe retirar la materia por CONEST (si se encuentra dentro del plazo
disponible para retiro de las materias) o en su defecto se le retira por Consejo de Escuela.
23
12. La Secretaría de la Dirección de la mencionada Escuela, debe llevar un listado a
CONEST de los alumnos que les fue aceptado y rechazado el proyecto en el Consejo de
Escuela.
13. Los tutores deben llenar la “Planilla de Evaluación” de sus alumnos y entregárselas a
los Representantes de UDPP.
14. Los Representantes de UDPP cargan las notas de los alumnos en Control de Estudios
al Estudiante (CONEST).
15. Con las notas ya cargadas y el listado que entrega la Secretaria de la nombrada
Escuela, CONEST se encarga de generar las planillas de evaluación con la nota que obtuvo el
estudiante en la materia.
En las Figuras 2 y 3 se describe el proceso actual de inscripción de las materias Métodos de
Investigación y Métodos de Laboratorio
Figura 2. Proceso Manual de Inscripción de Métodos de Laboratorio y Métodos de
Investigación Parte I. Elaboración Propia
24
Figura 3. Proceso Manual de Inscripción de Métodos de Laboratorio y Métodos de
Investigación Parte II. Elaboración Propia
Con relación a la situación descrita en la Escuela de Biología, se pudo evidenciar que:
a) Existe un conjunto de entregas físicas de documentos entre todas las entidades
involucradas, que deben llevarse a cabo de manera obligatoria para que el proceso de
inscripción fluya de manera satisfactoria, como lo son la entrega de:
La “Planilla de Inscripción” de los Representantes de UDPP a los Estudiantes.
La “Planilla de Evaluación” de los Representantes de UDPP a los Estudiantes.
La “Planilla de Evaluación” de los Estudiantes a sus Tutores.
La “Planilla de Inscripción” con los datos del proyecto del estudiante al Personal
Administrativo (Secretaria).
La “Planilla de Inscripción” con los datos del proyecto de cada estudiante del Personal
Administrativo (Secretaria) a los Representantes de UDPP.
La “Planilla de Inscripción” y el “Informe de Observaciones” de los Representantes de
UDPP al Personal Administrativo (Secretaria)
La “Planilla de Inscripción” y el “Informe de Observaciones” del Personal
Administrativo (Secretaria) a Consejo de Escuela.
25
La “Planilla de Evaluación” con la respectiva evaluación de los Tutores a los
Representantes de UDPP.
b) Hay un tiempo invertido, esfuerzo y dedicación en la ejecución de actividades que
pudieran automatizarse, como:
La clasificación de las planillas de inscripción entregadas por los Estudiantes al
Personal Administrativo.
Chequeo de alumnos inscritos por parte de los Representantes de UDPP con alumnos
que entregaron las planillas.
Asistencia a las entidades involucradas para hacer entrega de documentos.
Búsqueda manual por parte de los Representantes de UDPP de los correos electrónicos
de cada estudiante inscrito para coordinar reunión y enviar comunicados.
Búsqueda manual por parte de los Representantes de UDPP de los correos electrónicos
de cada profesor tutor para hacer envío de normativa.
c) La información no está centralizada, esto es que se encuentra disponible en un
momento dado en un único departamento, lo que genera retrasos en la ejecución de
actividades que dependen de la ejecución de tareas previas, por lo tanto, las actividades
difícilmente se cumplen en los lapsos de tiempos estipulados.
Por lo antes expuesto se plantea como pregunta de investigación, ¿de qué forma se puede
optimizar el proceso de gestión de inscripción de las materias Métodos de Investigación y
Métodos de Laboratorio de la Escuela de Biología de la Facultad de Ciencias de la UCV?
1.3 Justificación
Para atacar la problemática planteada en el apartado anterior, se planteó desarrollar una
aplicación web que permita gestionar el proceso de inscripción de las materias Métodos de
Investigación y Métodos de Laboratorio en la Escuela de Biología, la cual reducirá
significativamente las entregas de documentos en físico entre las entidades involucradas,
además disminuirá todas aquellas tareas realizadas de forma manual que puedan realizarse de
manera automatizada con la aplicación web como la entrega y clasificación de documentos, la
búsqueda de correos electrónicos y corroboración de estudiantes inscritos.
Otro aspecto importante es que la información utilizada durante todo el proceso de
inscripción estará centralizada, es decir, se encontrará disponible en todo momento en cada
26
una de las entidades involucradas que requieran de ella, bien sea: Dirección, Departamentos,
Tutores y estudiantes, facilitando el cumplimiento de las actividades dentro de los lapsos de
tiempos estipulados.
La implementación de una aplicación web para gestionar el proceso de inscripción buscará
optimizar dicho proceso, mejorando la forma de llevar a cabo las actividades involucradas en
el mismo.
1.4 Objetivo General
Desarrollar una aplicación web para la gestión del proceso de inscripción de Métodos de
Investigación y Métodos de Laboratorio en la Escuela de Biología de la Facultad de Ciencias
de la UCV
1.5 Objetivos Específicos
Definir las funcionalidades que ofrecerá la aplicación.
Diseñar la interfaz gráfica de usuario.
Determinar el modelo lógico de la base de datos.
Implementar el modelo físico de la base de datos.
Implementar la aplicación en un servidor de la Facultad de Ciencias de la UCV.
Realizar las pruebas de usabilidad de la aplicación.
1.6. Alcance
La aplicación web desarrollada permite gestionar el proceso de inscripción de las materias
Métodos de Investigación y Métodos de Laboratorio de forma automatizada. Está dirigida a
los estudiantes, profesores (Director, Tutor, Representante de la UDPP y Jefe de
Departamento) y a la Secretaria de la mencionada Escuela.
Para cada usuario se desarrolló un módulo a través del cual el mismo (iniciando sesión)
podrá realizar cada una de las actividades que le competen dentro del proceso.
La metodología utilizada fue una adaptación de AgilUs donde se trabajó con las siguientes
fases: recolección y análisis de requisitos, elaboración de la interfaz de usuario, desarrollo y
análisis de resultados.
27
1.7 Metodología de Desarrollo
Las metodologías de desarrollo de software son un conjunto de herramientas, técnicas,
procedimientos y soporte documental para el diseño de sistemas de información y
aplicaciones, cuyo propósito es facilitar la producción de software de alta calidad de una
forma costeable; dichas metodologías se dividen en: ágiles y no ágiles. Las metodologías no
ágiles son aquellas con mayor énfasis en la planificación y control del proyecto, en
especificación precisa de requerimientos y modelado. Las ágiles se caracterizan por ser
iterativas e incrementales, y fácilmente adaptables a los cambios, involucrando al usuario en el
desarrollo.
Para la elaboración de la aplicación web Biotec se utilizó una adaptación del Método
AgilUs, el cual es una metodología de desarrollo ágil cuyo enfoque principal es la usabilidad,
es decir, se centra en el desarrollo de software usables. Entre sus principales características se
encuentran:
Se fundamenta en el usuario y en la participación de especialistas en el área de
usabilidad, con la finalidad de mejorar el software en desarrollo hasta que éste alcance el
mayor grado de usabilidad en la entrega final del mismo.
Simplicidad en el desarrollo, previendo cambios en el futuro.
Es iterativa e incremental lo que permite el rediseño e implementación de actividades
llevadas a cabo en cada una de las etapas, así como también proveer resultados al inicio del
desarrollo e ir agregando funcionalidades al sistema.
El proceso de desarrollo de software utilizando AgilUs engloba las actividades de
requisitos, análisis, prototipaje y entrega; donde se incluyen en cada una de ellas las
actividades propias para la construcción de la usabilidad mostradas en la Figura 4
28
Figura 4. AgilUs: Etapas, Actividades y Artefactos. Acosta (2011)
Los principios de esta metodología son los siguientes:
Integra la Ingeniería de Software con la Interacción Humano Computador.
Usabilidad como requisito esencial para considerar un software de calidad, por lo
tanto, el diseño del software se centra en el usuario, así se tiene un impacto positivo en la
calidad del producto final.
La usabilidad es considerada desde el inicio del desarrollo ya que ésta aumenta la
calidad del software y determina la utilidad. Un software es considerado útil cuando puede ser
usado con la finalidad de originar resultados de forma intuitiva, eficiente y satisfactoria para
el usuario.
El usuario determina la usabilidad. Un software es considerado usable en un contexto
específico y por un tipo de usuario especifico, por lo tanto debe construirse en función de esto.
Es fundamental una interacción continua con el usuario.
29
Capítulo 2. Marco Conceptual
En el presente capítulo se detallan las bases teóricas sobre las cuales se desarrolla el
presente Trabajo Especial de Grado, se identifican, enumeran y explican cada uno de los
elementos y tecnologías web empleadas durante el proceso de desarrollo de la aplicación.
2.1 Aplicaciones Web
Existen diferentes conceptos sobre las aplicaciones web, a continuación se presentan los
siguientes:
Pereda (2007) plantea que “Son programas que se diseñan para funcionar a través de un
navegador de internet, es decir, son aplicaciones que se ejecutan de forma online” (párr.1).
Enubes (2013) manifiesta:
Es una aplicación a la que se accede a través de internet u otras redes similares como
intranet, que no requiere instalación para los usuarios. Es decir, es una aplicación de
software codificada en un lenguaje hecho para los navegadores web en la que es el
navegador el que la ejecuta. Estas aplicaciones contienen elementos que permiten
interactuar al usuario con la información que contienen (párr. 1).
A su vez, Barzanallana (2012) sostiene que “Es un programa o conjunto de programas para
ayudar al usuario de un ordenador para procesar una tarea específica” (párr.1).
Mientras que Diccionario de Informática (2012) hace referencia a que “Es
cualquier aplicación que es accedida vía web por una red como internet o una intranet” (párr.
1).
Con base a los anterior, una aplicación web se puede definir como un conjunto de
herramientas de software o un programa informático, que permite al usuario procesar una
tarea en particular, dicha aplicación se encuentra alojada en un servidor web y es accedida a
través de Internet mediante un navegador web (Internet Explorer, Opera, Mozilla Firefox,
Google Chrome, Safari y otros), o una Intranet (red entre computadores que sirve para
compartir recursos y tiene uso exclusivo dentro del sitio donde fue creada).
30
2.1.1 Características de una Aplicación Web
De acuerdo a los aportes de Diccionario de Informática (2012), Enubes (2013) y Pereda
(2007) las características principales de una aplicación web son:
Reside en un Servidor Web.
Se puede acceder a ella desde cualquier lugar y en cualquier momento siempre y
cuando se disponga de conexión a Internet.
Es escrita en lenguajes soportados por navegadores web, pues son ellos quienes la
ejecutan independientemente del sistema operativo en el que se encuentre.
Puede ser accedida por miles de usuarios a la vez. En el caso de que llegase a
actualizarse la aplicación, todos los usuarios estarán al tanto de esta actualización de manera
inmediata.
No requiere de la instalación de programas adicionales. Para su acceso, simplemente se
requiere hacer uso de un navegador web y conexión a Internet.
Es Portable, es decir que es capaz de ejecutarse sin importar la plataforma en la que se
encuentre.
Es usable ya que es sencilla y entendible para todos los usuarios.
En la Figura 5 se puede apreciar un ejemplo de una aplicación web, como lo es CONEST
Figura 5. Interfaz del Menú Principal de Estudiantes en CONEST
31
2.1.2 Arquitectura de una Aplicación Web
Universidad de Sevilla (2009) plantea que la arquitectura de una aplicación indica y
describe la manera en la cual están organizados los diferentes módulos que la constituyen.
La arquitectura más utilizada en este contexto de aplicaciones web es la arquitectura
Cliente-Servidor la cual según el Instituto Nacional de Estadística e Informática (1997) se
puede definir como: un modelo para el desarrollo de aplicaciones de software en el que las
transacciones se dividen en procesos independientes que cooperan entre sí para intercambiar
información, servicios o recursos. En esta arquitectura el cliente, es el equipo que solicita los
recursos, equipado con una interfaz de usuario (generalmente un navegador web) para la
presentación y el servidor es el encargado de proporcionar los recursos solicitados.
Una de las variantes de la Arquitectura Cliente-Servidor más utilizada en la actualidad es la
de Tres (3) Capas, la cual según la Universidad de Sevilla (2009) y Newcomlab (2013) está
formada por: la capa de presentación, la capa de negocio (procesamiento de datos) y la capa
de datos (almacenamiento de datos).
Esta arquitectura se basa en el paradigma de ubicar la capa de presentación, de negocio y
de datos en servidores diferentes con el fin de modularizar el trabajo del desarrollador Web.
En términos generales, la capa de presentación proporciona la interfaz necesaria para presentar
información y reunir datos. La capa de procesamiento responde a peticiones del usuario para
ejecutar una tarea en específico, interactuando con los datos que están almacenados. La capa
de almacenamiento representa las fuentes de datos finales y está formada por uno o más
gestores de bases de datos que realizan todo el almacenamiento y reciben solicitudes de
recuperación de información desde la capa de negocio.
En la Figura 6 se representa la arquitectura Cliente-Servidor de Tres (3) Capas, en la cual
se muestran los elementos y el tipo de tecnologías web que conforman cada una de ellas.
Además se puede observar (a través de las flechas) las comunicaciones que pueden existir
entre cada una de las capas, y cada uno de los pasos ocurridos al momento de generar una
solicitud.
32
Figura 6. Arquitectura Cliente-Servidor (Modelo de tres capas). Elaboración Propia
2.1.3 Patrón de Diseño: Modelo Vista Controlador (MVC)
Según Catalani (2007) el patrón de diseño MVC, es un patrón de arquitectura de software
que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres
componentes distintos. Se ve frecuentemente en aplicaciones Web, donde la vista es la página
HTML y el código que provee de datos dinámicos a la página, el controlador es el Sistema de
Gestión de Base de Datos y el modelo es el modelo de datos.
El patrón MVC es un patrón de diseño de vital importancia, está compuesto de tres
módulos diferentes, llamados Modelo, Vista y Controlador (de ahí su nombre). El Modelo está
compuesto por el estado y los datos que la aplicación representa. La Vista es la interfaz de
usuario que muestra información sobre el modelo y que representa el dispositivo de entrada
que se usa para modificarlo. Finalmente, el Controlador es lo que une a los dos anteriores,
hace corresponder las peticiones que llegan del cliente con las acciones correspondientes y
dirige las respuestas a las vistas adecuadas.
De acuerdo a Catalani (2007), este modelo presenta varias ventajas:
Hay una clara separación entre los componentes de un programa; lo cual nos permite
implementarlos por separado.
33
Al incorporar el modelo de arquitectura MVC a un diseño, los módulos de un
programa se pueden construir por separado y luego unirlos en tiempo de ejecución.
Facilidad de desarrollo y acortamiento del tiempo de respuesta gracias a la
paralelización de tareas.
Aumenta en gran medida el nivel de reusabilidad de código. Facilita una evolución
continua de los sistemas, sin puntos de ruptura, ya que un cambio en un sistema afectará a uno
o más componentes pero nunca afectará significativamente al núcleo de la aplicación.
2.2 Sistema Manejador de Base de Datos
Entre las de definiciones más importante de los Sistemas Manejadores de Base de Datos
(SMBD) se tienen las presentadas por Elmasri & Navathe (1997) los cuales exponen que “Un
sistema de gestión de base de datos, es un conjunto de programas que permite a los usuarios
crear y mantener una base de datos” (p. 2).
Elmasri & Navathe (1997) también dicen que un SMBD “Es un sistema de software de
propósito general que facilita el proceso de definir, construir y manipular bases de datos para
diversas aplicaciones” (p. 2).
Por su parte Silberschatz, Korth & Sudarshan (2002) manifiesta que “El objetivo principal
de un SMBD es proporcionar una forma de almacenar y recuperar la información de una base
de datos de manera que sea tanto práctica como eficiente” (p.1).
Además, Elmasri & Navathe (1997) hace énfasis sobre tres (3) actividades realizadas por un
SMBD, estas son: definición, construcción y manipulación de una Base de Datos (BD). Las
cuales las define así:
Se entiende por definición de una base de datos la especificación de los tipos de datos, las
estructuras y las restricciones de los datos que se almacenaran en ella. Construcción de una
base de datos al proceso de guardar los datos en algún medio de almacenamiento controlado
por el SMBD. Y manipulación de una base de datos a las funciones de consulta a la base de
datos para obtener datos específicos, actualizaciones (añadir, eliminar, modificar, etc) y
generar informes a partir de los datos”. (Elmasri & Navathe, 1997, p.3)
Con base a las definiciones anteriores, se define un SMBD como un conjunto de
herramientas de software (programas) que permiten la definición, construcción y
34
manipulación de una BD, cuyo objetivo principal es proporcionar un entorno para el
almacenamiento y recuperación de información en ella, de forma eficiente, segura y
garantizando la integridad de los datos. Una BD nunca se accede o manipula directamente
sino a través del SMBD.
2.3 Tecnologías Web
En base a Morales (s.f), las tecnologías web son aquellas que proporcionan al desarrollador
un conjunto de herramientas que facilitan la elaboración de aplicaciones web. Se dividen en
tecnologías del lado: del cliente (lenguajes procesados por el navegador web sin ningún
tratamiento previo) y del servidor (lenguajes reconocidos, ejecutados e interpretados del lado
del servidor y enviados al cliente en un formato comprensible para él).
Es importante mencionar que tanto los lenguajes del cliente como los del servidor son
independientes, lo cual permite que la página pueda ser alojada en cualquier sitio. Y a su vez,
un lenguaje de lado servidor es independiente del navegador utilizado, por lo que no
necesitará algún plug-in para visualizar correctamente cualquier página.
Para la arquitectura Cliente-Servidor de tres (3) capas, se utilizan también tecnologías para
el servidor de BD, aquí encontramos SMBD como por ejemplo MySQL, el cual será
explicado en un apartado posterior.
2.3.1 Tecnologías de lado del Cliente:
2.3.1.1 Lenguaje de Marcado de Hipertexto (HTML)
Según W3C (2013) el Lenguaje de Marcado de Hipertexto o HTML, por sus siglas en
inglés HyperText Markup Language: es un lenguaje de marcado utilizado del lado del cliente
que se usa para la creación de páginas web. Es sencillo, consta de etiquetas que indican al
navegador web la forma y estructura que tendrá el texto, las imágenes y los videos colocados
en la página web.
Los diseñadores de páginas web lo utilizan para crear sus páginas, a través de programas
que generan código HTML y los navegadores las muestran a los usuarios después de leer su
contenido.
Las páginas web creadas por éste contienen enlaces o hipervínculos que conducen a otros
documentos o fuentes de información relacionados.
35
Las etiquetas tienen la siguiente forma:
<nombre_etiqueta> IntroducirTexto </nombre_etiqueta>
De acuerdo al identificador que tenga la etiqueta cumplirá una función en específico como
por ejemplo colocar el texto en negritas, en cursiva, centrar el texto, entre otros.
La estructura básica de un documento HTML es la siguiente:
<html>
<head>
<title> Titulo de la Pagina </title>
</head>
<body>
Cuerpo de la página
</body>
</html>
Las etiquetas <html> y </html> representan el documento HTML. Las etiquetas <head> y
</head> representan el encabezado donde colocaremos etiquetas de índole informativo, como
por ejemplo el título de la página. Las etiquetas <body> y </body> representan el cuerpo de la
página, que será donde colocaremos nuestro texto, imágenes, etc. delimitados a su vez por
otras etiquetas
HTML puede ser escrito en cualquier editor de textos, desde básicos como Bloc de Notas
de Windows hasta especiales para escribir en este lenguaje que permiten un desarrollo más
cómodo y eficiente de las páginas web, como por ejemplo: NotePad++, UltraEdit, Geany,
entre otros. Al escribir código de este estilo, se debe guardar el documento con la extensión
htm o html y así de esta manera podrán ser mostrados por cualquier navegador web.
Así mismo, este lenguaje tiene otras variantes como Lenguaje de Marcado de Hipertexto
Extensible o XHTML, por sus siglas en inglés Extensible HyperText Markup Language que
es una forma actualizada y mejor estructurada de escribir HTML y Lenguaje de Marcado de
Hipertexto Dinámico o DHTML, por sus siglas en inglés Dynamic HyperText Markup
36
Language que permite la creación de páginas web dinámicas e interactuantes con el usuario,
está constituido por las tecnologías HTML, CSS y JavaScript. Estas dos últimas serán
explicadas a continuación.
2.3.1.2 Hoja de Estilo en Cascada (Cascading Style sheets CSS)
De acuerdo al aporte de Chesco (2007) y W3C (2013) se concluye que la Hoja de Estilo en
Cascada o CSS, por sus siglas en inglés Cascading Style Sheet: es un lenguaje de hojas de
estilo utilizado del lado del cliente que permite controlar la estructura y forma (presentación)
que van a tener los documentos escritos en HTML o XHTML (páginas web) de una manera
más fácil, limpia y sencilla. Por lo tanto, permite al desarrollador crear la presentación de sus
páginas de una forma mucho más eficiente y sin ensuciar el código HTML.
Es importante destacar que la hoja de estilo puede estar incluida en el archivo con extensión
“.html” de la siguiente manera:
Estilo en Línea (inline): consiste en agregar propiedades CSS dentro de una etiqueta
HTML, esto hace que dicho estilo sólo tenga alcance dentro de esa etiqueta por lo que resulta
engorroso y poco práctico agregarlo de esta forma. Además, hace que el código HTML sea
extenso y en algunos casos incomprensible.
Hoja de Estilo Interna: es un forma de agregar propiedades CSS un poco menos
intrusiva que la anterior, en donde éstas se colocan dentro del head entre etiquetas
<style>...</style>. Esta manera, a pesar de ser un poco mejor, sigue siendo poco práctica ya
que se debe copiar todo el estilo de una página a otra, lo que puede acarrear problemas de
sincronización. Además, hace del código HTML un código extenso.
O puede ser un archivo externo que debe ser guardado con extensión “.css”, denominado:
Estilo externo: es una hoja de estilo que está almacenada en un archivo diferente a
aquel donde se almacena el código de la página web. Es guardado con extensión “.css”. Esta
es la mejor práctica, porque separa completamente las reglas de formato para la página HTML
de la estructura básica de la página. Basta solamente con hacer referencia a ese archivo para
que la página web tenga el aspecto deseado. Además trae grandes beneficios en cuanto a la
sincronización.
37
Hacer uso de este lenguaje permite separar el contenido de la presentación de la página
web.
2.3.1.3 JavaScript
De acuerdo a Eguíluz (2008) se define JavaScript como un lenguaje de programación
utilizado principalmente del lado del cliente que permite el desarrollo de páginas web que
incorporen efectos como: texto que aparece y desaparece, animaciones, acciones que se
activan cuando se pulsan botones y ventanas con notificaciones al usuario. A estas páginas se
les denomina páginas web dinámicas. Tiene una sintaxis similar al lenguaje C y al lenguaje
Java.
Es interpretado, debido a que no se necesita compilar el programa para ejecutarlo, por lo
que se pueden probar en cualquier navegador web sin necesidad de procesos intermedios (En
la actualidad, todos los navegadores web interpretan código JavaScript integrado en las
páginas web). Es orientado a objetos ya que permite definir clases con sus atributos y
métodos.
Existen tres (3) formas de introducir código JavaScript en una página web, éstas son:
Directamente en las etiquetas HTML: análogamente a la inclusión inline de CSS, esta
forma consiste en introducir el código JavaScript dentro de una etiqueta HTML. El mayor
inconveniente de este método es que complica el mantenimiento del código JavaScript, así
como también incrementa el tamaño del archivo HTML.
JavaScript Interno: el código JavaScript se encierra entre etiquetas <script> </script> y
se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de
código JavaScript en cualquier zona de la página, es buena práctica hacerlo dentro de la
cabecera del documento, dentro de la etiqueta <head>.
Javascript Externo: las instrucciones JavaScript se pueden incluir en un archivo
externo con extensión “.js” para que las aplicaciones web puedan referenciarlas.
2.3.1.4 JQuery
De auerdo a Jquery (2010) las funciones Javascript dentro de una aplicación web suelen
usarse con mucha frecuencia. Las tareas básicas suelen repetirse una y otra vez en cada
38
desarrollo. Por este motivo surgen las librerías, que son un producto que sirve como base para
el desarrollo de aplicaciones y que aportan una serie de funciones o códigos para realizar
tareas habituales. En otras palabras, una librería es un conjunto de funciones, métodos y
procedimientos que contienen rutinas listas para usarse, con el fin que los desarrolladores no
deban programar estos métodos cada vez que los necesiten.
JQuery es una librería JavaScript que permite simplificar la manera de interactuar con los
documentos HTML, manejar eventos, desarrollar animaciones y agregar interacción a páginas
web. JQuery no solo contiene un conjunto de funciones usadas comúnmente, sino que
también provee de una forma de escribir código JavaScript de forma reducida.
Es importante señalar que existen otros frameworks JavaScript que tienen el mismo
propósito. Sin embargo, JQuery se ha convertido en el más usado, al momento de este
trabajo,y cada vez es más el apoyo que recibe por parte de todos los desarrolladores de
Aplicaciones Web. Además cuenta con muy buena documentación lo que lo hace ser la
librería JavaScript de facto al momento de desarrollar Aplicaciones Web.
2.3.2 Tecnologías del lado del Servidor Web:
2.3.2.1 Procesador de hipertexto (Hypertext Preprocessor PHP)
De acuerdo a PHP (2013) se concluye que Hypertext Pre-processor, por sus siglas en inglés
PHP: es un lenguaje de programación de código abierto, interpretado de alto nivel, utilizado
del lado del servidor, lo que significa que el código es ejecutado del lado del servidor,
generando código HTML y enviándolo al cliente, está diseñado originalmente para la creación
de páginas web de contenido dinámico de una manera rápida y sencilla. Aunque ofrece otras
funcionalidades como procesar información de formularios, entre otros. Se caracteriza por ser
simple para el principiante y a su vez ofrece características avanzadas a los desarrolladores
profesionales.
Soporta la mayoría de servidores web usados en la actualidad, el de uso común hoy día es
Apache; y puede ser utilizado en cualquiera de los principales sistemas operativos como
UNIX (Linux, Solaris, Debian, Ubuntu.) y Microsoft Windows, entre otros, sin costo alguno.
Cuando un cliente hace una petición al servidor para que le envíe una página web, sucede
lo siguiente del lado del servidor:
39
1. El servidor web ejecuta el intérprete PHP el cual procesa el script solicitado que
generara el contenido de manera dinámica (obtener la información de una BD, por ejemplo).
2. El resultado es enviado desde el intérprete al servidor.
3. El servidor es quien lo envía al cliente en un formato comprensible por él.
PHP además permite la conexión a diferentes tipos de servidores de BD como: MySQL,
entre otros.
Este lenguaje de programación orientado a objetos, a procedimientos o incluso una mezcla
de ambos, puede estar incluido en el código “.html” o puede ser un archivo externo que debe
ser guardado con extensión “.php”.
2.3.3 Tecnologías del lado del Servidor de Base de Datos:
2.3.3.1 MySQL
Actualmente existen muchas organizaciones y sitios web que necesitan mantener y manejar
de forma eficiente un gran volumen de datos e información. Muchos de ellos optan por
soluciones comerciales, aunque muchas otras confían en el software libre optando por una
solución como MySQL.
De acuerdo a MySQL (2013) se define MySQL como un sistema de administración de
bases de datos relacional (SMBDR), que almacena y distribuye una gran cantidad de datos,
típicos de una aplicación. Está basado en la arquitectura cliente-servidor, por lo que el
servidor de Base de Datos (BD) puede estar asociado a múltiples clientes. Utiliza el Lenguaje
de Consulta Estructurado o SQL, por sus siglas en inglés Structured Query Language para el
acceso y manipulación de los datos.
MySQL es software de fuente abierta, lo que significa que es posible para cualquier
persona usarlo y modificarlo. Cualquier persona puede bajar el código fuente y usarlo sin
pagar, o estudiarlo y ajustarlo a sus necesidades. Este SMBD usa la Licencia Pública General
(GPL, del inglés General Public License) GNU para definir qué puede hacer y qué no puede
hacer con el software en diferentes situaciones. Si usted no se ajusta al GPL o requiere
introducir código del estilo de este manejador en aplicaciones comerciales entonces puede
comprar una versión comercial licenciada.
40
Según Manual de Referencias (2007) algunas de las características de MySQL son las
siguientes:
Interioridad y portabilidad
- Escrito en C y C++.
- Es multiplataforma. Funciona en plataformas como AIX, BSD, FreeBSD, HPUX,
GNU/Linux, Mac OS X, NetBSD, Windows 95/98/NT/2000/XP/Vista y otras
versiones de Windows, entre otros.
- Es multihilo. Utiliza hilos del kernel, aprovechando así la ventaja de usar
multiprocesamiento con varios procesadores.
- Proporciona sistemas de almacenamiento transaccional y no transaccional.
- Múltiples motores de almacenamiento (MyISAM, Merge, InnoDB, Memory/heap,
entre otros), permitiendo al usuario escoger la que sea másadecuada para cada tabla
de la base de datos.
Tipos de Datos
- Posee diversos tipos de datos: enteros con/sin signo de 1, 2, 3, 4, y 8 bytes de
longitud, float, double, char, varchar, text, blob, date, time, datetime, timestamp,
year, set, enum, y tipos espaciales OpenGIS.
- Tiene registros de longitud fija y longitud variable.
Sentencias y funciones
- Soporte completo para operadores y funciones en las cláusulas de consultas select y
where.
- Soporte completo para las cláusulas sql group by y order by. Soporte de funciones
de agrupación (count(), count(distinct ...), avg(), std(), sum(), max(), min(), y
group_concat()).
- Puede mezclar tablas de distintas bases de datos en la misma consulta.
41
Seguridad
- Tiene un sistema de privilegios y contraseñas que es muy flexible y seguro, y que
permite verificación basada en el host. Las contraseñas son seguras porque todo el
tráfico de contraseñas está encriptado cuando se conecta con un servidor.
2.4 Servidor Web Apache
De acuerdo a Apache (2008) Apache es un Servidor de páginas Web de tecnología de
código abierto (open source) y de libre distribución, para uso comercial y desarrollado por la
Apache Software Foudation. Este servidor está diseñado para ser un servidor Web potente y
flexible que pueda funcionar en la más amplia variedad de plataformas y entornos. Las
diferentes plataformas y entornos existentes hacen que a menudo sean necesarias diferentes
características o funcionalidades o que una misma característica sea implementada de
diferentes maneras para obtener mayor eficiencia. Apache se adapta a gran cantidad de
entornos gracias a su diseño modular, el cual permite a los diseñadores de sitios Web elegir las
funcionalidades que van a ser incluidas en el servidor seleccionando que módulos se van a
usar.
La configuración de cada módulo se hace mediante la configuración de las directivas que
están contenidas dentro de cada uno de ellos. Los módulos de Apache se pueden clasificar en
tres categorías:
Módulo base: que contiene las funciones básicas de Apache.
Módulos multiprocesos: responsables de la unión con los puertos del computador,
aceptando peticiones y enviando hijos a atender las peticiones.
Módulos adicionales: cualquier otro módulo que le añada una funcionalidad al
servidor, ejemplos:
- Mod_php: para la creación de páginas dinámicas en php.
- Mod_ruby: para la creación de páginas dinámicas en ruby.
- Mod_perl: para la creación de páginas dinámicas en perl.
42
2.4.1 Características de Apache
Según Apache (2008) entre las características más relevantes de Apache se encuentran:
Es de fácil configuración a través de un archivo de configuración llamado httpd.config.
Independencia de plataforma. Apache funciona en casi todas las plataformas actuales,
lo que permite escoger la plataforma que mejor se adapte a las necesidades y a cambiar de
plataforma cuando se requiera.
Respuestas personalizadas ante errores del servidor. Apache permite personalizar la
respuesta ante los posibles errores que se puedan dar en el servidor. Es posible configurar
Apache para que ejecute un determinado script cuando ocurra un error en concreto.
Apache puede soportar de una forma más fácil y eficiente una amplia variedad de
sistemas operativos.
Es un servidor altamente configurable de diseño modular, lo que hace sencillo ampliar
sus capacidades.
2.4.2 Ventajas de Apache
De acuerdo a Díaz, Di Paolo, López, Piñeiro & Vargas (s.f) las ventajas del servidor web
Apache son:
El Apache Web Server es gratis (gracias a sus características open-source), por lo tanto
la inversión que se tiene que hacer para poder tener un Servidor Web están solo en la parte de
Hardware que van a soportar al mismo.
El Servidor Apache posee un gran desempeño y una sólida robustez, gracias a su
constante desarrollo. Los errores son encontrados rápidamente por los miles de Webmasters
en el mundo que mantienen sitios Webs críticos y estos son corregidos por ellos mismos o por
terceros pertenecientes a la Apache Software Foundation.
Provee una muy buena base para la seguridad del sistema, gracias a los módulos de
Autentificación, Autorización y Control de Acceso al Servidor Web, además el nuevo módulo
para la versión 2.0 que nos permite poder disfrutar de SSL/TLS en nuestro servidor para
seguridad en la transmisión de datos.
43
Como se encuentra bajo constante revisión, el Servidor Apache soporta la última
versión del protocolo HTTP, la versión 1.1.
El soporte es abundante, y muy bueno (en cuanto a contenido). La documentación es
excelente, dado que la misma está en constate revisión y es actualizada muy rápidamente.
Existen muchos foros de noticias, así como páginas especializadas en el Apache Web Server
como la revista electrónica Apache Week.
La extensibilidad por módulos lo hace extremadamente flexible y fácil de usar, así
como de configurar.
2.4.3 Desventajas de Apache
Según Díaz et al. (s.f), las desventajas de Apache son las que a continuación se
presentan:
La versión para el OS de Apple es muy pobre y deficiente, dado que hace poco es
cuando esta versión salió al público y la falta de usuarios en este sistema que hace que el
desarrollo vaya mucho más lento.
Las distribuciones para Windows todavía no están al 100% de su capacidad, por lo
tanto el rendimiento en comparación con el sistema operativo Linux es muy pobre y deja que
desear. Esto aunado a que Apache proviene del demonio HTTP de Linux, por lo tanto este es
el sistema preferido de los desarrolladores.
Es necesario algún tipo de Front grafico para hacer más amena y mucho más fácil la
configuración del Apache Web Server, así como algún tipo de soporte para la instalación y
configuración más fácil de entender, dado que muchos de las directivas de configuración del
Apache Web Server todavía son un poco oscuras. El Servidor Apache no soporta ningún tipo
de integración con Bases de Datos (PHP).
El Servidor Apache no soporta ningún tipo de integración con Bases de Datos (PHP).
No hay soporte para Java (JSP, Servlets, etc).
Un soporte más extenso para llevar un control más riguroso del Servidor Apache
requiere la contratación de personal altamente calificado para esta tarea, dado que la tarea de
configuración y mantenimiento del servidor no son nada fáciles.
44
2.5 Xammp
Creado por Apache Friends (2011), Xampp es un paquete independiente de plataforma y
software libre que consiste en un servidor Web Apache, la base de datos MySQL y los
intérpretes para lenguajes de programación PHP y Perl. Dicho servidor está bajo licencia
GNU y actúa como un servidor web libre; es fácil de usar y capaz de interpretar páginas
dinámicas. Los pasos para la instalación fueron los siguientes:
1. Descargar el archivo para Windows en la zona de descargas de Xampp.
2. Una vez descargado el archivo ejecutar el archivo.exe del comprimido.
3. Seleccionar el idioma de su preferencia.
4. Seleccionar el directorio de instalación.
5. Marcar las casillas de Apache y MySQL para instalar dichos servicios.
6. Finalmente se oprime el botón instalar para comenzar la instalación.
La aplicación Xampp cuenta con un panel de control, donde se podrá observar el status de
los servicios instalados y tener control sobre ellos, el mismo se muestra en la Figura 7.
Figura 7. Panel de Control Xammp
2.6. Control de Versiones: Git
De acuerdo a Git (2014) es un software de control de versiones distribuido pensando para
la eficiencia y confiabilidad del mantenimiento de versiones de aplicaciones cuando éstas
tienen un gran número de archivos de código fuente, es decir está diseñado para manejar
proyectos grandes con velocidad y eficiencia, pero también es igual de apropiado para
repositorios pequeños. Es especialmente popular en la comunidad de código abierto.
45
El diseño de Git resulta de la experiencia del diseñador de Linux, Linus Torvalds, y
mantenido por Junio Hamano. Mantiene una enorme cantidad de código distribuido y
gestionado por mucha gente, que incide en numerosos detalles de rendimiento.
Entre las principales cualidades de Git se encuentran:
Velocidad, se basa en que cada programador almacena una copia completa del
repositorio en su máquina de forma local, incluido el historial de cambios. Esto implica que
muchas de las operaciones realizadas sobre el código fuente no tienen lugar en la red,
permitiendo que la velocidad de proceso dependa únicamente en los recursos locales.
Diseño simple
Fuerte apoyo al desarrollo no lineal (miles de ramas paralelas)
Totalmente distribuido y capaz de manejar grandes proyectos de manera eficiente.
2.7 Bootstrap
Según Otto & Thornton (2014) es un framework o conjunto de herramientas de software
libre para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía,
formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en
HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.
Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton de Twitter, como un marco
de trabajo (framework) para fomentar la consistencia a través de herramientas internas. Antes
de Bootstrap, se usaban varias librerías para el desarrollo de interfaces de usuario, las cuales
guiaban a inconsistencias y a una carga de trabajo alta en su mantenimiento.
2.8 Laravel
De acuerdo a Laravel (2014) Laravel es un framework de desarrollo web para PHP, tiene
como objetivo permitir el uso de una sintaxis elegante y expresiva para crear código de forma
sencilla y permitiendo multitud de funcionalidades. Intenta aprovechar lo mejor de otros
frameworks y aprovechar las características de las últimas versiones de PHP.
Gran parte de Laravel está formado por dependencias, especialmente de Symfony, esto
implica que el desarrollo de Laravel dependa también del desarrollo de sus dependencias.
Entre sus características más importantes se pueden mencionar:
46
Es un framework de código abierto con amplia comunidad web colaborativa y activa
en diferentes desarrollos.
Posee una forma rígida, sus reglas restringen por ejemplo como llamar a las vistas,
modelos y controladores, como escribir el código, entre otras normas que al seguirlas facilitan
el desarrollo ya que permite al framework actuar por si solo implementando funcionalidades
pre-establecidas.
Busca el balance entre minimalismo y funcionalidad, utiliza la filosofía ZEN, que se
caracteriza por que el desarrollo y las soluciones sean sencillas de entender, códigos limpios,
simples y elegantes. Básicamente es la evolución de frameworks PHP anteriores.
Laravel es flexible, se puede adaptar prácticamente a cualquier proyecto.
Ofrece modularidad del código gracias a la combinación de drivers y su sistema de
paquetes. Los drivers permiten extender y cambiar funcionalidades comunes en toda la
aplicación mientras que el empaquetado permite reutilizar código, desde el empaquetado de
una librería hasta una aplicación web y compartirla con toda la comunidad web.
Ofrece una suite de herramientas para BD, como el sistema de migraciones de BD.
Multiplataforma y robusta liberando los problemas de compatibilidad.
Posee la implementación Active Record Eloquente, que se encarga de gestionar la BD
con un potente sistema de relaciones facilitando el manejo de la BD sin utilizar lenguaje SQL.
Utiliza la herramienta de interface de línea de comando Artisan, facilitando las
actividades del desarrollador.
En cuanto el Routing permite controlar las URL usando el Helper HTML integrado,
hace el trabajo de mantenimiento de la aplicación web mucho más sencillo.
Utiliza el motor de plantillas BLADE que hace que las vistas se vean mucho más
sencillas y limpias.
2.9. StarUML
Según StarUML (2008), StarUML es una herramienta de software empleada para el
modelado de datos con el estándar UML (Unified Modeling Language). Presenta las
siguientes características:
47
Soporte completo al diseño UML mediante el uso de los diagramas de: clases, casos de
uso, secuencia, colaboración, estados, actividades, componentes, despliegue y diagrama de
composición estructural.
Define elementos propios para los diagramas, que no necesariamente pertenezcan al
estándar de UML.
Posee la capacidad de generar código a partir de los diagramas y viceversa,
actualmente funcionando para los lenguajes C++, C# y Java.
Genera documentación en formatos Word, Excel y PowerPoint sobre los diagramas.
2.10 Flujo de Trabajo
De acuerdo a Romano (2008) el flujo de trabajo, del inglés: workflow, es el estudio de los
aspectos operacionales de una actividad de trabajo: cómo se estructuran las tareas, cómo se
realizan, cuál es su orden correlativo, cómo se sincronizan, cómo fluye la información que
soporta las tareas y cómo se le hace seguimiento al cumplimiento de las tareas.
Una aplicación de flujos de trabajo automatiza la secuencia de acciones, actividades o
tareas utilizadas para la ejecución del proceso, incluyendo el seguimiento del estado de cada
una de sus etapas y la aportación de las herramientas necesarias para gestionarlo
Los objetivos del Flujo de Trabajo son los que a continuación se presentan:
Reflejar, mecanizar y automatizar los métodos y organización en el sistema de
información.
Establecer los mecanismos de control y seguimiento de los procedimientos
organizativos.
Independizar el método y flujo de trabajo de las personas que lo ejecutan.
Facilitar la movilidad del personal.
Soportar procesos de reingeniería de negocio.
Agilizar el proceso de intercambio de información y agilizar la toma de decisiones de
una organización, empresa o institución.
Adicionalmente optimizar el servicio.
48
2.10.1 Modelo de Procesos de Negocio y Notación (BMPN)
De acuerdo a BPMN (2014), BPMN, del inglés: Business Process Model and Notation es
una notación gráfica estandarizada que permite el modelado de procesos de negocio, en un
formato de flujo de trabajo (workflow). BPMN fue inicialmente desarrollada por la
organización Business Process Management Initiative (BPMI), y es actualmente mantenida
por el OMG (Object Management Group), después de la fusión de las dos organizaciones en
el año 2005.
El principal objetivo de BPMN es proporcionar una notación estándar que sea fácilmente
legible y entendible por parte de todos los involucrados e interesados del negocio
(stakeholders). Entre estos interesados están los analistas de negocio (quienes definen y
redefinen los procesos), los desarrolladores técnicos (responsables de implementar los
procesos) y los gerentes y administradores del negocio (quienes monitorizan y gestionan los
procesos). En síntesis BPMN tiene la finalidad de servir como lenguaje común para cerrar la
brecha de comunicación que frecuentemente se presenta entre el diseño de los procesos de
negocio y su implementación.
49
Capítulo III. Marco Aplicativo
En el presente capítulo se describe el proceso de construcción de la aplicación web Biotec,
siguiendo una adaptación del método de desarrollo ágil AgilUS.
3.1 Recolección y Análisis de Requerimientos
3.1.1 Entrevista
Se realizó una entrevista no estructurada al Director de la Escuela, Jesús Romero con
participación de la Secretaria, donde el objetivo fue conocer la situación actual del proceso de
inscripción de Métodos de Investigación (M.I) y Métodos de Laboratorio (M.L) e identificar
todas y cada una de las necesidades presentes. Al ser una entrevista no estructurada, las
preguntas fueron surgiendo de acuerdo a las respuestas aportadas por los entrevistados, entre
las preguntas más importantes de la entrevista se encontraron:
1. ¿Cómo se lleva a cabo el proceso de inscripción de las asignaturas M.I y M.L actualmente?
2. Describa brevemente el flujo del proceso
3. ¿Quiénes participan en el proceso de inscripción?
4. ¿Cuáles son las actividades de cada participante dentro del proceso?
De la entrevista realizada se logró obtener la forma como es llevado a cabo el proceso de
inscripción y los participantes del mismo.
3.1.2 Tormenta de Ideas
Una vez identificado el problema presente gracias a la entrevista no estructurada realizada,
se llevaron a cabo dos sesiones de tormenta de ideas. La primera fue llevada a cabo por el
equipo de desarrollo (Alisandro Montoya y Alejandra Omaña) en la cual se intercambiaron
opiniones sobre el problema y se planteó una solución al mismo. La segunda fue realizada
entre uno de los integrantes del equipo de desarrollo (Alejandra Omaña) y el Director de la
escuela, en la cual se expuso la solución planteada en la primera tormenta de ideas al Director
50
quien compartió su opinión e intercambio ideas con Alejandra hasta llegar a un acuerdo de las
principales funcionalidades que contendría Biotec.
3.1.3 Requerimientos Funcionales y No Funcionales
Posterior a la entrevista no estructurada y las sesiones de tormenta de se pudo elaborar los
requerimientos funcionales y no funcionales.
Requerimientos Funcionales:
- Iniciar/Cerrar Sesión.
- Cargar listados (Estudiantes y Profesores).
- Iniciar/Detener proceso de inscripción.
- Finalizar Solicitudes
- Agregar/Eliminar/Modificar Estudiantes y Profesores.
- Configurar UDPP y JD
- Visualizar/Imprimir Proyecto
- Aceptar/Rechazar Solicitudes
- Agregar/Eliminar/Modificar Temas.
- Enviar Comunicados
- Aceptar/Rechazar proyecto
- Agregar Observaciones
- Cargar/Visualizar Notas
- Seleccionar Tema/Tutor
- Enviar Solicitudes
- Llenar/Modificar Proyecto
- Cerrar sesión.
51
Requerimientos No Funcionales:
- Usabilidad. El usuario debe comprender y usar con facilidad la aplicación.
- Disponibilidad. Se debe permitir usar la aplicación en cualquier momento y desde
cualquier ubicación geográfica con conexión a Internet.
- Portabilidad. La aplicación debe poder ser accedida independientemente de la
plataforma que se esté utilizando, solo debe requerir de la disposición de un
navegador web (browser) sin importar el sistema operativo.
- Escalabilidad. Las funcionalidades son implementadas previniendo futuras
mejoras sobre las mismas, de manera que pueden ser incorporadas afectando el
código existente de la menor manera posible.
- Confiabilidad. La aplicación debe comportarse de acuerdo a lo que los usuarios
esperan de este.
- Seguridad. Se debe garantizar que toda la información contenida en la aplicación
debe estar protegida contra accesos no autorizados, mediante mecanismos de
autenticación y sesiones que no permitan la fuga de datos.
3.1.4 Perfil de Usuario
Los usuarios potenciales de la aplicación web son aquellos pertenecientes a la comunidad
de la Escuela de Bilogía, estos son: Personal Administrativo (Secretaria), Estudiantes
(inscritos en alguna de las dos asignaturas) y Profesores (Director de la Escuela,
Representante de la UDPP, Tutor y Jefe de Departamento), los cuales no son usuarios
expertos en el área de computación.
El conocimiento requerido para utilizar la aplicación web es el manejo básico de un
computador para navegar en Internet.
3.1.5 Diagramas de Casos de Uso
Una vez identificados los requerimientos funcionales, no funcionales y el perfil de usuario,
se procedió a realizar el modelo de la aplicación web a través de la construcción de los
diagramas de casos de uso. En la Figura 8 se puede apreciar el caso de uso nivel 0, donde se
52
observan los actores participantes en la aplicación que se muestra como un todo, que son:
Estudiante, Personal Administrativo (Secretaria) y Profesor. Además se visualizan los actores
Director, Tutor, Jefe de Departamento y Representante de UDPP heredando del actor
Profesor, ya que estos realizan las actividades del profesor y además tienen sus propias
funcionalidades.
Figura 8. Casos de Uso Aplicación Web Biotec Nivel 0. Elaboración Propia
A continuación en la Figura 9 se puede apreciar el diagrama de casos de uso nivel 1 de la
aplicación web Biotec:
Figura 9. Casos de Uso Aplicación Web Biotec Nivel 1. Elaboración Propia
Tabla 1. Descripción caso de uso Iniciar Sesión
53
Caso de Uso 1.1 Iniciar Sesión
Actor Estudiante, Profesor y Personal Administrativo
Descripción Permite a los actores ingresar al módulo de inscripción de materias
M.I y M.L de la Escuela de Biología.
Precondiciones No aplica
Condición Final
Exitosa
Ingreso a la aplicación de forma exitosa
Tabla 2. Descripción caso de uso Ver Cartelera
Caso de Uso 1.2 Ver Cartelera
Actor Estudiante, Profesor y Personal Administrativo
Descripción Permite a los actores visualizar los temas con tutores disponibles en el
semestre a inscribir.
Precondiciones No aplica
Condición Final
Exitosa
Muestra los temas agregados de forma exitosa
Tabla 3. Descripción caso de uso Recuperar Contraseña
Caso de Uso 1.3 Recuperar Contraseña
Actor Estudiante, Profesor y Personal Administrativo
Descripción Permite al actor recuperar la contraseña en caso de haberla olvidado.
Precondiciones No aplica
Condición Final
Exitosa
Recuperación de contraseña exitosa
A continuación en la Figura 10 se muestra el diagrama de casos de uso del Personal
Administrativo de la aplicación web Biotec,
54
Figura 10. Casos de Uso Aplicación Web Biotec – Personal Administrativo. Elaboración
Propia
55
Tabla 4. Descripción caso de uso Cargar Listado
Caso de Uso 1.1.1 Cargar Listado
Actor Director y Personal Administrativo
Descripción Permite al actor cargar los listados de los usuarios que participan en la
aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Carga de listado exitosa
Tabla 5. Descripción caso de uso Cargar Profesor
Caso de Uso 1.1.1.1 Cargar Profesor
Actor Director y Personal Administrativo
Descripción Permite al actor la carga del listado de los profesores que interactúan con
la aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Carga de listado de profesores exitosa
56
Tabla 6. Descripción caso de uso Cargar Estudiante
Caso de Uso 1.1.1.2 Cargar Estudiante
Actor Director y Personal Administrativo
Descripción Permite al actor la carga de los estudiantes que interactúan con la
aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Carga de listado de estudiantes
Tabla 7. Descripción caso de uso Cargar Estudiante Métodos de Laboratorio
Caso de Uso 1.1.1.2.1 Cargar Estudiante Métodos de Laboratorio (M.L)
Actor Director y Personal Administrativo
Descripción Permite al actor la carga del listado de los estudiantes que inscribieron la
materia Métodos de Laboratorio.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Carga de listado de estudiantes de Métodos de Laboratorio Exitosa
57
Tabla 8. Descripción caso de uso Cargar Métodos de Investigación
Caso de Uso 1.1.1.2.2 Cargar Estudiante Métodos de Investigación (M.L)
Actor Director y Personal Administrativo
Descripción Permite al actor la carga del listado de los estudiantes que inscribieron la
materia Métodos de Investigación
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Carga de listado de estudiantes de Métodos de Investigación Exitosa
Tabla 9. Descripción caso de uso Configurar Departamento
Caso de Uso 1.1.2 Configurar Departamento
Actor Director y Personal Administrativo
Descripción Permite al actor seleccionar de los profesores cargados el Director, los
cinco (5) Jefes de Departamentos y los (5) Representantes de UDPP
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Configuración de personal exitosa
58
Tabla 10. Descripción caso de uso Ver Listado de Profesor
Caso de Uso 1.1.3 Ver Listado de Profesor
Actor Director y Personal Administrativo
Descripción Muestra una lista de todos los profesores que se encuentran cargados en
la aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Se muestra el listado de profesores de forma exitosa
Tabla 11. Descripción caso de uso Agregar Profesor
Caso de Uso 1.1.3.1 Agregar Profesor
Actor Director y Personal Administrativo
Descripción Permite al actor crear un profesor que no se encuentre cargado en la
aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Profesor agregado con éxito
59
Tabla 12. Descripción caso de uso Eliminar Profesor
Caso de Uso 1.1.3.2 Eliminar Profesor
Actor Director y Personal Administrativo
Descripción Ofrece la posibilidad de eliminar a un profesor que se encuentre cargado
en la aplicación..
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Profesor eliminado con éxito
Tabla 13. Descripción caso de uso Modificar Profesor
Caso de Uso 1.1.3.3 Modificar Profesor
Actor Director y Personal Administrativo
Descripción Permite modificar los datos de un profesor que se encuentre cargado en
la aplicación, tales como: CI, nombres y apellidos, departamento, correo
electrónico y teléfono.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Profesor modificado con éxito
60
Tabla 14. Descripción caso de uso Ver Listado de Estudiantes
Caso de Uso 1.1.4 Ver Listado de Estudiante
Actor Director y Personal Administrativo
Descripción Muestra una lista de todos los estudiantes que se encuentran cargados en
la aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
El listado de estudiantes es mostrado con éxito
Tabla 15. Descripción caso de uso Agregar Estudiante
Caso de Uso 1.1.4.1 Agregar Estudiante
Actor Director y Personal Administrativo
Descripción Permite al actor crear un estudiante que no se encuentre cargado en la
aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Estudiante creado con éxito
61
Tabla 16. Descripción caso de uso Eliminar Estudiante
Caso de Uso 1.1.4.2 Eliminar Estudiante
Actor Director y Personal Administrativo
Descripción Ofrece la posibilidad de eliminar a un estudiante que se encuentre
cargado en la aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Estudiante eliminado con éxito
Tabla 17. Descripción caso de uso Modificar Estudiante
Caso de Uso 1.1.4.3 Modificar Estudiante
Actor Director y Personal Administrativo
Descripción Permite modificar los datos de un estudiante que se encuentre cargado en
la aplicación, tales como: CI, nombres y apellidos, departamento, correo
electrónico, materia inscrita, teléfono de contacto
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Estudiante modificado con éxito
62
Tabla 18. Descripción caso de uso Ver Listado de Planilla
Caso de Uso 1.1.5 Ver Listado de Planilla (Aceptado por UDPP)
Actor Director y Personal Administrativo
Descripción Permite al actor ver las planillas de los estudiantes que han sido
aceptadas por los Representantes de UDPP.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Ver planillas aceptadas por UDPP con éxito
Tabla 19. Descripción caso de uso Imprimir Planillas
Caso de Uso 1.1.5.1 Imprimir Planillas
Actor Director y Personal Administrativo
Descripción Permite al actor imprimir el proyecto de cada estudiante con las
observaciones.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Proyecto imprimido con éxito
63
Tabla 20. Descripción caso de uso Aceptar Planilla por CE
Caso de Uso 1.1.5.2 Aceptar Planilla por CE
Actor Director y Personal Administrativo
Descripción Permite al actor aceptar el proyecto de cada estudiante.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Proyecto aceptado con éxito
Tabla 21. Descripción caso de uso Rechazar Planilla por CE
Caso de Uso 1.1.5.3 Rechazar Planilla por CE
Actor Director y Personal Administrativo
Descripción Permite al actor rechazar el proyecto de cada estudiante.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Proyecto rechazado con éxito
Tabla 22. Descripción caso de uso Agregar Observación
Caso de Uso 1.1.5.3.1 Agregar Observación
Actor Director y Personal Administrativo
Descripción Permite agregar las razones por las cuales un proyecto se rechazó.
Precondiciones Iniciar sesión en la aplicación, Rechazar Proyecto
Condición Final
Exitosa
Observación agregada con éxito
64
Tabla 23. Descripción caso de uso Imprimir Listado de Solicitudes
Caso de Uso 1.1.6 Imprimir Listado de Solicitudes
Actor Director y Personal Administrativo
Descripción Permite imprimir una lista de todos los estudiantes inscritos en las
materias MI y ML con la decisión del consejo de escuela actualizada
(proyecto aceptado o rechazado por Consejo de Escuela).
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Listado imprimido con éxito
Tabla 24. Descripción caso de uso Cambiar Contraseña
Caso de Uso 1.1.7 Cambiar Contraseña
Actor Profesor, Personal Administrativo y Estudiante
Descripción Permite a los actores cambiar su contraseña.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Contraseña cambiada con éxito
65
Tabla 25. Descripción caso de uso Cerrar Sesión
Caso de Uso 1.1.8 Cerrar Sesión
Actor Profesor, Personal Administrativo y Estudiante
Descripción permite a los actores de la aplicación salir del módulo de inscripción de
materias Métodos de Investigación y Métodos de Laboratorio de la
Escuela de Biología de la Facultad de Ciencias de la UCV..
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Sesión cerrada con éxito
Tabla 26. Descripción caso de uso Ver Notificación
Caso de Uso 1.1.13 Ver Notificación
Actor Estudiante, Profesor, Tutor, UDPP y Personal Administrativo
Descripción Permite notificar al actor de alguna actividad ocurrida que no ha sido
vista por él.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Notificación mostrada con éxito
66
A continuación en la Figura 11 se muestra el diagrama de casos de uso del Profesor de la
aplicación web Biotec
Figura 11. Casos de Uso Aplicación Web Biotec – Profesor. Elaboración Propia
Tabla 27. Descripción caso de uso Ver Solicitud
Caso de Uso 1.1.9 Ver solicitud
Actor Profesor
Descripción Permite al actor observar las solicitudes de tutorías recibidas
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Solicitudes mostradas con éxito
67
Tabla 28. Descripción caso de uso Aceptar Tutoría
Caso de Uso 1.1.9.1 Aceptar Tutoría
Actor Profesor
Descripción Permite al actor aceptar las solicitudes de tutoría que desee.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Aceptación de solicitud con éxito
Tabla 29. Descripción caso de uso Rechazar Tutoría
Caso de Uso 1.1.9.2 Rechazar Tutoría
Actor Profesor
Descripción Permite al actor rechazar las solicitudes de tutoría que desee.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
rechazo de solicitud con éxito
Tabla 30. Descripción caso de uso Agregar Observación
Caso de Uso 1.1.9.2.1Agregar Observación
Actor Profesor
Descripción cuando un profesor rechaza una solicitud de tutoría, éste debe agregar los
motivos por los cuales la rechazó
Precondiciones Iniciar sesión en la aplicación, rechazar solicitud
Condición Final
Exitosa
Observación agregada con éxito
68
Tabla 31. Descripción caso de uso Actualizar Datos
Caso de Uso 1.1.10 Actualizar Datos
Actor Profesor, Estudiante
Descripción Permite al actor actualizar sus datos personales: CI, Nombre,
Departamento, Dirección, Teléfono, Email.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Actualización de datos exitosa
En la Figura 12 se presenta el diagrama de casos de uso del Tutor de la aplicación web
Biotec
Figura 12. Casos de Uso Aplicación Web Biotec – Tutor. Elaboración Propia
69
Tabla 32. Descripción caso de uso Ver Tutoría
Caso de Uso 1.1.11 Ver Tutoría
Actor Tutor
Descripción Muestra al actor el listado de las planillas de los estudiantes que tutorea
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Planillas mostradas con éxito
Tabla 33. Descripción caso de uso Revisar Planilla
Caso de Uso 1.1.11.1 Revisar Planilla
Actor Tutor
Descripción Permite al actor observar la planilla del estudiante tutoreado que desea.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Planilla mostrada con éxito
Tabla 34. Descripción caso de uso Aceptar Planilla
Caso de Uso 1.1.11.1.1 Aceptar Planilla
Actor Tutor
Descripción Permite al actor aceptar la planilla del estudiante tutoreado.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Planilla aceptada con éxito
70
Tabla 35. Descripción caso de uso Rechazar Planilla
Caso de Uso 1.1.11.1.2 Rechazar Planilla
Actor Tutor
Descripción Permite al actor rechazar la planilla del estudiante tutoreado.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Planilla rechazada con éxito
Tabla 36. Descripción caso de uso Agregar Observación
Caso de Uso 1.1.11.1.2.1 Agregar Observaciones
Actor Tutor
Descripción cuando se rechaza una planilla se deben agregar los motivos por los
cuales la misma ha sido rechazada
Precondiciones Iniciar sesión en la aplicación, rechazar planilla
Condición Final
Exitosa
Observación agregada con éxito.
Tabla 37. Descripción caso de uso Cargar Nota
Caso de Uso 1.1.12 Cargar Nota
Actor Tutor
Descripción permite al actor cargar la nota final de cada estudiante tutoreado.
Precondiciones Iniciar sesión en la aplicación, rechazar planilla
Condición Final
Exitosa
Nota cargada con éxito
71
A continuación en la Figura 13 se presenta el diagrama de casos de uso del Representante
de UDPP de la aplicación web Biotec
Figura 13. Casos de Uso Aplicación Web Biotec - Representante de UDPP.
Elaboración Propia
Tabla 38. Descripción caso de uso Enviar Comunicado
Caso de Uso 1.1.14 Enviar Comunicado
Actor Representante de UDPP
Descripción Permite enviar correos a los estudiantes, tutores y ambos inclusive.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Envío de comunicado satisfactoriamente
72
Tabla 39. Descripción caso de uso Ver Nota Cargada
Caso de Uso 1.1.15 Ver nota Cargada
Actor Representante de UDPP, Jefe de Departamento
Descripción permite observar la nota que el Tutor le coloco al proyecto de un
estudiante del departamento respectivo
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Nota mostrada con éxito
Tabla 40. Descripción caso de uso Ver Listado de Planilla (Aceptada por Tutor)
Caso de Uso 1.1.16 Ver Listado de Planilla (Aceptada por Tutor)
Actor Representante de UDPP
Descripción Permite al actor ver las planillas de los estudiantes que han sido
aceptadas por los Tutores.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Listado de planillas mostrado con éxito.
73
Tabla 41. Descripción caso de uso Aceptar Planilla
Caso de Uso 1.1.16.1 Aceptar Planilla
Actor Representante de UDPP
Descripción Permite aceptar el proyecto de un estudiante
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Aceptación exitosa
Tabla 42. Descripción caso de uso Rechazar Planilla
Caso de Uso 1.1.16.2 Rechazar Planilla
Actor Representante de UDPP
Descripción permite rechazar el proyecto de un estudiante
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Rechazo de planilla exitoso
Tabla 43. Descripción caso de uso Agregar Observaciones
Caso de Uso 1.1.16.2.1 Agregar Observación
Actor Representante de UDPP
Descripción si se rechaza un proyecto se debe agregar los motivos por los cuales se
rechazó.
Precondiciones Iniciar sesión en la aplicación, rechazar planilla
Condición Final
Exitosa
Observación agregada de manera exitosa
74
Tabla 44. Descripción caso de uso Ver Listado Estudiante (Departamento)
Caso de Uso 1.1.17 Ver Listado Estudiante (Departamento)
Actor Representante de UDPP, Jede de Departamento
Descripción Permite observar los estudiantes inscritos en el departamento con el tema
y tutor inscrito.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Listado mostrado con éxito
Tabla 45. Descripción caso de uso Ver Listado de Tema
Caso de Uso 1.1.18 Ver Listado de Tema
Actor Representante de UDPP, Jefe de Departamento
Descripción Permite observar los temas ofrecidos en el departamento con el profesor
que dicta cada uno de ellos.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Listado mostrado con éxito
75
Tabla 46. Descripción caso de uso Agregar Tema
Caso de Uso 1.1.18.1 Agregar Tema
Actor Representante de UDPP
Descripción Permite crear un nuevo tema con el profesor encargado del mismo.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Tema agregado con éxito
Tabla 47. Descripción caso de uso Modificar Tema
Caso de Uso 1.1.18.2 Modificar Tema
Actor Representante de UDPP
Descripción permite modificar un tema (título, materia, profesor encargado)
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Tema modificado con éxito
Tabla 48. Descripción caso de uso Eliminar Tema
Caso de Uso 1.1.18.3 Eliminar Tema
Actor Representante de UDPP
Descripción permite eliminar un tema ya cargado en la aplicación
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Tema eliminado con éxito
76
En la Figura 14 se presenta el diagrama de casos de uso del Jefe de Departamento de la
aplicación web Biotec
Figura 14. Casos de Uso Aplicación Web Biotec - Jefe de Departamento. Elaboración
Propia
Tabla 49. Descripción caso de uso Ver Listado de Planilla Aprobada por UDPP
Caso de Uso 1.1.19 Ver Listado de Planilla Aprobada por UDPP
Actor Jefe de Departamento
Descripción Permite al actor ver las planillas de los estudiantes que han sido
aceptadas por UDPP
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Listado mostrado con éxito
77
En la Figura 15 se presenta el diagrama de casos de uso del Director de la aplicación web
Biotec,
Figura 15. Casos de Uso Aplicación Web Biotec – Director. Elaboración Propia
78
Tabla 50. Descripción caso de uso Iniciar Proceso
Caso de Uso 1.1.20 Iniciar Proceso
Actor Director
Descripción Permite al actor iniciar el proceso de inscripción esto quiere decir que a
partir de este momento los estudiantes pueden ingresar a la aplicación. Al
iniciar el proceso, la secretaria no podrá borrar los listados cargados en la
aplicación.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Inicio de proceso con éxito
Tabla 51. Descripción caso de uso Detener Proceso
Caso de Uso 1.1.20.1 Detener Proceso
Actor Director
Descripción Mediante esta funcionalidad el actor finaliza el proceso de inscripción de
un semestre, en la cual los estudiantes no podrán volver a ingresar a la
aplicación y a la secretaría se le habilitará nuevamente la posibilidad de
borrar los listados cargados.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Detención de proceso satisfactorio
79
Tabla 52. Descripción caso de uso Finalizar Proceso
Caso de Uso 1.1.20.2 Finalizar Solicitudes
Actor Director
Descripción Permite al actor deshabilitar a los estudiantes el envío de solicitudes de
tutoría.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Finalización de solicitudes con éxito
En la Figura 16 se presenta el diagrama de casos de uso del Estudiante de la aplicación web
Biotec
Figura 16. Casos de Uso Aplicación Web Biotec – Estudiante. Elaboración Propia
80
Tabla 53. Descripción caso de uso Seleccionar Tema
Caso de Uso 1.1.21 Seleccionar Tema
Actor Estudiante
Descripción Permite al actor seleccionar el tema que desea ver en la materia inscrita
durante el semestre.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Selección de tema de forma satisfactoria
Tabla 54. Descripción caso de uso Enviar Solicitud
Caso de Uso 1.1.21.1 Enviar Solicitud
Actor Estudiante
Descripción Permite enviar una solicitud de tutoría al profesor encargado del tema
que el estudiante seleccionó.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Solicitud enviada con éxito
81
Tabla 55. Descripción caso de uso Cargar Documento
Caso de Uso 1.1.22 Cargar Documento
Actor Estudiante
Descripción Permite el ingreso de los Datos del Proyecto del estudiante para ser
enviados a su Tutor respectivo.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Carga de documento realizada exitosamente
Tabla 56. Descripción caso de Imprimir Planilla
Caso de Uso 1.1.23 Imprimir Planilla
Actor Estudiante
Descripción Genera en formato PDF la planilla con los datos ingresados por el
estudiante.
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Planilla generada con éxito
82
Tabla 57. Descripción caso de uso Ver Observación
Caso de Uso 1.1.24 Ver Observación
Actor Estudiante
Descripción permite visualizar las observaciones realizadas en caso de que en alguna
etapa del proceso sea rechazado el proyecto
Precondiciones Iniciar sesión en la aplicación
Condición Final
Exitosa
Observación mostrada de manera satisfactoria
3.1.6 Modelo del Diagrama de Entidad/Relación
En el modelo entidad/relación se puede encontrar la especificación de la estructura de la
base de datos utilizada en la aplicación, tenemos una tabla de “users”, que son los usuarios
que participan en la aplicación gestionando el proceso de inscripción de forma automatizada;
“roles”, contempla los tipos de rol que puede tener un usuario dentro de la aplicación
(director, UDPP, jefe de departamento, tutor); “deparments”, maneja los departamentos
existentes en la Escuela; “notifications”, constituye todas las notificaciones generadas a un
usuario dentro de la aplicación; “observations”, representa las observaciones realizadas a un
usuario en simbiosis; “teachers”, identifica a los profesores de la Escuela; “themes”, identifica
los temas dictados por los profesores; “students”, constituye a los usuarios que inscribieron la
materia M.I y M.L; y finalmente “documents” que constituye el proyecto de cada estudiante.
En la Figura 17 se puede observar el diagrama/entidad relación descrito
83
Figura 17. Diagrama Entidad/Relación Biotec. Elaboración Propia
84
3.2 Elaboración de la Interfaz de Usuario
La estructura del diseño de la interfaz de usuario se dividió en dos (2) secciones: la primera
consta de la interfaz principal de la aplicación y la segunda consta del menú de inicio de los
usuarios.
3.2.1 Prototipaje
Luego de recolectar los requisitos funcionales y no funcionales se realizó una discusión
sobre la mejor distribución de la aplicación obteniéndose como resultado un prototipo de
interfaz para direccionar el proceso de desarrollo de la misma. En las siguientes Figuras se
muestra la estructura inicial que se elaboró de la aplicación.
En la Figura 18 se muestra la sección de la interfaz principal, la cual consta del logo de la
aplicación, de la universidad y de la facultad, la sección de inicio de sesión, una breve
descripción de la aplicación y un botón que direccionada a la sección de listado de temas
disponibles.
Figura 18. Prototipo de Interfaz de Inicio de Sesión – Elaboración Propia
La Figura 19 muestra el prototipo de interfaz del menú de inicio de los usuarios, que consta
de los logos (aplicaciones, universidad y falcutad), ademas posee un menú de inicio con todas
las funcionalidades dependiendo del usuario que ha accedido a la aplicación. Ésta sección
posee un nombre de usuario ya que para ingresar a ésta se debe estar registrado en la
aplicación.
85
Figura 19. Prototipo de Interfaz de Menú de Usuario. Elaboración Propia
3.2.2 Guía de estilos
Para el desarrollo de la aplicación web Biotec, se definió la paleta de colores a utilizar en
las diferentes secciones. La misma se muestra a continuación en la Figura 20 con su color en
RGB y en Hexadecimal.
Figura 20. Guía de Estilo de Biotec. Elaboración Propia
Todas las secciones conservan los mismos colores. Se pretendió realizar una combinación
entre azul y gris a las interfaces que proporcionen sencillez a las mismas pero a su vez
elegancia. Ambos colores son suaves, lo que evitan cansancio en la vista al momento de
86
utilizar la aplicación durante un período prolongado de tiempo. El color rojo se utilizó en
aquellos botones que representan el borrado algún contenido, mientras que el azul para las
aceptaciones.
Posterior a ello se creó el logo tipo para la aplicación, que lleva por nombre Biotec. Bio por
Biología y Tec por Tecnologías. En la Figura 21 se puede apreciar al mismo.
Figura 21. Logotipo Biotec. Elaboración Propia
Acto seguido al diseño del Logotipo se identificaron cada uno de los iconos que formarían
parte de la aplicación., en la Figura 22 se pueden observar cada uno de ellos:
Figura 22. Iconos de Biotec. Elaboración Propia
Una vez identificados los iconos se paso a definir el tipo de fuente a utilizar por la
aplicación, seleccionandose la tipografía Arial, fuente estandar admitida por cualqueir
computador independientemente de su antigüedad.
Finalmente se crearon los mapas de navegación de la aplicación a realizar, en la Figura 23
se muestra el mapa de navegación de la Interfaz Principal, la cual cuenta con tres (3) secciones
la de ver temas disponibles, inicio de sesión y recuperar contraseña.
87
Figura 23. Mapa de Navegación – Inicio. Elaboración Propia
En la Figura 24 se muestra el mapa de navegación de la sección del usuario Personal
Administrativo donde se muestran las opciones de navegación de la secretaria
Figura 24. Mapa de Navegación Inicio - Secretaria. Elaboración Propia
A continuación en la Figura 25 se refleja el mapa de navegación de Inicio de un profesor
88
Figura 25. Mapa de Navegación deInicio – Profesor. Elaboración Propia
En la Figura 26 se muestra el mapa de Navegación de Inicio de un Tutor
Figura 26. Mapa de Navegación de Inicio – Tutor. Elaboración Propia
En la figura 27 sepuede apreciar el mapa de navegación de Inicio del Representante de
UDPP
89
Figura 27. Mapa de Navegación Inicio – Representante de UDPP. Elaboración Propia
En la Figura 28 se puede observar el mapa de navegación de inicio de los jefes de
departamento
Figura 28. Mapa de Navegación de Inicio – Jefe de Departamento. Elaboración Propia
90
En la Figura 29 se puede apreciar el mapa de navegación de inicio del Director
Figura 29. Mapa de Navegación de Inicio –Director. Elaboración Propia
En la Figura 30 se puede observar el mapa de navegación de inicio del estudiante donde se
muestran las opciones de navegacion de un estudiante cuando inicia sesión en la aplicación
Figura 30. Mapa de Navegación de Inicio – Estudiante. Elaboración Propia
91
3.2.3 Elementos de accesibilidad
Para facilitar el uso de la aplicación a aquellos usuarios con algún tipo de discapacidad
visual, ésta se ha desarrollado de tal forma que el usuario al expandir la página, la misma
conserve su estructura sin perder contenido o modificar la resolución de las imágenes. En caso
de un mayor acercamiento, la página reorganiza automáticamente las secciones para que no se
pierda ningún tipo de información.
A continuación en la Figura 31 se puede apreciar la sección Principal con un aumento de
tamaño del 200%
Figura 31. Sección Principal de Biotec con aumento de tamaño de 200%
Como se puede observar en la Figura 32 de la sección principal con tamaño
predeterminado, no se ha perdido ninguna información al aumentar el tamaño de la página.
Figura 32. Sección Principal de Biotec con tamaño predeterminado
92
3.3Flujo de Trabajo de Proceso de Inscripción Automatizado
Debido a la complejidad del proceso de inscripción automatizado y la cantidad de toma de
decisiones que se encuentran dentro del mismo se decidió elaborar un flujo de trabajo a través
del cual se explique la forma en será acabo llevado el mismo, con las roles participantes y los
puntos de control respectivos. El mismo se muestra a continuación en la Figura 33
Figura 33. Flujo de Trabajo - Proceso de Inscripción Automatizado. Elaboración Propia
93
3.4 Desarrollo
3.3.1 Elección y Adaptación del Framework
Muchos frameworks de desarrollo web actualmente publicados ofrecen una amplia lista de
funcionalidades y facilidades para el desarrollador, permitiéndole abstraerse de muchas cosas
que tendría que tener en cuenta en el desarrollo puro o sin ningún framework. Hoy en día hay
muchos lenguajes de programación utilizados en el desarrollo web, destacando el lenguaje
PHP, este lenguaje es ampliamente utilizado y ofrece altas capacidades y desempeño del lado
de servidor, permitiéndole ser multiplataforma, cabe destacar que dado que es ampliamente
usado, existe una gran cantidad de frameworks PHP que le permiten al desarrollador crear
aplicaciones mucho más robustas y legibles con pocas líneas de código. Entre los frameworks
PHP se pueden destacar CakePHP, CodeIgniter, Symfony, FuelPHP, Laravel y Zend. PHP no
obliga al programador a seguir una metodología de desarrollo, por lo cual se es libre de seguir
una metodología o patrón de diseño bajo PHP sin ningún inconveniente.
Una de las mejoras clave de los frameworks web es que ya tienen implementado o siguen
el patrón de diseño MVC (Modelo-Vista-Controlador) que es un patrón que encaja
perfectamente en el desarrollo web. Los frameworks mencionados anteriormente ofrecen esta
funcionalidad y adicional a eso ofrecen muchas otras características para el desarrollo, como
por ejemplo: integración a distintos manejadores de base de datos, Mapeo Objeto - Relacional,
ORM del inglés: Object-Relational Mapping, manejo de objetos de base de datos, lenguaje de
generación de plantillas (templates) para el renderizado del HTML para el usuario, validación,
módulo de autenticación y manejo de caché.
El framework que se eligió para el desarrollo de la aplicación fue Laravel. La razón de esta
elección se debe a que además de que ofrece todas las características previamente
especificadas, la sintaxis que sigue para la creación de objetos y relaciones, el manejo de las
rutas y generación de templates es muy intuitivo.
Laravel es inspirado en Ruby on Rails, tomando varias características de este y adicional a
eso agregando mejoras que ofrecen otros frameworks como CodeIgniter y Symfony.
94
3.3.1.1 Instalación de la Aplicación
Para el desarrollo de la aplicación se trabajó con la herramienta Git, un manejador de
versiones ampliamente utilizado. Git permite trabajar localmente en un proyecto y hacer que
los cambios tengan después persistencia en un repositorio remoto, de esta manera permite el
desarrollo colaborativo entre varios desarrolladores. Posee un archivo llamado .gitinore que
indica cuales archivos no deben hacer persistencia en el repositorio remoto, esto es con la
intención de que lo ideal es conservar en el repositorio lo que realmente será modificado
durante el desarrollo, en el caso de Laravel, las carpetas con el core de Laravel no es
almacenado en el repositorio. Es por ello que si se hace recuperación ó retrieving de la
aplicación a través de Git debe hacerse la instalación del núcleo de Laravel. Para ello debe
ejecutarse en el directorio raíz el siguiente comando: composer install
Asumiendo que se tiene instalado en el servidor el software Composer que permite hacer
manejo de paquetes de PHP, la ejecución del comando anterior instalará todas las
dependencias de la aplicación (incluyendo Laravel) que están especificadas en el archivo
composer.json. Una vez instaladas las dependencias, se debe proceder a la configuración de la
base de datos.
Laravel posee un sistema de manejo de múltiples base de datos muy robusto, escalable y
transparente para el desarrollador y para quien instale la aplicación. En el archivo
database.php que se ubica en el directorio app/config de la aplicación se especifica el motor de
base de datos a utilizar y los parámetros de autenticación y otros adicionales que se deben
configurar. En la Figura 34 se muestran los parámetros establecidos para el desarrollo de la
aplicación, donde el motor de base de datos utilizado fue MySQL.
95
Figura 34. Parámetros de Configuración de Base de Datos
Para utilizar el motor de MySQL se deben especificar los siguientes parámetros:
Host: el hostname o dirección donde se ubicará la base de datos. Por lo general es
localhost dado que la base de datos reside en la misma máquina que la aplicación.
Database: Nombre de la base de datos.
Username: Un nombre de usuario valido que puede acceder a la base de datos.
Password: contraseña de ingreso para el username especificado.
Se recomienda que los demás parámetros se dejen con sus valores por defecto. Esta
configuración es válida asumiendo que en la máquina ya se posee MySQL instalado con las
credenciales especificadas, y adicional a eso que la base de datos con nombre biotec haya sido
creada (sea por el mismo motor o una herramienta third party como PHPMyAdmin).
96
Con esta configuración ya Laravel puede hacer el mapeo para la creación de las tablas
presentes en la aplicación, es por ello que Laravel usa lo que se conoce como migraciones de
bases de datos. Las migraciones no son más que la especificación de las tablas y relaciones
que van a estar presentes en la aplicación. Inspirado en Ruby on Rails, permite crear
migraciones con marcas de tiempo, haciendo la creación de la base de datos colaborativa entre
los desarrolladores y mucho más flexible al momento de realizar cambios sobre columnas o
tablas. La idea es no tocar nunca al manejador de base de datos sino más bien realizar todo a
través del framework. En la Figura 35 se muestra la especificación de una migración donde se
crea la tabla roles de la aplicación.
Figura 35. Especificación de la Migración de la Creación de la Tabla Roles
97
Laravel también permite crear seeding sobre la base de datos, es decir, insertar data de
prueba o incluso data real en producción a través de la sintaxis de Laravel. En la Figura 36 se
observa el seeding realizado sobre la tabla roles.
Figura 36. Seeding sobre la tabla roles
Para Biotec, tanto el esquema de base de datos, como los datos a agregar por seeding a la
base de datos se realizaron a través de las migraciones y seeding de Laravel, aprovechando
esta característica del framework. Para que el esquema de base de datos sea creado por las
migraciones, se debe correr el siguiente comando en el directorio raíz de la aplicación: php
artisan migrate
El comando anterior tomará todas las migraciones realizadas, que se ubican en el directorio
app/database/migrations, y las ejecutará para definir el esquema de la base de datos. Para
eliminar el esquema o hacer rollback de las migraciones aplicadas se ejecuta el siguiente
comando: php artisan migrate:reset
Para aplicar el seeding sobre la base de datos con las tablas ya creadas se ejecuta el
siguiente comando: php artisan db:seed
98
A través de artisan, que no es más que un batch file o archivo de procesamiento por lotes
de php ubicado en el directorio raíz de la aplicación, se pueden realizar una serie de
funcionalidades o comandos sobre la aplicación, permite incluso la creación de controladores
sobre la aplicación.
En este punto ya la aplicación desde el punto de vista de base de datos está totalmente
configurada.
3.3.1.2 Creación de los Modelos
Los modelos especifican las relaciones, tablas que usan e incluso eventos sobre las
tablas y validaciones que permite realizar la lógica necesaria en los controladores. Para ello se
deben definir en el directorio app/models, donde el estándar a seguir es que el nombre del
modelo sea en singular y tenga concordancia con el nombre de la tabla que representa. Laravel
tiene un robusto soporte ORM. Se le debe indicar en la definición del modelo la tabla que
representa y las relaciones que posee con otras tablas. Adicionalmente Laravel ofrece lo que
se conoce como interfaces, que son funcionalidades extras que pueden ser aplicadas sobre el
modelo. Para la tabla de usuarios que es la tabla que se usará para autenticar en la aplicación,
Laravel ofrece una interfaz denominada UserInterface que permite hacer transparente el
manejo de la autenticación en la aplicació a través de este modelo. Al final el modelo es un
objeto que debe obligatoriamente extender de Eloquent que es lo que permite en Laravel tener
la funcionalidad de ORM. Se tiene soporte para las relaciones contra otras tablas, donde esas
relaciones son las relaciones uno a uno (hasOne/belongsTo), uno a muchos
(hasMany/belongsTo) y muchos a muchos (belongsToMany). Incluso permite el manejo de
relaciones distantes (hasManyThrough) a través de una relación intermedia y relaciones
polimórficas. En la Figura 37 se observa la definición del Modelo para la tabla users,
llamándose el modelo User.
99
Figura 37. Definición del Modelo User
100
3.3.1.3 Creación de Controladores
Laravel al utilizar el patrón MVC, separa la lógica sobre los modelos en los controladores,
donde estos se almacenan en el directorio app/controllers. Un controlador no es más que un
objeto que hereda de BaseController, que es el controlador básico en Laravel y que ofrece
todos los métodos abstractos que debe poseer un controlador. Adicionalmente a estos métodos
abstractos, se le pueden definir muchos otros métodos con el acceso deseado, al igual que con
los atributos. Se pueden crear controladores a través del uso de artisan, especialmente si son
controladores que manejarán acciones CRUD sobre un modelo. El comando para crear un
controlador por artisan es el siguiente: php artisan controller:make UserController
El comando anterior genera un archivo en el directorio anteriormente especificado bajo el
nombre de UserController.php, donde tendrá definidos los métodos públicos sin cuerpo index,
edit, store, update, view y delete que son los métodos que se utilizarán para las acciones
CRUD del modelo User en este caso. En la Figura 38 se observa parte de la definición del
controlador SessionController que lleva a cabo la lógica para el inicio de sesión en la
aplicación.
101
Figura 38. Parte de la definición de SessionController
3.3.1. Creación de Vistas y Adaptación del Prototipo
Las vistas son los templates que servirán de base para el renderizado final de la página web
solicitada si es el caso, por lo general en formato HTML. En Laravel, para generar las vistas,
se usa un lenguaje propio del framework conocido como Blade. Este es un lenguaje que
permite colocar junto al código HTML código embebido muy parecido a la sintaxis de PHP.
De esta manera se logra obtener vistas dinámicas en función de lo solicitado. Estas vistas se
102
definen en el directorio app/views con la extensión blade.php. De esta manera Laravel
mantiene el patrón MVC dedicando un apartado especial para las vistas.
Mediante el uso de Blade como lenguaje de templating se puede lograr herencia entre
vistas, hacer includes de porciones de código o vistas definidas en otro archivo, haciendo el
código reusable y más fácil de leer, siguiendo la metodología DRY (Don’t Repeat Yourself).
Para la aplicación, se definió una vista Base la cual contiene todo lo que es común en todas las
demás vistas (header, menú, footer) y las demás vistas heredan de esta vista base y colocan
aquel contenido dinámico que no es igual en las demás. Incluso dado que la aplicación maneja
distintos roles, los cuales poseen distintas funcionalidades que eso se traduce en distintos
menús en la aplicación, se creó un menú para cada rol siendo este menú también cambiado
dinámicamente. Por cuestiones de estructura y orden, por cada rol en la aplicación, se creó una
subcarpeta para cada uno, donde se definen sus vistas según sea el caso.
103
Capítulo IV. Resultados
En este capítulo son descritos los resultados en función de la interfaz y las funcionalidades
de la aplicación web Biotec luego de utilizar la metodología de desarrollo AgilUs. La
aplicación cuenta con siete (7) módulos que son: Personal Administrativo, Profesor donde
además se encuentra: Tutor, UDPP, Jefe de Departamento y Director, y el Estudiante. Todos
los módulos trabajando en conjunto gestionan el proceso de Inscripción de Métodos de
Laboratorio y Métodos de Investigación de la Escuela de Biología de la Facultad de Ciencias
de la UCV.
4.1 Página Principal
En la Figura 39 se muestra la página principal de la aplicación, la misma cuenta con un
formulario de inicio de sesión, un botón que permite consultar los temas disponibles en el
semestre a inscribir y una breve descripción de la aplicación.
Figura 39. Página de Inicio de Biotec
104
4.1.1 Página de Listado de Temas
En la Figura 40 se muestra la página de listado de temas donde son mostrados todos los
temas que están disponibles para inscribir en el semestre, el departamento que agregó cada
uno de ellos y el profesor que los dictará. Aparece también un botón de regresar el cual envía
a la interfaz de la página de inicio.
Figura 40. Página de Listado de Temas
4.2 Módulo de Personal Administrativo - Inicio
En la Figura 41 se puede apreciar la página de inicio del Módulo de Personal
Administrativo, en la que se explican brevemente los primeros pasos a realizar al iniciar
sesión por primera vez, además se pueden observar las diferentes funcionalidades de la
Administración: Cargar Listados, Configuración de Departamentos, Listado de Profesores,
Listado de Estudiantes, Listado de Planillas, Imprimir Listado de Solicitudes, Cambiar
Contraseña y Notificaciones; y finalmente se puede apreciar el botón de Cerrar Sesión
mediante el cual el usuario administrador tienen la opción de salir de la aplicación.
105
Figura 41. Módulo de Personal Administrativo – Inicio
4.2.1 Cargar Listados
En la Figura 42 se observa la funcionalidad a través de la cual se permite cargar los listados
en formato .xls (archivos Excel) de los profesores y los estudiantes inscritos de M.L y M.I. Es
importante que estos archivos se tengan almacenados en un directorio de su computadora de
escritorio para poder llevar a cabo la subida de los mismos.
Una vez cargados los listados, el personal administrativo tiene la opción de eliminarlos
siempre y cuando el Director no haya iniciado el proceso de inscripción o una vez se detenga
el mismo.
106
Figura 42. Módulo de Personal Administrativo - Cargar Listados
4.2.2 Configuración de Departamentos
En la Figura 43 se puede apreciar la interfaz de Configuración de Departamentos, en ella se
configuran: el Director de la escuela, los cinco (5) Representantes de UDPP ya que es uno por
departamento y los (5) Jefes de Departamento que también es uno por departamento. Una vez
configurados éstos, Biotec ofrece la opción de Reconfiguración.
107
Figura 43. Módulo de Personal Administrativo – Configuración de Departamentos
4.2.3 Listado de Profesores
En la Figura 44 la interfaz mediante la cual se pueden observar todos los profesores
cargados en la aplicación a través del listado en formato .xls (archivo Excel), los cuales
interactúan con la aplicación. En ella se pueden realizar acciones como crear un nuevo
profesor, editar profesor, eliminar profesor y realizar búsqueda de profesor por departamento
o nombre.
108
Figura 44. Módulo de Personal Administrativo – Listado de Profesores
4.2.3.1 Crear Nuevo Profesor
En la Figura 45 se aprecia el formulario que se debe llenar en la opción de crear un nuevo
profesor, a través de esta funcionalidad se pueden agregar aquellos profesores que no se
encuentren cargados en la aplicación.
109
Figura 45. Módulo de Personal Administrativo – Listado de Profesores: Crear Nuevo
Profesor
4.2.3.2 Editar Profesor
En la Figura 46 se aprecia el formulario de la opción editar profesor, a través de esta
funcionalidad se pueden modificar los campos que allí se reflejan.
Figura 46. Módulo de Personal Administrativo – Listado de Profesores: Editar Profesor
110
4.2.3.3 Eliminar Profesor
En la Figura 47 se puede apreciar la interfaz que detalla la forma como se elimina un
profesor, esta funcionalidad elimina del listado de profesores al profesor seleccionado, por lo
tanto el mismo no tendrá acceso a Biotec.
Figura 47. Módulo de Personal Administrativo – Listado de Profesores: Eliminar
Profesor
4.2.3.4 Búsqueda por Nombre y Departamento
Esta funcionalidad permite realizar la búsqueda de profesores tanto por nombre como por
departamentos. En la Figura 48 y en la Figura 49 se muestra un ejemplo de cada una de las
busquedas.
111
Figura 48. Módulo del Personal Administrativo –Listado de Profesores: Búsqueda por
Nombre
Figura 49. Módulo del Personal Administrativo –Listado de Profesores: Búsqueda por
Departamento
4.2.4 Listado de Estudiantes
La Figura 50 muestra la interfaz del Listado de Estudiantes, a través de la misma se pueden
observar todos los estudiantes que inscribieron las materias métodos de investigación y
métodos de laboratorio junto con el Departamento en el que realizaron la inscripción.
112
Figura 50. Módulo de Personal Administrativo – Listado de Estudiantes
4.2.4.1 Crear Nuevo Estudiante
A través de la opción crear estudiante se puede agregar un nuevo estudiante a Biotec,
llenando el formulario presentado en la Figura 51.
113
Figura 51. Módulo Personal Administrativo – Listado de Estudiantes: Crear Nuevo
Estudiante
4.2.4.2 Editar Estudiante
A través de la opción editar estudiante se pueden modificar los campos de un estudiante
inscrito en M.I o M.L presentados en la Figura 52
114
Figura 52. Módulo Personal Administrativo – Listado de Estudiantes: Editar Estudiante
Elaboración Propia
4.2.4.3 Eliminar Estudiante
Mediante la opción eliminar estudiante mostrada en la Figura 53 es posible eliminar de
forma definitiva a un estudiante de la aplicación Biotec.
Figura 53. Módulo Personal Administrativo – Listado de Estudiantes: Eliminar
Estudiante
115
4.2.4.4 Búsqueda por Nombre y Departamento
Esta funcionalidad permite realizar la búsqueda de estudiantes tanto por nombre como por
departamentos. En la Figura 54 y en la Figura 55 se muestra un ejemplo de cada una de las
busquedas.
Figura 54. Módulo del Personal Administrativo –Listado de Estudiantes: Búsqueda por
Nombre
Figura 55. Módulo del Personal Administrativo –Listado de Estudiantes: Búsqueda por
Departamento
116
4.2.5 Listado de Planillas
En la Figura 56 se puede apreciar la interfaz de Listado de Planilla, listado a través del cual
se pueden ver todas las planillas de los estudiantes que han sido aceptadas por UDPP. Aquí
podemos encontrar la opción de ver la planilla de cada estudiante, aceptar la planilla de cada
estudiante y rechazar la planilla de cada estudiante.
Figura 56. Módulo Personal Administrativo – Listado de Planillas
4.2.6 Imprimir Listado de Solicitudes
En la Figura 57 se muestra el formato del Listado de Solicitudes que se imprime con esta
funcionalidad
Figura 57. Módulo Personal Administrativo – Listado de Solicitudes
117
4.2.7 Cambiar Contraseña
En la Figura 58 se muestra la interfaz de Cambiar Contraseña, a través de la cual un
usuario puede cambiar su contraseña de inicio de sesión.
Figura 58. Módulo Personal Administrativo – Cambiar Contraseña
4.3 Módulo de Profesor - Inicio
En la Figura 59 se puede apreciar la interfaz de inicio del Módulo de Profesor, en la que se
pueden observar las diferentes funcionalidades existentes: Actualizar Datos, Solicitudes de
Tutoría, Cambiar Contraseña y Notificaciones; además se observa el botón de Cerrar Sesión
mediante el cual un usuario puede salir de la aplicación.
Figura 59. Módulo de Profesor - Inicio
118
4.3.1 Actualizar Datos
Esta funcionalidad permite como su nombre lo indica, actualizar los datos del usuario que
se muestran a continuación en la Figura 60
Figura 60. Módulo de Profesor - Actualizar Datos
4.3.2 Solicitudes de Tutoría
Mediante esta funcionalidad, un profesor puede ver la solicitudes de tutoría enviadas por
diferentes estudiantes, además tiene la opción de aceptarlas o rechazarlas tal y como se
muestra en la Figura 61
Figura 61. Módulo de Profesor – Solicitudes de Tutoría
119
4.3.3 Cambiar Contraseña
Funcionalidad que permite a un profesor cambiar su contraseña de inicio de sesión, en la
Figura 62 se puede apreciar la interfaz de la misma
Figura 62. Modulo de Profesor – Cambiar Contraseña
4.3.4 Notificaciones
Mediante esta funcionalidad se pueden observar las notificaciones correspondientes a un
profesor tal y como lo muestra la Figura 63
Figura 63. Módulo de Profesor – Notificaciones
120
4.4. Módulo de Tutor – Inicio
En la Figura 64 que a continuación se presenta se muestra la interfaz de Inicio del Módulo
de Tutor en el cual se pueden apreciar cada una de las funcionalidades que puede realizar:
Tutoría, Cargar Notas, Notificaciones; además se observa el botón de cerrar sesión para salir
de Biotec.
Figura 64. Módulo de Tutor - Inicio
4.4.1 Tutoría
Esta funcionalidad permite ver las planillas de los estudiantes que tutorea con opción de
aceptarlas o rechazarlas, tal como se muestra en la Figura 65
121
Figura 65. Módulo de Tutor – Tutoría
4.4.2 Cargar Notas
En la figura 66 es presentada la funcionalidad de Cargar Notas, la cual permite al tutor
ingresar la nota final obtenida de sus estudiantes tutoreados.
122
Figura 66. Módulo de Tutor – Cargar Notas
4.4.3 Notificaciones
Mediante esta funcionalidad se pueden observar las notificaciones correspondientes a un a
un tutor tal y como lo muestra la Figura 67
Figura 67. Módulo de Tutor - Notificaciones
4.5 Módulo de Representante de UDPP - Inicio
En la Figura 68 se puede apreciar la página de inicio del Módulo de Representante de
UDPP, en la que se observan las funciones que le corresponde a cada uno de ellos: Listado de
123
Temas, Listado de Estudiantes, Listado de Planillas, Observar Notas Cargadas, Enviar
Comunicados y Notificaciones; por último se encuentra el botón de Cerrar Sesión mediante el
cual el usuario puede salir de la aplicación.
Figura 68. Módulo de Representante de UDPP - Inicio
4.5.1 Listado de Temas
En la Figura 69 se muestra la página de Listado de Temas mediante la cual los
Representantes de UDPP pueden ver todos los temas agregados que están disponibles en el
semestre en su Departamento con el profesor que dicta cada uno de ellos. En la misma se
pueden realizar funcionalidades como: Crear Nuevo Tema, Editar Tema o Eliminar un tema
ya existente.
124
Figura 69. Módulo de UDPP - Listado de Temas
4.5.2 Listado de Estudiantes
A través de esta opción el Representante de UDPP podrá observar el listado de estudiantes
inscritos en el respectivo Departamento con el tema y Tutor inscrito como se muestra en la
Figura 70 que representa la interfaz de Listado de Estudiantes.
Figura 70. Módulo de Representante de UDPP - Listado de Estudiantes
125
4.5.3 Listado de Planillas
En la Figura 71 se muestra la página de Listado de Planillas en la cual los Representantes
de la UDPP pueden ver las planillas de los estudiantes que han sido aceptadas por los Tutores.
En ésta interfaz se pueden apreciar las funcionalidades de aceptar la planilla o rechazar la
planilla.
Figura 71. Módulo de Representante de UDPP – Listado de Planillas
4.5.4 Observar Notas Cargadas
En la Figura 72 se aprecia la interfaz de Observar Notas Cargadas mediante la cual los
Representantes de UDPP pueden ver la calificación obtenidas de los estudiantes en sus
respectivos Departamentos, colocadas por sus respectivos tutores.
126
Figura 72. Módulo Representante UDPP – Observar Notas Cargadas
4.5.5 Enviar Comunicados
En la Figura 73 se puede observar la interfaz de Enviar Comunicados, a través de esta los
Representantes de UDPP pueden enviar correos a los estudiantes, profesores y ambos
inclusive.
Figura 73. Módulo Representante UDPP – Enviar Comunicados
127
4.6. Módulo de Jefe de Departamento - Inicio
En la Figura 74 se observa la interfaz de inicio del jefe de departamento, en ésta se aprecia
un menú con las diferentes opciones disponibles al mismo: Listado de Temas, Listado de
Estudiantes, Listado de Planillas y Observar Notas Cargadas; por último se encuentra el botón
de Cerrar Sesión mediante el cual un usuario puede salir de la aplicación.
Figura 74. Módulo Jede de Departamento – Inicio
4.6.1 Listado de Temas
En la Figura 75 se muestra la interfaz de Listado de Temas del Jefe de Departamento, en
ella se pueden observar los temas ofrecidos en el departamento respectivo con el profesor que
dicta cada uno de ellos.
128
Figura 75. Módulo de Jefe de Departamento – Listado de Temas
4.6.2 Listado de Estudiantes
Mediante esta funcionalidad el Jefe de Departamento puede observar los estudiantes
inscritos en el departamento con el tema y tutor inscrito como se muestra en la Figura 76
129
Figura 76. Módulo de Jefe de Departamento – Listado de Estudiantes
4.6.3 Listado de Planillas
En la Figura 77 se puede apreciar la interfaz de Listado Planillas, donde el Jefe de
Departamento observa las planillas de los estudiantes que han sido aceptadas por UDPP.
Figura 77. Módulo de Jefe de Departamento – Listado de Planillas
130
4.6.4 Observar Notas Cargadas
En la Figura 78 se aprecia la interfaz de Observar Notas Cargadas mediante la cual los Jefes
de Departamento pueden observar las notas obtenidas de los estudiantes en su respectivo
Departamento, colocadas por sus respectivos tutores.
Figura 78. Módulo de Jefe de Departamento – Observar Notas Cargadas
4.7. Módulo de Director - Inicio
El Director realiza las mismas funciones que el personal administrativo, solo tiene dos (2)
funcionalidades adicionales mostradas en la Figura 79
Figura 79. Módulo de Director - Inicio
131
4.8 Módulo de Estudiante – Inicio
A continuación en la Figura 80 se muestra la interfaz de Inicio del Estudiante, en la cual se
pueden apreciar las funcionalidades que el mismo puede realizar dentro de la aplicación:
Actualizar Datos, Seleccionar Tema, Cargar Documento, Imprimir Planilla, Ver
Observaciones, Cambiar Contraseña y las Notificaciones. Adicionalmente se encuentra el
botón de cierre sesión a través de la cual un estudiante puede salir de la aplicación.
Figura 80. Módulo de Estudiante - Inicio
4.8.1 Actualizar Datos
Esta funcionalidad permite como su nombre lo indica, actualizar los datos del usuario, en
este caso un estudiante que se muestran a continuación en la Figura 81
132
Figura 81. Módulo de Estudiante – Actualizar Datos
4.8.2 Seleccionar Tema
A continuación en la Figura 82 se presenta la interfaz de Seleccionar Tema mediante la
cual un estudiante selecciona al profesor y el tema de su preferencia. Esta funcionalidad
genera una solicitud de tutoría al profesor seleccionado.
Figura 82. Módulo de Estudiante – Seleccionar Tema
133
4.8.3 Cargar Documento
En la Figura 83 se muestra la interfaz de Cargar Documento mediante la cual previa
aceptación de la solicitud de tutoría por parte del profesor seleccionado un estudiante ingresa
los datos de su proyecto y se los envía al tutor respectivo para su respectiva aceptación.
Figura 83. Módulo de Estudiante – Cargar Documento
4.8.4 Imprimir Planilla
Ésta funcionalidad permite generar la planilla en formato PDF de los datos del proyecto
ingresados por el estudiante como lo muestra la Figura 84
134
Figura 84. Módulo de Estudiante – Imprimir Planilla
4.8.5 Ver Observaciones
Esta funcionalidad permite al actor revisar las observaciones que le fueron realizadas en su
proyecto al rechazarlo como se muestra en la Figura 85
135
Figura 85. Módulo de Estudiante – Ver Observaciones
4.8.6 Cambiar Contraseña
Funcionalidad que permite a un profesor cambiar su contraseña de inicio de sesión, en la
Figura 86 se puede apreciar la interfaz de la misma
Figura 86. Módulo de Estudiante – Cambiar Contraseña
4.8.7 Notificaciones
Mediante esta funcionalidad se pueden observar las notificaciones correspondientes a un
estudiante tal y como lo muestra la Figura 87
136
Figura 87. Módulo de Estudiante – Notificaciones
4.9 Prueba de Usabilidad
En lo que a usabilidad se refiere, a continuación en el Anexo 1 se presenta un modelo del
cuestionario aplicado basado en una evaluación heurística, que según Nielsen (1995) es un
método de ingeniería de usabilidad para conseguir problemas en la interfaz del diseño de
usuario.
El cuestionario fue validado mediante el instrumento mostrado en el Anexo 2 y aplicado a
a tres (3) expertos en usabilidad. La metodología fue la siguiente, para cada ítem del
cuestionario se debe colocar un valor de cero (0) a dos (2), donde:
Cero (0): No cumple en lo absoluto con el ítem.
Uno (1): Cumple medianamente con el ítem
Dos (2): Cumple absolutamente con el ítem
Se obtuvo la Figura 88 que a continuación se presenta, resultado de promediar las
puntuaciones obtenidas en cada ítem por cada experto en usabilidad. En el mismo se evidencia
que 23 ítems alcanzaron la puntuación máxima del cuestionario y dos (2) de ellos alcanzaron
un valor de uno (1). Promediando estos resultados tenemos que la aplicación de manera
137
general alcanza un valor de 1,92 que en porcentaje equivale al 96% lo que demuestra que la
misma es usable.
Figura 88. Resultados de la Evaluación Heurística
4.10 Licencia CreativeCommons Venezuela
A la aplicación web le fue creada la Licencia CreativeCommons que de acuerdo a
CreativeCommons (2014) es la más restrictiva de las seis licencias principales que existen. La
misma sólo permite que otros puedan descargar las obras y compartirlas con otras personas,
siempre que se reconozca su autoría, pero no se pueden cambiar de ninguna manera ni se
pueden utilizar comercialmente. A continuación en la Figura 89 se muestra el icono de la
misma
Figura 89. Reconocimiento No Comercial Sin Obra Derivada. CC BY-NC-ND
En el Anexo 3 se muestra la licencia creada a la aplicación.
0
0,5
1
1,5
2
2,5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
138
Conclusiones
En la actualidad se pueden encontrar una gran cantidad de tecnologías de información y
comunicación que ofrecen muchas ventajas y beneficios, algunos de ellos son: el
aprovechamiento de recursos, una mayor comunicación, mejor administración de procesos y
distribución de información, entre otros. Sin embargo existen organizaciones que no disfrutan
de estos beneficios ya que llevan a cabo sus procesos sin la inclusión de herramientas
tecnológicas, como lo es el caso de la Escuela de Biología de la Facultad de Ciencias de la
UCV, la cual gestiona su procesos de inscripción de Métodos de Investigación y Métodos de
Laboratorio manualmente, razón por la cual se desarrolla Biotec.
Biotec fue desarrollada utilizando tecnologías de desarrollo web tanto de software libre,
permitiendo un desarrollo económico de la misma, como de vanguardia, facilitando así su
construcción.
En cuanto a la metodología se realizó una adaptación de AgilUs como método de
desarrollo ágil, el cual permitió implementar un conjunto de técnicas y actividades de forma
organizada que facilitaron la construcción de Biotec desde el inicio hasta su fase final. La
característica incremental de éste método permitió ir agregando de forma progresiva
funcionalidades hasta cumplir con los objetivos planteados en el Trabajo Especial de Grado.
Además, por estar enfocada en la usabilidad, se centró en las necesidades del usuario durante
todo el desarrollo, permitiendo así la obtención de un software de calidad adaptado a éste. Se
puede afirmar que la utilización de ésta exitosa metodología sirvió de aprendizaje y
experiencia para futuros proyectos.
Se logró realizar el levantamiento de la información y los requerimientos de la Escuela de
Biología de la Facultad de Ciencias de la UCV desde el momento en que se elaboró el
139
seminario previo al Trabajo Especial de Grado. Se estudió la situación que tenía la Escuela en
relación al proceso de Inscripción de las materias antes mencionadas.
La aplicación de estándares de programación ayudó a la obtención de un código legible y
ordenado, el cual facilita el mantenimiento y evolución de la aplicación a lo largo del tiempo.
Para finalizar, la elaboración de este Trabajo Especial de Grado permitió realizar un aporte
significativo a la Escuela de Biología de la Facultad de Ciencias de la UCV, optimizando el
proceso de inscripción de las Materias Métodos de Laboratorio y Métodos de Inscripción con
Biotec, aplicación que permitirá una gestión automatizada del mencionado proceso.
140
Recomendaciones y Trabajos Futuros
A pesar del gran aporte que ha significado Biotec para la gestión del proceso de inscripción
de las Materias Métodos de Investigación y Métodos de Laboratorio, se pueden considerar
algunas mejoras y nuevas funcionalidades que permitirán el constante crecimiento de la
aplicación, así como también recomendaciones, como las siguientes:
Integrar la aplicación web Biotec con una aplicación que actualmente se encuentra en
proceso de desarrollo llamada Simbiosis, la cual permite la inscripción de Seminarios
o Trabajo Especial de Grado de la Escuela de Biología de la Facultad de Ciencias de la
UCV
Mejorar la interfaz de usuario con el objetivo de ampliar los lineamientos de usabilidad
ya existentes.
Seguir los estándares que se han empleado en el desarrollo de la aplicación para
futuros aportes.
Construir un módulo que permita generar reportes estadísticos con la información
almacenada en cada semestre.
141
Referencias Bibliográficas
Acosta, E. (2011). AgilUS: un método ágil de desarrollo de software que incorpora la
usabilidad. Caracas: Universidad Central de Venezuela.
Apache. (2008). The Apache Software Foundation - Apache httpd server - Web Server.
Recuperado el 02 de Octubre de 2014, de http://www.apache2.com
Apache Friends. (2011). ¿Qué es Xampp? Recuperado el 15 de Agosto de 2014, de
https://www.apachefriends.org/es/index.html
Barzanallana, R. (2012). ¿?Qué es una aplicación web? Recuperado el 20 de Marzo de 2014,
de http://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/Historia-
desarrollo-aplicaciones-web.html
BPMN (2014). Modelo de Procesos y notación. Recuperado el 29 de Octubre de 2014, de
http://www.bpmn.org/
Catalani, E. (2007). Arquitectura Modelo/Vista/Controlador. Recuperado el 02 de Octbre de
2014, de http://exequielc.wordpress.com/2007/08/20/arquitectura-
modelovistacontrolador/
Chesco. (2007). CSS (Cascade Style Sheets). Recuperado el 01 de Octubre de 2014, de
http://www.chesco.info/curso/css.htm
Díaz, A., Di Paolo, F., López, L., Piñeiro, J., & Vargas, H. (s.f). Apache Server. Recuperado el
12 de Marzo de 2014, de
http://ldc.usb.ve/~emilio/Portafolio/Software/REDES3/G5b/Presenta_Site/introduccio
n_historia.htm
Diccionario de Informatica. (2012). Definición de Aplicación Web. Recuperado el 20 de
Marzo de 2014, de http://www.alegsa.com.ar/Dic/aplicacion%20web.php
Eguíluz, J. (2008). Javascript. Recuperado el 20 de Marzo de 2014, de
http://es.scribd.com/doc/36947379/Javascript-manual-en-espanol
142
Elmasri, R., & Navathe, S. (1997). Sistemas de Bases de Datos. Conceptos Fundamentales.
México: Addison-Wesley Iberoamericana.
Enubes. (2013). Desarrollo de Aplicaciones Web. Recuperado el 20 de Marzo de 2014, de
http://www.enubes.com/desarrollo-de-aplicaciones-web.html
Git. (2014). Git - Documentation. Recuperado el 10 de Octubre de 2014, de http://git-
scm.com/
Instituto Nacional de Estadística e Informática. (1997). Cliente-Servidor. Recuperado el 20 de
Marzo de 2014, de
http://www.inei.gob.pe/web/metodologias/attach/lib616/cap0302.HTM
Jquery. (2010). The Write Less, Do more, JavaScript Library. Recuperado el 01 de Octubre de
2014, de http://jquery.com/
Laravel. (2014). Laravel - Documentación. Recuperado el 23 de Septiembre de 2014, de
http://laravel.com/docs/4.2/
Manual de Referencia. (2007). Manual de Referencia de MySQL 5.0. Recuperado el 02 de
Octubre de 2014, de http://dev.mysql.com/doc/refman/5.0/es/features.html
Morales, J. (s.f). Lenguajes del Lado del Cliente. Recuperado el 20 de Marzo de 2014, de
http://www.slideshare.net/JeremiasMorales/22-lenguajes-del-lado-cliente-9782560
MySQL. (2013). About MySQL. Recuperado el 15 de Marzo de 2014, de
http://www.mysql.com/about/
Newcomlab. (2013). Modelo de Tres Capas. Recuperado el 20 de Marzo de 2014, de
http://www.newcomlab.com/default.aspx?id_seccion=936
Nielsen, J. (1995). ”How to conduct a Heuristic Evaluation”. Recuperado el 12
de Octubre de 2014 de http://www.nngroup.com/articles/how-to-conduct-a-
heuristicevaluation/.
Otto , M., & Thornton, J. (2014). Manual Oficial Bootstrap 3. Recuperado el 01 de Octubre de
2014, de http://librosweb.es/bootstrap_3/#header
143
Pensum Vigente de la Escuela de Biología. (2006). Pensum de la Escuela de Biología.
Recuperado el 10 de Marzo de 2014, de
http://www.ucv.ve/uploads/media/Pensum_vigente2006.pdf
Pereda. (2007). ¿Qué es una Aplicación Web? Recuperado el 05 de Octubre de 2014, de
http://jmpereda.wordpress.com/2007/08/24/definiendo-la-plantilla/
PHP. (2013). Manual de PHP. Recuperado el 15 de Marzo de 2014, de
http://www.php.net/manual/es/index.php
Reglamento de Métodos de Laboratorio y Métodos de Investigación. (1999). Caracas: Consejo
Universitario.
Romano, F (2008). Impresión y flujo de trabajo. Prentice Hall
Silberschatz, A., Korth, H., & Sudarshan, S. (2002). Fundamentos de Bases de datos. España:
McGraw-Hill.
StarUML. (2008). Acerca de StarUML. Recuperado el 20 de Marzo de 2014, de
http://staruml.sourceforge.net/en/
Universidad de Sevilla. (2009). Introduccioón a las Aplicaciones Web. Recuperado el 20 de
Marzo de 2014, de http://www.lsi.us.es/docencia/get.php?id=3887
W3C. (2013). HTML and CSS. Recuperado el 20 de Marzo de 2014, de
http://www.w3.org/standards/webdesign/htmlcss
144
Anexos
145
Anexo 1. Evaluación Heurística a un Experto
N° Ítem Valor
1 La página de inicio tiene una dirección URL fácil de recordar
2 Las páginas están diseñada profesionalmente y van a crear una impresión
positiva
3 La información es presentada en un orden lógico, simple y natural
4 Las páginas están libre de información irrelevante, innecesaria y distractora
5 Las páginas anticipan correctamente y preguntan al usuario por la siguiente
probable actividad
6 Las páginas hacen que la experiencia de usuario sea más fácil y rápida que
si no tuviera la aplicación
7 Las páginas muestran una retroalimentación adecuada al usuario cuando lo
amerita
8 Los usuarios no necesitan recordar información de un lugar a otro
9 Las metáforas son fácilmente entendidas por los usuarios
10 Los detalles de procesamiento interno de la aplicación no son expuestos al
usuario
11 Los ítems de acciones son presentados como botones y no como enlaces
12 El sitio soporta a los usuarios novatos y expertos brindando diferentes
niveles de explicación
13 El contenido de la página está autorizado, actualizado y fidedigno
14 El sitio está libre de errores tipográficos y de errores ortográficos
15 Las fuentes son usada consistentemente
16 El diseño ayuda a poner atención en cual paso es el siguiente
146
17 Las fuentes son legibles
18 Las páginas son agradables a la vista
19 Las páginas cargan rápido
20 Los avisos al usuario son breves y no ambiguos
21 El sitio asegura no perder el trabajo del usuario (ya sea por error del usuario
o del sitio)
22 Es fácil deshacer (o cancelar) así como rehacer acciones
23 Los mensajes de error son escritos en lenguaje sencillo con suficiente
explicación del problema
24 Existe un balance entre la densidad de la información y el uso del espacio
en blanco
25 Todo lo que es clickeable es efectivamente presionable
147
Anexo 2. Instrumento de Validación
148
149
150
Anexo 3. Licencia CreativeCommons Venezuela
151