Dynamic Text Replacement
Por: Henrique C. Pereira
Publicado em Thursday 10 November 2005 às 01:19Categoria: HTML/CSS/JScript, Internet / Web
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!
Comentários dos leitores
Este artigo possui 25 comentários
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!
Realmente, esse foi muito bom! Utilíssimo!
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…
Realmente muito show de bola a técnica. Vou tentar converter o script de php para asp (a qual domino e trabalho).
Abraços
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
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
Realmente muito fera! da para fazer uso também como teste somente do heading.php?text=Texto+a+Substituir
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
Por que você não posta um zip com todos os arquivos necessários para fazer o script funcionar?
É 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.
Muito boa a dica Henrique! :D Valeu hehehehe
é só comigo ou com vocês tmb tá rolando da imagem fazer um cortinho na lateral direita?
olha essa imagem…
http://www.marciotoledo.com/temp/dtr.jpg
Muito bom, pefeito essa tecnica.
[s]s
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
ué, não pega código?????????
Aqui o texto do título
Muito bom mesmo… animal… assim como o Adal Bueno, vou fazer uma versão para o ASP.NET
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://blog.slaven.net.au/wordpress-plugins/image…
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!!
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!
"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
Muito bom, parabéns.
Alguem por acaso conseguiu adaptar isto para asp.net?
muito bom mesmo Henrrique!! Parabéns cara!!
Muito bom o artigo!
Abriu-se uma gama de possibilidades para aqueles que desenvolvem para a web.
Parabéns!
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.