Laboratoria · Griscodhelic · Feb 25, 2020 · Feb 26, 2020 · Feb 26, 2020 · Feb 26, 2020
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/src/index.html"
+        }
+    ]
+}
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Data Lovers
+# Pokemón
 
 ## Índice
 
@@ -15,120 +15,157 @@
 
 ## 1. Preámbulo
 
-Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read),
-el 90% de la data que existe hoy ha sido creada durante los últimos dos años.
-Cada día generamos 2.5 millones de terabytes de datos, una cifra sin precedentes.
-
-No obstante, los datos por sí mismos son de poca utilidad. Para que esas
-grandes cantidades de datos se conviertan en **información** fácil de leer para
-los usuarios, necesitamos entender, procesar y mostrar estos datos. Una manera
-simple de hacerlo es creando _interfaces_ y _visualizaciones_.
-
-En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte
-izquierda se puede construir (a la derecha) una interfaz amigable y comprensible
-para el usuario.
-
-![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk)
-
-\* Puedes ver el detalle de la data en este [link](https://gist.github.com/lalogf/dd4aa3017a9f8aa8f90dfbca382c4dc9#file-student-json)
-y la interfaz construida en este [link](https://app.talento.laboratoria.la/profile/HFOoMpOreBU2psCcjjLg5O2EWEv2).
-
-## 2. Resumen del proyecto
-
-En este proyecto **construirás una _página web_ para visualizar un
-_conjunto (set) de datos_** que se adecúe a lo que tu usuario necesita.
-
-Como entregable final tendrás una página web que permita a los usuarios
-**visualizar, filtrar, ordenar, etc.**.
-
-Te proponemos una serie de datos de diferentes _temáticas_ para que los
-explores y decidas con cuál te interesa trabajar. Cada _set_ de datos viene con
-información básica sobre los datos y su estructura, y una lista de las
-necesidades de los usuarios que proviene de una investigación (_research_)
-hecha por el equipo de Laboratoria.
-
-Una vez que elijas, diseña tu proyecto intentando ofrecerle la mejor experiencia
-posible para ayudarle a satisfacer sus necesidades.
-
-### Estos son datos que te proponemos:
-
-* [Indicadores de desarrollo del Banco Mundial](src/data/worldbank/worldbank.json)
-  de algunos países (Brasil, Chile, México y Perú). Estos datos incluyen
-  indicadores demográficos, económicos y comerciales.
-* [Pokémon](src/data/pokemon/pokemon.json):
-  En este set encontrarás una lista con los 151 Pokémon de la región de Kanto,
-  junto con sus respectivas estadísticas usadas en el juego [Pokémon GO](http://pokemongolive.com).
-* [Steam noticias](src/data/steam/steam.json):
-  Lista noticias relacionadas a los videojuegos presentes en la
-  plataforma de [Steam](https://store.steampowered.com/).
-* [League of Legends - Challenger leaderboard](src/data/lol/lol.json):
-  Este set de datos muestra la lista de jugadores en una liga del
-  juego League of Legends (LoL), puedes revisar la documentación de su API en
-  este [link](https://developer.riotgames.com/api-methods/).
-* [Personas heridas por medio de transporte en EEUU](src/data/injuries/injuries.json).
-  Este set nos muestra el número de personas heridas en accidentes de
-  transporte, con data anual desde 1960 y categorizada por tipo de transporte
-  (aire, barco, automóvil, moto, bicicleta, ...).
-* [Rick and Morty](src/data/rickandmorty/rickandmorty.json).
-  Este set nos proporciona la lista de los personajes de la serie Rick and
-  Morty. Puedes revisar la documentación de su API en este [link](https://rickandmortyapi.com).
-* [Pacientes en EEUU](src/data/patient/patient.json).
-  Este set nos proporciona una lista de pacientes de EEUU. Puedes revisar la
-  documentación de su API en este [link](https://r2.smarthealthit.org/Patient).
-
-## 3. Objetivos de aprendizaje
-
-El objetivo principal de este proyecto es que, entendiendo las necesidades de
-tus usuarios, aprendas a diseñar y construir una interfaz web donde se pueda
-visualizar y manipular data.
-
-Revisa la lista y reflexiona sobre los objetivos que conseguiste en el
-proyecto anterior. Piensa en eso al decidir tu estrategia de trabajo individual
-y de equipo.
+Primeros pasos
+Antes de empezar a escribir código, debes definir qué deberá hacer el producto en base al conocimiento que puedas obtener de tu usuario. Estas preguntas te pueden ayudar:
+<br>
+    • ¿Quiénes son los principales usuarios de producto?
+Niños, jóvenes y adultos, jugadores de la app para dispositivos móviles pokémon go!, que frecuentemente accesan a la página a buscar información sobre las mejores opciones de personajes elegibles para el juego: su apariencia, sus habilidades, debilidades, etc.
+<br>
+    • ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
+Enriquecer la experiencia de juego, mediante la consulta de la información que les va a permitir conocer detalles sobre sus personajes favoritos para planear su estrategia de juego.
+Pokémon es un juego muy popular entre la gente de todas las edades y la base de datos pretende entregar al usuario los detalles de cada pokémon disponible para aquellos que se encuentren interesados en las habilidades, aspectos y/o características de los personajes.
+<br>
+    • ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
+    <br>
+Los datos que queremos abordar en el proyecto son:
+<br>
+*un nombre de usuario y contraseña.
+<br>
+*opciones de filtro por nombre o número de pokémon para su localización.
+<br>
+*opciones de filtro por tipo y /o debilidades.
+<br>
+*datos generales de cada pokémon (pokédex)
+<br>
+*ordenar ascendentemente y descendientemente por número o letra.
+<br>
+*Al pulsar, información del pokémon seleccionado (descripción y características) e imágenes del personaje.
+<br>
+*Enumeración de las evoluciones anteriores y posteriores.
+<br>
+    • ¿Cuándo utilizan o utilizarían el producto?
+    <br>
+Los potenciales usuarios utilizarían la página cuando estén interesados en conocer a los personajes del juego (ya sea en el modo de principiante/medio/ avanzado) crear estrategias (principiante/medio/avanzado), etc.
+
+## Prototipo
+
+
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/paginados.jpg)
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/pagina.jpg)
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/paginatres.jpg)
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/pokedex.jpg)
+<br>
+
+* Testeando con usuarios decidimos llevar a cabo las siguientes acciones:
+<br>
+- Destacados se convertirá en filtro
+<br>
+- Utilizaremos "modal" para el despliegue de información
+<br>
+- Login falso
+<br>
+
+
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/entrada.png)
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/pokedex1.png)
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/pokedex2.png)
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/pokedex3.png)
+![alt text](https://raw.githubusercontent.com/GrisLab/CDMX009-Data-Lovers/master/imagenes/pokedex4.png)
+
+Aprendizaje Natalia 
 
 ### UX
 
-- [ ] Diseñar la aplicación pensando y entendiendo al usuario.
-- [ ] Crear prototipos para obtener _feedback_ e iterar.
-- [ ] Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
-- [ ] Planear y ejecutar _tests_ de usabilidad.
+- [✓] Diseñar la aplicación pensando y entendiendo al usuario.
+- [✓] Crear prototipos para obtener _feedback_ e iterar.
+- [✓] Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
+- [✓] Planear y ejecutar _tests_ de usabilidad.
 
 ### HTML y CSS
 
-- [ ] Entender y reconocer por qué es importante el HTML semántico.
-- [ ] Identificar y entender tipos de selectores en CSS.
-- [ ] Entender como funciona `flexbox` en CSS.
-- [ ] Construir tu aplicación respetando el diseño planeado (maquetación).
+- [✓]  Entender y reconocer por qué es importante el HTML semántico.
+- [✓]  Identificar y entender tipos de selectores en CSS.
+- [✓]  Entender como funciona `flexbox` en CSS.
+- [✓]  Construir tu aplicación respetando el diseño planeado (maquetación).
 
 ### DOM
 
-- [ ] Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
-- [ ] Manejar eventos del DOM. (addEventListener)
-- [ ] Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)
+- [✓]  Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
+- [✓]  Manejar eventos del DOM. (addEventListener)
+- [✓]  Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)
 
 ### Javascript
 
