Sugestão de incremento para #31

Mudar a animação atual, no texto desenvolvendo [com/para] a comunidade para algo no estilo desenvolvendo para [a comunidade/a UFCG/os estudantes/você].

O vue tem uma coleção interessante de transição com vários hooks pra adicionar animações. Uma ideia de animação já sugerida no gitter foi essa: https://greensock.com/forums/topic/11361-typewriter-effect/

EDIT: Já linkaram uma versão vue da animação (galera do gitter é top, não fique de fora) https://cngu.github.io/vue-typer/

Descreva o bug
A listas no site estão com uma padding-left, que os estão descentralizando

Comportamento desejado
Deve ser removido essa margin a fim de centralizar a lista horizontalmente a lista com a página

Capturas de tela

i

Configurar repositório para uma WebSite em Vue.js.

Poderia ser feito uma linha interconectando as sessões da página, coisa que já foi inclusive proposta em umas das primeiras discussões sobre o design da página, utilizando essa ferramenta.

É mais uma sugestão/discussão do que uma issue de fato, quero saber exatamente a opinião de cada um.

Se a ideia é fazer um portal em vue, deve se levar em consideração que o conteudo do site só é criado depois que o javascript é lido. Portanto, torna-se necessário a utilização de algum plugin, ferramenta ou implementação que realize o SSR da página. Como o projeto foi começado com VueJS puro, não sei como faz. Mas como o projeto ainda está muito no início, ainda dá tempo de transferir tudo que já foi feito e utilizar NuxtJS ou Quazar que são dois frameworks que rodam em cima do VueJS e fazem todo esse trabalho de renderização servidor da página. Do contrario, se isso não for feito, a página não existirá pro google e não terá nenhum conteudo seu indexado/rankeado além de que irá ter problemas de fazer marketing de conteudo da página,já que a indexação não é feita.

Os tópicos listados em "Sobre nós" na página principal não estão centralizados.

Precisamos escolher a ferramenta de testes que vamos usar.

Adicionar esse plugin https://github.com/markedjs/marked

Primeira sessão da página home, Introducao.vue.

Nessa sessão deve possuir o logo do OpenDevUFCG junto com seu nome e algum subtítulo

Descrição da melhoria:
Melhorar responsividade para seções de "Visão" e "Sobre nós".

Necessidade da melhoria:
Existe espaço que não é preenchido e com isso, parece que algo está para ser carregado.

Como ela pode ser implementada:
Usando css grid e flex em conjunto com propriedades de alinhamento.

Imagens:

Que páginas vamos ter no site? Penso em ter as seguintes:

• Página principal: Uma landing page de apresentação pra nossa organização
• Time: Uma página mostrando nosso time principal
• Projetos/Colmeias: Uma página mostrando nossos projetos e que possa redirecionar pra eles. Se ficar pequeno, pode colocar na página principal mesmo.

Esse componente deve falar um pouco sobre nossa visão e missão

Visao.vue

Descreva o bug
Quando o texto com efeito de digitar da primeira sessão passa do tamanho da tela, ele quebra de maneira estranha

Comportamento desejado
Ele quebrasse a frase normalmente, colocando a última palavra embaixo, ou que a letra fosse menor para não precisar quebrar.

Capturas de tela

Contexto adicional
Talvez seja o display aplicado no css desse texto

Descreva o bug
Cards não estão responsivos em algumas telas, tanto em menores quanto grandes.

Reprodução do bug
Passos para reproduzir o comportamento indesejado:

1. No seu browser visite o site, e no chrome dev tools mude o dispositivo
2. Teste a responsividade mudando o tamanho da tela

Comportamento desejado
Que os cards não diminuíssem tanto seus tamanhos em telas menores, deixando o texto agradável de ler. E que a listagem pudesse se quebrar de maneira apropriada dependendo do tamanho da tela

Capturas de tela

Contexto adicional
Apenas com propriedades de flexbox podemos resolver isso.

Nossa pagina principal será estilo Landing Page, irá ter seções que fala sobre tópicos importantes da organização, seguindo um fluxo agradável e entendível. Para cada seção teremos mini-textinhos informativos e atrativos.

Seções definidas até agora(Segue essa ordem):

• Título
  • Nome da Organização, mais o logo, mais algum subtítulo.
• O que é
  • O que é o OpenDevUFCG, adicionar breves informações sobre o Open Source
• Nossa visão/Nossa missão/Nosso objetivo
• Como você pode contribuir
• Mostrar os projetos atuais brevemente
• Mostrar o time

Inspirações:

https://opensource.google.com/
https://open.rocket.chat
https://opensource.globo.com

Adicionar configurações de lint pro projeto.

Na sessão de Projetos, os cards estão sem sombra por conta do fundo, seria bom implementar uma sombra minuciosa.

Cores pre definidas: http://paletton.com/#uid=33u0u0kiCFn8GVde7NVmtwSqXtg

