Neste artigo abordarei uma das principais causas de inconsistências entre navegadores, que é a existência das user agent stylesheets, e explicarei como é possível evitar muitas complicações simplesmente “resetando” o CSS.

Mas o que é uma user agent stylesheet?

Aposto que você já notou a aparência um tanto quanto desagradável de uma página com CSS desabilitado, entretanto, por mais estranho que isso possa parecer, ainda existe um pouco de CSS aplicado naquela página. Por exemplo, o texto possui uma fonte específica e certos elementos possuem margens e espaçamentos internos.

Exemplo de documento sem CSS

Os estilos de que estou falando não foram escritos pelo autor da página, e nem possuem qualquer relação com esta, eles são provenientes da user agent stylesheet do navegador em questão, seja ele qual for. São regras iniciais de formatação que o navegador aplica por padrão em todas as páginas que abre.

Embora o CSS aplicado por padrão nos principais navegadores se apresentem muito semelhantes, isso não quer dizer que sejam completamente idênticos, e qualquer mínima diferença aqui pode gerar inconsistências nas páginas de seus projetos.

Solucione o problema “resetando” o CSS

Para remediar as inconsistências presentes nas user agent stylesheets de diferentes navegadores surgiu uma técnica conhecida como CSS Reset. Ela consiste em nivelar os estilos padrões de todos os navegadores para um único resultado mais consistente, que funcione como uma base sólida para o trabalho do desenvolvedor front-end.

A seguir abordarei três alternativas para “resetar” o CSS.

1. O seletor universal “*”

O seletor universal “*” contempla todos os elementos presentes em uma página, e com todos eles selecionados é possível eliminar margens, espaçamentos internos e qualquer outra propriedade desejada de uma única vez.

/* versão básica do CSS Reset com o seletor universal “*” */
* {
	margin: 0;
	padding: 0;
}

Esta técnica não é recomendada devido aos seguintes problemas:

• Não há controle sobre exatamente quais elementos serão “resetados”;
• Perde-se a herança de propriedades pois o seletor universal sempre ganha;
• Requer mais processamento podendo tornar a página mais lenta.

2. O CSS Reset de Eric Meyer

No ano de 2008 Eric Meyer, referência mundial quando o assunto é CSS, publicou uma alternativa mais bem elaborada que ficou conhecida como Eric Meyer “Reset CSS”, e atualmente se encontra em sua segunda versão, publicada no ano de 2011. Veja como fica um documento com esta técnica:

Exemplo de documento com o CSS Reset de Eric Meyer

A solução de Eric Meyer é interessante por evitar os problemas apontados na técnica do seletor universal. Entretanto o próprio autor ressalta que seu código deve ser apenas um ponto de partida, ou seja, deve ser adaptado para as necessidades de cada projeto.

3. O normalize.css de Nicolas Gallagher

Um problema com a maioria dos CSS Resets é a perda de formatações que já são interessantes por padrão, como, por exemplo, o negrito de títulos. Este comportamento leva o desenvolvedor front-end a perder tempo restaurando certas propriedades. Para tentar solucionar este e outros problemas Nicolas Gallagher criou o normalize.css.

Exemplo de documento com o normalize.css de Nicolas Gallagher

O normalize.css pode ser considerado uma evolução dos CSS Resets conhecidos até então, e já foi adotado por projetos importantes como o HTML5 Boilerplate e o Twitter Bootstrap sinalizando que chegou para ficar.

Conclusões

Quando o objetivo é eliminar inconsistências visuais entre diferentes navegadores a utilização de um CSS Reset deve se a sua primeira medida. É claro que essa técnica não vai resolver todos os problemas possíveis, mas com certeza deverá fornecer uma base sólida para se trabalhar, e muito provavelmente vai poupar muita dor de cabeça.

Crédito da imagem destacada: patrick h. lauke.

Neste artigo abordarei alguns problemas bastante conhecidos e citarei técnicas que surgiram para contorná-los, mas destacando uma delas que é relativamente nova e se mostra a opção mais elegante disponível.

Os problemas do Internet Explorer

Justiça seja feita, ele não é necessariamente ruim. Até o mais odiado deles, a versão 6, teve em sua época de lançamento o melhor suporte aos padrões web já visto até então. O problema é que a web e os concorrentes evoluíram, mas a Microsoft apenas observou seu navegador ficar extremamente defasado.

A versão 9 possui uma interface interessante e bom suporte aos padrões web.

As versões 6 e 7 são conhecidas por bugs que resultam em inconsistências visuais entre outros navegadores, como posicionamentos incorretos e cálculos errados de dimensões. A versão 8 corrigiu praticamente todos estes problemas, mas não conta com suporte a recursos mais recentes como bordas arredondadas ou sombras.

A versão atual, o Internet Explorer 9, possui suporte razoável a estes novos padrões, e a próxima já está a caminho com a promessa de um suporte ainda melhor. Aparentemente não veremos mais navegadores ruins por parte da Microsoft, entretanto as demoras em lançar novas versões e um método ineficiente de atualização no passado resultaram em uma quantidade significativa de usuários ainda utilizando versões antigas.

Como é importante que um site ou aplicação web funcione para todos, ao longo dos anos surgiram diversas técnicas destinadas a contornar os problemas causados por versões defasadas do Internet Explorer.

Antigas técnicas para isolar o Internet Explorer

Cada técnica, de uma maneira diferente, faz com que determinado trecho do código seja interpretado apenas pelo Internet Explorer, ou o contrário. Deste modo elas permitem a correção de problemas através de novas propriedades e valores.

CSS Hacks

Hacks são técnicas controversas que exploram bugs de versões específicas dos navegadores. Por exemplo, uma underline antes de qualquer propriedade faz com que apenas a versão 6 a interprete, já com um asterisco ela é interpretada também pela versão 7, conforme pode ser observado no exemplo abaixo:

.seletor {
	color: blue; /* todos os navegadores */
	*color: green; /* Internet Explorer 6 e 7 */
	_color: red; /* Internet Explorer 6 */
}

Folhas de estilo condicionais

Folhas de estilo condicionais são arquivos CSS exclusivos para o Internet Explorer referenciados através de comentários condicionais. Enquanto outros navegadores vão ignorá-las como qualquer comentário, o da Microsoft vai respeitar a condição de acordo com sua versão para decidir se o código será ignorado ou executado. Vide exemplo:

<!-- para todos os navegadores -->
<link rel="stylesheet" href="style.css"  />

<!-- para todas as versões do Internet Explorer -->
<!--[if IE]>	<link rel="stylesheet" href="ie.css"  />< ![endif]-->

