haciendo README

[Marielk]

TEMAS A INCLUIR 1) Definición del producto

Quiénes son los principales usarios de producto. Cuáles son los objetivos de estos usarios en relación con el producto. Cuáles son los datos más relevantes que el usuario quiere ver en la interfaz y por qué. Cómo los descubriste. Cuándo revisa normalmente estos datos Cómo crees que el producto les está resolviendo sus problemas. Cómo fue tu proceso de diseño. 2) Sketch de la solución (prototipo de baja fidelidad)

3) Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)

Implementación de la Interfaz de Usuario (HTML/CSS/JS)

Permitir al usuario seleccionar un cohort de una lista de cohorts. 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. Visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops. Incluir pruebas unitarias. Es importante que tu interfaz, a pesar de ser una versión mínima de tu ideal, igual debe seguir los fundamentos de visual design, como: contraste, alineación, jerarquía, entre otros.

Detalles de Implementación data.js

1) computeUsersStats(users, progress, courses)

main.js

[majosalazar]

https://github.com/ricval/Documentacion/blob/master/Guias/GitHub/mastering-markdown.md

[Marielk]

Detalles de implementación

Nuestra implementación permitirá a la usuaria visualizar la información detallada del progreso de cada una de las alumnas, en esta versión, esta disponible la visualización de una alumna en particular la cual utilizamos como conejillo de indias para testear nuestro código. En el archivo data.js pueden encontrar una extensa colección de variables y procedimientos que usamos para poder ir desmenuzando la gigantesca base de datos de las alumnas con la que trabajamos. Ya que esta data esta restringida solo a un cohort (Lima 2018 ), la información gira solo dentro de este archivo. Los datos fueron llamados a través del uso de "Fetch" y sus respectivas "promesas" una vez capturada la información se fue obteniendo datos cada vez más particulares a través de ciclos como for in, for each, etc. Fue un extenso trabajo poder llegar a acceder a los subniveles más profundos de esta información. Por otro lado tenemos el archivo main.js, en el cual trabajamos exclusivamente el "manejo de DOM" de esta manera pudimos mantener por separado la lógica de las funciones requeridas con toda la parte visual y funcional del sitio, acá se obtienen los elementos del html para cruzarlos con la información obtenida en el data.js, fue un largo trabajo de varios días el lograr que se visualizaran los datos de manera correcta, lo que seguimos trabajando hasta este momento.

[Marielk]

Sketch de la solución (prototipo de baja fidelidad) La primera etapa de nuestro proceso creativo consistió en hacer muchos borradores con papel y lápiz, (pueden revisar algunos de los sketch incluidos en la carpeta src/ UX/ baja fidelidad ) de esta forma más sencilla pudimos ir visualizando una idea general y también comprender mejor que era lo que queríamos lograr, también nos sirvió para aclarar nuestras ideas y poder determinar cuales serían las estructuras básicas que usaríamos para construir nuestro producto. Durante este proceso también pudimos compartir un poco y conocernos mejor para poder establecer una buena relación de compañerismo, apoyo y compromiso entre nostras para lo que se nos venía por delante con este arduo proyecto.
Continuando con el proceso probamos varias herramientas para la fabricación de nuestro prototipo, siendo una muy útil "balsamiq" la que con una interfaz muy sencilla era perfecta para ordenar mejor nuestras ideas del papel a lo digital pero aún muy básico (estas imágenes también están incluidas en la carpeta antes mencionada) . También probamos la diagramación con una app móvil llamada "Wireflow" y la funcionalidad con otra llamada "Prott" , fue una especie de tour por diversas aplicaciones que nos ofrecían hacer nuestro trabajo más "fácil y bonito" , sin embargo ya en este punto comenzamos a darnos cuenta de que debíamos priorizar algunas cosas por sobre otras. Por lo que finalmente nos quedamos con una plataforma virtual llamada "Figma" con la cual empezamos a trabajar bastante.

[Marielk]

Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) Llegadas a este punto nuestro producto iba tomando cada vez más cuerpo y ya podíamos ver algo más claro y definido, sin embargo al momento de emular el flujo de nuestro sitio nos dimos cuenta de que nuestro diseño era muy extenso y complicado de implementar en vista del tiempo que nos quedaba para desarrollar, por lo que tras muchos re-dibujos y hojas ralladas logramos conceptualizar que era lo que realmente necesitábamos, y así nos fuimos desprendiendo de muchos adornos y otras cosas bonitas que se nos habían ocurrido al principio para finalmente quedarnos con lo más fundamental y apegado al encargo que se nos entrego. Aun así este diseño era bastante atractivo, utilizamos los colores institucionales y algunos tips del manual de marca, nuestra idea principal era emular cosas de la vida real con las que trabaja nuestra usuaria como las fotos de las alumnas que tienen en la oficina o los stickers de puntitos de colores que usan para destacarlas, pueden revisar el prototipo terminado en el siguiente enlace:

https://www.figma.com/file/bmUVrzOkpREixx4i5XDFQyEv/Untitled