diff --git a/README.md b/README.md index e9b59c4c..c3a7c1c3 100644 --- a/README.md +++ b/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//freelancer.git + git clone https://github.com//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) \ No newline at end of file diff --git a/assets/images/overview.png b/assets/images/overview.png new file mode 100644 index 00000000..da1f9d7c Binary files /dev/null and b/assets/images/overview.png differ diff --git a/assets/images/student.png b/assets/images/student.png new file mode 100644 index 00000000..7155d6d1 Binary files /dev/null and b/assets/images/student.png differ diff --git a/css/main.css b/css/main.css index 6355c827..04050228 100644 --- a/css/main.css +++ b/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 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; +}*/ + + diff --git a/index.html b/index.html index 8930fa03..f62beba4 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,290 @@ Data Dashboard + + + + - + +
+ + + +
+ +
+ +
+
+
+

ENROLLMENT

+
+

0

+ # STUDENTS CURRENTLY ENROLLED +
+
+

0%

+ % DROPOUT +
+
+ enrollment +
+
+
+
+
+

ACHIEVEMENT

+
+

0

+ # STUDENTS THAT MEET THE TARGET +
+
+

0%

+ % OF TOTAL (135) +
+
+ achievement +
+
+
+
+
+

NET PROMOTER SCORE

+
+

0%

+ # STUDENTS THAT MEET THE TARGET +
+
+

0% Promoters

+

0% Passive

+

0% Detractors

+
+
+ nps +
+
+
+
+ +
+
+
+

TECH SKILLS + overall (cumulative) +
+ +
+

+
+

0

+ # STUDENTS THAT MEET THE TARGET +
+
+

0

+ % OF TOTAL (135) +
+
+ rectangular-graphic + meet-target +
+ +
+
+
+ +
+
+
+

LIFE SKILLS + latest Sprint (S4) +
+ +
+

+
+

0

+ # OVERALL CLASS AVERAGE +
+
+

0

+ # OF STUDENTS THAT MEET THE TARGET +
+
+ rectangular-graphic + meet-target +
+ +
+
+
+ +
+
+
+

STUDENT SATISFACTION

+
+

0

+ % MEETING OR EXCEEDING EXPECTATIONS (CUMULATIVE) +
+
+ student-satisfaction +
+
+
+
+
+

TEACHER RATING

+
+

0

+ OVERALL TEACHER RATING (CUMULATIVE) +
+
+ teacher-rating +
+
+
+
+
+

JEDI MASTER RATING

+
+

0

+ OVERALL JEDI RATING (CUMULATIVE) +
+
+ jedi-rating +
+
+
+
+
+ +
+
+

SPECIALIZATION:

+
    +
  • Javascript
    • +
  • UX Design
    • +
  • Front end Designer
    • +
+
+
+
+ +
+
+
+ +
+
+

diana navarro

+ frontend developer +
    +
  • Javascript
    • +
  • apis
    • +
  • jquery
    • +
+
+
+
    +
  • tech skills
    • +
  • life skills
    • +
  • english skills
    • +
+
+
+
+
+ + + + + + + diff --git a/js/app.js b/js/app.js index 895ae2dd..1adc7f44 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,82 @@ -/* - * Funcionalidad de tu producto - */ +/* Funcionalidad de tu producto*/ +window.addEventListener('load', function() { + var sede = document.getElementsByClassName('sede'); + var promocion = document.getElementsByClassName('promocion'); + var student = document.getElementById('student');// al quiero hacer click + var container1 = document.getElementById('container1');// al que quiero que aparezca + var overview = document.getElementById('overvi');// opcion overview + var overcon = document.getElementById('overview');// contenido overview + var lima = document.getElementById('lima'); // el evento clicl select + var currentStudents = document.getElementById('currentStudents');// mostrar la cantidad de alumnas + // var par = document.getElementById('par') + /* function studentsLaboratoria(sede, generacion) { + } + studentsLaboratoria('Lima', '2017-II');*/ + student.addEventListener('click', elige); + function elige() { + container1.style.display = 'block'; + overcon.style.display = 'none'; + } + overview.addEventListener('click', over); + function over() { + overcon.style.display = 'block'; + container1.style.display = 'none'; + } + + lima.addEventListener('select', container); + function container() { + + } + // 1.funcion para la primera solicitud de usuario + function cantStudents() { + var sedAlum = data['AQP']['2016-2']['students']; + + for (var i = 0; i < n.length ; i++) { + if (n[i].active === true) { + var points = n[i].sprints.score.hse; + // for(var j = 0; j