Concepção da área QD nas Universidades

[tigreped]

Descrição

Levantamento de requisitos para a criação da área "QD nas Universidades" no site do Querido Diário, com desenho das telas e descrição dos textos, campos e outros elementos necessários.

[tigreped]

Requisitos

• Conteúdos:

1. Item “Universidades” no menu leva para home
2. Página principal (Home) com descrição curta do projeto e de como fazer parte dele, dos ciclos e da base de conhecimento e direciona para cada um deles
3. Página “Como fazer parte do projeto” com seções específicas para cada tipo de parceria (parceria de apoio ao projeto; acompanhamento a grupo de pesquisa; acompanhamento com pessoa orientadora; desenvolvimento de pesquisa sem acompanhamento recorrente) também apontaria para o formulário de inscrição (que poderia até ser um link no limite da coisa) ou contato nos casos onde houvesse isso
4. Página “Base de conhecimento” com link para planilha (inclusive em última instância poderia até ser uma planilha do google embutida, mas legal seria poder filtrar por tags ou coisas do tipo) com metadados sobre cada resultado (tags identificadoras; quem fez; quando; que tipo de resultado é; descrição curta; título; link para arquivo ou mídia)
5. Página “Histórico dos ciclos” com seções para cada ciclo. Cada ciclo teria suas subseções de relações que desenvolvemos durante aquele ciclo (apoio ao projeto, grupos parceiros, etc.) e para cada subseção entra nas individualidades de cada projeto.

[tigreped]

Itens 1) e 2)

[tigreped]

Item 5) Histórico dos Ciclos

[tigreped]

4. Base de conhecimento

[kaiocp]

oi @tigreped, tudo bem?

conforme discutido aqui eu vou puxar a implementação dessas telas :]

quaisquer alinhamentos que precisamos nós fazemos por aqui na issue ou em uma thread no #qd-frontend?

[kaiocp]

subi o pr #249. minha intenção é fazer pequenos prs, pra facilitar o processo de code review.

nesse primeiro pr implementei apenas o hero da home e a rota /universidades.

usei como bench os estilos da home da area-education pra manter a consistência de estilos entre diferentes páginas.

não sei se a intenção dessa tela aqui, por exemplo, era que fosse exatamente assim ou apenas uma forma de visualizar o layout. se tivermos que usar os estilos dela, só me sinalizar que eu subo as correções lá no pr 😊

[ogecece]

Que massa @kaiocp !

não sei se a intenção dessa https://github.com/okfn-brasil/querido-diario-frontend/issues/247#issuecomment-1959453133, por exemplo, era que fosse exatamente assim ou apenas uma forma de visualizar o layout. se tivermos que usar os estilos dela, só me sinalizar que eu subo as correções lá no pr 😊

É uma forma de visualizar o layout mesmo de baixíssima fidelidade hehehe. Basicamente o que o @tigreped considerou mais rápido para elencar "requisitos" de interface. Textos também são só placeholders.

Os estilos devem fazer sentido com o resto do site. Usa o manual de marca pra te ajudar. E estávamos iniciando um design system no último semestre mas ainda não está completo.

[kaiocp]

oi @ogecece, tudo bem?

solicitei acesso ao manual. você libera pra mim, por favor? 🥺

[ogecece]

@kaiocp pensei que já estava com acesso de leitura liberado. Pode acessar agora.

[Fedra92]

Olá, segue o link do Figma para o protótipo da área QD https://www.figma.com/file/PB1ATtvIxJlqFaGLp6oVeU/Querido-Di%C3%A1rio---OK?type=design&mode=design&t=bTIrWQ7y50uq6tc9-1

A partir da tela em baixa fidelidade, fiz algumas alterações, dentre elas: aplicação de sistema de grid de 8 pt e 12 colunas. Padronização da tipografia. Troca da imagem da seção Hero. Troca dos cards para as outras páginas.

Em breve, adicionarei as outras telas.

[ogecece]

