diff --git a/README.md b/README.md index c58dcb5d..c8c6ca40 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@ # Data Lovers +![ghipy](https://media.giphy.com/media/3sjOADyw19Pa/giphy.gif) + + --- ## Índice - [1. Preâmbulo](#1-preâmbulo) - [2. Resumo do projeto](#2-resumo-do-projeto) -- [3. Objetivos de aprendizagem](#3-objetivos-de-aprendizagem) -- [4. Considerações gerais](#4-considerações-gerais) -- [5. Critérios mínimos de aceitação do - projeto](#5-critérios-mínimos-de-aceitação-do-projeto) -- [6. Hacker edition](#6-hacker-edition) -- [7. Considerações técnicas](#7-considerações-técnicas) -- [8. Pistas, dicas e leituras - complementares](#8-pistas-dicas-e-leituras-complementares) -- [9. Checklist](#9-checklist) +- [3. Pesquisa](#3-pesquisa) +- [4. Histórias de usuários](#4-historias-de-usuarios) +- [5. Protótipos](#5-prototipos) +- [6. Teste de usabilidade](#6-teste-de-usabilidade) +- [7. Considerações finais](#7-considerações-finais) + --- @@ -36,297 +36,43 @@ parte direita. ## 2. Resumo do projeto -Neste projeto você **construirá uma _página web_ para visualizar um _conjunto -(set) de dados_** que se adeque às necessidades de seu usuário. - -Como entregável final terá uma página web que permita **visualizar dados, -filtrá-los, ordená-los e fazer algum cálculo agregado**. Por cálculo agregado -nos referimos aos diversos cálculos que podem ser feitos com os dados para -mostrar a informação mais relevante para os usuários (médias, valores máximos e -mínimos, etc). - -Para este projeto trazemos uma série de dados de _temáticas diferentes_ para que -você explore e decida com qual delas deseja trabalhar. Escolhemos -especificamente estes conjuntos de dados porque cremos que se adequem bem a esta -etapa de sua aprendizagem. - -Uma vez que você defina sua área de interesse, busque entender quem é seu -usuário e o que exatamente ele necessita saber ou ver, para que assim possa -construir a interface que o ajude a interagir e entender melhor os dados. - -Este são os dados que propomos: - -- [Pokémon](src/data/pokemon/pokemon.json): Neste conjunto você encontrará uma - lista com os 151 Pokémon da região de Kanto, com suas respectivas estatísticas - utilizadas no jogo [Pokémon GO](http://pokemongolive.com). - - - [Pesquisa com jogadores de Pokémon Go](src/data/pokemon/README.pt-BR.md) - -- [League of Legends - Challenger leaderboard](src/data/lol/lol.json): Este - conjunto mostra a lista de jogadores de uma liga do jogo League of Legends - (LoL). - - - [Pesquisa com jogadores de LoL](src/data/lol/README.pt-BR.md) - -- [Rick and Morty](src/data/rickandmorty/rickandmorty.json). Lista de - personagens da série Rick & Morty. Você pode revisar a documentação da API - neste [link](https://rickandmortyapi.com). - - - [Pesquisa com seguidores de Rick and Morty](src/data/rickandmorty/README.pt-BR.md) - -- [Jogos Olímpicos do Rio de Janeiro](src/data/athletes/athletes.json). - Este conjunto nos fornece a lista de atletas que conquistaram medalhas nas - Olimpíadas do Rio de Janeiro. - - - [Pesquisa com stakeholders dos Jogos Olímpicos do Rio de Janeiro](src/data/athletes/README.pt-BR.md) - -- [Studio Ghibli](src/data/ghibli/ghibli.json). - Lista de animações e personagens do [Studio Ghibli](https://ghiblicollection.com/). - - [Pesquisa com seguidores de Studio Ghibli](src/data/ghibli/README.pt-BR.md) - -O objetivo principal deste projeto é que aprenda a desenhar e construir uma -interface web onde se possa visualizar e manipular dados, entendendo o que o -usuário necessita. - -## 3. Objetivos de aprendizagem - -Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho. - -### HTML - -- [ ] **Uso de HTML semântico** - -
Links

