Diseño y desarrollo de un sistema de gestión de trabajos fin de grado para un departamento universitario

Equation Chapter 1 Section 1 Trabajo Fin de Grado Ingeniería de las Tecnologías de Telecomunicación Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Dpto. de Organización Industrial y Gestión de Empresas II Escuela Técnica Superior de Ingeniería Universidad de Sevilla Autor: Ismael Luna Zambrana Tutor: Pablo Aparicio Ruiz Sevilla, 2019 2 Trabajo Fin de Grado Ingeniería de las Tecnologías de Telecomunicación Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Autor: Ismael Luna Zambrana Tutor: Pablo Aparicio Ruiz Dpto. de Organización Industrial y Gestión de Empresas II Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2019 4 Trabajo Fin de Grado: Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Autor: Ismael Luna Zambrana Tutor: Pablo Aparicio Ruiz El tribunal nombrado para juzgar el Proyecto arriba indicado, compuesto por los siguientes miembros: Presidente: Vocales: Secretario: Acuerdan otorgarle la calificación de: Sevilla, 2019 El Secretario del Tribunal 6 A mi familia y amigos A mis maestros y mentores 8 Agradecimientos Estoy agradecido a toda aquella persona que, de cualquier forma, ha participado en mi vida sirviendo de alguna ayuda. Ya sea debido a su apoyo, sus enseñanzas, su motivación en mí, o simplemente por su cercana compañía. Desde profesores y compañeros, hasta amigos y familiares. Y en concreto, tengo que agradecer especial y profundamente a mis padres, ya que han sido la base fundamental sobre la que me he apoyado para poder crecer, aprender y llegar hasta aquí superarando grandes dificultades por el camino. Ismael Luna Zambrana Sevilla, 2018 16 Figura 3-18. Casos de uso del sistema. 53 Figura 3-19. Página ‘Lista de TFG/TFM’. 54 Figura 3-20. Página ‘Contacto’. 54 Figura 3-21. Página ‘Login’. 55 Figura 3-22. Página ‘¿Olvidaste Tu Contraseña?’. 55 Figura 3-23. Página ‘Espacio Administrador’. 56 Figura 3-24. Página ‘Modificar Perfiles’ de alumno (administrador). 57 Figura 3-25. Página ‘Modificar Perfiles’ de profesor (administrador). 57 Figura 3-26. Página ‘Modificar Perfil’ de profesor específico (administrador). 58 Figura 3-27. Página ‘Modificar Perfil’ de alumno específico (administrador). 58 Figura 3-28. Página ‘Modificar Perfil’ de alumno específico (administrador) - Continuación. 59 Figura 3-29. Página ‘Crear Tabla Tribunales’ (administrador). 59 Figura 3-30. Página ‘Crear Tabla Tribunales’ (administrador) - Continuación. 60 Figura 3-31. Página ‘Crear Tabla Tribunales’ (administrador) - Continuación 2. 60 Figura 3-32. Ventana ‘Tribunal’ de página ‘Crear Tabla Tribunales’ (administrador). 61 Figura 3-33. Ventana ‘Tribunal’ de página ‘Crear Tabla Tribunales’ (administrador) - Continuación. 62 Figura 3-34. Ventana ‘Convocatoria’ de ‘Tribunal’ de página ‘Crear Tabla Tribunales’ (administrador). 62 Figura 3-35. Ventana ‘Publicación Acto Defensa’ de ‘Tribunal’ de página ‘Crear Tabla Tribunales’ (administrador). 63 Figura 3-36. Ventana ‘Evaluación de la Defensa’ de ‘Tribunal’ de página ‘Crear Tabla Tribunales’ (administrador). 64 Figura 3-37. Ventana ‘Reserva’ de página ‘Crear Tabla Tribunales’ (administrador). 64 Figura 3-38. Página ‘Espacio Profesor’. 65 Figura 3-39. Página ‘Mi Perfil’ (profesor). 65 Figura 3-40. Página ‘Trabajos Asociados’ (profesor). 66 Figura 3-41. Página ‘Trabajo’ Específico (profesor). 66 Figura 3-42. Página ‘Trabajo’ de alumno específico (profesor) - Continuación. 67 Figura 3-43. Página ‘Trabajo’ de alumno específico (profesor) - Continuación 2. 68 Figura 3-44. Ventana ‘Ficha Tutor’ de página ‘Trabajo’ de alumno específico (profesor). 68 Figura 3-45. Ventana ‘Informe Tutor’ de página ‘Trabajo’ de alumno específico (profesor). 69 Figura 3-46. Página ‘Ver Tabla Tribunales’ (profesor). 69 Figura 3-47. Página ‘Ver Tabla Tribunales’ (profesor) - Continuación. 70 Figura 3-48. Ventana ‘Tribunal’ de página ‘Ver Tabla Tribunales’ (profesor). 70 Figura 3-49. Ventana ‘Tribunal’ de página ‘Ver Tabla Tribunales’ (profesor) - Continuación. 71 Figura 3-50. Ventana ‘Informe Tribunal’ de ‘Tribunal’ de página ‘Ver Tabla Tribunales’ (profesor). 71 Figura 3-51. Página ‘Ver Tabla Tribunales’ (profesor) - Continuación 2. 72 Figura 3-52. Página ‘Ver Tabla Tribunales’ (profesor) - Continuación 3. 72 Figura 3-53. Página ‘Espacio Alumno’. 73 Figura 3-54. Página ‘Mi Perfil’ (alumno). 73 Figura 3-55. Página ‘Mi Trabajo’ (alumno). 74 Figura 3-56. Página ‘Mi Trabajo’ (alumno) - Continuación. 74 Figura 3-57. Petición de contraseña de registro en página ‘Registro Alumno’. 76 Figura 3-58. Petición de contraseña de registro en página ‘Registro Profesor’. 76 Figura 3-59. Ejemplo de validación en el lado cliente en página ‘Registro Profesor’. 77 Figura 3-60. Ejemplo de validación en el lado servidor en página ‘Registro Profesor’. 78 Figura 3-61. Ejemplo de prepared statement. 78 Figura 4-1. Acceso a página ‘Registro Alumno’ desde página ‘Principal’. 81 Figura 4-2. Página ‘Registro Alumno’ con datos correctamente validados (lado cliente). 82 Figura 4-3. Página ‘Registro Alumno’ con datos correctamente validados (lado cliente) - Continuación. 82 Figura 4-4. Error de validación en lado servidor (usuario ya registrado) en página ‘Registro Alumno’. 83 Figura 4-5. Error de validación en lado servidor (contraseña de registro incorrecta) en página ‘Registro Alumno’. 83 Figura 4-6. Edición de página ‘Mi Perfil’ (alumno). 84 Figura 4-7. Cambiar contraseña en página ‘Mi Perfil’ (alumno). 84 Figura 4-8. Mensaje de éxito al editar en página ‘Mi Perfil’ (alumno). 85 Figura 4-9. Mensaje de error al editar en página ‘Mi Perfil’ (alumno). 85 Figura 4-10. Edición de página ‘Mi TFG’ (alumno). 86 Figura 4-11. Mensaje de éxito al editar en página ‘Mi TFG’ (alumno). 86 Figura 4-12. Sección ‘Material’ en página ‘Mi Perfil’ (alumno).. 87 Figura 4-13. Mensaje de éxito al subir archivo en sección ‘Material’ de página ‘Mi Perfil’ (alumno). 87 Figura 4-14. Mensaje de éxito al eliminar archivo en sección ‘Material’ de página ‘Mi Perfil’ (alumno). 87 Figura 4-15. Sección ‘Documentos’ de página ‘Mi Perfil’ (alumno) 88 Figura 4-16. Documento ‘Acuerdo de Tutela’ autogenerado. 88 Figura 4-17. Acceso a página ‘Registro Profesor’ desde página principal. 89 Figura 4-18. Página ‘Registro Profesor’. 89 Figura 4-19. Edición de página ‘Mi Perfil’ (profesor). 90 Figura 4-20. Lista de trabajos en página ‘Trabajos Asociados’. 90 Figura 4-21. Filtrado de lista de trabajos en página ‘Trabajos Asociados’. 91 Figura 4-22. Información de alumno no modificable en página ‘Trabajo’ de alumno específico (profesor). 91 Figura 4-23. Edición de página ‘Trabajo’ de alumno específico (profesor). 92 Figura 4-24. Sección ‘Material’ y sección ‘Documentos’ en página ‘Trabajo’ de alumno específico (profesor). 92 Figura 4-25. Ventana ‘Informe Tutor’ en página ‘Trabajo’ de alumno específico (profesor). 93 Figura 4-26. Documento ‘Informe Tutor’ autogenerado. 93 Figura 4-27. Error de texto excediendo el límite de espacio para el PDF en ventana ‘Informe Tutor’. 94 Figura 4-28. Datos almacenados en ventana ‘Informe Tutor’ de página ‘Trabajo’ de alumno específico (profesor). 94 Figura 4-29. Ventana ‘Ficha Tutor’ en página ‘Trabajo’ de alumno específico (profesor). 95 Figura 4-30. Documento ‘Ficha Tutor’ autogenerado 95 18 Figura 4-31. Tabla de tribunales con iniciales del profesor resaltadas en página ‘Ver Tabla Tribunales’. 96 Figura 4-32. Ventana ‘Tribunal’ con botones ‘Informe Tribunal’ habilitados. 96 Figura 4-33. Ventana ‘Informe Tribunal’ de ‘Tribunal’ en página ‘Ver Tabla Tribunales’. 97 Figura 4-34. Documento ‘Informe Tribunal’ autogenerado. 97 Figura 4-35. Contador de tribunales con nombre del profesor resaltado en página ‘Ver Tabla Tribunales’. 98 Figura 4-36. Lista de alumnos y trabajos de la página ‘Modificar Perfiles’ (administrador). 98 Figura 4-37. Mensaje de éxito al modificar datos de alumno en página ‘Trabajo’ de alumno específico (administrador) 99 Figura 4-38. Edición de datos de TFE en página ‘Trabajo’ de alumno específico (administrador). 99 Figura 4-39. Lista de profesores de la página ‘Modificar Perfiles’ (administrador). 100 Figura 4-40. Mensaje de éxito al modificar datos de profesor en página ‘Profesor’ específico (administrador). 100 Figura 4-41. Tabla modificable de tribunales en página ‘Crear Tabla Tribunales’ (administrador). 101 Figura 4-42. Creación de un tribunal con los datos mínimos en ventana ‘Tribunal’. 102 Figura 4-43. Mensaje de éxito al crear o modificar un tribunal. 102 Figura 4-44. Mensaje de error al crear o modificar un tribunal. 103 Figura 4-45. Creación de un tribunal con datos completos en ventana ‘Tribunal’. 104 Figura 4-46. Casillas de reserva en página ‘Crear Tabla Tribunal’. 104 Figura 4-47. Elección de profesores de reserva en ventana ‘Reserva’. 105 Figura 4-48. Mensaje de éxito al crear o modificar una reserva de tribunal. 105 Figura 4-49. Ventana ‘Publicación Acto Defensa’ en ventana ‘Tribunal’. 106 Figura 4-50. Documento ‘Publicación Acto Defensa’ autogenerado. 107 Figura 4-51. Mensaje de éxito al enviar por email el documento ‘Publicación Acto Defensa’. 107 Figura 4-52. Mensaje de error al enviar por email el documento ‘Publicación Acto Defensa’. 108 Figura 4-53. Email enviado con el documento adjunto ‘Publicación Acto Defensa’. 108 Figura 4-54. Ventana ‘Evaluación de la Defensa’ en ventana ‘Tribunal’. 109 Figura 4-55. Documento ‘Resumen’ autogenerado. 110 Figura 4-56. Documento ‘Acta Comisión Evaluadora’ autogenerado. 110 Figura 4-57. Documento ‘Informe Complementario’ autogenerado. 111 Figura 4-58. Acceso al botón ‘Convocatoria’ en ventana ‘Tribunal’. 111 Figura 4-59. Ventana ‘Convocatoria’ en ventana ‘Tribunal’. 112 Figura 4-60. Acceso a página registro profesor desde página principal. 113 Figura 4-61. Mensaje de éxito al enviar por email el documento ‘Publicación Acto Defensa’. 113 Figura 4-62. Email enviado con el documento adjunto ‘Publicación Convocatoria’. 114 Figura 4-63. Asignación de nota a presentación en ventana ‘Tribunal’. 115 Figura 4-64. Página ‘Lista TFG’ actualizada tras asignar nota. 115 Figura 7-1. Pestaña de EasyPHP DevServer en la barra de tareas. 121 Figura 7-2. Dashboard de EasyPHP DevServer en el navegador. 122 Figura 7-3. Dashboard de PHPMyAdmin en el navegador. 122 Figura 7-4. Ventana de conexión de hMailServer. 123 Figura 7-5. Ventana Inicial de hMailServer. 124 Figura 7-6. Pestaña ‘Domains’ de hMailServer 124 Figura 7-7. Pestaña ‘Accounts’ de hMailServer. 125 Figura 7-8. Pestaña ‘Status’ de hMailServer. 125 Figura 7-9. Líneas modificadas del archivo ‘php.ini’. 126 20 21 1 ANÁLISIS Y ESTUDIO n este primer apartado se realizará un análisis de la situación inicial y motivos por los que se ha decidido realizar el trabajo, así como un estudio para identificar cuáles son los pasos necesarios para alcanzar los objetivos que se plantean. 1.1 Motivaciones En la mayoría de tareas de un entorno empresarial o institucional se dan procesos repetitivos, que se repiten casi idénticamente con muy pocas variaciones y sin suponer ningún esfuerzo de atención o creativo para quien las realiza. En concreto, labores de administración, gestión de la documentación y atención al público pueden suponer una trabajo muy redundante (y tedioso) y pueden significar un coste o tiempo innecesario si se pudieran automatizar. De esa forma se podría liberar el tiempo del trabajador o usuario en otras tareas más productivas o creativas y, por tanto, más útiles para la organización o institución. Así, la finalidad principal de este trabajo es la mejora de la productividad y el ahorro de recursos en el proceso de gestión de trabajos de fin de estudios (en adelante TFE 1 ,) de un departamento universitario (en este caso, el Departamento de Organización Industrial y Gestión de Empresas II de la Universidad de Sevilla), facilitando las acciones tanto a profesores (ya sean tutores de trabajos o miembros de los tribunales de las defensas), como a alumnos, y como a miembros de la secretaría del departamento. Sería útil por tanto, buscar los procesos ineficientes que se usan actualmente, automatizarlos en la medida de lo posible y unificar la información para tener un acceso centralizado por parte de los usuarios. La motivación personal del autor de este proyecto se centra en garantizar que el esfuerzo realizado sea de utilidad y ayuda real a personas, facilitando sus tareas y suponiéndoles un ahorro de recursos. Asimismo, la capacidad de aprender sobre la creación de una solución tecnológica a medida para una institución o empresa se convierte en una finalidad por sí misma para el autor. 1 TFE engloba: trabajos de fin de grado (TFG), trabajos de fin de master (TFM) o proyectos finales de carrera (PFC). E “Un viaje de mil millas comienza con el primer paso”. - Lao-Tsé (filósofo chino) - Análisis y Estudio 22 1.2 Situación inicial Al inicio de este trabajo, el elevado número de trabajos de fin de estudios y tribunales para sus defensas qiue gestiona el Departamento de Organización Industrial y Gestión de Empresas II de la Universidad de Sevilla es lo requería de una mejora o cambio sustancial. El escenario del que partimos no contaba con ningún tipo de sistema tecnológico que centralizara las tareas necesarias, por tanto se requería un diseño completo de una plataforma de gestión. Los procesos se llevaban a cabo de una forma descentralizada según la cual cada participante perdía eficiencia en sus tareas. El proceso inicial de gestión de TFE y tribunalesse detalla a continuación. 1.2.1 Creación y modificación de la Hoja Tribunales Al empezar el año lectivo, un profesor encargado realiza una tabla de tribunales en un archivo Word donde recogen los profesores que serán miembros de tribunales y los que serán reserva durante el año. De esta tabla se pasa una copia a todos los profesores que son miembros de tribunales y a la secretaria del departamento, que es la que posteriormente se encargará de gestionar los actos de defensa de TFE que incorporará a cada tribunal, las reservas de aulas, las modificaciones por indisponibilidad de profesores o por falta o exceso de actos de defensa de TFE (si sucede alguno de estos casos, se tiene que pasar la nueva copia a todos los profesores), el aviso de recordatorio a cada profesor y la administración documental de informes y archivos. Esta modificación y asignación es un proceso que se va dando durante cada mes del año, para cada tribunal. Además cuando un alumno entrega su TFE finalizado en la Secretaría de la ETSI, ésta se encarga de generar un documento plantilla con datos generales del alumno y su trabajo que deberá rellenar la Secretaría del Departamento antes de cada defensa de TFE. Figura 1-1. Diagrama de procesos: Creación y modificación de tribunales. 23 23 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario 1.2.2 Acuerdo de tutela El primer paso por parte del alumno es que se le asigne su TFE (mediante la plataforma de la Secretaría de la ETSI). Tras ello, va al departamento para aceptar el acuerdo de tutela con el profesor asignado como tutor. En ese momento el tutor le da un archivo llamado “Acuerdo de Tutela” (que contiene además un archivo “Aclaraciones”) que debe rellenar a mano y firmar para poder comenzar su TFE bajo tutoría. Posteriormente el tutor envía la documentación a la secretaria del departamento para que conste que el alumno ha aceptado la tutela y ha comenzado su trabajo final. Figura 1-2. Diagrama de procesos: Acuerdo de tutela. 1.2.3 Entrega de TFE Finalizado el TFE de un alumno y tras ser revisado el trabajo con el tutor, se entrega en la Secretaría de la ETSI. Tras su tramitación, la Secretaría de la ETSI envía un archivo a la Secretaría del departamento (véase también en la figura 1-1) que contiene varias páginas con algunos datos rellenos del alumno y su trabajo que se separan para propósitos distintos. “Ficha de Tutor”, “Informe de Tribunal”, “Publicación de Acto de Defensa” y tres documentos para la Evaluación durante la defensa por parte de los miembros del tribunal (“Resumen”, “Acta de Comisión Evaluadora” e “Informe Complementario”). Así, la secretaria del departamento se encarga de cumplimentar algunos de estos archivos con datos de los tribunales, del acto de defensa, de los profesores y del alumno, y posteriormente los remite a sus destinatarios. “Ficha de tutor” al tutor para que rellene su apreciación acerca del trabajo antes de la defensa. “Publicación de Acto de Defensa” para exponer los datos de esa presentación en concreto e informar a sus participantes. “Informe de Tribunal” y los documentos para la Análisis y Estudio 24 Evaluación a los miembros del Tribunal. El primero para que cada profesor del tribunal también evalúe que el trabajo puede ser defendido. Y el segundo, un documento destinado al desarrollo del acto de defensa donde se indica la evaluación y la nota propuesta. A parte de estos documentos, el departamento cuenta internamente con los archivos “Informe de Tutor” y “Convocatoria”. El primero que es similar al de “Ficha de Tutor” antes nombrado pero que se archiva internamente en el departamento. Y el segundo para almacenar los datos de cada tribunal de defensa e informar del acto de defensa a todos sus participantes. Figura 1-3. Diagrama de procesos: Entrega de TFE. 1.2.4 Evaluación y archivo Tras finalizar la defensa, se obtienen de nuevo en la secretaría del departamento los documentos correspondientes al archivo GORG que fue recibido desde la secretaría de la ETSI pero ya rellenos. De esa forma, se obtiene la evaluación y los informes que se almacenan en el departamento en un archivo Word, y se vuelven a remitir a la Secretaría de la ETSI para que se archive y actualice el expediente. 25 25 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 1-4. Diagrama de Procesos: Evaluación y archivo. 1.3 Objetivos y mejora Se pretende conseguir una plataforma web que englobe todos los procesos relacionados con la gestión de trabajos fin de estudio en un mismo lugar, así como que estas tareas se puedan realizar de una forma más eficiente y que haya un historial de trabajos y tribunales en una base de datos centralizada a la que puedan acceder todos los partícipes. Y que todo esto se realice de una forma segura. Los requisitos técnicos generales de la plataforma son los siguientes:  Interfaz fácil de usar, sencilla, amigable para el usuario y eficiente.  Adaptabilidad a cualquier dispositivo (ordenador de sobremesa, portátil, móvil o tablet) y acceso desde cualquier navegador web.  Capacidad de adaptación futura a nuevas tecnologías y portabilidad.  Desarrollo sobre tecnologías más extendidas y con más información disponible (PHP, MySQL y Apache) para facilitar el mantenimiento y soporte. 1.4 Agentes del sistema El sistema se puede estructurar en tres partes diferenciadas:  Clientes. Cualquier navegador de cualquier dispositivo al que se accede mediante Internet y usado por los usuarios finales (profesores, secretarios, alumnos o cualquier individuo externo).  Servidor web. Servicio web Apache con motor PHP. Su principal función es coordinar el acceso y las sesiones de usuarios, así como la realización de las operaciones básicas en la base de datos (crear, leer, actualizar y borrar registros) relacionadas con los usuarios, la creación de tribunales y la gestión de los documentos necesarios. El servicio web se explicará más a fondo en el capítulo (3.2). Tecnologías y Herramientas 32 Figura 2-3. Logo gráfico de CSS. 2.1.4 JavaScript JavaScript [3] [9] es un lenguaje de programación interpretado, imperativo, basado en prototipos, débilmente tipado y dinámico, basado en la especificación de ECMAScript. Su uso fundamental se da en el lado del cliente (client-side) interpretándose en un navegador web mientras que las sentencias van descargándose junto con el código HTML. Posibilita operaciones dinámicas y mejora la usabilidad para el usuario de las páginas web. Sin embargo, también existe una forma de JavaScript en el lado del servidor (server-side JavaScript o SSJS) y un uso en otro tipo de aplicaciones, como por ejemplo en documentos PDF y en aplicaciones de escritorio. Todos los navegadores modernos pueden interpretar el código JavaScript que se encuentra en las páginas web. JavaScript se fundamenta en el DOM 3 (Document Object Model) para realizar sus operaciones, ya que es mediante el acceso a los objetos o elementos definidos por éste donde se realizan las operaciones y modificaciones que alteran la estructura, contenido o estilo de los documentos. De igual forma, se suele usar para recibir y enviar información del servidor con la ayuda de otras tecnologías como AJAX (véase apartado 2.1.6). Se puede obtener más información práctica en línea en tutoriales y ejemplos de la bibliografía [6] [7]. 3 El DOM es un modelo a través del cual se combinan un conjunto de objetos para representar documentos HTML y XML, y que facilita una interfaz estándar para acceder a ellos y manipularlos. 33 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 2-4. Logo gráfico de JavaScript. 2.1.5 Bootstrap Bootstrap [6] [7] es un conjunto de herramientas de código abierto para desarrollar con HTML, CSS y JavaScript. Permite crear proyectos responsive adaptables a todos los dispositivos con una biblioteca de componentes de front-end, y realizar rápidamente un prototipo o construir una aplicación completa. El diseño web responsive consiste en la creación de sitios web que adaptan su estilo y estructura automáticamente en función del dispositivo y el tamaño de la pantalla en el que se estén mostrando. Por ejemplo, permite mostrar unos estilos en un navegador de un móvil pequeño y otros en un navegador de un ordenador de gran tamaño. Sus plantillas de diseño para HTML y clases CSS facilitan la creación y uso de formularios, botones, tablas, elementos de navegación, modales, carruseles de imágenes y muchos otros, así como complementos opcionales de JavaScript. Bootstrap usa un formato de cuadrillas de columnas y filas que permiten ajustar las dimensiones de los elementos de una forma intuitiva. Dispone de cuatro variaciones para hacer uso de diferentes tipos de dispositivos y resoluciones: ordenadores con baja y alta resolución, tabletas, formato retrato/paisaje y teléfonos móviles. Para usar Bootstrap en una página HTML, sólo se debe referenciar la hoja de estilo de Bootstrap al archivo HTML. Y para utilizar los componentes de JavaScript, éstos deben estar vinculados junto con la librería jQuery en el documento HTML. Todos los navegadores modernos (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, y Opera) presentan compatibilidad con esta herramienta. Figura 2-5. Logo gráfico de Bootstrap. Tecnologías y Herramientas 34 2.1.6 AJAX AJAX [6] [7], acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una tecnología que permite actualizar una página sin recargarla de nuevo completamente, mediante la comunicación en segundo plano y de forma asíncrona con el servidor. Se ejecuta en el cliente, es decir, en el navegador, y mientras los usuarios van interactuando con la página, se van produciendo comunicaciones asíncronas adicionales a la principal que no afectan ni interfieren con el comportamiento ni la visualización de la página. De esta forma se mejoran la usabilidad, interactividad y velocidad en las aplicaciones. Dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM), es compatible con múltiples navegadores, sistemas operativos y plataformas. Las funciones de llamada de AJAX se realizan habitualmente desde un código JavaScript. Y el acceso a los datos se efectúa a través del objeto XMLHttpRequest. A pesar de su nombre, no es necesario que los datos asíncronos estén formateados en XML. Para este caso concreto se usará formateado JSON (véase apartado 2.1.7). Figura 2-6. Logo gráfico de AJAX. 2.1.7 JSON JSON [4] [6] [7] (JavaScript Object Notation) es un formato y estándar para el intercambio de información basado en texto plano. Se emplea en muchos sistemas que precisan mostrar o enviar información para ser interpretada por otros sistemas. Al ser un formato que es independiente de cualquier lenguaje de programación, la ventaja de JSON es que los servicios que comparten información mediante este método no requieren la utilización o aplicación del mismo lenguaje de programación. De tal modo, el emisor puede ser JavaScript y el receptor PHP; cada lenguaje tiene su propia librería para codificar y decodificar cadenas de JSON. La sencillez con la que se puede usar y manejar, y el extendido uso entre los programadores, en comparación con otros estándares, son un buen incentivo para su utilización en este proyecto. 35 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 2-7. Logo gráfico de JSON. 2.1.8 Apache (HTTP Server) Apache [14] es un servidor web que implementa el protocolo HTTP/1.1. Es de código abierto y multiplataforma (Microsoft Windows, Unix, Macintosh, etc.), y permite servir un sitio web. Es usado fundamentalmente para enviar páginas web estáticas y dinámicas en Internet. Dispone de una amplia aceptación, ya que es el servidor HTTP más empleado desde 1996. Por este motivo es realmente sencillo conseguir ayuda y soporte relacionado. Además, es modular y extensible, ya que permite añadir funcionalidades y características configurables. Por ejemplo, negociado de contenido y bases de datos de autenticación. Para nuestro caso, y siguiendo la norma general, se utiliza una versión local de Apache con el fin de probar y previsualizar código mientras éste es desarrollado, y posteriormente se sube el código de la aplicación web a un servidor real en funcionamiento. Se ha usado para esto el programa servidor local EasyPHP DevServer, que incluye también la base de datos MySQL. Y posteriormente se ha subido el código de la web a un servidor externo real ya en uso por el departamento. Figura 2-8. Logo gráfico de Apache. 2.1.9 MySQL (Base de datos) MySQL [2] [3] [10] es un sistema de gestión de bases de datos relacional que dispone de licencia dual (Licencia pública general/Licencia comercial) desarrollado por Oracle Corporation. Este gestor es multihilo y multiusuario, lo que le permite realizar varias consultas a la vez y ser utilizado por varios usuarios al mismo tiempo, lo que lo hace sumamente funcional. Se considera el sistema de base de datos de código abierto más usado y con más aceptación del mundo. Tecnologías y Herramientas 36 En este caso se ha optado por MySQL como opción de almacenamiento de todos los datos de la plataforma, lo que significa que se utilizará con el propósito de guardar la información relacionada con usuarios, tribunales y documentos, así como de acceder a la propia información. Las principales causas de su elección son su alta popularidad y soporte técnico y su facilidad para gestionarla mediante herramientas como el servidor para desarrollo EasyPHP DevServer junto con PHPMyAdmin. Este último módulo está incluido en el servidor como una forma gráfica y visualmente más clara para manejar la base de datos. Figura 2-9. Logo gráfico de MySQL. 2.2 Herramientas 2.2.1 EasyPHP DevServer DevServer [15] es un entorno de desarrollo completo y listo para su rápido uso. Es portátil, modular, totalmente configurable, fácil de actualizar y ampliar. Permite un entorno de desarrollo completamente personalizable que se ajusta a un servidor de producción y a sus necesidades y ayuda a codificar correctamente. Se puede actualizar y expandir el entorno con módulos: PHPMyAdmin (interfaz para la gestión de la base de datos), Virtual Hosts Manager, Xdebug Manager, entre otros. Y también componentes: PHP, Apache, MySQL, Nginx, etc. Figura 2-10. Logo gráfico de EasyPHP DevServer. 37 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario 2.2.2 hMailServer El servidor de correo hMailServer [16] es un servidor gratuito y libre, diseñado para usarse en Microsoft Windows. Se ha elegido por su fácil uso y configuración y por la disponibilidad de información y manuales. Así, nos servirá para hacer las pruebas de envíos automáticos de email con los documentos necesarios. 2.2.3 Sublime Text Sublime Text [17] es un editor de texto y código fuente que está desarrollado en Python y C++. A pesar de no ser software libre o de código abierto y de que se debe obtener una licencia para su uso continuo y prolongado, se puede descargar y evaluar de forma gratuita, siendo la versión de evaluación plenamente funcional. Adicionalmente, no cuenta con fecha límite de uso. Las mayores ventajas y características de esta herramienta (a parte de su interfaz simple, sencilla e intuitiva, y su facilidad de uso) son múltiples:  Minimapa: una previsualización de la estructura del código, es muy útil para desplazarse por el archivo cuando se conoce bien la estructura de este.  Multi-Selección: selección múltiple de un término por diferentes partes del archivo.  Multi-Cursor: Crea cursores con los que se puede escribir texto de forma arbitraria en diferentes posiciones del archivo.  Multi-Layout: Dispone siete configuraciones de plantilla y se puede elegir editar en una sola ventana o hacer una división de hasta cuatro ventanas verticales o cuatro ventanas en cuadrícula.  Soporte nativo para infinidad de lenguajes: Soporta de forma nativa 43 lenguajes de programación y texto plano.  Syntax Highlight configurable: El remarcado de sintaxis es completamente configurable a través de archivos de configuración del usuario.  Búsqueda Dinámica: Se puede hacer búsqueda de expresiones regulares o por archivos, proyectos, directorios, una conjunción de ellos o todo a la vez.  Auto completado y marcado de llaves: Se puede ir a la llave que cierra o abre un bloque de una forma sencilla.  Soporte de Snippets y Plugins: Los snippets son similares a las macros o los bundles además de la existencia de multitud de plugins.  Configuración total de Keybindings: Todas las teclas pueden ser sobrescritas a gusto del usuario.  Acceso rápido a línea o archivo.  Paleta de Comandos: Un intérprete de Python diseñado solo para el programa con el cual se puede realizar infinidad de tareas.  Coloreado y envoltura de sintaxis: Si se escribe en un lenguaje de programación o marcado, resalta las expresiones propias de la sintaxis de ese lenguaje para facilitar su lectura.  Resaltado de paréntesis e indentación. Tecnologías y Herramientas 38 Figura 2-11. Logo gráfico de SublimeText. 39 3 IMPLEMENTACIÓN ras la realización de un análisis y estudio, y la elección las tecnologías y herramientas adecuadas, a continuación se expone cómo se ha realizado el diseño y la implementación del sistema de gestión de TFE. 3.1 Base de datos Se ha estructurado la base de datos en tres grandes pilares relacionados entre sí. Estos son:  Usuarios del sistema, definidos como las tablas independientes: profesores, alumnos y admin. Cada uno cuenta con un rol diferente en la web.  Trabajos, que pertenecen a un alumno en concreto.  Tribunales, formado por varios profesores y varias presentaciones de los trabajos. El resto de tablas sirven para aportar información a las anteriores. En la figura (3-1) se puede observar el modelo entidad-relación de la base de datos completa. T “La visión sin acción es un sueño. Acción sin visión es simplemente pasar el tiempo. Acción con visión es hacer una diferencia positiva”. - Jack Welch (empresario y escritor estadounidense) - Implementación 40 Figura 3-1. Base de datos: Modelo entidad-relación. 41 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario 3.1.1 Tablas Las tablas de la base de datos son las siguientes:  admin. Sólo contendrá los datos de login: el correo y la contraseña del administrador  alumnos. Contiene los datos del usuario alumno: correo y contraseña, nombre y apellidos, teléfono, dni y fecha de registro.  profesores. Contiene los datos del usuario profesor: correo y contraseña, nombre y apellidos, iniciales, teléfono, fecha de registro, y la categoría a la que pertenece.  categorias. Recoge las diferentes categorías a las que puede pertenecer un profesor. Figura 3-2. Contenido predefinido de tabla ‘categorías’.  reservas. Guarda el id de 4 profesores de reserva, así como el año y el número de reserva (1 o 2, correspondiente a la primera mitad del año o a la segunda)  trabajos. Tendrá un título, un tipo de trabajo (identificador que relaciona con la tabla tipos_trabajo), un alumno (identificador que relaciona con la tabla alumno), una titulación (identificador a su tabla), tutor (id), un resumen del trabajo, 4 direcciones donde se enlazarán 4 archivos de material, fechas de inicio y de defensa, el número de trabajo asignado, enlaces a tablas que contiene información sobre el informe del tutor y la ficha del tutor, un campo para saber si es confidencial o no, la hora de la defensa, la nota numérica y la nota en texto (id) y el estado en el que se encuentra el proyecto (id), fechas de adjudicación, entrega, comunicación, retirada y publicación.  tipos_trabajo. Contiene los nombres de los tipos de trabajo existentes. Implementación 48 Figura 3-12. Contenido del directorio ‘scripts’.  ‘uploads’. Contendrá los archivos subidos de cada trabajo, referenciados mediante un directorio con nombre igual al correo del alumno.  ‘users’. Contiene las páginas en php específicas a cada perfil de usuario (alumno, profesor y admin). 49 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-13. Contenido del directorio ‘users’. Figura 3-14. Contenido del directorio ‘users’ - Continuación. Implementación 50  ‘validacion’. Contiene los archivos usados para validar en la parte servidor con php. Figura 3-15. Contenido del directorio ‘validacion’. El resto de archivos son las páginas generales en php que no pertenecen a ningún perfil de usuario de la plataforma. De esta forma, a partir de la figura (3-9) de la organización de las páginas de la plataforma y el listado de archivos de la figura (3-10), se puede hacer una estructuración de estos archivos en función de las relaciones que tienen entre sí en las diferentes páginas, como se ve en la figura (3-16). 51 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-16. Relación de archivos en las diferentes páginas. Implementación 52 La mayoría de archivos principales, además de reunir dentro los archivos que aparecen en la figura (3-16), están formados de otros archivos que contienen las partes que le dan estructura general a la página, como la cabecera (que a su vez incluye el fichero de estilos), el menu o el footer, y de un archivo que contiene los datos para acceder a la base de datos. No se han introducido en la figura anterior para simplificar. Igualmente, los archivos de procesamiento de formularios contienen otros ficheros para la validación de los formularios y el manejo de errores. Esto se muestra en la figura (3-17). Figura 3-17. Relación de archivos en archivos principales y archivos de procesamiento de formularios. 3.2.1 Usuarios y acciones En cuanto a acciones de cada usuario se puede ver el funcionamiento en los casos de uso de la figura (3-18). 53 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-18. Casos de uso del sistema. En relación al perfil público, cualquier usuario puede ver la lista de tfg terminados en el departamento (aparecen en esta lista cuando el estado del trabajo cambia a ‘Finalizado’ una vez que se le asigna una nota), así como la página de contacto. Sendas páginas se pueden ver en la figura (3-19) y (3-20) respectivamente. Implementación 54 Figura 3-19. Página ‘Lista de TFG/TFM’. Figura 3-20. Página ‘Contacto’. Sin embargo, en el perfil privado se puede usar la plataforma con tres perfiles diferentes a los que se acceden mediante un primer registro o mediante login (figura 3-21). 55 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-21. Página ‘Login’. Como dato a añadir, los usuarios pueden obtener una nueva contraseña en su correo si han olvidado o perdido la suya. Desde el login, clicando en ‘¿Olvidaste tu contraseña?’ y escribiendo el correo de acceso (figura 3-22). Este debe ser válido y estar registrado para que se envíe la nueva contraseña (en caso contrario, mostrará un error), que posteriormente se podrá modificar en el perfil. Figura 3-22. Página ‘¿Olvidaste Tu Contraseña?’. A continuación, detallaremos los diferentes perfiles. Implementación 56 3.2.1.1 Administrador Al hacer login como administrador se llega al menú del espacio administrador de la figura (3-23). En la barra superior aparece un botón para cerrar la sesión y otro que al clicarlo te devuelve a este menú principal, lo que le da utilidad cuando se navega dentro de otras páginas. Otra forma de volver atrás posteriormente es bajar hasta la esquina inferior derecha en la página correspondiente en la que aparecerá un botón que te permite volver a la página previa en cada sección. Figura 3-23. Página ‘Espacio Administrador’. Al hacer clic en la primera opción del menú, ‘Modificar Perfiles’, dirige a una página en la que se puede alternar mediante un botón entre una lista con todos los profesores (figura 3-24) o una lista con todos los alumnos registrados (figura 3-25). En cada lista se puede filtrar el contenido que se quiere que aparezca, en el caso de que se esté buscando alguno en concreto. 57 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-24. Página ‘Modificar Perfiles’ de alumno (administrador). Figura 3-25. Página ‘Modificar Perfiles’ de profesor (administrador). Al presionar el botón ‘Ver’ de cada alumno o profesor te lleva a la página modificable de detalles de cada uno. Se puede ver en la figura (3-26) en caso de ser profesor y en las figuras (3-27) y (3-28) en caso de ser alumno. Implementación 64 Figura 3-36. Ventana ‘Evaluación de la Defensa’ de ‘Tribunal’ de página ‘Crear Tabla Tribunales’ (administrador). Nos queda por comentar la ventana de reservas en la parte inferior de la tabla de tribunales, que lo único que contiene son 4 campos desplegables para elegir los 4 profesores en orden que serán reserva (figura 3-37). Figura 3-37. Ventana ‘Reserva’ de página ‘Crear Tabla Tribunales’ (administrador). 3.2.1.2 Profesor Al entrar en la plataforma como profesor llegamos al menú del espacio profesor (figura 3-38). Las opciones son ‘Mi Perfil’, ‘Trabajos Asociados’ y ‘Ver Tabla de Tribunales’. 65 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-38. Página ‘Espacio Profesor’. La primera es simplemente para ver y modificar los datos personales propios (figura 3-39). Figura 3-39. Página ‘Mi Perfil’ (profesor). La segunda lleva a una lista con todos los alumnos con sus respectivos trabajos que el profesor mantiene o ha mantenido bajo tutoría (figura 3-40). Se detalla el autor, tipo del trabajo, título del trabajo, fecha de inicio (que es igual a la fecha de registro en la plataforma, fecha de defensa, así como el estado actual del TFE. Implementación 66 Figura 3-40. Página ‘Trabajos Asociados’ (profesor). Al hacer clic en ‘Ver’ podemos entrar en los detalles de cada trabajo. En una primera parte podemos ver los datos del alumno (figura 3-41). Figura 3-41. Página ‘Trabajo’ Específico (profesor). En una segunda parte podemos ver y modificar los datos del trabajo: estado, nota, número de trabajo, confidencialidad, fecha de defensa e inicio, título, tipo, resumen, titulación del alumno y tutor (figura 3-42). 67 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-42. Página ‘Trabajo’ de alumno específico (profesor) - Continuación. En la tercera parte hay 4 espacios para subir el material del trabajo, como pdf o cualquier archivo relacionado al TFE (figura 3-43). De este apartado dispone igual el alumno en su perfil, que puede cargar los archivos igualmente. De esta forma quedan subidos tras su defensa y en este momento el alumno ya no puede modificarlo; sólo el tutor. En la última parte obtenemos documentos relacionados con la tutoría y con el informe y la ficha del tutor (figura 3-43). El primero es un documento que contiene simples aclaraciones para el alumno en PDF. El segundo, ‘Acuerdo de Tutela’ es un documento que debe rellenar el alumno con sus datos. En la plataforma se dispone de la plantilla en PDF o de la opción de autorrellenarlo. Por último, tanto ‘Informe del Tutor’ como ‘Ficha del Tutor’ disponen de su plantilla PDF o de una ventana para rellenar directamente en la plataforma (figura 3-44 y figura 3-45). Estas ventanas disponen de campos de texto que rellenarán directamente el PDF en su espacio determinado. Para ello, los campos cuentan con un contador de líneas para evitar que se escriba sobrepasando el espacio disponible en el documento. Se puede ver el resultado pulsando sobre ‘Autorellenar PDF’. Implementación 68 Figura 3-43. Página ‘Trabajo’ de alumno específico (profesor) - Continuación 2. Figura 3-44. Ventana ‘Ficha Tutor’ de página ‘Trabajo’ de alumno específico (profesor). 69 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-45. Ventana ‘Informe Tutor’ de página ‘Trabajo’ de alumno específico (profesor). La última sección del menú profesor de la figura (3-38) es ‘Ver Tabla de Tribunales’. La tabla es la misma que la que crea el administrador en su perfil. De este modo, cada profesor puede ver los tribunales en los que ha sido asignado, pero no puede modificar la tabla. Cuando un profesor va a participar en un tribunal o una reserva, aparecen resaltadas con color sus iniciales para que le resulte visualmente más fácil saber dónde tiene grado de actuación (figura 3-46 y figura 3-47). Figura 3-46. Página ‘Ver Tabla Tribunales’ (profesor). Implementación 70 Figura 3-47. Página ‘Ver Tabla Tribunales’ (profesor) - Continuación. Al entrar en un tribunal creado clicando sobre el botón con el símbolo ‘+’ accedemos a una ventana similar a la que se mostraba para el administrador, pero con ligeros cambios (figura 3-48 y figura 3-49). Además de que el profesor no puede modificar el tribunal, hay cambios como que sólo hay un botón disponible. Este es ‘Informe Tribunal’ (a diferencia de ‘Publicación Acto Defensa’, ‘Evaluación Defensa’ y ‘Convocatoria’ que eran los que disponía el administrador para generar dichos documentos) que sólo aparece activo si el profesor de la cuenta abierta pertenece a este tribunal. Si abre un tribunal al que no pertenece no podrá usar este botón. Al usar este botón aparece una ventana con funcionamiento similar a las de ‘Informe Tutor’ y ‘Ficha Tutor’ de cada trabajo asociado (figura 3-50). Pero en este caso el profesor actúa como miembro del tribunal de otros trabajos de los que no es tutor. En la ventana, el profesor puede escribir el texto con el que valora que el trabajo es apto para pasar a su presentación y defensa. Cuenta con un contador que se va actualizando mientras se escribe para evitar que se exceda el límite del documento. Y dispone de la opción de descargar la plantilla vacía en PDF o Word para rellenar manualmente si se considera oportuno. Figura 3-48. Ventana ‘Tribunal’ de página ‘Ver Tabla Tribunales’ (profesor). 71 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 3-49. Ventana ‘Tribunal’ de página ‘Ver Tabla Tribunales’ (profesor) - Continuación. Figura 3-50. Ventana ‘Informe Tribunal’ de ‘Tribunal’ de página ‘Ver Tabla Tribunales’ (profesor). Como en el perfil de administrador, bajo la tabla de tribunales el profesor cuenta también con un contador de tribunales, presentaciones y reservas donde puede ir observando su participación y la de los demás profesores. Aquí aparece resaltado su nombre para que sea más claro y directo visualmente obtener la información (figura 3-51 y figura 3-52). Implementación 72 Figura 3-51. Página ‘Ver Tabla Tribunales’ (profesor) - Continuación 2. Figura 3-52. Página ‘Ver Tabla Tribunales’ (profesor) - Continuación 3. 3.2.1.3 Alumno Por último, cuando es un alumno el que hace login, se accede a su menú del espacio alumno, que es el que tiene unas funciones más simples (figura 3-53). Consta de ‘Mi Perfil’ para modificar y ver los datos personales (figura 3-54) y de ‘Mi Trabajo’ para modificar y ver los datos referentes a su TFE (figura 3-55 y figura 3-56). Desde esta última sección puede también subir el material de su TFE como en la parte de cada trabajo asociado del perfil profesor. Cuando el estado del trabajo sea ‘Finalizado’ ya no podrá cambiar el material el alumno. Y en añadido, dispone de los documentos ‘Aclaraciones’ y ‘Acuerdo de Tutela’ que se podrá autogenerar para sólo firmar. Estos mismos documentos también pueden ser facilitados por el tutor desde su 73 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario perfil profesor si fuera necesario. Figura 3-53. Página ‘Espacio Alumno’. Figura 3-54. Página ‘Mi Perfil’ (alumno). 81 4 PRUEBAS “Los resultados negativos son justo lo que quiero. Son tan valiosos para mí como los resultados positivos. No puedo encontrar lo que funciona mejor hasta que encuentro lo que no funciona”. - Thomas Alva Edison (inventor y empresario estadounidense) - n este capítulo se analizará la marcha de la plataforma ya construida y en funcionamiento. Lo que se intentará es abordar todas las acciones que puede ejecutar cada usuario y probar que se realizan correctamente. Obviamente se requiere una fase de testing continua y exhaustiva para limar todos los detalles y errores, pero por limitaciones temporales, se harán una serie de pruebas genéricas que engloben la mayoría de los casos a los que se enfrentará la plataforma. Un refuerzo y continuación de estas pruebas desde el momento de inicio de utilización de la plataforma en el que se comenzará a obtener un feedback de uso real sería bastante conveniente. A continuación, se realizarán una serie de pruebas para cada tipo de usuario. 4.1 Alumno 4.1.1 Registro de datos de alumno y trabajo Desde la página principal, clicamos en el menú en la opción ‘Registrarte’ y elegimos ‘Alumno’. Figura 4-1. Acceso a página ‘Registro Alumno’ desde página ‘Principal’. E Pruebas 82 Ahora accedemos al formulario que se debe rellenar para hacer el registro. Tras rellenar los datos correctamente tanto de ‘Información Personal’ como de la ‘Información TFG/TFM’ aparecerán los campos en verde y se podrá hacer clic en ‘Guardar’ (figura 4-2 y figura 4-3). Los campos son: contraseña de registro, nombre, apellidos, correo (login), contraseña, repetir contraseña, teléfono, tipo de trabajo (a elegir de una ventana desplegable), título de trabajo, resumen de trabajo (opcional), titulación (ventana desplegable) y tutor (ventana desplegable). Figura 4-2. Página ‘Registro Alumno’ con datos correctamente validados (lado cliente). Figura 4-3. Página ‘Registro Alumno’ con datos correctamente validados (lado cliente) - Continuación. Al pulsar en Guardar pueden suceder dos cosas. Si la cumplimentación es correcta el sistema te redirige a la 83 83 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario página de ‘Espacio Alumno’. Y si ha habido algún error, será mostrado en esta misma página de registro, ya sea manejado en el lado cliente o en el lado servidor. Además, en lado servidor también se comprueba si el usuario ya está registrado con ese mismo login (correo), y si no lo está aparecerá un error como el de la figura (4-4). Y si la contraseña de registro es incorrecta mostrará un error como el de la figura (4-5). Figura 4-4. Error de validación en lado servidor (usuario ya registrado) en página ‘Registro Alumno’. Figura 4-5. Error de validación en lado servidor (contraseña de registro incorrecta) en página ‘Registro Alumno’. 4.1.2 Modificación de datos de alumno Una vez dentro de la plataforma, ya sea justo tras registrarse o accediendo posteriormente a través del login, el usuario se encuentra ante el menú del espacio alumno (figura 3-53) y se elige la opción ‘Mi Perfil’. Se pulsa en ‘Editar’ para que se habilite la edición de los campos. Esta función se usa para evitar que se modifiquen los datos involuntariamente. Como vemos se habilitan todos los campos menos el de correo y el de contraseña (figura 4-6). El de correo no se puede modificar por el alumno porque es su login, lo cual cambiaría los datos de su propio acceso. Sin embargo, si se necesitara cambiar, el administrador puede hacerlo desde su perfil. En cambio, la contraseña si se puede modificar haciendo clic sobre ‘Crear Nueva Contraseña’. En ese momento se desplegarán dos campos vacíos: el de la nueva contraseña y el de repetición de ésta para evitar fallos al escribirla (figura 4-7). Si se decide no cambiarla, no hay problema. Se pulsa en ‘Cancelar’, que hace que se cierren estos campos y aparezca la contraseña anterior. Pruebas 84 Figura 4-6. Edición de página ‘Mi Perfil’ (alumno). Figura 4-7. Cambiar contraseña en página ‘Mi Perfil’ (alumno). Si los datos se modifican (por ejemplo, cambiando la última letra de los apellidos, el último carácter del dni y el último número de teléfono) y se guardan correctamente, aparecerá un mensaje de éxito (figura 4-8). Y se se produce algún error (por ejemplo, haciendo que el dni tenga menos de 6 caracteres) aparecerá un mensaje de error (figura 4-9). 85 85 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 4-8. Mensaje de éxito al editar en página ‘Mi Perfil’ (alumno). Figura 4-9. Mensaje de error al editar en página ‘Mi Perfil’ (alumno). 4.1.3 Modificación de datos de trabajo y obtención de documentos Desde el menú del espacio alumno, elegimos ‘Mi Trabajo’. Esta página dispone de tres secciones: una para modificar los datos del trabajo, otra para introducir material y una última para obtener dos documentos relativos a la tutoría del trabajo. En la primera se pueden modificar los datos pulsando antes en ‘Editar’ (figura 4-10). Se observa que los campos de abajo no son modificables por el alumno, ya que son datos relativos al proceso del tutor o del administrador, que sólo serán informativos para el alumno como son: número de identificación del trabajo, la confidencialidad del mismo, la fecha de inicio y la de defensa, el estado en el que se encuentra el trabajo y la nota asignada tras su defensa (numérica y en texto). Sin embargo, se pueden modificar los campos de arriba (por ejemplo, cambiando el tipo de trabajo y añadiendo un resumen.) y se advierte si se modifica con éxito o no como en el caso anterior (figura 4-11). Pruebas 86 Figura 4-10. Edición de página ‘Mi TFG’ (alumno). Figura 4-11. Mensaje de éxito al editar en página ‘Mi TFG’ (alumno). En la segunda, se puede introducir material en cuatro campos diferentes (figura 4-12). Se hace clic en ‘Examinar’ y se elige el archivo desde el propio dispositivo. Tras esto se puede cambiar de selección, borrar la selección en el botón ‘Reset’ o subir el archivo en el botón ‘Subir’. Al subir un archivo, este aparece en un icono encima del campo con su nombre y quedará guardado en la base de datos (figura 4-13). 87 87 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 4-12. Sección ‘Material’ en página ‘Mi Perfil’ (alumno).. Figura 4-13. Mensaje de éxito al subir archivo en sección ‘Material’ de página ‘Mi Perfil’ (alumno). Si se pretende borrar un archivo, solo hay que pulsar el botón ‘Subir’ con el campo ‘Examinar’ vacío (figura 4- 14). Figura 4-14. Mensaje de éxito al eliminar archivo en sección ‘Material’ de página ‘Mi Perfil’ (alumno). La última sección contiene los archivos PDF correspondientes a la tutoría del alumno (figura 4-15). El primero es un conjunto de aclaraciones que se puede descargar. Y el segundo es un documento que se tendrá que Pruebas 88 rellenar y será entregado al tutor firmado. En este caso, se dispone de la opción autorrellenar, que introduce los datos del trabajo y alumno directamente en el documento (menos la firma) (figura 4-16). Figura 4-15. Sección ‘Documentos’ de página ‘Mi Perfil’ (alumno) Figura 4-16. Documento ‘Acuerdo de Tutela’ autogenerado. 4.2 Profesor 4.2.1 Registro de datos de profesor Desde la página principal, clicamos en el menú en la opción ‘Registrarte’ y elegimos ‘Profesor’ (figura 4-17). 89 89 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 4-17. Acceso a página ‘Registro Profesor’ desde página principal. El proceso es idéntico al registro alumno (ver capítulo 4.1.1). La única diferencia son los campos, ya que ahora no hay campos de trabajo, y se añaden los campos: iniciales (que se usarán en la tabla de tribunales y en algún documento) y la categoría del profesor. Igualmente se mostrarán mensajes de error en caso de que ocurran, o accederá al espacio profesor tras el registro con éxito. Figura 4-18. Página ‘Registro Profesor’. 4.2.2 Modificación de datos de profesor Accediendo a ‘Mi Perfil’ (figura 4-19) se pueden modificar los datos del profesor de la misma manera que ocurría con el alumno en el capítulo (4.1.2). Así, al modificar aparecerán mensajes de éxito o error según proceda. Pruebas 96 Figura 4-31. Tabla de tribunales con iniciales del profesor resaltadas en página ‘Ver Tabla Tribunales’. Podrá ver todos los tribunales para ver la información correspondiente pulsando en el botón ‘+’, pero solo en los que participa aparecerá habilitada la opción de rellenar el informe como miembro de tribunal (figura 4-32). En los demás tribunales se encontrará deshabilitada esta opción. Los datos del tribunal no son modificables por los profesores solo por el administrador. Figura 4-32. Ventana ‘Tribunal’ con botones ‘Informe Tribunal’ habilitados. Como miembro de tribunal se deberán hacer varios o todos los informes de tribunal de las presentaciones. Así un profesor puede estar asignado a hacer el informe de la presentación 1 y 2 únicamente. Por lo que deberá visualizar previamente al archivo facilitado por la Secretaría llamado ‘Convocatoria’ en el que aparece dicha 97 97 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario asignación. Para rellenar una, se hace clic en el botón ‘Informe Tribunal’ y se desplegará una ventana similar a las de ‘Informe de Tutor’ (figura 4-25) y ‘Ficha de Tutor’ (figura 4-29) en la que podrá escribir un texto que se introducirá en el archivo PDF para descargar y que se almacenará, a partir de ese momento, en la base de datos junto con el profesor que la ha realizado (figura 4-33). De ese modo cada ventana posteriormente dispondrá de los textos ya escritos por ese profesor. Además en el archivo se introducen automáticamente otros datos relacionados como el cargo del miembro de tribunal (apareciendo tachado lo que no procede), los datos del alumno y trabajo y la fecha actual (figura 4-34). Figura 4-33. Ventana ‘Informe Tribunal’ de ‘Tribunal’ en página ‘Ver Tabla Tribunales’. Figura 4-34. Documento ‘Informe Tribunal’ autogenerado. El profesor también podrá ver si es reserva y también el contador de participaciones en tribunales y actos de defensa (figura 4-35). Pruebas 98 Figura 4-35. Contador de tribunales con nombre del profesor resaltado en página ‘Ver Tabla Tribunales’. 4.3 Administrador 4.3.1 Modificar datos de alumno y de trabajo Entrando ahora como administrador accedemos desde el menú a ‘Modificar Perfiles (Alumno/Profesor)’. Y junto al título elegimos el seleccionable ‘Alumno (+TFG)’ para que en la lista aparezcan sólo los alumnos con sus trabajos (figura 4-36). Esta lista puede ser filtrada por palabras o campos. Figura 4-36. Lista de alumnos y trabajos de la página ‘Modificar Perfiles’ (administrador). Accediendo a cada uno de ellos desde ‘+ Ver’ se va a una página de detalle similar a una fusión de la página de ‘Mi perfil’ con la de ‘Mi Trabajo’, ambas del perfil alumno. En este caso, una única diferencia referente a la primera parte es que se puede modificar el correo (login) (figura 4-37). Y referente a la segunda es que no 99 99 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario cuenta con las secciones para ‘Material’ ni para ‘Documentos’. Además, la parte relacionada con el proceso del trabajo (parte inferior en ‘Información TFG/TFM’) es modificable como en el perfil de profesor (figura 4- 38). Figura 4-37. Mensaje de éxito al modificar datos de alumno en página ‘Trabajo’ de alumno específico (administrador) Figura 4-38. Edición de datos de TFE en página ‘Trabajo’ de alumno específico (administrador). 4.3.2 Modificar datos de profesor Como en el caso anterior se accede desde el menú a ‘Modificar Perfiles (Alumno/Profesor)’. Pero esta vez se elege en el botón junto al título ‘Profesor’ para que aparezca la lista de los profesores (figura 4-39). Se puede Pruebas 100 hacer un filtro también. Figura 4-39. Lista de profesores de la página ‘Modificar Perfiles’ (administrador). Accediendo a cada uno, podemos modificar los datos del profesor como en ‘Mi perfil’ del espacio profesor, pero siendo alterable también el login o correo (figura 4-40). Figura 4-40. Mensaje de éxito al modificar datos de profesor en página ‘Profesor’ específico (administrador). 101 101 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario 4.3.3 Crear y modificar tribunal Entrando en la página para crear tribunales desde el menú administrador en ‘Crear Tribunales’ se obtiene una tabla totalmente modificable en cuanto a tribunales y reservas (figura 4-41). Se puede cambiar de año pulsando en las flechas que aparecen junto al año de la tabla actual. El año que aparezca en la página por defecto será el actual. Es decir, cuando sea 1 de enero del año siguiente, la tabla que aparezca será la del curso siguiente (en este caso: 2019/20). Figura 4-41. Tabla modificable de tribunales en página ‘Crear Tabla Tribunales’ (administrador). Si se quiere crear uno nuevo, se pincha en un cuadro vacío de la tabla (por ejemplo, el primero de la izquierda de la figura 4-41), se hace clic arriba en el botón ‘Editar’, se rellenan los datos mínimos necesarios de la ventana (que son los dos miembros mínimamente requeridos del tribunal: presidente y secretario) y se pulsa en ‘Guardar’ (figura 4-42). En ese momento ya estará creado el tribunal en la base de datos y aparecerán las iniciales de los miembros y un mensaje justo en el cuadro de la tabla que se ha creado: de éxito (figura 4-43) o de error (figura 4-44). También se puede modificar posteriormente. Pruebas 102 Figura 4-42. Creación de un tribunal con los datos mínimos en ventana ‘Tribunal’. Figura 4-43. Mensaje de éxito al crear o modificar un tribunal. 103 103 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 4-44. Mensaje de error al crear o modificar un tribunal. Tomando la misma casilla del ejemplo, se puede modificar el tribunal rellenando todos los datos. Por ejemplo, se añaden 6 presentaciones y un miembro de tribunal más. La fecha en un desplegable tipo fecha (sólo permite una fecha dentro del mes y el año escogido), la hora, el aula, los miembros del tribunal del desplegable con todos los profesores del departamento, los informes de tribunal asignados a cada profesor, el alumno (con su tutor) de cada presentación y la hora de cada presentación (figura 4-45). Los botones de ‘Publicación Acto Defensa’ y ‘Evaluación Defensa’ no estarán disponibles mientras no se haya guardado la presentación correspondiente. La nota de cada presentación será asignada tras la defensa y evaluación. Pruebas 104 Figura 4-45. Creación de un tribunal con datos completos en ventana ‘Tribunal’. 4.3.4 Crear y modificar reserva En la parte inferior de la tabla se puede crear una reserva formada por profesores que pueden suplir a cualquier miembro de tribunal que tenga algún problema para asistir a un tribunal concreto asignado (figura 4-46). Figura 4-46. Casillas de reserva en página ‘Crear Tabla Tribunal’. Se abre la ventana reserva pulsando en ‘+’ y se eligen los profesores que formarán el grupo de recambio (figura 4-47). Y tras guardar los datos, aparecerán las iniciales de los profesores en la casilla, y un mensaje de éxito o de error, dependiendo de si se ha realizado sin problemas o no (figura 4-48). 105 105 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 4-47. Elección de profesores de reserva en ventana ‘Reserva’. Figura 4-48. Mensaje de éxito al crear o modificar una reserva de tribunal. 4.3.5 Obtener documentos y enviar por email Partiendo desde la ubicación de la acción de un apartado anterior (el 4.3.3), en la ventana de un tribunal Pruebas 112 En la ventana emergente (figura 4-59) se encuentran las mismas opciones que en el caso del documento ‘Publicación Acto Defensa’: obtener la plantilla del documento vacía, autorellenar ese documento (figura 4- 60) o autorrellenar y enviar el documento a los usuarios implicados (en este caso: alumnos de todos las actos de defensa, sus tutores y miembros de ese tribunal). Figura 4-59. Ventana ‘Convocatoria’ en ventana ‘Tribunal’. El archivo que se rellena, inserta automáticamente los datos de tribunal y sus miembros, de todos los actos de defensa y de los informes que debe hacer cada profesor del tribunal obtenidos de los campos seleccionables (checklist) al lado de cada miembro. 113 113 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 4-60. Acceso a página registro profesor desde página principal. Al enviar el correo se redirige hacia una página similar a la relacionada con el documento ‘Publicación Acto Defensa’, obteniéndose un mensaje de éxito o error y un enlace al archivo autorellenado (figura 4-61). Figura 4-61. Mensaje de éxito al enviar por email el documento ‘Publicación Acto Defensa’. Y el correo con el archivo adjunto sería como el de la siguiente figura (4-62). Pruebas 114 Figura 4-62. Email enviado con el documento adjunto ‘Publicación Convocatoria’. 4.3.6 Asignar nota Una vez se ha evaluado un trabajo tras su defensa, el tribunal pone una nota en los documentos de ‘Evaluación’ y el tutor en ‘Informe Tutor’. Es la secretaria del departamento la encargada de asignar la nota final a cada trabajo en la plataforma. Para ello tiene dos formas. Una es desde la ventana tribunales, bajo la presentación correspondiente, en la zona para asignar la nota (figura 4-63). Y otra es buscando el trabajo o alumno correspondiente en la lista de ‘Modificar Perfiles (Alumno/Profesor) y modificar el campo ‘Nota Numérica’ y ‘Nota Texto’ (figura 4-38). Ya sea de una forma u otra, a partir de ese momento, el trabajo cambiará a estado ‘Finalizado’, se eliminará de la lista desplegable donde se eligen las presentaciones en los tribunales y además aparecerá en la lista de TFG del departamento (figura 4-64) en la pestaña exterior a la sesión abierta (pública también a cualquier usuario no registrado). 115 115 Diseño y Desarrollo de un Sistema de Gestión de Trabajos Fin de Grado para un Departamento Universitario Figura 4-63. Asignación de nota a presentación en ventana ‘Tribunal’. Figura 4-64. Página ‘Lista TFG’ actualizada tras asignar nota. Pruebas 116 117 5 CONCLUSIONES l desarrollo de este proyecto ha supuesto una dedicación significativa en cuanto a que se requería la implementación de un sistema completamente desde cero que partía simplemente desde una idea básica. Se ha necesitado una tarea de investigación y constante análisis de requisitos con los futuros usuarios, que serán principalmente los integrantes del departamento, para elaborar una herramienta práctica. De ese modo, se espera que sea útil para la gestión de TFE futuros. El primer paso se basó en analizar la gestión del proceso, para posteriormente diseñar y planificar una plataforma eligiendo las tecnologías adecuadas para simplificar el desarrollo y el posterior mantenimiento. Una labor posterior ha sido la realización de unas pruebas pertinentes para testear que el funcionamiento del sistema era el correcto. Ha sido la implementación en sí, la tarea que ha ocupado el mayor esfuerzo y tiempo del proyecto, ya que se han integrado muchos conceptos y lenguajes. Por lo que para la mayoría de problemas que iban surgiendo se han tenido que estudiar y examinar diferentes manuales de programación y foros de expertos para dar con posibles soluciones. Además, es obvia la necesidad de depurar constantemente el código, de probar su funcionamiento y de optimizar las funcionalidades tras analizar y contrastar el uso real que le iban a dar los usuarios. Cabe destacar la faceta de seguridad del servicio web, que era un añadido a tener en cuenta mientras se iba desarrollando la plataforma. En definitiva, a parte del aporte de conocimientos y habilidades que ha proporcionado la realización de este proyecto, se espera que este sistema sirva para facilitar, mejorar y ayudar en la actividad y vida de sus usuarios. E “En tiempos de cambio, quienes están abiertos al aprendizaje se adueñarán del futuro, mientras que aquellos que creen saberlo todo estarán bien equipados para un mundo que ya no existe”. - Eric Hoffer (escritor y filósofo estadounidense) - Conclusiones 118 118 5.1 Objetivos alcanzados Al comenzar el proyecto se establecieron una serie de objetivos que seguir a lo largo del desarrollo de nuestro sistema que han sido alcanzados. El objetivo principal era el desarrollo de una plataforma de gestión de TFE para un departamento que mejore la eficiencia y que mantenga centralizados los datos. Este propósito fundamental incluye los siguientes objetivos subordinados:  Estudio y análisis del funcionamiento existente en el departamento en cuanto a la gestión de TFE y tribunales de defensas. Así como la búsqueda de una mejora de los procesos.  Diseño de la base de datos MySQL.  Implementación de la web con PHP, HTML, CSS y Javascript con la ayuda del framework Bootstrap y las tecnologías AJAX y JSON.  Implementación básica de seguridad de la plataforma para proteger la información y los recursos. 5.2 Líneas de mejora Durante el desarrollo del proyecto, se han identificado posibles elementos de mejora en el sistema. A continuación, se identifican un conjunto de ideas de mejora que se pueden alcanzar a partir de este proyecto:  Introducción de un sistema de firma electrónica. A través de este se firmarían los documentos directamente en el dispositivo sin necesidad de imprimir los documentos físicamente ni de entregar en mano. En su lugar, tras firmarlos de forma electrónica, se podrían archivar en una base de datos, y el destinatario podría acceder a ellos de forma automática. Esto supondría un ahorro de tiempo y de recursos como papel y tinta.  Integración con el sistema de Secretaría ETSI. Una desventaja de esta plataforma es que los archivos que se autogeneran realmente procedían de la Secretaría de la ETSI que se recibían por el departamento con sólo algunos datos ya rellenos como, por ejemplo, las fechas de adjudicación, entrega en secretaría, comunicación al departamento, retirada por departamento y publicación de acto de defensa. Así, actualmente hay que hacer la incorporación de estos datos a la plataforma. La nueva idea sería que se integraran estos datos junto con la plataforma. De esta forma, se recibirían los datos de la Secretaría de la ETSI y se incorporarían automáticamente en la plataforma.  Reutilización y autocreación de la estructura de los tribunales a partir de otros anteriores. Se podría conseguir que, al crear tribunales, se pueda hacer una copia en la distribución de los miembros igual a un tribunal anterior o iguales a otros años, para acelerar el proceso. O un sistema de automático que ajuste equitativamente los tribunales en función de su participación pasada y presente.  Permitir que un mismo alumno pueda tener en la plataforma su TFG y su TFM con un mismo correo. Se puede conseguir actualmente usando un correo diferente, ya que es el correo el que se usa como diferenciador entre distintos logins y trabajos. El nombre de alumno podría usarse el mismo sin problema. Un perfeccionamiento, que realmente es accesorio (ya que se podría mantener por el momento la actual solución de forma aceptable) podría ser este.  Mejora de seguridad. Cualquier renovación o modernización que vaya incrementando la fiabilidad de la plataforma conforme se descubran vulnerabilidades serían convenientes y adecuadas. 119 BIBLIOGRAFÍA Las referencias y bibliografía consultadas para el desarrollo de este trabajo son principalmente recursos electrónicos, que se encuentran en Internet y están en constante actualización. La mejora continua en las soluciones y lenguajes, y en la facilidad de búsqueda y acceso, haría que usar manuales de programación escritos fuera de algún modo contraproducente, ya que la mayoría van quedando obsoletos al paso del tiempo. [1] David Sklar, Learning PHP 5. 2016 [2] Michele E. Davis, Jon A. Phillips, Learning PHP and Mysql. 2007 [3] Robin Nixon, Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites (Animal Guide). 2009 [4] Jeff Friesen, Introducing JSON. 2019 [5] Página oficial de PHP, Manual y ejemplos de PHP, [Online] http://php.net/ [6] W3Schools, Tutoriales y manuales para programadores (PHP, HTML, CSS, JavaScript, Bootstrap, SQL, AJAX y JSON), [Online] https://www.w3schools.com/ [7] StackOverflow, Recursos para programadores, [Online] https://stackoverflow.com/ [8] DesarrolloWeb, Manual y ejemplos de PHP, [Online] https://desarrolloweb.com/php/ [9] Página oficial de JavaScript, Manual de Javascript, [Online] https://www.javascript.com/ [10] Página oficial de MySQL, Manual de MySQL, [Online] https://dev.mysql.com/ [11] Página de FPDF, Manual y tutoriales de FPDF, [Online] https://www.fpdf.org/ [12] Página de FPDI de Setasign, Manual y tutoriales de FPDI, [Online] https://www.setasign.com/products/fpdi/about/ [13] Página de PHPMailer en GitHub, Código y manual de PHPMailer, [Online] https://github.com/PHPMailer/PHPMailer [14] Página oficial de Apache, Manual de Apache, [Online] https://httpd.apache.org/ [15] Página oficial de EasyPHP DevServer, [Online] https://www.easyphp.org/ [16] Página oficial de hMailServer, [Online] https://www.hmailserver.com/ [17] Página oficial de SublimeText, [Online] https://www.sublimetext.com/ Bibliografía 120 120 121 ANEXOS 1 Manual de instalación En este anexo se incluirá la forma de poner en funcionamiento la base de datos y el servicio web. En nuestro caso usaremos el entorno local EasyPHP DevServer, aunque para el uso real de la plataforma se tendrá que adaptar esta instalación al servidor existente que se esté usando. 1.1 Manual de instalación de la base de datos Para poner en funcionamiento la base de datos utilizaremos EasyPHP DevServer. Por comodidad, se recomienda la instalación de la última versión disponible. Una vez se haya instalado el programa y se tenga el icono en el escritorio, se debe clicar en él, pero no se abrirá ninguna ventana. En cambio, en el área de notificaciones de la barra de tareas se activará la pestaña del programa. Al clicar en ella se abrirá un desplegable y elegimos ‘Open Dashboard’ (figura 7-1). Ahora sí se abrirá una ventana del navegador con la interfaz del servidor local (figura 7-2). Figura 7-1. Pestaña de EasyPHP DevServer en la barra de tareas.