Este projeto foi construído dentro da proposta do Projeto 2 do Bootcamp Laboratoria.la. A proposta prevê como entregável final uma página web que, construída em dupla, permita visualizar dados, filtrá-los, ordená-los e fazer algum cálculo agregado. Dentre uma série de dados de temáticas diferentes disponibilizados pelo Bootcamp, escolhemos trabalhar com os dados relativos à série televisiva norte-americana Game of Thrones, transmitida originalmente pelo canal HBO entre 17 de abril de 2011 a 19 de maio de 2019.
O objetivo principal deste projeto é aprender a desenhar e construir uma interface web onde se possa visualizar e manipular dados, entendendo o que o usuário necessita.
Dentre os objetivos de aprendizagem elencados pelo Bootcampo Laboratoria para este projeto encontram-se:
- Uso de HTML, CSS, JavaScript Vanilla e Web APIs
- Controle de Versões (Git e GitHub)
- Desenho e desenvolvimento de um produto ou serviço colocando as usuárias no centro**
- Criação de protótipos para obter feedback e iterar**
- Planejamento e execução de testes de usabilidade**
- Definição de produto: documentação do trabalho no arquivo
README.mddo repositório, contendo o processo de desenho e uma elaboração sobre de forma o produto pode resolver o problema (ou problemas) de seu usuário. - Histórias de usuário: resultado do processo de investigação/pesquisa de seus usuários
- Desenho de interface do usuário
- Protótipo de baixa fidelidade
- Protótipo de alta fidelidade, com a identidade gráfica correspondente ao arquivo de dados escolhido.
- Testes de usabilidade
- Iteração dos desenhos de interface com base nos resultados desses testes
- Descrição dos problemas de usabilidade detectados e sua resolução.
- Implementação da interface de usuário (HTML/CSS/JS), que deve, no mínimo:
- Mostrar os dados em uma interface: pode ser em cards, tabelas, listas, etc.
- Permitir ao usuário interagir com a interface para obter as informações que necessita;
- Ser responsiva, ou seja, deve ser visualizada sem problemas a partir de diversos tamanhos de tela: celulares, tablets, notebooks, etc.
- Que a interface siga os fundamentos de visual design.
- Testes unitários, com cobertura mínima de 70% de statements (sentenças), functions (funções), lines (linhas), e branches (ramos).
"Como fã da série Game of Thrones, gostaria de ter um forma digital de consultar os personagens da série e de obter infomações sobre eles."
"A fim de obter informações sobre os personagens da série Game of Thrones, como fã da série, quero uma enciclopédia virtual, acessível por pc ou por celular."
"Como fã da série Game of Thrones, gostaria de ter um forma de ordenar a visualização os personagens por família."
"Como fã da série Game of Thrones, quero poder fazer buscas por personagens."
"A fim de obter informações sobre a relevância de um família na série Game of Thrones, como fã da série, quero uma maneira de quantificar os membros de uma família."
Partindo das histórias de usuários, pensamos em um site que, acessado por desktop ou por celular, fosse capaz de entregar a um fã da série informações sobre os seus personagens, acompanhadas da foto do personagem. As informações seria dispostas por personagem, agregadas em um objeto em formato de carta (como em um jogo de cartas). As informações de que dispunhamos a partir do arquivo cedido pelo Bootcamp eram nome, sobrenome, família a que a personagem pertence, sua imagem e data de nascimento. Escolhemos, além das três funções básicas exigidas pela proposta (ordem alfabética, filtro de família e dados agregados) adicionar um campo de busca por nome ou sobrenome.
O site construído mantém as cores que caracterizam a abertura da série (preto e prata). A fonte utilizada pela emissora HBO para a produção das suas peças é uma adaptação da fonte TRAJAN PRO, mantida na construção do site.
O trono de ferro, elemento central da série, simboliza o poder sobre o continente de Westeros. É por ele lutam as famílias (também chamadas casas) da série. Esse elemento aparece em posição central no site.
Protótipo de alta fidelidade, com a identidade gráfica correspondente ao arquivo de dados escolhido.
O protótipo pode ser consultado aqui: https://marvelapp.com/prototype/79e82j8
Versão Desktop
Desktop e exemplo de cartão com informações do personagem
Detalhes do cartão
Versão mobile
Com base nos prótótipos, a primeira versão do projeto foi construída.
Versão 1.0 Desktop
Versão 1.0 Mobile
Nos testes de usabilidade, foram sugeridos:
- Criação de um botão para voltar ao topo da tela, após a busca;
- Tela de abertura, antes da busca, para contextualização do projeto;
- Botão de HOME;
- Combinação de filtros.
A partir de nossos próprios testes, decidimos acrescentar um botão para limpar busca. A sugestão foram consideradas e implementadas.
Na tela de abertura há três links: o primeiro leva o usuário à página da série Game of Thrones na Wikipedia. O segundo link, centralizado, leva o usuário à busca pelos personagens. O último link apresenta este readme e contextualiza o usuário acerca do contexto de produção do site.
Versão 1.1 Desktop - Tela de abertura
Na página de busca foram implementados o botão de Home, limpar busca e retornar ao topo da tela.
Versão 1.1 Desktop - Página de busca de personagens
Versão 1.1 Mobile - Tela de abertura e Página de buscas
Foram elaborados dois testes para cada uma das funções criadas no contexto do projeto.
Créditos: