- Uma introdução a microfuncionalidades que melhoram a experiência do usuário em blogs
Notas laterais
- Um recurso que fornece informações adicionais sem atrapalhar o texto principal
- Permite que o leitor confira facilmente detalhes extras ou fontes
- O uso de notas laterais por Gwern é especialmente impressionante. Seus textos usam notas laterais com muita frequência e fornecem informações adicionais sem interromper o fluxo do conteúdo principal.
- Com notas laterais, é possível consultar referências facilmente sem precisar rolar até o fim da página para ver as notas.
- É possível ver várias abordagens inspiradas em Tufte CSS.
Índice
- O índice permite ver rapidamente os principais temas do texto e ir facilmente para a parte desejada.
- Geradores de sites estáticos (por exemplo, Hugo) podem gerar o índice automaticamente.
- O site de Lars Hupel oferece um índice dentro da série, facilitando a navegação.
Bônus: indicador de progresso da página
- A barra de progresso da página mostra visualmente em que ponto da página o leitor está.
- É possível ver esse recurso na Quanta Magazine.
- É possível aprender como implementar isso com o tutorial da CSS Tricks.
Títulos fáceis de linkar
- É possível criar links para seções específicas da página usando o ID de elementos HTML.
- Como isso não fica visível para o usuário, cada elemento pode virar um link para facilitar a referência.
- É possível ver esse recurso na documentação do Hugo.
Agrupamento de posts em séries
- Quando você quer escrever longamente sobre vários temas, publicar em formato de série pode tornar o conteúdo mais fácil para o leitor acompanhar.
- É possível adicionar automaticamente botões de "próximo" e "anterior" ou criar um hub de navegação.
- É possível ver esse recurso no blog da linguagem Chapel.
Textos em formato de diálogo
- Textos em formato de diálogo tornam a leitura mais interessante e fácil de entender ao fazer perguntas do ponto de vista do leitor e expressar preocupações a partir de uma perspectiva menos experiente.
- O site de Xe Iaso e o Faster than Lime usam textos dialogados com frequência.
Indicação da origem em blocos de código
- Ao escrever código, mostrar o nome do arquivo e os números das linhas no bloco de código ajuda o leitor a entender melhor.
- Exemplo: Crafting Interpreters
Bônus: blocos de código com links clicáveis
Indicação de links externos
- Links que levam a domínios externos são marcados com um pequeno ícone.
- É possível ver esse recurso no James’ Coffee Blog ☕.
Bônus: marcadores diferentes para destinos diferentes
- O site de Gwern muda o ícone de acordo com o destino do link.
- Exemplo: links para a Wikipedia mostram "W", links para Haskell.org mostram um símbolo lambda.
Bônus: prévia de links
- Ao passar o mouse sobre um link, uma prévia da página é exibida, permitindo ver o conteúdo antes de clicar.
- É possível ver esse recurso no site de Gwern.
Feed RSS
- RSS é um padrão de feed que permite que sites publiquem atualizações.
- Permite que os leitores acompanhem atualizações sem precisar visitar o site diretamente.
Links para outros sites
- Incluir links para posts de outros blogs ou sites ajuda a divulgar conteúdo relacionado.
- É possível ver esse recurso no blog de Drew DeVault.
Conclusão
- Essas microfuncionalidades podem tornar um site mais útil e atraente
- Parece uma boa ideia integrar esses recursos ao seu próprio site
2 comentários
Bem na hora, eu estava criando meu próprio blog, então muito obrigado por essa notícia útil haha
Opiniões no Hacker News