diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml
new file mode 100644
index 00000000..a7c495e9
--- /dev/null
+++ b/.github/workflows/jekyll-gh-pages.yml
@@ -0,0 +1,51 @@
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Deploy Jekyll with GitHub Pages dependencies preinstalled
+
+on:
+ # Runs on pushes targeting the default branch
+ push:
+ branches: ["main"]
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
+jobs:
+ # Build job
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+ - name: Setup Pages
+ uses: actions/configure-pages@v3
+ - name: Build with Jekyll
+ uses: actions/jekyll-build-pages@v1
+ with:
+ source: ./src
+ destination: ./_site
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v2
+
+ # Deployment job
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ needs: build
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v2
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6b665aaa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
index 0e78340d..e6f1e0a0 100644
--- a/README.md
+++ b/README.md
@@ -1,625 +1,294 @@
-# Data Lovers
+# DATA LOVERS 💚💻 - página Web del Juego Legue of the Legends 🎮
+
+Link del Proyecto: [Ir a la Página Web](https://andreasoncco.github.io/DEV009-data-lovers/)
## Índice
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del proyecto](#2-resumen-del-proyecto)
-* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje)
-* [4. Consideraciones generales](#4-consideraciones-generales)
-* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto)
-* [6. Hacker edition](#6-hacker-edition)
-* [7. Consideraciones técnicas](#7-consideraciones-técnicas)
-* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias)
-* [9. Checklist para solicitar PF](#9-checklist-para-solicitar-pf)
+* [1. Definición del Proyecto](#1-definición-del-proyecto)
+* [2. Proceso de Diseño y Desarrollo](#2-proceso-de-diseño-y-desarrollo)
+* [3. Investigación UX](#3-investigación-ux)
+* [4. Diseño UI](#4-diseño-ui)
+* [5. Herramientas de Elaboración](#5-herramientas-de-elaboración)
***
-## 1. Preámbulo
+## 1. DEFINICIÓN DEL PROYECTO
+
+Nuestra página web es sobre el popular juego en línea Legue of Legends, destinado a los nuevos jugadores o personas interesadas en obtener información resumida del juego para formar sus equipos y conocer que personajes les conviene elegir según el perfil de cada quien. En el sitio web podrás encontrarte con tres segmentos principales: la página Home, la página Tips para Jugar y la página Estadísticas. Asimismo, el sitio web es Responsive Design ya que se ajusta a distintos tamaños puendo acceder desde mobile, tablet o desktop.
+
+A continuación se muestra la imagen final del sitio:
+
+**Bienvenida** 👩💻
+
+
+
+**Página Home**
+
+
+
+**Página Tips para Jugar**
+
+
+
+**Página Estadísticas**
+
+
+
+## 2. PROCESO DE DISEÑO Y DESARROLLO
+
+Para realizar el proyecto nos organizamos utizando las herramientas de Trello para planificar nuestro tiempo y dividir las actividades en tareas más pequeñas haciendo uso de la metodología SCRUM de trabajo ágil. Cabe mencionar que también se uso Figma para hacer el diseño y los prototipos dinámicos que pasaran a detallarse más adelante en la seción de Diseño UI.
+
+El desarrollo total de la página tomo cinco sprints y al cabo de cada uno fuimos tomando en cuenta el feedback recibido para hacer mejoras, a continuación pasaré a detallar cada Sprint teniendo en consideración las herramientas usadas
+
+### 2.1. Primer Sprint 📋⌚️
-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.
+Empezamos eligiendo como temática el popular juego en línea Legue of Legends y buscamos mayor información sobre este, también realizamos la investigación de usuario, en la que nos encontramos que nuestros usuarios deberian ser los nuevos jugadores o personas interesadas que no conozcan el juego ya que nuestra página es informativa y la mayor parte de personas que jugaban el juego ya sabian bastante de la data con la que trabajamos y no les interesaba visitar la página. De esta forma, nos dimos cuenta que las personas interesadas en la página eran aquellas que no conocian el juego y tenian curiosidad por conocer las estrategias, tips para jugar y alguna descripción detallada de cada campeón para poder escoger con que personaje iniciar según sus preferencias individuales.
-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 y procesar estos datos. Una manera simple de
-hacerlo es creando _interfaces_ y _visualizaciones_.
+Teniendo en consideración la investigación realizada hicimos el prototipo de baja fidelidad en una hoja a modo de borrador y para ultimar detalles lo pasamos a un prototipo de alta fidelidad en Figma. También realizamos las historias de usuario y empezamos a hacer la estructura de la página en el archivo `index.html`.
-En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte
-izquierda se puede construir una interfaz amigable y entendible por las
-usuarias, al lado derecho.
+**Captura del primer sprint en Trello**
-
+
-## 2. Resumen del proyecto
+### 2.2. Segundo Sprint
-En este proyecto **construirás una _página web_ para visualizar un
-_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario
-necesita.
+Durante el Segundo Sprint terminamos de hacer la Bienvenida, agregandole un botón para dirigirnos a la página principal, donde se encuentran la lista de imagenes y nombres de cada campeón del juego. En esta sección aplicamos el addeventlistener para el evento de "click" y el manejo del DOM para presentar la data en el `index.html`. Aprendimos sobre el uso de for y forEach para iterar elementos dentro de un arreglo. Finalmente añadimos una barra de navegación fija a la página principal para dirigirnos a dos secciones más además del Home.
-Como entregable final tendrás una página web que permita **visualizar la data,
-filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado
-nos referimos a distintos cálculos que puedes hacer con la data para mostrar
-información aún más relevante para los usuarios (promedio, el valor máximo
-o mínimo, etc).
+**Captura del segundo sprint en Trello**
-Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que
-explores y decidas con qué temática te interesa trabajar. Hemos elegido
-específicamente estos sets de datos porque creemos que se adecúan bien a esta
-etapa de tu aprendizaje.
+
-Una vez que definas tu área de interés, buscar entender quién es tu usuario
-y qué necesita saber o ver exactamente; luego podrás construir la interfaz que
-le ayude a interactuar y entender mejor esos datos.
+### 2.3. Tercer Sprint
-Estos son datos que te proponemos:
+Luego del Sprint Review nos dimos cuenta que debiamos hacer el Responsive Design con el método Mobile First ya que es el mejor y más facil, por lo que comenzamos volviendo a estructurar nuestro código para adaptarlo a tamaño Mobile y luego aplicar media queries para Desktop y tablet. Por otra parte, para tener un mejor flujo de trabajo colaborativo tomamos una Office Hour donde nos intruyeron sobre Github y como subir y bajar los cambios del repositorio local al remoto. Finalmente para filtrar los campeones por su rol agregamos una segunda barra de navegación y aplicamos la función filter sobre la data `lol.js`.
-* [Pokémon](src/data/pokemon/pokemon.json):
- En este set encontrarás una lista con los 251 Pokémon de la región de Kanto
- y Johto, junto con sus respectivas estadísticas usadas en el juego
- [Pokémon GO](http://pokemongolive.com).
- - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md)
+**Captura del tercer sprint en Trello**
-* [League of Legends - Challenger leaderboard](src/data/lol/lol.json):
- Este set de datos muestra la lista de campeones en una liga del
- juego League of Legends (LoL).
- - [Investigación con jugadores de LoL](src/data/lol/README.md)
+
-* [Rick and Morty](src/data/rickandmorty/rickandmorty.json).
- Este set nos proporciona la lista de los personajes de la serie Rick and
- Morty. [API Rick and Morty](https://rickandmortyapi.com).
- - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md)
+### 2.4. Cuarto Sprint
-* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json).
- Este set nos proporciona la lista de los atletas que ganaron medallas en las
- olímpiadas de Río de Janeiro.
- - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md)
+Este fue el Sprint de mayor avance puesto que ya contabamos con ideas más claras sobre nuestro proyecto, empezamos agregando el botón para ordenar a los campeones según su nombre de forma descendente y ascendente, luego aprendimos y aplicamos la función sort. Posteriormente ordenamos el codigo de JavaScript en dos archivos `main.js` y `data.js`, e investigamos sobre los test de prueba unitario para aplicarlo sobre nuestras funciones haciendo que corrieran correctamente. También agregamos las otras dos páginas de Tips para Jugar y Estadisticas dandole funcionalidad al botón de la primera barra de navegación fija.
-* [Studio Ghibli](src/data/ghibli/ghibli.json).
- En este set encontrarás una lista de las animaciones y sus personajes del
- [Studio Ghibli](https://ghiblicollection.com/).
- - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md)
+**Captura del cuarto sprint en Trello**
-El objetivo principal de este proyecto es que aprendas a diseñar y construir una
-interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el
-usuario necesita.
+
-## 3. Objetivos de aprendizaje
+### 2.5. Quinto Sprint
-Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
+Comenzamos investigando sobre que función aplicar para hacer el calculo agregado de los campeones por rol, logramos ejecutar el calculo creando un objeto vacio rol, iterando roles y aplicando el condicional if para que de existir ese rol se sume uno e ir acumulando la cantidad de campeones en cada rol. Luego exploramos la librería de gráficas Chart.js para mostrar la información de cantidad según rol en un pie o tarta de colores para identificarlo mejor y hacerlo llamativo visualmente. Asimismo, actualizamos el figma e hicimos el Readme, terminando el proyecto.
-### HTML
+**Captura del quinto sprint en Trello**
-- [ ] **Uso de HTML semántico**
+
- Links
+### 3.1. ¿Quiénes son los principales usuarios del producto? 🔎📚
-### CSS
+Los usuarios son los nuevos jugadores de Legue of Legends o las personas interesadas en el juego, que quieren conocer información resumida y simple sobre los campeones y roles para iniciarse en este popular juego de estrategia. Según la edad, nuestros usurios suelen ser jóvenes de un rango muy amplio de edades.
-- [ ] **Uso de selectores de CSS**
+### 3.2. ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
- Links
+Los objetivos de estos usuarios en relación con nuestra página de información de campeones de League of Legends pueden incluir :
- * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css)
- * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)
-
+- Conocer los nombres de cada campeón y ver su imagen para identificarlos
-- [ ] **Modelo de caja (box model): borde, margen, padding**
+- Descubir cuantos campeones existen por cada rol como luchador, mago, asesino, tanque, apoyo y tirador.
- Links
+- Aprender tips para comenzar a jugar Legue of Legends
- * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display)
- * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)
- * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)
-
+### 3.3. ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
-- [ ] **Uso de flexbox en CSS**
+Se espera visualizar los roles que hay, que rol tiene cada campeón y una pequeña descripción sobre cada campeón para poder tener mayor información de los campeones que quieran usar, también saber en qué momento se puede usar cada campeón y como debemos equiparlos referente a su rol que cumplen.
- Links
+### 3.4. ¿Cuándo utilizarán o utilizarían el producto?
- * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- * [Flexbox Froggy](https://flexboxfroggy.com/#es)
- * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
-
+Principalmente antes de jugar, ya que los aprendices o principiantes pueden utilizar la página para investigar y aprender sobre los nuevos campeones que desean probar antes de jugar con ellos y también pueden usarlo durante el juego para poder mejorar o para que conozcan más de otros personajes con los que no hayan jugado.
-### Web APIs
-- [ ] **Uso de selectores del DOM**
+## 4. DISEÑO UI
- Links
+### 4.1. Prototipo de Baja Fidelidad 📐🖌
- * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection)
- * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
-
+Se hizo un bosquejo con papel y lápiz para crear un diseño inicial de la página
-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)**
+**Foto del Prototipo Inicial de Home, Tips para jugar y Estadísticas**
- Links
+
+
+
- * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events)
- * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener)
- * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener)
- * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)
-
+### 4.2. Prototipo de Alta Fidelidad
-- [ ] **Manipulación dinámica del DOM**
+[Ir al prototipo interactivo de Figma para Mobile](https://www.figma.com/proto/krEDURnZWSOr9hH0AOPQNG/Mobile-Lol?type=design&node-id=13-3&t=ayBDE23OER2F0p6a-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=13%3A3&mode=design)
- Links
+[Ir al prototipo interactivo de Figma para Desktop](https://www.figma.com/proto/5GiMiEuEMvMHcaMsmkMQPp/Untitled?type=design&node-id=2-4779&t=zK7MGerkX7QCFkzZ-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=15%3A1000&mode=design)
- * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild)
- * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement)
- * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode)
- * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML)
- * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)
-
+**Prototipo para tamaño Mobile**
-### JavaScript
+
+
+
+
-- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos**
+### 4.3. Testeo de Usabilidad 💡
-- [ ] **Arrays (arreglos)**
+Según el testeo nos dimos cuenta que:
- Links
+- Debiamos incluir una Bienvenida
+- Necesitabamos incorporar una barra fija donde se encuentre Home, Tips para Jugar y Estadísticas.
+- Debiamos agregar un botón desplegable para ordenar los campeones en forma descendente y ascendente.
+- Necesitabamos incluir un buscador según nombre de los campeones
+- En la sección Tips para jugar, en lugar de imagenes podiamos agregar algunos gifs para que sea más representativo y llamativo.
+- En la sección Estadísticas en el gráfico de pie era necesario distinguir los roles de campeón por color para hacerlo más entendible
- * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays)
- * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/)
- * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
- * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
-
+### 4.4. Historias de Usuario 🎲
-- [ ] **Objetos (key, value)**
+**Historia Uno ♞**
- Links
+- Como: nuevo jugador de LoL que visitara la página
- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)
-
+- Quiero: ver el nombre y la imagen de cada campeón
-- [ ] **Variables (declaración, asignación, ámbito)**
+- Para: conocer cada campeón
- Links
+ **Criterios de Aceptación**
- * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types)
- * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)
-
+ - Hacer una página principal de Bienvenida para el usuario
-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
+ - Mostrar una lista de todos los campeones disponibles con su imagen y su nombre.
- Links
+ **Definición de Terminado**
- * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops)
- * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
-
+ - Crear dos `` para la página de Bienvenida y la página Home donde están los campeones
-- [ ] **Uso de bucles/ciclos (while, for, for..of)**
+ - Dentro del primer `` crear un `` donde este la Bienvenida
- Links
+ - Importar la data al `main.js`
- * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops)
- * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
-
+ - Presentar la data en el `index.html`
-- [ ] **Funciones (params, args, return)**
+**Historia Dos 📲**
- Links
+- Como: jugador de lol
- * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions)
- * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic)
- * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow)
- * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)
-
+- Quiero: poder filtrar y buscar campeones según su rol
-- [ ] **Pruebas unitarias (unit tests)**
+- Para: poder seleccionar rápidamente los campeones que se ajustan a la composición de mi equipo y al estilo de juego deseado.
- Links
+ **Criterios de Aceptacion**
- * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
-
+ - Hacer una barra de navegación, donde se muestren los roles disponibles (luchador, tirador, mago, asesino, tanque, apoyo).
-- [ ] **Módulos de ECMAScript (ES Modules)**
+ - Hacer un filtro según el rol
- Links