O Básico da web

Algumas pessoas me escreveram e-mails com dúvidas sobre seleção de elementos HTML em JavaScript, a maioria delas com dúvidas relacionadas ao artigo sobre títulos editáveis, que publiquei por aqui há algum tempo atrás. Por isso resolvi escrever este artigo sobre esse tema tão simples, mas ao mesmo tempo tão vital para o desenvolvedor JavaScript.

Os “ganchos”

Para selecionar um elemento HTML e poder manipulá-lo via JavaScript/DOM você precisa primeiro ter algo que identifique esse elemento. Um “gancho” (em inglês, hook).

Este gancho pode ser:

• o ID do elemento
• um nome de classe
• um nome de tag (DIV, SPAN, P, A, etc)
• Um atributo ou valor de atributo específico

Dependendo do tipo de gancho usado, seu trabalho pode ser mais simples ou mais complexo. Vamos ver caso a caso.

Um elemento ou vários elementos?

Quando “pescamos” elementos HTML via JavaScript/DOM, o que temos como retorno pode ser um elemento específico ou um conjunto de elementos (um Array de elementos, pra ser mais específico).

Na verdade, o que manipulamos via JavaScript são referências a elementos HTML. Ou seja, uma variável que “aponta” para o elemento e que, uma vez modificada, reflete as modificações no elemento em si. Mas não se preocupe com isso agora. Trate as referências como elementos de fato caso isso torne as coisas mais simples de abstrair pra você.

Selecionando elementos pelo ID

A única forma de selecionar um elemento específico sem nenhum esforço extra é usando o ID do elemento como gancho. Para isso usamos o método document.getElementById().

A sintaxe deste método é simples: var elemento = document.getElementById("id_do_elemento");

Exemplo:

HTML:
<span id="preco">R$ 1500,00</span>
JavaScript:
var preco = document.getElementById('preco');

Feito isso, você pode, por exemplo, exibir um alerta com o conteúdo do elemento, assim: alert(preco.innerHTML).

E é isso. Selecionar um elemento pelo ID é muito simples. Mas nem sempre temos um ID disponível, por isso vamos ver como selecionar elementos usando outros tipos de ganchos.

Selecionando vários elementos: o processo básico

Quando você não tem um ID disponível para selecionar um elemento específico, a única opção é selecionar diversos elementos e depois “pescar” aquele ou aqueles que te interessam.

Basicamente, tudo começa com o método document.getElementsByTagName(). Como o nome já diz, este método seleciona elementos por nomes de tags.

Feito isso, basta iterar pelos elementos, usando loops (em geral, for) e, de acordo com determinadas condições, separar os elementos com os quais você precisa trabalhar. Vamos ver os exemplos mais comuns.

Seleção por nome de classe

Imagine que você quer selecionar todos os elementos que tenham a classe “preco”. Não importa se o elemento é um DIV, um SPAN ou qualquer outro, desde que tenha a classe “preco”, ele te interessa.

Para isso você vai precisar, antes de qualquer outra coisa, selecionar todos os elementos da página de uma só vez. Isto é muito simples, veja:

var todos_elementos = document.getElementsByTagName('*');

Neste caso, todos_elementos é um Array contendo todos os elementos da página. Não vou entrar em detalhes sobre Arrays por aqui. Se você já programou, em praticamente qualquer linguagem, já deve conhecê-los. Caso contrário, continue lendo que acho que vai dar pra entender mesmo assim.

Agora vamos fazer um for para percorrer todos os elementos do nosso array e selecionar apenas aqueles que têm a classe que nos interessa. Vamos assumir, para simplificar os exemplos, que você quer os elementos que tenham apenas a classe “preco”. Elementos com mais de uma classe ficam de fora.

var precos = Array();
for (var i=0; i<todos_elementos.length; i++){
  var el = todos_elementos[i];
  if (el.className == 'preco'){
    precos.push(el);
  }
}

O código acima pega todos os elementos com a classe “preco” e joga dentro de um outro Array, “precos”. Agora você pode iterar por este Array e fazer o que quiser com seus elementos.

Seleção por nome de tag

