Vamos falar um pouquinho mais de meta-tags, mais especificamente da meta description.

Meta Description

O nome é auto-explicativo: é uma descrição do texto que segue, enfatizando os principais pontos. Deve ser o mais resumido possível afim de evitar penalização (algo em torno de 150 caracteres) e deve ir, como as outras metas, dentro da tag head.

<meta name="description" content="Um bom exemplo de meta descrição resume bem o conteúdo do texto, enfatizando os principais tópicos" />

Três pontos a frisar:

1) Muita gente usa como texto de descrição os primeiros X caracteres ou mesmo o primeiro parágrafo inteiro do texto no body. Isso NÃO é legal pois corre-se risco de ser penalizado pelo buscador - como disse no texto anterior sobre Keywords, buscadores não gostam de "ecos" dentro da página, lembram?

2) Assim como as Keywords, não use descrições repetidas em todas as páginas. Novamente, se não for possível criar as descrições de forma individual, prefira não usar nenhuma deixando toda a relevância por conta do texto contido no body (afinal, também como nas Keywords, uma description redundante ou que tenha qualquer espécie de conflito de informação com o texto pode vir a trazer muito mais prejuízo do que ajuda).

3) Oriente os responsáveis pelos textos a escrever esta síntese "com amor". Quando a description existe na página, o buscador a usará para gerar o resultado de busca - ou seja, podemos dizer que ela tornar-se-á o cartão de visitas do texto e, quanto melhor escrito/resumido, mais convidativo ao clique será ao nosso amigo usuário.

Mas e aí, quão importante é isso?

Depende do ponto de vista. Como dito em outros textos, tudo o que mais importa para os buscadores hoje em dia encontra-se no BODY do texto, e os demais requisitos até servem pra incrementar (urls amigáveis, microformatos, meta-tags, robots.txt, etc) mas, de um modo geral, é a qualidade da sua informação que fará a diferença.

O próximo texto e último dessa série (o que não quer dizer que eu não vá voltar ao assunto) falarei um pouco a respeito do que é essa qualidade de informação, e como qualidade pode ser "emprestada" ou repassada.

Até!

CSS Sprites consiste em unirmos imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu HTML.

O principal objetivo da utilização desta técnica é a economia de requisições HTTP, fazendo com que seu site ganhe performance e economize banda.

Imagem

Para começar, unimos todas as imagens utilizadas em apenas uma:

HTML

Montamos uma lista inserindo uma classe para cada “a”, desta forma conseguiremos manipular cada imagem separadamente:

<ul>
<li><a href="#" title="Aspira Soldier" class="aspira_soldier">Aspira Soldier</a></li>
<li><a href="#" title="Elite Soldier" class="elite_soldier">Elite Soldier</a></li>
<li><a href="#" title="Sniper Soldier" class="sniper_soldier">Sniper Soldier</a></li>
<li><a href="#" title="Gas Soldier" class="gas_soldier">Gas Soldier</a></li>
</ul>

CSS

Definimos no “a” o background com a imagem e nas classes criadas manipulamos onde serão buscados os trechos desejados da imagem através da propriedade “background-position”.

Seguindo esta mesma linha, definimos o “a:hover” de cada classe:

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Soldiers */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;border:1px solid #eee;width:100px;height:100px;text-indent:-15000px;background-image:url(soldiers.gif)}
ul li a:hover{border-color:#999}

/* Aspira Soldier */
ul li a.aspira_soldier{background-position:0 0}
ul li a.aspira_soldier:hover{background-position:0 -100px}

/* Elite Soldier */
ul li a.elite_soldier{background-position:-100px 0}
ul li a.elite_soldier:hover{background-position:-100px -100px}

/* Sniper Soldier */
ul li a.sniper_soldier{background-position:-200px 0}
ul li a.sniper_soldier:hover{background-position:-200px -100px}

/* Gas Soldier */
ul li a.gas_soldier{background-position:-300px 0}
ul li a.gas_soldier:hover{background-position:-300px -100px}

Resultado

Neste caso temos o efeito rollover, onde passando o mouse sobre cada imagem ela é trocada por outra:

Declaração única

A declaração única consiste em compactar diversas propriedades com a mesma finalidade em apenas uma.

Aqui veremos quais são essas propriedades e como utilizar a declaração única corretamente.

Margin e padding

Se todos os valores forem iguais:

/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

/* Declaração única */
seletor{margin:10px}

Se os valores top/bottom e right/left forem iguais:

/* Declaração normal */
seletor {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}

/* Declaração única */
seletor{margin:10px 20px}

Se os valores right/left forem iguais:

/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}

