Rama dany

DATAREADME.md

@@ -0,0 +1,68 @@
+# DATA LOVERS LEAGUE OF LEGENDS
+
+## Órden de temas
+
+- [Investigación inicial](#descubriendo-el-mundo-lol)
+- [Definiendo al usuario](#definiendo-al-usuario)
+- [Estableciendo el objetivo](#estableciendo-el-objetivo)
+- [Cuestionario](#planteando-las-preguntas)
+- [Lanzando el cuestionario](#lanzando-el-cuestionario)
+- [Obteniendo respuestas](#obteniendo-respuestas)
+- [Creando el prototipo](#creando-el-prototipo)
+- [Probando el prototipo](#probando-con-test-de-usabilidad)
+- [Estableciendo prototipo final](#prototipo-de-alta-fidelidad)
+
+=============================================
+
+## Descubriendo el mundo lol
+
+Al inicio de esta investigación, el equipo de trabajo desconocía de qué trata (_League of Legends_), así como su impacto e importancia en el mundo y las tendencias actuales. 
+Nos dimos a la tarea de buscar información que nos explicara a mayor detalle en qué consiste este título, por lo cual, dejamos dos links de las fuentes consultadas que nos parecieron más interesantes, las cuales nos ayudaron a comprender cuáles fueron los inicios de este juego, así como la filosofía de sus creadores para llevarlo, hasta las dimensiones en las que hoy se encuentra.
+[Qué es League of Legends](https://www.youtube.com/watch?v=KpxjwIaW0EM)
+[¿Por qué League of Legends se ha vuelto tan famoso?](https://www.youtube.com/watch?v=jmGrroicfdM)
+
+Sin duda, es sorprendente saber cómo la visión de 2 jóvenes, nos da muestra de que poner el foco en la Experiencia de Usuario, es clave para el éxito de un producto. 
+
+----------------------------------------------------
+## Definiendo al usuario
+
+Si bien, el mundo de los gamers está liderado por jóvenes, existen muchos fans de (_League of Legends_) y otros juegos, que no lo practican de forma profesional y quienes también están interesados en información general de los "campeones", como les llaman.
+El usuario de la página que crearemos, no se limita a jugadores profesionales, sino a todo aquel que sienta cierto grado de afición y pasión hacia (_League of Legends_); sin embargo, con base en diversas [lecturas](https://esports.xataka.com/predatoresports/esta-un-joven-de-24-anos-viejo-para-los-esports-a-que-edad-te-retiran-de-la-elite), determinamos que en su mayoría se trata de varones entre los 16 y 44 años de edad, sin importar el país donde se encuentren, ya que en la actualidad existen diversos foros y grupos en redes sociales, que permiten la recepción y envío de información acerca de cualquier tema.
+
+## Estableciendo el objetivo
+
+El objetivo principal de la página está basado en presentar, con base en los requerimientos del usuario, a los (_CAMPEONES_) que ellos consideran los más importantes, así como la información detallada de cada uno de ellos, que consideren más relevante.
+También queremos obtener información acerca de los parámetros a los que les dan más importancia, para saber el orden en el cual debemos presentar a toda la gama de (_CAMPEONES_).
+
+## Planteando las preguntas
+
+Para este proceso planteamos 5 preguntas, 2 de las cuales fueron abiertas, pero que nos arrojaran respuestas incluidas en la (_data_), enfocadas a saber los (_CAMPEONES_) favoritos de los usuarios y las característica detalladas que les gustan de ellos. 
+Las 3 preguntas siguientes, fueron enfocadas a saber la preferencia de los usuarios por las habilidades de los (_CAMPEONES_); así como el orden que más les agrada para ver a todos los personajes dentro de la página.
+La encuesta fue lanzada a través de (_Google Forms_), a través del siguiente [link](https://docs.google.com/forms/d/1dqC0hiNJxchr4kkdNz55PyTgy433cmriPvs0vYNncwI/edit#responses)
+
+## Lanzando el cuestionario
+
+Nos dimos a la tarea de investigar diversos lugares virtuales, a través de los cuales hay interacción de los fans de (_League of Legends_), dentro de los cuales encontramos, [foros en la web](https://boards.las.leagueoflegends.com/es/), [grupos de Facebook](https://web.facebook.com/groups/504633653337738/?multi_permalinks=665713990563036&notif_id=1561652036224897&notif_t=feedback_reaction_generic), [grupos de WhatsApp](http://mx.gruposdewhatsapp.com/league-of-legends_gr_231986). Estos fueron los medios a través de los cuales obtuvimos respuesta a nuestro cuestionario. 
+
+## Obteniendo respuestas
+Una vez que obtuvimos las respuestas, las vaciamos en una [hoja de cálculo](https://docs.google.com/spreadsheets/d/1kRUAxB8K72SgsEe1dhc8HJaznY5x7wkA8P6vc4u_ut0/edit?usp=sharing) y algunas fueron graficadas para poder comprenderlas de mejor forma. 
+
+### Pregunta 1
+![pregunta 1](./imagenes/pregunta1.jpg)
+### Pregunta 2
+![pregunta 2](./imagenes/pregunta2.jpg)
+### Pregunta 3
+![pregunta 3](./imagenes/pregunta3.jpg)
+### Pregunta 4
+![pregunta 4](./imagenes/pregunta4.jpg)
+### Pregunta 5
+![pregunta 5](./imagenes/pregunta5.jpg)
+
+## Creando el prototipo
+
+Con base en las respuestas enviadas a través de los jugadores que encontramos en los diversos tipos de grupos y foros, realizamos un prototipo que presentará:
+- Página principal con el menú para que elijan qué información quieren ver, así como un link para que pueda ingresar al juego ![página principal](./imagenes/principal.jpg)
+- Página secundaria con los mejores campeones, elegidos por ellos y algunas características detalladas que también determinaron ellos.![página favoritos](./imagenes/favoritos.jpg)
+- Página secundaria con los campeones por orden alfabetico ![alfabetico](./imagenes/alfabetico.jpg)
+- Página secundaria con los campeones por tipo de rol ![roles](./imagenes/roles.jpg)
+

src/data.js

@@ -1,8 +1,22 @@
 // esta es una función de ejemplo
 // puedes ver como agregamos la función a nuestro objeto global window
+// El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos. La idea de este archivo es contener toda la funcionalidad que corresponda a obtener, procesar y manipular datos.
+// En este archivo esperamos que implementes las funciones detalladas en la sección de Pruebas Unitarias.
 
-const example = () => {
-  return 'example';
-};
+//console.log(Object.values(LOL));
 
-window.example = example;
+//const example = () => {
+  //return 'example';
+//};
+//
+//window.example = example;
+
+//ESTA FUNCION CREA OTRA MATRIZ CON LOS VALORES DE CADA ELEMENTO DENTRO DEL ARREGLO
+//var materials = [
+  //'Hydrogen',
+  //'Helium',
+  //'Lithium',
+  //'Beryllium'
+//];
+//console.log(materials.map(material =>material.length));
+//APARECE DE ESTA FORMA (4) [8, 6, 7, 9]

src/data/lol/lol.js

@@ -6970,4 +6970,5 @@ var LOL = {
       }
     }
   }
-};
+}  
+

src/index.html

@@ -2,17 +2,72 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="imagenes/favicon.ico" rel="icon" type="image/x-icon" />
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body>
-    <div id="root"></div>
-    <!-- <script src="./data/injuries/injuries.js"></script> -->
-    <!-- <script src="./data/pokemon/pokemon.js"></script> -->
-    <!-- <script src="./data/steam/steam.js"></script> -->
-    <!-- <script src="./data/worldbank/worldbank.js"></script> -->
-    <!-- <script src="./data/lol/lol.js"></script> -->
+  <body  class="fondo">
+
+    <div class="pleca-sup">
+
+      <img id="logo-lol"  src="imagenes/logo-lol.png" alt="lol">
+
+    </div>
+    <!--- menu lado izquierdo --->
+    <div id="options" class="father">
+      <select name="roles" id="roles" class="sun">
+        <option value="">ROLES</option> 
+        <option value="Mage">Mage</option> 
+        <option value="Assassin">Assassin</option>
+        <option value="Tank">Tank</option>
+        <option value="Support">Support</option> 
+        <option value="Marksman">Marksman</option>
+        <option value="Fighter">Fighter</option>
+      </select>
+      <select name="az-za" id="az-za" class="sun" >
+          <option value="">AZ-ZA</option> 
+          <option value="AZ">AZ</option> 
+          <option value="ZA">ZA</option>
+      </select>
+      </div>
+      <!---pantalla ir a jugar--->
+      <div class="jugar-lol" style="height: 300px">
+      <a title="League of legends" href="https://signup.lan.leagueoflegends.com/es/signup/index#/">  <img  src="imagenes/juego.jpg" alt="play-lol" width="480px" height="300px">  </a>
+      </div> 
+      <!--- campeones favoritos --->
+      <div class="favoritos"> 
+        <table>
+          <th colspan="2"><p class="text">Campeones </br>Favoritos</p></th>
+          <tr>
+            <td><p class="text">1</td>
+            <td><img src="imagenes/Jax.jpg" width="50%"> </td>
+          </tr>
+          <tr>
+            <td><p class="text">2</td>
+            <td><img src="imagenes/Ahri.png
+            "  width="50%"/></td>
+          </tr>
+          <tr>
+            <td><p class="text">3</td>
+            <td><img src="imagenes/Yasuo.png
+            "  width="50%"/></td>
+          </tr>
+        </table>
+      </div>
+
+    </div>
+  <div id="root" class="" ></div>
+
+    <div class="pie">
+
+      Riot games
+
+
+    </div>
+    <script src="./data/lol/lol.js"></script>
     <script src="data.js"></script>
     <script src="main.js"></script>
   </body>
 </html>
+

src/main.js

@@ -0,0 +1,33 @@
+const data = LOL.data
+  //usar paratodo tu código que tenga que ver con mostrar los datos en la pantalla. Con esto nos referimos básicamente a la interacción con el DOM. Operaciones como creación de nodos, registro de manejadores de eventos (event listeners o event handlers), ....
+const root = document.getElementById('root');
+const mostrarCampeones=document.getElementById("campeones");
+mostrarCampeones.addEventListener("click",()=> {
+  filterData(data)
+})
+const filterData = (data) => {
+  const arr = Object.values(LOL.data);
+  const newData = arr.filter( champ => champ.tags[0] == 'Support' )
+  console.log(newData)
+  printData(newData)
+}
+const printData= (data) => {
+  let string = ''
+for (const key in data) {
+    if (data.hasOwnProperty(key)) {
+      const element = data[key];
+        const name = element.name
+        const rol = element.tags[0]
+        const attack = element.info.attack
+        const img  = element.img
+        string += ` <div>
+    <h3>${name}</h3>
+    <p>${rol}</p>
+    <p>Ataque : ${attack}</p>
+    <img src="${img}" alt="">
+  </div>`
+    } 
+}
+root.innerHTML = string
+}
+printData(data)

src/roles.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="imagenes/favicon.ico" rel="icon" type="image/x-icon" />
+    <title>Data Lovers2</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body  class="fondo">
+    <div id="root"></div>
+
+    <div class="pleca-sup">
+
+      <img id="logo-lol"  src="imagenes/logo-lol.png" alt="lol">
+
+    </div>
+    <!--- menu roles lado izquierdo --->
+<div class="roles">
+<h2>Tipo de campeones</h2>
+</div>
+    <div class="roles-camp">
+
+
+
+        <button class="btn"> Roles</button>
+        <button class="btn" onclick="" id="campeones">A-Z</button>
+        <button class="btn">Noticias</button>
+
+
+
+
+    </div>
+    <div class="pie">
+
+      Riot games
+
+
+    </div>
+    <script src="./data/lol/lol.js"></script>
+    <script src="data.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>