Para selecionar elementos pelo nome da tag, o método usado é o mesmo document.getElementsByTagName() e o processo é exatamente igual ao descrito acima.

Por exemplo, vamos selecionar todos os DIVs da nossa página:

var divs = document.getElementsByTagName('div');

Simples assim.

Se você quiser selecionar diretamente, por exemplo, o primeiro DIV da página, use o seguinte:

var div = document.getElementsByTagName('div')[0];

Seleção por um atributo específico

Aqui a coisa funciona da mesma maneira que a seleção por classe. Vamos selecionar, por exemplo, todos os links (tag A) com o atributo rel=”nofollow”:

var links = document.getElementsByTagName('a');
for (var i=0; i<links.length; i++){
  var link = links[i];
  var rel = link.getAttribute('rel');
  if (rel && rel == 'nofollow'){
   link.className = 'nofollow';
  }
}

O código acima atribui a classe “nofollow” a todos os links com rel=”nofollow”. Com isso podemos, por CSS, aplicar uma cor diferente nesses links, por exemplo.

Como vocês podem ver, selecionar elementos via JavaScript/DOM não é nada complicado. Espero que a explicação tenha sido clara e aguardo as opiniões — e, mais importante, as dúvidas — de vocês.

Image Replacement (em português, algo como substituição por imagem), como já disse em alguns artigos por aqui, são técnicas empregadas para substituir texto por imagem, usando algumas artimanhas de CSS.

Existem diversas maneiras diferentes de se fazer Image Replacement e eu vou explicar para vocês algumas das mais famosas e interessantes, começando pela minha favorita. Além disso, vou mostrar as vantagens e desvantagens e quando devemos usar ou evitar o uso de image replacement.

A motivação

A motivação básica para o uso de image replacement é simples. Produzir texto — geralmente, mas não apenas, títulos — mais agradáveis visualmente, usando fontes mais bonitas, que componham melhor o layout da página, sem, com isso, ferir a semântica ou diminuir as chances de aparecer bem em sites de busca.

Alguns de vocês devem se perguntar: por que usar image replacement quando uma simples IMG em HTML resolveria o problema?

Posso dar duas respostas a essa pergunta:

1. Porque o elemento IMG deve ser usado apenas para imagens que carreguem um significado único, que só pode ser expressado totalmente pela imagem em si. Por melhor que seja, uma descrição textual é apenas isso, uma descrição. Imagine uma foto do seu filho jogando um beijo. Agora me diga se qualquer descrição textual no mundo poderia substituir a imagem. Então, é disso que estou falando.
2. Porque os mecanismos de busca dão mais valor para o conteúdo de elementos textuais — como títulos, parágrafos ou listas — do que para o conteúdo de uma imagem.

Ou seja, a primeira motivação é semântica e a segunda, marketeira. Ambas se completam e trazem benefícios tanto para o usuário quanto para o desenvolvedor.

Para entendermos melhor as motivações, vamos ao segundo ponto.

O uso

Como já vimos acima, image replacement é usada, em geral, para substituir um texto por uma imagem contendo o próprio texto, alterando apenas sua estética, sem alterar seu significado.

Um exemplo:

Texto normal:
Ao vencedor, as batatas

Texto em imagem:

Por mais que você não goste da fonte usada na imagem, é difícil não concordar que o visual é bem mais agradável que o texto puro, renderizado pelo browser.

Esse é o uso normal para image replacement. Não há problemas em decorar a imagem com bordas, sombras, cor de fundo ou qualquer outro efeito visual desejado. Mas a imagem deve conter sempre o mesmo texto que o elemento a ser substituído. Se não for esse o caso, simplesmente não use image replacement.

Por quê? Bem, por dois motivos:

1. Você estaria alterando o significado da página para um ou mais grupos de usuários. Estaria entregando versões diferentes de um mesmo conteúdo baseado apenas na capacidade do usuário (na verdade, de seu user-agent) de interpretar CSS e exibir imagens. Dessa forma, você estaria ferindo a semântica (a geral, não a do HTML) de forma mortal, algo que você não quer, não é mesmo?
2. Os buscadores poderiam entender esta “entrega diferenciada de conteúdo” como cloaking, uma técnica suja de otimização usada por spammers e outros tipos de desenvolvedores cuja figura materna exerce a profissão mais antiga do mundo, o que poderia lhe proporcionar uma penalização ou até mesmo, em casos extremos, fazer com que seja banido dos resultados de busca. E isso, com certeza, mais do que ferir a semântica, ninguém quer.

Portanto, resumindo, image replacement deve ser usado apenas para tornar uma página mais bonita, nunca para alterar seu conteúdo. Sugiro que você leia o meu artigo sobre desenvolvimento em camadas, para ajudar a entender melhor essas questões.

Image replacement é muito legal, muito bonito, mas, como não poderia deixar de ser, nem tudo são flores, continue lendo.

Os problemas

Para começar, nenhuma técnica de image replacement é perfeita. Cada uma delas tem seus prós e contras e escolher uma pra chamar de sua se resume a escolher a que te traz maior benefício com o menor custo.

Em geral, há dois problemas (isso está parecendo aquela propaganda do Discovery Channel, mas vamos lá):

1. A técnica exclui algum grupo de usuários, geralmente aqueles que navegam, por algum motivo, com suporte a CSS mas sem suporte a imagens
2. A técnica traz algum “lixo semântico”, algum elemento HTML que não precisaria estar ali se você não quisesse embelezar sua página.

Nenhuma técnica resolve os dois problemas de uma vez só, mas algumas têm os dois.

Mas, um problema — e um grande problema, diga-se de passagem — é comum a todas as técnicas de image replacement: a forma do texto não pode ser modificada pelo usuário. Ou seja, nada de redimensionamento ou mudança de cores para aumentar contraste.

Isso é algo que vai contra a acessibilidade e pode fazer com que, por exemplo, pessoas com baixa visão não consigam ler seu texto. Infelizmente, se você quiser usar image replacement, vai ter que conviver com isso. Ou melhor, seus usuários vão ter que conviver com isso. A escolha é sua.

Onde não usar

Em meu último artigo, apresentei um exemplo onde image replacement foi usado de maneira inadequada. No exemplo em questão, uma empresa estava apresentando seus produtos na home page do site e as fotos dos produtos eram inseridas na página via CSS, usando image replacement.

Como já vimos lá em cima, devemos usar image replacement apenas quando queremos substituir um texto por uma imagem contendo este mesmo texto. Qualquer outro uso deve ser evitado. Porém, há um caso clássico e muito comum de uso de image replacement que, na minha opinião, é totalmente equivocado: O logotipo do site/produto/empresa.

A princípio é tentador usar image replacement para colocar a imagem do seu logo em uma página web, já que, dessa forma, é possível colocar o seu nome e, em alguns casos, seu slogan, em um elemento com alta relevância para sites de busca (como H1, por exemplo), ajudando seu site a se posicionar melhor nas páginas de resultado.

Isto seria muito bom, se não fosse por um simples motivo: O seu logo é uma informação visual importantíssima e deve estar presente em sua forma completa, inalterada, sempre que possível.

Convenhamos, em alguns casos — provavelmente na maior parte deles — um logo é muito mais importante que o próprio nome da empresa. Imagine que você entra em um site e vê, no topo, em letras garrafais, o texto “Elma Chips”, mas não vê, em lugar algum, a carinha sorridente, presente em todos os pacotes de biscoitos desta marca? Seria, no mínimo, estranho, não?

Portanto, leve isso em conta. Se a imagem transmite, por si só, um significado único, use IMG. Dessa forma qualquer usuário que possa exibir imagens poderá ver esta imagem e os que não puderem, verão o texto contido no atributo ALT.

E agora, o momento que todos esperavam.

Técnicas de Image Replacement

Antes de mostrar as técnicas, devo dizer a vocês que estas e outras técnicas podem ser achadas facilmente pela web. Particularmente gosto dos artigos do Dave Shea (Revised Image Replacement, em inglês) e do Maujor (Técnicas CSS para image replacement, em português), tanto que vou me basear neles.

Primeiro, minha técnica favorita e a que uso sempre que necessário:

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.

Esta técnica tem dois problemas (dois, de novo? Fala sério…)