-- [ ] Manipular arrays (`filter` | `map` | `sort` | `reduce`).
+- [✓] Manipular arrays (`filter` | `map` | `sort` | `reduce`).
 - [ ] Manipular objects (key | value).
-- [ ] Entender el uso de condicionales (`if-else` | `switch`).
-- [ ] Entender el uso de bucles (`for` | `forEach`).
-- [ ] Entender la diferencia entre expression y statements.
-- [ ] Utilizar funciones (parámetros | argumentos | valor de retorno).
+- [✓] Entender el uso de condicionales (`if-else` | `switch`).
+- [✓] Entender el uso de bucles (`for` | `forEach`).
+- [✓] Entender la diferencia entre expression y statements.
+- [✓] Utilizar funciones (parámetros | argumentos | valor de retorno).
 - [ ] Entender la diferencia entre tipos de datos atómicos y estructurados.
-- [ ] Utilizar ES Modules (`import` | `export`).
+- [✓] Utilizar ES Modules (`import` | `export`).
 
 ### Pruebas Unitarias (_testing_)
 - [ ] Testear funciones (funciones puras).
 
 ### Git y GitHub
-- [ ] Ejecutar comandos de git (`add` | `commit` | `pull` | `status` | `push`).
-- [ ] Utilizar los repositorios de GitHub (`clone` | `fork` | gh-pages).
-- [ ] Colaborar en Github (pull requests).
+- [✓] Ejecutar comandos de git (`add` | `commit` | `pull` | `status` | `push`).
+- [✓] Utilizar los repositorios de GitHub (`clone` | `fork` | gh-pages).
+- [✓] Colaborar en Github (pull requests).
 
 ### Buenas prácticas de desarrollo