<!-- apenas para o Internet Explorer 6 -->
<!--[if IE 6]>	<link rel="stylesheet" href="ie6.css"  />< ![endif]-->

<!-- apenas para o Internet Explorer 7 -->
<!--[if IE 7]>	<link rel="stylesheet" href="ie7.css"  />< ![endif]-->

Uma solução mais elegante

Embora as técnicas acima tenham servido ao seu propósito por bastante tempo, não é nada interessante “sujar” seu código com hacks baseados em bugs, e nem é prático manter uma folha de estilos separada para cada versão do Internet Explorer. Estes motivos incentivaram a criação de uma solução mais inteligente.

Classes condicionais na tag <html>

A técnica criada por Paul Irish consiste em utilizar comentários condicionais para, se for o caso, adicionar classes específicas na tag <html>, como .ie6, .ie7, .ie8 e assim por diante, deste modo as diferentes versões do navegador da Microsoft podem ser isoladas através de seletores específicos.

<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><html><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

É claro que quais versões serão isoladas deve ser totalmente de seu critério. O código é relativamente simples e facilmente customizado, basta compreender o funcionamento dos comentários condicionais e colocar a mão na massa. O HTML5 Boilerplate, por exemplo, utiliza uma variação mais avançada.

Mas e os outros navegadores?

O Internet Explorer não deve ser a única preocupação, é verdade, mas ao mesmo tempo é inviável criar condições para cada versão de cada outro navegador disponível, isso sem mencionar versões futuras. Neste caso é muito mais prático utilizar uma biblioteca como o Modernizr para testar o suporte a determinadas funcionalidades, e então acomodar seu código de acordo com os recursos suportados.

Conclusões

Versões antigas do Internet Explorer de fato ainda podem ser um incômodo, ainda mais para quem está apenas começando no desenvolvimento front-end. A técnica de inserir classes condicionais na tag <html> certamente é a solução mais elegante disponível para isolar o navegador da Microsoft e portanto é altamente recomendada.

Neste tutorial vou abordar uma nova opção que vem se popularizando recentemente que é a de criar botões apenas com CSS3, ou seja, formatar elementos de uma página de modo que se assemelhem a botões físicos sem fazer uso de qualquer tipo de imagem. Primeiro falarei sobre vantagens e desvantagens, e em seguida iniciarei o tutorial, mas se você está ansioso para ver o resultado final pode verificar o link abaixo.

Confira qual será o resultado do tutorial.

Vantagens

• Grande flexibilidade dada a renderização no próprio navegador;
• Facilidade na customização através de poucas linhas de código;
• Redução no tempo total de carregamento da página.

Desvantagens

• Os botões terão uma aparência simplificada em navegadores limitados;
• Necessidade de utilizar prefixos no CSS para suportar mais navegadores.

Passo 1: crie o elemento desejado

Primeiramente você deve criar o elemento que deseja utilizar como botão, ele pode ser um link, um botão de envio de formulário ou até mesmo um button. Para cada situação escolha o elemento que considerar mais adequado, mas lembre-se de que o mesmo código poderá ser aproveitado por todos.

Adicione a classe botao para cada elemento que você quiser formatar como botão, e em seguida adicione uma segunda classe com o nome da cor desejada para ele, deste modo você poderá ter botões de diversas cores com maior facilidade. Segue um código de exemplo:

<a class="botao vermelho" href="#">Link
<button class="botao azul">Button <button></button>
<input class="botao magenta" type="submit" value="<input type=&quot;submit&quot; />" />

Confira o resultado do passo 1.

Passo 2: adicione um pouco de cor

A cor é um atributo fundamental para que o botão seja atrativo para o usuário, mas para que as cores escolhidas no passo anterior funcionem será necessário criar regras para cada uma delas nas CSS. Crie classes reaproveitáveis para cada cor que quiser utilizar em seus botões, sendo que a cor desejada deverá ser declarada como cor de fundo do elemento. O código abaixo possui algumas cores de exemplo.