1. Usa um SPAN vazio. Isto pode ou não ser considerado um problema. Um elemento vazio é, de certa forma, algo que não deveria ser usado nunca. Porém isto não traz nenhum problema prático, portanto eu acredito que não devamos nos preocupar. Se você for um purista (xiita para os íntimos) e os pêlos do seu braço se arrepiarem só de pensar em usar um elemento vazio, pule para a próxima técnica. Caso contrário, continue lendo e veja o benefício trazido por esse SPAN vazio e decida-se por usar ou não.
2. Impossibilita o uso de imagens transparentes. Portanto, se você precisa usá-las, essa técnica não vai te servir, infelizmente.

Porém tem um grande benefício: funciona perfeitamente para usuários com CSS habilitado e imagens desabilitadas.

Vejamos a técnica:

HTML:
<h1 id="titulo"><span></span>Ao vencedor, as batatas</h1>

CSS:
#titulo{
  width:238px;
  height:26px;
  position:relative;
  overflow:hidden;
}
#titulo span{
  position:absolute;
  width:100%;
  height:100%;
  background:#fff url(/i/ao-vencedor.gif) no-repeat;
}

Resultado:

Imagem com fundo branco:

Ao vencedor, as batatas

Imagem com fundo transparente:

Ao vencedor, as batatas

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 (leia meu artigo sobre posicionamento, no brunotorres.net) 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.

Acho essa técnica genial e vou usá-la até que apareça algo melhor.

FIR - Fahrner Image Replacement

Esta foi a primeira técnica de image replacement, criada por Todd Fahrner, famoso desenvolvedor e membro do W3C.

Esta técnica também usa um elemento a mais, um SPAN, porém não vazio, mas seu maior problema é o uso de display:none, que pode impossibilitar que alguns leitores de tela leiam o conteúdo do elemento (Aparentemente há solução para isso, mas eu não testei com todos os leitores de tela e gente muito mais esperta que eu continua dizendo que o problema acontece, então é melhor não usá-la). Mostro-a aqui apenas por sua importância histórica.

A técnica:

HTML:
<h1 id="titulo"><span>Ao vencedor, as batatas</span></h1>

CSS:
#titulo{
  width:238px;
  height:26px;
  position:relative;
  background:url(/i/ao-vencedor.gif) no-repeat;
}
#titulo span{
  display:none;
}

Resultado:

Ao vencedor, as batatas

Técnica Phark

Esta é uma técnica bastante interessante, simples e criativa, usando text-indent muito grande e negativo para joga o texto “para fora da tela”.

Tem a vantagem de ser muito simples e não requerer nenhuma marcação HTML extra e a desvantagem de não funcionar com CSS habilitado e imagens desabilitadas.

A técnica:

HTML:
<h1 id="titulo">Ao vencedor, as batatas</h1>

CSS:
#titulo{
  width:236px;
  height:26px;
  text-indent:-9999px;
  overflow:hidden;
  background:url(/i/ao-vencedor.gif) no-repeat;
}

Resultado:

Ao vencedor, as batatas

Se não existisse a técnica de Gilder/Levin, esta seria a minha escolha, com certeza. Inclusive já a usei em diversos projetos.

Existem algumas outras técnicas (você pode encontrá-las nos artigos linkados no início desta seção), porém, embora o título deste texto seja “Tudo sobre image replacement”, não vou mostrá-las pois acredito que estas mostradas acima são essencialmente as mais importantes. Se vocês, no entando, encherem meu saco nos comentários, posso incluir as outras aqui.

Além das técnicas puramente de HTML/CSS, existem outras que usam PHP, Flash e JavaScript. Prefiro deixá-las para um futuro artigo, pois pertencem a uma classe diferente de image replacement.

Conclusão

Image replacement não é a panacéia do desenvolvimento web, mas pode ajudar a tornar suas páginas mais bonitas, sem afetar o conteúdo do site, embora cause alguns problemas de acessibilidade e semântica.

Use por sua conta e risco, pese os prós e contras antes de usar e nunca esqueça: seu bom senso é mais importante que qualquer regra.

Qualquer dúvida, a caixa de comentários está aí pra isso.

