Herramienta de evaluación de calidad adaptativa a las normas de AENOR

Herramienta de evaluación de calidad adaptativa a las normas de AENOR TRABAJO DE FIN DE GRADO EN INGENIERÍA INFORMÁTICA Andrea Rueda Rueda Chaymae Riani Director: Antonio Sarasa Cabezuelo Facultad de Informática Universidad Complutense de Madrid Junio 2016 Autorización de difusión y utilización Andrea Rueda Rueda y Chaymae Riani, alumnas del Trabajo Fin de Grado (TFG) en el grado en Ingeniería Informática de la Facultad de Informática, autorizan a la Universidad Complutense de Madrid (UCM) a difundir con fines académicos, no comerciales y mencionando expresamente a su autor el Trabajo Fin de Grado (TFG) cuyos datos se detallan a continuación. Así mismo autorizan a la Universidad Complutense de Madrid a que sea depositado en acceso abierto en el repositorio institucional con el objeto de incrementar la difusión, uso e impacto del TFG en Internet y garantizar su preservación y acceso a largo plazo. TÍTULO del TFG: Herramienta de evaluación de calidad adaptativa a las normas de AENOR Curso académico: 2015/2016 Alumnas: _____________________ ____________________ Andrea Rueda Rueda Chaymae Riani Tutor del TFG: ____________________________ Antonio Sarasa Cabezuelo Me gustaría dedicar el presente trabajo a mi familia, especialmente a mi madre Corina y mi abuelito Segundo quien por desgracia nunca podrá ver que lo conseguí. - ANDREA RUEDA Agradecimientos En primer lugar quiero agradecer a mi tutor Antonio Sarasa Cabezuelo el esfuerzo, el tiempo y la paciencia invertida en este proyecto de fin de carrera y al estar siempre atento en contestar nuestros correos. Quiero agradecer a mis padres Moustafa y Bouchra, a mis hermanos Mohamed y Omar todo el esfuerzo que han hecho para que yo pudiese llegar aquí y, sobre todo, estos últimos años para que no me faltase de nada y pudiese terminar esta carrera. Quiero agradecerles todo el apoyo que me han brindado cuando lo he necesitado y la fuerza que me han dado para seguir adelante cuando pensaba que me estaba estancando. Quiero hacer una mención especial a mi amiga Andrea, compañeros de clase que me han ayudado mucho en la Universidad, explicarme cuando no entendía el español y preguntar siempre por mí. Quiero agradecer Halima, mi gran amiga, por esas sonrisas que siempre me han alegrado, y a todos mis amigos por su gran apoyo, por sus amistades y por estar allí cuando los necesito. Por último, quiero agradecer a la Universidad y profesores en general, por su dedicación y su esfuerzo, quienes me han aportado todos los conocimientos profesionales y personales para llegar a finalizar con éxito esta gran meta. - CHAYMAE RIANI Gracias a la Universidad Complutense de Madrid, en especial a la Facultad de Informática, por la formación adquirida, a mi director Antonio Sarasa por su tiempo, dedicación y su confianza para desarrollar este trabajo de fin de grado. Dar las gracias a Ana Fernández-Pampillon, por su feedback, tiempo y dedicación. Gracias a todos mis compañeros que han formado parte de mi vida universitaria, me han servido de inspiración, y por sus palabras de aliento, muchas gracias en especial a una gran amiga, compañera e hermana R.C que ha compartido 4 años de la vida universitaria. Gracias a unas grandes amigas (S.T y P.A) que en todo momento han confiado y me han apoyado. Gracias a mi familia que sin su ayuda y compresión no lo hubiera conseguido. Muchas gracias a todos los que han hecho posible finalizar una meta más. - ANDREA RUEDA RUEDA V Índice ÍNDICE DE FIGURAS ................................................................................................................................. VII RESUMEN ............................................................................................................................................... VIII ABSTRACT ................................................................................................................................................ IX 1. INTRODUCCIÓN ............................................................................................................................... 1 1.1. MOTIVACIÓN ........................................................................................................................................ 1 1.2. OBJETIVOS Y PLAN DE TRABAJO ................................................................................................................. 1 1.3. ESTRUCTURA DE LA MEMORIA .................................................................................................................. 3 2. TRABAJO RELACIONADO ................................................................................................................. 4 3. REQUISITOS DE LA APLICACIÓN ...................................................................................................... 5 3.1. USUARIOS ............................................................................................................................................ 5 3.2. REQUISITOS DE INTERFAZ DE USUARIO ........................................................................................................ 5 3.2.1. Restricciones generales: ........................................................................................................... 5 3.2.2. Restricciones técnicas: ............................................................................................................. 5 3.3. FUNCIONES DEL PRODUCTO...................................................................................................................... 5 3.4. REQUISITOS FUNCIONALES ....................................................................................................................... 6 3.4.1. Diagramas de casos de uso: ..................................................................................................... 6 3.4.2. Casos de uso del sistema: ......................................................................................................... 8 3.4.2.1. Casos de uso de la evaluación ............................................................................................................. 8 3.4.2.2. Casos de uso de Configuración de la herramienta ............................................................................ 14 4. TECNOLOGÍAS USADAS ................................................................................................................. 18 4.1. BOOTSTRAP ........................................................................................................................................ 18 4.2. JQUERY .............................................................................................................................................. 19 4.3. NESTABLE ........................................................................................................................................... 20 4.4. JSON ................................................................................................................................................ 20 4.5. PHP .................................................................................................................................................. 20 4.6. MYSQL ............................................................................................................................................. 21 4.7. JAVASCRIPT ........................................................................................................................................ 21 4.8. CSS3 ................................................................................................................................................ 21 4.9. HTML5 ............................................................................................................................................. 21 4.10. AJAX ............................................................................................................................................ 22 4.11. XML ............................................................................................................................................. 22 5. ARQUITECTURA ............................................................................................................................. 24 6. MODELO DE DATOS ...................................................................................................................... 25 6.1. REPRESENTACIÓN DEL MODELO .............................................................................................................. 25 6.2. DESCRIPCIÓN DE LAS TABLAS .................................................................................................................. 26 7. DISEÑO DE LA APLICACIÓN ........................................................................................................... 29 7.1. FRONT-END ........................................................................................................................................ 29 7.1.1. Pantalla principal ................................................................................................................... 29 7.1.2. Materiales .............................................................................................................................. 30 7.1.3. Evaluación de un material didáctico ...................................................................................... 31 7.1.4. Configuración ......................................................................................................................... 31 7.1.5. Añadir ítems ........................................................................................................................... 32 7.1.6. Ordenar criterios e ítems ........................................................................................................ 32 7.2. BACK-END .......................................................................................................................................... 33 VI 7.3. ESTRUCTURA INTERNA DE LA APLICACIÓN .................................................................................................. 33 8. PRUEBAS ....................................................................................................................................... 35 8.1. PRUEBAS UNITARIAS ............................................................................................................................. 35 8.1.1. Prueba de enlaces rotos ......................................................................................................... 35 8.1.2. Validación de HTML ............................................................................................................... 36 8.1.3. Validación de CSS ................................................................................................................... 37 8.1.4. Compatibilidad con los navegadores ..................................................................................... 37 8.1.4.1. Mozilla Firefox ................................................................................................................................... 38 8.1.4.2. Internet Explorer ............................................................................................................................... 38 8.1.4.3. Google Chrome ................................................................................................................................. 39 8.1.5. Pruebas funcionales ............................................................................................................... 39 9. CONCLUSIONES Y TRABAJO FUTURO ............................................................................................. 40 9.1. TRABAJO FUTURO ................................................................................................................................ 40 9.2. DESCRIPCIÓN DEL TRABAJO REALIZADO POR CADA UNO ................................................................................ 41 10. BIBLIOGRAFÍA ............................................................................................................................... 47 ANEXO 1: MANUAL DE INSTALACIÓN ......................................................................................................... 1 ANEXO 2: MANUAL DE USUARIO ................................................................................................................ 1 VII Índice de figuras Figura 1 - Diagrama de caso de uso ....................................................................................................................... 7 Figura 2 - Estructura de Bootstrap ........................................................................................................................ 18 Figura 3 - Distribución básica de Bootstrap ......................................................................................................... 19 Figura 4 - Sintaxis de una lista de valores ............................................................................................................. 20 Figura 5 - Informe de evaluación en XML ............................................................................................................. 23 Figura 6 - Arquitectura cliente/servidor................................................................................................................ 24 Figura 7 - Modelo de datos ................................................................................................................................... 25 Figura 8 - Pantalla principal en un Ordenador...................................................................................................... 29 Figura 9 - Pantalla principal Móvil ........................................................................................................................ 30 Figura 10 - Pantalla de los Materiales Educativos Didácticos ............................................................................. 31 Figura 11 - Pantalla de evaluación ....................................................................................................................... 31 Figura 12 - Pantalla de configuración ................................................................................................................... 32 Figura 13 - Pantalla de Añadir items .................................................................................................................... 32 Figura 14 - Pantalla de Ordenar la norma ............................................................................................................ 33 Figura 15 - Estructura interna ............................................................................................................................... 34 VIII Resumen Actualmente en internet se puede encontrar información y materiales prácticamente de cualquier tema. Sin embargo los avances para clasificar y medir la calidad de los materiales han sido mínimos y dispersos. Cualquiera puede crear un material y publicarlo, pero nadie asegura ni garantiza que ese material será accesible o si sus contenidos serán adecuados para el estudio. Esta situación hace que, aunque se disponga de un número inabarcable de materiales, sea complicado recuperar aquellos con una calidad mínima. Este problema general se agudiza en dominios de formación, como el universitario, donde los profesores crean y actualizan continuamente sus materiales educativos digitales sin ninguna orientación sobre los requisitos mínimos para que sus materiales no tengan problemas técnicos – como portabilidad y durabilidad-, didácticos –como la coherencia entre objetivos y destinatarios, y formato y diseño adecuados al estudioy, de accesibilidad –como garantizar la perceptibilidad del contenido audiovisual y textual-. En este contexto, se ha creado una norma UNE de calidad de los materiales educativos. Tomando como base dicha nota se ha desarrollado una herramienta web que implementa la norma y facilita la evaluación de la calidad de un material educativo digital. En el presente trabajo fin de grado se presenta la herramienta desarrollada, sus principales características y funcionalidades desarrolladas. Palabras clave: calidad, adaptabilidad, evaluación, materiales didácticos, AENOR, herramienta web. IX Abstract Currently in internet you can find information and materials practically about any topic. However advances to classify and measure the quality of the materials have been minimal and far between. Anyone can create a material and publish it, but nobody assures or warrants that such material will be accessible or if its contents will be suitable for study. This situation means that, even if you have an unmanageable number of materials, it is difficult to recover those with a minimum quality. This general problem is exacerbated training in domains such as the university, where teachers create and update their digital educational materials continuously without any guidance on the minimum requirements so that their materials do not have technical problems such as portability and durability, didactic, as consistency between objectives and targets, and format and design appropriate to studyand, like accessibility ensure conspicuity of audiovisual and textual content. In this context, is created a standard UNE of educational material’s quality. Based on that note it has developed a tool web that implements the standard and facilitates the evaluation of the quality of educational digital material. In this final project the tool developed is presented, its main features and functionalities developed. Keywords: quality, adaptability, evaluation, didactic materials, AENOR, web tool. 7 Figura 1 - Diagrama de caso de uso 8 3.4.2. Casos de uso del sistema: 3.4.2.1. Casos de uso de la evaluación Función: UC-01 Añadir material. Prioridad: Alta. Estabilidad: Alta Descripción: Añadir un material educativo por el evaluador. Entrada: Datos del material (Nombre, Descripción). Salida: Salida por interfaz con mensaje informando de que el objeto ha sido añadido. Origen: Interfaz. Destino: Sistema. Necesita: Una tabla en la bases de datos donde se guarda los materiales añadidos. Acción: Añadir material. Precondición: Existencia de una base de datos y una tabla que deberá tener columnas donde se guarda toda la información del material. Post-condición: Se añade un material en estado borrador para que será evaluado posteriormente. Función: UC-02 Evaluar material. Prioridad: Alta. Estabilidad: Alta Descripción: Evaluar un material educativo por el evaluador. Entrada: Pulsar sobre el botón Evaluar. Salida: Acceder a la página de evaluación. Origen: Interfaz. Destino: Sistema. Necesita: Una tabla en la bases de datos donde se guarda las evaluación del material seleccionado. Acción: Evaluar material. Precondición: Existencia de una base de datos y una tabla que deberá tener columnas donde se guarda toda la información de la evaluación y que el estado del materia tiene que ser en estado borrador. 9 Post-condición: Se accede a la evaluación correctamente. Función: UC-03 Descarga final de la evaluación. Prioridad: Alta. Estabilidad: Alta Descripción: Descargar la evaluación del material en formato XML. Entrada: Pulsar sobre el butrón Evaluar. Salida: Acceder a la página de evaluación. Origen: Interfaz. Destino: Sistema. Necesita: Un fichero guardado en la bases de datos con el ID y el nombre del material. Acción: Descargar Evaluación. Precondición: Que el material este en estado (Evaluado o Cancelado). Post-condición: Se descarga el fichero de evaluación correctamente. Función: UC-04 Eliminar material. Prioridad: Alta. Estabilidad: Alta Descripción: Eliminar un material educativo por el evaluador. Entrada: Pulsar sobre el butrón Eliminar. Salida: Salida por interfaz con mensaje informando de que el material ha sido eliminado. Origen: Interfaz. Destino: Sistema. Necesita: Seleccionar el material a eliminar. Acción: Eliminar material. Precondición: Esta acción solo está permitida por el evaluador. Post-condición: Se elimina el material de la base de datos. Función: UC-05 Buscar material por ID. Prioridad: Media. Estabilidad: Media 10 Descripción: Buscar un material por su identificador. Entrada: Escribir el identificador del material. Salida: Mostrar el material con ese identificador. Origen: Interfaz. Destino: Sistema. Acción: Buscar material. Post-condición: Se muestra solo el material buscado. Función: UC-06 Buscar material por estado. Prioridad: Media. Estabilidad: Media Descripción: Buscar un material por su estado. Entrada: Seleccionar el estado (evaluado o borrador). Salida: Mostrar el material con ese estado. Origen: Interfaz. Destino: Sistema. Acción: Buscar material. Post-condición: Se muestra los materiales con ese estado. Función: UC-07 Buscar material por nombre. Prioridad: Media. Estabilidad: Media Descripción: Buscar un material por su nombre. Entrada: Escribir el nombre. Salida: Mostrar el material con ese nombre. Origen: Interfaz. Destino: Sistema. Acción: Buscar material. Post-condición: Se muestra los materiales con ese nombre. 11 Función: UC-08 Guardar borrador. Prioridad: Media. Estabilidad: Media Descripción: Guardar la evaluación y regresar a página de inicio. Entrada: Pulsar sobre el butrón Guardar borrador. Salida: Regresar a la página de inicio. Origen: Interfaz. Destino: Sistema. Acción: Guardar borrador. Post-condición: Se guarda la evaluación y se regresa a la página de inicio. Función: UC-09 Finalizar evaluación. Prioridad: Alta. Estabilidad: Alta Descripción: Se finaliza la evaluación guardándola en un fichero formato XML en la base de datos, y regresando a la página de inicio cambiando el estado de material a evaluado. Entrada: Pulsar sobre el butrón finalizar evaluación. Salida: Regresar a la página de inicio. Origen: Interfaz. Destino: Sistema. Acción: Finalizar Evaluación. Post-condición: Se crea un fichero XML de evaluación y se guarda en la base de datos correctamente y se finaliza la evaluación del material. Función: UC-10 Descargar. Prioridad: Alta. Estabilidad: Alta Descripción: Permite descargar la evaluación en cada momento. Entrada: Pulsar sobre el botón Descargar. Salida: Se descarga un fichero XML con el nombre de la material. Origen: Interfaz. Destino: Sistema. 12 Acción: Descargar Evaluación. Post-condición: Se descarga el fichero de evaluación correctamente. Función: UC-11 Descargar. Prioridad: Alta. Estabilidad: Alta Descripción: Descargar la evaluación del material en formato XML. Entrada: Pulsar sobre el butrón Evaluar. Salida: Acceder a la página de evaluación. Origen: Interfaz. Destino: Sistema. Necesita: Un fichero guardado en la bases de datos con el ID y el nombre del material. Acción: Descargar Evaluación. Precondición: Que el material este en estado (Evaluado o Cancelado). Post-condición: Se descarga el fichero de evaluación correctamente. Función: UC-12 Modificar puntuación. Prioridad: Alta. Estabilidad: Alta Descripción: Seleccionar la puntuación del ítem. Entrada: Seleccionar de la lista de puntuaciones. Salida: Marcar lo seleccionado. Origen: Interfaz. Destino: Sistema. Necesita: Un mínimo y un máximo que están guardadas en la bases de datos. Acción: Seleccionar puntuación. Precondición: Que la puntuación tiene que estar entre el mínimo y el máximo Post-condición: Se añade la puntuación correctamente. Función: UC-13 Marcar No aplicable. Prioridad: Alta. Estabilidad: Alta 13 Descripción: Marcar no aplicable en el caso que no se quiere dar la puntuación del ítem. Entrada: Marcar no aplicable. Salida: Se marca la casilla no aplicable. Origen: Interfaz. Destino: Sistema. Acción: Marcar. Precondición: Hay que escribir una observación obligatoriamente antes de marcar la casilla no aplicable. Post-condición: Se añade al resultado 1 ítem no aplicable. Función: UC-14 Añadir observación. Prioridad: Alta. Estabilidad: Alta Descripción: Añadir una observación por el evaluador que será obligatoria en caso de un ítem no aplicable. Entrada: Escribir una observación. Salida: Se guarda la observación. Origen: Interfaz. Destino: Sistema. Post-condición: Se añade la observación correctamente. Función: UC-15 Guardar resultado. Prioridad: Alta. Estabilidad: Alta Descripción: Se guarda todas las modificaciones realizadas en cada criterio. Entrada: Pulsar el botón Guardar. Salida: Mensaje de notificación. Origen: Interfaz. Destino: Sistema. Acción: Pulsar el botón Guardar. Post-condición: Se añade al resultado todas las modificaciones. 14 3.4.2.2. Casos de uso de Configuración de la herramienta Función: UC-01 Añadir criterio. Prioridad: Alta. Estabilidad: Alta Descripción: Añadir un nuevo criterios desde la interfaz de la aplicación. Entrada: Datos del criterio (Nombre, Descripción) que quiere dar de alta. Salida: El nuevo criterio aparece listado en la lista de criterios. Origen: Interfaz. Destino: Sistema. Necesita: Una tabla en la bases de datos donde se guarda los criterios añadidos. Acción: Al pulsar sobre el icono que aparece en la parte inferior del listado de los criterios, lo que genera un formulario en la que el evaluador debe rellenar el nombre y la descripción del criterio que quiere dar de alta. A continuación pulsa sobre añadir. Post-condición: Se añade el nuevo criterio a la base de datos. Función: UC-02 Editar criterio. Prioridad: Alta. Estabilidad: Alta Descripción: Modificar los datos de un criterio, su nombre, descripción o añadirle ítems. Entrada: Datos del criterio (Nombre, Descripción o los datos de los ítems que quiere dar de alta) que quiere modificar. Salida: Los cambios se reflejan en los criterios modificados. Origen: Interfaz. Destino: Sistema. Acción: Al pulsar sobre el icono editar que aparece en la columna de opciones, lo que genera una nueva página en la que el evaluador puede modificar el criterio. Post-condición: Se actualizan los cambios del criterio a la base de datos. Función: UC-03 Eliminar criterio. Prioridad: Alta. Estabilidad: Alta Descripción: Elimina un criterio de la lista de criterios desde la interfaz de la aplicación. 15 Entrada: Pulsar sobre el icono eliminar. Salida: El criterio desaparecerá del listado de criterios. Origen: Interfaz. Destino: Sistema. Acción: Al pulsar sobre el icono eliminar que aparece en la columna de opciones de la tabla del listado de los criterios. Post-condición: Se elimina el criterio con sus ítems de la base de datos y de la lista de criterios. Función: UC-04 Ordenar criterios. Prioridad: Media. Estabilidad: Media Descripción: Ordenar los criterios desde la interfaz de la aplicación para mejorar su visualización en la página de evaluación. Entrada: Es la posición del criterio arrastrado. Salida: El nuevo criterio su nueva posición. Origen: Interfaz. Destino: Sistema. Necesita: Una columna en la tabla de bases de datos donde se guarda nueva posición de criterio arrastrado. Acción: Al pulsar sobre el botón Ordenar criterios e ítems que aparece en la parte inferior del listado de los criterios, lo que genera una nueva página en la que el evaluador debe arrastrar el criterio a la posición adecuada pulsando en icono arrastrar. Post-condición: Se cambia la posición del criterio. Función: UC-05 Añadir ítem. Prioridad: Alta. Estabilidad: Alta Descripción: Añadir un nuevo ítem desde la interfaz del evaluador. Entrada: Datos del ítem (Nombre, Descripción, Nivel) que quiere dar de alta. Salida: El nuevo ítem aparece listado en la lista de ítems. Origen: Interfaz. Destino: Sistema. Necesita: Una tabla en la bases de datos donde se guarda los ítems añadidos. 16 Acción: Al pulsar sobre el icono editar que aparece en la columna opciones de la tabla ítems del listado de los ítems, lo que genera un formulario en la que el evaluador debe rellenar el nombre, la descripción y el nivel del ítem que quiere dar de alta. A continuación pulsar sobre añadir. Precondición: Debe existir un criterio en la lista para que se pueda añadirle sus ítems. Post-condición: Se añade el nuevo ítem a la base de datos y se muestra en la página de evaluación junto con su criterio. Función: UC-06 Editar ítem. Prioridad: Media. Estabilidad: Media. Descripción: Modificar los datos de un ítem, su nombre, descripción o nivel. Entrada: Datos del ítem (Nombre, Descripción o nivel) que quiere modificar. Salida: Los cambios se reflejan en los ítems modificados. Origen: Interfaz. Destino: Sistema. Acción: Al pulsar sobre el icono editar que aparece en la columna de opciones, lo que genera una nueva página en la que el evaluador debe puede modificar el ítem. Post-condición: Se actualizan los cambios del ítem a la base de datos. Función: UC-07 Eliminar ítem. Prioridad: Alta. Estabilidad: Alta Descripción: Elimina un ítem de la lista de ítems desde la interfaz de la aplicación. Entrada: Pulsar sobre el icono eliminar. Salida: El criterio desaparecerá del listado de ítems. Origen: Interfaz. Destino: Sistema. Acción: Al pulsar sobre el icono eliminar que aparece en la columna de opciones de la tabla del listado de los ítems. Post-condición: Se elimina el ítem de la base de datos y del criterio que corresponde. 23 Figura 5 - Informe de evaluación en XML 24 5. Arquitectura La arquitectura usada en nuestra aplicación es el modelo cliente/servidor. Cliente (Navegador web) Servidor Figura 6 - Arquitectura cliente/servidor Se ha utilizado como entorno de desarrollo xamp y wamp ya que integran en una sola herramienta PHP, MySQL, Apache. Para este proyecto el navegador web es el que actúa como cliente solicitando las páginas PHP al servidor (Apache) que a la vez es quien hace de interfaz con la comunicación a la base de datos (MySQL). El servidor web deberá cumplir con los siguientes requisitos mínimos: Software:  Servidor Apache 2.4.17 o posteriores.  PHP 5.6.15.  MySQL versión 5 o posteriores. Hardware: Al no ser una aplicación pesada, para alojar la aplicación se necesitará 500MB, luego es contratar el tráfico que se desee dar. BBDD Petición Respuesta 25 6. Modelo de datos Para implementar la persistencia de los datos, se ha utilizada una base de datos relacional de tipo MySQL. A continuación se describe la estructura de las tablas que constituyen la base de datos. 6.1. Representación del modelo La BBDD está formada por 9 tablas:  Ítems: esta tabla contiene toda la información relativa a los ítems (norma) a evaluar, dependiendo del criterio.  Criterios: esta tabla contiene toda la información relativa a los criterios porque se rige una norma de calidad.  Oas: esta tabla contiene la información del material didáctico.  Evaluaciones: esta tabla contiene la información relativa a la evaluación realizada para cada ítem de un criterio de un material didáctico.  Resultado: esta tabla contiene toda la información del resultado obtenido para cada criterio de la evaluación.  Resultados: esta tabla contiene toda la información relativa a los resultados globales de la evaluación realizada por el usuario.  Docs: esta tabla contiene todos los documentos .xml de las evaluaciones realizadas que sirven como un informe o para generar un servicio externo.  Rango: esta tabla contiene toda la información relativa al rango que se usa actualmente para puntuar un ítem del criterio.  Glosario: esta tabla contiene todos los términos que puede consultar un evaluador por si no sabe de qué significa una palabra. Figura 7 - Modelo de datos 26 6.2. Descripción de las tablas En esta parte se explicaran cada uno de los campos de las tablas. Tabla items Campo Tipo Obligatorio Descripción id int autoincrement Es un campo de autoincremental que identifica de forma única a un ítem. item_es varchar Si Es el nombre que identifica al ítem. descripcion_es varchar Si Es la descripción (información) que se le quiere dar al ítem para que se le muestre al evaluador. id_criterio int Si Clave ajena que corresponde al identificador de un criterio. nivel int Si Nos dice si el nivel que va a tener el ítem en la evaluación ya sea mínimo o excelente. orden int No Este campo indica el orden en el que se le va a mostrar el ítem en la evaluación. Tabla criterios Campo Tipo Obligatorio Descripción id int autoincrement Campo autoincremental que identifica de forma única a un criterio. titular_es varchar Si Nombre del criterio descripcion_es varchar Si Descripción del criterio orden int No El orden en el que se mostrará el criterio dentro de la evaluación. Tabla oas Campo Tipo Obligatorio Descripción id int autoincrement Campo autoincremental que identifica de forma única a un material didáctico. titular varchar Si Nombre del material didáctico. descripcion varchar No Descripción del material didáctico. estado varchar No Indica en qué estado está el material, ya sea Borrador, Cancelado*, Evaluado. 27 Tabla evaluaciones Campo Tipo Obligatorio Descripción id_criterio int Si Clave ajena que identifica el criterio evaluado id_item int Si Clave ajena que identifica el ítem evaluado. id_OA int Si Clave ajena que identifica el material evaluado. puntuacion float Si Campo que tiene la puntuación con la que el evaluador ha evaluado ese ítem dentro de ese criterio. observaciones varchar No Tienes las observaciones por parte del evaluador sobre el ítem. no_applicable int No Este campo nos dice si el ítem ha sido considerado no aplicable para la evaluación de este material. status int No Toma el valor 1 o 0 según si el ítem evaluado es aplicable o no. Tabla docs Campo Tipo Obligatorio Descripción id int autoincrement Es un campo autoincremental que identifica de forma única a un documento de la evaluación realizada. Id_OA int Si Clave ajena que identifica el material didáctico. documento mediumblob No El documento .xml del resultado de la evaluación nombre varchar No Nombre del documento .xml en todos los casos el nombre será el mismo que el nombre del material. Tabla resultado Campo Tipo Obligatorio Descripción id int autoincrement Es un campo autoincremental que identifica de forma única cada resultado por criterio. id_criterio int Si Clave ajena que identifica a un criterio. id_oa int Si Clave ajena que identifica a un material didáctico. minimos int No Cuantos mínimos tiene un criterio. total int No Cuál es la puntuación total de cada criterio. no_aplicables int No Cuantos ítems del criterio han sido marcados como no aplicables. 28 Tabla resultados Campo Tipo Obligatorio Descripción id int autoicrement Es un campo autoincremental que identifica de forma única al resultado global obtenido en la evaluación. id_oa int Si Clave ajena que identifica a un material didáctico. itemsnum int No El número de ítems que han sido evaluados. minimos int No Numero de ítems mínimos que tiene toda la evaluación. aplicable int No Número de ítems totales de la evaluación que son mínimos. na int No Número de ítems que son marcados como no aplicables en toda la evaluación. total int No Es la valoración final del material. ratio double No Según este ratio obtenido de la evaluación se categorizará la calidad del material didáctico. Observaciones_finales text No Valoración cualitativa del material didáctico. itemsevaluados int No Tiene el total de ítems que han sido evaluados. Tabla rango Campo Tipo Obligatorio Descripción id int Si Campo autoincremental. minimo int No Indica el rango mínimo con el que se puede evaluar un material didáctico. maximo int No Indica el rango máximo con el que se puede evaluar un material didáctico. Tabla glosario Campo Tipo Obligatorio Descripción id int Si Campo autoincremental que identifica de forma única a cada término. termino varchar Si Nombre del término. descripcion varchar Si Descripción del término. 29 7. Diseño de la aplicación En esta sección se explicaran el diseño de la aplicación tanto front-end y back-end. 7.1. Front-end Es el diseño de la aplicación que es visible al usuario, la cual está constituida por las diferentes interfaces con las que el usuario va a interactuar. Para el diseño frontend hemos usado Bootstrap ya que es un framework de diseño frontend response lo que da flexibilidad al desarrollador de hacer la aplicación adaptable para los diferentes dispositivos del mercado. El objetivo del diseño de la aplicación fue la comodidad y uso del usuario, para ello se tuvo en cuenta que las funcionalidades fueran de rápido acceso e intuitivas. Las principales pantallas de la aplicación son: 7.1.1. Pantalla principal Se ha optado por un diseño simple y donde el usuario tenga acceso rápido a las principales secciones de la aplicación. Figura 8 - Pantalla principal en un Ordenador Esta página esta también diseñada para que sea responsive. 30 Figura 9 - Pantalla principal Móvil 7.1.2. Materiales Se presenta el diseño final que tiene la página de los materiales que tiene el evaluador, teniendo un fácil acceso a todos ellos así como a las diferentes funcionalidades, para esta página hemos seguido un diseño de las funcionalidades mediante iconos que indican la acción a realizar y para quien no los conoce tiene un tooltip con la información. 31 Figura 10 - Pantalla de los Materiales Educativos Didácticos 7.1.3. Evaluación de un material didáctico En esta página se muestra la interfaz que implementa la norma, para ello se ha diseñado la página de modo que el evaluador tenga siempre a mano cada una de las funcionalidades a realizar. Figura 11 - Pantalla de evaluación 7.1.4. Configuración A continuación se muestra la pantalla principal donde el evaluador puede configurar la norma, de forma que en cada momento se adapte a las necesidades deseadas. 32 Figura 12 - Pantalla de configuración 7.1.5. Añadir ítems Para las acciones de añadir, modificar un criterio e ítem se han implementado mediante una ventana modal 1 donde se deben llenar los diferentes campos. Figura 13 - Pantalla de Añadir ítems 7.1.6. Ordenar criterios e ítems Es una pantalla donde al evaluador se le da la flexibilidad de cambiar el orden en el que quiere que se le muestren los criterios e ítems al evaluador tan solo con arrastrar y soltar donde quiere que se muestre. 1 Una ventana modal es una ventana de dialogo. Para más información ver: Ventana modal 39 8.1.4.3. Google Chrome 8.1.5. Pruebas funcionales Se realizaron pruebas de los componentes individuales a nivel de módulo y de función dentro de cada uno.  Para cada función se comprobó que con unos parámetros de entrada concretos devuelve el resultado esperado.  Se probaron parámetros válidos, del tipo que espera la función, parámetros inválidos de tipo incorrecto, por ejemplo pasar una cadena cuando se espera un entero. Usar parámetros con valores límites, por ejemplo no puede ser el mínimo mayor que el máximo en la funcionalidad de cambiar rango.  Se ha probado las páginas Web, se ha comprobado que muestra correctamente los contenidos para cada posible opción que el evaluador pueda seleccionar, por ejemplo, navegar por los criterios, guardar borrador, evaluar material, descargar, etc.  Se han realizado pruebas de aceptación por parte del personal de la empresa que van a usar esta herramienta. Estas pruebas se realizaran cuando el resultado de las pruebas de los desarrolladores haya sido satisfactorio. 40 9. Conclusiones y trabajo futuro Finalizando el proyecto hemos llegado a las siguientes conclusiones: Nuestro proyecto presenta de forma novedosa una herramienta web para la evaluación de la calidad de materiales educativos digitales. La herramienta aporta a la norma de calidad AENOR:  Una interfaz sencilla y clara para presentar la información con un nivel de densidad adecuado.  La organización de la evaluación en pasos con la posibilidad de almacenar y revisar los pasos realizados en cualquier momento de la evaluación y la posibilidad de generar informes finales en formato XML una vez terminada la evaluación y durante la evaluación para obtener un informe previo.  La gestión de modo local de las evaluaciones de calidad de una entidad educativa.  Finalmente, la posibilidad de adaptarse a cualquier cambio futuro de la norma del modelo de evaluación. La experiencia con las tecnologías usadas nos ha permitido desarrollar una aplicación de complejidad media, a la vez aprender y enriquecer nuestros conocimientos. 9.1. Trabajo futuro En cuanto al trabajo futuro, existen estas extensiones de la herramienta:  Gestión de usuarios.  La interfaz podrá configurase para varios idiomas facilitando de esta manera el uso plurilingüe de la misma.  Completar el diseño responsive de la aplicación.  La integración de los resultados de la evaluación de los materiales educativos digitales en sus metadatos. De esta forma los usuarios de los materiales podrían conocer los niveles de calidad del material en cada uno de los aspectos didáctico, técnico y de accesibilidad previstos por la futura norma UNE.  La explotación estadística de los resultados de las evaluaciones realizadas.  La conexión con repositorios educativos digitales de forma que las evaluaciones puedan añadirse a materiales que se encuentran en dichos repositorios. Conclusions and future work Completing the project we have reached the following conclusions: Our project presents a novel way a web tool for the evaluation of the Quality of digital educational materials. The tool contributes to the quality standard AENOR: 41  A simple and clear interface to present information with a level of suitable density  The organization of evaluation in steps with the ability to store and review the steps taken at any time of the evaluation and the possibility of generating final reports in XML format once the evaluation and for the assessment to obtain a previous report.  Local management mode quality assessments of an educational institution.  Finally, the ability to adapt to any future changes of the standard evaluation model. The experience with the technologies used allowed us to develop an application of medium complexity, and also learn and enrich our knowledge in the same time. Future work As for the future work, exist extensions of the tool:  User Management.  The interface can be configured for multiple languages thus facilitating the multilingual use thereof.  Complete the responsive design of the application.  The integration of the results of the evaluation of educational digital material in its metadata .Thus users of the materials could meet the quality standards of the material in each of the didactic aspects, technical and accessibility provided by the future UNE.  The statistical exploitation of the results of the evaluations made.  The connection to digital educational repositories so that evaluations can be added to materials found in these repositories. 9.2. Descripción del trabajo realizado por cada uno Se describen las contribuciones personales de cada uno de los integrantes del proyecto.  Andrea Rueda Rueda Antes que nada me gustaría destacar el trabajo realizado conjuntamente, sobre todo en la fase inicial del mismo, análisis de los requisitos de la aplicación, intercambio de ideas, reuniones personales como a través de internet durante todo el desarrollo del proyecto, en resumen el trabajo y coordinación que como equipo hemos formado y han permitido la finalización con éxito de este proyecto. Mi contribución:  Durante el desarrollo de todo el proyecto, tanto para la parte front-end y back-end, se ha tenido que hacer una investigación previa de todas las tecnologías a usar en el proyecto, ya sea a través de google o mediante libros de referencia consultados.  Investigación de la tecnología de Bootstrap, realizando prototipos de pruebas con la maquetación de bootstrap; siguiendo tutoriales, foros, entre otras fuentes de información sobre el funcionamiento de esta tecnología. 42 Las principales páginas consultadas para sacar todo el provecho fueron: la propia web de bootstrap (como empezar, CSS, JavaScript, personalización) (Tutoriales Bootstrap, 2016). Otra página de referencia que utilice durante todo el proyecto ha sido la página de w3schools ya que dispone de una explicación y de una ventana para probar cada una de las funcionalidades en la propia web (Tutorial de Bootstrap en w3schools, 2016).  Me encargado de la maquetación front-end de la página, para ello he utilizado la tecnología de Bootstrap, HTML5, CSS3. Personalizando bootstrap, creando nuestros propios estilos y componentes de la aplicación. De nuevo la principal fuente de información ha sido w3schools que dispone de los tutoriales de estas tecnologías. Además de los foros e libros.  Diseño de la base de datos del proyecto, además de las respectivas restricciones de integridad del mismo. Inicialmente no se tuvieron en cuenta la utilidad de dos tablas (resultado, resultados) que con el desarrollo del mismo mi compañera vio la necesidad de tenerlas.  Las principales fuentes de información que utilice para recordar los conocimientos adquiridos en la carrera, fueron los apuntes de la asignatura de Base de Datos, así como el libro (MySQL, 2016).  Investigación de cómo utilizar Ajax para la comunicación de datos entre el cliente y servidor. Y utilizar esta tecnología para la implementación de las funcionalidades que realice.  La principal fuente de información ha sido la web de jQuery.ajax (Documentación de la API de jQuery Ajax, 2016), así como de los tutoriales de w3schools, foros e internet en general.  Me encargue de la gestión de materiales educativos digitales, para ello realice la funcionalidad de permitir añadir nuevos materiales (mediante ventana de modal de bootstrap y eventos de jQuery), así como de poder eliminarlos. Actualizando la respectiva base de datos y respetando la integridad de la misma (para esto se realizó una comunicación mediante Ajax con PHP y MySQL).  Me encargue de la gestión de la norma de calidad para ello realice la funcionalidad de añadir, modificar, eliminar criterios e ítems de evaluación. Actualizando la respectiva base de datos y respetando la integridad de la misma.  Implemente la funcionalidad de configurar el rango de valores por el que se desea puntuar un ítem del criterio de la norma. Dando así flexibilidad y adaptabilidad al usuario de configurar la norma de acuerdo a las necesidades actuales.  Investigación de cómo implementar y dar la funcionalidad al usuario de ordenar la norma para que se presenten en el orden deseado al evaluador. Para implementar esta funcionalidad me encontré con varias sugerencias: una implementación desde cero a través de JavaScript, o utilizando una librería externa. Tomando la opción de utilizar la librería Nestable (Bushell, 2012) que tenía implementada 43 la funcionalidad de drag & drop (arrastrar y soltar) y devolvía un array con los valores de la lista.  Otro punto que investigue fue como pasar la información desde el cliente al servidor de una manera sencilla, ya que lo que se necesitaba era pasar un array de valores que contenía toda la información de la lista de elementos de como tendría que estar ordenado, para ello me encontré con usar JSON para pasar los valores del cliente al servidor mediante Ajax. (Prettyman, 2016)  Partiendo de la investigación de los dos puntos anteriores y después de realizar unas pruebas de funcionamiento de la librería Nestable, implemente la funcionalidad de ordenar la norma de calidad (criterios e ítems), permitiendo esta funcionalidad al usuario y actualizando la base de datos. A continuación se muestra la parte del código HTML y PHP que pintan los valores al usuario: <div class="dd" id="nestable3"> <ol class="dd-list"> <?php $query_criterios = "SELECT id, titular_es FROM criterios ORDER BY orden"; $lista_criterios = $mysqli->query($query_criterios) or die ($mysqli->error. " en la línea ".(__LINE__-1)); $num_filas = $lista_criterios->num_rows; if($num_filas == 0){ echo "<h4> Aún no hay criterios para ordenar, ir a configuración y añadir criterios.</h4>"; } while($registro = $lista_criterios->fetch_assoc()){ ?> <li class="dd-item dd3-item" data-id="<?php echo $registro['id']; ?>"> <div class="dd-handle dd3-handle">Drag</div> <div class="dd3-content justificar"> <?php echo $registro['titular_es']; ?> <span class="glyphicon glyphicon-cog right ordItemsC" onclick="parent.location='ordenarItems.php?id=<?php echo $registro['id'];?>'" datatoggle="Configuracion" title="Ordenar items del Criterio"></span> </div> </li> <?php } $lista_criterios->free(); $mysqli->close(); ?> </ol> </div> A continuación se presenta la función JavaScript y Ajax que toma la información de la interfaz y se la pasa al servidor como un array de JSON. var updateCriterios = function(e) { var list = e.length ? e : $(e.target), output = list.data('outputC'); if (window.JSON) { var ordenCriterios = list.nestable('serialize'); console.log(ordenCriterios); var jObject = {}; 44 for (var i=0; i < ordenCriterios.length; i++){ jObject[i] = ordenCriterios[i]['id']; } jObject= JSON.stringify(jObject); //mando a ordenar en la BD $.ajax({ type:'post', cache:false, url:"php/ordenarCriteriosBD.php", data:{jObject: jObject}, success:function(server){ } }); } else { output.val('JSON browser support required for this demo.'); } };  En resumen me encargue de la maquetación de la aplicación, diseño de la base de datos y la implementación de la funcionalidad de configuración de la norma de calidad, además de la gestión de los materiales didácticos. Sin olvidar mencionar de todo el trabajo conjuntamente, ideas y decisiones tomadas en equipo con mi compañera a lo lardo del proyecto.  Chaymae Riani Como menciono mi compañera antes, el trabajo y coordinación que como equipo que hemos formado permitió la finalización con éxito de este proyecto. Desde la fase inicial de la investigación y análisis de requisitos, dividir las tareas entre nosotras, comunicación e intercambio de ideas comunicándonos a distancia por internet o por reuniones en la biblioteca. Mi contribución:  Durante la parte inicial del proyecto investigué sobre las nuevas tecnología del proyecto Bootstrap, HTML5, CSS3 creando prototipos iniciales que no tienen nada que ver con la versión final.  Instalé un servidor web (WampServer) para poder crear aplicaciones web con Apache 2, PHP y una base de datos MySQL. Al lado, PhpMyAdmin permite administrar fácilmente sus bases de datos.  Me encargue de la parte de evaluación de los materiales mediante una combinación de las tecnologías AJAX, jQuery y PHP. Que nos permiten crear aplicaciones interactivas, dinámicas y atractivas. Y también hemos añadido JSON como formato de intercambio de datos. 45  Implementar la funcionalidad del botón evaluar de un material, que consiste en entrar a la página de la evaluación del material y realizar todas las funcionalidades de la evaluación de un material didáctico.  Investigación de la estructura de un documento XML, consultado los apuntes de Ampliación de Base de datos, así como de páginas web y los tutoriales de w3school.  Implementar la funcionalidad del botón Descarga final de la evaluación que consiste en la descarga de un fichero XML que tiene toda la evaluación del material.  Implementar la funcionalidad de búsqueda de un material, que consiste en buscar un material por varias criterios: ID del material, estado en el que se encuentra ya sea evaluado o en Borrador, o por el nombre del material.  Implementar la funcionalidad del botón guardar borrador, que consiste en guardar la evaluación parcial y regresar a la página de inicio.  Implementar la funcionalidad del botón Finalizar evaluación, que consiste en guardar la evaluación en un fichero formato XML por el nombre del material seleccionado en la base de datos, y finalizar la evaluación cambiando el estado de la misma de borrador ha evaluado.  Implementar la funcionalidad del botón Modificar puntuación que consiste en dar una puntuación de cada ítem.  Implementar la funcionalidad del botón Marcar no aplicable, que consiste en marcar si un ítem es no aplicable para la evaluación del material.  Implementar la funcionalidad del botón Añadir observación, que consiste en añadir una observación al ítem por parte del evaluador; será obligatorio en el caso de que el ítem sea no es aplicable.  Investigación de la tecnología de JSON, para pasar la información del cliente al servidor.  Implementar la funcionalidad del botón Guardar criterio, que consiste en guardar las modificaciones realizadas de la evaluación del criterio seleccionado. Para realizar esta funcionalidad he creado unas funciones de JavaScript, donde se crea un array JSON con los valores obtenidos del criterio a guardar y se envía mediante AJAX al servidor para luego actualizar las respectivas tablas de la base de datos e interfaz del usuario. A continuación muestro estas funciones JavaScript que implementan la funcionalidad realizada. function saveTableItems(dataOa,dataCriterio){ var TableData = new Array(); var select; var this_table_tr = $('.evaluacion_criterio[data-oa='+dataOa+'][data-criterio='+dataCriterio+'] tr'); 46 $.each(this_table_tr,function(row, tr){ if ($(tr).find('td:eq(4) input').is(':checked')) { select = 1; }else{ select = 0; } var id_item = parseInt($(tr).find('td:eq(0) input').val()); var pun = parseInt($(tr).find('td:eq(3) select').val()); TableData[row]={ "id_item" : id_item ,"puntuacion" : pun , "no_applicable" : select , "observaciones" : $(tr).find('td:eq(5) textarea').val() } }); TableData.shift() return TableData; } function sendDataTable(dataOa,dataCriterio){ var TableItems; TableItems = saveTableItems(dataOa,dataCriterio); var data = $.toJSON(TableItems); //alert(dataOa+' '+dataCriterio); $.ajax({ type: "POST", url: "salvaritems.php?id_oa="+dataOa+"&id_criterio="+dataCriterio, data: "itemsata=" + data, success: function(msg){ // return value stored in msg variable } }); } 47 10. Bibliografía AJAX. (2016). Obtenido de Wikipedia: https://es.wikipedia.org/wiki/AJAX Area Moreira, M. (2003). DE LOS WEBS EDUCATIVOS AL MATERIAL DIDÁCTICO WEB. Comunicación y Pedagogía. Revista de Nuevas Tecnologías y Recurso(188). Recuperado el 2016, de http://especializacion.una.edu.ve/multimedia/paginas/lecturas/unidad3/Area2003Web.pdf Bhaumik, S. (2015). Bootstap essentials. Birmingham, England: Packt Publishing. Retrieved Junio 2015 Bibeault, B. (2015). JQuery in Action. Saintmpford: Manning Publications Company. Bootstrap. (2010). Obtenido de Bootstrap: http://getbootstrap.com/ Bushell, D. (15 de Octubre de 2012). Nestable, GitHub. Obtenido de Nestable: https://github.com/dbushell/Nestable CSS3. (Junio de 2016). Obtenido de w3schools: http://www.w3schools.com/css/css3_intro.asp Documentación de la API de jQuery Ajax. (2016). Obtenido de jQuery: http://api.jquery.com/jquery.ajax/ Fawcett, J., Quin, L., & Ayers, D. (2012). Beginning XML. John Wiley & Sons, Inc. Fernández-Pampillón Cesteros, A. M., Domínguez Romero, E., & Armas Ranero, I. (2012). DIEZ CRITERIOS PARA MEJORAR LA CALIDAD DE LOS MATERIALES DIDÁCTICOS DIGITALES. Madrid, España. Obtenido de http://eprints.sim.ucm.es/20297/1/25-34_Fern%C3%A1ndezPampill%C3%B3n.pdf Fernández-Pampillon, A. (2014). Desarrollo de una norma Española de Calidad de Materiales Educativos Digitales. VAEP-RITA, 49-56. Hoja de estilos en cascada. (Junio de 2016). Obtenido de Wikipedia: https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada HTML. (Junio de 2016). Obtenido de Wikipedia: https://es.wikipedia.org/wiki/HTML Introducing JSON. (Junio de 2016). Obtenido de json: http://www.json.org/ JavaScript. (Junio de 2016). Obtenido de Wikipedia: https://es.wikipedia.org/wiki/JavaScript jquery. (2016). Obtenido de jquery: https://jquery.com/ MySQL. (Junio de 2016). Obtenido de Oracle: http://www.oracle.com/us/products/mysql/overview/index.html PHP. (Junio de 2016). Obtenido de http://php.net/ Prendes Espinoza, M. P., & Solano Fernández, I. M. (s.f.). Herramienta de evaluación de material didáctico impreso. Murcia, España. Obtenido de http://tecnologiaedu.us.es/cuestionario/bibliovir/paz7.pdf Prettyman, S. (2016). Learn PHP 7: Object-Oriented Modular Programming using HTML5, CSS3, JavaScript, XML, JSON and MySQL. Berkeley: CA : Apress : Imprint: Apress. Smith, B. (2015). Beginning JSON. Berkeley: CA : Apress : Imprint: Apress. 48 The World's Largest Web Developer Site. (2016). Obtenido de The World's Largest Web Developer Site: http://www.w3schools.com/ Tutorial de Bootstrap en w3schools. (2016). Obtenido de w3schools: http://www.w3schools.com/bootstrap/default.asp Tutoriales Bootstrap. (2016). Obtenido de Bootstrap: http://getbootstrap.com/getting-started/ XML. (Junio de 2016). Obtenido de Wikipedia: https://es.wikipedia.org/wiki/Extensible_Markup_Language#cite_note-1 7 Figura MI 8 - Panel de control Como se ve en la zona de notificación se muestran los procesos corriendo sin ningún error. Para verificar que todo está bien abrir el navegador web y escribir la URL -> http://localhost:8080/ se debe mostrar la siguiente pantalla. Figura MI 9 - localhost 8 2.2. Instalación de la herramienta de evaluación de calidad Paso 1. Instalación de la aplicación Extraiga el proyecto TFG.rar dentro de la carpeta C:\xampp\htdocs quedando la siguiente estructura. Figura MI 10 - Directorio del proyecto Paso 2. Configuración de base de datos Abrir el navegador web y navegar a la URL http://localhost:8080/, y desde la cabecera pulsar sobre phpMyAdmi; en la pantalla que se muestra pulsar sobre SQL y ejecutar la siguiente instrucción donde se creará la base de datos del proyecto. CREATE DATABASE tfg CHARACTER SET 'UTF8' COLLATE 'utf8_general_ci'; 9 Figura MI 11 - Crear Base de Datos Una vez creada la base de datos vamos a proceder a importar todas las tablas y restricciones de integridad. Para ello, seleccionar la base de datos recién creada, pulsar sobre Importar y seleccionar el fichero tfg.sql y continuar. Figura MI 12 - Importar base de datos Al terminar la importación de la base de datos tendremos: Figura MI 13 - Estructura de la base de datos 10 3. Aplicación Una vez que tenemos el servidor, la base de datos, y están iniciados los procesos en “XAMPP Control Panel” de Apache y MySQL. Así como el proyecto dentro de la carpeta de htdocs de XAMPP. Abrir en el navegador la URL -> http://localhost:8080/TFG/ donde se mostrará la herramienta desarrollada. Figura MI 14 - Pantalla principal de la herramienta 1 Anexo 2: Manual de usuario 1. Página principal Esta es la página principal: Figura 1 – página principal 2 El menú principal: En la parte superior y en el centro de la pantalla se muestra el menú principal de la aplicación. A través de este menú el usuario podrá realizar todas las operaciones previstas. El menú principal de la aplicación ofrece las siguientes opciones:  Materiales  Configuración  Glosario 2. Materiales Al acceder a la sección Materiales, Se encontrara con el siguiente panel principal de evaluación de materiales (debajo se aclaran los elementos y funcionalidades que lo conforman): 3 Figura 2 – Materiales 4 Funcionalidad 1: Es el botón para añadir materiales que serán evaluadas posteriormente al dar clic sale un formulario para rellenar con los datos del material. Figura 3 – Añadir material 5 Al dar clic al botón Añadir se añaden los datos del material a los campos de la tabla de materiales que está situada en el centro de la (Figura2 ) que contiene:  ID: Es el identificador de cada material añadido; que se incrementa al añadir un material.  Nombre: El nombre del material añadido.  Estado: Es el estado del material; al añadir un material se pone a un estado borrador.  Opciones: Son la opciones que se pueden realizar sobre un material añadido. Funcionalidad 2: Es el botón evaluar que nos lleva a la página de evaluación (Se detalla más en el punto 1.2.1 ). Funcionalidad 3: Es la opción para descargar el fichero XML de la evaluación Funcionalidad 4: Para buscar un material rápidamente con su ID. Funcionalidad 5: Para buscar los materiales que pueden estar en un estado:  Borrador  Evaluado Funcionalidad 6: Para buscar un material rápidamente con su Nombre. 2.1 Evaluar La funcionalidad de este botón está habilitada si el material está en estado “Borrador”. Al dar click sobre él nos lleva a la página de evaluación que se muestra a continuación: 6 1 2 3 4 5 6 7 8 13 Figura 7 – Añadir Criterio 14 3.2 Editar criterio Cuando el evaluador pulsa sobre el icono editar que está en la columna opciones de la (Figura 6), entonces se accede a una nueva página, en la que el evaluador puede editar los datos del criterio. Así como añadir ítems a ese criterio, Pulsando sobre el icono de añadir ítems que aparece en la parte inferior de la página entonces se muestra el formulario en el que el evaluador puede dar de alta los ítems (Figura 8), que se quiere asociar a un criterio. En cada fila aparece el nombre de un ítem, la descripción del mismo y las opciones que se pueden realizar sobre cada ítem: “Editar ítem” o “eliminación del ítem”. Figura 8 – Página con los ítems 15 3.2.1 Añadir ítems Para añadir un nuevo ítem desde la interfaz del evaluador se pincha sobre el icono que aparece en la parte inferior del listado de los ítems, lo que genera un formulario en el que el evaluador debe rellenar el nombre y la descripción y El nivel M (minino) o E (Excelente), que puede seleccionar de la lista desplegable del ítem que quiere dar de alta. A continuación pulsa sobre añadir, y el nuevo ítem aparece listado en la página. 3.3 Ordenar criterios e ítems Está función permite al usuario ordenar los criterios (Figura 10) e ítems (Figura 11) en los que desea que se muestren en la evaluación, para ello tiene que seleccionar el elemento en la lista y arrastrar en el orden que quiere que se le muestren al evaluador. Figura 9 - Añadir ítem 16 Figura 10 – Página ordenar criterios Figura 11 – Página ordenar ítems 17 3.4 Configurar rango de evaluación Está función permite al evaluador configurar el rango de puntuación. Al dar clic sobre el botón Configurar rango de evaluación que aparece en la parte inferior de la (Figura 6), lo que genera un formulario en la que el evaluador debe rellenar el Mínimo y el máximo en los que desea que se muestren en la evaluación, y pulsar sobre actualizar. Figura 12 – Configurar rango