dodojoy/SAP008-data-lovers

O projeto Data Lovers - League Of Legends tem como objetivo ajudar jogadores e novos jogadores a conhecerem melhor os campeões presentes em Summoner's Rift por meio de informações básicas como função e nível de dificuldade de cada campeão. Com base nisso, foi criada, então, uma página web que fornecesse esses dados.

Data Lovers - League Of Legends

Índice

• 1. Introdução
• 2. Pesquisa de usuário
• 3. Protótipo
• 4. Objetivos de aprendizagem
• 5. Checklist

---

1. Introdução

O projeto Data Lovers - League Of Legends tem como objetivo ajudar jogadores e novos jogadores a conhecerem melhor os campeões presentes em Summoner's Rift por meio de informações básicas como função e nível de dificuldade de cada campeão. Com base nisso, foi criada, então, uma página web que fornecesse esses dados.

2. Pesquisa de usuário

Para entender melhor o que o jogador de League of Legends gostaria de encontrar em um site de informações sobre os campeões do jogo, realizei uma pesquisa com três perguntas. Abaixo estão as perguntas e suas respectivas respostas.

Pergunta 1 - Quais informações você gostaria de ver em um site sobre os campeões de League of Legends?

Pergunta 2 - Como você gostaria de visualizar essas informações?

Pergunta 3 - Como você gostaria de filtrar as informações?

3. Protótipo

A partir do resultado da pesquisa realizada com o usuário, criei o protótipo de alta fidelidade para cada tipo de tela: mobile e desktop.

Mobile

Desktop

Paleta de cores

Foi utilizada, também, a seguinte paleta de cores

4. Objetivos de aprendizagem

Tive como objetivo de apredizagem:

HTML

• Uso de HTML semântico

  • HTML semântico
  • Semantics in HTML - MDN

CSS

• Uso de seletores de CSS

  • Intro a CSS
  • CSS Selectors - MDN

• Empregar o modelo de caixa (box model): borda, margem, preenchimento

  • Modelo de Caixa e Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• Uso de flexbox em CSS

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

Web APIs

• Uso de seletores de DOM

  • Modificando o DOM
  • Introdução ao DOM - MDN
  • Locating DOM elements using selectors - MDN

• Manipulação de eventos de DOM

  • Introdução a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • Objeto Event

• Manipulação dinâmica de DOM

  • Introdução ao DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Diferenciar entre tipos de dados primitivos e não primitivos

• Manipular arrays (filter, map, sort, reduce)

  • Arrays
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• Manipular objects (key | value)

  • Objetos em JavaScript

• Variáveis (declaração, atribuição, escopo)

  • Valores, tipos de dados e operadores
  • Variáveis

• Uso de condicionais (if-else, switch, operador ternário)

  • Estruturas condicionais e repetitivas
  • Tomando decisões no seu código — condicionais - MDN

• Uso de laços (for, for..of, while)

  • Laços (Loops)
  • Laços e iterações - MDN

• Uso de funções (parâmetros, argumentos, valor de retorno)

  • Funções (controle de fluxo)
  • Funções clássicas
  • Arrow Functions
  • Funções — blocos reutilizáveis de código - MDN

• Testes unitários

  • Introdução ao Jest - Documentação oficial

• Módulos de ECMAScript (ES modules)

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descritivos (Nomenclatura | Semântica)

• Diferença entre expression e statements

Controle de Versões (Git e GitHub)

• Git: Instalação e configuração

• Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)

• Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)

• GitHub: Criação de contas e repositórios, configuração de chave SSH

• GitHub: Implantação com GitHub Pages

  • Site oficial do GitHub Pages

• GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)

user-centricity

• Desenhar a aplicação pensando e entendendo a usuária

product-design

• Criar protótipos para obter feedback e iterar

• Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)

research

• Planejar e executar testes de usabilidade

5. Checklist

• Usar VanillaJS.
• Passa pelo linter (npm run pretest)
• Passa pelos testes (npm test)
• Testes unitários cobrem um mínimo de 70% de statements, functions, lines e branches.
• Inclui uma definição de produto clara e informativa no README.md.
• Inclui histórias de usuário no README.md.
• Inclui rascunho da solução (protótipo de baixa fidelidade) no README.md.
• Inclui uma lista de problemas detectados nos testes de usabilidade no README.md.
• UI: Mostra lista/tabela/etc com dados e/ou indicadores.
• UI: Permite ordenar dados por um ou mais campos (asc e desc).
• UI: Permite filtrar dados com base em uma condição.
• UI: É responsivo.