Desarrollo de recursos educativos para Ingeniería del Software utilizando repositorios de Open Data y Linked Data

Desarrollo de recursos educativos para Ingeniería del Software utilizando repositorios de Open Data y Linked Data. Trabajo de fin de grado del Grado en Ingeniería Informática, Facultad de Informática, Universidad Complutense de Madrid Manuel Martín Canora y David Limón Miralles Director Antonio Sarasa Cabezuelo Junio 2019 2 3 Resumen En este trabajo se desarrolla una herramienta capaz de gestionar recursos educativos de la asignatura Ingeniería del Software. Existen tres roles diferentes, alumno, profesor y administrador donde cada uno tiene su propia interfaz. El administrador es el encargado de gestionar la herramienta y las cuentas de los profesores. El profesor es quien genera recursos en la herramienta, se le ofrece la posibilidad de completar dichos recursos con repositorios obtenidos a través de Open Data y Linked Data. Además, puede gestionar los alumnos pertenecientes a su grupo. El alumno tiene la capacidad de interaccionar con estos recursos, visualizando y descargando el contenido de estos. Palabras clave: Ingeniería del Software, recursos, repositorio, Open Data y Linked Data. 4 Abstract In this work, a tool capable of managing educational resources of the Software Engineering subject is developed. There are three different roles, student, teacher and administrator where each one has its own interface. The administrator is in charge of managing the tool and the teachers' accounts. The professor is the one who generates resources in the tool, he / she is offered the possibility of completing those resources with repositories obtained through Open Data and Linked Data. In addition, you can manage the students belonging to your group. The student has the ability to interact with these resources, visualizing and downloading the content of these. Keywords: Software engineering, Resources, Repository, Open data and Linked data. 5 Índice general. Resumen…………………………………………………………………………………3 Abstract…………………………………………………………………………….…….4 Índice general……………………………………………………………………….……5 Índice de figuras…………………………………………………………………….……6 1. Introducción……………………………………………………………………..….…9 1.1 Motivación……………………………………………………………..…….9 1.2 Objetivos……………………………………………………………..………9 1.3 Estructura de la memoria…………………………………………..…………9 1. Inroduction…………………………………………………………………………...11 1.1 Motivation……………………………………………………………..……11 1.2 Objectives…………………………………………………………..……….11 1.3 Structure of memory………………………………………………………...11 2. Estado del arte………………………………………………………………………..13 2.1 Moodle………………………………………………………………....…...13 2.2 Google Classroom…………………………………………………………..13 2.3 BlackBoard………………………………………………………………….13 2.4 Edmodo…………..…………………………………………………………14 3. Especificación de Requisitos…………………………………………………………15 3.1 Diagramas de casos de uso………………………………………………….15 3.2 Casos de uso referidos al profesor…………………………………………..16 3.3 Casos de uso referidos al estudiante………………………………………...18 3.4 Casos de uso referidos al administrador…………………………………….19 3.5 Casos de uso comunes………………………………………………………20 4. Tecnologías aplicadas………………………………………………………………..24 4.1. Tecnologías de la parte cliente……………………………………………..24 4.2 Tecnologías de la parte del servidor…………………………………………25 4.3 Tecnologías semánticas……………………………………………………..25 4.4 Bases de datos……………………………………………………………….26 4.5 Otras tecnologías……………………………………………………………26 5. Modelado de datos……………………………………………………………………29 5.1 Modelo Entidad-Relación…………………………………………………..29 5.2 Base de datos………………………………………………………………..29 6. Arquitectura de la aplicación…………………………………………………………33 7. Diseño e implementación…………………………………………………………….34 7.1 Principios de usabilidad……………………………………………………..34 7.2 Funcionalidad………………….……………………………………..……..34 8. Evaluación…………………………………………………………………………...50 8.1 Guion de pruebas…………………………..………………………………..50 8.2 Resultados de la evaluación…………………………………………………53 9. Conclusiones y trabajos futuros………………………………………………………62 9.1 Conclusiones del trabajo…………………………………………………….62 9.2 Trabajos de futuro…………………………………………………………...62 6 9.3 Aportaciones de David Limón Miralles……………………………………..63 9.4 Aportaciones de Manuel Martín Canora…………………………………….64 9. Conclusions and future work…………………………………………………………65 9.1 Conclusions of the work…………………………………………………….65 9.2 Future Jobs……..…………………………………………………………...65 9.3 Contributions of David Limón Miralles……………………………………..66 9.4 Contributions of Manuel Martín Canora…………………………………….67 Bibliografía……………………………………………………………………………..69 Anexo I: Guía de instalación de la aplicación…………………………………………..71 Anexo II: Guía de uso de la aplicación………………………………………………….78 Índice de figuras Figura 1: Caso de uso del estudiante………………………………………………….....15 Figura 2: Caso de uso del profesor.……………………………………………………...16 Figura 3: Caso de uso del administrador.…………………………………………….....16 Figura 4: Diagrama entidad – relación…………………...……………………………..29 Figura 5: Diagrama de la base de datos.…………………………………………………30 Figura 6: Funcionamiento de PHP, MySQL y apache con cliente…………………..…..33 Figura 7: Diagrama de clases.…………………………………………………………...35 Figura 8: Inicio de sesión.………………………………………………………...…….36 Figura 9: Confirmar inicio de sesión en código.………………………………………...36 Figura 10: Registro de usuario…………………………………………………………..37 Figura 11: Página principal para el tipo de usuario alumno ……………………………38 Figura 12: Mostrar los recursos de la página principal………………………………….38 Figura 13: Cabecera de la página principal para el tipo de usuario profesor…………….39 Figura 14: Consulta a la tabla “Perfil” de la base de datos………………………………39 Figura 15: Página principal para el tipo de usuario administrador...…………………….40 Figura 16: Buscador de la página principal…..………………………………………….40 Figura 17: Página del perfil para un alumno..…………………………………………..41 Figura 18: Página del perfil para un profesor……………………………………………42 Figura 19: Editar perfil…………………...……………………………………………..42 Figura 20: Gestionar cuentas para un profesor……...…………………………………..43 Figura 21: Activar cuentas……………………...………………………………………44 Figura 22: Subir archivos por un profesor…………….……………………………...…44 Figura 23: Subir archivos………………….……………………………………………45 Figura 24: Crear recurso por un profesor..……………………………………………...46 Figura 25: Crear recurso….……………………………………………………………..47 Figura 26: Visualizar archivos..………………………………………………………...47 Figura 27: Recorrer directorio.…………………………………………………….…....48 Figura 28: Previsualización de un recurso..………..……………………………………48 Figura 29: Consulta SPARQL …………………...……………………………………..49 Figura 30: Generar consulta.…………………………………………………………....49 Figura 31: Encuesta…………………..…………………………………………………50 Figura 32: Resultado de la encuesta, gráfico de sexo.……………………………….….54 Figura 33: Resultado de la encuesta, gráfico de crear cuenta.……………..…………….54 Figura 34: Resultado de la encuesta, gráfico de activar cuenta.……..…………………..55 7 Figura 35: Resultado de la encuesta, gráfico de cierre de sesión……………….………..55 Figura 36: Resultado de la encuesta, gráfico de estilo recurso………………..…………56 Figura 37: Resultado de la encuesta, gráfico de perfil………………….……………….56 Figura 38: Resultado de la encuesta, gráfico de recursos.……………..………………...57 Figura 39: Resultado de la encuesta, gráfico de descarga.…………………………...….57 Figura 40: Resultado de la encuesta, gráfico web.……………………………...……….58 Figura 41: Resultado de la encuesta, gráfico de crear recurso.…………………...……...58 Figura 42: Resultado de la encuesta, gráfico de guardar recurso.……………………….59 Figura 43: Resultado de la encuesta, gráfico de modificar recurso guardado.…………..60 Figura 44: Resultado de la encuesta, gráfico borrar alumno desde perfil.………….……61 Figura 45: Resultado de la encuesta, gráfico eliminar recursos…………………………61 Figura 46: Descarga de Xampp..…………………….………………………………….71 Figura 47: Inicio de instalación de Xampp.………….………...………………………..72 Figura 48: Instalación de Xampp.…...…………………………………………………..72 Figura 49: Ejecutable de Xampp.……………………………………………………….73 Figura 50: Panel de control de Xampp …………………...…………..…………………74 Figura 51: Panel de control de Xampp (Activado).…….…..……………….…………..74 Figura 52: Buscador con localhost...………..………………………………………......75 Figura 53: Página de bienvenida de Xampp …….………………………………..……..75 Figura 54: Inicio de base de datos PHPMyAdmin ………..…………………...………..76 Figura 55: Creación de una base de datos ………….... .…………………….………….76 Figura 56: Importar una base de datos…….…………………………………………….77 Figura 57: Resultado de la importación ……………………………….………………..77 Figura 58: Inicio de sesión desde profesor...…………………………..………………...78 Figura 59: Registro de cuenta desde profesor.……………………………….………….78 Figura 60: Activar Alumno desde profesor…... .………………………………..………79 Figura 61: Perfil desde profesor………. .……………………………………………….80 Figura 62: Modificar perfil desde profesor.…………………………..………………...80 Figura 63: Mis recursos desde profesor………....……………………...…….…………80 Figura 64: Mis alumnos desde profesor……….…...……...……………………………81 Figura 65: Gestionar alumno desde perfil desde profesor…. .…………………………..81 Figura 66: Visualizar Recursos, desde profesor...………...………………………….…82 Figura 67: Recurso desde profesor.……………………………………………………..82 Figura 68: Descarga de archivo desde profesor……………………………………...….82 Figura 69: Descarga de archivo PDF desde profesor……………………………………83 Figura 70: Menú desplegable desde profesor…………………………………………...83 Figura 71: Selección de archivo desde profesor…………………………………….......84 Figura 72: Borrar archivo desde profesor……………………………………...………..84 Figura 73: No se puede borrar desde profesor……………………………………...…...84 Figura 74: Mensaje de confirmación desde profesor…………………………………....84 Figura 75: Título y descripción desde profesor……………………………………....…85 Figura 76: Elección de archivos desde profesor…………………………………….......85 Figura 77: Selección de links desde profesor……………………………………...…....86 Figura 78: Selección de opción desde profesor……………………………………....…86 Figura 79: Cerrar sesión desde profesor……………………………………...………....86 Figura 80: Registro de cuenta del alumno…...……………………………………...…..87 Figura 81: Inicio de sesión del alumno……………………………………...……….….87 Figura 82: Modificar perfil del alumno……………………………………...……….…88 8 Figura 83: Página principal del alumno……………………………………...………….88 Figura 84: Visualizar grupos desde alumno……………………………………...……..89 Figura 85: Descarga del archivo desde alumno……………………………………...….89 Figura 86: Descarga del archivo PDF desde alumno……………………………………90 Figura 87: Cerrar sesión desde alumno……………………………………...…………..90 Figura 88: Inicio de sesión del administrador……………………………………...……91 Figura 89: Modificar perfil del administrador……………………………………...…...91 Figura 90: Activar cuentas de profesores……………………………………...………..92 Figura 91: Visualizar Recursos de los profesores desde administrador…………………92 Figura 92: Recurso visto desde administrador……………………………………...…..93 Figura 93: Descarga de archivo desde administrador…………………………………..93 Figura 94: Descarga de archivo PDF desde administrador……………………………..94 Figura 95: Cerrar sesión desde administrador……………………………………...…...94 9 1. Introducción. En este capítulo se explica la necesidad de una herramienta como esta, los objetivos planteados y una guía estructurada de la memoria. 1.1. Motivación. Para los alumnos de la asignatura de Ingeniería del Software buscar contenido relacionado con dicha asignatura acaba generando problemas, esta información se encuentra dispersa por toda la red y puede proceder de fuentes poco fiables. Por ello surge la necesidad de unificar todo el contenido existente en una única herramienta, una herramienta capaz de facilitar el acceso a todo el contenido disperso, obteniendo dicha información con consultas sobre los repositorios de Open y Linked Data. Crear un repositorio con un contenido amplio, estructurado y de fácil acceso para los alumnos de la asignatura, con recursos generados por los propios profesores es la solución. 1.2. Objetivos. El objetivo principal es desarrollar una herramienta de aspecto educativo para la asignatura Ingeniería del Software, con repositorios de Open Data y Linked Data. A continuación, se listan otros objetivos. • Diseñar una interfaz para cada usuario existente. • Proporcionar contenido generado por consultas SPARQL para la creación de recursos. • Gestionar alumnos y profesores según el grupo al que pertenezcan. • Unificar la información relacionada con Ingeniería del Software en esta herramienta. 1.3. Estructura de la memoria. La memoria de este trabajo sigue la siguiente estructura. En el capítulo 1 se realiza una breve introducción al trabajo realizado, se expone la motivación, los objetivos planteados y se describe la estructura de la memoria. A continuación, en el capítulo 2 se describe el estado del arte, analizando herramientas similares al proyecto; en el capítulo 3 se presenta la especificación de requisitos; en el capítulo 4 una explicación de las tecnologías utilizadas; en el capítulo 5 se expondrá la funcionalidad y significado de cada tabla de la base de datos; en el capítulo 6 una breve 16 Figura 2: Caso de uso del profesor. En la Figura 3, se relaciona el administrador y sus casos de uso. Denominado así, porque sus funciones en esta herramienta se caracterizan por poseer la capacidad de gestionar tanto recursos como a los creadores de estos, los profesores. Cuenta también con el poder de interactuar con la herramienta, donde se incluye el inicio de sesión, el uso de buscadores y la visualización de contenido. Figura 3: Caso de uso del administrador. 3.2. Casos de uso referidos al profesor. Se describen las diferentes actividades que debe realizar el profesor para llevar a cabo los siguientes procesos: crear cuenta, gestionar estudiantes y crear recursos. 17 Caso de uso P-1: Crear cuenta. Actores Profesor. Objetivo Registro de un nuevo profesor. Entrada Datos personales del profesor: nombre completo, correo electrónico, contraseña y grupo. Salida Una solicitud de registro queda almacenada en la base de datos pendiente de activación por el administrador. Secuencia normal 1. El profesor pulsa en el botón “Registrarse”. 2. El profesor rellena los campos obligatorios necesarios para el registro. 3. El profesor envía la solicitud. 4. Se muestra un mensaje indicando que la solicitud ha quedado pendiente de activación por el administrador. Secuencia alternativa A) El profesor ya se encuentra registrado en la base de datos y se le notifica que no puede crear una nueva cuenta con los datos introducidos. B) El formato de algún campo obligatorio no es correcto y se le notifica que no puede finalizar el proceso hasta que corrija los errores. C) El profesor decide cancelar el proceso pulsando sobre “Volver a la página de inicio”. Caso de uso P-2: Gestiona estudiantes. Actores Profesor. Objetivo Eliminar o activar las cuentas de estudiante asociados a un profesor en concreto. Entrada Cuentas de los estudiantes que van a ser eliminados o activadas. Salida Se reflejan los cambios realizados en la base de datos. Secuencia normal 1. El profesor selecciona la opción de “Gestionar alumnos”. 2. Se muestra un listado de cuentas de estudiantes. Cada cuenta tiene asociado dos opciones: rechazar o activar. 18 3. El profesor realiza sobre las cuentas la operación que desea realizar. Secuencia alternativa El profesor decide cancelar el proceso pulsando sobre cualquier otra opción disponible. Caso de uso P-3: Crear un recurso. Actores Profesor. Objetivo Crear un recurso que contiene diferentes objetos de aprendizaje relacionados con una categoría en concreto. Entrada Recurso que se desea crear. Salida Se modifica la base de datos con el nuevo recurso creado. Secuencia normal 1. El profesor pulsa sobre su nombre de usuario. 2. El profesor selecciona la opción “Crear recursos”. 3. Se abre una nueva ventana donde puede añadir los datos necesarios para crear un recurso. 4. Escoge los objetos de aprendizaje que desea añadir al recurso. 5. Escoge los enlaces relacionados el recurso. 6. Rellena los metadatos asociados al recurso. 7. Pulsar sobre “Crear recurso”. Secuencia alternativa El profesor decide previsualizar el recurso pulsando sobre “Previsualizar recurso”. El profesor decide guardar el recurso pulsando sobre “Guardar recurso”. 3.3. Casos de uso referidos al estudiante. Se describen las diferentes actividades que debe realizar el estudiante para llevar a cabo el proceso de crear cuenta. Caso de uso P-1: Crear cuenta. Actores Estudiante. Objetivo Registro de un nuevo estudiante asociado a un profesor existente. 19 Entrada Datos personales del usuario: nombre completo, contraseña, correo electrónico. Profesor al que desea estar asociado. Salida Una solicitud de registro queda almacenada en la base de datos pendiente de activación por el profesor. Secuencia normal 1. El estudiante pulsa en el botón” Registrarse”. 2. El estudiante rellena los campos obligatorios necesarios para el registro. 3. El estudiante selecciona de la lista al profesor al que desea asociarse. 4. El estudiante envía la solicitud. 5. Se muestra un mensaje indicando que la solicitud ha quedado pendiente de activación por el profesor. Secuencia alternativa A) El estudiante ya se encuentra registrado en la base de datos y se le notifica que no puede crear una nueva cuenta con los datos indicados. B) El formato de algún campo obligatorio no es correcto y se le notifica que no puede finalizar el proceso hasta que corrija los errores. C) El estudiante decide cancelar el proceso pulsando sobre “Volver a la página de inicio”. 3.4 Casos de uso referidos al administrador. Se describen las diferentes actividades que debe realizar el estudiante para llevar a cabo el proceso de gestionar cuentas de usuario. Caso de uso P-1: Gestionar cuentas de usuario. Actores Administrador. Objetivo Activar cuentas de profesores o rechazar cuentas de profesores. Entrada Cuentas de los profesores pendientes de activación. Salida Se reflejan los cambios en la base de datos. Secuencia normal 1. Selecciona la opción “Gestionar cuentas”. 2. En la nueva ventana aparece un listado paginado de las cuentas de profesores gestionadas por el sistema 20 3. El administrador selecciona las cuentas de los profesores que desea activar. Así mismo selecciona las cuentas de profesores que desea eliminar. Secuencia alternativa El administrador decide cancelar el proceso pulsando sobre cualquier otra opción disponible. 3.5 Casos de uso comunes. Se describen las diferentes actividades que deben realizar los diferentes roles para llevar a cabo sus procesos. Caso de uso P-1: Iniciar sesión. Actores Profesor, estudiante o administrador. Objetivo Iniciar sesión de un usuario. Entrada Usuario y contraseña. Salida Tiene acceso a la aplicación. Secuencia normal 1. El usuario pulsa en el botón “Iniciar sesión”. 2. El usuario rellena los campos obligatorios necesarios para iniciar sesión. 3. Se comprueba si los datos rellenados coinciden con la base de datos para verificar si son correctos. 4. Se muestra la página principal para cada usuario. Secuencia alternativa A) El contenido de algún campo no es correcto, se le notifica que no puede finalizar el proceso hasta que corrija los errores pudiendo volver a introducir los datos nuevamente. B) El usuario cancela la operación. Caso de uso P-2: Gestionar perfil de usuario. Actores Profesor, estudiante o administrador. Objetivo Gestionar el perfil de un usuario. Entrada El usuario debe haber iniciado sesión y selecciona la opción “Perfil”. 21 Salida Modificación del perfil o eliminación de la cuenta de usuario. En todos los casos, los cambios realizados se reflejan en la base de datos. Secuencia normal 1. El usuario selecciona la opción “Perfil”. 2. Se visualiza el perfil del usuario registrado. 3. El usuario puede modificar la información existente en su perfil, eliminar la cuenta de usuario o bien salir sin realizar ninguna modificación. 4. Para finalizar pulsa en el botón “Aceptar”. Secuencia alternativa A) El usuario ha modificado incorrectamente algún campo de su perfil, se le notifica con un mensaje de error y se le permite volver a modificar los campos. B) El usuario cancela la operación y vuelve a la pantalla principal de su cuenta. Caso de uso P-3: Buscar por palabras clave. Actores Profesor, estudiante o administrador. Objetivo Usar el buscador para acceder directamente al contenido deseado. Entrada Introducir en el buscador una serie de palabras clave que identifican la información a recuperar. Salida Todo el contenido dentro del sistema que tenga asociadas alguna de las palabras clave introducidas en el buscador. Secuencia normal 1. El usuario escribe un conjunto de palabras clave que identifican el contenido a buscar. 2. Pulsar sobre el botón “Buscar”. 3. Se visualización una lista de los contenidos recuperados. Secuencia alternativa Se muestra un mensaje indicando que no se ha encontrado nada para la búsqueda realizada. Caso de uso P-4: Ver recursos del sistema. Actores Profesor, estudiante o administrador. Objetivo Visualizar los objetos de aprendizaje existentes en un recurso del sistema. 22 Entrada El usuario ha iniciado sesión y pulsa sobre el recurso deseado. Salida El usuario accede a todos los objetos de aprendizaje del recurso. Secuencia normal 1. El usuario selecciona el recurso que desea visualizar. 2. El usuario accede a todos los objetos de aprendizaje del recurso. 3. El usuario visualiza el contenido del objeto de aprendizaje que desee visualizar. 4. El usuario puede interaccionar con el objeto de aprendizaje, visualizando todo su contenido. Secuencia alternativa El usuario pulsa sobre pulsa cualquier otra opción disponible. Caso de uso P-5: Gestionar recursos del sistema. Actores Profesor y administrador. Objetivo Añadir o eliminar recursos al repositorio que tiene asociado cada profesor dentro del sistema. Entrada Recursos que se desean añadir o eliminar en dicho repositorio. Salida Se reflejan los cambios en la base de datos. Secuencia normal 1. El profesor pulsa sobre el recurso que desea gestionar. 2. Se abre una nueva ventana donde aparece el recurso seleccionado anteriormente, con dos botones disponibles “Editar” o “Eliminar”. 3. En el caso de editar un recurso, deberá completar o modificar una serie de campos: título y descripción de dicho recurso, archivos o links. 4. Pulsar en “Crear recurso”. Secuencia alternativa A) El profesor decide cancelar el proceso pulsando cualquier otra opción disponible, el proceso no será guardado. B) El profesor no completa alguno de los campos requeridos para un determinado recurso, el sistema le notifica con un mensaje que no puede finalizar la acción hasta completar todos los campos obligatorios. 23 Caso de uso P-6: Gestionar objeto de aprendizaje. Actores Profesor, estudiante o administrador. Objetivo Interaccionar con un objeto de aprendizaje. Entrada El usuario debe haber iniciado sesión con su cuenta y estar visualizando un objeto de aprendizaje. Salida Los resultados de la interacción según la acción realizada se reflejan en la base de datos y en la web. Secuencia normal 1. El usuario se encuentra con una ventana donde puede visualizar cualquier archivo o links existente en el recurso. 2. En el caso de los archivos pueden descargarlos. Secuencia alternativa El usuario decide cancelar el proceso pulsando sobre pulsando sobre cualquier otra opción disponible.. 24 4. Tecnologías aplicadas. En este capítulo se explica individualmente las tecnologías utilizadas para este proyecto, distinguiendo entre las tecnologías usadas en la parte del cliente o del servidor, tecnologías semánticas o las usadas para bases de datos. 4.1 Tecnologías de la parte del cliente. Se analizan las diferentes tecnologías utilizadas en la parte de cliente, estas tecnologías son JavaScript, HTML, CSS y Bootstrap. JavaScript Es un lenguaje de programación interpretado, orientado a objetos, basado en prototipos porque utiliza funciones como constructores de objetos, imperativo y estructurado porque es compatible con gran parte de la estructura de programación de C, débilmente tipado y dinámico. Implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas. A continuación, se proporciona un enlace para complementar la información de esta herramienta, https://www.w3schools.com/js/ [16]. HTML Es un lenguaje de marcado para la elaboración de páginas web, define una estructura básica y un código. Los elementos son la estructura básica y tienen dos propiedades, atributos y contenido, los atributos en su mayoría son pares nombre-valor. Este enlace https://www.w3schools.com/html/ [29], proporciona más información sobre HTML, el cual es un estándar que sirve de referencia del software conectando la elaboración de páginas web en sus diferentes versiones. CSS Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en lenguaje de marcado. En el siguiente enlace aparece más información sobre esta tecnología, https://www.w3schools.com/css/ [31]. Sirve para separar la presentación y la escritura, mejorando la accesibilidad del documento. Permite que varios documentos HTML compartan el mismo estilo y reduce la complejidad y la repetición de código. 25 Bootstrap Es un framework [8] web cuyo objetivo es facilitar el diseño de sitios y aplicaciones web responsive [9]. Se utiliza como diseño de sitios y aplicaciones web, además, contiene plantillas de diseño con tipografía, formularios, botones, cuadros y otros elementos de diseño basado en HTML y CSS. Posee una estructura modular, componentes reutilizables, plugins [34] de JavaScript y comprende las hojas de estilo CSS. En el siguiente enlace aparece más información sobre esta herramienta, https://getbootstrap.com/ [7]. 4.2 Tecnologías de la parte del servidor. Se analiza la tecnología PHP usada en la parte del servidor. PHP Es un lenguaje de programación de propósito general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico, orientado al desarrollo de aplicaciones web y al cliente, posee la capacidad de conexión con la mayoría de los motores de base de datos. El código es interpretado por un servidor web con un módulo de procesador de PHP, https://php.net/manual/es/intro-whatis.php [19], que genera HTML resultante. Dicho código fuente escrito es invisible al navegador web. 4.3 Tecnologías semánticas. Se analiza la tecnología de SPARQL. SPARQL Se trata de un lenguaje estandarizado para la consulta de grafos RDF, siendo una tecnología clave en el desarrollo de la web semántica. En un principio SPARQL únicamente incorpora funciones para la recuperación de sentencias RDF. Sin embargo, algunas funciones también incluyen operaciones para el mantenimiento de datos. Las características principales de esta tecnología son: utilizar un lenguaje de consulta para RDF, está basado en características SQL y los resultados de una consulta pueden ser 32 • Links: Campo de tipo texto que almacena todos los nombres de los links utilizados en este recurso separados por comas. • Guardado: Campo booleano que identifica si un recurso está guardado o ha sido creado. Tabla consultassparql Esta tabla contiene información relacionada con los resultados obtenidos por las consultas SPARQL y esta compuesta por los siguientes campos. • Tema: Clave primaria, campo que identifica el tema sobre el que se han recogido los resultados obtenidos en la consulta. • Links: Campo de tipo texto que almacena todos los links obtenidos en la consulta de SPARQL realizada para este tema en concreto. 33 6. Arquitectura de la aplicación. La arquitectura utilizada para la aplicación es el modelo cliente/servidor. Este modelo se caracteriza por el reparto de tareas entre los proveedores de recursos o servicios, llamados servidores, y los demandantes, llamados clientes. Separando los datos y la lógica de su representación y su módulo para gestionar comunicaciones se cumple con el patrón modelo-vista-controlador. Actuando la base de datos como modelo, el código como servidor y el cliente para la representación visual separando así conceptos. El cliente interactúa con la herramienta generando acciones sobre el controlador, dependiendo de dichas interacciones provoca modificaciones en la base de datos produciendo así cambios en la vista. Se ha utilizado como entorno de desarrollo XAMPP, el cual integra en una sola herramienta PHP [19], MySQL y Apache [20]. El cliente solicita una acción al servidor web, Apache en este caso, el cual recibe el mensaje, comprueba que se trata de una petición válida, y al comprobar que es una extensión “.php” solicita al intérprete de PHP. Este intérprete a su vez ejecuta el contenido del archivo y eventualmente se comunica con el gestor de base de datos, mediante MySQL. Si se produce la comunicación, este gestor es capaz de devolver la información solicitada contenida en la base de datos. Finalizado la ejecución del código contenido en el archivo y recibida toda la información necesaria, se envían los resultados al servidor web. El servidor envía la página al cliente solicitante y el navegador muestra por pantalla los resultados. El funcionamiento descrito anteriormente se representa de manera visual en la Figura 6, donde se indica quien desempeña cada papel dentro de esta aplicación. Figura 6: Funcionamiento de PHP, MySQL y apache con cliente. 34 7. Diseño e implementación. Este capítulo se introduce con los principios utilizados para el desarrollo de la herramienta. Después se explica con detalle la funcionalidad implementada en la aplicación. 7.1 Principios de usabilidad. Como la mayoría de los diseñadores web, en este proyecto se ha procurado cumplir con los principios de usabilidad web de Nielsen [21], estos principios son la base de cualquier web para que sea user firendly o lo que es lo mismo, es un tipo de diseño centrado en el usuario para conseguir mejorar la experiencia de este. Algunos de los principios que se tratan en este proyecto: • Relación entre el sistema y el mundo real: se utilizan imágenes claras buscando que la interacción con el usuario sea lo más natural posible. • Control y libertad del usuario: se proporciona al usuario la posibilidad de subsanar el error, por ello en la web se incluye la posibilidad de editar el perfil o los recursos. • Consistencia y estándares: utilizar los convenios establecidos para ciertos iconos o botones, por ello se establece un menú de navegación idéntico en todas las interfaces, incluyendo botones con colores representativos acordes a la acción que desempeñan. • Diseño estético y minimalista: se hace uso de un estilo minimalista, acompañado de una gama de colores claros que favorece la usabilidad de la herramienta. La imagen utilizada como fondo simula un entorno de trabajo familiar, buscando la sensación de paz y tranquilidad del usuario, lo cual se acompaña de un diseño no sobrecargado generando una herramienta sencilla e intuitiva. • Ayudar a los usuarios a reconocer: diagnosticar y corregir los errores, se implementa un lenguaje entendible por todos, indicando a los usuarios que es lo que pasa en cada momento con mensajes explicativos de los errores. 7.2 Funcionalidad. Se describe la estructura de la aplicación mostrando las clases del sistema, sus atributos, operaciones (o métodos), y las relaciones entre los objetos, Figura 7. 35 Figura 7: Diagrama de clases. A continuación, se explica detalladamente cada una de las funcionalidades implementadas. a) Inicio de sesión con contraseña encriptada. En primer lugar, cuando el usuario accede a la herramienta debe identificarse con su cuenta de usuario. Se le requerirá su correo electrónico y contraseña, como se ve en la figura 8. 36 Figura 8: Inicio de sesión. Una vez registrado y activado el usuario podrá iniciar sesión, para ello se ha implementado un formulario donde se recoge el correo electrónico y la contraseña encriptada introducidas, realizando una consulta sobre la tabla “Perfil” de la base de datos para su comprobación. El método utilizado para encriptar las contraseñas, el cual también está implementado en la clase “crearCuentaForm.php”, se realiza con una función propia de PHP para calcular el hash de un string [23], el método es md5(string), utilizando el resultado arrojado por el método en la función crypt(string, salt), se consigue un string encryptado. Este proceso se representa en la Figura 9. Figura 9: Confirmar inicio de sesión en código. 37 b) Registro de usuario. Si el usuario no posee una cuenta en la web, puede registrarse rellenando los distintos campos que se le exigen. Estos campos son: nombre y apellidos, correo electrónico con el que desea ser identificado, contraseña y el tipo de usuario acompañado del grupo al que se perteneces, Figura 10. Figura 10: Registro de usuario. La implementación de esta funcionalidad es muy similar al realizada en el inicio de sesión. A través de un formulario se recogen los datos introducidos por el usuario y mediante consultas a la base de datos se insertan los resultados en la tabla “Loginporconfirmar”. c) Página principal. La Figura 11 representa la página principal para los usuarios, dependiendo del tipo que seas la cabecera contiene diferentes opciones. Dichas opciones se muestran más adelante. 38 Figura 11: Página principal para el tipo de usuario alumno. Para mostrar los recursos que corresponden al usuario registrado se realizan varias consultas. La primera de ellas devuelve un resultado con los campos correspondientes, utilizando el valor del campo “TipoUsuario” para determinar la visual que le corresponde. Después se ejecuta una consulta sobre la tabla “Recursoscreados” utilizando el correo del usuario y el booleano “Guardado” para identificar que no es un recurso creado, como se puede apreciar en la Figura 12, retornando así los datos correspondientes a mostrar. Con los resultados arrojados por la consulta y dependiendo de si se ha realizado una búsqueda en la página principal se muestran de una manera u otra. Figura 12: Mostrar los recursos de la página principal. 39 La interfaz para el alumno contiene los recursos generados por el profesor de su grupo, además cuenta con la posibilidad de acceder a los demás grupos seleccionando la opción del menú “Grupos”, esto se ve representado en la Figura 13. Para implementarlo simplemente se realizan consultas a la tabla “Perfil” de la base de datos, Figura 14, obteniendo los campos necesarios para identificar el tipo de usuario y el grupo al que pertenece. Figura 13: Cabecera de la página principal para el tipo de usuario profesor. Figura 14: Consulta a la tabla “Perfil” de la base de datos. El profesor tiene la misma interfaz que el administrador, con la diferencia de que los recursos que le aparecen son los suyos propios y en la cabecera él tiene la opción “Gestionar alumnos”, la cual se explicará posteriormente. Por otro lado, el desplegable del nombre contiene diferentes opciones para cada usuario, en el caso del administrador y el alumno solo tienen la posibilidad de cerrar sesión, mientras que el profesor también cuenta con la posibilidad de “Subir un archivo” y “Crear un recurso”. La interfaz del administrador sigue el mismo patrón, pero con la diferencia de que contiene todos los recursos creados por todos los profesores, además en su cabecera tiene la opción Gestionar cuentas. Esto se puede apreciar en la Figura 15. 40 Figura 15: Página principal para el tipo de usuario administrador. d) Buscador de recursos. La página principal posee un buscador, el cual facilita la búsqueda de los recursos al usuario. Para implementar la funcionalidad del buscador, Figura 16, se utiliza un formulario con el role search, pasando los datos recogidos por el método POST, utilizando estos resultados en la consulta a la base de datos sobre la tabla “Recursoscreados”. Para lanzar la búsqueda basta con pulsar la tecla enter o seleccionar el botón proporcionado “Buscar”. Figura 16: Buscador de la página principal. 41 e) Perfil. Todo usuario tiene la posibilidad de editar los datos de su perfil. Dependiendo del usuario que seas se mostrará una interfaz u otra, todas contienen una serie de campos idénticos para cualquier rol. En la Figura 17 se aprecia el editar perfil de un alumno. Figura 17: Página del perfil para un alumno. El perfil para el Administrador tiene la misma interfaz que el mostrado en la imagen anterior para el alumno, cambiando algunos campos no relevantes para el administrador. La interfaz para el profesor, Figura 18, es diferente a los otros usuarios, contiene un par de pestañas, “Mis Recursos” y “Mis alumnos”, donde se muestra la información correspondiente en cada caso. 48 Figura 27: Recorrer directorio. k) Guardar y cargar un recurso. La funcionalidad implementada para guardar un recurso es idéntica a lo explicado en el apartado h), donde se explica la creación de un recurso. Se recogen los datos del formulario y se guardan en la tabla “Recursoscreados” con la diferencia de que se marca el campo “Guardado” a true y no es un recurso publicado y visible para los demás usuarios. Estos recursos se pueden cargar, permitiendo continuar con la creación del recurso hasta la posterior publicación de este. Para cargar dicho recurso se facilita un combobox y el botón “Cargar recurso”, una vez pulsado el botón se utiliza la opción seleccionada para realizar la consulta sobre la base de datos en la tabla “Perfil”. l) Previsualizar recurso. Esta funcionalidad permite al usuario visualizar el recurso antes de publicarlo. Recogiendo los valores del formulario y pasándoselos a la clase “previsualizarRecurso.php” a través de la URL [25], dicha clase muestra el recurso previsualizado, Figura 28, utilizando funcionalidades explicadas en apartados anteriores, por ejemplo, la obtención de los archivos a través de una ruta proporcionada, Figura 27, o almacenar todos los nombres de los archivos en una variable separados por comas, Figura 25. Figura 28: Previsualización de un recurso. 49 m) Generar consultas. Este botón lanza las consultas predefinidas, mediante el lenguaje SPARQL, obteniendo resultados sobre la web semántica. A continuación, se muestra una de las consultas realizadas, Figura 29, donde se ve cómo se almacenan todas estas consultas en un array. Figura 29: Consulta SPARQL. El componente ARC2 permite el funcionamiento de SPARQL, dicho componente permite tratar los endpoints [26] que se utilizarán en las consultas. Además, se analizan y almacenan individualmente los resultados mediante un foreach [27] sobre el array que contiene todas las consultas. Los resultados se almacenan en la base de datos en la tabla “Consultassparql”, la cual se vacía antes de volver a rellenar con los nuevos resultados. Esto se puede apreciar en la Figura 30. Figura 30: Generar consulta. 50 8. Evaluación. En este capítulo se detalla la encuesta realizada a diferentes miembros de la comunidad educativa, participando en ella tanto estudiantes como profesores. La primera parte aborda una descripción de la encuesta realizada para la evaluación del proyecto, seguido de una segunda parte, donde se analizan los resultados obtenidos en dicha encuesta. 8.1. Guion de pruebas. Se ha realizado, mediante la ayuda de los formularios de Google, una encuesta para evaluar la usabilidad del proyecto. Para ello, en la encuesta, se realizan catorce preguntas donde el usuario debe realizar unas determinadas tareas, posteriormente, evaluará del 1 al 5, dichas preguntas, siendo 1 la opción más desfavorable y la 5 la más favorable, o bien indicando cuanto esfuerzo ha supuesto realizar la acción, señalando mucho, sin más o poco es intuitivo, véase en la Figura 31. Una vez finalizada la encuesta, el usuario procede a enviar los resultados. 51 52 53 Figura 31: Encuesta. 8.2. Resultados de la evaluación. Se somete a evaluación el proyecto de fin de grado para obtener un feedback [28] y comparar los resultados con los objetivos marcados. Con esta evaluación se obtuvo, sobre todo, retroalimentación acerca de cuan fácil e intuitiva es la interfaz para el usuario y como de difícil es la consecución de las actividades que se pueden realizar en el proyecto. Para ello se realiza una evaluación con ayuda de los formularios de Google. En primer lugar, se seleccionó a ocho personas para que realizasen un guion de pruebas en el que se les iba pidiendo que fuesen ejecutando todas las acciones que se pueden efectuar en el proyecto web. De estas ocho personas, una tenía el puesto de profesor en la universidad complutense de Madrid, y las otras siete personas restantes eran usuarios normales, que estaban un poco familiarizados con la tecnología. De esas siete personas, dos eran mujeres y las cinco personas restantes eran hombres. En este guion de pruebas se le preguntaba primero su nombre y su género y posteriormente ya se comenzaban con las cuestiones sobre el proyecto. a) La primera pregunta se corresponde con el sexo del usuario que va a realizar el formulario. Por medio del gráfico, se observan que el 75% son hombres y el 25% mujeres. Como se muestra en la Figura 32. 54 Figura 32: Resultado de la encuesta, gráfico de sexo. b) La segunda pregunta corresponde con la creación de una nueva cuenta con el rol de alumno. Como se puede apreciar en el gráfico el 75% ha opinado que ha sido muy intuitivo realizar la acción anteriormente mencionada y un 25% que ha sido bastante intuitivo, Figura 33. Figura 33: Resultado de la encuesta, gráfico de crear cuenta. c) En la tercera pregunta, Figura 34, el usuario deberá activar la cuenta anteriormente creada gracias a una cuenta con el rol de profesor que se facilita. Como pasaba en el punto anterior, se obtienen los mismos resultados, un 75% de respuestas han sido muy intuitivas y el 25% han sido bastante intuitivas. 55 Figura 34 Resultado de la encuesta, gráfico de activar cuenta. d) La siguiente pregunta hace referencia al cierre de sesión. El 87.5 de los usuarios ha respondido que es intuitivo y que les ha costado poco y el 12.5% restante responde la opción de sin más, véase en la Figura 35. Figura 35: Resultado de la encuesta, gráfico de cierre de sesión. e) En la quinta pregunta se pide al usuario que inicie sesión con el usuario creado y activado anteriormente para que visualice los recursos que están creado y de su opinión. El 25% opina que el diseño es muy bueno, el 62.5% opina que es bastante bueno y el 12.5% opina, sin más, estos resultados aparecen en la Figura 36. 56 Figura 36: Resultado de la encuesta, gráfico de estilo recurso. f) La siguiente pregunta pide al usuario que modifique su perfil y puntúe que le ha parecido, Figura 37. Donde el 37.5% opina que el diseño es muy bueno, el 37.5% opina que es bastante bueno y el 25% opina que sin más. Figura 37: Resultado de la encuesta, gráfico de perfil. g) Para la séptima pregunta se pide al usuario que interactúe en la web para encontrar donde poder ver los recursos ordenados por profesores. El 50% opina que no les ha costado nada, el 25% opina que casi nada y el 25% opina que sin más. Se muestran los resultados en la Figura 38. 57 Figura 38: Resultado de la encuesta, gráfico de recursos. h) En la siguiente pregunta, Figura 39, se pide al usuario que intente descargar un archivo de uno de los recursos en concreto. El 75% opina que les ha costado poco, que es intuitivo y el 25% opina que sin más. Figura 39: Resultado de la encuesta, gráfico de descarga. i) Para la novena pregunta, se le demanda al usuario que investigue por la web y se vaya fijando en la estética de esta. En la Figura 40, se muestran los siguientes resultados. Donde el 50% opina que tiene un muy buen diseño y el otro 50% opina que es buen diseño. 64 • Subida del proyecto a un host facilitando la interacción con las encuestas realizadas. • Examinar el proyecto a fondo solucionando errores de funcionamiento. • Distribución de la encuesta realizada. • Análisis de los resultados arrojados en la encuesta. • Completar la memoria. 65 9. Conclusions and future work In this chapter we will present the conclusions that have been obtained after the completion of the end of grade project on development of educational resources for software engineering using Open Data and Linked Data repositories. 9.1 Conclusions of the work. A tool has been created for the management and exploitation of material related to the software engineering subject. Developing a directory of resources, which varies depending on the role of the user, being the administrator capable of eliminating any resource, the teacher capable of deleting or editing their own resources and, finally, the student who can simply visualize them. In addition, it has been implemented that all the roles are capable of downloading the resource files. Making a profile, which can be modified, for each user, with a somewhat more complete teacher profile so you can visualize your own students and resources. A tab has been made so that the teacher can upload their own files when creating a resource. Another tab that allows the creation of resources, being able to add any file uploaded to the web, as well as a series of links that are retrieved through SPARQL queries. For the initiation and registration of the session, an encryption of the passwords is carried out to respect the privacy of the user. A tool is created that can unify all the content of the Software Engineering subject, limited in the SPARQL queries, retrieving only Wikipedia links. 9.2 Future Jobs. The main lines of future work to continue with this project are: • Extend this application to other subject: so that the contents offered are enriched. • Add some valuation model about the resources: providing feedback or internal feedback, with which the student can see which file is the best or most complete, or in the case of the teacher, to know what type of material is the one that usually like the student. And in the face of the visualization of content the content could be shown according to the resources and subjects most visited or best valued by a student. 66 • Add improvements in the interface: such as the choice of the language in which the content is displayed or the possibility of displaying content in alphabetical order or by date of creation. • Make the web a mobile application. • Create a mail validation: allowing only the registration of users of the Complutense University of Madrid. • Create an internal forum where users and teachers can easily ask and answer questions and design a comment system for each resource created. 9.3 Contributions of David Limón Miralles. • Making sketches designed to paper. • Design and creation of the specification of use cases. • Subsequently, their diagrams were developed to favor the understanding of these visually. • Design and structure of the database where all the information of the tool was to be stored. • The design of the interface is developed, where the structure of the web was created, implementing a basic functionality. • Creation of a registration and login mechanism on the web, developing the connection with the database. • Conducting queries to create the logic of account management with activation by the administrator and teachers respectively. • Creation of a tab for the display of pending activation accounts, implementing the queries determined for its operation. • Development of the logic of the creation of resources. • Development and implementation of the design and management structure of files belonging to the resources. • Implementation of a function capable of traversing the directory structure. This function is capable of traversing any route passed by parameter and comparing 67 the extension of the file of the corresponding directory to determine the action to be performed. • Development and implementation of the functionality and structure of the creation, preview or storage of resources. • Research and documentation on SPARQL queries. • Implementation of SPARQL queries. • Design and structure of memory. • Complete the memory. 9.4 Contributions of Manuel Martin Canora. • Realization of use cases. • Creation of mockups of paper sketches. • Design of the tables of the database. • Decision to use Xampp server. • Creation of a first usable interface. • Research, documentation and subsequent creation of SPARQL queries. • Implementation of the definitive interface. • Creation of the survey through Google Forms. • Upload of the project to a host facilitating the interaction with the surveys carried out. • Examine the project thoroughly, solving operational errors. • Distribution of the survey carried out. • Analysis of the results of the survey. • Complete the memory. 68 69 BIBLIOGRAFÍA [1] <<Campus virtual>>. [En línea]. Disponible en: https://www.ucm.es/campusvirtual [2] <<Open data>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Datos_abiertos [3] <<Linked data>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Datos_enlazados [4] << SPARQL >>. [En línea]. Disponible en: https://www.w3.org/TR/rdf-sparqlquery/ [5] <<Moodle>>. [En línea]. Disponible en: https://moodle.org/?lang=es [6] << Google classroom >>. [En línea]. Disponible en: https://classroom.google.com/u/0/h?hl=es [7] << Bootstrap>>. [En línea]. Disponible en: https://getbootstrap.com/ [8] <<Framework>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Framework [9] <<Blackboard>>. [En línea]. Disponible en: https://ush.blackboard.com/ [10] << Emodo >>. [En línea]. Disponible en: https://www.edmodo.com/?language=es [11] << Sublime text>>. [En línea]. Disponible en: https://www.sublimetext.com/ [12] <<Xampp>>. [En línea]. Disponible en: https://www.apachefriends.org/es/index.html [13] << MySQL >>. [En línea]. Disponible en: https://www.mysql.com/ [14] << ARC2 >>. [En línea]. Disponible en: https://github.com/semsol/arc2/blob/master/doc/SPARQL-support.md [15] << RDF >>. [En línea]. Disponible en: https://www.w3.org/RDF/ [16] <<JavaScript>>. [En línea]. Disponible en: https://www.w3schools.com/js/ [17] << Infinity Free >>. [En línea]. Disponible en: https://infinityfree.net/ [18] << Modelio Open Source >>. [En línea]. Disponible en: https://www.modelio.org/ [19] <<PHP>>. [En línea]. Disponible en: https://php.net/manual/es/intro-whatis.php [20] << Apache >>. [En línea]. Disponible en: https://httpd.apache.org/ [21] <<Principios de usabilidad de Nielsen>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Heur%C3%ADsticas_de_Nielsen [22] <<Combobox>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Cuadro_combinado [23] <<String>>. [En línea]. Disponible en: https://www.php.net/manual/es/book.strings.php [24] <<Iframe>>. [En línea]. Disponible en: https://www.w3schools.com/tags/tag_iframe.asp [25] <<URL>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme [26] <<Endpoints>>. [En línea]. Disponible en: https://en.wikipedia.org/wiki/Endpoint [27] <<Foreach>>. [En línea]. Disponible en: https://php.net/manual/es/controlstructures.foreach.php 70 [28] <<Feedback>>. [En línea]. Disponible en: https://definicion.de/feedback/ [29] <<HTML>>. [En línea]. Disponible en: https://www.w3schools.com/html/ [30] << Sistema Operativo >>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Sistema_operativo [31] <<Windows>>. [En línea]. Disponible en: https://www.microsoft.com/eses/windows [31] <<CSS>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada [32] <<iOS>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/IOS [33] <<Hosting>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Alojamiento_web [34] <<Plugins>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/Complemento_(inform%C3%A1tica) [35] <<PhpMyAdmin>>. [En línea]. Disponible en: https://www.phpmyadmin.net/ [36] <<Google drive>>. [En línea]. Disponible en: https://www.google.com/intl/es_ALL/drive/ [37] <<Formularios google>>. [En línea]. Disponible en: https://www.google.es/intl/es/forms/about/ [38] <<Licencia GNU>>. [En línea]. Disponible en: https://es.wikipedia.org/wiki/GNU_General_Public_License 71 ANEXOS ANEXO I. Guía de instalación de la aplicación. 1. Primero se debe descargar la última versión disponible de Xampp, la cual se encuentra en esta dirección: https://www.apachefriends.org/es/download.html En esa dirección, se debe descargar la versión de Xampp correspondiente con cada Sistema Operativo [30], para este proyecto, la versión 7.3.2 para Windows [31], véase en la Figura 46. Figura 46: Descarga de Xampp. 2. Tras el primer paso, se procederá a descargar un ejecutable (.exe), el cual se instalará como se muestra en la Figura 47. A continuación, se debe dar a siguiente hasta que le pida la dirección en la que se quiere instalar (Figura 48). Se seleccionará la dirección para instalar y se le dará a siguiente hasta terminar la instalación. 72 Figura 47: Inicio de instalación de Xampp. Figura 48: Instalación de Xampp. 3. Se crea una carpeta llamada Xampp en la dirección de instalación que se haya elegido, Figura 48. Dentro de este, tendrá otra carpeta denominada htdocs, la cual será de suma importancia, puesto que, dentro de esta, se tendrá que meter el proyecto TFG. Para 73 ello, dentro de htdocs se creará una carpeta llamada “TFG” y dentro de esta se introducirá el proyecto (es decir todos los CSS, PHP y las carpetas que se tengan como por ejemplo la carpeta imágenes). 4. Después, habrá que iniciar Xampp para poder trabajar en localhost y poder importar la base de datos. Dentro de la carpeta Xampp, se encontrará un ejecutable llamado “xampp-control.exe” como se indicia en la Figura 49. Se hará doble clic en este para iniciarlo y deberá aparecer un panel de control como se muestra en la Figura 50. Una vez se haya iniciado el panel de control, simplemente se debe pulsar start en las opciones, Apache y MySQL (las primeras veces pide acceso y habrá que autorizarle) y ya tendrá iniciado el servicio Xampp. Después de iniciarlo, el panel de control debería quedar de la siguiente manera, Figura 51. Figura 49: Ejecutable de Xampp. 80 Figura 61: Perfil desde profesor. Figura 62: Modificar perfil desde profesor. Figura 63: Mis recursos desde profesor. 81 Figura 64: Mis alumnos desde profesor. Figura 65: Gestionar alumno desde perfil desde profesor. Paso 4: Visualizar Recursos Para ver los recursos que se han creado, Figura 66, se deberá ir al menú superior y seleccionar en inicio. En la página de inicio estarán todos los recursos creados por el profesor. Desde ahí, se podrán visualizar los recursos haciendo clic sobre estos. De esta forma se podrá ver los archivos y los links que contiene, Figura 67 y se tendrá la opción de modificar el recurso haciendo clic en “Editar” o, en caso de que se quiera eliminar, pulsando en “Eliminar”, ambos botones situados en la parte superior derecha del recurso. 82 Figura 66: Visualizar Recursos, desde profesor. Figura 67: Recurso desde profesor. Paso 5: Descargar archivo. Dentro del recurso, se seleccionará el elemento que se quiera descargar, haciendo clic en el archivo y, posteriormente, dándole a la opción de guardar archivo, o en su defecto, si es un PDF, dándole al símbolo de descarga situado en la esquina superior derecha. En la Figura 68 y 69 se muestran dos ejemplos de descargas de archivos. Figura 68: Descarga de archivo desde profesor. 83 Figura 69: Descarga de archivo PDF desde profesor. Paso 6: Creación y eliminación de archivos. Para la creación de archivos, se irá al menú desplegable que está situado en la esquina superior derecha con su nombre y le dará a subir archivos, Figura 70. Después se hará clic en examinar, se escogerá el archivo que se quiera subir y, por último, se pulsará a subir archivo, Figura 71. Si se quiere eliminar un archivo subido, el profesor tendrá que hacer clic en el símbolo de la papelera que aparece al lado del archivo, Figura 72, y aparecerá un recuadro de confirmación para saber si de verdad se quiere borrar, para prevenir que se elimine un archivo sin desearlo, en la Figura 73 y 74 aparecen ambos mensajes. Este no dejará borrarlo si se usa en otro recurso existente. Si de verdad se desea borrar, habrá que borrar primero los recursos que lo contengan. Figura 70: Menú desplegable desde profesor. 84 Figura 71: Selección de archivo desde profesor. Figura 72: Borrar archivo desde profesor. Figura 73: No se puede borrar desde profesor. Figura 74: Mensaje de confirmación desde profesor. 85 Paso 7: Crear recursos. Para ello se debe ir al menú superior derecha que hay en el nombre de usuario del profesor y se pulsará en “Crear Recursos”. Una vez se haya hecho esto, se podrá empezar a crear el recurso del profesor. Se le podrá dar un título y una descripción, Figura 75, y posteriormente, se elegirá los archivos y los links que se quieran introducir dentro del recurso. Los archivos se podrán escoger de dos secciones, como se muestra en la Figura 76. En la parte de la izquierda, estarán los archivos que ha subido el profesor y en la derecha, todos los archivos que se han subido a la web, por si se quiere utilizar un archivo que sea de otro profesor. Para seleccionarlos solo habrá que hacer clic en el checkbox que está situado al lado del archivo que se quiera introducir en el recurso. Más abajo se encuentran los links, Figura 77, que se seleccionarán de la misma forma, haciendo clic en su checkbox. Por último, se tendrá las opciones de previsualizar el recurso, para poder verlo antes de publicarlo, la opción de guardar, para continuarlo en otro momento, y para terminar, la opción de crear recurso, el cual lo creará y publicará, véase en la Figura 78. Figura 75: Título y descripción desde profesor. Figura 76: Elección de archivos desde profesor. 86 Figura 77: Selección de links desde profesor. Figura 78: Selección de opción desde profesor. Paso 8: Cerrar sesión. Por último, cuando se haya terminado la interacción con la web, para cerrar sesión el profesor deberá pulsar en el menú que está situado en la esquina superior derecha en su nombre de usuario y hacer clic en “Cerrar sesión”, Figura 79. Figura 79: Cerrar sesión desde profesor. 87 2. Alumno Paso 1: Inicio sesión, Figura 81. Se inicia su propia sesión desde la página de inicio de sesión, o en caso de que no se disponga una cuenta, se realiza un registro de cuenta, para que posteriormente sea activada por el profesor que se asocie. Para realizar el registro de cuenta se necesita un nombre de usuario, un correo con una contraseña, y por último, se selecciona el rol como estudiante y se indica que grupo quiere, esto se aprecia en la Figura 80. Figura 80: Registro de cuenta del alumno. Figura 81: Inicio de sesión del alumno. 88 Paso 2: Perfil. Para modificar o ver el perfil del alumno se deberá ir al menú superior y seleccionar “Perfil”. Se podrá ver el perfil del alumno, Figura 82 y se le dará a editar para modificarlo. Una vez hecho, se modificarán los campos que se quieran cambiar y se seleccionará en “Guardar cambios”. Los campos que el alumno podrá modificar son el nombre, la descripción, la foto y los estudios (GII, GIS y GIC). Figura 82: Modificar perfil del alumno. Paso 3: Visualizar recursos. Para poder visualizar todo el contenido del cual dispone el alumno, tendrá dos opciones. La primera se encuentra en la pestaña de inicio, la cual es la principal. En ella aparecerán todos los recursos creados por el profesor asociado, esto se muestra en la Figura 83. Para poder ver uno de estos recursos, el alumno simplemente tendrá que pulsar sobre él, y se le mostrará el contenido de este. La segunda opción es ir al menú superior y hacer clic en “Grupos”. Ahí aparecerán todos los grupos disponibles que haya, siendo cada grupo un lugar donde se podrán ver los recursos creados por el profesor asociado a ese grupo, véase en la Figura 84. Figura 83: Página principal del alumno. 89 Figura 84: Visualizar grupos desde alumno. Paso 4: Descargar archivos. Dentro del recurso, se seleccionará el elemento que se quiera descargar, haciendo clic en el archivo y, posteriormente, dándole a la opción de guardar archivo, o en su defecto, si es un PDF, dándole al símbolo de descarga situado en la esquina superior derecha. En las Figuras 85 y 86 se indica la descarga de varios archivos. Figura 85: Descarga del archivo desde alumno.