Data Lol

​

Índice

​

• Data Lol
  • Índice
  • 1. Preámbulo
  • 2. Resumen del desarrollo del proyecto
  • 3. Carpetas que encontrarás en el repositorio
  • SRC
    • DATA
    • Test
    • README
    • Recursos visuales
  • 4. Look final del proyecto vista de ordenador
  • 4. Look final del proyecto vista de móvil
  • 5. Investigación UX
    • Sketch inicial
    • Sketch inicial movil
    • Imagen del prototipo final
    • Imagen del prototipo final mobile
  • 5. Planning del proyecto
  • 6. Objetivos de aprendizaje
    • UX
    • HTML y CSS
    • DOM
    • Javascript
    • Testing
    • Estructura del código y guía de estilo
    • Git y GitHub
    • Buenas prácticas de desarrollo,
    • Historias de usuario
    • Checklist ​

1. Preámbulo

​ Este es el segundo proyecto que desarrollamos en el Bootcamp de [Laboratoria], propusimos una pagina donde mostrara la informacion acerca del juego League of Legends - Challenger leaderboard, el objetivo principal de este proyecto fue visualizar la data filtrarla, ordenarla y se agrego una barra de busqueda donde muestra cada campeon por nombre. ​

2. Resumen del desarrollo del proyecto

​ Tras leer el [README] hicimos un sketch de baja fidelildad en balsamiq y un sketch de alta fidelidad en Figma, dónde se llevó a cabo una sesión de feedback todos los martes en cada sprint donde tuvimos la oportunidad de hacer mejoras prontas al prototipo de alta fidelidad. Luego, forkeamos el proyecto base, lo desarrollamos localmente, desarrollamos la estructura básica en html, luego nos enfocamos en JavaScript mientras generabamos recursos visuales e interactuábamos con CSS y asi mismo nos enfocamos en manipular las funciones para testearlas. ​

3. Carpetas que encontrarás en el repositorio

SRC

DATA

Archivo	Descripción
lol.js	Data del juego
lol.json	Data del juego ver JSON
README.md	Resumen del juego y campeones

Archivo	Descripción
index.html	Página principal
main.js	Interacción con el DOM
data.js	Manipulación de datos a través de arreglos y objetos
style.css	Estlos del proyecto global
​
​

Test

Archivo	Descripción
data.spec.js	Test unitarios de las funciones implementadas en el archivo data.js
​

​

README

​

Archivo	Descripción
readme.md	Información general del proyecto y objetivos de aprendizaje
​
​

Recursos visuales

​

Carpeta	Descripción
sketch	Carpeta con los skecth de alta y baja fidelidad.
​

4. Look final del proyecto vista de ordenador

​ ​ ​ ​

4. Look final del proyecto vista de móvil

5. Investigación UX

​

Sketch inicial

​ ​ ​

Sketch inicial movil

​

Imagen del prototipo final

​

​

Imagen del prototipo final mobile

​

5. Planning del proyecto

​ Utilizamos [Trello] como herramienta de coordinación para el óptimo desarrollo del proyecto, para verlo da click aquí. ​

6. Objetivos de aprendizaje

​ Trabajando en parejas aprenderán a construir una aplicación web que interactuará con lx usuarix final a través del navegador, utilizando HTML, CSS y JavaScript como tecnologías. ​ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. ​

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
• Planear y ejecutar tests de usabilidad. ​

HTML y CSS

​

• Uso correcto de HTML semántico
• Uso de selectores de CSS
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de flexbox en CSS. ​

DOM

​

• Uso de selectores del DOM
• Manejo de eventos del DOM
• Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.) ​

Javascript

​

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de bucles (for | for..in | for..of | while)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules (import | export)
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos atómicos y estructurados. ​

Testing

​

• [Testeo Unitario] ​

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

Git y GitHub

​

• Comandos de git (add | commit | pull | status | push).
• Manejo de repositorios de GitHub (clone | fork | gh-pages).
• Colaboración en Github (branches | pull requests | tags) ​

Buenas prácticas de desarrollo,

​

• Organizar y dividir el código en módulos (Modularización).
• Uso de identificadores descriptivos (Nomenclatura | Semántica).
• Uso de linter para seguir buenas prácticas (ESLINT).

Historias de usuario

1. Hitoria de usuario : Yo como interesado en jugar LoL quiero conocer de que se trata el juego.
2. Ver el historial de todos los campeones
3. Ver información de cada campeón en tarjetas
4. Filtrar campeones por roles para que el usuario lo encuentre mas dacilmente
5. Filtrar campeones por Nombres

Checklist

• Usa VanillaJS.
• No hace uso de this.
• 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 o Figma 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.