Data Dashboard - Andrea Encarnacion y Ruth Matos

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í:
+## Resumen:
+ * Un dashboard es una representación gráfica de las principales métricas o KPIs que para el seguimiento de los objetivos en una organizacion o empresa. 
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
-   ```
+## Objetivo:
+  * Como producto final nuestro objetio es realizar un Data Dashboard para analizar la mayor cantidad de datos posibles respecto al desempeño de las estudiantes de Laboratoria para lo cual se solicitó que construyamos una herramienta web donde puedan ver estos datos fácil y rápidamente.
+![sketch 1](assets/sketch-1.png)
+Partimos del siguientes esquema para desarrollar nuestro programa.
 
-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:.
+## Flujo de trabajo
+1. El primer paso a seguir era hacer uso de este repositorio: [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
+2. Luego teniamos que seguir los siguientes lineamientos:
+  - 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:
+
+     [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.
+
+   3. Nos pidieron:
+    * 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.

css/main.css

@@ -1,3 +1,72 @@
-/*
- * Estilos de tu proyecto
- */
+/*quitando estilos predeterminados*/
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+li{
+    list-style: none;
+    padding-left: 10px;
+}
+
+div{
+    padding: 15px;
+}
+
+/*agregando estilos a header*/
+header{
+    width: 100%;
+    height: 90px;
+    background: white;
+    z-index: 1000;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+header img{
+    height: 60px;
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+header .fa{
+    font-size: 35px;
+    margin: 25px;
+    position: absolute;
+    right: 0;
+}
+
+/*agregando estilos a nav*/
+nav{
+    background: #e4e2df;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    margin-top: 90px;
+}
+
+nav div{
+    width: 100%;
+}
+
+nav select{
+    background: transparent;
+    border: none;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 30px;
+    font-weight: 600;
+    height: 45px;
+    margin: 10px;
+    padding: 5px;
+    width: 260px;
+}
+.see-info{
+    background: #d8d6d3;
+}
+
+.see-info li{
+    display: inline-block;
+    font-size: 25px;
+    margin: 10px;
+}

index.html

@@ -3,12 +3,49 @@
   <head>
     <meta charset="utf-8">
     <title>Data Dashboard</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600" rel="stylesheet">    
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
-
+    <header>
+      <img src="assets/images/logo-laboratoria.svg" alt="logo laboratoria">
+      <i class="fa fa-bars" aria-hidden="true"></i>      
+    </header>
+    <nav>
+      <div>
+        <select name="sede" id="sede">
+          <option value="">SEDE</option>
+          <option value="lima">LIMA</option>
+          <option value="arequipa">AREQUIPA</option>
+          <option value="chile">CHILE</option>
+          <option value="mexico">MEXICO</option>
+        </select>
+        <select name="generation" id="generation">
+          <option value="generacion">GENERACIÓN</option>
+          <option value="2016-2">2016 - II</option>
+          <option value="2017-1">2017 - I</option>
+          <option value="2017-2">2017 - II</option>
+        </select>
+      </div>
+      <ul class="see-info">
+        <li>DASHBOARD</li>
+        <li>ALUMNAS</li>
+      </ul>
+    </nav>
+    <section>
+      <div id="container"></div>
+      <div id="charts-pie"></div>
+      <div id="container2"></div>
+      <div id="charts-bar"></div>
+      <div id="container3"></div>
+      <div id="charts-column"></div>
+    </section>
 		<!-- Base de datos -->
 		<script src="./js/data.js"></script>
 		<!-- Aquí va tus archivos JS -->
     <script src="./js/app.js"></script>
+    <!-- Google charts -->
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   </body>
 </html>