Comentários sobre: Image Replacement acessível http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/ Tutoriais sobre: XHTML, CSS, JavaScript e WebStandards Sat, 11 Feb 2012 13:45:15 +0000 hourly 1 http://wordpress.org/?v=3.3 Por: Luis Alves http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-289097 Luis Alves Wed, 08 Feb 2012 00:14:21 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-289097 Isso no final das contas não serve para nada! O atributo HTML "ALT" já faz isso muito melhor! Isso no final das contas não serve para nada!

O atributo HTML “ALT” já faz isso muito melhor!

]]> Por: Qualquer fonte no seu site com @fontface | SWX Softwares - Desenvolvimento e Design Web http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-287640 Qualquer fonte no seu site com @fontface | SWX Softwares - Desenvolvimento e Design Web Fri, 03 Feb 2012 13:29:25 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-287640 [...] que colocar uma fonte diferente para a produção do site. Existem varias técnicas para isto, image replacement, sIFR, cufón e @fontface que é o que vamos falar [...] [...] que colocar uma fonte diferente para a produção do site. Existem varias técnicas para isto, image replacement, sIFR, cufón e @fontface que é o que vamos falar [...]

]]> Por: Aileen Wublin http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-269424 Aileen Wublin Tue, 27 Dec 2011 08:25:50 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-269424 Leather Laptop Messenger Bag... Leather Laptop Messenger Bag…

]]> Por: Joella Flesch http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-269423 Joella Flesch Tue, 27 Dec 2011 08:24:52 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-269423 Hi-Ya! I loves your marvelous site thanks and please keep it up Hi-Ya! I loves your marvelous site thanks and please keep it up

]]> Por: Bruna http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-212204 Bruna Thu, 19 May 2011 22:52:27 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-212204 Isso é um trabalho que pode ser dispensado. Quer colocar uma imagem no lugar de um texto e ser acessível, use o atributo alt do html. Os leitores de tela leem esse atributo e o googlebot também. Assim o Google vai indexar seu site normalmente. Não use image-replacement. Image-replacement é técnica de Black Hat SEO! Olhe o que o google diz sobre essa forma de ocultar o texto: http://www.google.com/support/webmasters/bin/answer.py?answer=66353 "Ocultar texto ou links pode fazer parecer que seu site não tem credibilidade, já que apresenta informações distintas para os mecanismos de pesquisa e para os visitantes. O texto (por exemplo, palavras-chave em excesso) pode ser ocultado de diversas formas, incluindo: Uso de texto com fonte branca em fundo branco Inclusão de texto atrás de imagens Uso de CSS para ocultar texto Configuração do tamanho da fonte para 0 (zero) Se você encontrar textos ou links ocultos no seu site, remova-os ou, se forem relevantes para os usuários, deixe-os bem visíveis. Caso o seu site tenha sido removido dos resultados de pesquisas, leia as nossas Diretrizes para webmasters para obter mais informações. Assim que tiver feito as alterações e tiver certeza de que o site não está mais violando as nossas diretrizes, envie-o para reconsideração." Isso é um trabalho que pode ser dispensado. Quer colocar uma imagem no lugar de um texto e ser acessível, use o atributo alt do html. Os leitores de tela leem esse atributo e o googlebot também. Assim o Google vai indexar seu site normalmente. Não use image-replacement.
Image-replacement é técnica de Black Hat SEO!
Olhe o que o google diz sobre essa forma de ocultar o texto:

http://www.google.com/support/webmasters/bin/answer.py?answer=66353

“Ocultar texto ou links pode fazer parecer que seu site não tem credibilidade, já que apresenta informações distintas para os mecanismos de pesquisa e para os visitantes. O texto (por exemplo, palavras-chave em excesso) pode ser ocultado de diversas formas, incluindo:

Uso de texto com fonte branca em fundo branco
Inclusão de texto atrás de imagens
Uso de CSS para ocultar texto
Configuração do tamanho da fonte para 0 (zero)

