Data Dashboard-AnnyGutierrezyNatalyOteroyEdithJurado

README.md

@@ -6,20 +6,37 @@
 
 ***
 
-## Flujo de trabajo
-
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
-
-2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar
-   es `git clone` y su estructura normalmente se ve así:
-
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
-   ```
-
-3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
-
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` y también desplegar tu web a Github Pages :smiley:.
+## Objetivo
+Elaborar una pagina web con los siguientes requerimientos:
+En Laboratoria, las Training Managers (TMs) hacen un gran trabajo al analizar la mayor cantidad de datos posibles respecto al desempeño de las estudiantes para apoyarlas en su aprendizaje. Para revisar esta data, las TMs, normalmente, tienen que revisar muchos documentos de excel (Google Spreadsheets) que están localizados en distintas carpetas y ubicaciones. Muchas veces pierden tiempo localizando estos documentos y ejecutando fórmulas para obtener los datos que necesitan.
+
+Para poder optimizar su tiempo, las TMs han solicitado que construyamos una herramienta web donde puedan ver estos datos fácil y rápidamente. Y nos comentaron que estos son los datos que revisan normalmente:
+
+El total de estudiantes presentes por sede y generación.
+El porcentaje de deserción de estudiantes.
+La cantidad de estudiantes que superan la meta de puntos en promedio de todos los sprints cursados. La meta de puntos es 70% del total de puntos en HSE y en tech.
+El porcentaje que representa el dato anterior en relación al total de estudiantes.
+El Net Promoter Score (NPS) promedio de los sprints cursados. El NPS se calcula en base a la encuesta que las estudiantes responden al respecto de la recomendación que darían de Laboratoria, bajo la siguiente fórmula:
+```bash
+[Promoters] = [Respuestas 9 o 10] / [Total respuestas] * 100
+[Passive] = [Respuestas 7 u 8] / [Total respuestas] * 100
+[Detractors] = [Respuestas entre 1 y 6] / [Total respuestas] * 100
+[NPS] = [Promoters] - [Detractors]
+ ```
+La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos técnicos en promedio y por sprint.
+La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos de HSE en promedio y por sprint.
+El porcentaje de estudiantes satisfechas con la experiencia de Laboratoria.
+La puntuación promedio de l@s profesores.
+La puntuación promedio de l@s jedi masters.
+Con esa información y con la base de datos que nos facilitaron pudimos crear este diseño. Sin embargo, creemos que tú podrías proponer algún cambio a este diseño que pueda mejorar la experiencia de las TMs.
+
+#### ¿Qué se requiere?
+
+Trabajar en parejas
+Tener una planificación
+La definición del diseño
+Implementación del data dashboard usando html, css y js
+Desplegar el producto en Github Pages
+
+## Resultado:
+![](assets/images/dashboard.png)

assets/icons/icomoon/style.css

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?jyiamj');
+  src:  url('fonts/icomoon.eot?jyiamj#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?jyiamj') format('truetype'),
+    url('fonts/icomoon.woff?jyiamj') format('woff'),
+    url('fonts/icomoon.svg?jyiamj#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-triangle-right:before {
+  content: "\e902";
+}
+.icon-search:before {
+  content: "\e986";
+}
+.icon-triangle-down:before {
+  content: "\e901";
+}
+.icon-square:before {
+  content: "\e900";
+}