Ajusta UI para criar uma publicação patrocinada #1747
Conversation
Rafatcb
added
front
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Show de bola @Rafatcb! 🎉
Desse jeito nem vai dar tempo de ter o beta só pela API. 😅
Na verdade, como o #1746 já está em produção, já estamos com o beta valendo, mas ainda ninguém aproveitou.
Fiz um comentário, mas já está aprovado.
E o 3c vai ficar para depois, pois está dando mais trabalho do que eu esperava.
Remover os anúncios da listagem foi tranquilo, mas fazer eles aparecerem só na página do usuário está mais complexo do que deveria. Não consegui fazer o validador funcionar ao mesmo tempo com $or: [{ type: 'content' }, { type: 'ad' }] e $or: [{ status: 'draft' }, { status: 'published' }]. Parece ter um bug no Joi.items com mais de um Joi.link, pois só funciona o que eu inserir primeiro.
|
Sensacionaaaal 😍
Fechado! Mas sugiro não removermos publicações antigas. Todas as publicações de anúncios que estão
ahahahah justo! Até diria para segurar o merge da interface, para não precisar ter o trabalho de injetar os TabCash dos conteúdos depois 🤝 |
Uma dúvida @Rafatcb: o checkbox de anúncio vem habilitado por padrão ao entrar no |
Não. Pode verificar em homologação: https://tabnews-git-feat-ui-create-ad-tabnews.vercel.app/publicar Edit: ele está sempre "habilitado", mas não inicia selecionado, como disse o @aprendendofelipe
Ok.
Não vejo problemas em aguardar 👍 Seria o item |
Visível sim, mas não selecionado |
Rafatcb
force-pushed
the
feat/ui-create-ad
branch
from
b0f0fde to
441ace7
Compare
Exato! 🤝 💪 |
|
@Rafatcb o que acha de já aproveitarmos para nesse PR incluir também o banner nas páginas de conteúdo? Usando o mesmo layout. |
|
Posso fazer sim e depois subo o commit e coloco prints de como ficou. Aproveitando, como vamos aguardar a etapa |
This comment was marked as outdated.
This comment was marked as outdated.
|
O que acham de algo assim? Ainda preciso trabalhar para garantir que está exibido corretamente em todas as telas, e também tentar alinhar com o conteúdo (na print, só coloquei um
|
|
Achei ótimo! Então eu tentaria alinhar horizontalmente o anúncio com conteúdo da publicação e também ter o mesmo espaçamento vertcal em cima e em baixo do anúncio (acho que nos prints, o espaçamento em baixo ta alguns pixels menor do que em cima contra o menu) |
|
Não acham melhor inserir o anúncio abaixo do conteúdo principal, antes do primeiro comentário?
Sobre o item 3, pensando em SEO, será que é melhor em alguma fase futura a gente remover o anúncio do HTML estático e buscar pelo client? Uma desvantagem é que o tamanho é variável, então complica lidar com o layout shift. |
|
Bons pontos, @aprendendofelipe . De noite faço o teste e coloco aqui novamente. Sobre o SEO, nas páginas de conteúdo o impacto do layout shift seria menor do que nas listas de conteúdos (mas imagino que pioraria a experiência de links de âncora, com
|
|
@aprendendofelipe excelentes pontos e concordo 100% 🤝 |
|
Antes da área de Responder ficou esquisito, pois parecia mesclar com o conteúdo:
Já embaixo, me pareceu melhor, mesmo após o usuário escrever um comentário filho da publicação principal: Respondendo.publicacao.mp4E o mesmo raciocínio na página do comentário: Respondendo.comentario.mp4Aqui ficou parecendo como se fosse um anúncio no rodapé, porque não tinha embaixo. São comentários pequenos, teremos uma noção melhor no dia a dia, com anúncios, publicações e comentários reais. Se necessário, podemos alterar depois, mas acho que ficou legal. No mobile:
PS: Ainda não mexi no alinhamento com o conteúdo (deixando a margem esquerda do mesmo tamanho que a área dos TabCoins ocupa). |
|
Massa @Rafatcb curti!!! |
Rafatcb
force-pushed
the
feat/ui-create-ad
branch
from
441ace7 to
5bf6be2
Compare
|
Fiz um novo commit; a alteração nos dois anteriores foi apenas do
Alinhamento 👍 na página de conteúdos. A exceção é caso um conteúdo tenha mais de cinco dígitos de TabCoins, porque ele é passa a ocupar um espaço maior do que todos os outros (e certamente estamos bem longe do ponto onde isso será um problema).
E a lista de conteúdos continua como antes:
|
|
Sensacional @Rafatcb ta ficando tudo muito masssaaaa 😍 Será que os primeiros anúncios vão conseguir aparecer essa semana ainda (considerando a inclusão da tabela de saldo)? 💪 Em paralelo, eu estava tentando bolar uma ideia: no momento que um usuário publica um conteúdo, e possui um anúncio rodando, 100% das vezes isso aparece abaixo do que esse usuário escreveu, como uma espécie de assinatura. Isso era uma mecânica de fóruns das antigas e vejo que pode ser muito útil para trazer retorno a quem cria conteúdo aqui dentro, fora que algumas pessoas estão fazendo isso de forma manual. O problema é que ao tentar desenhar o layout, não consegui fazer algo legal ainda. A ideia era aparecer o anúncio em uma única linha (cortando o texto se necessário), com uma fonte menor. Mais para frente tento de novo 🤝 |
Tudo indica que sim 🎉
Então ficariam 2 anúncios seguidos? Uma alternativa: Se o autor de um conteúdo possui anúncio publicado, o anúncio que aparece antes dos comentários de qualquer conteúdo desse autor será um anúncio dele mesmo, pelo menos enquanto o anúncio tiver saldo suficiente de TabCash. Dessa forma não precisa de um outro design, pois será o mesmo desenvolvido nesse PR. E não ficam 2 anúncios seguindos. O que acham? |
Isso! A ideia era não ser dois anúncios, ser 1 apenas, porque considerava o anúncio no topo. De qualquer forma, o layout era diferente para que coubesse em qualquer que fosse o conteúdo, incluindo nas respostas das respostas 🤝 Vamos evoluindo a ideia, tudo para trazer retorno para quem cria conteúdo aqui 💪 |
Legal também!!! Acho uma boa para a fase 2 dessa ideia 🤝 |
Gostei bastante. Isso motiva o autor a criar bons conteúdos no TabNews: tanto que recebam uma boa quantidade de votos positivos, quanto que tenham um bom SEO. Quanto mais visitas o conteúdo dele receber, mais o anúncio dele é visto. |
Rafatcb
force-pushed
the
feat/ui-create-ad
branch
from
5bf6be2 to
cd45e7a
Compare
|
Que sensacional!! E já tem um anúncio rodando 🎉 https://www.tabnews.com.br/filipericardo/agora-e-possivel-usar-seus-tabchash |
|
Em paralelo @Rafatcb não sei se foi a última implementação, mas apareceu um espaço na direita que antes não tinha: 
E deletando pelo devtools o novo espaço de anúncio, conserta o problema 🤝 Isto está acontecendo também no meu device. |
|
Fiz alguns testes com Edit: é possível até tirar o |
Nos dois casos deve dar problema com o |
|
@aprendendofelipe tem algum exemplo? Nos testes que fiz, funcionaram corretamente, coloquei as prints no PR #1753 |
Mudanças realizadas
Esse PR implementa a etapa 3d mencionada em #1491 (comment).
Checkboxna tela/publicarpara criar uma publicação patrocinada.Checkboxem/publicar.Acredito que seja importante informar o usuário o que for relevante para ele se sentir seguro em criar a publicação patrocinada. Por ora, coloquei como "período de duração" o que foi exemplificado em #1491 (comment), ou seja, um consumo de 10 TabCash por dia. Apesar disso não estar implementado, imagino que implementaremos a tempo, ou lidaremos de forma manual para remover as publicações antigas (>10 dias).
Além disso, também falei sobre o tamanho recomendado para o título (< 70 caracteres, veja o PR #1746), sobre onde a publicação é exibida e como funciona o link (fonte) dela.
Na pergunta "Como funciona uma publicação patrocinada?", coloquei o aviso itálico de que esse tipo de anúncio está em desenvolvimento para que as pessoas não fiquem surpresas com mudanças e possam entender melhor o que está por vir, caso tenham interesse.
Tela
/publicar:Dispositivo móvel (326 pixels de largura):
O valor do
Checkboxestá sendo salvo nolocalStorageassim como o dos outros campos. Além disso, ele é exibido apenas na criação de publicação, e não na criação de comentário ou edição. OCheckboxestá sempre habilitado, mas caso o usuário não tenha TabCash o suficiente, uma mensagem de erro é exibida noFlash.Tipo de mudança
Checklist: