Advento dos padrões: mesas de índices
Este artigo é a décima nona edição da série Advent of Patterns. Nesta série, que vai de 1º a 24 de dezembro de 2024, documentarei um padrão de design ou programação que notei recentemente. Leia mais sobre esta série.
O conteúdo das tabelas fornece uma visão geral do conteúdo de um documento. O conteúdo das tabelas pode ajudar um leitor a avaliar se uma página contém as informações para as quais estão procurando.
Um índice pode aparecer no topo de um artigo ou em uma barra lateral. Vi muitos sites usarem uma barra lateral em dispositivos de desktop para exibir o conteúdo das tabelas porque há mais espaço de tela disponível em dispositivos de desktop. No celular, uma seção pode aparecer no topo de um artigo com um rótulo como “nesta página” ou “neste artigo”.
Aqui está um exemplo de um índice exibido na barra lateral da documentação do GitHub:
Este índice lista as seções do documento. Isso pode ser usado para entender quais informações podem ser encontradas na página e, por extensão, se uma página contém as informações para as quais você está procurando.
No celular, o índice aparece no topo do guia:
Acho que o conteúdo das Tabelas são especialmente úteis em sites de documentação, na redação formal, na redação técnica e em qualquer redação onde haja vários títulos em uma página.
O Google Docs, uma ferramenta que você pode usar para preparar documentos, possui um recurso de esboço que mostra um índice com todos os títulos. Isso pode ser usado para entender a hierarquia do documento – quais títulos você tem e como eles são estruturados.
Refletindo sobre esse padrão, notei que a visão geral dos “símbolos” do Github na edição de texto é semelhante ao índice. A visão geral dos símbolos mostra as funções, classes e outras informações relacionadas a um programa que pode ser identificado através da análise do arquivo. Aqui está um exemplo de uma visão geral dos símbolos de um arquivo:
Com esta visão geral, eu posso:
- Veja quais classes, funções e constantes são definidas.
- Navegue até a linha em que uma classe, função ou constante específica é definida ou vá para o início da definição.
A visão geral dos símbolos atua como navegação dentro de um arquivo, adaptada à estrutura do código com o qual estou trabalhando. As funções definidas em uma classe são aninhadas visualmente, o que me dá uma indicação visual da relação entre funções e classes.
Quando você clica em um símbolo, o Github mostra a definição do símbolo e suas referências:
Isso pode ser usado para me ajudar a entender como uma constante ou função definida é usada em um arquivo.
Como o índice, a visão geral do símbolo me permite entender, em um nível alto, quais seções estão em um arquivo e como elas se relacionam. Posso clicar em um item na visão geral para pular para a definição de uma constante ou função ou classe específica e para ver como ele é usado. É como um índice em que clicar em um título leva você à seção correspondente.
Em que lugares você viu o índice? Quais são seus exemplos favoritos desse padrão?
Postagem anterior da série: Advent of Patterns: Timelines
Em seguida na série: Advento de Padrões: Links compartilháveis
