Otimizar a usabilidade da Web com fragmentos de texto

Já alguma vez clicou numa hiperligação para um artigo ou uma página Web e, quando chega, o browser desloca-se para um ponto específico da página e destaca um excerto específico do texto? O aspeto pode ser o seguinte:

Não parece haver nenhuma marca de âncora na marcação. Como é que o browser soube deslocar-se até este ponto do artigo e como é que soube destacar esta parte específica do texto? A resposta são os fragmentos de texto.

Os fragmentos de texto são os heróis desconhecidos da navegação na Web. São uma caraterística dos navegadores Web modernos que lhe permite ligar diretamente a partes específicas de uma página Web, guiando os seus leitores exatamente para onde precisam de ir - sem toda aquela deslocação aborrecida. Facilitam a partilha e a referência a conteúdos da Web, garantindo uma experiência de utilizador mais suave e precisa.

Neste post, abordaremos tudo o que você precisa saber sobre fragmentos de texto - como eles funcionam, como ajudam e como criá-los. Depois, veremos alguns casos de uso interessantes. Pronto para mergulhar? Vamos lá!

Como é que os fragmentos de texto funcionam?

Quando compreende como funcionam os fragmentos de texto, abre novas possibilidades para melhorar as suas páginas Web. Vamos lá explicar.

Os fragmentos de texto permitem-lhe criar URLs que ligam diretamente a partes específicas de texto numa página Web. Pode guiar os utilizadores para a informação exacta de que necessitam sem os obrigar a percorrer conteúdos irrelevantes. Precisão. Eficiência.

O formato URL para um fragmento de texto é simples. Tem o seguinte aspeto: 

Quando um utilizador clica numa ligação com um fragmento de texto, o browser desloca-se automaticamente para a localização do texto especificado e destaca-o. Com o foco instantâneo no conteúdo relevante, a experiência do utilizador melhora muito, especialmente em páginas longas.

Que browsers suportam fragmentos de texto?

Fonte

Assim, vemos que o Chrome (desde a versão 80) e o Edge (desde a versão 80) suportam fragmentos de texto, tal como outros navegadores baseados no Chromium.

Como é que os fragmentos de texto ajudam?

Se alguma vez clicou numa hiperligação de fragmento de texto, provavelmente já percebeu as vantagens. Mas, para que todos possam ver claramente, aqui estão as formas mais significativas de ajuda dos fragmentos de texto.

Maior precisão

Os fragmentos de texto podem levar os seus utilizadores diretamente para a informação exacta de que necessitam. Em vez de os enviar para o topo de uma página Web e esperar que encontrem o que procuram, pode guiá-los diretamente para o texto relevante. Esta precisão é particularmente valiosa em documentos extensos, artigos técnicos ou tutoriais pormenorizados, onde os detalhes específicos podem facilmente perder-se.

Melhoria da usabilidade

Ao destacar o conteúdo exato em que os utilizadores estão interessados, os fragmentos de texto tornam as páginas Web mais fáceis de utilizar. Acabou-se o rolar interminável para encontrar informação pertinente! Quando melhora a usabilidade desta forma, torna o seu sítio Web mais acessível e reduz a frustração. É como fornecer um ponto de GPS para o seu conteúdo - leva os seus utilizadores exatamente onde precisam de ir com o mínimo de esforço.

Partilha melhorada

Partilhe conteúdos Web como um chefe. Com os fragmentos de texto, a partilha torna-se muito mais eficaz. Pode partilhar um ponto específico de um artigo ou documento, garantindo que o destinatário vê a parte exacta a que se refere. Já não precisa de dizer: "Veja a secção sobre Domesticação, no segundo parágrafo. Há uma frase sobre o facto de os humanos utilizarem gatos para proteger os cereais dos roedores". Basta fornecer uma ligação direta que os leve diretamente ao texto de que está a falar.

Como é que crio uma ligação de fragmento de texto?

Criar uma ligação de fragmento de texto é fácil! Eis os passos a seguir...

Passo 1: Identificar o texto para o qual pretende ligar

Em primeiro lugar, decida a que parte da sua página Web pretende ligar. O fragmento de texto deve ser uma correspondência exacta para garantir que a ligação funciona corretamente. Por exemplo, digamos que pretende ligar a esta publicação do blogue, a esta mesma frase. Terá de se certificar de que a sua ligação inclui a frase exatamente como aparece nesta página.

Passo 2: Adicionar o fragmento adequado ao URL

Depois de identificar o texto, é necessário formatar corretamente o URL. A estrutura básica é:

Não se esqueça de que se trata de um URL, o que significa que precisa de codificar certos caracteres no seu snippet de texto. O mais importante, os espaços devem ser substituídos por %20e vírgulas com %2C. Assim, por exemplo, a frase "Os fragmentos de texto são, IMO, fantásticos." seria codificada no URL como Text%20fragments%20are%2C%20IMO%2C%20awesome.

Um exemplo prático

Vamos praticar com um exemplo para tornar isto mais claro. Vamos criar uma ligação de fragmento de texto para esta publicação do blogue, para uma parte específica do texto no passo 1, acima. No seu browser, já tem o URL para esta página. Na sua barra de URL, anexe #:~:text= no final do URL. Em seguida, após o sinal de igual, anexe link%20to%20this%20blog%20post%2C%20to%20this%20very%20sentence.

Copie este URL modificado, abra um novo separador no seu browser e cole-o. Leva-o para a frase no passo 1 e também realça o texto?

No caso de estar a trabalhar com um URL que já tem parâmetros de consulta (por exemplo, algo como https://example.com?utm_source=newsletter&utm_medium=email), basta acrescentar #:~:text= e o fragmento de texto após os parâmetros de consulta.

Casos de utilização de fragmentos de texto

Os fragmentos de texto podem facilitar a navegação no seu conteúdo. Aqui estão algumas formas práticas de os utilizar.

• Conteúdos educativos: Os professores podem ligar diretamente a partes específicas de documentos longos, facilitando aos alunos a procura de definições ou conceitos-chave. Os alunos têm muito para ler todos os dias. Vamos reduzir o trabalho pesado para os alunos sempre que possível.
• Documentação técnica: Os programadores podem ir diretamente para o exato fragmento de código ou secção de que necessitam na documentação. É como ter um atalho para as partes mais importantes, poupando tempo e reduzindo a frustração.
• Apoio ao cliente: As equipas de apoio podem orientar os clientes diretamente para as soluções de que necessitam. Em vez de percorrerem artigos inteiros, os clientes obtêm imediatamente as respostas que procuram. A experiência resultante é mais fácil e rápida.

Ao introduzir a magia dos fragmentos de texto no seu conteúdo, torna-o mais acessível, preciso e fácil de utilizar.

Conclusão

Os fragmentos de texto são uma ferramenta simples mas poderosa para melhorar a navegação na Web. Pode ligar diretamente a partes específicas do texto, melhorando a precisão, a usabilidade e a partilha. Se souber como os criar e utilizar, tornará o seu conteúdo mais acessível e fácil de utilizar.

Pronto para levar suas habilidades de desenvolvimento web para o próximo nível? Confira os serviços de computação em nuvem, bancos de dados e armazenamento de objetos da Linode. Explore nossa documentação para obter dicas e truques úteis para desenvolvimento ou práticas recomendadas para segurança em aplicativos da Web. Quer esteja a construir a próxima grande aplicação ou apenas a procurar melhorar o seu website, a Linode tem as ferramentas e o suporte de que necessita para ter sucesso.