Desenvolvimento front-end (2024)/Teste/Olumide olu

Desenvolvimento front-end

Boas-vindas ao teste de conhecimento e aptidão da vaga de Desenvolvimento front-end do projeto Capacity Exchange, coordenado pelo Wiki Movimento Brasil. O teste consistirá em um exercício de criação e documentação de um template para o protótipo do CapX.

Informações importantes

Antes de editar esta página, verifique se você está logada(o) na sua conta wiki. Se você tem dúvidas sobre como editar neste ambiente, recomenda-se a leitura desta brochura. Tenha em vista que suas respostas estarão livremente acessíveis, uma vez publicadas no ambiente wiki. Se desejar registrar o conteúdo à medida que realiza a atividade do teste, você pode editar e publicar a página quantas vezes precisar. Apenas tome o cuidado de sua conta estar sempre logada. Não serão aceitas edições realizadas 24 horas após o recebimento do e-mail com o link desta atividade.

Nome de usuário(a)

• Olumide olu

Exercício

O Capacity Exchange é um protótipo recém lançado de uma rede social para a conexão e aprendizado entre pares no Movimento Wikimedia. O projeto é desenvolvido em Python e JavaScript JavaScript. Encontra-se disponível no Toolforge e está parcialmente documentado na Meta-Wikimedia. Utilizando JavaScript, crie o(s) arquivo(s) necessário(s) para apresentar os dados providos neste arquivo JSON (organizations.json), associado com os JSONs complementares (territory.json e type.json) de tal modo que sejam garantidos dinamismo, legibilidade, acessibilidade e usabilidade. Para o layout, dê continuidade a identidade visual aplicada no protótipo, que tem por base o Manual de Identidade Visual. Ao final, documente seu template, descrevendo cada elemento e o motivo de sua escolha. Envie para capxwmnobrasil.org o nome de usuário/a que utilizou para completar o teste e os arquivos criados para esta resposta. Abaixo, insira a documentação de seu template.

_____________________________________________________ Documentação do projeto Este projeto pode ser encontrado no GitLab criado para este teste.

Para construção da resposta ao desafio utilizei como base para a interface o projeto Capacity Exchange. Apesar da utilização da base, aproveitei para fazer contribuições acerca de interface. Para a UI deste desafio foi utilizado unicamente HTML, CSS e Javascript.

Na parte de comunicação que o que seria o "back-end" foi feita toda construção em JavaScript, porem dividindo os arquivos em `data.js`que cuidado do carregamento de dados e hidratação para normalização. E o `script.js` onde estão as funções e feitos de animação do layout desenvolvido.

Documentação da Função loadJSONData()

• Descrição geral: Esta função carrega dados JSON de territórios, tipos e organizações de fontes externas (via fetch). A função busca dados de três endpoints diferentes e retorna um objeto contendo os arrays resultantes. Deve ser chamada via async/await, garantindo que os dados estarão carregados.

Documentação da Função hydrateData(territories, types, organizations)

• Descrição geral: Esta função hidrata os dados de organizações associando-os a tipos e territórios.

• Parâmetros:

- territories: O formato esperado é um array de territórios. - types: O formato esperado é um array de tipos de organizações. - organizations: O formato esperado esperados é um array com as organizações.

Documentação da Função mountDataUI()

• Descrição geral: Esta função gera a interface de usuário (UI) criando os componentes de cartão com dados em lista de organizações previamente carregadas pela função `loadJSONData()`e devidsmente hidratados pela função `hydrateData(territories, types, organizations)`.

Documentação da Função main()

• Descrição geral: Faz o carregamento das funções principais da aplciação e se encarregada de chamar a função de UI que faz a montagem do card de informações das organizações.

Informações pertinentes sobre UI componentes

- <a></a> nos elementos de link foram adicionados os atributos de Use "aria-label" para garantir que o dados textual de maneiral acessível seja fornecido quando nenhum estiver visível no DOM

- <img/> nos elementos de imagens foram adicionados o atributos "alt" para descrição dos elementos de imagens renderizados

- foram utilizados os conceitos fluidos de interface com a propriedade "display: flex" para possibilidade melhor adaptação dos componentes elaborados em tela

- o projeto foi elaborado mobile first objetivando entregar responsividade e uma boa usabildiade da interface