Ideias para página de "Em construção"

[luantoningalvan]

Gostaria de usar essa issue para propor a discussão acerca da página "Em construção"

Eu tive uma ideia interessante.
Uma ilustração Parallax com pessoas trabalhando (desenhos) e na cara de cada pessoa ficaria o avatar de quem participa. Ao passar o mouse pelo avatar pausa a animação e aparece o nome com o link do github.

Isso ficaria ocupando 1/3 da tela na parte de baixo e o restante acima um texto com os dizeres "Em construção" e algum subtítulo

Exemplo de um site usando um fundo que eu imagino:
https://www.drugtreatment.com/

[rodrigoKulb]

@luantoningalvan acho bem legal, uma outra ideia é colocar um campo para cadastrar na newsletter do @filipedeschamps nessa página avisando que receberá um aviso assim que o site subir!

[filipedeschamps]

Show de bola @luantoningalvan ! Permissão: alterar o título da sua issue para Ideias para página de "Em construção" pois gostaria de fazer referência dela na milestone 👍

[luantoningalvan]

Poderíamos usar imagens do freepik https://www.freepik.com/search?dates=any&format=search&page=1&query=builders&sort=popular&type=vector

depois bastaria registrar as coordenadas de cada imagem para inserir o rosto e exibir-las de forma randômica

[filipedeschamps]

@luantoningalvan que rápido 😂 🤝 👍

Minha sugestão: uma página simples, com um backgroud de blueprint pattern e em cima escrito TabNews e que estamos em construção. Abaixo colocar as fotos e elas serem organizadas usando algo como aquele estilo de organizar as fotos do Pinterest

[rodrigoKulb]

Nossa bem legal, a ideia é ficar alterando as imagens de construção com os rostos da galera?

[rodrigoKulb]

Acho legal a ideia de colocar números e etapas concluídas:

[filipedeschamps]

@rodrigoKulb show!!!

Sobre as stats, como essa página vai ter um tempo curto de vida, não sei se para ela seria interessante, mas lembra que num vídeo comentei que gostaria de fazer uma página /sobre ou /stats pra mostrar as estatísticas do site e enternizar lá quem contribuiu? Aí seria massa 👍

Já essa de "Em construção" vai ficar no ar só até a Milestone 1 👍 [edit] Milestone 2

[filipedeschamps]

Outra ideia que tive: para conseguir caber todo mundo num mesmo print histórico, aproveitar a ideia de extrair só o rosto das pessoas (em formato de bolinha) e fazer todos esses rostos preencherem a página. A gente pode preencher de várias formas:

1. Pattern circular do centro para fora
2. Simulação física, das bolinhas caindo para a base da página
3. Um pattern randômico, mas que cada bolinha/rosto seja um node elas ficam conectadas entre sí.

Em resumo: fazer um formato que, em apenas uma tela, apareça todo mundo.

[thenriquedb]

Outra ideia que tive: para conseguir caber todo mundo num mesmo print histórico, aproveitar a ideia de extrair só o rosto das pessoas (em formato de bolinha) e fazer todos esses rostos preencherem a página. A gente pode preencher de várias formas:

1. Pattern circular do centro para fora
2. Simulação física, das bolinhas caindo para a base da página
3. Um pattern randômico, mas que cada bolinha/rosto seja um node elas ficam conectadas entre sí.

Em resumo: fazer um formato que, em apenas uma tela, apareça todo mundo.

Show @filipedeschamps! Criei um protótipo bem simples utilizando o Figma utilizando com base na sua ideia. Você tinha imaginado algo mais ou menos assim?

[filipedeschamps]

Ahhhh que sensacional @thenriquedb isso aí 😍

[danwhat]

• Acho legal ter o mesmo tamanho para cada participante e distribuir de forma aleatória o posicionamento de cada um a cada F5.
• Ao invés de guardamos a informação de cada colaborador, poderíamos fazer um script para buscar pelo nome de usuário github, assim mesmo se você mudar a imagem a pagina se atualizaria.
• E por mais que seja uma pagina temporária, que tal mantermos ela em um domínio separado? Algo como /fundacao

Rabisquei aqui a minha ideia e tem mais coisas no figma.
https://www.figma.com/file/AFoDdH5EtySP0mk8LLTnDc/Untitled?node-id=0%3A1