@Fedra92 ótimo! Vou compartilhar contigo as interfaces do MVP 1 (lançamento do site) e do MVP 2 (adição do QD-Edu e blog). Assim vai ficar mais fácil pra tu construir as interfaces com os componentes que já existem.

Sobre a tela atual, prefere feedbacks agora ou ao final quando tivermos todas prontas?

[Fedra92]

Olá! Pode passar o feedback agora mesmo. Daí já tenho em mente para as próximas telas.

[ogecece]

Beleza!

1. Sobre a imagem, não usamos imagens reais salvo em eventos ou notícias. Pode colocar uma ilustração 2D que tenha um contexto acadêmico, talvez envolvendo dados, não necessariamente usando pessoas, mas não tem problema usar também. Robôs e aranhas também tá valendo (mas é muito difícil encontrar ilustra pronta nesse contexto).
2. Achei os espaçamentos entre linhas ficaram meio irregulares em comparação com a seção hero do QD-Edu. Mas acho que agora que tas com as interfaces que já estavam prontas vai ficar melhor pra manter essa consistência.
3. Hoje temos dois estilos de cards prontos, o quadradão e o com a ponta inferior direita bem arredondada. Tas propondo a criação de um novo ou prefere reutilizar um deles?

[ogecece]

3. Como fazer parte

Recolhido	Expandido

Adicionei aqui os desenhos que cê fez @tigreped

[Fedra92]

Beleza!

1. Sobre a imagem, não usamos imagens reais salvo em eventos ou notícias. Pode colocar uma ilustração 2D que tenha um contexto acadêmico, talvez envolvendo dados, não necessariamente usando pessoas, mas não tem problema usar também. Robôs e aranhas também tá valendo (mas é muito difícil encontrar ilustra pronta nesse contexto).
2. Achei os espaçamentos entre linhas ficaram meio irregulares em comparação com a seção hero do QD-Edu. Mas acho que agora que tas com as interfaces que já estavam prontas vai ficar melhor pra manter essa consistência.
3. Hoje temos dois estilos de cards prontos, o quadradão e o com a ponta inferior direita bem arredondada. Tas propondo a criação de um novo ou prefere reutilizar um deles?

Ok! Estarei trabalhando nessas alterações.

[kaiocp]

pessoal, vou aguardar as alterações da @Fedra92 pra poder subir novas alterações no codebase então. combinado?

[Fedra92]

Olá, segue a página home atualizada seguindo as interfaces dos MVPs 1 e 2. Tentarei enviar as demais páginas ainda hoje.

https://www.figma.com/file/PB1ATtvIxJlqFaGLp6oVeU/Querido-Di%C3%A1rio---OK?type=design&node-id=0%3A1&mode=design&t=gQgEe33kuZYOo5Pd-1

[ogecece]

@Fedra92 mil desculpas pela demora. Fiz comentários lá no protótipo, beleza? Só não comentei a "como fazer parte"

[raissamsoliveira]

@ogecece uma dúvida sobre o seguimento dessa atividade (já que eu e o Marllon ficamos responsáveis por ela):

1. O que falta dar seguimento? Eu vi que tem um protótipo já no Figma, seria o caso de ajustarmos o que já existe e subir junto as atualizações mais recentes?
2. Outro ponto: o QD já foi bem modificado desde a última atualização dessa issue. Seria interessante dar um merge pra atualizar a branch dev-qd-uni, ou você acredita ser melhor trabalhar com o fork?

[ogecece]

Massa, bora lá. Primeiro, vale mencionar que os desenhos iniciais estão pensados mais na perspectiva de conteúdo e menos na de forma. Então, se quiserem propôr alguma mudança nos desenhos (como já foi feito, mas podem radicalizar se acharem melhor), fiquem à vontade.

Mas já seriam necessárias algumas mudanças quanto a ideia dos ciclos. Não tá fazendo mais tanto sentido essa quebra em ciclo porque os calendários acadêmicos são muito diferentes e a não conseguimos mais colocar tudo na mesma caixa.

