Dynamic Text Replacement

Umas das novidades recentes do Revolução Etc é a aplicação de uma troca dinâmica de texto, baseado em um artigo do A List Apart chamado "Dynamic Text Replacement".

Basicamente essa troca dinâmica do conteúdo de um elemento no seu código por uma imagem gerada a partir de um arquivo de fonte do tipo ttf é feita utilizando um arquivo em php e um javascript. A receita para implementar isto é fácil. Prepare um imagem de 1 por 1 pixel e a salve como test.png, que será usada pelo arquivo javascript para testar se o browser suporta imagem png ou não. Não se preocupe com o Internet Explorer, na verdade ele aceita imagem png apesar de não interpreta o canal alpha. Por isso você não vai precisar usar nenhum outro JavaScript, como um que eu escrevi aqui anteriormente para forçá-lo a interpretar este canal alpha. Isso não fará diferença no resultado final como você pode ver neste site.

Depois jogue os arquivos headings.php, replacement.js, test.png e uma fonte do tipo ttf de sua escolha no servidor. Se não for colocar todos na raiz, certifique-se apenas de conferir o endereçamento dentro de cada um e ver o que precisa ser alterado. Você precisa alterar dentro do arquivo replacement.js o endereço da fonte, lembre-se disto.

O arquivo heading.php não precisa ser incluído em nenhum outro. Basta você chamar o arquivo replacement.js no <head> do seu site que ele fará o resto, chamará o arquivo php e fará a mágica necessária para substituir o elemento que você selecionou, por uma imagem gerada à partir de uma fonte que você selecionar. No meu site eu indiquei o<h2> como elemento a ser substituído. Não precisa nem dizer que na fonte, seu código vai ficar intocável e textual para a alegria dos mecanismos de busca. Se tiver sede de uma explicação mais detalhada, beba direto da fonte no A List Apart que faz uma autopsia mais minuciosa nos arquivos JavaScript e PHP além do meu interesse. O exemplo deles você pode conferir aqui (o conteúdo não está mais disponível). Divirtam-se!

25 thoughts on “Dynamic Text Replacement”

  1. Legal Henrique! Eu já estava mesmo curioso pra saber como você fazia para inserir imagens nos títulos dinâmicamente. Ainda não testei o código mas em breve o farei. Parabéns!

  2. Realmente muito útil essa técnica, mas creio que pode ser um pouco problemática num site de grande porte com enorme quantidade de acessos. Acho que pode sobrecarregar o servidor, não?
    Seria mais interessante se a transformação fosse feita no cliente, ou se fosse possível armazenar as imagens geradas em algum tipo de cache…

  3. Programo sistemas web e sempre usei a bilioteca GD por causa da tradução dos textos… traduzir para outra língua imagem encarece a tradução.
    Fica aí o cuidado para quem programa sistema nunca inserir imagens com texto. Sem falar que os recursos de imagem PHP + Firefox superam e muito o IE….
    Esse site abaixo exemplifica isso, abram no firefox e no IE.
    http://www.libpng.org/pub/png/pngs-img.html

  4. Minha duvida eh mais básica.
    Alguem sabe o pq q até hj naum foi bolada uma forma do css utilizar diretamente a fonte TTF, algo parecido com o @font-face (que funciona mal e porcamente : ). Isso ia quebrar um galho GIGANTESCO tanto de tamanho do site quanto de design. pq imagem consome mais :

    Fica ai a minha dúvida.
    Valeu

  5. Legal. Já tinha visto esse recurso no Blog do danielsantos.org, mas não sabia como implementar. Com esse artigo consegui faZer a implementação no meu blog. Só não descobri ainda porque não está funcionando no IE.

    Obs.: Seu campo para comentário não está aceitando a letra Z minúscula.

  6. Pingback: Diversidades » Blog Archive » Dynamic Text Replacement
  7. É realmente uma ótima técnica, porém não totalmente acessível. Quando por exemplo tenta-se copiar o post inteiro para um editor de texto, enquanto o navegador está com as imagens habilitadas, o que se consegue é o texto sem título.

    Já as outras interfaces ficam bem acessíveis, pois o leitor de tela e o google enxergam a tag hx, a impressora recebe uma formatação específica
    pelo mediatype print, o mesmo pode ocorrer com dispositivos móveis.

    A decisão de utilizar ou não esse recurso depende também do público alvo, se for um público que prioriza conteúdo pode-se usar uma formatação
    textual nos títulos que obtém-se muito sucesso, caso seja um público que queira também detalhes visuais refinados então pode-se utilizar a técnica do image-replacement.

    Nesse site de Henrique em específico não tem maiores problemas pois o público alvo é mais específico e por exemplo podem utilizar navegadores textuais ou então desabilitar as imagens do navegador, conseguindo obter o texto completo. Já em sites de instituições de ensino que abragem os vários tipos de usuários, do especialista em web ao totalmente leigo,
    deve-se pensar um pouco antes de utilizar esse recurso e se usar não usar em demasia pois em algum momento poderá causar dificuldades para
    determinados usuários conseguirem copiar o conteúdo textual.

  8. Achei super interessante a idéia!! Fiquei pensando com você tinha feito isso. 🙂

    Mas, para não ficar com diversas imagens no seu XHTML, por que você não faz da seguinte forma:

    Aqui o texto do título

    Acho que ficaria melhor, não?
    Enfim, foi só uma dica.

    Um abraço.
    Guilherme Nunes

  9. Quem usar o WordPress e quiser algo menos trabalhoso, existe um plugin que permite a utilização de diversas fontes e tudo automatizado bastando apenas a instalação do plugin. ai vai o link .

  10. Olá Henrique,
    Estou com uma dúvida neste esquema, eu fiz todos os procedimentos corretos e tudo mais.
    Testei no servidor e não funcionou =/
    Olha o ERRO que dá:
    "Error: The server is missing the specified font."

    Sendo que a fonte, o caminhos e o nome da fonte estão corretos..
    Dê uma olhada se possível:
    http://www.tverde.com.br/lucas/test/

    Abraços!!

  11. E uma solução interessante que já executei no meu website.

    Mas estou preocupado com dois assuntos.

    Primeiro, para o texto inical que faz tempo antes de ser substituído durante que os imagens estão processando. E esquisito para os visitantes de ver de repente o texto se mudar.

    Segundo, não sei se o Google gosta desse Javascript. Pode ser arriscado se o texto e colocado numa lugar estratégico.

    Mais como voces brasileiros dizem, e legal!

Leave a Reply

Your email address will not be published. Required fields are marked *