- Data Lol
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.
Tras leer el [README] hicimos un sketch de baja fidelidad en balsamiq y un sketch de alta fidelidad en figma, donde 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. 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 efocamos en manipular las funciones para testearlas.
| Archivo | Descripción |
|---|---|
| lol.js | Data del juego |
| lol.json | Data del juego - version .json |
| README.md | Historia de los campeones |
Carpeta con material visual utilizado en el cuerpo del proyecto
| Archivo | Descripción |
|---|---|
| index.html | Página principal |
| main.js | Interaccion con el DOM |
| data.js | Manipulacion de datos a través de arreglos y Objetos |
| style.css | Estilos del proyecto global |
| Archivo | Descripción |
|---|---|
| data.spec.js | Test Unitarios de las funciones implementadas en el archivo data.js |
| Archivo | Descripción |
|---|---|
| Readme.md | Informacion del proyecto y objetivos de aprendizaje |
| Carpeta | Descripción |
|---|---|
| Imagenes | Carpeta con material visual utilizado en el cuerpo del proyecto |
Utilizamos [Trello] como herramienta de coordinación para el óptimo desarrollo del proyecto, para verlo da click aquí.
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.
- Uso 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.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- Uso de condicionales (if-else)
- Uso de condicionales (switch | operador ternario)
- Uso de bucles (for | for..in | for..of | while)
- Uso de bucles (while)
- Uso de funciones (parámetros)
- Uso de funciones (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.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de 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)
- 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.||