Somos um grupo open source, e não faria muito sentido manter uma seção de equipe, afinal, equipe são todos os contribuidores. Dessa forma, creio fazer sentido adicionar uma breve descrição explicando o motivo daquelas pessoas estarem ali (o core)

É necessário atualizar o arquivo Projetos.vue para que redirecione o endereço do Roadmap para "roadmap.opendevufcg.org".

Atualmente, is projetos sāo exibidos em um caroussel, mas como ainda temos poucos, a visualizaçāo seria melhor em um grid.

Creio que os cards em "faça sua contribuição" deveriam estar com um design um pouco diferente:

• Ao invés de deixar um retângulo vazio de outra cor, seria interessante adicionar alguma imagem de referência ao github e ao gitter, maybe o octocat e o ícone do gitter
• Ao invés de adicionar um link "Acessar ->" no canto inferior direito do componente, creio que valha mais a pena colocar uma ação de click no card em si, ou na imagem/título/descrição do card

Descrição da melhoria:
Tava pensando em criar algum componente que ajudasse os MUITO iniciantes
a contribuírem. Colocar uma especie de step-by-step que ajudasse a filtrar os
projetos que mais se encaixasse com o perfil dele.

Necessidade da melhoria:
Para um iniciante contribuir ele terá que conhecer cada um dos projetos e pode
ser que não estimule muito o iniciante a ir ler a descrição e as tecnologias de
cada projeto.

Como ela pode ser implementada:
Pensei em criar um especie de teste que o usuário entra com características dele
que ajude a filtrar o melhor projeto para ele. Por exemplo: eu sei programar web,
gosto de front end, tenho facilidade com vue; resultado: Portal. Estou avançado
no curso, não gosto de web, sei markdown; resultado: Tamburetei.

Contexto adicional:
Também seria possível extrair métricas do perfil das pessoas que se engajam
nos nossos projetos para tentar facilitar a contribuição.

Adicionar o código do contador até o evento. Talvez seja necessário lidar com multithreading.

Descrição da melhoria:
Melhorar o efeito de hover dos cards da comunidade e dos projetos

Necessidade da melhoria:
Melhorar visualmente o site

Como ela pode ser implementada:
Alterar o atributo transform do hover dos cards, além de adicionar um transition para deixar o efeito mais suave

Estamos movendo o gitter para o discord, então é necessário adicionar na interface o card do discord e que seja semelhante ao do gitter.

Após isso, pode remover o card do gitter, pois não utilizaremos mais esse chat.

Descrição da melhoria:
Recebi um email do google console quanto ao uso mobile do site:

Temos que validar e melhorar a usabilidade do nosso site!

Como ela pode ser implementada:
Temos que padronizar melhor as fontes no css da página e investigar más práticas de responsividade.

Meu nome tá José Rean 😠 KKKKKK

https://github.com/OpenDevUFCG/OpenDevUFCG/blob/2c44a31b43fdedae347702801f2f035de96062fb/components/home/sessoes/equipe/Equipe.vue#L42

Descrição da melhoria:
Criar um rodapé no fim da página que contenha as redes sociais e outras informações que julgarem necessárias;

Necessidade da melhoria:
Para dispor informações importantes, como redes sociais, de maneira resumida e fácil.

Como ela pode ser implementada:
É preciso criar um componente do rodapé e depois implementar para que ele apareça em todas as rotas da aplicação, sempre sendo o último da página.

Talvez a solução envolva o Routing.

Imagens:
Exemplos

Eu tava vendo a possibilidade de trabalhar com a issue #65, e acabei pensando em coisas que poderíamos adicionar para encher o conteúdo do nosso rodapé.

Como @thayannevls sugeriu, temos esses dois modelos para nos basear:

O primeiro seria só com as redes sociais que nós temos (Twitter e Instagram). Mas eu tava achando pouca coisa e queria saber o que vocês acham de usar o segundo modelo e, caso considerem uma boa ideia, queria que sugerissem o que poderíamos adicionar para popular a parte central do rodapé.

Minhas sugestões:

• Onde tem COMPANY NAME, colocaríamos OPENDEV UFCG, e abaixo alguma descrição, que pode ser sugerida aqui nessa issue.
• Além das redes sociais, que ficariam na parte de cima, acho que colocar nossos projetos onde seria a parte Products no segundo modelo.
• Quando definirmos onde será o nosso blog, poderíamos adicionar nas redes sociais acima e também colocar nessa parte de Useful Links alguns dos posts, já para incentivá-los à contribuição.

E aí, o que acham?

Configurar o travis tanto para testes como para deploy no github pages.

Descrição da melhoria:
Modificar seção de equipe para ser círculos invés de hexágonos.

Necessidade da melhoria:
Hexágonos não fazem mais parte da nossa logo.

Como ela pode ser implementada:
Provavelmente tirando a prop clip-path e colocando um border-radius

Contexto adicional:
Em breve vai ter mais informações sobre nosso core team nessa seção