• Podemos alterar o tamanho final de cada card dependendo da quantidade de pessoas que forem participar.
• Pensei rápido no Header, mas também podemos mudar o texto e adicionar o input como o @rodrigoKulb sugeriu.

Espero que tenha conseguido condensar o meu pensamento pois estou no meio da live do Filipe enquanto escrevo 🤣

[thenriquedb]

@danwhat Show! O que acha em utilizar grafo com os avatares conectados como o Filipe tinha sugerido ali em cima. Dessa forma ficaria massa que daria pra adicionar muita gente em uma mesma tela.

[danwhat]

Show! O que acha em utilizar grafo com os avatares conectados como o Filipe tinha sugerido ali em cima. Dessa forma ficaria massa que daria pra adicionar muita gente em uma mesma tela.

• Precisamos saber se tem uma lib que entregue isso para a gente, pois fazer do zero para algo temporário ficaria bem desgastante. A não ser que a pagina permanecer em algum outro lugar como sugeri, ai sim eu me empolgaria de fazer ou de contribuir para quem fosse criar.
• Outro ponto também é sobre a necessidade do scroll já que serão uns 170 nós.

Coloquei apenas dois pontos que precisamos nos atentar, mas eu super curti a ideia @thenriquedb.

[Davidsouza20]

Uma sugestão simples, mas que tem um visual bacana seria essa que tirei do site laracasts

Fica como idéia é bem simples, mas tem um visual minimalista e elegante.

[aismaniotto]

Eu gosto da idéia de que a página fique em algum outro lugar, como numa página "Sobre" ou algo assim depois da publicação.
Acho que a ideia de ficar tudo numa página só seria por causa do print de registro, mas mesmo com o scroll, tem algumas configurações que da para programar para o "imprimir página", que substituiria o printscreen e mostraria todos. Um registro tão bom quanto

[danwhat]

Uma sugestão simples, mas que tem um visual bacana seria essa que tirei do site laracasts

É outra ideia bacana, e no mouseover poderia mostrar o @ de cada um.
Só me preocupo se caberia todo mundo de maneira satisfatória.

---

Relendo a thread eu entendi sobre a sugestão de "apareça todo mundo em apenas uma tela".
Eu acho complicado não usamos scroll na página, pois são 170 pessoas (e aumentando). Mas se for algo bem minimalista como o @Davidsouza20 sugeriu pode ficar legal.

[danwhat]

Como acabamos de sair da Live do Filipe e estamos todos empolgados, acredito que ainda vai aparecer novas ideias.
Podemos debater sobre as diferentes propostas e fazermos uma votação com as melhores. Assim evita de a gente ficar debatendo eternamente sem chegar a uma conclusão.

@filipedeschamps você esta dando muita liberdade para a gente e isso é muito bom, mas ao mesmo tempo você que dá a palavra final. Como inda não me acostumei com o fluxo do github, sugeri a votação. Se em algum momento começar a sair do escopo que você está planejando é só falar.

[filipedeschamps]

@filipedeschamps você esta dando muita liberdade para a gente e isso é muito bom, mas ao mesmo tempo você que dá a palavra final. Como inda não me acostumei com o fluxo do github, sugeri a votação. Se em algum momento começar a sair do escopo que você está planejando é só falar.

Super tranquilo @danwhat ta sendo uma experiência SENSACIONAL toda essa energia vindo de vocês e pode deixar que vamos afunilar numa decisão. E toda ideia tem o balanço da execução, mas agora que definimos um primeiro prazo para a Milestone 0, fica melhor saber balancear essas coisas.

[filipedeschamps]

E juntando a sugestão de layout do @Davidsouza20 com a do @aismaniotto sobre a página permanecer para sempre em algum lugar, acho que estamos nos aproximando de algo executável e permanente.

E temos o script do @thenriquedb (com a lapidação do @francopan) proposto nesse PR #26 então fica tudo algo muito gerenciável no ponto de atualizar de última hora antes do print final.

Sério, vocês são a melhor comunidade com quem eu poderia trabalhar, eu fico sinceramente emocionado 🤝

[JuniorUbarana]

Eu gosto da idéia de que a página fique em algum outro lugar, como numa página "Sobre" ou algo assim depois da publicação.
Acho que a ideia de ficar tudo numa página só seria por causa do print de registro, mas mesmo com o scroll, tem algumas configurações que da para programar para o "imprimir página", que substituiria o printscreen e mostraria todos. Um registro tão bom quanto