Se você encontrar textos ou links ocultos no seu site, remova-os ou, se forem relevantes para os usuários, deixe-os bem visíveis. Caso o seu site tenha sido removido dos resultados de pesquisas, leia as nossas Diretrizes para webmasters para obter mais informações. Assim que tiver feito as alterações e tiver certeza de que o site não está mais violando as nossas diretrizes, envie-o para reconsideração.”

]]> Por: Como usar qualquer tipo de fonte no website com fontface | NerdHead http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-202539 Como usar qualquer tipo de fonte no website com fontface | NerdHead Mon, 14 Mar 2011 16:02:57 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-202539 [...] que colocar uma fonte diferente para a produção do site. Existem varias técnicas para isto, image replacement, sIFR, cufón e @fontface que é o que vamos falar [...] [...] que colocar uma fonte diferente para a produção do site. Existem varias técnicas para isto, image replacement, sIFR, cufón e @fontface que é o que vamos falar [...]

]]> Por: Links | Danielevsilva | Webdesigner | Portfolio | Combinação de cores http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-182554 Links | Danielevsilva | Webdesigner | Portfolio | Combinação de cores Sun, 15 Aug 2010 04:22:46 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-182554 [...] com fontes alternativas, a melhor solução, na minha opinião é através da técnica "Image Replacement". Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, [...] [...] com fontes alternativas, a melhor solução, na minha opinião é através da técnica "Image Replacement". Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, [...]

]]> Por: Clica Aqui » Design baseado em Tipografia – Mais elementos de texto http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-168773 Clica Aqui » Design baseado em Tipografia – Mais elementos de texto Thu, 03 Sep 2009 01:56:31 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-168773 [...] com fontes alternativas, a melhor solução, na minha opinião é através da técnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, [...] [...] com fontes alternativas, a melhor solução, na minha opinião é através da técnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, [...]

]]> Por: Ricardo Pedrosa http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-153050 Ricardo Pedrosa Thu, 04 Jun 2009 07:36:10 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-153050 Olá, Nessa técnica também é possível o uso da propiedade overflow com valor hidden. Para que o texto não apareça quando for aumentado o zoom nos navegadores mais antigos. Olá,

Nessa técnica também é possível o uso da propiedade overflow com valor hidden. Para que o texto não apareça quando for aumentado o zoom nos navegadores mais antigos.

]]> Por: Pedro Rogério http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-139853 Pedro Rogério Thu, 16 Apr 2009 15:09:39 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-139853 @Romeu, Eu atualizei o exemplo adicionando o link, dê uma olhada no código fonte que você verá como fazer. @Romeu,

Eu atualizei o exemplo adicionando o link, dê uma olhada no código fonte que você verá como fazer.

]]> Por: Romeu http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-139834 Romeu Thu, 16 Apr 2009 13:21:03 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-139834 Como coloco um link no image replacement? Como coloco um link no image replacement?

]]> Por: Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-6395 Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto Sun, 04 Mar 2007 13:50:56 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-6395 [...] solução, na minha opinião é através da técnica "Image Replacement". Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas [...] [...] solução, na minha opinião é através da técnica "Image Replacement". Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas [...]

]]> Por: Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-330 Daniele Viana - Blog » Design baseado em Tipografia - Mais elementos de texto Tue, 27 Jun 2006 23:52:52 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-330 [...] Para trabalhar com fontes alternativas, a melhor solução, na minha opinião é atravez da tecnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituír texto por imagem usando apenas css, assim é possível utilizar qualquer fonte sem a preocupação se ela será exibida corretamente, pois imagens são sempre imagens. Dessa forma ganhamos em compátibilidade! Veja no “Pinceladas da Web” a técnica mais comum para trabalhar com substituíção de textos por imagens, ou então, faça uma comparação entre os principais métodos conhecidos no “Mezzoblue” (em inglês). [...] [...] Para trabalhar com fontes alternativas, a melhor solução, na minha opinião é atravez da tecnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituír texto por imagem usando apenas css, assim é possível utilizar qualquer fonte sem a preocupação se ela será exibida corretamente, pois imagens são sempre imagens. Dessa forma ganhamos em compátibilidade! Veja no “Pinceladas da Web” a técnica mais comum para trabalhar com substituíção de textos por imagens, ou então, faça uma comparação entre os principais métodos conhecidos no “Mezzoblue” (em inglês). [...]

]]> Por: Pinceladas da Web » Blog Archive » IMAGE REPLACEMENT - EPISÓDIO 2 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-294 Pinceladas da Web » Blog Archive » IMAGE REPLACEMENT - EPISÓDIO 2 Wed, 07 Jun 2006 00:03:51 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-294 [...] Após o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte: [...] [...] Após o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte: [...]

]]> Por: Pedro Rogério http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-291 Pedro Rogério Mon, 05 Jun 2006 14:18:12 +0000 http://www.pinceladasdaweb.com.br/blog/2006/06/04/image-replacement-acessivel/#comment-291 Maujor, Eu sei que hoje existem técnicas mais avançadas de Image Replacement, mas com essa aí eu quis mostrar pra quem está iniciando agora como foi o início de tudo. Mas muito obrigado pelo toque! Maujor,

Eu sei que hoje existem técnicas mais avançadas de Image Replacement, mas com essa aí eu quis mostrar pra quem está iniciando agora como foi o início de tudo. Mas muito obrigado pelo toque!

]]>