Tercera iteración

En esta iteración vamos a cambiar los diseños de forma que eliminemos todo aquello que no era necesario en la iteración anterior, vamos a seguir una coherencia interna en todas las páginas para que sean similares entre ellas y vamos a buscar que todo sea usable.

En esta primera imagen, véase la Figura 26, se muestra la página del administrador donde, se diferencian finalmente nueve áreas:

• Área de alertas: esta área se mantiene igual que en la segunda iteración. • Área de totales: esta área se mantiene igual que en la segunda iteración.

• Área de lenguajes, aceptados y fallidos: esta área se mantiene igual que en la segunda iteración.

• Área geográfica: en la cuarta área, vamos a mantener el mapa del mundo con los países participantes y vamos a eliminar el listado.

• Área de últimos envíos: esta quinta área, está formada por una tabla y unos diagramas.

La tabla de los últimos envíos la movemos de lugar y en la tabla vamos a mostrar la información del nombre, apellidos y email del usuario, el problema resuelto,

el veredicto, el lenguaje, los aceptados frente a los envíos, los aceptados frente a los usuarios y la fecha del envío.

• Área de evolución de los envíos: gráfica con barras con una evolución de envíos con un diagrama de barras en el que se muestran los meses del curso y el volumen de envíos de cada mes.

• Área de problemas intentados: es una tabla donde aparecen los ids de todos los problemas y muestra si están intentados (color verde) o no (sin color). Cuando se pasa el ratón por encima existe una etiqueta con el nombre del problema y se accede directamente al detalle del problema si se hace clic.

• Área de ranking de problemas: en esta área, añadimos una tabla con un ranking de los problemas, donde se muestran los diez problemas que más aceptados han obtenido frente a los envíos. Esta tabla se compone del nombre del problema y el id, el último veredicto obtenido, el lenguaje en el que se resuelto, aceptados frente a envíos, aceptados frente a usuarios y la fecha del último envío.

• Área de ranking de usuarios: añadimos un ranking de usuarios, donde se muestran los diez usuarios que más problemas diferentes han resuelto. Esta tabla, se compone del nombre, apellidos y email del usuario, el lenguaje o lenguajes que utiliza para resolver los problemas, los aceptados frente a los envíos del usuario, los aceptados frente a los fallidos del usuario y la fecha del último envío.

En esta segunda imagen, véase la Figura 27, se muestra la página del profesor. Esta página está dividida en siete áreas:

• Área descriptiva: en esta área, añadimos un desplegable donde el profesor puede elegir los datos que quiere ver: curso completo o por temas, y además hay una alerta en la que aparecerían los nuevos problemas añadidos a la aplicación. Desde esta área, vamos a poder acceder al listado completo de los alumnos del grupo y al listado completo de problemas del curso.

• Área de aceptados/fallidos: hemos dejado los cuatro primeros módulos y hemos unificado los aceptados frente a los fallidos en una barra.

• Área de últimos envíos: añadimos una tabla de los últimos envíos de problemas, va a mostrar el nombre, apellido y email del alumno, el nombre del problema con el id, el resultado, los aceptados frente a los envíos y la fecha de envío.

• Área de la evolución de los envíos: mantenemos el gráfico de la evolución de los envíos.

• Área de problemas intentados: es una tabla donde aparecen los ids de todos los problemas del curso y muestra si están intentados (color verde) o no (sin color). Cuando se pasa el ratón por encima existe un tooltip con el nombre del problema y se accede directamente al detalle del problema si se hace clic.

La evolución de los envíos, que ya estaba en la iteración anterior y una tabla donde se muestran los problemas del curso. Mediante una tabla formadas por los ids de los problemas vemos que problemas se han intentado (color verde) y cuales no (sin color). Además, al pasar el ratón por encima nos saldría en una etiqueta el nombre del problema y si hacemos clic, accederíamos al detalle del problema.

• Área de ranking de problemas: en esta área, añadimos una tabla con un ranking de los problemas, donde se muestran los diez problemas que más aceptados tienen frente a los envíos. Esta tabla se compone del nombre del problema y el id, el último veredicto obtenido, el lenguaje en el que se resuelto, aceptados frente a envíos, aceptados frente a usuarios y la fecha del último envío.

