Data Dashboard es una interfaz que esta destinada para uso de la Training Managers (TMs) de Laboratoria. Esta interfaz permitirá facilitar el trabajo, que la data de información sea más amigable al poder visualizarse y permitirá que la toma de decisiones sea más ágil para la usuaria.
Branch: master
Clone or download
Pull request Compare This branch is 6 commits ahead, 2 commits behind fannybecerravera:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data
docs
src
test
.eslintrc
.gitignore
README.md
package-lock.json
package.json

README.md

Data Dashboard

Introducción

Data Dashboard es una interfaz que esta destinada para uso de la Training Managers (TMs) de Laboratoria. Esta interfaz permitirá facilitar el trabajo, que la data de información sea más amigable al poder visualizarse y permitirá que la toma de decisiones sea más ágil para la usuaria. Para la interfaz debemos implementar en su construcción:

  1. Que el usuario tenga la opción de seleccionar un cohort de una lista de cohorts.
  2. Al seleccionar un cohort:
    • Listar las alumnas de ese cohort
    • Para cada alumna:
      • Calcular porcentaje de completitud de todos los cursos.
      • Calcular grado de completitud de lecturas, ejercicios autocorregidos, y quizzes.
      • Ordenar alumnas por completitud general (porcentaje consumido/completado de todos los cursos del cohort en cuestión), de lecturas, ejercicios autocorregidos y quizzes.
      • Filtrar/buscar alumnas por nombre.
  3. Visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
  4. Incluir pruebas unitarias.

alt text

Planificacion del proyecto:

Ingresar a : https://trello.com/b/5HAZLjUE/proyecto-2

Entrevista

  • Nombre: V.
  • Cargo: TMs en Chile

a. Para empezar, nos gustaría saber. ¿Con cuanta frecuencia utilizas la aplicación LMS?

R: La utilizo todos los días o día por medio esto depende de la semana y de la frecuencia de lo que estén haciendo las alumnas.

b. ¿Para qué utilizas la aplicación?

R: La utilizo para ir revisando el avance de cada alumna, para ir viendo las que han avanzado o no y ver los resultados. Cuando observo que los resultados están malos, se ve la opción de que se haga por ejemplo un repaso de la materia.

c. ¿Te agrada el uso de la aplicación?

R: Si me gusta, la utilizo porque es una herramienta que me ayuda a acceder a la información para hacer mi trabajo bien.

d. ¿Que es lo que más te agrada?

R: Que acumule los datos de manera útil para mí, en donde yo obtengo los resultados sin tener que hacer tantos cálculos, para así hacer más agiles la toma de decisiones.

e. ¿Qué le añadirías a la aplicación?

R: Entre más funciones tenga mayor opciones y funcionalidad tienen para mí la aplicación y seria genial poder agregar la función del Datadashboard

f. ¿Para ti cuáles son los datos más relevantes y por qué?

R:

  1. El porcentaje de avance.
  2. los resultados.

g. En cuanto a las funciones de la aplicación. ¿Cuál sería el orden de prioridad ordenándolos de mayor a menor prioridad?

R: Seria:

  1. el grado de completitud de los retos de los diferentes tipos de evaluaciones
  2. Ver los resultados.
  3. Y luego poder hacer un ranking. (Sería una función importante para poder ordenar los resultados tanto de lecturas, ejercicios autocorregidos y quizzes de las alumnas.

h. ¿Cuáles son los colores que de deberíamos utilizar para la aplicación?

R: Deberían ser los colores que representan a la nueva marca de Laboratoria, en donde el logo tiene una fuente más gruesa y se utiliza el amarillo más fuerte, el menta y el fascia. A demás del blanco y el negro que resaltan los otros colores. Y creo que algo importante que agregar seria la legibilidad cuando se lea la información.

i. Si pudiera cambiarle o agregarle algo. ¿Qué seria?

R: Me gustaría poder agregarle las evaluaciones de soft skills que ustedes realizan, pero eso esta dentro de la data del Json.

Conclusión

El LMS es una aplicación necesaria para facilitar el trabajo de la TMs de Laboratoria. Las funciones más necesarias son:

  1. el grado de completitud de los retos de los diferentes tipos de evaluaciones
  2. Ver los resultados.
  3. Y luego poder hacer un ranking. (Sería una función importante para poder ordenar los resultados tanto de lecturas, ejercicios autocorregidos y quizzes de las alumnas.
  4. Sería ideal poder agregar las evaluaciones de soft skills. Y los colores utilizados para la aplicación son los que representan a la marca actualmente (amarillo fuerte, menta y fucsia.

Problemática observada:

Falta de mayores opciones de funcionalidad en LMS la cual facilite el trabajo de la usuaria.

Modelo de solución:

Creación de una nueva funcionalidad en el LMS, aplicación Datadashboard, la cual contemple las siguientes características:

  1. Opción que nos entregue el grado de completitud de las diferentes evaluaciones de las alumnas.
  2. Opción para ver los resultados
  3. Y opción que nos permita realizar un ranking con los resultados.

Scketch

https://raw.githubusercontent.com/nahytar/scl-2018-05-bc-core-am-datadashboard/master/src/img/sckech1.jpeg

https://raw.githubusercontent.com/nahytar/scl-2018-05-bc-core-am-datadashboard/master/src/img/scketch2.jpeg

https://raw.githubusercontent.com/nahytar/scl-2018-05-bc-core-am-datadashboard/master/src/img/scketch3.jpeg

https://raw.githubusercontent.com/nahytar/scl-2018-05-bc-core-am-datadashboard/master/src/img/scketch4.jpeg

https://raw.githubusercontent.com/nahytar/scl-2018-05-bc-core-am-datadashboard/master/src/img/scketch5.jpeg

Prototype

https://www.figma.com/proto/0lzCr4jnTq7Fo3SbfE3KarFU/Untitled?node-id=2%3A3&scaling=contain

Fuentes de Investigación

CSS

transition

Las transiciones CSS le permite cambiar los valores de propiedad sin problemas (de un valor a otro), durante un período determinado. https://www.w3schools.com/css/css3_transitions.asp

inherit

inherit es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el valor calculado de la propiedad de su elemento padre. https://developer.mozilla.org/es/docs/Web/CSS/inherit

JS

getElementsByClassName

El método getElementsByClassName () devuelve una colección de todos los elementos en el documento con el nombre de la clase especificada, como un objeto NodeList. https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

currentTarget

Identifica el actual target del evento, como el evento que atraviesa el DOM. Siempre hace referencia al elemento cual el controlador del evento fue unido, opuesto a event.target cual identifica el elemento en cual ocurrió el evento. https://developer.mozilla.org/es/docs/Web/API/Event/currentTarget

stopPropagation

Evita la propagación adicional del evento actual en las fases de captura y bubbling. https://developer.mozilla.org/es/docs/Web/API/Event/stopPropagation