Image replacement e SEO:
SEO(Search Engine Optimization) é um conjunto de técnicas de
desenvolvimento de um site, focando a melhor visibilidade nos resultados dos
grandes motores de busca para este. A indexação feita pelos se baseia em
textos, uma tag de grande utilização para rankeamento dos motores busca como o
famos Google é a tag <h1>, partindo dessa ideia chegamos a um bom motivo
para utilizar o image replacement: boa visibilidade nos motores de busca, sem
deixar aparência do site de lado, conforme mostramos abaixo a codificação do
exemplo anterior:
HTML:
<h1>Exemplo</h1>
<h1>Exemplo</h1>
CSS:
h1 { width: 200px; height: 50px; background: url('') no-repeat; text-indent: -909em; overflow: hidden;
h1 { width: 200px; height: 50px; background: url('') no-repeat; text-indent: -909em; overflow: hidden;
Técnica de Gilder/Levin
Criada por Tom Gilder e Levin Alexander, esta técnica usa um
SPAN vazio para conter a imagem e, usando posicionamento absoluto, sobrepõe o
texto com a imagem.
Desvantagens:
Usa um SPAN vazio. Um elemento vazio é, de certa forma, algo
que não deveria ser usado nunca, por que a imagem deve representar um texto
realmente presente no conteúdo, conforme já mencionado, por questões de
acessibilidade, levando em conta a interpretação de um leitor de tela.
Impossibilita o uso de imagens transparentes.
Vantagens:
Funciona perfeitamente para usuários com CSS habilitado e
imagens desabilitadas.
Exemplo:
HTML:
<h1 id="titulo"><span></span>Ao
vencedor, as batatas</h1>
CSS:
#titulo{
width:438px;
height:36px;
position:relative;
overflow:hidden;
}
#titulo span{
position:absolute;
width:100%;
height:100%;
background:#fff
url() no-repeat;
}
O que a técnica faz é estabelecer as dimensões do
“container”, no caso o H1, exatamente iguais às da imagem, posicioná-la com
posicionamento relativo e definir overflow hidden, para que o texto não
extrapole os limites, caso o usuário o redimensione pelo browser. Depois coloca
o SPAN com posicionamento absoluto e com as mesmas dimensões do “container”,
com a imagem de fundo. Note que o SPAN fica acima do H1, por causa do
posicionamento absoluto. Não é necessário usar z-index.
Fahrner Image Replacement (FIR)
Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.
HTML:
<h1
id="topo">
<span>CSS
para Web Design</span>
</h1>
CSS:
h1#topo {
width:
270px;
height:
40px;
background-image:
url(cwd.gif);
}
h1#topo
span {
display:
none;
}
Radu Darvas <img> Replacement
A técnica de Radu Darvas propõe o uso do elemento IMG na
marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o
atributo "alt" definido com o texto da informação passada pela
imagem.
O código de Radu Darvas:
HTML:
<h1 id="topo">
<img src="spacer.gif" alt="CSS para Web
Design!" />
<span>CSS para Web Design</span>
</h1>
CSS:
h1#topo {
width: 270px;
height: 40px;
background-image: url(cwd.gif);
}
h1#topo span { display: none;}
h1#topo img {
width: 0px;
height: 0px;
}
Stuart Langridge Image Replacement
A técnica de Stuart não usa o elemento extra SPAN e esconde
o texto declarando padding igual à altura da imagem e height igual à zero.
Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras
para aquele navegador.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
padding: 40px 0 0
0; /* padding-top=altura imagem */
overflow: hidden;
background:
url(cwd.gif) no-repeat;
height: 0
!important;
height /**/:40px;
/* height=altura imagem - hack IE5's */
}
Malarkey Image Replacement (MIR)
Na técnica de Malarkey também não aparece elemento extra
SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta
erroneamente a declaração letter-spacing.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
letter-spacing :
-1000em;
width:270px;
height: 40px;
background-image:
url(cwd.gif);
}
/* Hack para Opera,
esconde do MacIE */
/*\*/html>body
#topo {
letter-spacing :
normal;
text-indent : -999em;
overflow : hidden;
}/* Fim do hack */
Lindsay Image Replacement
Nesta técnica o texto é escondido declarando-se um tamanho
de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do
fundo.
HTML:
<h1 id="topo">
CSS para Web Design
</h1>
CSS:
h1#topo {
background:
url(cwd.gif) no-repeat;
width: 270px;
height: 40px;
font-size: 1px;
color: #xxx; /* cor
do fundo */
Dave Shea Image Replacement
Dave Shea usando a técnica original com um elemento SPAN
extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para
fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o
elemento SPAN vazio.
HTML:
<h1 id="topo" title="CSS para Web
Design">
<span></span>
CSS para Web Design
</h1>
CSS:
h1#topo {
position: relative;
width: 270px;
height: 40px;
}
h1#topo span {
background:
url(cwd.gif) no-repeat;
position:absolute;
width: 100%;
height: 100%;
}
Nenhum comentário:
Postar um comentário