.vermelho { background-color: #FF0000; }
.laranja { background-color: #FF9B00; }
.amarelo { background-color: #DCDC00; }
.verde { background-color: #00D200; }
.azul { background-color: #3737FF; }
.roxo { background-color: #D200D2; }
.magenta { background-color: #FF0078; }

Confira o resultado do passo 2.

Passo 3: formate o botão com regras amplamente suportadas

Por enquanto nossos botões não estão nem perto de serem esteticamente agradáveis, mas vamos começar a resolver este problema com regras de formatação amplamente suportadas. O foco neste passo é definir um aspecto básico para eles, mas utilizando regras que até mesmo navegadores antigos suportam.

Primeiramente selecione uma cor para o texto que apresente bom contraste com as cores de fundo utilizadas, recomendo a cor branca para os fundos exemplificados no passo anterior, e para uma melhor legibilidade também recomendo que o texto esteja em um tamanho relativamente grande, em negrito e sem sublinhado, mas todas essas configurações são de seu critério é claro.

Para completar o aspecto básico de nossos botões adicione uma borda sutilmente escura, configure um pouco de espaçamento interno e garanta que o texto do botão não “quebre” em espaços horizontalmente muito apertados utilizando a propriedade white-space com o valor nowrap. O código deve ficar semelhante a este:

.botao {
	color: #ffffff;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 5px 20px;
	white-space: nowrap;
}

Confira o resultado do passo 3.

Passo 4: incremente a formatação do botão com regras avançadas

Vamos entrar agora na parte mais interessante deste tutorial, a que envolve utilizar recursos avançados destinados para navegadores modernos. Enquanto os navegadores antigos terão um botão simples, mas funcional, navegadores modernos serão beneficiados com todos os recursos avançados que suportarem.

Primeiramente vamos ser gentis com nosso usuário e melhorar ainda mais a legibilidade do rótulo dos botões, para isso adicione uma leve sombra ao texto. Recomendo uma sombra posicionada apenas um pixel tanto para a direita quanto para baixo, com um leve desfoque e na cor preta, mas com grande transparência.

Agora vamos libertar nossos botões deste mundo quadrado de navegadores com pouco suporte aos padrões web. Adicione bordas arredondadas com o valor que preferir, mas lembre-se de que este recurso ainda precisa de prefixos. Em seguida, para criar uma leve sensação de relevo, crie uma sombra interna na cor branca com um pouco de transparência e a posicione um pixel abaixo da posição original, este recurso também precisa de prefixos.

O código resultante deste passo deve ser semelhante a este:

.botao {
	color: #ffffff;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 5px 20px;
	white-space: nowrap;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

Confira o resultado do passo 4.

Passo 5: lembre-se da interação com o botão

Nossos botões ficaram bonitões, não ficaram? Mas ainda não acabamos. Lembre-se do fato que botões são elementos com os quais os usuários interagem, isto é, devemos fornecer  formatação também para determinadas situações de interação. Consideremos: quando o usuário posiciona o mouse acima do botão, quando navega até ele através do teclado e quando o ativa (normalmente através de um clique).

Para quando o usuário posicionar o mouse acima do botão ou chegar até ele através de navegação pelo teclado mude a cor de fundo para uma tonalidade um pouco mais clara, este será um feedback visual útil para o usuário. Para quando o botão for ativado mude sua sombra interna de modo a aparentar que ele foi pressionado fisicamente, este também é um feedback visual interessante. O código resultante será o seguinte:

.vermelho:hover, .vermelho:focus { background-color: #FF3333; }
.laranja:hover, .laranja:focus { background-color: #FFAD33; }
.amarelo:hover, .amarelo:focus { background-color: #E3E300; }
.verde:hover, .verde:focus { background-color: #00E500; }
.azul:hover, .azul:focus { background-color: #5252FF; }
.roxo:hover, .roxo:focus { background-color: #EB00EB; }
.magenta:hover, .magenta:focus { background-color: #FF3392; }

.botao:active {
	-webkit-box-shadow: inset 0px 3px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 3px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
	position: relative;
	top: 1px;
}

Por fim vamos tornar essas transições suaves através de um recurso interessante do CSS3, as transitions. Crie uma transição que afete todos os efeitos possíveis, utilize a curva de animação e o tempo de duração que preferir, uma animação linear e com 100 milissegundos de duração é um bom exemplo, mas não se esqueça dos prefixos, infelizmente eles também são necessários aqui. O código deverá ficar assim:

.botao {
	color: #ffffff;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 5px 20px;
	white-space: nowrap;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	-webkit-transition: all linear 100ms;
	-moz-transition: all linear 100ms;
	-o-transition: all linear 100ms;
	-ms-transition: all linear 100ms;
	transition: all linear 100ms;
}

Confira o resultado do passo 5 (que é o resultado deste tutorial).

Passo 6: seja criativo e vá além deste tutorial

Embora já seja um resultado bem interessante, é verdade que os botões ficaram simples, mas esse era o meu objetivo desde o início. Eu recomendo que você continue a trabalhar neles e faça experimentos, assim você pode chegar a um resultado único, um resultado apenas seu. Entre as possibilidades sugiro experimentar as pseudo-classes do CSS e com efeitos do CSS3 como box shadows, transitions e gradients.

Conclusões

Como foi possível notar neste tutorial é perfeitamente possível criar botões com CSS3 sem utilizar imagens, uma técnica que apresenta grandes vantagens. O resultado é um tanto quanto simples, mas pode facilmente ser customizado e incrementado para as mais diversas finalidades.

Além do tradicional site Lorem Ipsum existem diversas ferramentas e variações do texto padrão que podem ser encontradas na web. O site HTML-Ipsum, por exemplo, oferece o texto padrão, mas com opções de marcação para facilitar a sua inserção páginas na web, já o Bacon Ipsum é uma alternativa bem humorada ao texto padrão, mas sendo curiosas ou interessantes, essas ferramentas não fogem da “mesmice” do original.

Para buscar algo realmente diferente e não apenas paródias do texto original, neste artigo você encontra 10 verdadeiras alternativas ao tradicional Lorem Ipsum.

1. Escreva conteúdo verdadeiro

Tudo bem, eu entendo que este item não é exatamente o que você esperava encontrar nessa lista, mas é importante ressaltar que conteúdo verdadeiro deve ser sempre a primeira opção. Quando o texto não é real ele pode induzir o designer a perder o foco e criar um layout que chame a atenção para si ao invés de priorizar o conteúdo.

Geradores de conteúdo devem ser utilizados em situações onde o conteúdo real realmente não estará disponível, como é o caso de templates, ou quando o conteúdo real ainda está distante, como na fase inicial de algum projeto. Com essa observação feita, vamos de fato para as alternativas.

2. Fillerati

O Fillerati é, em todos os aspectos, uma alternativa mais elegante. Ele permite selecionar trechos de obras de diversos autores consagrados, como The Wizard of Oz de L. Frank Baum ou Alice in Wonderland de Lewis Carroll. O serviço ainda oferece facilidades para quem prefere o conteúdo já marcado em HTML com parágrafos, títulos ou listas.

Exemplo

There was a long silence after this, and Alice could only hear whispers  now and then; such as, ‘Sure, I don’t like it, yer honour, at all, at  all!’ ‘Do as I tell you, you coward!’ and at last she spread out her  hand again, and made another snatch in the air.

3. Not Lorem Ipsum

O Not Lorem Ipsum oferece textos genéricos de acordo com a área desejada. O texto abaixo, por exemplo, é destinado a empresas da área de desenvolvimento de aplicativos, mas existem opções para bancos, consultores, dentistas, igrejas e o que mais você puder imaginar, a lista completa é extensa.

Exemplo

This app does everything you could possibly want it to do and not only that, it is beautifully designed and extremely intuitive to use. Download it from the App Store for FREE if you don’t mind some adverts popping up or if you prefer an ad-free experience then you can down load the ad-free version for 99p.

4. Malevole Text Generator

O Malevole Text Generator é uma alternativa bastante simples que gera textos aleatórios com o número de parágrafos que foi selecionado. O destaque está na qualidade do texto gerado, o seu criador garante que ela foi desenvolvida com base em anos de muita pesquisa. Verdade ou não, é uma ótima alternativa.

Exemplo

Top Cat! The most effectual Top Cat! Who’s intellectual close friends get to call him T.C., providing it’s with dignity. Top Cat! The indisputable leader of the gang. He’s the boss, he’s a pip, he’s the championship. He’s the most tip top, Top Cat.

5. F*** Lorem Ipsum

O F*** Lorem Ipsum, apesar do nome malcriado, é uma ferramenta bastante amigável. Ela oferece textos provenientes de programas de televisão como comédias, dramas, programas infantis e variados. A ferramenta ainda permite gerar o texto já com marcação, muito útil para seu uso em páginas na web.

Exemplo

Making the world a better place, starts with one more smiling face. And Ronald’s smile is just the thing, To make everybody sing! Put a smile on, put a smile on, everybody come on! Put a smile on!

6. Blind Text Generator

O Blind Text Generator, apesar de oferecer Lorem Ipsum por padrão, possui outras opções para o texto a ser gerado. Um aspecto interessante é o bom controle sobre o resultado, permitindo customizações de número de palavras, caracteres e parágrafos, e também a geração automática de marcação.

Exemplo

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.

7. Random Text

O Random Text é mais uma ferramenta que fornece o Lorem Ipsum por padrão, mas que possui outra opção para o texto a ser gerado. Ela possui um bom controle sobre o resultado através da geração automática de marcação, seleção do número de frases e de quantidades mínima e máxima de palavras. O serviço ainda possui uma API que retorna o texto gerado no formato JSON.

Exemplo

Alas or soulfully darn monkey crud seal where fawning hurt that well this dolphin this one fussily delinquent one sadistically bombastic yet hence the clapped hey spread oh befell vulture far some worm celestially howled boomed minute straightly one wearisome but luscious astride less pending up the.

8. United Ipsums

O United Ipsums é extremamente original na fonte de seus textos, autodenominando-se um gerador de jargões políticos, ele utiliza os discursos vagos dos candidatos e pré-candidatos da eleição presidencial estadunidense de 2012. Entre os candidatos estão Barack Obama, Ron Paul e Mitt Romney. Será que um dia teremos uma versão nacional?

Exemplo

These things are true. There is not a black America and white America and Latino America and Asian America – there is the United States of America. We may come from different places and have different stories, but we share common hopes, and one very American dream. This is our time. Yes we can.

9. Simpson Ipsum

O Simpson Ipsum é uma alternativa bem humorada, mas não menos útil que as demais. Como você já deve ter imaginado, o serviço oferece textos provenientes do seriado de televisão The Simpsons. Entre as opções disponíveis estão gerar parágrafos comuns, linhas únicas e até mesmo o tradicional d’oh! do personagem principal da série.

Exemplo

Operator! Give me the number for 911! Attempted murder? Now honestly, what is that? Do they give a Nobel Prize for attempted chemistry? Oh, I’m in no condition to drive. Wait a minute. I don’t have to listen to myself. I’m drunk. Don’t kid yourself, Jimmy.

10. Fillerama

Seguindo a mesma linha do item anterior, o Fillerama utiliza textos provenientes de programas de televisão. Por padrão os textos são retirados do seriado Futurama, mas existem outras opções como Dexter (o serial killer, não o cientista de desenho animado) e Doctor Who. Entre as opções disponíveis, além do programa, existe a possibilidade de gerar listas, cabeçalhos e controlar quantos parágrafos serão exibidos.

Exemplo

Okay, I like a challenge. Tell them I hate them. And I’m his friend Jesus. Why would I want to know that? There’s one way and only one way to determine if an animal is intelligent. Dissect its brain!

Conclusões

Mesmo de conhecimento do fato que utilizar qualquer uma dessas opções de maneira equivocada pode ser tão prejudicial ao design quanto a opção tradicional, certamente é interessante possuir conhecimento de alternativas que ofereçam mais opções ou um texto mais rico que o apático Lorem Ipsum. Mas eu ressalto novamente, utilize-as apenas para templates, projetos em fase inicial ou em algum outro contexto onde o conteúdo verdadeiro realmente não esteja disponível.

Se a usabilidade já é, ou ao menos aparenta ser, um conceito difundido, por que ainda nos deparamos diariamente com produtos frustantes e mal projetados do ponto de vista do usuário? Talvez seja porque a qualidade “fácil de usar” é subjetiva demais.

A subjetividade da facilidade de uso

Como podemos definir com precisão se um produto possui boa usabilidade quando estamos falando de algo até então completamente subjetivo? Exemplo: o desenvolvedor que afirma que seu produto é fácil de utilizar, mesmo que na prática não seja, não está necessariamente mentido, afinal quem criou o produto e conhece seu funcionamento nos mínimos detalhes de fato vai utilizá-lo com muita facilidade.

Fácil? Para um piloto sim. ¹

Notou como a usabilidade necessita de uma definição mais precisa para ser avaliada? Apenas considerar um produto fácil de usar pode não significar nada, ainda mais vindo da pessoa que o criou ou de outra com grandes conhecimentos sobre seu funcionamento.

Uma definição mais precisa para a usabilidade

Jakob Nielsen, em seu livro Usability Engineering de 1993, ressalta como a usabilidade não é uma simples propriedade unidimensional (adeus resposta binária para a pergunta “é fácil de usar?”), e sim que ela é composta por múltiplos componentes. O autor define que ela está na grande maioria dos casos associada a cinco atributos específicos, que são eles: apreensibilidade, eficiência, memorabilidade, erros e satisfação.

Capa do livro Usability Engineering de Jakob Nielsen. Leitura recomendada para quem se interessa por usabilidade.

Apreensibilidade

A apreensibilidade pode ser considerada o mais fundamental atributo da usabilidade, pois a primeira experiência com um produto é a de aprender a utilizá-lo. Por se tratar de uma experiência com forte tendência a fixar-se na memoria do usuário, é importante que seja positiva e proporcione uma boa imagem percebida do produto.

Eficiência de uso

A eficiência de uso está diretamente relacionada ao desempenho de utilização de um usuário que já atingiu o ponto de equilíbrio em sua curva de aprendizado do produto, ou seja, estamos falando da eficiência de um usuário que já aprendeu o máximo que é capaz ou que está disposto a aprender.

Memorabilidade

Aprender a utilizar um produto pela primeira vez é consideravelmente diferente de relembrar como se faz. O conceito de memorabilidade está diretamente relacionado à facilidade de usuários antigos de relembrarem como se utiliza o produto. É uma característica muito importante para aqueles que são utilizados exclusivamente em circunstâncias extraordinárias.

Poucos erros e não catastróficos

Durante a utilização de um produto os usuários devem cometer tão poucos erros quanto for possível, considerando como erro qualquer ação cujo resultado obtido seja diferente do desejado. Alguns são percebidos e corrigidos imediatamente, prejudicando a eficiência de uso, mas erros de proporção catastrófica podem resultar em um trabalho incorreto ou perda de informação, portanto devem ser evitados ao máximo.

Satisfação subjetiva

A satisfação do usuário é um atributo subjetivo, ou seja, cada indivíduo pode possuir uma resposta completamente diferente para a pergunta de o quanto ele considera agradável utilizar do produto. Ela não obrigatoriamente reflete a realidade dos aspectos da facilidade de uso, mas mesmo assim é um dado importante sobre a usabilidade. É um atributo particularmente desejado em produtos destinados ao entretenimento.

Conclusões

O mercado já percebeu a importância da usabilidade, e agora ela é uma qualidade muito desejada para qualquer site ou aplicação web, entretanto cabe a nós, profissionais de design e desenvolvimento, compreendermos estes atributos que a compõem e com base neles projetar produtos verdadeiramente fáceis de se utilizar, mas sempre avaliando essa qualidade através de testes de usabilidade é claro.

Crédito da imagem: (1) dirkjankraan.com.

Recentemente a Mozilla, organização responsável pelo navegador Firefox, anunciou a controversa ideia de interpretar propriedades de CSS com o prefixo -webkit- em seu navegador para dispositivos móveis, causando bastante agitação na comunidade. Ela alega que muitos desenvolvedores as utilizam de maneira inadequada, criando produtos que funcionam por completo apenas em navegadores com o engine WebKit.

Estariam os navegadores com WebKit formando uma panelinha?

Mas em primeiro lugar, por que existem prefixos no CSS?

A especificação do CSS3 é composta por uma série de módulos independentes, cada um evolui e é implementado pelos navegadores em seu próprio tempo. Neste processo é comum que ocorra o suporte experimental de determinadas funcionalidades, ou seja, elas são implementadas mesmo que ainda não estejam totalmente padronizadas.

Além disso, um fabricante de navegador ainda pode por criar uma nova funcionalidade através de uma propriedade experimental. Caso seja bem aceita pela indústria ela poderá futuramente vir a se tornar um padrão.

Surge então um problema, como é possível distinguir uma recurso experimental sujeito a mudanças de um padrão já estabelecido? Para resolver este problema foram criados os prefixos de fabricantes de navegadores, os principais são:

• -webkit- para navegadores com o engine WebKit;
• -moz- para o Mozilla Firefox;
• -ms- para o Internet Explorer;
• -o- para o Opera;

Ainda é importante ressaltar que normalmente as propriedades com prefixo são temporárias, isto é, assim que o seu trabalho de padronização estiver concluído é provável que o fabricante passe a reconhecê-la apenas sem o prefixo.

A diferença entre código proprietário e CSS3

O WebKit é disparado o engine mais utilizado em dispositivos móveis, afinal de contas os navegadores do iOS e do Android são baseados neste motor. O problema é que este fato levou muitas pessoas a desenvolverem apenas para ele, utilizando recursos proprietários enquanto acreditavam estar utilizando CSS3. O artigo Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies, deixa bem claro (tradução livre):

Qualquer recurso -webkit- que não exista em uma especificação (nem mesmo em um rascunho) não é CSS3.

Um gatinho morre a cada vez que você chama um recurso proprietário de CSS3. Pense nos gatinhos. ¹

Infelizmente este ainda não é um conhecimento bem difundido, levando ao problema relatado pela Mozilla: mesmo que seu navegador possua amplo suporte aos padrões web, seus usuários visualizam versões inferiores e pouco funcionais de produtos desenvolvidos apenas com o WebKit em mente.

Como utilizar corretamente prefixos no CSS

Existem duas maneiras para se utilizar prefixos no CSS adequadamente: inserindo-os manualmente ou utilizando uma ferramenta para automatizar o processo. Mesmo que você opte por uma ferramenta para a automação do processo, lembre-se que inseri-los manualmente é uma atividade importante na compreensão do funcionamento da ferramenta, e que deste modo você nunca será dependente delas.

Utilizando os prefixos manualmente

Para obter o recurso desejado no maior número possível de navegadores, sejam eles atuais ou futuros, além de incluir todos os prefixos aplicáveis é muito importante incluir também a propriedade sem nenhum prefixo ao final do código. Por exemplo, o código da propriedade border-radius deve ficar assim:

.classe {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

Desta maneira o recurso funciona nos navegadores especificados por possuírem suporte experimental ao recurso, mas ele também funcionará em todos os navegadores que vierem a adotar o formato padronizado, incluindo versões futuras de WebKit e Firefox que eventualmente deixarão de suportar a propriedade com prefixo.

Utilizando ferramentas para a automação dos prefixos

Escrever manualmente propriedades com prefixos pode ser um trabalho muito chato e repetitivo, e ainda existe o problema de saber exatamente quais prefixos utilizar para cada propriedade. Felizmente existem diversas ferramentas destinadas a realizarem o trabalho duro por você, duas que merecem destaque são:

• Nettuts+ Prefixr: trata-se de um serviço que recebe uma folha de estilos sem prefixos e a devolve devidamente “prefixada”, existem diversos concorrentes semelhantes, mas um grande diferencial é a sua API;
• Prefix free: trata-se de um código JavaScript que lê as folhas de estilos e adiciona os prefixos necessários dinamicamente, ou seja, sem gerar novos arquivos para você cuidar pois tudo ocorre no próprio navegador do usuário.

Conclusões

Há quem alegue que os prefixos são ruins e estão gerando uma nova crise de falta de padronização, mas é inegável o fato de que eles foram fundamentais para compor o cenário positivo que descrevi no primeiro parágrafo. Abrir mão dos prefixos seria um grande retrocesso, pois compreendidos e utilizados de maneira adequada eles não causam mau algum, pelo contrário, são ferramentas poderosas que permitem utilizar funcionalidades com alguns anos de antecedência.

Crédito da imagem: (1) Goneys.

Os impactos da tecnologia no aprendizado

No vídeo abaixo é possível assistir a uma entrevista gravada ainda no ano de 1988. O entrevistador Bill Moyers conversa com o brilhante Isaac Asimov sobre passado e futuro do aprendizado, considerando principalmente o impacto que futuras tecnologias causarão (em teoria) na maneira em como estudamos.

O famoso escritor descreve um futuro onde as novas tecnologias permitiriam um modelo completamente inédito de ensino. Através de computadores conectados a grandes bases de conhecimento cada pessoa seria capaz de estudar apenas aquilo que lhe interessar, e ainda no seu próprio ritmo, no seu próprio tempo e sem sair de casa. Desta maneira existiria um interesse maior no aprendizado, já que este deixaria de ser uma simples imposição social para ser uma atividade genuinamente interessante.

Mais de duas décadas já se passaram desde que a entrevista em questão foi gravada, e é possível afirmar que as previsões tecnológicas foram certeiras. Os computadores já são muito populares e cada vez mais acessíveis, e a Internet permite a existência e o acesso a grandes bases dos mais diversos tipos de conhecimento onde os usuários podem se comunicar e interagir uns com os outros.

Infelizmente não se pode dizer o mesmo das previsões sociais. Mesmo contando com o fato de que as ferramentas disponíveis para o aprendizado estão melhores do que nunca, isso não foi suficiente para que ocorresse uma revolução na maneira como aprendemos. Ainda existem barreiras que impedem que a maioria das pessoas desenvolva um legítimo interesse pelo estudo e o carregue por toda a sua vida.

Os problemas que a tecnologia sozinha não resolve

Com certeza existe quem tire proveito de todas essas novas tecnologias para facilitar seu aprendizado e até mesmo para permitir o estudo de determinados conteúdos que sem elas sequer seria possível, mas essa é apenas uma minoria. Para a grande maioria das pessoas o estudo ainda é encarado de maneira negativa, como uma obrigação social com prazo de encerramento.

O aprendizado deve ser legitimamente interessante

Embora muitas tecnologias com grande potencial de tornar o aprendizado interessante e até mesmo divertido já existam, estas nem sempre se encontram disponíveis nas escolas e nas instituições de ensino superior. Porém, até mesmo quando encontram-se ainda existe o risco de que a instituição não conte com profissionais preparados para explorá-las de maneira adequada.

Isso se deve pelo fato de que muitas instituições ainda acreditam que o investimento em equipamentos de ponta é o único tipo necessário, quando na realidade a capacitação dos profissionais para um uso adequado destas tecnologias pode ser o grande diferencial. Que tal um exemplo simples? Um projetor multimídia pode agregar valor para aula ou simplesmente deixar os alunos sonolentos, sendo que o resultado não depende diretamente da tecnologia, mas sim da maneira como ela é utilizada.

Um exemplo ainda mais atual são os recentemente anunciados iBooks textbooks para iPads, da Apple. A ideia é ótima e torço para que dê certo (o conceito, não a tentativa de monopolizar a educação obrigando editoras a publicarem apenas no iBooks e estudantes a utilizarem apenas o iPad), mas deverá ser realizado um trabalho muito bem elaborado para que estes materiais tornem o aprendizado uma atividade interessante. Mais interessante do que trocar de aplicativo para jogar Angry Birds, por exemplo.

iBooks textbooks para iPad: um grande desafio pela frente.

O aprendizado deve ser constante e sem fim

Muito semelhante ao cenário antiquado descrito por Asimov, o nosso ensino infelizmente ainda é baseado na ideia de que um dia os estudos são finalmente “concluídos”, ou seja, a grande maioria das pessoas ainda considera o estudo como uma espécie de fardo, que uma vez concluído nunca mais será necessário estudar novamente. Este pensamento não poderia ser mais equivocado.

Antigamente o objetivo comum era concluir o ensino médio para finalmente considerar-se “livre”, para tornar-se um verdadeiro adulto (inclusive, como pode ser constatado no vídeo, é comum a um jovem que abandona os estudos considerar-se prematuramente um adulto). Hoje essa sensação é prometida ao término de uma graduação, ou até mesmo de uma pós-graduação, mas mesmo que as pessoas possuam um passo a mais em sua educação o problema continua o mesmo.

Em um mundo globalizado e com um mercado extremamente competitivo o aprendizado deve ser constante, caso contrário você corre o risco de tornar-se obsoleto. Mas este não é o único bom motivo para dar continuidade aos estudos, talvez o melhor motivo de todos seja o simples fato de que o aprendizado aprimora a sua mente, e esta sem dúvidas é uma sensação sem igual que apenas quem já consegue gostar de estudar conhece.

Conclusões

Apesar das grandes evoluções tecnológicas, a qualidade do aprendizado somente poderá apresentar uma melhoria significativa quando pelo menos dois requisitos fundamentais forem atendidos. Primeiramente o ato de estudar deve ser trabalhado de modo a tornar-se uma atividade genuinamente interessante, e em segundo lugar as pessoas precisam compreender que o aprendizado deve ser uma atividade constante e sem fim, isto é, perceber que não existe tal coisa como “concluir os estudos”.

Crédito da imagem destacada: HoboElvis.

Ainda considerando mídias tradicionais, em qualquer meio criativo sempre foi comum que o criador começasse seu trabalho com a seleção de uma “tela”, não necessariamente uma tela de pintura como é o caso de pintores, para um escultor, por exemplo, sua “tela” seria o bloco de pedra que foi escolhido para ser esculpido. O resultado de qualquer criação sempre esteve fadado a herdar as limitações do formato escolhido.

Pintado por Van Gogh ou não, um quadro sempre será limitado a sua tela.

O que muda em uma mídia digital

Com o surgimento das mídias digitais muitas limitações anteriores tornaram-se obsoletas. Por exemplo, um livro pode existir também em formato digital como alternativa ao material impresso, e este novo formato não será tão limitado como o antigo sempre foi. Um livro digital pode ser seu conteúdo buscado (quem nunca quis pressionar CTRL+F em um livro físico que atire a primeira pedra), lido através de diversas configurações de tipografia e até mesmo escutado através de um sintetizador de voz.

O controle, ao menos em teoria, passou a ser completamente do usuário.Mas infelizmente teoria e realidade nem sempre caminham juntas.

John Allsopp escreveu ainda no ano de 2000 um artigo intitulado “A Dao of Web Design”, que incrivelmente continua relevante mais de uma década depois. Nele o autor argumenta que desde seu início a web vem sendo utilizada de modo a manter antigas limitações do meio impresso, mesmo que estas não sejam mais aplicáveis.

A herança desnecessária de limitações da mídia impressa tornou o web design em uma atividade muito semelhante ao design de materiais impressos: o designer continua com o controle total sobre o resultado e o usuário ainda é obrigado a adaptar-se caso queira consumir algum conteúdo. Uma realidade um tanto quanto incoerente. Sobre o assunto, o autor argumenta (tradução livre):

O controle conhecido pelos designers dentro do meio impresso, e muitas vezes desejado no meio da web, é simplesmente uma função da limitação de uma página impressa. Nós devemos abraçar o fato de que a web não possui as mesmas limitações, e projetar para essa flexibilidade. Mas primeiramente, nós devemos “aceitar o fluxo e refluxo das coisas”.

O controle proveniente de ferramentas do tipo what you see is what you get (Adobe Dreamweaver e semelhantes, estou olhando para vocês) herdado da mídia impressa, embora muito desejado pelos designers na web com o propósito de reaproveitar seus conhecimentos em produção gráfica impressa, não é coerente com a natureza deste novo meio, e a adoção de tais ferramentas é, na verdade, prejudicial.

Sem dúvidas, o primeiro passo para se começar a explorar o verdadeiro potencial de uma mídia digital, como é o caso da web, é compreender que o controle total do designer sobre uma página impressa é na verdade uma função da limitação do meio impresso, ou seja, possuir um controle total deve ser o papel de um web designer.

O verdadeiro papel do web designer

De início pode parecer bastante desconfortável a ideia de que seu site ou aplicação web não aparecerá de maneira idêntica para todos os usuários, mas de fato isso nunca foi coerente com o meio e é cada vez mais impossível. Vou explicar o motivo.

Considerando a computação ubíqua, hoje mais do que nunca cada usuário pode utilizar um dispositivo completamente diferente para navegar na web, como desktops, laptops, tablets e smartphones (isso para mencionar apenas os mais comuns e disponíveis no mercado enquanto escrevo este artigo). Cada um destes tipos de dispositivos apresenta tamanhos de tela e resoluções bem particulares, modelos de interação diferenciados (teclados físicos, telas sensíveis ao toque, comandos de voz e assim por diante), além de muitas outras características relevantes.

Este novo cenário, que envolve uma grande mudança na maneira como utilizamos computadores e também no próprio conceito social de o que é um computador, revela que simplesmente não é possível que uma interface seja mostrada de maneira idêntica  em todos os dispositivos. Em vez de tentar lutar contra essa realidade, é muito mais interessante abraçar a natureza polimórfica da web e projetar produtos flexíveis e adaptáveis, sendo este o verdadeiro papel do web designer.

Diferentes dispositivos requerem interfaces flexíveis e adaptáveis.

Notou como o paradigma de uma mídia digital é completamente diferente do paradigma de uma mídia tradicional, como a impressa? Isso significa que é um grande equívoco considerar o web design como sendo uma atividade semelhante ao design de materiais impressos. Como acabei de dizer no parágrafo anterior e irei repetir, o verdadeiro papel do web designer é o de projetar produtos flexíveis e adaptáveis.

Conclusões

A web sem dúvidas apresenta um grande potencial. Mas para que este potencial seja totalmente explorado é de extrema importância compreender os conceitos que envolvem esta mídia digital. Apenas compreendendo estes conceitos é possível abandonar as limitações obsoletas de outras mídias que a antecederam e finalmente conhecer o verdadeiro papel do web designer. E então, está pronto para projetar sites e aplicações web flexíveis e adaptáveis?

Weiser foi um importante pesquisador que trabalhou entre os anos de 1988 e 1999 no antigo e amplamente conhecido centro de pesquisas da Xerox situado em Palo Alto, que talvez você conheça pelo nome de “Xerox PARC”. Esse centro de pesquisa é digno de ser lembrado por ser o ser berço de diversas invenções que revolucionaram a maneira como utilizamos computadores, entre elas posso citar nada menos do que o mouse a interface gráfica para usuários.

Em seu notável trabalho, o pesquisador define a computação como possuindo três grandes eras ao longo de sua história, sendo que cada uma dessas eras apresenta um paradigma único que a diferencia das demais. As três grandes eras descritas por Weiser são: a era de um computador para muitos usuários, a era de um computador por usuário e a era da computação ubíqua. Abaixo abordarei cada uma delas, explicando o seu contexto histórico e tecnológico, assim como suas principais características.

A era de um computador para muitos usuários

A primeira era de todas, como não poderia ser diferente, está diretamente ligada ao próprio surgimento da computação. Os primeiros computadores a serem construídos possuíam características físicas que hoje são no mínimo surpreendentes, eles eram demasiadamente grandes, a ponto de ocuparem salas inteiras ou até mesmo todo um prédio, e também bastante caros. Tais limitações levaram a este momento histórico ser caracterizado pelo acesso simultâneo de diversos usuários a um único computador.

Talvez o exemplo mais simples deste tipo de uso seja o dos antigos mainframes que existiam em determinadas universidades, eles eram acessados por diversos estudantes ao mesmo tempo, acesso este realizado através de diferentes terminais com interfaces de linha de comando. Este foi um modelo encontrado com bastante facilidade nas universidades estadunidenses durante os anos que precederam o surgimento e a popularização dos computadores pessoais.

A era de um computador para muitos usuários.

A era de um computador por usuário

É curioso o fato de que em determinados momentos históricos pode ter sido muito difícil imaginar que algum dia os computadores seriam pequenos e baratos o suficiente para que praticamente qualquer pessoa pudesse adquirir o seu. Mas foi apenas questão de tempo para que estas limitações fossem superadas, e como consequência a própria computação passou a possuir um paradigma completamente novo, o paradigma do computador como objeto pessoal.

O surgimento do paradigma do computador pessoal, proveniente da popularização destes, foi um grande marco. Neste período foi possível que o computador deixa-se de ser o objeto público descrito na era anterior. Agora o computador passou a ser um objeto pessoal como tantos outros, e que como o próprio nome dado ao período já sugere, é utilizado apenas por uma pessoa por vez. Este paradigma lhe parece familiar? Mesmo sendo antigo ele ainda é bastante atual. Mas por quanto tempo?

A era de um computador por usuário.

A era da computação ubíqua

Mark Weiser cunhou o termo “computação ubíqua” para descrever sua visão para o futuro  da computação, que, segundo o autor, seria caracterizado pela existência de diversos computadores que seriam todos utilizados por um único usuário, ou seja, um modelo inverso ao paradigma da primeira era da computação. Pode parecer estranho e pouco prático que uma pessoa venha a utilizar diversos computadores, mas a ideia é que cada computador possua formas e funções diferenciadas.

Embora o paradigma da era anterior ainda seja forte no momento em que escrevo este artigo, hoje mesmo já existe um crescente número de dispositivos que fazem cada vez mais parte do nosso dia-a-dia, com destaque para smartphones e tablets. Cada um destes dispositivos é tecnicamente um computador, e cada um apresenta características de uso bastante diferentes dos demais. Deste modo a era da computação ubíqua é uma descrição bastante fiel do rumo que estamos presenciando para a computação, aos poucos este novo paradigma estará presente cada vez mais em nossas vidas.

Weiser ainda acredita que o computador, assim como diversas outras tecnologias mais simples já consolidadas em nossas vidas, tende a “desaparecer”, mas não no sentido de deixar de existir, e sim no de deixar de ser percebido, tamanha a sua integração com o nosso dia-a-dia. Seguindo a mesma lógica, a Internet e a web também são grandes candidatas a “desaparecer”, conforme evoluem e estão presentes cada vez mais em nossas vidas é possível que comecem a se tornar “invisíveis” para seus usuários, ou seja, indistinguíveis do que o autor chama de “o tecido da vida cotidiana”.

A era da computação Ubíqua.

Conclusões

Prever o futuro não é uma tarefa fácil, é possível que o paradigma do computador pessoal esteja longe de ser extinto, sendo assim destinado a coexistir com o paradigma da computação ubíqua. Mas também é possível que nos próximos anos a computação ubíqua substitua totalmente o conceito de computador pessoal. O próprio Steve Jobs, que foi um dos responsáveis pela popularização dos computadores pessoais, afirmava em suas apresentações que já estamos na “era pós PC”.

De qualquer maneira é possível notar que o modo como utilizamos computadores vêm sofrendo grandes alterações desde o início da computação. No momento que escrevo este artigo, embora o paradigma da segunda era descrita por Weiser ainda predomine, posso afirmar que a computação ubíqua já é uma realidade para um número cada vez maior de pessoas, e isso definitivamente deve ser levado em consideração no momento de projetar e construir produtos baseados na web, pelo menos por quem busca a excelência em seus trabalhos.

Se você preza por qualidade, em pouco tempo é bastante provável que seu produto precise funcionar em desktops, laptops, tablets, smartphones, televisões e qualquer outro dispositivo atual ou futuro que vier a possuir conectividade e um navegador web. E como cada um desses produtos apresenta uma interação humano-computador diferenciada, é crucial que a interface do seu produto adapta-se da melhor maneira possível para cada um destes eventuais modelos de interação. Tudo isso certamente será bastante trabalhoso, mas acredito que também bastante gratificante.

Motivos para não utilizar um plugin para essa tarefa

A funcionalidade de adicionar plugins ao WordPress é realmente muito interessante, ainda mais aliada ao repositório oficial que permite buscar e instalar novos plugins com grande facilidade dentro do próprio painel de administração do sistema. Entretanto, ao escolher instalar um plugin você pode acabar adquirindo uma solução demasiadamente complexa a qual você não controla precisamente o funcionamento, e que de certo modo pode poluir a base de dados da sua instalação do WordPress.

Plugins podem sim ser muito úteis em diversas ocasiões, principalmente para pessoas leigas, mas determinadas tarefas são tão simples de serem realizadas manualmente por pessoas não leigas que não há necessidade de sair instalando plugins os quais você não possui total controle sobre o seu funcionamento. É por esse motivo que elaborei esta simples solução de como inserir o tracker do Google Analytics no WordPress, e estarei disponibilizado o código em questão logo abaixo.

O código necessário para inserir o Google Analytics

<?php

/**
 * As seguintes linhas deverão ser colocadas ao final do arquivo.
**/

function insertGoogleAnalytics()
{
	if ( !is_user_logged_in() )
	{
	?>

		<script type="text/javascript">

			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-9999999-9']); //substitua "UA-9999999-9" pelo seu código do Google Analytics

			//descomente para permitir um domínio com vários subdomínios
			//_gaq.push(['_setDomainName', 'dominio.com.br']); //substitua "dominio.com.br" pelo seu domínio

			//descomente para permitir vários domínios de nível superior
			//_gaq.push(['_setAllowLinker', true]);

			_gaq.push(['_trackPageview']); 

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();

		</script>

	<?php
	}
}

add_action('wp_head', 'insertGoogleAnalytics');

Este código deve ser inserido no arquivo functions.php, que é um arquivo opcional para cada tema desenvolvido para o WordPress. Praticamente todos os temas que são criados fazem uso deste arquivo, e se este for o caso, o código acima deverá ser inserido ao final do arquivo existente, caso contrário você pode criar normalmente o arquivo em branco na pasta raiz do tema que utiliza e então inserir o código em questão.

O primeiro passo envolvido na produção deste código é declarar uma função nomeada insertGoogleAnalytics (que na verdade é um procedimento por não possuir retorno, mas como o PHP não distingue os dois, continuarei chamando de função). Tal função será responsável por escrever nas páginas em HTML que serão geradas dinamicamente o código responsável pelo funcionamento do Google Analytics, que trata-se de um trecho em JavaScript que é fornecido pelo próprio serviço.

Por ser comum que o autor fique visitando o próprio blog repetidamente para verificar se tudo está correto, para visualizar e revisar artigos, ou por qualquer outro motivo, não é interessante que as suas próprias visitas sejam contabilizadas nas estatísticas. Tendo em mente este motivo, a função citada no parágrafo anterior possui um bloco condicional que utiliza a negação do método is_user_logged_in do WordPress, ou seja, o código dentro deste bloco será executado apenas quando o visitante não estiver logado.

Como o código fornecido pelo Google Analytics está em JavaScript (linguagem de programação front-end), e estamos trabalhando com PHP (linguagem de programação back-end), a solução que utilizei dentro do bloco condicional mencionado no parágrafo anterior foi delimitar o encerramento do código PHP, inserir o JavaScript, e então inserir novamente a tag de abertura do PHP. Um echo com concatenações (ou até mesmo diversos deles) também funcionaria, mas seria muito mais trabalhoso para um grande bloco de JavaScript como este.

No momento em que escrevo este artigo existem três opções oferecidas pelo Google Analytics na etapa de solicitar o código de rastreamento, são elas: um único domínio, um domínio com vários subdomínios e vários domínios de nível superior. O código acima está de acordo com a primeira opção, para a segunda opção basta descomentar a linha 19, e para a terceira opção basta descomentar as linhas 19 e 21. Para que sejam facilmente identificadas ambas as linhas estão isoladas das demais e devidamente demarcadas com comentários que explicam sua função.

A função responsável por inserir o código de rastreamento na página já está pronta, mas ela é apenas uma função, para que o seu código seja de fato executado ela deverá ser invocada em algum momento. Por esse motivo a função add_action do WordPress é chamada ao final do código. Com estes parâmetros a nossa insertGoogleAnalytics será executada no cabeçalho, inserindo o código de rastreamento no local recomendado pela pela Google (caso não funcione, certifique-se de que seu tema execute a ação wp_head).

Conclusões

Quando nos acomodamos com determinadas facilidades destinadas a leigos corremos o risco de não perceber como essas atividades poderiam ser realizadas manualmente sem grandes esforços, e ainda trazendo resultados os quais possuímos total controle sobre. Neste artigo foi possível averiguar a relativamente facilidade para inserir manualmente o código de rastreamento do Google Analytics em uma instalação do WordPress, posso dizer que trata-se de uma tarefa totalmente acessível a qualquer pessoa que trabalhe com desenvolvimento web, e o resultado estará totalmente ao seu controle se você souber o que está fazendo.