/* Declaração única */
seletor{padding:10px 20px 30px}

Se nenhum valor for igual:

/* Declaração normal */
seletor {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

/* Declaração única */
seletor{padding:10px 20px 30px 40px}

Border

/* Declaração normal */
seletor {
border-width: 1px;
border-style: solid;
border-color: #666666;
}

/* Declaração única */
seletor{border:1px solid #666}

Font

/* Declaração normal */
seletor {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 18px;
font-family: arial;
}

/* Declaração única */
seletor{font:italic small-caps bold 12px/18px arial}

Background

/* Declaração normal */
seletor {
background-color: #666666;
background-image: url(imagem.gif);
background-repeat: repeat-x;
background-position: top;
}

/* Declaração única */
seletor{background:#666 url(imagem.gif) repeat-x top}

List-style

/* Declaração normal */
seletor {
list-style-type: disc;
list-style-position: inside;
list-style-image: url(imagem.gif);
}

/* Declaração única */
seletor{list-style:disc inside url(imagem.gif)}

Color

Se todos os hexadecimais forem iguais:

/* Declaração normal */
seletor {
color: #666666;
}

/* Declaração única */
seletor{color:#666}

Se todos os pares de hexadecimais forem iguais:

/* Declaração normal */
seletor {
color: #6699cc;
}

/* Declaração única */
seletor{color:#69c}

Importante

Na declaração única os valores sempre devem seguir o sentido horário (top/right/bottom/left) e a compactação dos hexadecimais pode ser aplicada em qualquer propriedade que contenha cor (border-color, background-color, etc).

Método otimizado

Diferente da identação convencional utilizada no HTML (com TAB’s) o CSS pode utilizar um método otimizado.

Exemplo utilizando a identação convencional (355 bytes):

/* CSS Reset */

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
text-decoration: none;
}

/* Menu */

ul li {
float: left;
}

ul li a {
float: left;
display: inline;
margin-right: 5px;
padding: 10px;
border: 1px solid #eee;
font: bold 12px arial;
color: #666;
background: #fff;
}

ul li a:hover {
border-color: #999;
}

Exemplo utilizando o método otimizado (291 bytes):

/* CSS Reset */
*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}

/* Menu */
ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;padding:10px;border:1px solid #eee;font:bold 12px arial;color:#666;background:#fff}
ul li a:hover{border-color:#999}

Lembrando que cada TAB, quebra de linha ou espaço consumirá 1 byte, devemos eliminá-los mesclando todos os seletores, propriedades e valores, removendo sempre o último “;” (ponto e vírgula) antes do fechamento da “}” (chave).

A idéia é termos um documento leve afim de economizar R$ por conta da diminuição do consumo de banda, porém a organização é essencial para justificar a ausência da identação, para isso, procure adotar um padrão na ordem das propriedades e identifique cada bloco utilizando comentários.

Parece pouco?

Vamos supor que um grande portal tenha em média 1 milhão de acessos por dia:

355 bytes * 1.000.000 = 355.000.000 bytes (identação convencional)
291 bytes * 1.000.000 = 291.000.000 bytes (método otimizado)
355.000.000 bytes – 291.000.000 bytes = 64.000.000 bytes (economia)
64.000.000 bytes = 62.500 megabytes = 61 gigabytes

Economia de 61 gigabytes por dia para um trechinho de CSS! Ainda parece pouco?

Padronização para elementos comuns em sites

Qual a vantagem real disso? Um desenvolvedor esperto perceberá que, usando ou criando os devidos plugins, a extração e conversão de dados para qualquer formato em uma página é muito mais fácil. Um exemplo interessante disso é o hCard, que permite puxar e exportar dados cadastrais ou eventos em um formato reconhecível por qualquer gerenciador de e-mails  (seja online, seja um outlook da vida).  Num futuro pode-se até pensar em browsers que já venham com funções nativas voltadas que use este tipo de recurso, valendo-se de APIs como o Google Maps ou o Yahoo Maps, por exemplo.

E claro, como toda padronização, ela auxilia na usabilidade,  pois facilita a vida de vários “interpretadores” (screen readers, browsers, aplicativo Air, etc) na forma de usar a informação fornecida.

Melhora na qualidade para indexadores de busca

Não encontramos dados do quanto de relevância os buscadores estão a dar para os microformats, embora tanto o Google quanto Yahoo já tenham anunciado suporte. De qualquer forma, o fato dos algorítimos de busca interpretarem qualquer coisa como texto (mesmo que sejam tags), já indica que os microformatos por si só são “alimentadores de relevância” por natureza.

Um exemplo que pode ser visto é este:  quando realizamos uma esta busca no Google, um dos resultados apresentados (o terceiro, logo abaixo do título) já possui quantidade total de reviews a respeito do estabelecimento procurado.  Isto é possível graças ao hReview que, como o proprio nome sugere, serve para destacar uma opinião sobre um produto, serviço ou quaquer outra coisa.

Humanamente “entendível”

Ao contrário de outros formatos de proposta similar, os microformats tem como conceito ser primeiro compreensível por seres humanos e somente depois por máquinas.  A sintaxe é muito mais intuitiva, mais simples de compreender e memorizar. Acredito que essa é de longe sua principal vantagem sobre o RDFa, por exemplo, que não só é um código mais complexo como ainda por cima possui uma série de padrões diferenciados. Outra vantagem sobre RDFa é que os microformatos permitem ao desenvolvedor a escrever BEM menos código, mantendo uma sintaxe simples, limpa e totalmente intelígivel para qualquer outra pessoa que mexa no código depois – mesmo que não familiarizada com estas definições (no futuro pretendemos entrar novamente no assunto RDFa x microformatos, agora não é o momento).

Aplicável ao HTML 5, XHTML 2

As próximas versões de HTML e XHTML tem, entre outras propostas, aplicar para a web do futuro o conceito de Web Semântica (aquela história de que toda informação deve ser um ‘pacote completo’ de dados e referências, manja?), o que vai suprir parte da necessidades propostas pelos Microformats. Embora muita gente já esteja usando estas definições, a web ainda não está pronta para lidar com eles – Por que não usar os microformatos, que não impactarão em absolutamente nada na codificação e já são aceitos e usados? Ele não conflitará em absolutamente nada com HTML 5 ou XHTML 2 e, de lambuja, ainda ajudará os buscadores a indexar e classificar seu site de forma bastante precisa.

Problemas com microformats

Em 2008 a BBC renunciou ao uso dos microformatos por conta do formato hCalendar. Este formato cria um problema de acessibilidade por usar a tag abbr como marcador e não como uma abreviação propriamente, o que confunde boa parte dos screen readers. Num contexto normal, ela seria usada assim:

<abbr title="Organização Mundial de Saúde">O.M.S</abbr>

Um screen reader habilitado para ler siglas por extenso leria este trecho como “Organização Mundial de Saúde”.

No caso do hCalendar, a tag é usada da seguinte forma:

<abbr title="20070312T1700-06">March 12, 2007 at 5 PM</abbr>

O screen reader não leria como data,  mas sim  “Vinte milhões, sete mil e trezentos e 12 TÊ mil e setecentos traço zero seis”.  Já existe um fix para isso sugerido pela própria Microformats.org (que são os pais da criança), usar span no lugar de abbr.

Até onde testamos e pesquisamos este foi a única problema registrado. Usamos o FANGs para emular a acessibilidade para deficientes visuais.

Mas é só isso?

Por enquanto sim. O assunto é extenso demais para ser tratado num único post – num futuro não muito distante voltaremos a ele e nos aprofundaremos em pontos mais específicos. Enquanto isso não ocorre, a lista abaixo fornece uma bela gama de coisas para brincar. Divirta-se!

Microformatos – Referências

http://microformats.org – site oficial do projeto. Todas referências, exemplos, geradores automáticos, wiki e lista de discussão estão lá.

http://en.wikipedia.org/wiki/Microformat – tópico na wikipédia, a informação técnica resumida.

https://addons.mozilla.org/pt-BR/firefox/addon/4106 – Operator, ADD-on do firefox que detecta e importa dados de microformatos. Tem alguns problemas ainda, mas já dá uma bela visão de usos.

https://addons.mozilla.org/pt-BR/firefox/addon/402 – FANGS: um emulador de screen reader. Infelizmente, após a atualização do Firefox para a versão 3.5 ele perde a compatibilidade. Espero que resolvam logo este problema, estava usando-o para uma pesquisa de acessibilidade.

http://www.semanticfocus.com/blog/entry/title/microformats-vs-rdf-how-microformats-relate-to-the-semantic-web/ – Artigo que aprofunda-se um pouco na discussão a respeito do formato RDFa vs Microformats.

http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html – mostra a implementação feita pelo google para o formato hReview

http://www.google.com/search?q=Drooling+Dog+BarBQ – Link para a busca com o resultado do google.