-- [ ] Organizar y dividir el código en módulos (Modularización).
-- [ ] Utilizar identificadores descriptivos (Nomenclatura | Semántica).
-- [ ] Utilizar linter para seguir buenas prácticas (ESLINT).
+- [✓] Organizar y dividir el código en módulos (Modularización).
+- [✓] Utilizar identificadores descriptivos (Nomenclatura | Semántica).
+- [✓] Utilizar linter para seguir buenas prácticas (ESLINT).
+
+Aprendizaje Gris
+
+
+### UX
+
+- [✓] Diseñar la aplicación pensando y entendiendo al usuario.
+- [✓] Crear prototipos para obtener _feedback_ e iterar.
+- [✓] Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
+- [✓] Planear y ejecutar _tests_ de usabilidad.
+
+### HTML y CSS
+
+- [✓]  Entender y reconocer por qué es importante el HTML semántico.
+- [✓]  Identificar y entender tipos de selectores en CSS.
+- [✓]  Entender como funciona `flexbox` en CSS.
+- [✓]  Construir tu aplicación respetando el diseño planeado (maquetación).
+
+### DOM
+
+- [✓]  Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
+- [✓]  Manejar eventos del DOM. (addEventListener)
+- [✓]  Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value)
+
+### Javascript
+
+- [✓] Manipular arrays (`filter` | `map` | `sort` | `reduce`).
+- [ ] Manipular objects (key | value).
+- [✓] Entender el uso de condicionales (`if-else` | `switch`).
+- [✓] Entender el uso de bucles (`for` | `forEach`).
+- [✓] Entender la diferencia entre expression y statements.
+- [✓] Utilizar funciones (parámetros | argumentos | valor de retorno).
+- [ ] Entender la diferencia entre tipos de datos atómicos y estructurados.
+- [✓] Utilizar ES Modules (`import` | `export`).
+
+### Pruebas Unitarias (_testing_)
+- [ ] Testear funciones (funciones puras).
+
+### Git y GitHub
+- [✓] Ejecutar comandos de git (`add` | `commit` | `pull` | `status` | `push`).
+- [✓] Utilizar los repositorios de GitHub (`clone` | `fork` | gh-pages).
+- [✓] Colaborar en Github (pull requests).
+
+### Buenas prácticas de desarrollo
+- [✓] Organizar y dividir el código en módulos (Modularización).
+- [✓] Utilizar identificadores descriptivos (Nomenclatura | Semántica).
+- [✓] Utilizar linter para seguir buenas prácticas (ESLINT).
+
+
 
 ## 4. Consideraciones generales
 
@@ -249,7 +286,7 @@ como toda la configuración de dependencias:
 
 ```text
 .
-├── pokemon
+├── 
 |  ├── README.md
 ├── potter
 |  ├── README.md
@@ -260,9 +297,9 @@ como toda la configuración de dependencias:
 |  |  ├── lol
 |  |  |  ├── lol.js
 |  |  |  └── lol.json
-|  |  ├── pokemon
-|  |  |  ├── pokemon.js
-|  |  |  └── pokemon.json
+|  |  ├── 
+|  |  |  ├── .js
+|  |  |  └── .json
 |  |  ├── potter
 |  |  |  ├── potter.js
 |  |  |  └── potter.json

diff --git a/imagenes/entrada.png b/imagenes/entrada.png
diff --git a/imagenes/logo-pokemon-79x45.png b/imagenes/logo-pokemon-79x45.png
diff --git a/imagenes/lupa.png b/imagenes/lupa.png
diff --git a/imagenes/pagina.jpg b/imagenes/pagina.jpg
diff --git a/imagenes/paginados.jpg b/imagenes/paginados.jpg
diff --git a/imagenes/paginatres.jpg b/imagenes/paginatres.jpg
diff --git a/imagenes/pokedex.jpg b/imagenes/pokedex.jpg
diff --git a/imagenes/pokedex1.png b/imagenes/pokedex1.png
diff --git a/imagenes/pokedex2.png b/imagenes/pokedex2.png
diff --git a/imagenes/pokedex3.png b/imagenes/pokedex3.png
diff --git a/imagenes/pokedex4.png b/imagenes/pokedex4.png
diff --git a/imagenes/pokemonGo.png b/imagenes/pokemonGo.png
diff --git a/imagenes/pokemonGo2.png b/imagenes/pokemonGo2.png
diff --git a/imagenes/pokemonGoLogo.png.jpeg b/imagenes/pokemonGoLogo.png.jpeg