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!