• Área de ranking de alumnos: se muestra una tabla con el ranking de alumnos que más problemas diferentes han resuelto. Aparece el nombre, apellido y email del usuario, el número de aceptados frente a los envíos, el número de aceptados frente a los fallidos y la fecha del último envío.

Figura 27: Vista previa de la página del profesor

En la siguiente imagen, véase la Figura 28, se muestra el listado de problemas y el listado de alumnos.

La página del listado de problemas es una página nueva que añadimos en esta iteración. Se compone de dos áreas:

• Área de selección de la vista de datos: en esta área nos vamos a encontrar un desplegable donde el profesor va a poder elegir ver el listado de problemas del curso completo o por temas.

• Área de problemas: esta área se compone de una tabla con el listado de problemas perteneciente a la elección del desplegable anterior donde se muestra: el nombre del problema junto con el id, los intentos frente a los usuarios, los aceptados únicos, los envíos de ese problema (envíos totales), los aceptados frente a los envíos totales y los aceptados frente a los usuarios únicos.

La página referente al listado de alumnos se había eliminado en la segunda iteración, pero se ha vuelto a añadir ya que es interesante presentar la información relativa al grupo de alumnos. Se compone de un solo área:

• Área de alumnos: esta zona, se compone de una tabla con el nombre, apellido y email del alumno, así como los aceptados frente a los envíos, los fallidos frente a los envíos y la fecha del último envío.

Figura 28: Vista previa de la página del listado completo de problemas y del listado de alumnos

En esta tercera imagen, véase la Figura 29, se aprecia la vista del detalle del usuario/ alumno. En esta página identificamos seis áreas:

• Área descriptiva: se muestran los datos del usuario: nombre, apellidos, email, que ya estaban, y añadimos: fecha de registro, país y la institución a la que pertenece. • Área de aceptados/fallidos: en la segunda área añadimos una barra con los

aceptados frente a los fallidos en porcentajes. Los fallidos además están divididos en los diferentes tipos de errores.

• Área últimos envíos: esta tabla muestra los últimos envíos de problemas, donde aparece el nombre del problema con el id, el resultado, los aceptados frente a los envíos y la fecha de envío.

• Área de evolución de los envíos: está dedicado a la evolución de los envíos, mediante un gráfico de barras en el cual el alumno/ usuario puede ver de un simple vistazo cuando ha hecho más o menos envíos durante el curso.

• Área de problemas intentados: está dedicado a los problemas del curso. Mediante una tabla formadas por los ids de los problemas vemos que problemas se han intentado y han sido aceptados (color verde), cuales se han intentado y han sido fallidos (color rojo) y cuales no (sin color). Además, al pasar el ratón por encima nos saldría en un tooltip el nombre del problema y si hacemos clic, accederíamos al detalle del problema.

• Área de ranking de problemas: En el tercer espacio, nos encontramos una tabla con el ranking de problemas, donde aparecen los problemas que más aceptados frente a envíos han obtenido. En la tabla aparece el nombre del problema junto con el id, el último veredicto obtenido en ese problema, los aceptados frente a los envíos y la fecha del último envío.

Figura 29: Vista previa de la página del detalle de un alumno/usuario

En esta cuarta imagen, véase la Figura 30, se muestra la página del detalle de un problema. Esta página se compone de cinco áreas:

• Área últimos envíos: que muestra los últimos envíos referentes a ese problema donde aparece el nombre, los apellidos y el email, del usuario que ha hecho el envío, el resultado, los aceptados frente a los envíos y la fecha del envío.

• Área de la evolución de los envíos: el diagrama de barras muestra la evolución de los envíos a lo largo del curso.

• Área ranking de alumnos: esta tabla muestra el ranking de alumnos que más problemas diferentes han resuelto y donde aparece el nombre, apellido y email del usuario, el número de aceptados frente a los envíos, el número de aceptados frente a los fallidos y la fecha del último envío.

Figura 30: Vista previa de la página del detalle del problema