Neste trabalho, você encontrará uma página web que permitirá visualizar as animações dos Studios Ghibli, através de posters, filtrá-las, ordená-las e ter acesso à informação dos diretores responsáveis por elas. Também forneceremos exemplos práticos para orientá-lo no uso correto das principais funcionalidades.
Este projeto foi idealizado para desenvolvimento das estudantes da turma SAP010 da Laboratória. Este documento possibilita a nosso(a) usuário(a) obter as informações essenciais para entender o projeto de maneira eficiente. Aqui você encontrará o resultado do trabalho árduo, criativo e dedicado de uma equipe talentosa. Somos gratas por dedicar seu tempo para conhecer este projeto, esperamos que atenda e até mesmo supere suas expectativas.
Equipe
Construímos a lógica do projeto integrada somente em JavaScript (ES6), HTML semântico e CSS. Desenvolvemos aprendizado em Git, Github, manipulação dinâmica, manipulação de eventos e seletores DOM, array, objetos, funções, Testes unitários, entre outros que possibilitam à interface mostrar os dados em telas de diversos tamanhos, além de permitir a interação por parte do usuários.
O primeiro passo foi escrever a história do usuário, assim como os critérios de aceitação e definição de pronto. Em seguida desenhamos o protótipo de baixa fidelidade e depois desenvolvemos no Figma o protótipo de alta fidelidade, bem parecido como a interface.
“Usuário está começando a acompanhar o Studio Ghibli e suas animações e deseja uma interface simples com o logotipo do Studio Ghibli, cores que correspondam ao mesmo, cards com imagens e informações como título e ano de lançamento”.
- Ter um título e logotipo dos Studios Ghibli;
- Posters com imagens das animações;
- Informações de título e ano de lançamento;
- Opções de busca por nome da animação, nome do diretor e ordenação de A-Z e Z-A;
Após a construção de cada função, escrevemos os testes unitários, testamos e corrigimos os problemas detectados.
Durante os testes de usabilidade percebemos que eram necessários alguns ajustes:
• Aumento na altura e na largura das caixas de pesquisas;
• Inclusão de lista de animações por nome para que o usuário não precise digitar;
Para melhor planejamento das tarefas a serem realizadas, utilizamos o Trello . Separamos as tarefas que poderíamos entregar a cada Sprint, pré agendamos os horários de encontros para codar, guardamos os links de vídeos e documentos importantes para o nosso aprendizado. Assim tivemos quase todo o material e ferramentas mais acessíveis.
Em nossa página inicial é possível atender a busca do usuário com uma breve descrição sobre o Studio Ghibli, assim como os diretores, os pôsteres das principais animações, título e ano de lançamento.
• Uso de Vanilla JavaScript; • Uso de HTML semântico; Uso de seletores de CSS, Flexbox e Media query; • Apis da web: Uso de seletores de DOM; Manipulação de eventos de DOM e Manipulação dinâmica de DOM; • Java Script : Funções (parâmetros, declarações e execução); • Inclusão de Cálculo Agregado • Criação de protótipo de alta fidelidade usando o Figma • Criação de testes unitários • Responsividade • Documentação README incluindo descrição do produto, histórias de usuário e interface; • Controle de versionamento colaborativo (Git). • A cobertura de nossos testes unitários: Cobertura de 100% de declarações, funções, linhas e ramos.
Caso você tenha alguma dúvida, problema ou sugestões relacionadas ao projeto, entre em contato conosco.
Cibelli Monte e-mail – [email protected] Linkedin – https://www.linkedin.com/in/cibelli-monte-9a97a458/
Lilian Rodrigues Polizelli Damadi e-mail – [email protected] Linkedin - linkedin.com/in/lilian-damadi-59a223246