- - - [HTML semántico](https://curriculum.laboratoria.la/pt/topics/html/02-html5/02-semantic-html) - - [Semantics in HTML - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -

- -### CSS - -- [ ] **Uso de seletores de CSS** - -
Links

- - - [Intro a CSS](https://curriculum.laboratoria.la/pt/topics/css/01-css/01-intro-css) - - [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

- -- [ ] **Empregar o modelo de caixa (box model): borda, margem, preenchimento** - -
Links

- - - [Modelo de Caixa e Display](https://curriculum.laboratoria.la/pt/topics/css/01-css/02-boxmodel-and-display) - - [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - - [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - - [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - - [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -

- -- [ ] **Uso de flexbox en CSS** - -
Links

- - - [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - - [Flexbox Froggy](https://flexboxfroggy.com/#pt-br) - - [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -

- -### Web APIs - -- [ ] **Uso de seletores de DOM** - -
Links

- - - [Modificando o DOM](https://curriculum.laboratoria.la/pt/topics/browser/02-dom/03-1-dom-methods-selection) - - [Introdução ao DOM - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction) - - [Locating DOM elements using selectors - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

- -- [ ] **Gerenciamento de eventos de DOM** - -
Links

- - - [Introdução a eventos - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events) - - [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener) - - [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/removeEventListener) - - [El objeto Event](https://developer.mozilla.org/pt-BR/docs/Web/API/Event) -

- -- [ ] **Manipulação dinâmica de DOM** - -
Links

- - - [Introdução ao DOM](https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM/Introdu%C3%A7%C3%A3o) - - [Node.appendChild() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild) - - [Document.createElement() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElement) - - [Document.createTextNode()](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createTextNode) - - [Element.innerHTML - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML) - - [Node.textContent - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Node/textContent) -

- -### JavaScript - -- [ ] **Diferenciar entre tipos de dados primitivos e não primitivos** - -- [ ] **Manipular arrays (filter, map, sort, reduce)** - -
Links

- - - [Arrays](https://curriculum.laboratoria.la/pt/topics/javascript/04-arrays) - - [Array.prototype.sort() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - - [Array.prototype.forEach() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - - [Array.prototype.map() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - - [Array.prototype.filter() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - - [Array.prototype.reduce() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -

- -- [ ] **Manipular objects (key | value)** - -
Links

- - - [Objetos em JavaScript](https://curriculum.laboratoria.la/pt/topics/javascript/05-objects/01-objects) -

- -- [ ] **Variáveis (declaração, atribuição, escopo)** - -
Links

- - - [Valores, tipos de dados e operadores](https://curriculum.laboratoria.la/pt/topics/javascript/01-basics/01-values-variables-and-types) - - [Variáveis](https://curriculum.laboratoria.la/pt/topics/javascript/01-basics/02-variables) -

- -- [ ] **Uso de condicionais (if-else, switch, operador ternário)** - -
Links

- - - [Estruturas condicionais e repetitivas](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/01-conditionals-and-loops) - - [Tomando decisões no seu código — condicionais - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals) -

- -- [ ] **Uso de laços (for, for..of, while)** - -
Links

- - - [Laços (Loops)](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/02-loops) - - [Laços e iterações - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration) -

- -- [ ] **Uso de funções (parâmetros, argumentos, valor de retorno)** - -
Links

- - - [Funções (controle de fluxo)](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/03-functions) - - [Funções clásicas](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/01-classic) - - [Arrow Functions](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/02-arrow) - - [Funções — blocos reutilizáveis de código - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Functions) -

- -- [ ] **Testes unitários** - -
Links

- - - [Introdução ao Jest - Documentação oficial](https://jestjs.io/docs/pt-BR/getting-started) -

- -- [ ] **Uso ES modules** - -
Links

- - - [import - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import) - - [export - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export) -

- -- [ ] **Uso de linter (ESLINT)** - -- [ ] **Uso de identificadores descritivos (Nomenclatura | Semântica)** - -- [ ] **Diferença entre expression e statements** - -### 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** - -
Links

- - - [Site oficial do GitHub Pages](https://pages.github.com/) -

- -- [ ] **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** - -## 4. Considerações gerais - -- Este projeto será executado em duplas. -- Este projeto será entregue através do GitHub e a interface deve ser publicada - no [GitHub Pages](https://pages.github.com/). -- Tempo para completá-lo: Tome como referencia 4 semanas. +### Definição de produto -## 5. Critérios mínimos de aceitação do projeto +Este projeto consistem em ordenar e filtras alguns dados e eventualmente mostrar um valor agregado referente a temática escolhida. +Para este novo desafio optei por construir uma interação sobre o Studio Ghibli, onde o usuário poderá classificar suas pesquisa por Título dos filmes, Diretor, Personagens ou o ano de seu lançamento. -Os critérios considerados para que tenha terminado este projeto são: -### Definição de produto +### Histórias de usuário -Documente brevemente seu trabalho no arquivo `README.md` de seu repositório, -contando como foi o processo de desenho e como você acredita que o produto possa -resolver o problema (ou problemas) de seu usuário. +**Historia 1** +![mulheres](./img-readme/mulher.png) -### Histórias de usuário +**História 2** +
+![jovem](./img-readme/jovem.png) -Uma vez que entenda a necessidade dos usuários, escreva as [Historias de -Usuario](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) que -representem tudo que o usuário precisa fazer/ver. As **histórias de usuário** -devem ser o resultado de seu processo de investigação/pesquisa de seus usuários. +### Desenho de interface do usuário -Não esqueça de incluir a definição de pronto (_definition of done_) e os -critérios de aceitação para cada uma. +Gráficos Form +64% dos entrevistados se declararam como mulher e estimasse que a sua faixa etária está entre 25 e +30 anos. -Na medida do possível, termine uma história de usuário antes de passar para a -seguinte (cumpra com as definições de pronto + critérios de aceitação). +![gênero](./img-readme/genero.png) +![idade](./img-readme/idade.png) +![info_pesquisa](./img-readme/info_site.png) -### Desenho de interface do usuário +A paleta de cores a ser utilizada será do filme The Secret World of Arrietty. +![paleta](./img-readme/paleta.jpg) #### Protótipo de baixa fidelidade -Durante seu trabalho você deverá fazer e iterar rascunhos de sua solução usando -lápis e papel. Recomendamos que fotografe todas as iterações que fizer, suba -para seu repositório e as mencione no `README.md`. +![prototipo-baixa-fidelidade](./img-readme/home_baixa_fidelidade.jpg) #### Protótipo de alta fidelidade -O passo seguinte é desenhar sua Interface de Usuário (UI - _User Interface_). -Para isso você deverá aprender a usar alguma ferramenta de _visual design_. Nós -recomendamos [Figma](https://www.figma.com/) que é uma ferramenta que funciona -no navegador e no qual é possível criar uma conta gratuita. Mas você é livre -para usar outros editores gráficos como Illustrator, Photoshop, PowerPoint, -Keynote, etc. Lembre-se de usar a identidade gráfica correspondente ao arquivo -de dados que escolher. +![prototipo_home](./img-readme/home_prototipo.png) + +![prototipo_index](./img-readme/index_prototipo.png) -O protótipo deve apresentar o que seria _ideal_ em sua solução. Digamos que é o -que desejaria implementar se tivesse tempo ilimitado para hackear. Não se -esqueça de incluir em seu protótipo os fundamentos de _visual design_. #### Testes de usabilidade @@ -335,282 +81,5 @@ diferentes, e com base nos resultados desses testes, iterar seus desenhos de interface. Conte-nos quais problemas de usabilidade você detectou através dos testes e como os resolveu na proposta final. -### Implementação da interface de usuário (HTML/CSS/JS) - -Após desenhar sua interface de usuário, deverá trabalhar na sua implementação. -**Não** é necessário que construa a interface exatamente da mesma forma que -desenhou. Terá um tempo limitado para trabalhar no projeto, então você deve -priorizar as tarefas. - -No mínimo, sua implementação deverá: - -1. Mostrar os dados em uma interface: pode ser em cards, tabelas, listas, etc. -2. Permitir ao usuário interagir com a interface para obter as informações que - necessita; -3. Ser _responsiva_, ou seja, deve ser visualizada sem problemas a partir de - diversos tamanhos de tela: celulares, tablets, notebooks, etc. -4. Que a interface siga os fundamentos de _visual design_. - -### Testes unitários - -O _boilerplate_ do projeto não inclui testes unitários. Assim, você terá que -escrever seus próprios testes para as funções encarregadas de _processar_, -_filtrar_ e _ordenar_ os dados, assim como _calcular_ estatísticas. - -Seus testes unitários devem ter cobertura mínima de 70% de _statements_ -(_sentenças_), _functions_ (_funções_), _lines_ (_linhas_), e _branches_ -(_ramos_) do arquivo `src/data.js`, que irá conter suas funções e que está -detalhado na seção de [Considerações técnicas](#srcdatajs). - -## 6. Hacker edition - -As seções chamadas _Hacker Edition_ são **opcionais**. Se já tiver terminado -todos os requisitos anteriores e tiver tempo, pode tentar completá-las. Dessa -forma, você pode aprofundar e/ou exercitar mais os objetivos de aprendizagem -deste projeto. - -Features/características extra sugeridas: - -- Ao invés de consumir dados estáticos do repositório, pode fazer isso de forma - dinâmica, carregando um arquivo JSON com `fetch`. A pasta `src/data` contém - uma versão `.js` e uma `.json` de cada conjunto de dados. -- Adicione à sua interface visualização de dados em forma de gráficos. Para - isso, recomendamos explorar bibliotecas de gráficos como - [Chart.js](https://www.chartjs.org/) ou [Google - Charts](https://developers.google.com/chart/). -- 100% de cobertura nos testes. - -## 7. Considerações técnicas - -A lógica do projeto deve estar implementada somente em JavaScript (ES6), HTML e -CSS. Neste projeto não está permitido o uso de bibliotecas e frameworks, apenas -[vanilla -JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -com exceção das bibliotecas para gráficos (ver [_Parte -opcional_](#6-hacker-edition) acima). - -O _boilerplate_ contém uma estrutura de arquivos como ponto de partida, assim -como toda a configuração de dependências: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (de acordo com o data que forem trabalhar) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como no projeto anterior, existe um arquivo `index.html`. Como já sabe, aqui -entra a página que vai ser exibida ao usuário. Também serve para indicar quais -scripts serão utilizados e juntar tudo o que foi feito. - -### `src/main.js` - -Recomendamos que utilize `src/main.js` para todos os códigos que tenham a ver -com a exibição dos dados na tela. Com isto nos referimos basicamente à interação -com o DOM. Operações como criação de nós, registro de manejadores de eventos -(_event listeners_ ou _event handlers_) e etc. - -Esta não é a única forma de dividir seu código. Pode utilizar mais arquivos e -pastas, sempre e quando a estrutura estiver clara para suas colegas. - -Neste arquivo você encontrará uma série de _imports comentados_. Para carregar -diferentes fontes de dados, você deverá "descomentar" esses _imports_. Cada um -destes _imports_ criará uma variável `data` com os dados correspondentes à fonte -escolhida. - -Por exemplo, se "descomentamos" a seguinte linha: - -```js -// import data from './data/pokemon/pokemon.js'; -``` - -A linha ficaria assim: - -```js -import data from "./data/pokemon/pokemon.js"; -``` - -E agora teríamos a variável `data` disponível em `src/main.js`. - -### `src/data.js` - -O coração deste projeto é a manipulação de dados através de arrays e objetos. - -Recomendamos que este arquivo contenha toda a funcionalidade que corresponda a -obter, processar e manipular dados (suas funções): - -- `filterData(data, condition)`: esta função receberia os dados e nos retornaria - os que cumprem com a condição. - -- `sortData(data, sortBy, sortOrder)`: esta função recebe três parâmetros. O - primeiro, `data`, nos entrega os dados. O segundo, `sortBy`, diz respeito a - qual das informações quer usar para ordenar. O terceiro, `sortOrder`, indica - se quer ordenar de maneira crescente ou decrescente. - -- `computeStats(data)`: essa função nos permite fazer cálculos estatísticos - básicos para serem exibidos de acordo com o que os dados permitem. - -Estes nomes de funções e parâmetros são somente referência, o que vocês decidirem -utilizar vai depender da sua implementação. - -Estas funções devem ser -[_puras_](https://imasters.com.br/desenvolvimento/serie-js-e-vida-pure-functions-funcoes-puras) -e independentes do DOM. Estas funções serão depois usadas a partir do arquivo -`src/main.js`, ao carregar a página e a cada vez que o usuário interagir com a -interface (cliques, seleções, filtros, ordenação, etc). - -### `src/data` - -Nesta pasta estão os dados de diferentes fontes. Você vai encontrar uma pasta -para cada fonte, e dentro de cada pasta estão dois arquivos: um com a extensão -`.js` e outro `.json`. Ambos os arquivos contém os mesmos dados; a diferença é -que podemos usar o `.js` com uma tag ` - - diff --git a/src/main.js b/src/main.js index ad60a3f4..e2801f4e 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,5 @@ -import { example } from './data.js'; -import data from './data/pokemon/pokemon.js'; -// import data from './data/lol/lol.js'; -// import data from './data/rickandmorty/rickandmorty.js'; -// import data from './data/ghibli/ghibli.js'; -// import data from './data/athletes/athletes.js'; -console.log(example, data); + import data from './data/ghibli/ghibli.js'; + + +console.log(data); diff --git a/src/style.css b/src/style.css index e69de29b..b69ec984 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,10 @@ +* { + padding: 0; + margin: 0; + border: 0; + box-sizing: border-box; +} + +body { + background-color:#BF9A78; +} \ No newline at end of file