Desenvolvimento front-end (2024)/Teste/CosmosMoriarty

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 dois exercícios:

Exercício 1: Benchmarking
Exercício 2: Criação de template & documentação

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 30 horas após o recebimento do e-mail com o link desta atividade.

Nome de usuário(a)

CosmosMoriarty

Exercício 1

O projeto Capacity Exchange visa entregar uma espécie de rede social focada na troca global de conhecimentos, serviços e habilidades (capacidades) entre wikimedistas, isto é, pessoas voluntárias do Movimento Wikimedia, por meio do espírito wiki. Neste sentido, usuários(as) wikimedia associarão suas contas à plataforma, preenchendo seu perfil com tags das (capacidades) que ou podem oferecer, ou desejam aprender/receber (por exemplo, “desenvolvimento front-end”). Assim, as pessoas usuárias podem ser pareadas com outrém que atende reciprocamente sua oferta/demanda.

Sabemos que, no ecossistema de software livre, não mercantilizado, não existe uma plataforma que consiga atender essa necessidade de conexão e aprendizado entre pares que levou à visão do Capacity Exchange. Por isso estamos desenvolvendo esse software.

Em termos estéticos, temos à nossa frente um mundo de possibilidades para dar cara a cada uma das aplicações Django que estamos desenvolvendo. Proponha-se a imaginar conosco! Liste até três produtos (embutindo os respectivos links) cuja organização e estética podem servir de inspiração para o Capacity Exchange, explicando brevemente o porquê de sua escolha.

TrustRoots

O TrustRoots é uma plataforma para compartilhar um "sofá amigo” na sua casa, para que viajantes tenham um cantinho para dormir e ficar. Eu gosto bastante do visual geral e a simplicidade de navegação do site, onde tudo é muito intuitivo e funcional.

De um lado "institucional”, gosto muito (!) da página inicial que explica como o site funciona. Ela possui textos amigáveis e simples, unindo capturas de telas e figuras - trazendo seu aspecto comunitário e sem fins lucrativos. Outras telas também inspiram como FAQ e a de seu manifesto.

Além disso, olhando mais de um lado de "produto”, acho bacana a ideia de "Circles” dentro do TrustRoots, que cria grupos onde você pode se juntar ou não, dependendo da sua auto-identificação. Isso pode ser trazido ao CapX na ideia de "Habilidades”, onde cada pessoa se juntaria nas habilidades que possui ou tem interesse. Útil também depois para identificação no perfil, uso na busca e/ou filtros dentro da plataforma e mais. Acho legal essa ideia:

uma página mostrando todas as "habilidades” cadastradas;
podemos usar dados diretos da Wikidata e belas imagens do Wikimedia Commons relacionados às "habilidades”.
uma página única para cada "habilidade”, mostrando sua definição, e o número membros a possuem e quantos tem interesse em aprender;
na página da habilidade, abaixo da definição e imagem sobre ela, podemos montar um mosaico com pequenos cartões sobre todos os membros daquela "habilidade”.

Anexos:

Links:

https://www.trustroots.org/

Open Collective

O Open Collective é uma plataforma que ajuda projetos e organizações a angariarem recursos financeiros de forma coletiva e transparente. Gosto bastante do que o site traz de forma mais subjetiva em seu visual, textos e imagens - reforçando também seu caráter comunitário.

O que mais acho que podemos nos inspirar para trazer ao CapX é a página de busca. Aqui fico em dúvida se seria a busca por "habilidades” ou por "membros” (talvez os dois?). Mas gosto como a busca funciona de maneira simples e agradável. Destaco:

campo de busca centralizado acima;
categorias pré-definidas para a busca;
filtros de ordenação e localidade;
etiquetas (tags);
e o resultado da busca sendo trazido em formas de cartões compostos de imagem, título, resumo, localidade e mais…

Vem do Open Collective também a ideia de mostrar o "mosaico” de membros na página de "habilidade”. Esse conceito é muito usado em READMEs de projetos de código-aberto (geralmente auto-gerado pelo Open Collective) e no próprio site do Open Collective nas páginas dos projetos. Gosto porque destaca sempre: existem muitas pessoas para que projetos aconteçam.

Anexos:

Links:

Link para a página de busca de Projetos do Open Collective

Exercício 2

Utilizando JavaScript, crie o(s) arquivo(s) necessário(s) para apresentar os dados providos neste <arquivo.json> de tal modo que sejam garantidos dinamismo, legibilidade, acessibilidade e usabilidade. Para o layout, aplique o Manual de Identidade Visual do CapX. Seu template deve ser documentado.

Envie para vagaswmnobrasil.org o nome de usuário/a que utilizou para completar o teste e os arquivos criados para esta resposta.