O Básico da web

Manipulando urls e algumas propriedades com javascript

Depois de mais um longo inverno, O Básico da Web volta, ou tenta voltar, à ativa com mais um post sobre as maravilhas dessa linguagem não tão bem compreendida que é o javascript.

Hoje iremos falar sobre as propriedades e métodos do objeto location, um objeto do navegador que contém todas (ou quase) as informações relacionadas a URL atual. o Location é um objeto que faz parte do objeto window, logo ele é acessado pela propriedade window.location.

Não sei vocês, mas algumas coisas para mim ficam horríveis, chegando até a ficar sem sentido, quando são traduzidas, objeto do navegador é uma delas, vamos tratar todo mundo aqui como gente grande então nada de objeto do navegador é browser object!

Browser object?

Browser object porque as informações que ele retorna são do browser, inclusive elas não estão em nenhuma especificação/recomendação oficial mas a maioria dos browsers suportam, ah os IEs também estão nessa lista.

Propriedades do location

o location é um browser object muito interessante e útil, mas a maioria só conhece uma ou duas propriedade que ele possui, abaixo irei listar cada uma das propriedades e como utilizá-las

href

primeiro o href, que pega e/ou muda a url da página, sendo que ele pode ser utilizado somente como window.location, ou seja é uma propriedade que é conhecida pela metade, por exemplo, se colocarmos o seguinte js nessa pagina:

<script type="text/javascript">
	alert(window.location);
	//ou
	alert(location.href);
	//retornaria obasicodaweb.com/URL.
	//caso façamos o seguinte código,
	window.location = "google.com";
	//ou
	location.href = "google.com";
	//a página seria recarregada para a url indicada.
</script>

hash

A outra propriedade é o hash, entre outros usos o principal é, que podemos manipular a url sem ter que fazer o recarregamento da página, ou seja, como as funções de ajax devem ser.

O hash tem um caractere padrão o # (tralha, jogo da velha, ou qualquer outro nome que vcqueira ou conheça), que é usado para identificar o que foi modificado na url, por exemplo:

<script type="text/javascript">
	// estamos em uma pagina com a seguinte url:
	// obasicodaweb.com/home#pagina2
	alert(location.hash);
	//retornaria #pagina2
</script>

Sim, o # vem junto da informação, caso queira removê-lo basta fazer um search ou usar o substr, mas isso é assunto para outro post.

host

Continuando, temos outra propriedade chamada host, que é chamada por location.host, que retorna o domínio e caso tenha a porta utilizada, por exemplo temos a url a seguir:

<script type="text/javascript">
	// agora estamos em uma pagina com a seguinte url:
	// www.obasicodaweb.com:8080/teste
	alert(location.host);
	//retornaria www.obasicodaweb.com:8080
</script>

hostname

A próxima propriedade que veremos é a hostname, que retorna, como o próprio nome diz, o hostname da url, nesta página o location.hostname retornaria www.obasicodaweb.com, basicamente o funcionamento é o mesmo do location.host, só que o hostname não retorna a porta utilizada.

Outra propriedade é pathname, que retorna tudo depois do location.host, ou seja:

<script type="text/javascript">
	// a url agora é:
	// www.obasicodaweb.com:8080/teste/teste
	alert(location.pathname);
	// retornaria /teste/teste 

	// no caso da url ser
	// www.obasicodaweb.com:8080/teste#hash
	alert(location.pathname);
	// retorna /teste sem o hash ou ancora.
</script>

port

port é a próxima propriedade que veremos, ela retorna a porta utilizada na url.

<script type="text/javascript">
	// na url:
	// www.obasicodaweb.com:8080/teste
	alert(location.port);
	// retornaria 8080

	// caso não retorne nada, é porque é a porta padrão, de numero 80, geralmente.
</script>

protocol

location.protocol é a propriedade que retorna o protocolo utilizado, no caso desta página seria http:, sim com o dois pontos. Existem diversos protocolos, outro protocolo que muito utilizado é o https:

search

search é a ultima propriedade que veremos, ela retorna os parâmetros utilizados na url, como exemplo vamos utilizar a seguinte url:

<script type="text/javascript">
	// na url:
	// www.obasicodaweb.com:8080/?largura=10&altura=5
	alert(location.search);
	// retorna ?largura=10&altura=5
</script>

Métodos do location

assign()

Para finalizar temos alguns métodos, o primeiro é o assign() que carrega uma nova página, parecido com o location.href, a diferença que o assign funciona como um parâmetro em uma função:

<script type="text/javascript">
	window.location.assign('obasicodaweb.com')
	// irá carregar a página indicada.
</script>

reload()

O segundo método é o reload(), que recarrega a página, basicamente faz a mesma coisa que um f5 no seu browser de preferência, é utilizado da seguinte forma:

<script type="text/javascript">
	location.reload()
	// recarregará a página assim que for executado
</script>

replace()

o terceiro e ultimo, mas não menos importante é o método replace(), que substitui a página por outra nova. Funciona basicamente da mesma forma que o assign().

<script type="text/javascript">
	window.location.replace('obasicodaweb.com')
	// irá substituir a página pela url indicada.
</script>

A diferença entre o assign() e href para o replace() é que os dois primeiros adicionarão a url no histórico do browser, enquanto o replace não, ou seja, você pode manipular a entrada de uma url no histórico do browser.

Por hoje é isso, espero que vocês possam utilizar tudo o que o location pode oferecer. Gostou do post? não gostou? falta algo? tem algo errado? fala ai embaixo por favor.

Como selecionar elementos HTML via JavaScript/DOM

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.

Tudo sobre Image Replacement

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{
  px;
  px;
  position:relative;
  overflow:hidden;
}
#titulo span{
  position:absolute;
  %;
  %;
  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{
  px;
  px;
  position:relative;
  "px; px; ">
		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{
  px;
  px;
  text-indent:-9999px;
  overflow:hidden;
  "px; px; text-indent: -9999px; overflow: hidden; ">
		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.