Isso... Poderia até ficar como um easter egg do TabNews... 😄 😄

[francopan]

Uma sugestão simples, mas que tem um visual bacana seria essa que tirei do site laracasts

Fica como idéia é bem simples, mas tem um visual minimalista e elegante.

Eu curto mais essa pois todos ficam com igual protagonismo. Acho legal a ideia dos que tem animações de grafos e coisas do tipo, mas pra hora do "print" uns ficam grande e outros pequenos. Se isso for de acordo com o número de interações em issues e commits, até é aceitável, mas acho que a contribuição de todos, por menor que seja é importante.

[fernandofreamunde]

Gosto muito desta imagem, passa a mensagem e tem espaço para para adicionar bastantes avatars, talvez os pusesse com o mesmo tamanho em vez de aumentar os avatars a medida vao ficando mais longe do centro... contudo, esse efeito fica muito bom também :)

[brunofamiliar]

Uma sugestão simples, mas que tem um visual bacana seria essa que tirei do site laracasts

Fica como idéia é bem simples, mas tem um visual minimalista e elegante.

Eu curto mais essa pois todos ficam com igual protagonismo. Acho legal a ideia dos que tem animações de grafos e coisas do tipo, mas pra hora do "print" uns ficam grande e outros pequenos. Se isso for de acordo com o número de interações em issues e commits, até é aceitável, mas acho que a contribuição de todos, por menor que seja é importante.

As vezes seria interessante ter isso na tela inicial, e criar uma animação pra ir trocando aleatoriamente cada um dos contribuidores. Ai quando clicar no botão roxo por exemplo, abrir a lista completa com todos.

[fernandofreamunde]

As vezes seria interessante ter isso na tela inicial, e criar uma animação pra ir trocando aleatoriamente cada um dos contribuidores. Ai quando clicar no botão roxo por exemplo, abrir a lista completa com todos.

Boa idea, acho que uma coisa destas no rodape da homepage, ou da pagina about

[thenriquedb]

As vezes seria interessante ter isso na tela inicial, e criar uma animação pra ir trocando aleatoriamente cada um dos contribuidores. Ai quando clicar no botão roxo por exemplo, abrir a lista completa com todos.

Esse botão roxo não é fixo do layout e sim um card com detalhes do usuário que é mostrado quando está com o mouse sob o avatar. Caso queira conferir diretamente na pagína mecionado pelo @Davidsouza20

[brunofamiliar]

Boa noite pessoal, gostaria de deixar aqui minha contribuição: https://www.figma.com/file/EyrhPbrkmMVE4J8XqLPnMf/Tabnew-POC?node-id=0%3A1

Não sou expert em design, então me desculpem se feri alguma boa prática de design ux/ui. A ideia, é que os contribuidores sejam exibidos de forma dinâmica, sendo alterados a cada tempo x. E se clicar em ver todos, mostra a lista com todos os contribuintes.

[brunodmsi]

Olá, boa noite. Gostaria de deixar uma contribuição também, usei como base o site de projetos Open Source da Google.

Quando tiver a ação do mouseover sobre a imagem de um contribuidor, poderia aparecer o comentário feito pelo dev assim como no site do Laracasts que foi enviado pelo @Davidsouza20 , só que o comentário do dev funcionaria da mesma forma quando se faz um mouseover no site da Google linkado acima.

Essa ideia une um pouco da ideia do @thenriquedb e do @fernandofreamunde e aproveitando pra comentar um pouco sobre o ponto do @danwhat eu acredito que uma tela (ou seção) de contribuidores poderia ser de bom agrado para permanecer no site, exaltando sempre os desenvolvedores que contribuirem de alguma forma ao projeto, e também ao apertar o botão de "VER TODOS CONTRIBUIDORES" poderia abrir um modal com a lista completa de contribuidores (o mesmo que no Laracasts)

A imagem não ficou ótima, mas é apenas um conceito. Copiei também o texto do @brunofamiliar porque achei bom hehe

edit: adicionando link pro figma

[brunofamiliar]

Olá, boa noite. Gostaria de deixar uma contribuição também, usei como base o site de projetos Open Source da Google.

Quando tiver a ação do mouseover sobre a imagem de um contribuidor, poderia aparecer o comentário feito pelo dev assim como no site do Laracasts que foi enviado pelo @Davidsouza20 , só que o comentário do dev funcionaria da mesma forma quando se faz um mouseover no site da Google linkado acima.

