Data Dashboard-Pamela de la cruz y Valeria Valles

README.md

@@ -1,25 +1,50 @@
-# Data Dashboard
-
-* **Track:** _Common Core_
-* **Curso:** _Creando tu primer sitio web interactivo_
-* **Unidad:** _Producto final_
-
-***
+# Producto Final
+## Resúmen del Producto 
+> 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.
+
+## Requerimientos del usuario
+> * 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.
 
 ## Flujo de trabajo
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
+1. Debes realizar un [**fork**] (https://github.com/Laboratoria-learning/data-dashboard)
    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í:
+2. Luego clonamos el fork en la máquina. Con el comando `git clone` y su estructura normalmente se ve así:
 
    ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
+    git clone https://github.com/<nombre-de-usuario>/data-dashboard.git
    ```
 
-3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
+3. Realizamos la estructura y diseño de la página web establecida
+4. Dar funcionalidad mediante javascript.
+5. Realizar `README.md` y también desplegamos la web a Github Pages 
+
+## Herramientas 
+1. HTML5
+2. CSS3
+3. JAVASCRIPT(Dom)
+
+## OBJETIVO FINAL
+* Se visualiza una web site donde se interactuara con una base de datos asi verificar el avanze del estudiante, las clases y calificación a los jedimaster de LABORATORIA.
 
-> 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:.
+ ![overview](assets/images/overview.png)
+
+ ![students](assets/images/student.png)

css/main.css

@@ -1,3 +1,262 @@
-/*
- * Estilos de tu proyecto
- */
+/*STYLE REUTILIZADOS*/
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: sans-serif;
+    background-color: rgb(250, 250, 250);
+}
+
+/*STYLE FOR THE HEADER*/
+header {
+    /*outline: 1px solid red;*/
+    background-color: white;
+    width: 100%;
+    position: fixed;
+    text-align: center;
+    margin: 0px;   
+}
+
+header #logo {
+    /*outline: 1px solid red;*/
+    width: 184px;
+    height: 55px;
+    margin: 5px;
+    display: inline-block;
+}
+
+/*STYLE FOR THE NAV*/
+nav {
+    background-color: rgb(201, 201, 201);
+}
+
+nav #sectionSede {
+    /*outline: 1px solid yellow;*/
+    text-align: left;
+    padding: 20px 0 20px 90px;
+}
+
+ul {
+    /*outline: 1px solid blue;*/
+    list-style: none;
+    margin: 0 6px 0 90px;
+    overflow: auto; /*devuelve su contexto de bloque y asi alvergue los eleemntos li flotando*/  
+    /*text-align: left;*/
+}
+
+li {
+    /*outline: 1px solid green;*/
+    float: left; /*Ojo si aplicamos float saca de contexto al elemento bloque ul*/
+    padding: 15px 16px 4px 0;
+}
+
+a {
+    /*outline: 1px solid skyblue;*/
+    text-decoration: none;
+    display: block; /*Convertir la etiqueta <a> inline a bloque para que toda la superficia pueda ser linkeado*/
+    color: #000;
+    font-weight: bold;
+    font-size: 1.3rem;
+
+}
+
+a:hover { /*cambiar el background del texto*/
+    border-bottom: 6px solid #f9a91a;
+}
+
+/*STYLE FOR THE SECTIONS GENERAL*/
+#overview {
+    text-align: center;
+    padding-top: 240px;
+}
+
+.enrollment {
+    margin: 25px;
+}
+/*FIRST SECTION*/
+/*Coloca los div en inline block para la seccion 1 y la ultima*/
+h3 {
+    margin-bottom: 25px;
+}
+
+h2 {
+    text-align: left;
+    margin-left: 10px;
+}
+
+p {
+    font-weight: bold;
+    font-size: 1.5rem;
+    padding: 2px;
+}
+
+.firstSection {
+    display: inline-block;
+    background-color: white;
+    width: auto;
+    height: auto; /*320px*/
+    margin-right: 36px;
+    margin-bottom: 90px;
+    text-align: left;
+}
+
+.secondSection {
+    display: inline-block;
+    background-color: white;
+    width: auto;
+    height: auto;
+    text-align: left;
+    margin-bottom: 90px;
+}
+
+.contentScore { /*Contenido de las secciones debajo de cada puntaje*/
+    height: 62px;
+    width: 156px;
+    background: rgb(235, 235, 235);
+    float:left;    
+    text-align: center;
+    margin-right: 5px;
+}
+.contentSkill {
+    height: 62px;
+    width: 214px;
+    background: rgb(235, 235, 235);
+    float:left;    
+    margin-right: 5px;
+    text-align: center;
+}
+.contentScore, .contentSkill span {
+    font-size:0.6rem;
+}
+
+/*Estilo para los diagrmas*/
+.graphic {
+    /*outline: 1px solid yellow;*/
+    margin-top: 25px;
+    width: 326px;
+    height: 190px;
+}
+.skillGraphic {
+    margin-top: 25px;
+    width: 660px;
+    height: 342px;
+    margin-right: 50px;;
+}
+.skillPastel {
+    width: 310px;
+    height: 263px;
+    margin: 60px;
+}
+/*-------------------------------------*/
+/*--.....SECTION STUDENTS....*/
+.container1 {
+    /*outline: 1px solid purple;*/
+    padding-top: 220px;
+}
+
+nav ul {
+    /*outline: 1 px solid black;*/
+    list-style: none;
+}
+
+.navcontainer a {
+    /*outline: 1px solid red;*/
+    text-decoration: none;
+}
+
+.navcontainer {
+    /*outline: 1px solid black;*/
+
+}
+
+.con-opc li a{
+    /*outline: 1px solid black;*/
+    width: 13px;
+    height: 13px;
+    margin-right: 15px;
+    text-align: none ;
+}
+.con-opc {
+    /*outline: 1px solid black;*/
+    display: inline-block;
+    padding: 0;
+    margin-left: 15px;
+
+}
+.con-opc li {
+  /*outline: 1px solid brown;*/
+  list-style: none;
+  margin: 7px;
+  font-size: 20px;
+
+}
+h2 {
+    margin-left: 20px;
+    text-transform: uppercase;
+}
+.opciones {
+    /*outline: 1px solid green;*/
+    display: inline-block;
+    width: 25%;
+    margin-left:90px;
+    background: #fff;
+
+}
+
+.container2 {
+    /*outline: 1px solid black;*/
+    /*display: inline-block;*/
+    width: 60%;
+    margin-right: 60px;
+    float: right;
+}
+.input {
+    /*outline: 1px solid blue;*/
+    margin-bottom: 25px;
+    margin-top: 10px;
+}
+input {
+    width: 100%;
+    height: 30px;
+
+}
+.con-ul li {
+    /*outline: 1px solid red;*/
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+}
+ .con-frontend {
+    /*outline: 1px solid purple;*/
+    float: left;
+    width: 30%;
+    margin: 5px;
+
+}
+ul {
+    padding: 0;
+
+}
+#contenedor-frontend {
+   /*outline: 1px solid red;*/
+   background: #fff;
+   width: 95%;
+   margin-left: 10px;
+}
+.con-frontend li {
+    display: inline-block;
+    /*outline: 1px solid black;*/
+    margin: 7px;
+}
+
+#container1 {
+    display: none;
+}
+/*#options-menu {
+    display: none;
+}*/
+
+