Organizando mis prácticas

ORGANIZANDO MIS PRÁCTICAS ADRIANA VENTURA CANDELA TRABAJO DE FIN DE GRADO EN INGENIERÍA INFORMÁTICA FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID CURSO 2017-2018 Director: RUBÉN FUENTES FERNÁNDEZ 2 Agradecimientos Este trabajo representa el final de un largo camino y el comienzo de uno nuevo. Quiero dar las gracias a mis padres, abuelos y familia que han hecho posible con su esfuerzo y paciencia que hoy pueda finalizar esta etapa de mi vida. 3 ÍNDICE DE CONTENIDO ÍNDICE DE FIGURAS ....................................................................................................... 5! ÍNDICE DE TABLAS ........................................................................................................ 6! RESUMEN .......................................................................................................................... 7! DESCRIPTORES ................................................................................................................ 7! ABSTRACT ........................................................................................................................ 8! 1.!INTRODUCCIÓN ....................................................................................................... 9! 1.1!Motivación ......................................................................................................................... 9! 1.2!Objetivos y plan de trabajo ................................................................................................ 9! INTRODUCTION ............................................................................................................. 11! Motivation ................................................................................................................................. 11! Goals and work plan .................................................................................................................. 11! 2.!ESTADO DEL ARTE ................................................................................................ 13! 2.1!Campus Virtual UCM ...................................................................................................... 13! 2.2!Calendario ........................................................................................................................ 14! 2.3!UCMovil .......................................................................................................................... 15! 2.4!Requisitos de la aplicación y comparativa ....................................................................... 15! 3.!ARQUITECTURA DE LA APLICACIÓN ............................................................... 18! 3.1!Arquitectura cliente-servidor ........................................................................................... 18! 3.2!Módulos del sistema ......................................................................................................... 18! 3.2.1 Diagrama de clases ....................................................................................................... 19! 3.2.2!Diagrama de secuencia ............................................................................................. 20! 3.3!Consideraciones de implementación ................................................................................ 28! 3.4!Lenguajes y herramientas de desarrollo ........................................................................... 29! 4.!MODELO DE DATOS .............................................................................................. 31! 5.!DISEÑO INTERFAZ DE USUARIO ........................................................................ 34! 6.!FUNCIONALIDAD DE LA APLICACIÓN ............................................................. 38! 6.1 !Manual del administrador ............................................................................................... 38! 6.1.1!Login ......................................................................................................................... 38! 6.1.2!Página principal ........................................................................................................ 38! 6.1.3!Editar contraseña ....................................................................................................... 40! 6.1.4!Mostrar lista de datos ................................................................................................ 40! 6.1.5 !Crear un nuevo dato ................................................................................................. 41! 6.1.6!Ver información sobre un dato ................................................................................. 42! 6.1.7!Editar información de un dato .................................................................................. 43! 6.1.8!Borrar un dato ........................................................................................................... 44! 6.2!Manual del profesorado .................................................................................................... 46! 6.2.1!Login ......................................................................................................................... 46! 6.2.2!Página principal ........................................................................................................ 46! 6.2.3!Crea tarea .................................................................................................................. 47! 6.2.4!Editar contraseña ....................................................................................................... 47! 6.2.5!Lista de tareas terminadas ......................................................................................... 47! 6.2.6!Evaluar tarea ............................................................................................................. 48! 6.2.7!Ver lista de asignaturas y ver lista de alumnos ......................................................... 49! 6.2.9!Información personal ................................................................................................ 50! 6.3!Manual del estudiante ...................................................................................................... 51! 6.3.1!Login ......................................................................................................................... 51! 4 6.3.2!Página principal ........................................................................................................ 51! 6.3.3!Ver información de una tarea pendiente ................................................................... 53! 6.3.4!Ver lista de tareas terminadas ................................................................................... 53! 6.3.5!Ver información de una tarea terminada ................................................................... 54! 6.3.6!Ver lista de asignaturas y ver lista de profesores ...................................................... 55! 6.3.7!Ver información de una asignatura y ver información de un profesor ..................... 56! 6.3.8 !Editar contraseña ...................................................................................................... 57! 6.3.9!Datos personales ....................................................................................................... 57! 7.!CONCLUSIONES Y TRABAJO FUTURO ............................................................. 58! 7.1!Conclusiones .................................................................................................................... 58! 7.2!Trabajo futuro ................................................................................................................... 59! CONCLUSIONS AND FUTURE WORK ....................................................................... 60! CONCLUSIONS ....................................................................................................................... 60! FUTURE WORK ...................................................................................................................... 61! 8.!Bibliografía ................................................................................................................ 62! 5 ÍNDICE DE FIGURAS Figura 1: Visualización de una tarea en Campus Virtual UCM ........................................ 13! Figura 2: Visualización de una tarea en Calendario .......................................................... 14! Figura 3: Diagrama de clases ............................................................................................ 19! Figura 4: Diagrama secuencia – Login ............................................................................. 21! Figura 5: Diagrama secuencia - Editar contraseña ............................................................ 23! Figura 6: Diagrama secuencia - Ver toda la información ................................................. 24! Figura 7: Diagrama secuencia - Ver información de un dato concreto ............................. 25! Figura 8: Diagrama secuencia - Editar dato ...................................................................... 26! Figura 9: Diagrama secuencia - Eliminar dato .................................................................. 27! Figura 10: Diagrama secuencia - Crear dato ..................................................................... 28! Figura 11: Diagrama entidad-relación ............................................................................... 33! Figura 12: Boceto web - Lista de elementos ..................................................................... 35! Figura 13: Boceto web - Ver información de un elemento ............................................... 36! Figura 14: Boceto APP - Lista de elementos y ver elemento ............................................ 36! Figura 15: Log in - web ..................................................................................................... 38! Figura 16: Página principal administrador web ................................................................ 39! Figura 17: Botón menú y botón salir ................................................................................. 39! Figura 18: Página "Editar contraseña" - web .................................................................... 40! Figura 19: Botón home ...................................................................................................... 40! Figura 20: Página "Lista de elementos" - web .................................................................. 41! Figura 21: Acciones sobre un elemento ............................................................................ 41! Figura 22: Página "Crear elemento" - web ........................................................................ 42! Figura 23: Error sobre tipo de datos - web ....................................................................... 42! Figura 24: Error restrictivo - web ...................................................................................... 42! Figura 25: Página "Ver un elemento" - web ..................................................................... 43! Figura 26: Página "Editar elemento" - web ....................................................................... 43! Figura 27: Mensaje confirmación para borrar un elemento .............................................. 44! Figura 28: Página "Borrar un elemento" - web ................................................................. 44! Figura 29: Página principal web del profesor - web ......................................................... 46! Figura 30: Página "Lista tareas terminadas" - web ........................................................... 48! Figura 31: Botón evaluar ................................................................................................... 48! Figura 32: Página "Evaluar tareas" - web ......................................................................... 48! Figura 33: Log in - móvil .................................................................................................. 51! Figura 34: Página principal - móvil .................................................................................. 52! Figura 35: Menú - móvil ................................................................................................... 52! Figura 36: Ver tarea pendiente - móvil ............................................................................. 53! Figura 37: Tarea terminada - móvil ................................................................................... 54! Figura 38: Lista asignaturas - móvil .................................................................................. 55! Figura 39: Lista profesores - móvil ................................................................................... 55! Figura 40: Ver asignatura - móvil ..................................................................................... 56! 6 ÍNDICE DE TABLAS Tabla 1: Comparativa entre aplicaciones existentes y requisitos de la aplicación ............ 16! Tabla 2: Métodos comunes de clases ................................................................................ 20! 7 RESUMEN El presente trabajo tiene su origen en la necesidad de herramientas de apoyo para la organización y visualización de las tareas de los alumnos a lo largo del curso. Se ha optado por una aplicación para dispositivos móviles destinada a los estudiantes. La aplicación permite la visualización de las tareas pendientes y terminadas durante el curso, así como la información de dichas tareas con sus respectivas calificaciones, la información de la asignatura a la que pertenece cada tarea y la información del profesor. También se desarrollan dos web para el mantenimiento de la aplicación por parte del administrador y el profesorado. El administrador se encarga de realizar una gestión de la base de datos. Los profesores se encargan de realizar una gestión de las entregas y notas de las tareas de cada una de sus asignaturas que tienen a lo largo del curso. En la actualidad existen aplicaciones que gestionan parcialmente esta funcionalidad, pero presentan limitaciones. El objetivo de este trabajo es mejorar la relación de los estudiantes con la organización de las tareas que se presentan durante el curso. La organización es importante para que el alumno no se sienta saturado con el trabajo y pueda lograr cumplir con los plazos previstos y mejorar sus resultados. Para desarrollar la aplicación, se utiliza un modelo cliente-servidor para mejorar sus capacidades funcionales y así poder cumplir con los requisitos establecidos. DESCRIPTORES 1. Aplicación móvil 2. Estudiantes 3. Organización 4. Calendario 5. Tareas 6. Recordatorio 7. Cliente – Servidor 8. Apache Cordova 8 ABSTRACT The present work has its origin in the need of support tools for the organization and visualization of the tasks of the students throughout the course. It has opted for an application for mobile devices for students. The application allows the visualization of the pending and finished tasks during the course, as well as the information of those tasks with their respective qualifications, the information of the subject to which each task belongs and the teacher's information. It can also be used for maintenance of the application by the administrator and the teachers. The administrator is responsible for managing the database. The teachers are responsible for managing the delivery and notes of the tasks each of their subjects they have throughout the course. At present, there are applications that partially manage this functionality, but present limitations. The objective of this work is to improve the relationship of students with the organization of the tasks that are presented during the course. The organization is important so that the student does not feel saturated with the work and can achieve the expected deadlines and improve their results. To develop the application, a client-server model is used to improve its functional capabilities and thus be able to meet the established requirements. DESCRIPTORS 1. Mobile application 2. Students 3. Organization 4. Calendar 5. Tasks 6. Reminder 7. Client - Server 8. Apache Cordova 9 1. INTRODUCCIÓN En esta sección se especifica la motivación para la realización del proyecto, los objetivos perseguidos a la hora de realizarlo a raíz de dicha motivación y el plan de trabajo llevado a cabo durante el proceso. 1.1 Motivación La organización de las tareas del curso, puede resultar un ardua tarea para los alumnos. La media de asignaturas matriculas por año académico es de seis a doce por alumno. Cada asignatura puede poner distintos ejercicios, proyectos o exámenes a realizar durante el período académico. Muchas tareas no se llegan a presentar o la nota de estas puede disminuir considerablemente con respecto a la media. Esta situación puede provocar que los alumnos se sientan saturados y sometidos a estrés por la entrega de los trabajos. Dicho estrés se produce por la dificultad de la tarea en sí y por la falta de organización por parte del alumnado. El objetivo de este trabajo es ayudar al alumno con este último punto. 1.2 Objetivos y plan de trabajo La funcionalidad del trabajo se divide en dos partes, introducción de contenidos y organización sobre ellos. Los contenidos relacionados con las tareas de los estudiantes se gestionan por el profesorado de la respectivas asignaturas. El contenido relacionado con la base de datos, como por ejemplo los alumnos de cada universidad, se gestiona por el administrador. El sistema se encarga de organizar los contenidos, y priorizar la realización de las tareas en función del tiempo restante de la fecha límite de entrega. El sistema se encarga de mostrar la organización a los alumnos. Se desea realizar la aplicación con una arquitectura cliente-servidor. El servidor será capaz de atender las peticiones de los clientes, como por ejemplo, la creación de una nueva tarea. Los clientes serán las páginas web para el administrador y el profesorado, y la aplicación para dispositivos móviles. Se utiliza un desarrollo multiplataforma para la aplicación, que se adapta automáticamente a diferentes características del dispositivo del cliente. Este proyecto se basa en la construcción de una aplicación para móviles, llamada OrganizUcm, siguiendo las pautas aprendidas durante el grado y las técnicas de desarrollo móvil. Cabe destacar que se desea realizar un diseño limpio y claro, para que los respectivos usuarios tengan una relación amigable con los contenidos de la aplicación correspondiente. Para abordar los objetivos y requisitos previos, el trabajo se ha dividido en las siguientes tareas: 1. Estudio del estado del arte en cuanto a las aplicaciones existentes para los estudiantes. El objetivo es determinar las utilidades presentes en dichas aplicaciones e identificar cuales son las tendencias de diseño en cuanto interfaces de usuario. En esta etapa se procederá también a la selección de las tecnologías 16 En la actualidad la mayoría de los estudiantes poseen móviles con sistema operativo Android, pero hay un gran número de alumnos que poseen móviles con sistema operativo iOS. Teniendo en cuenta dicha información y el estudio de ambos desarrollos, se ha optado por escoger el desarrollo multiplataforma. Además, tras finalizar el estudio, se ha determinado que la aplicación que utilizan los alumnos debe mostrar una lista con todas las tareas del curso académico. Teniendo en cuenta que el objetivo es ayudar a la organización del alumno, las tareas se ordenan por fecha de entrega. Para ayudar al usuario, se muestra un elemento que indica la prioridad para realizarla, y se muestra la información relevante de dicha tarea. Aunque no esté relacionado con la organización de las tareas, la aplicación contará con la posibilidad de consultar los datos. Serán los del alumno, las asignaturas a las que asiste y los profesores que imparten dichas asignaturas. También se añadirá la recepción de la calificación de cada entrega. Se ofrece la posibilidad de ver todas las notas de una determinada asignatura para tener un control sobre su progreso académico. Tras enumerar los aspectos más destacables que tendrá que poseer la aplicación, se muestra en la Tabla 1, una comparación de las aplicaciones existentes y de los aspectos anteriormente mencionados. Campus Virtual Calendario UCMovil Requisitos de aplicación a realizar Dispositivos móviles ✗ ✗ ✓ ✓ Gestión de base de datos ✓ ✗ ✗ ✗ Consulta datos ✓ ✗ ✓ ✓ Avisos y organización ✗ ✗ ✗ ✓ Ver información de una tarea ✓ ✗ ✗ ✓ Ver todas las tareas ✗ ✓ ✗ ✓ Ver evaluación de tareas ✓ ✗ ✗ ✓ Ver calificaciones asignatura ✓ ✗ ✗ ✓ Tabla 1: Comparativa entre aplicaciones existentes y requisitos de la aplicación 17 Cuando se hace mención a la aplicación a realizar, se hace referencia a la aplicación que utilizarán los alumnos. Aunque en la Tabla 1 se muestre que no se realizará una gestión en la base de datos, ese punto no es del todo correcto. La aplicación a realizar sí posee una gestión sobre la base de datos, pero se gestiona por el administrador y por el profesorado. 18 3. ARQUITECTURA DE LA APLICACIÓN En esta sección se detallarán los aspectos técnicos de la aplicación que se han tenido en cuenta para la realización de este proyecto. Inicialmente se explicará la arquitectura de la aplicación, así como los datos considerados y las consideraciones de implementación en cuanto a seguridad. Finalmente, se comentarán los lenguajes de programación y herramientas de desarrollo utilizados en el proyecto. 3.1 Arquitectura cliente-servidor El proyecto adopta una arquitectura cliente-servidor a fin de facilitar la distribución de contenidos y reducir los requisitos computacionales de la aplicación. A continuación se explica el papel ejercido por cada uno en la creación del proyecto. Se ha desarrollado un protocolo REST (Representational State Transfer) [4], es decir, el servidor y el cliente son independientes entre sí, y por tanto se separa la interfaz de usuario y el almacenamiento de datos. Este estilo de trabajo es muy utilizado en desarrollo de aplicaciones y de páginas web. Durante la implementación, se aplican las acciones propias de REST, en concreto, se utilizan GET y POST [5]. Este protocolo permite migrar a otros servidores o realizar cambios en la base de datos, siempre y cuando se envíen de forma correcta. Se entiende por servidor a un proceso que brinda servicio a los clientes que lo soliciten. El servidor se encarga de interpretar y de enviar las respuestas a las solicitudes que han sido realizadas por los clientes. Se cuenta con un único servidor central para el desarrollo de la aplicación. Se entiende por cliente al equipo que es utilizado por el usuario final y que requiere de los servicios del servidor [6]. Cada usuario utiliza un cliente, se obtiene un total de tres clientes. Son clientes ligeros, es decir, dependen primariamente del servidor para las tareas de procesamiento y se enfocan en transportar la entrada y la salida entre el usuario y el servidor remoto. Esto tipo de cliente necesita una conexión estable al servidor remoto, es decir, los clientes necesitaran acceso a Internet. Para las aplicaciones destinadas a administrador y al profesorado, se desarrolla una página web, mientras que para la aplicación destina a los estudiantes se utiliza una aplicación para dispositivos móviles. En los siguientes apartados se explicará en que situaciones el servidor y los distintos clientes se comunican. 3.2 Módulos del sistema Para el desarrollo de la aplicación se ha utilizado el Modelo-Vista-Controlador (MVC) [7]. Este patrón permite separar la lógica de la aplicación de la lógica de la vista. El modelo se encarga de los datos, consultando la base de datos. El controlador recibe las órdenes del usuario y se encarga de solicitar los datos al modelo y comunicárselos a la vista. Las vistas se encargan de recibir las peticiones del usuario y se las trasladan al Controlador. 19 3.2.1 Diagrama de clases El diagrama de clases sirve para visualizar las relaciones entre las clases que se encuentran en el sistema. En la Figura 3 se observa el diagrama del sistema. A continuación se explican las clases que lo componen. Figura 3: Diagrama de clases La clase “Database” establece una conexión con la base de datos. Todas las clases, salvo “Utils” y “Enrollment”, poseen un atributo que las relaciona con dicha 20 clase. Esta clase contiene los atributos necesarios para realizar la conexión y dos métodos. El método “getConnection()” que realiza la conexión con la base de datos. El método “endConnection()” que cierra dicha conexión. La clase “Utils” es utilizada para realizar el hashing de la contraseña, se utiliza en las clases que determinan los usuarios que pueden utilizar la aplicación del proyecto. Por “Teacher” que representa al profesorado y al administrador que usan las aplicaciones web, y por “Student” que representa al alumnado que utiliza la aplicación para dispositivos móviles. Ambas clases poseen el método “login()”. La clase “Enrollment” no posee métodos, se utiliza para obtener la información de matriculación de un estudiante con respecto a una asignatura. Se establece mediante los atributos “regist_num” y “regist_year”, que sirve para saber el número de veces que se ha matriculado un alumno en dicha asignatura y el año de su primera matriculación. El resto de clases que aparece en el diagrama poseen los mismos métodos. En la Tabla 2 se observan esos métodos y en que consiste cada uno de ellos. Método Descripción read( ) Lista de elementos readOne( ) Información de un elemento concreto create() Crea un nuevo elemento delete() Elimina un elemento concreto update( ) Edita información de un elemento concreto count( ) Cuenta el número de elementos all_clase( ) Obtiene elementos en función de otro Tabla 2: Métodos comunes de clases Además, se tiene en cuenta el constructor que las relaciona con la clase “Database”, para así poder realizar la conexión con la base de datos. Para poder realizar dicha conexión, las clases deben contar con dos atributos. El atributo “conn” y atributo “table_name”, se relacionan con la clase “Database” y el nombre de la tabla de la base de datos, respectivamente. 3.2.2 Diagrama de secuencia Un diagrama de secuencia muestra el desarrollo de una interacción en base al intercambio de mensajes realizados entre el cliente y el servidor. Para modelar el comportamiento del sistema se han realizado los diagramas en función del tipo de acción a realizar, teniendo en cuenta el MVC. A continuación se detallan dos casos que dependen de la acción a realizar. En el caso de “Login” o “Editar contraseña”, los objetos que intercambian mensajes son los mismos. El objeto “Usuario” que representa al administrador, profesor o estudiante, es el encargado de realizar la acción vinculada al usuario que representa, como por ejemplo, pulsar un botón o rellenar un formulario. El objeto “Application” representa a las distintas aplicaciones del proyecto, es decir, a los clientes y se establece como la vista del patrón. La clase “User” que representa a las clases de los usuarios, las cuales serian “Teacher” y “Student”, se establece como el controlador del patrón, que representaría al servidor del sistema. Por lo tanto, la comunicación entre el cliente y el 21 servidor se establece en el intercambio de mensajes entre “User” y “Application”. Y finalmente, “Database” y “BD” que representan la relación entre el sistema y la base de datos, se establece como el modelo. En la Figura 4, se pueden observar los mensajes intercambiados para la realización de Login. Los cuales se resumen: 1. La vista se encuentra en la interfaz login. 2. El usuario rellena el formulario. 3. El usuario envía los datos que ha rellenado. 4. El cliente se comunica con el servidor mediante la operación “login( )”. 5. El servidor establece una conexión con la base de datos. 6. La base de datos busca la información enviada. 7. La base de datos realiza una comprobación de dichos datos. 8. La base de datos envía un mensaje de confirmación o de error. 9. Si dicho mensaje es de confirmación, se envían los datos. En caso de error, se envía un mensaje indicando que se ha producido un error. 10. El servidor comunica al cliente la información sobre dicho mensaje. 11. Se estable el cierre de conexión de la base de datos. 12. En caso de éxito, la vista cambia. Si no, se mantiene mostrando el mensaje de error. Figura 4: Diagrama secuencia – Login A continuación, en la Figura 5, se pueden observar los mensajes intercambiados para la realización de “Editar contraseña”. Cabe destacar que el objeto “Utils” 22 representa a la clase que realiza el hashing de la contraseña. El hashing se explica en el apartado 3.3 de la memoria. Los mensajes intercambiados para la realización de “Editar contraseña” se resumen: 1. La vista se encuentra en la interfaz de editar la contraseña. 2. El usuario rellena el formulario. 3. El usuario envía los datos que ha rellenado. 4. El cliente se comunica con el servidor mediante “readOne( )” 5. El servidor establece una conexión con la base de datos. 6. La base de datos busca la información enviada. 7. La base de datos realiza una comprobación de dichos datos. 8. La base de datos envía un mensaje de confirmación o de error. 9. Si dicho mensaje es de confirmación, se envían los datos. En caso contrario se envía un mensaje indicando que se ha producido un error. 10. El servidor comunica al cliente la información sobre dicho mensaje. 11. Se estable el cierre de conexión de la base de datos. 12. En caso de error se muestra el mensaje de error. Si se ha producido un éxito, se realiza una comprobación de la contraseña antigua con el hash generado. 13. La clase encargada del hashing devuelve la respuesta. 14. En caso de error se muestra el mensaje de error. Si se ha producido un éxito, se realiza la comprobación de la nueva contraseña. 15. Si la comprobación ha sido un éxito, se realiza el hashing de la nueva contraseña. 16. La clase encargada del hashing devuelve la respuesta. 17. En caso de error, se muestra un mensaje de error. En caso contrario, el cliente se comunica con el servidor mediante “update ( )”. 18. El servidor establece una conexión con la base de datos. 19. La base de datos edita la información en función de la nueva contraseña. 20. La base de datos envía un mensaje de confirmación o de error. 21. Si dicho mensaje es de confirmación, se envían los datos. En caso contrario se envía un mensaje indicando que se ha producido un error. 22. El servidor comunica al cliente la información sobre dicho mensaje. 23. Se estable el cierre de conexión de la base de datos. 24. En caso de error se muestra el mensaje de error. Si se ha producido un éxito, se muestra el mensaje de confirmación. 23 Figura 5: Diagrama secuencia - Editar contraseña Finalmente, en caso de que la acción a realizar sea “Ver”, “Ver información”, “Editar”, “Crear” o “Eliminar”, los objetos que intercambian mensajes serán los mismos. El objeto “Usuario” que representa al administrador, profesor o estudiante, es el encargado de realizar la acción, como por ejemplo, pulsar un botón o rellenar un formulario. El objeto “Application” representa a las distintas aplicaciones del proyecto, es decir, a los clientes y se establece como la vista del patrón. La clase “Object” se establece como el controlador del patrón, que representaría al servidor del sistema. Dicha clase se corresponde con cualquier elemento de la tabla de la base de datos, como por ejemplo, un estudiante, una asignatura, una tarea… Como se está expresando de forma genérica no se establecen las diferencias entre las distintas acciones o contenidos para cada usuario, Por lo tanto, la comunicación entre el cliente y el servidor se establece en el intercambio de mensajes entre “Object” y “Application”. “Database” y “BD” que 24 representan la relación entre el sistema y la base de datos, se establece como el modelo del MVC. En la Figura 6, se pueden observar los mensajes intercambiados para la realización de “Ver todo”. Se resumen: 1. La vista se encuentra en la interfaz de la página principal. 2. En la vista se encuentra el botón “Ver”. 3. El usuario pulsa el botón. 4. El cliente se comunica con el servidor mediante la operación “read( )”. 5. El servidor establece una conexión con la base de datos. 6. La base de datos busca la información enviada. 7. La base de datos envía un mensaje de confirmación o de error. 8. Si dicho mensaje es de confirmación, se envían los datos. En caso contrario se envía un mensaje indicando que se ha producido un error. 9. El servidor comunica al cliente la información sobre dicho mensaje. 10. Se estable el cierre de conexión de la base de datos. 11. En caso de éxito, la vista muestra la lista de datos. Si no, muestra el mensaje de error. Figura 6: Diagrama secuencia - Ver toda la información En la Figura 7, se pueden observar los mensajes intercambiados para la realización de “Ver información concreta”, que se comportan de la siguiente manera: 1. La vista se encuentra en la interfaz de la página principal. 2. En la vista se encuentra el botón “Info”. 3. El usuario pulsa el botón. 4. El cliente se comunica con el servidor mediante la operación “readOne( )”. 5. El servidor establece una conexión con la base de datos. 6. La base de datos busca la información enviada. 7. La base de datas compara el identificador de la tabla. 25 8. La base de datos envía un mensaje de confirmación o de error. 9. Si dicho mensaje es de confirmación, se envían los datos. En caso contrario se envía un mensaje indicando que se ha producido un error. 10. El servidor comunica al cliente la información sobre dicho mensaje. 11. Se estable el cierre de conexión de la base de datos. 12. En caso de éxito, la vista muestra la información del dato concreto. Si no, muestra el mensaje de error. Figura 7: Diagrama secuencia - Ver información de un dato concreto En la Figura 8, se pueden observar los mensajes intercambiados para la realización de “Editar”. Se resumen: 1. La vista se encuentra en la interfaz de editar un dato. 2. El usuario rellena el formulario. 3. El usuario envía los datos del formulario. 4. El cliente se comunica con el servidor mediante la operación “update( )”. 5. El servidor establece una conexión con la base de datos. 6. La base de datos busca la información enviada. 7. La base de datos compara el identificador de la tabla. 8. La base de datos envía un mensaje de confirmación o de error. 9. Si dicho mensaje es de confirmación, se envían los datos. En caso contrario se envía un mensaje indicando que se ha producido un error. 10. El servidor comunica al cliente la información sobre dicho mensaje. 11. Se estable el cierre de conexión de la base de datos. 12. En caso de éxito, la vista muestra mensaje de confirmación. Si no, muestra el mensaje de error. 32 Todo estudiante asiste a una facultad, se representa con la clase Faculty. Se compone de un identificador único y de la información que la representa, como es su nombre, dirección y teléfono. En una facultad existen distintos tipos de estudios. Para distinguirlos se crea Studies. Un estudio puede ser un grado, master o licenciatura. A su vez, cada uno de ellos puede tener itinerarios. Todo alumno está matriculado en un tipo de estudio, y por tanto, estudia en una facultad. Para completar la información, en la Figura 11 se puede observar el diagrama entidad-relación que se ha utilizado en este trabajo. Se relaciona con el diagrama de clases mencionado en el apartado 3.2.1 de la memoria. 33 Figura 11: Diagrama entidad-relación 34 5. DISEÑO INTERFAZ DE USUARIO Uno de los aspectos más importantes a la hora de realizar una aplicación es la forma de atraer y mantener a los usuarios gracias a su diseño visual. Una aplicación interactúa con el usuario a través de la interfaz de la aplicación. Por ello es muy importante cuidar los aspectos que facilitan dicha interacción y hacen que la experiencia del usuario sea satisfactoria. Para lograr este objetivo se han tenido en cuenta las diez heurísticas de Jakob Nielsen (Nielsen, 1995) [19]. Dichas heurísticas son las siguientes: 1. Visibilidad del estado del sistema. Toda aplicación debe mantener siempre informado al usuario de lo que está ocurriendo y brindarle una respuesta en el menor tiempo posible. 2. Relación entre el sistema y el mundo real. Toda aplicación debe incluir vocabulario familiar para el usuario. Además, la información que se mostrará debe aparecer en un orden lógico y natural. 3. Control y libertad de usuario. El usuario siempre poseerá el control de volver a un estado anterior de la aplicación tras haber cometido un error. Además, de tener la posibilidad de volver a rehacer una acción. 4. Consistencias y estándares. Los usuarios de la aplicación deberán saber en todo momento que significan las acciones, signos o palabras mostradas en la aplicación. Para ello hay que mostrar siempre las convenciones establecidas. 5. Prevención de errores. Se debe crear un diseño que sea cuidadoso y que ayude al usuario a que no comenta errores, un ejemplo es la funcionalidad de autocompletar. 6. Reconocer antes de recordar. Hacer visibles acciones y opciones para que el usuario no tenga que qué recordar como se realiza una acción. 7. Flexibilidad y eficiencia de uso. Toda aplicación debe ser utilizable. 8. Diseño estético y minimalista. Se debe evitar cualquier tipo de información innecesaria. Cada información extra compite con la información relevante y disminuye su visibilidad. 9. Ayuda a los usuarios a reconocer. Todo mensaje de error deberá ir escrito en un lenguaje sencillo y con instrucciones y soluciones a dicho problema. 10. Ayuda y documentación. Todo aplicación debe tener un manual de usuario, aunque solo es imprescindible en aplicaciones complejas. Teniendo en cuentas las heurísticas mencionadas, se ha realizado un diseño inicial de la aplicación antes de proceder a su implementación. Para realizar el boceto de la aplicación, también denominado “Mockup”, se ha utilizado JustinMind Prototyper [20]. Es una herramienta de creación de prototipos de aplicaciones móviles y web que ofrece capacidades que normalmente se encuentras en herramientas de diagramación y admite la 35 simulación de alta fidelidad de aplicaciones enriquecidas en internet. A continuación se detalla como las aplicaciones cumplen con las heurísticas mencionadas. La heurística “Visibilidad del estado del sistema” se cumple en ambos diseños, de manera que si se ha producido un error en el sistema, se mostrará un mensaje indicando dicho error. Para cumplir con “Relación entre el sistema y el mundo real”, se utiliza un lenguaje sencillo en la aplicación, de manera que los botones son verbos como ver, crear, editar y borrar. La información que se muestra es precisa, como se observa en la Figura 12 el boceto utilizado en el diseño web. Al usar este funcionamiento, se cumple la heurística “Consistencias y estándares”, de manera que el usuario sabe en que consiste la futura acción a realizar. Figura 12: Boceto web - Lista de elementos Es importante que se cumpla “Control y libertad de usuario” y por lo tanto, en cada página siempre se puede volver a la página principal de la aplicación o a la página donde se realizó la acción para llegar a dicha página. Las acciones que determinan un cambio en la base de datos, como son crear, editar y eliminar, poseen la opción de cancelar dichos cambios. Para eliminar un elemento se realiza una pregunta de confirmación. Para crear o editar un elemento es necesario pulsar el botón situado en el formulario de la acción a realizar. A la hora de introducir datos, la aplicación cuenta con la funcionalidad autocompletar, utilizada por ejemplo en el login que utilizan ambos diseños. Cuando el administrador o profesor crea o edita un elemento, la aplicación cuenta con la opción de seleccionar la opción válida, como se muestra en la Figura 13 el boceto utilizado en el diseño web. Un ejemplo es seleccionar cuál es el tipo de estudio donde está matriculado un alumno. Usando estas funcionalidad, se cumple la heurística “Prevención de errores” y “Ayuda a los usuarios a reconocer”. 36 Figura 13: Boceto web - Ver información de un elemento Para cumplir con “Reconocer antes de recordar”, se ha determinado un diseño de la aplicación dependiendo del tipo de usuario. Si el usuario es el administrador o un profesor, las aplicaciones se muestran de manera muy similar. Ambos contienen los mismo botones de cabecera en la misma posición. Y acciones con una vista parecida, como ver información, editar un dato, crear un dato o mostrar un dato a eliminar, que muestran con una tabla o un formulario la información, como se puede ver la Figura 13. Si el usuario es un alumno, se muestra un diseño muy similar, al mostrar una lista de elementos y al mostrar la información de un único elemento, como se observa en la Figura 14 Figura 14: Boceto APP - Lista de elementos y ver elemento Las heurísticas “Flexibilidad y eficiencia de uso” y “Diseño estético y minimalista” están conectadas. Si el diseño de una aplicación no está recargado de información innecesaria, el usuario puede conocer mejor la funcionalidad de la aplicación. Por este motivo, las aplicaciones desarrolladas solo muestran la información necesaria para cada opción, en forma de tabla para las aplicaciones web y en forma de lista para la aplicación para dispositivos móviles. Ambas usan botones para moverse por la aplicación. 38 6. FUNCIONALIDAD DE LA APLICACIÓN En esta sección se detallarán los pasos que hay que seguir para navegar en la aplicación y realizar las tareas en función del tipo de usuario. Para comprender mejor el funcionamiento, este apartado se dividirá en pantallas y se mostrará una captura de cada situación para completar el manual. Para acceder al código desarrollado durante el proyecto, se introduce https://github.com/adrivent91/tfgOrganizaMisPracticas en el se encuentra el archivo Readme.txt con las instrucciones necesarias para ejecutar cada aplicación. 6.1 Manual del administrador En este apartado se detallarán los pasos que debe realizar el administrador para realizar cambios sobre la base de datos, salvo las tablas relacionadas con las tareas de las alumnos, que solamente podrán ser administradas por el profesorado. Dichos cambios podrán ser: ver una lista de datos, ver un dato concreto, añadir una nueva fila a una tabla existente, y editar o eliminar un dato específico. 6.1.1 Login El administrador la dirección correspondiente en el navegador, al abrirla se muestra una primera pantalla , se puede observar en la Figura 15, con la opción de loguearse. El administrador se loguea introduciendo el correo y la contraseña correctos. En caso de que se produzca un error, se muestra un mensaje informativo. Figura 15: Log in - web 6.1.2 Página principal Después de loguearse, el administrador será dirigido a la página principal, que se puede observar en la Figura 16. En ella se muestran las tablas sobre las cuales el administrador puede actuar. 39 Figura 16: Página principal administrador web En la cabecera de la página se pueden apreciar dos botones situados a ambos lados del título, se pueden observar en la Figura 17. En el lado derecho aparece el botón que representa la salida de la aplicación. En el lado izquierdo aparece el botón que representa un menú. Figura 17: Botón menú y botón salir El botón para salir de la aplicación redirige al administrador a la página de login que se ha mostrado en la Figura 15. Este botón se muestra en las páginas donde se representa una lista de datos o la información de un dato concreto. El botón de menú muestra una barra lateral. La opción “X ” oculta la barra lateral. La opción “Editar contraseña” redirigirá al administrador a una nueva página que se explica en el apartado 6.1.3. La opción “Acceder” es un submenú desplegable con tres opciones que dirigirán al administrador a otras páginas donde se muestran las relaciones entre las tablas sobre las que el administrador puede actuar. De manera que en cada una de ellas se pueda ver la lista de los elementos de la relación o la información de una relación concreta, o añadir, editar o eliminar una relación. Dichas relaciones son “Asignaturas – Alumnos”, “Profesores – Asignaturas” y “Profesores - Facultades” . La opción “Otras relaciones” es un submenú desplegable con dos opciones que dirigirán al administrador a dos páginas, una por cada opción, donde el administrador podrá ver la lista de los elementos de cada relación que representa cada opción. “Facultades - Alumnos” dirigirá al administrador a una página que muestra la lista de alumnos pertenecientes a las distintas facultades y al tipo de estudio al que pertenecen, ordenadas por nombre de facultad. El segundo “Profesores – Alumnos” se comporta de la misma forma que el otro botón, pero mostrando la lista de alumnos con sus respectivos profesores y la asignatura que estos últimos les imparten, ordenado por el correo del profesor. 40 6.1.3 Editar contraseña Desde el menú de la pantalla principal se accede a la página, se puede observar en la Figura 18, que permite al administrador editar su contraseña. Para poder realizar este proceso, inicialmente el administrador deberá introducir su antigua contraseña y a continuación escribir su nueva contraseña y confirmarla. En caso de error, se muestra un mensaje informativo. Figura 18: Página "Editar contraseña" - web En la cabecera de la página se encuentran dos botones. El botón del lado izquierdo, anteriormente mostrado en la Figura 17, representa la salida de la aplicación. El botón de la derecha, que se puede observar en la Figura 19, representa el “Home” y dirige al administrador a la página principal. Estos dos botones aparecerán en todas las páginas referentes al administrador, cuya finalidad sea mostrar una lista de datos. Figura 19: Botón home 6.1.4 Mostrar lista de datos Desde la ventana principal, se puede acceder las tablas sobre las cuáles el administrador puede actuar. Cuando el administrador pulsa el nombre de una de las tablas, se dirige a una nueva página donde se muestra una lista con la información contenida en dicha tabla, como se puede observar en Figura 20. En la cabecera de la página se observan dos botones anteriormente mencionados. A la izquierda se encuentra el botón “Home”, que se ha mostrado en la Figura 19. A la derecha se encuentra el botón “Salir”, se ha mencionado en la Figura 17. Ambos cumplen su funcionalidad anteriormente mencionada. En la página se observa una lista de datos con la información más relevante sobre la tabla de datos y un botón en la esquina superior izquierda de la tabla, se utiliza para crear un nuevo elemento. 41 Figura 20: Página "Lista de elementos" - web Figura 21: Acciones sobre un elemento Al final de la página se observa una barra de paginación numérica para ver la información completa del contenido de la tabla. Por defecto, el número máximo de filas por tabla es de 5. La barra muestra con color oscuro la posición en la que se encuentra el administrador, con un tono más claro las posiciones restantes y con un color blanco la primera y la última posición, facilitando la movilidad al administrador. 6.1.5 Crear un nuevo dato Desde la ventana “Lista de elementos” se accede a la página “Crear elemento”, que se muestra en la Figura 22, cuando se pulsa el botón de “Crear elemento”, mencionado en el apartado 6.1.4. En la página se observa el botón “Ver elementos”, en la imagen se muestra como “Ver asignaturas”, en la esquina superior derecha del formulario. Dirige al administrador a la lista de elementos mencionado en el apartado 6.1.4, que se observa en la Figura 20. Se muestra un formulario que se compone de las columnas de la tabla sobre la que actúa el administrador. El administrador debe introducir los valores con el tipo de datos correcto, en caso de no hacerlo correctamente cuando pulse el botón “Crear” se muestra un mensaje como el de la Figura 23. Además, el administrador debe cumplir las restricciones de cada tipo, si no cuando se pulse el botón “Crear”, se muestra un mensaje como el de la Figura 24, bajo el dato donde se ha producido el fallo. 48 Figura 30: Página "Lista tareas terminadas" - web Cada fila posee dos botones. El botón “Evaluar”, que se puede ver en la Figura 31, dirige al profesor a una nueva página donde evalúa la tarea que perteneciente a la fila donde se pulsó el botón. El botón “Ver”, mostrado en la Figura 21, dirige al profesor a una nueva página donde se muestra la información sobre la tarea seleccionada y la media de los alumnos en dicha tarea. Figura 31: Botón evaluar 6.2.6 Evaluar tarea Desde la ventana “Lista de tareas terminadas”, se accede a la página “Evaluar tarea ”, que se muestra en la Figura 32, cuando se pulsa el botón “Evaluar”, mencionado en el apartado 6.2.6, perteneciente a una tarea que se sitúa en una fila de la tabla. Figura 32: Página "Evaluar tareas" - web 49 En la cabecera de la página se observan dos botones. A la izquierda se encuentra el botón “Home”, dirige al profesor a la página principal. A la derecha se encuentra el botón “Salir, dirige al profesor a la pantalla de login. En la página se observa una tabla de datos con el nombre y apellidos de los alumnos que están matriculados en la asignatura a la que dicha tarea pertenece, la nota y el comentario sobre dicha calificación. La tabla se encuentra ordenada en orden alfabético en relación al apellido de los estudiantes. En la esquina superior izquierda de la tabla, se muestra el nombre de la tarea que se evalúa y la asignatura a la que pertenece dicha tarea. Cada fila posee tres botones, mostrados en la Figura 21. El botón “Ver” dirige al profesor a una nueva página donde se muestra la información sobre la tarea y el alumno referente a la fila seleccionada. El botón “Editar” comprueba si el valor de la columna “Nota” esta vacío. Si el valor es vacío, introduce la calificación, en caso contrario, edita la calificación existente. La columna “Comentario calificación” posee el mismo comportamiento cuando se pulsa “Editar”. El botón “Borrar” dirige al profesor a una nueva página donde se elimina la calificación para dicho estudiante en esa tarea. 6.2.7 Ver lista de asignaturas y ver lista de alumnos Desde la opción del menú de la página principal, se accede a la página “Lista de asignaturas” y a “Lista de alumnos”, cuando se pulsa la opción “Lista asignaturas” y “Lista alumnos”, respectivamente, mencionados en el apartado 6.2.2. En la cabecera de las páginas se muestran dos botones. A la izquierda se encuentra el botón “Home”, que es el mismo que se ha utilizado en la Figura 19, el cuál dirige al profesor a la página principal. A la derecha se encuentra el botón “Salir”, que es el mismo que se ha utilizado en la Figura 17, dirige al profesor a la pantalla de login. En la página “Lista de asignaturas” se muestra una tabla con las asignaturas que el profesor imparte y la información más relevante a cada una de ellas. Contiene el número de alumnos matriculados en cada una de ellas y la media de ellos. La tabla posee un botón “Ver” por cada fila, el botón dirige al profesor a una nueva página donde se muestra la información detalla de la asignatura. En la página “Lista de alumnos” se muestra una tabla con la información de los alumnos pertenecientes a las asignaturas que el profesor imparte, ordenada por asignatura. Contiene la calificación hasta el momento dicho alumno en la asignatura. La tabla posee un botón “Ver” por cada fila, el botón dirige al profesor a una nueva página donde se muestra la información detalla del alumno 6.2.8 Ver información de un dato, editar información de un dato y eliminar un dato Cada opción dirige al profesor a una nueva página en función de la acción a realizar y del lugar desde que se ha realizado dicha llamada. A continuación se detalla el comportamiento de las acciones dependientes del lugar. 50 La acción “Ver información” de un dato muestra una tabla con los contenidos relevantes sobre dicho dato. La visualización de las páginas es igual a la mostrada en la Figura 25. Además, incluye los botones de la cabecera mencionados en la Figura 19 que hace referencia a “Home”, y la Figura 17 que hace referencia a “Salir”. Si el profesor se encuentra en la página principal, la página a la que se dirige muestra la información sobre la tarea no finalizada seleccionada en la fila. Si se encuentra en la página “Lista terminadas”, la página a la que se dirige muestra la información sobre la tarea finalizada seleccionada en la fila, incluyendo la nota media de los alumnos en dicha tarea. Si se sitúa en la página “Evaluar tarea”, la nueva página muestra la información de la tarea y del alumno pertenecientes a la fila seleccionada. Si se sitúa en “Lista asignaturas”, dirige al profesor a una nueva página donde se muestra la información detallada de la asignatura, incluyendo el número de alumnos matriculados y una tabla con la lista de las tareas pertenecientes a dicha asignatura y la nota media de ellas. Si se sitúa en “Lista alumnos”, dirige al profesor a una nueva página donde se muestra la información detallada del alumno seleccionado en la fila y la lista de las tareas que tiene el alumno en las que el profesor le da clase y la nota en cada una de ellas. Si el profesor se encuentra en la página principal y pulsa el botón “Editar”, la página a la que se dirige muestra un formulario autocompletado con los contenidos del la tarea no finalizada seleccionada en la fila que se desea editar. Se muestra un botón en la esquina superior derecha del formulario que redirige al profesor a la página principal. La visualización y el comportamiento de dicha página es la misma a la mostrada en la Figura 27, mencionado en el apartado 6.1.7. Si se sitúa en la página “Evaluar tarea”, el funcionamiento se encuentra en el apartado 6.2.6. La acción “Eliminar un dato” muestra una tabla con el contenido del dato a eliminar. En todos los casos, se muestra un mensaje de confirmación antes de realizar la acción, como el que aparece en la Figura 27. Si cancela dicho mensaje, el profesor se mantendrá en la página donde se pulso el botón “Borrar”. Si acepta dicho mensaje, el profesor se dirige a una nueva página. Si se encuentra en la página principal, se dirige a una nueva página donde se borra la entrega no finalizada seleccionada en la fila. Si se sitúa en la página “Evaluar tarea”, se dirige a una nueva página donde se elimina la calificación del estudiante seleccionado en la fila sobre la tarea seleccionada. En ambos casos, cuando pulse el botón “Borrar” el profesor se dirige a la página de dónde procedía. La visualización y comportamiento es el mismo al mostrado en la Figura 28. 6.2.9 Información personal Desde la opción del menú de la página principal, se accede a la página “Información personal, cuando se pulsa la opción “Información personal”, mencionado en el apartado 6.2.2. En la cabecera de las páginas se muestran dos botones. A la izquierda se encuentra el botón “Home”, que es el mismo que se ha utilizado en la Figura 19, el cuál dirige al profesor a la página principal. A la derecha se encuentra el botón “Salir”, que es el mismo que se ha utilizado en la Figura 17, dirige al profesor a la pantalla de login. En la página se muestra en una tabla, la información del profesor, incluyendo la información de las facultades donde trabaja. En la esquina superior derecha de la tabla se encuentra un botón “Editar contraseña” que dirige al profesor a la página donde puede modificar su contraseña. 51 6.3 Manual del estudiante En este apartado se detallan los pasos que debe realizar un alumno para navegar por la aplicación para dispositivos móviles. Se divide por pantallas y se muestra una captura de cada situación para facilitar la guía. 6.3.1 Login El alumno abre la aplicación en su teléfono, al abrirla se muestra una primera pantalla , se observa en la Figura 33, con la opción de loguearse. El alumno se loguea introduciendo su correo de la universidad y la contraseña correcta. En caso de que se produzca un error, se muestra un mensaje informativo. Figura 33: Log in - móvil 6.3.2 Página principal Después de loguearse, el profesor será dirigido a la página principal, que se puede observar en la Figura 34. En la cabecera de la página se pueden apreciar dos botones situados a ambos lados del título, ambos se pueden observar en la Figura 17. En el lado derecho aparece el botón que representa la salida de la aplicación, que dirige al alumno a la página de Login mostrada en la figura 33. En el lado izquierdo aparece el botón que representa un menú, se observa en la Figura 35. El botón de menú muestra una barra lateral. La opción “X ” oculta la barra lateral. La opción “Editar contraseña” redirigirá al estudiante a una nueva página que edita la contraseña que utiliza el alumno en la aplicación. La opción “Asignaturas” dirige al alumno a la página “Lista de asignaturas”, donde se muestran las asignaturas que el 52 estudiante está matriculado. La opción “Profesores” dirige al alumno a la página “Lista de profesores”, donde se muestran los que imparten clase al alumno. La opción “Datos personales” dirige al alumno a una página donde se muestra la información personal del alumno. Figura 34: Página principal - móvil Figura 35: Menú - móvil En la página se observa una lista de datos y un botón en la esquina superior izquierda de la tabla. El botón “Lista terminadas” dirige al alumno a una nueva página donde se muestra la lista de las tareas que han finalizado. La lista que se muestra en la página esta organizada en grupos por el tipo de tarea. Cada grupo esta señalizado con el nombre correspondiente al tipo al que pertenece, es decir, están ordenados por “Proyectos”, “Exámenes”, “Prácticas” y “Ejercicios”, cada uno de ellos representado por un color, para facilitar la lectura. La tarea cuya fecha de entrega sea la más cercana, se muestra en primera posición, y por tanto, todo el grupo al que pertenece. Cada grupo esta dividido en subgrupos, o tareas, ordenados por fecha límite de entrega. Dentro de cada subgrupo se muestra el nombre de la tarea con el color del grupo al que pertenece, la fecha límite de entrega y la asignatura a la que pertenece dicha entrega. Al lado del nombre se encuentra un circulo, representa el plazo a entregar dicha tarea. Si el circulo es de color verde, el alumno posee más de una semana para entregar la tarea; si es amarillo tendrá una semana o menos y si es rojo, tendrá menos de tres días. Además, en cada subgrupo se encuentra un botón “Ver”, mostrado en la Figura 21, que dirige al alumno a una nueva página donde se observa la información detallada de la tarea. 53 6.3.3 Ver información de una tarea pendiente Desde la ventana principal se accede a la página “Ver tarea pendiente”, que se muestra en la Figura 36, cuando se pulsa el botón de “Ver” situado en un subgrupo. Figura 36: Ver tarea pendiente - móvil En la cabecera de la página se observan dos botones anteriormente mencionados. A la izquierda se encuentra el botón “Home”, que se ha mostrado en la Figura 19, que dirige al alumno a la página principal. A la derecha se encuentra el botón “Salir”, se ha mencionado en la Figura 17, que dirige al alumno a la pantalla del Login. En la página se muestra una tabla con la información de la tarea pendiente y el circulo que le corresponde. Al final de la lista se encuentran dos botones, “Asignatura” y “Profesor”. Si el alumno pulsa el primer botón, se dirige a la página “Ver asignatura” que muestra la información de la asignatura a la que pertenece dicha tarea. Si el alumno pulsa el segundo botón, se dirige a la página “Ver profesor” que muestra la información del profesor que imparte la asignatura a la que pertenece dicha entrega. 6.3.4 Ver lista de tareas terminadas Desde la ventana principal se accede a la página “Lista terminadas” cuando se pulsa el botón “Terminadas”. En la cabecera se encuentran el botón “Home” y “Salir”, anteriormente mencionados. La página muestra una estructura similar a la página principal. Las tareas también se dividen en grupos y subgrupos. Las únicas diferencias relevantes se encuentran en la información del grupo. 54 En un subgrupo se muestra el nombre de la tarea, marcada con el color de su grupo, la asignatura a la que pertenece y la calificación. Al lado del nombre de la tarea se encuentra un cuadrado. Si el cuadrado es de color azul claro, aún no ha sido calificada dicha tarea. Si es de color verde, significa que el alumno ha aprobado la entrega y si es rojo, la ha suspendido. También cuenta con un botón “Ver”, mostrado en la Figura 21, que dirige al alumno a una nueva página donde se muestra la información de la tarea terminada. 6.3.5 Ver información de una tarea terminada Desde la ventana “Lista terminadas” se accede a la página “Ver tarea terminada”, se observa en la Figura 37, cuando se pulsa el botón de “Ver” situado en un subgrupo. La Figura 37 se compone de dos imágenes, la primera con la evaluación aprobada y el comentario del profesor. La segunda sin comentario ni calificación. En la cabecera se encuentran el botón “Home” y “Salir”, anteriormente mencionados. Figura 37: Tarea terminada - móvil En la esquina superior izquierda de la tabla se muestra el botón “Lista terminadas” , que dirige al alumno a una nueva página donde se muestra la lista de las tareas que han finalizado. En la página se muestra una tabla con la información de la tarea terminada. Se muestra el comentario que escribió el profesor sobre dicha entrega, en caso de haberlo escrito. La celda donde se muestra la nota, va acorde con el cuadrado que se muestra en la ventana “Lista terminadas”. Si el alumno ha aprobado la tarea, la celda es verde. Si ha suspendido es rojo y si aún no se ha calificado es de color azul claro. Al final de la lista 55 se encuentran dos botones, “Asignatura” y “Profesor”. Si el alumno pulsa el primer botón, se dirige a la página “Ver asignatura” que muestra la información de la asignatura a la que pertenece dicha tarea. Si el alumno pulsa el segundo botón, se dirige a la página “Ver profesor” que muestra la información del profesor que imparte la asignatura a la que pertenece dicha entrega. 6.3.6 Ver lista de asignaturas y ver lista de profesores Desde la opción del menú, mostrado en la Figura 36, de la página principal, se accede a la página “Lista de asignaturas” cuando se pulsa la opción “Asignaturas”, y a “Lista de profesores” cuando se pulsa la opción “Profesores”. Se pueden observar en la Figura 38 y 39, respectivamente. En la cabecera se encuentran el botón “Home” y “Salir”, anteriormente mencionados. Figura 38: Lista asignaturas - móvil Figura 39: Lista profesores - móvil En la página “Lista de asignaturas” se muestra una lista divida en grupos. Cada grupo se compone de un nombre, que es la abreviatura de la asignatura, una tabla donde se muestra la información más relevante de la asignatura, incluyendo la nota media del alumno en dicha asignatura y un botón “Ver” que dirige al alumno a una nueva página donde se muestra la información de la asignatura. En la página “Lista de profesores” se muestra una lista divida en grupos, ordenados por orden alfabético. Cada grupo se compone de una tabla con la información de un profesor que imparte clase al alumno. Incluye una lista con las asignaturas que imparte clase a dicho alumno y un botón “Ver” que dirige al alumno a una nueva página donde se muestra la información del profesor. 56 6.3.7 Ver información de una asignatura y ver información de un profesor Desde la ventana “Lista asignaturas” se accede a la página “Ver asignatura”, mostrada en la figura 40, cuando el alumno pulsa el botón de “Ver” perteneciente a un grupo. También se puede acceder desde “Ver tarea pendiente/terminada”, cuando el alumno pulsa el botón “Asignatura”. En la cabecera se encuentran el botón “Home” y “Salir”, anteriormente mencionados. Figura 40: Ver asignatura - móvil En la página se muestra una tabla con la información de la asignatura. En la esquina superior derecha de la tabla se encuentra el botón “Lista asignaturas” que dirige al alumno a la lista de asignaturas. Al final de la tabla se muestra una tabla con las calificaciones del alumno en dicha asignatura y el porcentaje equivalente de cada una de ellas. Debajo de la tabla, se muestra la media de la asignatura. Si la media es apta, se muestra sobre un rectángulo verde. Si no es apta, se muestra sobre un rectángulo rojo. Si aún no se ha calificado dicha asignatura, no se muestra la tabla de calificaciones y se muestra un rectángulo de color azul claro indicando que aún no se ha calificado. Dichos colores son los mismos que se muestran en el cuadrado de “Lista terminadas” y en la celda correspondiente a la nota de la página “Ver tarea terminada”, anteriormente mencionados. Al final de la página se encuentra el botón “Profesor”. Dicho botón dirige al alumno a la página “Ver profesor” que muestra la información del profesor que imparte dicha asignatura 57 Desde la ventana “Lista profesores” se accede a la página “Ver profesor” cuando el alumno pulsa el botón de “Ver” perteneciente a un grupo. Se puede acceder desde “Ver tarea pendiente/terminada” o desde “Ver asignatura”, cuando el alumno pulsa el botón “Profesor”. En la cabecera se encuentran el botón “Home” y “Salir”, anteriormente mencionados. En la página se muestra una tabla con la información del profesor. En la esquina superior izquierda de la tabla se muestra el botón “Lista profesores”, que dirige al alumno a una nueva página donde se muestran la lista de asignaturas. 6.3.8 Editar contraseña Desde la opción del menú de la página principal, se accede a la página “Editar contraseña” cuando se pulsa la opción “Editar contraseña” mencionado en el apartado 6.3.2. En la cabecera se encuentran el botón “Home” y “Salir”, anteriormente mencionados. La página posee la misma funcionalidad y representación que la que se encuentra en el apartado 6.1.3. 6.3.9 Datos personales Desde la opción del menú de la página principal, se accede a la página “Datos personales” cuando se pulsa la opción “Información personal” mencionado en el apartado 6.3.2. En la cabecera se encuentran el botón “Home” y “Salir”, anteriormente mencionados. En la página se muestra una tabla con la información del alumno que está utilizando la aplicación. Dicha información incluye la facultad donde estudia y el tipo de estudio que realiza En la esquina superior derecha de la tabla se encuentra el botón “Editar contraseña” que dirige al alumno a la página para editar la contraseña de la aplicación.