Essa ideia une um pouco da ideia do @thenriquedb e do @fernandofreamunde e aproveitando pra comentar um pouco sobre o ponto do @danwhat eu acredito que uma tela (ou seção) de contribuidores poderia ser de bom agrado para permanecer no site, exaltando sempre os desenvolvedores que contribuirem de alguma forma ao projeto, e também ao apertar o botão de "VER TODOS CONTRIBUIDORES" poderia abrir um modal com a lista completa de contribuidores (o mesmo que no Laracasts)

A imagem não ficou ótima, mas é apenas um conceito. Copiei também o texto do @brunofamiliar porque achei bom hehe

edit: adicionando link pro figma

Gostei da proposta =) a única coisa que me preocupa é em relação a esse grafo, tipo, na complexidade em construí-lo kk vocês conhecem alguma lib que facilite esse trabalho??

Analisando a minha primeira proposta, vi que pode ter um probleminha em relação à captura de email (devido ao tempo de se implementar, e também devido ao entendimento se seria interessante nesse momento); e outro problema é a quantidade de contribuintes que apareceriam na página incial ( já que a proposta é ele ser dinâmico e o espaço onde coloquei é na lateral). Criei uma outra proposta baseando um pouco na ideia dos grafos propostos por @brunodmsi e @thenriquedb. Link para visualização: https://www.figma.com/file/EyrhPbrkmMVE4J8XqLPnMf/Tabnew-POC?node-id=0%3A1

A ideia é que no fundo seja exibido os contribuidores, e vai "caminhando" para a lateral, permitindo assim exibir uma quantidade maior de pessoas.

[felipe-ds-lima]

Olá, boa noite. Gostaria de deixar uma contribuição também, usei como base o site de projetos Open Source da Google.

Quando tiver a ação do mouseover sobre a imagem de um contribuidor, poderia aparecer o comentário feito pelo dev assim como no site do Laracasts que foi enviado pelo @Davidsouza20 , só que o comentário do dev funcionaria da mesma forma quando se faz um mouseover no site da Google linkado acima.

Essa ideia une um pouco da ideia do @thenriquedb e do @fernandofreamunde e aproveitando pra comentar um pouco sobre o ponto do @danwhat eu acredito que uma tela (ou seção) de contribuidores poderia ser de bom agrado para permanecer no site, exaltando sempre os desenvolvedores que contribuirem de alguma forma ao projeto, e também ao apertar o botão de "VER TODOS CONTRIBUIDORES" poderia abrir um modal com a lista completa de contribuidores (o mesmo que no Laracasts)

A imagem não ficou ótima, mas é apenas um conceito. Copiei também o texto do @brunofamiliar porque achei bom hehe

edit: adicionando link pro figma

Já fiz esse tipo de coisa antes, me ofereço para fazer a tela dessa forma

[carlosrocha-dev]

Bom dia, Pessoal, como estão?

Estava pensando aqui, e se a página de em construção for algo na linha desde script de js (https://codepen.io/laradurrant/pen/mdyLmrW) substituindo os pontos pelos avatares e mantendo o logo centralizado do TabNews.

Seria algo semelhante a proposta do @thenriquedb, que achei bem bacana.

Com esse movimento espiral seria posível ver aleatoriamete diversos menbros na tela.

O que acham?

[update] poderiamos usar a api do github para integrar os avatares no script

[fernandofreamunde]

Eu gosto muito da ideia do @brunofamiliar porque trás um call to action para os possíveis interessados passarem um email. Da para vermos e quantificar o interesse no projecto. :)

[regiskensy]

Gosto da ideia de aparecer todos os membros (ou pelo menos a maior parte), sendo as fotos com tamanhos variados. Para isso poderia haver um algorítmo que sorteasse quais membros serão exibidos a cada refresh, bem como os tamanhos das respectivas fotos. Poderia haver uma "query string" na URI para indicar o membro que deverá obrigatoriamente ser exibido em tamanho grande, assim cada pessoa pode acessar a página e dar um print com seu avatar em destaque. Ex.: tabnews.com.br?spotlight=regiskensy

[rodrigoKulb]

Pensando em um formato responsivo a solução de listagem acaba sendo a mais simples de adaptar.
Gostei muito da opção sugerida pelo @brunofamiliar simples e intuitiva.
Sobre a "paginação" para exibir todos os membros poderia ser randômica e animada alterando os rostos a cada 5 segundos.