1. Aqui falta o "como fazer parte", alterar a ideia de "histórico dos ciclos" e criar a página de cada "participação" no programa (vou explicar).

   1. Existem algumas formas de fazer parte do programa, o que seria legal ter na página de "como fazer parte"? Explicar cada modalidade e direcionar a pessoa para o meio de contato adequado:

      1. Parceria de apoio - assim como a PCDaS fez durante os dois primeiros anos do projeto, se alguma organização desejar patrocinar o projeto ou participar da construção dele de alguma forma, podem entrar em contato por email;
      2. Acompanhamento - aqui estamos pensando no acompanhamento de um grupo ou um indivíduo ao longo de meses, isso seria principalmente por meio de direcionamentos, reuniões síncronas, divulgação de resultados. Quem quiser fazer parte pode fazer parte como grupo de pesquisa, como pessoa orientadora que quer desenvolver projeto mas tem pouco tempo e poderia orientar outras pessoas ou pessoa orientanda que está procurando alguém que possa orientar, e isso seria feito por meio de um formulário;
      3. Direcionamento e divulgação - aqui é similar ao acompanhamento mas sem o acompanhamento (heheh), seriam basicamente os direcionamentos iniciais, tirar dúvidas ao longo do desenvolvimento e apoio na divulgação de resultados final e as trocas poderiam ser todas assíncronas pelo Discord mesmo.

   2. A página do "histórico dos ciclos" poderia ficar mais na linha de "histórico do programa" e aqui a gente teria contexto sobre cada "participação" no programa:

      1. Imagino que deveria ter no destaque quais "apoios", "acompanhamentos" e "direcionamentos" estão vigentes (podendo clicar em qualquer um e abrir sua própria página) e quais já foram realizados.
      2. Pra cada apoio individual espaço para logo da organização, duração do apoio, texto descrevendo o apoio e imagens (se houver).
      3. Pros acompanhamentos (e direcionamentos poderia ser similar), espaço para apresentarmos quem participou (podem ser pessoas, grupo de pesquisa, etc. então seria bom ter espaço para logo de um grupo também), duração do projeto, objetivo do projeto e seus resultados

2. Nossa, sim. Atualizei a dev-qd-uni com rebase aqui. Tá atualizada e funcionando :100:. Podem usá-la como alvo dos PRs. Mas nesse primeiro momento vamos focar apenas nos desenhos, né?

[raissamsoliveira]

Perfeito! Irei começar a trabalhar com esses direcionamentos, e trago em breve um protótipo.

[kaiocp]

pessoal, mil perdões pela demora em dar continuidade a essa issue 😭

qual a ideia aqui agora? teremos um novo protótipo feito pela @raissamsoliveira e o Marllon vai codar? posso me dividir junto com ele pra puxar algumas tarefas e/ou a gente pode ir fazendo code reviews um do outro também.

a discussão sobre o que deve ser feito aqui rolou em algum canal do discord?

[ogecece]

Oi, @kaiocp ! A ideia seria eles finalizarem o protótipo e a implementação ainda não tá definida, podemos discutir o que seria melhor.

a discussão sobre o que deve ser feito aqui rolou em algum canal do discord?

Rolou no canal que estamos conduzindo a trilha de pessoas que querem se tornar mantenedoras do frontend.

[kaiocp]

A ideia seria eles finalizarem o protótipo e a implementação ainda não tá definida, podemos discutir o que seria melhor

beleee, então a ideia é só dar continuidade ao desenvolvimento do qd nas universidades quando o novo protótipo estiver pronto, certo?

[ogecece]

Isso mesmo!

[m4rllon]

Olá gente, bom dia. Estou desenvolvendo o protótipo da tela "Como fazer parte" e gostaria de saber se tem algum link ou documento com todas essas informações para que eu possa implementar no protótipo.

[ogecece]

@m4rllon você fala as strings de preenchimento? Ainda não tá escrito, mas posso desenrolar isso pra vocês esses até sábado. Por enquanto podem usar lorem ipsum ou as descrições que usei acima. Tudo bem?