É bom padronizamos o estilo de títulos e subtítulos para página principal e colocamos em layouts/default.vue.

Padronizar:

• Cor
• Tamanho, para telas grandes e pequenas
• Fonte
• Espaçamento entre letras

É o Equipe.vue, deve mostrar fotos da equipe

Na sessão Introdução existe os botões "Gitter" e "Github", não precisamos mais desses botões, então seria só remove-los.

Descrição da melhoria:
Queremos mudar a tela inicial, aceitamos novas ideias e sugestões. Elas devem conter a nova logo!

Imagens:
Nova logo:

Um usuário que não é de computação acessou nosso site e fez suas críticas e sugestões. Avaliem o que faz sentido e o que não faz, podem discutir também. O curso dele possui cadeiras de design e ele tá terminando, então leve isso em consideração

O que ele escreveu:

Logo

• Aprendi na cadeira de interface que esse espaço em branco é espaço inútil e não muito agradável. Dava pre centralizar mais o "OpenDevUfcg" e diminuir um pouquinho o símbolo.
• A logo ta muito bonitinha, de verdade. Mas se você olhar pro símbolo, não tem nada a ver com o intuito da organização que é desenvolvimento aberto e compartilhado.
• Sugestão rápida que passou pela cabeça: Porque não o nome saindo de uma porta aberta ou então em cima de um livro aberto?
• No caso do livro aberto, os hexágonos cairiam do nome pro livro. Como se fossem partículas.

• Achei muito foda a animação do "desenvolvendo para...". Acho que poderia demorar a começar, já que demora um pouco pro usuário ver a logo e ler a frase.

Visão

• Poderia está mais em cima e com um hyperlink pra descer a pagina

• entendi o que quiseram fazer com os topicos, mas está estranho, acho que em cascata ficaria mais legal, ou em cascata com animação, aparecendo os tópicos sendo digitados e depois parava, não ficava em loop igual o da página de introdução.

Seria massa ter uma setinha pra baixo, em cada seção. Tá parecendo que a pessoa tá lendo um pdf

Sobre nós

Os textos "Sobre nós" estão mt tops, ta bem fofis e descontraido. Só daria um "Justificar" na formatação do texto kkkk

Nossos projetos

• Poderia no hover dar zoom no projeto e diminuir os outros. Ou fazer que nem a animação do "Quem somos"
• Laguinho - Descrição não tá dando pra entender o que é. Parece com o glossário, mas lá tá explicando direitinho

Descrição da melhoria:
Adotar boas práticas de SEO para o portal.

Necessidade da melhoria:
Precisamos aparacer no topo das pesquisas por sermos o portal da opendev, e também melhorar o que o google indexa na pesquisa.

Como ela pode ser implementada:
Precisamos dar uma estudada de quais boas práticas podemos adotar

Tasks

Irei adicionando mais conforme sugestões ou o que eu for estudando

• Adicionar tag de descrição do site. É o que aparece na descrição da página do google Feito

• ...

Descrição da melhoria:
Seria legal a nossa scrollbar ser customizada, adicionando nossa cor azul e talvez mudando a sua espessura e tamanho.

Como ela pode ser implementada:
Css! :D https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css

Seria legal colocar um espaçamento inferior na ultima sessão, pois fica meio estranho do jeito que tá.

Colocar no favicon logo da organização

Adicionar estrutura básica do html da página do evento. Esse html deve conter espaço para a adição de uma imagem e de um contador, um ao lado do outro.

Descreva a feature em detalhes
Adicionar um ícone a aba do navegador, para melhor identificar a aplicação

Necessidade da feature:
Quando o usuário estiver com outras abas abertas, ele poderá facilmente identificar que se trata da página do OpenDevUFCG.

Como ela pode ser implementada:
Há uma tag do html que já implementa isso:
<link rel="icon" href="caminho_do_icone">

É necessário criar um markdown definindo como é possível contribuir para esse site. Seria bom colocar especificar política de branchs, style guides e como proceder caso ocorra alguma dúvida.

Este componente é o Apresentacao.vue nele deve informar quem é a Organização e educar brevemente o usuário sobre o Open Source.

Criar o CONTRIBUTING.md do projeto com informações e tutoriais úteis pro contribuidor.

Descrição da melhoria:
Seria interessante ter uma divulgação do blog do OpenDevUFCG na tela inicial do portal.

Necessidade da melhoria:
É importante divulgar todos os nossos projetos 😜

Como ela pode ser implementada:
Pode ser inserida uma seção no site, talvez após a parte de "Nossos projetos". O ideal seria ter cards para as publicações, mostrando ao menos o título, autor e algumas tags.

Descrição da melhoria:
Seria interessante ter a novo logo da organização

Necessidade da melhoria:
Pode ser que novatos não entendam que somos a mesma organização visto que o design
está diferente.

Como ela pode ser implementada:
Trocando o arquivo da logo antigo pela nova

É o Projetos.vue