Data Lovers

Índice

• Preâmbulo
• Descrição
• Parte obrigatória
• Parte opcional
• Primeiros passos
• Conteúdo de referência
• Checklist

---

Preâmbulo

Segundo um estudo da IBM, 90% dos dados que existem hoje foram criados durante os últimos dois anos. A cada dia geramos 2,5 trilhões de bytes de dados, uma cifra sem precedentes. Apesar disso, os dados por sozinhos são de pouca utilidade. Para que essas grandes quantidades de dados se convertam em informação fácil de ler para os usuários, temos que entendê-los e processá-los. Uma maneira simples de se fazer isso seria criando interfaces e visualizações. Na seguinte imagem, você pode ver de que forma, com os dados que vemos na parte esquerda, é possível construir uma interface amigável e legível para o usuário.

Você pode ver os detalhes dos dados neste link e a interface construída neste link.

Resumo do projeto

Neste projeto você desenvolverá uma página web para visualizar um conjunto (set) de dados que se adeque ao que seu usuário necessita. Fornecemos a vocês uma série de dados de diferentes temáticas para que explore e decida com o que gostaria de trabalhar. Nós elegemos especificamente estes sets de dados porque acreditamos que se adequem bem a esta etapa de sua aprendizagem. Uma vez definida sua área de interesse, entenda quem é seu usuario e o que ele necessita saber ou ver exatamente; assim já poderá criar uma interface que o ajude a interagir e entender melhor os dados.

• Indicadores de desenvolvimento: Indicadores de desenvolvimento do Banco Mundial de alguns países (Brasil, Chile, México e Peru). Estes dados incluim indicadores demográficos, econômicos e comerciais.

Como produto final você terá que criar uma página web que permita visualizar os dados, filtrá-los, ordená-los e fazer algum cálculo agregado. Como esclarecimento, ao falar de cálculo agregado, nos referimos a diferentes cálculos que se pode fazer com os dados e trazer informações ainda mais relevantes para o usuário. Uma opção seriam cálculos estatísticos com média, mínimo e máximo. Por exepmplo, se temos uma coleção que representa um grupo de pessoas e cada pessoa está representada com um objeto com uma propriedade altura, poderíamos calcular a altura média em um grupo, entre outras coisas.

Esperamos que cada set de dados esteja acompanhado de uma identidade gráfica condizente. Você pode pesquisar na internet para ter referências sobre cada um dos temas e trabalhar em uma identidade para sua página.

Parte Obrigatória

Os critérios para considerar que você completou o projeto são:

Definição do produto

• O desenvolvimento do projeto começou definindo o tema e os usuários e criando esboços e protótipos para que atendessem de melhor forma a necessidade do usuário
• Com o protótipo pronto e passando pelos testes de usuário começou o planejamento dos passos necessários para a realização do projeto
• O objetivo principal foi desenvolver interface prática e de fácil entedimento para o usuário com funções que realizassem suas necessidades
• Com o tema de indicadores de desenvolvimento foi trazido o foco na educação das mulheres na América Latina(com os países indicados no banco de dados disponível)
• Foram criadas abas: uma aba com a página inicial indicando o objetivo da página, uma aba com quantidade de mulheres na América Latina em gráfico, uma aba da América Latina com filtragem de pesquisa comparando qual o país com índice máximo e minímo nos índices de educação e outra filtragem na mesma aba mostrando de cada país disponível o valor dos últimos 10 anos do índice escolhido e, abas separadas por país trazendo o índice de cada ano e um botão para comparação com os outros países.
• O usuário pode acessar apenas o país que quer visualizar, pode comparar com os outros países os índices e comparar o desenvolvimento daquele indicador nos últimos anos.

Desenho da interface de usuário

Protótipo

Protótipo da Marvel

Testes de usabilidade

O teste de usabilidade trouxe retorno positivo, porém durante a realização vimos a falta de necessidade de expor todos os índices na mesma página criando então uma caixa de seleção para exibir individualmente cada índice para mais clareza de visualização.

Implementação de Interface de Usuário (HTML/CSS/JS)

Logo após desenhar sua interface de usuário você deverá trabalhar em sua implementação. Como mencionamos, não é necessário que desenvolva uma interface tal como a desenhou. Você terá um tempo limitado para codar, então, deverá priorizar. Como mínimo, sua implementação deve:

1. Mostrar os dados em uma interface: pode ser um card, uma tabela, uma lista, etc.
2. Permitir ao usuário filtrar e ordenar os dados.
3. Calcular estatísticas como média aritmética, máximo e/ou mínimo de algum atributo numérico, ou contar quantas vezes aparece um determinado valor, por exemplo.

Parte Opcional (Hacker edition)

Features/características extras sugeridas:

• No lugar de consumir os dados de forma estática, você pode trabalhar com eles de forma dinâmica, carregando um arquivo JSON por meio de um fetch. A pasta src/data contém uma versão .js e uma .json de cada set de dados.
• Agregar em sua interface de usuário visualizações gráficas. Para isso, recomendamos explorar bibliotecas de gráficos como Chart.js ou Google Charts.

Vídeo do Dani usando o HighCharts Vídeo da Ju usando o Google Charts

Dicas de como começar a trabalhar no projeto

Antes de começar a escrever o código, você deve definir o que será feito com base nos conhecimentos que você possa obter dos usuários do seu produto. Essas perguntas podem te ajudar:

• Quem são os principais usuários de seu produto?
• Quais são os objetivos de seu usuário com relação ao seu produto?
• Quais os dados mais importantes que eles querem ver em sua interface?
• Quando utilizam ou utilizariam seu produto?

Quando já estiver pronta para codar, te recomendamos começar desta forma:

1. Uma das integrantes da dupla deve realizar um 🍴 fork do repositório. Seus mentores compartilharão um link que te dará acesso ao repo. A outra integrante deve fazer um fork do repositório de sua companheira e trabalharem juntas.
2. ⬇️ Clone seu fork para seu computador (cópia local).
3. Let's code! 🚀

---

Conteúdo de referência

Experiência de Usuário (UX Design)

• Entrevistas com usuários
• Princípios de usabilidade

Desenvolvimento Front-end

• Unidade de arrays no curso de JavaScript no LMS.
• Unidade de objetos no curso de JavaScript no LMS.
• Unidade de funções no curso de JavaScript no LMS.
• Unidade de DOM no curso de Browser JavaScript no LMS.
• Array no MDN
• Array.sort no MDN
• Array.map no MDN
• Array.filter no MDN
• Array.reduce no MDN
• Array.forEach no MDN
• Object.keys no MDN
• Object.entries no MDN
• Fetch API no MDN
• json.org

---

Checklist

• Usar VanillaJS.
• Inclui Definição de produto clara e informativa no README.md.
• Inclui esboço da solução (protótipo de baixa fidelidade e de alta fidelidade, se houver) no README.md.
• Inclui a lista de problema detectados através dos testes de usabilidade no README.md.
• UI: Mostra lista e/ou tabela com dados e/ou indicadores.
• UI: Permite ordenar os dados por meio de um ou mais campos (asc e desc).
• UI: Permite filtrar os dados com base em uma condição.