Segundo projeto realizado para o Bootcamp da Laboratória. O objetivo deste projeto é criar uma aplicação responsiva que forneça informações sobre os campeões do jogo League of Legends, permitindo ordenação alfabética, filtragem por função do campeão e pesquisa por nome. 🎮
Desenvolvido por:
- Ádila Freitas | GitHub 👩💻
- Laura de Freitas | GitHub 👩💻
Acesse o projeto: (https://lauradefreitas2.github.io/SAP011-data-lovers/src) 🚀
- HTML
- CSS
- JavaScript Vanilla
- Figma - Utilizado para prototipagem 🎨
- Resumo do Projeto
- Protótipos
- Pesquisa de Campo
- Histórias de Usuários
- Interface
- Responsividade
- Seta de Retorno
- Extra
- Checklist de Objetivos Alcançados
O projeto "Escolha o seu Campeão" oferece aos usuários a oportunidade de explorar informações sobre os campeões disponíveis no jogo League of Legends, auxiliando na escolha do melhor campeão para suas partidas. A aplicação proporciona informações básicas para facilitar a decisão dos jogadores.
Foram desenvolvidos protótipos de baixa e alta fidelidade para a interface do projeto. A fase de prototipagem foi realizada utilizando a ferramenta Figma para visualização e interações. Os protótipos levaram em consideração as necessidades dos jogadores, tanto iniciantes quanto experientes.
Antes de iniciar o desenvolvimento da aplicação, realizamos uma pesquisa de campo para identificar as informações e funcionalidades que os jogadores de League of Legends gostariam de acessar. Utilizamos um formulário para coletar essas informações, permitindo-nos criar uma aplicação alinhada às expectativas dos usuários.
Com base na pesquisa de campo e nos protótipos desenvolvidos, elaboramos histórias de usuários que representam cenários de interação com a aplicação. Essas histórias foram incorporadas ao projeto, garantindo que as necessidades dos usuários fossem atendidas. Cada história de usuário é mapeada para funcionalidades específicas da aplicação.
A interface do projeto foi cuidadosamente projetada com base nas sugestões dos usuários obtidas na pesquisa de campo e nas histórias de usuários. A página inicial apresenta um menu de navegação com opções para buscar campeões por função, ordenar alfabeticamente e filtrar por categoria. Além disso, oferece links interativos para informações adicionais e para baixar o jogo.
[Tela Principal do Site - Cards Front]
[Tela Principal do Site - Cards Back]
A aplicação foi desenvolvida com responsividade em mente, proporcionando uma experiência agradável em dispositivos de diferentes tamanhos de tela. A interface se adapta para garantir que os jogadores possam acessar as informações dos campeões independentemente do dispositivo utilizado.
| 
|
|
Foi adicionada uma seta de retorno no site, que aparecerá quando o usuário estiver na terceira fileira de cards. Essa seta permite que o usuário retorne rapidamente ao início da página, melhorando a experiência de navegação.
Funcionalidade implementada na aplicação, permitindo que os jogadores obtenham um cálculo agregado das categorias de campeões. Por exemplo, ao filtrar pela função "Atiradores", a aplicação exibirá o número total de campeões com essa função e a porcentagem correspondente em relação ao total.
- [✅] Utilização de VanillaJS.
- [✅] Conformidade com o linter (npm run pretest).
- [✅] Testes unitários cobrem no mínimo 70% de statements, functions, lines e branches.
- [✅] Definição clara e informativa do produto no README.md.
- [✅] Inclusão das histórias de usuário no README.md.
- [✅] Inclusão do rascunho da solução (protótipo de alta fidelidade) no README.md.
- [✅] Interface que permite a ordenação dos dados por um ou mais campos (ascendente e descendente).
- [✅] Interface que permite a filtragem dos dados com base em uma condição.
- [✅] Responsividade para diferentes tamanhos de tela.
Desenvolvido como parte do Bootcamp da Laboratória.