Data Lovers

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Consideraciones generales
• 5. Criterios de aceptación mínimos del proyecto
• 6. Hacker edition
• 7. Consideraciones técnicas
• 8. Pistas, tips y lecturas complementarias
• 9. Checklist

---

Página web de información de League of Legends

1. Resumen del proyecto

Bienvenido/a a la página web de información de League of Legends (LoL). En este proyecto se construyó una página web con la temática de League of Legend(LOL) y tiene como objetivo proporcionar información sobre el juego y los jugadores de LoL de manera fácil y accesible. Aquí los usuarios podrán encontrar informarción básica del juego y, sobre todo, conocer a los campeones (personajes) del juego, por lo que podrán filtrar de acuerdo al tipo de campeón, si es 'asesino', 'luchador', entre otros.

El proyecto se ha desarrollado utilizando HTML, CSS y Javascript basada en data de formato Json.

• League of Legends - Challenger leaderboard: Este set de datos muestra la lista de campeones en una liga del juego League of Legends (LoL).
  • Investigación con jugadores de LoL

Características

• Información del juego: Encuentra datos relevantes sobre el juego League of Legends, incluyendo descripción, mecánicas, modos de juego, campeones y más.

• Perfil de jugadores: Explora perfiles de jugadores destacados de League of Legends. Obtén información sobre su clasificación, campeones preferidos, estadísticas y logros.

Tecnologías utilizadas

• HTML5: Lenguaje de marcado para estructurar el contenido de la página web.
• CSS3: Hojas de estilo para el diseño y la apariencia visual.
• JavaScript: Programación del lado del cliente para la interactividad y la manipulación de datos.

2.Diseño visual del proyecto

Historias de usuario

¿Quiénes son los principales usuarios de la web? Personas que recién están iniciando a jugar LOL. ¿Cuál es el objetivo de la web que cubre la necesidad de los usuarios de LOL? Que los usuarios (quienes recién están empezando a jugar LOL y aquellos que todavía no saben mucho del juego) encuentren un espacio con información básica del juego y de los campeones. ¿Cuál es la información relevante que mostrará la web? Información sobre los campeones de LOL, que tiene data de

• Usuario 1: El usuario quiere ver una web donde pueda encontrar información básica de LOL y de los campeones.
• Usuario 2: El usuario quiere (filtrar) ver la información de los campeones de acuerdo a su rol (asesino, mago, tanque, etc...).
• Usuario 3: El usuario quiere filtrar a los campeones de forma ascendente y descendente.
• Usuario 4: El usuario quiere ver la web en su dispositivo movil.

Diseño de la Interfaz de Usuario

Prototipo de alta fidelidad

Versión para teléfonos

Testeos de usabilidad

Para este diseño realizamos un formulario que compartimos con amistades para saber las opiniones que tenían sobre el diseño que estábamos implementando en la web.

Resultado final

2. Objetivos de aprendizaje

El objetivo principal de este proyecto es aprender a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.

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.

HTML

• [✔] Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• [✔] Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• [✔] Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• [✔] Uso de flexbox en CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

Web APIs

• [✔] Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• [✔] Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• [✔] Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Element.innerHTML - MDN

JavaScript

• [✔] Diferenciar entre tipos de datos primitivos y no primitivos

• [✔] Arrays (arreglos)

  Links

  • Arreglos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.filter() - MDN

• [✔] Objetos (key, value)

  Links

  • Objetos en JavaScript

• [✔] Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• [✔] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• [✔] Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• [✔] Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• [✔] Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• [✔] Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• [✔] Uso de linter (ESLINT)

• [✔] Uso de identificadores descriptivos (Nomenclatura y Semántica)

• [✔] Diferenciar entre expresiones (expressions) y sentencias (statements)

Control de Versiones (Git y GitHub)

• [✔] Git: Instalación y configuración

• [✔] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• [✔] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

• [✔] GitHub: Creación de cuenta y repos, configuración de llaves SSH

• [✔] GitHub: Despliegue con GitHub Pages

  Links

  • Sitio oficial de GitHub Pages

• [✔] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

Centrado en el usuario

• [✔] Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• [✔] Crear prototipos de alta fidelidad que incluyan interacciones

• [✔] Seguir los principios básicos de diseño visual

Investigación

• [✔] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

  Links

  • Intro a testeos usabilidad
  • Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?

Contenido de referencia

Desarrollo Front-end

• Unidad de testing en curso de JavaScript en LMS.
• Unidad de arreglos en curso de JavaScript en LMS.
• Unidad de objetos en curso de JavaScript en LMS.
• Unidad de funciones en curso de JavaScript en LMS.
• Unidad de DOM en curso de Browser JavaScript en LMS.
• Array en MDN
• Array.sort en MDN
• Array.map en MDN
• Array.filter en MDN
• Array.reduce en MDN
• Array.forEach en MDN
• Object.keys en MDN
• Object.entries en MDN
• Fetch API en MDN
• json.org
• expressions-vs-statements
• expresión vs sentencia
• datos atómicos vs datos estructurados
• Modulos: Export
• Modulos: Import

Herramientas

• Git
• GitHub
• GitHub Pages
• Node.js
• Jest

Organización del Trabajo

• Historias de Usuario.
• Cómo dividir H.U.
• Guía para Data Lovers

3. Checklist

• [✔] Usa VanillaJS.
• [✔] Pasa linter (npm run pretest)
• [✔] Pasa tests (npm test)
• [✔] Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
• [✔] Incluye Definición del producto clara e informativa en README.md.
• [✔] Incluye historias de usuario en README.md.
• Incluye sketch de la solución (prototipo de baja fidelidad) en README.md.
• [✔] Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en README.md.
• Incluye link a Zeplin en README.md.
• [✔] Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README.md.
• [✔] UI: Muestra lista y/o tabla con datos y/o indicadores.
• [✔] UI: Permite ordenar data por uno o más campos (asc y desc).
• [✔] UI: Permite filtrar data en base a una condición.
• [✔] UI: Es responsive.