Image Replacement é uma técnica que permite substituir texto por imagem usando CSS. Existem diversas formas de se fazer isso, umas melhores que outras e cada uma delas com seus prós e contras. Eu já usei uma dessas técnicas por aqui em um artigo sobre menus com imagens e rollover (que, a propósito, precisa de algumas atualizações e correções).

Estas técnicas têm um apelo muito forte com relação à otimização para sites de busca mas, como tudo nessa vida, têm os lugares e situações certas para ser usadas.

A regra de ouro sobre imagens na web é: se a imagem é apenas decorativa, insira via CSS; se ela transmite algum significado não visual, ou seja, se é importante como conteúdo, insira via tag IMG no HTML.

Entrei agora há pouco no site da BlackBerry, famosa por seus smartphones, e me deparei, logo na home page, com uma situação onde uma técnica de image replacement foi usada de maneira equivocada.

A página mostra três aparelhos e, creio eu, quando queremos mostrar um produto, uma foto deste produto é algo extremamente importante, que devemos sempre tentar mostrar, não importa onde nem quando.

Se você for até a página e desabilitar o suporte a CSS vai ver apenas uma lista não ordenada com os nomes dos produtos em links para suas respectivas páginas. Limpo, leve e simples, mas, na minha opinião, errado.

Pelo menos eles não cometem o erro de usar image replacement no logo da empresa, que é um dos exemplos mais importantes de onde não se deve usá-lo. E nas páginas de cada produto, as imagens estão lá, no HTML, do jeito correto. Mas, sendo a home, geralmente, a página mais importante de um site, creio eu que deveriam dar um pouco mais de atenção à importância de mostrar seus produtos sempre, chova ou faça sol, calor ou frio, com ou sem CSS.

O que vocês acham? Alguém tem mais algum exemplo de mau uso de image replacement?

Hoje à tarde meu amigo Jânio me apareceu no MSN com um problema interessante: ele estava fazendo um JavaScript que deveria abrir uma nova janela, com uma determinada largura e uma determinada altura. Nada mais simples, você pode pensar. Eu também pensei e ele também.

Acontece que no firefox a janela abria com uma largura mais ou menos igual à metade do valor que ele tinha colocado no parâmetro width do método window.open(). Estranho, não?

Pra quem não conhece, window.open() é um método que simplesmente serve para abrir uma nova janela. O uso é assim:

//window.open(URL, nome_da_janela, parâmetros);
//ex:
window.open('teste.html', 'janela1', 'width=500,height=400');

Tem mais parâmetros, mas isso não vem ao caso agora. O fato é que eu fiz diversos testes e realmente a janela nunca abria com a largura certa no Firefox.

Então, procura daqui, procura dali, dando uma olhada na referência de DOM do Mozilla Developer Center, mais precisamente nos métodos do objeto window, achei a solução.

Há três parâmetros referentes à largura da janela:

outerWidth

Define a largura da janela inteira do browser, incluindo barras de rolagem, etc e tal. só é suportada por browsers gecko (família Mozilla e Netscape)

width

Define a largura do viewport, ou seja, da área útil do browser, a área onde é exibido o conteúdo da página.

innerWidth

A mesma coisa que width, mas só é suportada por browsers gecko.

Esses parâmetros são aplicados na ordem de precedência acima. O outerWidth é o mais “forte”, ou seja, seu valor “ganha” dos outros dois. width vem logo depois, seguido de innerWidth.

A solução para o problema em questão era usar o outerWidth que, por algum motivo que eu não sei exatamente explicar, funciona direitinho, ao contrário do width. Porém, como outerWidth só funciona nos browsers gecko, temos que usar width também, para agradar ao IE, opera e, creio eu, safari. Nosso código ficou assim:

window.open('teste.html', 'janela1', 'width=500,outerWidth=500,height=400');

Note que, caso a janela a abrir tenha barra de rolagem vertical, vai ser necessário setar outerWidth para um valor ligeiramente maior que width, para obter o mesmo resultado em todos os browsers. Mas, em geral, 10 pixels mais ou menos, não matam ninguém.

Fica a dica, caso algum de vocês venha a ter o mesmo problema.