[rodrigoKulb]

Fiz uma versão do layout sugerido pelo @brunofamiliar .
PS: Também não sou expert em design, então me desculpem se feri alguma boa prática de design ux/ui.

https://www.figma.com/file/tawgMewBuDinLogsaAzGMj/Tabnew-v2-POC?node-id=0%3A1

[carlosdavid0]

Opa. Desculpa por fazer close and reopen. Acabei me atrapalhando todo😅😅.

[carlosdavid0]

Eu adorei a ultima versão criada pelo @rodrigoKulb e acredito que seria interessante desenvolver uma "Dark Mode" tanto por acessibilidade quanto por gosto.

[vitoropereira]

Fiz uma versão do layout sugerido pelo @brunofamiliar .
PS: Também não sou expert em design, então me desculpem se feri alguma boa prática de design ux/ui.

https://www.figma.com/file/tawgMewBuDinLogsaAzGMj/Tabnew-v2-POC?node-id=0%3A1

Então perfeita a colocação do nosso amigo @rodrigoKulb. Para responsividade e simplicidade, creio essa ser a melhor opção.

[danwhat]

Fiz uma versão do layout sugerido pelo @brunofamiliar .
PS: Também não sou expert em design, então me desculpem se feri alguma boa prática de design ux/ui.

Meu Deus! Lindimais. E com essa paginação embutida não fica com a sensação sobrecarregada de muitos avatares ao mesmo tempo que não obriga o usuário a passar por varias páginas. Por mim a gente já tem nossa pagina em construção :)

Eu só aumentaria o espaçamento horizontal de todos os itens, está bem colado.

[rhandrade]

E se fizéssemos algo parecido com essa imagem, não porque é da Apple 😄, mas acho que casa bem com que o Filipe estava falando de deixar o máximo possível de pessoas na home.

Assim poderíamos reservar o mínimo do topo para fazer um bloco com a logo do projeto e um campo pra newsletter, e o restante da página ser focado nos avatares de todo mundo que contribui com o projeto, e ao passar o mouse sobre mostra um card contente as informações disponíveis aqui no perfil do Github, assim como o @danwhat sugeriu.

Ai depois do site no ar podemos colocar essa página como sendo um mural dentro da página sobre, como o @aismaniotto sugeriu acima.

[filipedeschamps]

Já falei e vou falar de novo: melhores pessoas estão nesse repositório 🎉

Eu sozinho nunca teria tantas ideias e mesmo que a gente precise afunilar na hora da execução, é muito bom ter um respiro de outros ângulos, seja desde uma página totalmente diferente, ou até pequenos pedaços de ideia.

Essa semana vou fazer minha implementação e vai também seguir na linha do @brunofamiliar misturado com esse PR do @rodrigoKulb e também com esse print do @rhandrade 🤝

Tudo indica que vamos comemorar o fechamento da Milestone 0 ao vivo, nessa sexta-feira, conforme previsto! Vamo pra cima!!!!

[filipedeschamps]

Fala turma, acabei de abrir o PR #45 com minha sugestão, e lá eu levanto 8 pontos explicando essa sugestão 👍

E já adiantando, aqui segue o link para visualizar a página: https://tabnews-git-construction-filipe-filipedeschamps.vercel.app/pocs/construction-02

[vladimiremi]

Caramba! Por que eu não participei disso? Eu não sabia como funcionava essa dinâmica de milestones. Aprendi agora no curso.dev, estou fascinado com tudo isso. Dá pra ver dos primórdios como tudo aconteceu.

[aprendendofelipe]

Caramba! Por que eu não participei disso? Eu não sabia como funcionava essa dinâmica de milestones. Aprendi agora no curso.dev, estou fascinado com tudo isso. Dá pra ver dos primórdios como tudo aconteceu.

É relativo, você pode começar agora e, daqui alguns anos, poder dizer que estava aqui desde os primórdios. 💪

[vladimiremi]

Pois é isso que vou fazer. Não consigo parar de ler o que está nas issues.

[afqbrito]

Tembém estou chegando agora, via 'curso.dev'.

Sensacional poder vislumbrar tudo isso!

Parabéns a toda a galera que tem participado dessa construção!

[grecoww]

Chegando aqui pelo curso.dev, e é como entrar no modo espectador do minecraft e ver a "história sendo feita" 😆