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!

  • Thiago Melo

    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!

  • http://www.robsonsobral.com [- sObRaL -]

    Realmente, esse foi muito bom! Utilíssimo!

  • Raphael Ferreira

    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…

  • http://www.adalbueno.com Adal Bueno

    Realmente muito show de bola a técnica. Vou tentar converter o script de php para asp (a qual domino e trabalho).

    Abraços

  • Allan Felipe B. S. S

    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

  • Guilhermy Maso

    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

  • Marcelo Rosa

    Realmente muito fera! da para fazer uso também como teste somente do heading.php?text=Texto+a+Substituir

  • Dario

    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.

  • Pingback: Diversidades » Blog Archive » Dynamic Text Replacement()

  • Thomas

    Por que você não posta um zip com todos os arquivos necessários para fazer o script funcionar?

  • Valério Faria

    É 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.

  • http://marciotoledo.com/ Marcio Toledo

    Muito boa a dica Henrique! :D Valeu hehehehe

  • http://marciotoledo.com/ Marcio Toledo

    é só comigo ou com vocês tmb tá rolando da imagem fazer um cortinho na lateral direita?

    olha essa imagem…

  • BIll

    Muito bom, pefeito essa tecnica.

    [s]s

  • Guilherme Nunes

    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

  • Guilherme Nunes

    ué, não pega código?????????

    Aqui o texto do título

  • Eric Campos

    Muito bom mesmo… animal… assim como o Adal Bueno, vou fazer uma versão para o ASP.NET

  • Joildo Santos

    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 .

  • http://www.tverde.com.br/site/ Lucas Motta

    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!!

  • Jacques Saint-Lauren

    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!

  • Jacques St-Laurent

    "Sendo que a fonte, o caminhos e o nome da fonte estão corretos.."

    Lucas,

    Errado : http://www.tverde.com.br/lucas/test/font.ttf

    Bom : font.ttf

    Vai funcionar

  • Henrique Zambonin

    Muito bom, parabéns.

    Alguem por acaso conseguiu adaptar isto para asp.net?

  • Marlon Cesar

    muito bom mesmo Henrrique!! Parabéns cara!!

  • http://www.a-falange.net/ EH Martuchelli

    Muito bom o artigo!

    Abriu-se uma gama de possibilidades para aqueles que desenvolvem para a web.

    Parabéns!

  • http://www.joaomak.net Joao

    De uma olhada em http://www.joaomak.net/util/dtr/ para uma versão sem javascript que substitui o texto no servidor usando as funções de output buffering do PHP e CSS.