É comum usar o JavaScript pra criar HTML e CSS dinamicamente e dar uma experiência de uso muito melhor para o visitante.A questão é que raramente nos preocupamos com a semântica do código que geramos via JavaScript, afinal, ele não altera o código fonte da página.

Isso com certeza vai mudar, e já existem sinais disso. O Firefox 3 virá com suporte a aplicações web offline, o que significa que ele terá que analisar o JavaScript dessas aplicações e simular as respostas que o servidor gera. Talvez essa seja a primeira de muitas aplicações a considerar aquilo que o JavaScript gera na página e não simplesmente o HTML puro.

No futuro é provável que o JavaScript ganhe muito mais atenção nessa parte do que hoje, principalmente se o Google ou algum grande serviço começar a indexar posts levando em conta o JavaScript das páginas. Inclusive é bem provável que isso aconteça, já que o Mozilla já é utilizado por alguns bots do Google.

Por enquanto não há com o que se preocupar, mas é sempre bom pensar no futuro, não é?

1. Use só em casos de emergência

   Já viu um botão protegido por um vidro com um aviso quebre em caso de emergência? O <div> deveria ter um desses. Use somente quando tiver certeza que não existe elemento melhor.

2. É HTML, não CSS

   Não escravize o HTML, o <div> não existe só pra que você possa usar CSS. Eu insisto muito nesse ponto, crie os ids e classes de maneira descritiva.

3. O <div> é semânticamente neutro

   Na especificação do HTML é dito que os elementos <div> e <span>, em conjunto com os atributos id e class, oferecem um mecanismo genérico para adicionar estrutura aos documentos.

   Isso não significa que ele é completamente sem semântica. Quem dá a semântica pra ele é você usando os atributos id e class.

Além do <div> esses mandamentos servem para o <span> também.

Existem quatro atributos HTML que são praticamente univerais, você pode usar em quase qualquer elemento. São eles o class, id, lang e title.

O class e o id são muito parecidos, inclusive muitas pessoas confundem e usam um no lugar do outro frequentemente. Ambos tem a função de descrever um elemento, sendo o id para identificação e class pra classe (ou grupo).

Pra exemplificar, vou criar um parágrafo sobre mim:

<p id="alexandre-gomes-gaigalas" class="brasileiro">Alexandre é o editor do Acorda pra Web!</p>

Identifique

O id é como um número de RG, não podem existir dois iguais em uma página, por esse motivo eu escolhi colocar meu nome completo e não somente alexandre, dessa maneira eu permito usar ids para outros Alexandres na página.

Classifique

O class classifica o elemento. No caso acima eu utilizei o grupo brasileiro para classificar nacionalidade.

Usando essa classe eu poderia por exemplo colocar um fundo verde e amarelo usando CSS em todos os parágrafos que classificassem brasileiros, ou poderia ocultar todos os parágrafos exceto os brasileiros usando JavaScript e DOM.

É possível ainda utilizar várias classes no mesmo elemento, como veremos abaixo:

<p id="alexandre-gomes-gaigalas" class="brasileiro maior-de-idade programador">Alexandre é o editor do Acorda pra Web!</p>

O exemplo acima é mais rico. As classes brasileiro, maior-de-idade e programador foram colocadas separadas por espaços. Isso me permitiria trabalhar normalmente usando CSS e JavaScript separadamente com cada classe, selecionando apenas brasileiros, apenas programadores ou apenas maiores de idade.

Conclusão

Entendendo a real função dos ids e classes você percebe como é errado colocar uma classe ou id com nome direita, ou vermelho ou mesmo rodapé. Esses são todos nomes que descrevem aspectos visuais, não conteúdo.

Você tem que pensar no motivo que te leva a identificar ou classificar um elemento, e não no resultado visual que deseja atribuir usando CSS. Não escravize o HTML.

Pra finalizar o artigo, vamos criar um exercício mental e colaborativo, e dependendo desse exercício eu crio um mega-exemplo e coloco pra vocês semana que vem:

Como você se classificaria usando classes no HTML?

Se você ler o que eu escrevi sobre ontologias, talvez fique mais claro entender o que eu estou tentando dizer com esse artigo.Imagine se pudessemos ensinar uma máquina tudo que a humanidade aprendeu. É um dos primeiros passos pra criação da tão sonhada (e temida) Inteligência Artificial.

A primeira etapa pra criar um sistema que ensine tudo (ou quase tudo) que os humanos conhecem à uma máquina é organizar todo esse conteúdo, e posso dizer que estamos quase lá.

A Wikipedia é um bom começo. Lá há uma enorme fonte de informações organizada por categorias, atualizada com frequência e armazenada digitalmente. Se pudessemos transformar todo conhecimento armazenado na Wikipedia em ontologias, teríamos uma base riquíssima de informações.

Um exemplo do que poderíamos fazer, seria consultar a Wikipedia como se fosse um banco de dados, através de qualquer sistema. Poderíamos por exemplo pesquisar automaticamente todos os autores franceses de livros que nasceram entre 1850 e 1950, e obter um resultado com os livros que eles publicaram, autores influenciados e tudo mais. Potencial não falta.

Já existem alguns grupos se empenhando em tornar isso uma realidade, como o banco de dados Wikipedia³, criado pelo mesmo pessoal do SystemOne, e a dbpedia.org.

A Wikipedia é gigante sim, e mesmo dormindo já tem um poder incrível. Quando ela acordar pra web semântica é revolução na certa.

O framework para aplicações em AJAX Spry, da Adobe, é sem dúvida ágil e organizado na maneira de programar, mas é um assassino da semântica no HTML!

Ao contrário de frameworks muito populares como o Prototype, jQuery e MooTools, que permitem que você crie JavaScript não-obstrutivo, o Spry incentiva uma série de práticas que vão totalmente contra os padrões:

• Novos atributos para elementos HTML (spry:whatever)
• Utilização massiva de onClick, onMouseOver e similares.
• Necessidade de JavaScript para a página funcionar.

Em outras palavras a Adobe pisou na bola. Não recomendo o Spry.

Confesso que demorei pra compreender o que são ontologias, é um conceito muito abstrato. Vou tentar explicar mais ou menos o que elas são e a importância que elas tem no futuro da Tecnologia da Informação.

Na filosofia, ontologia é o estudo da existência ou do ser (verbo). É basicamente uma maneira de compreender identidades e grupos de identidades, chamados de classes.

Na Tecnologia da Informação chamamos de ontologias as classificações de identidades, sejam elas informação ou matéria (objetos no mundo real). Podemos criar uma ontologia que descreva vídeos no YouTube e as relações entre os mesmos, assim como podemos criar uma ontologia sobre os diferentes tipos de janelas de alumínio. Importante é saber que ontologias podem descrever qualquer coisa.

As ontologias funcionam de maneira muito parecida com o nosso cérebro, relacionando identidades similares e agrupando-as em classes diferentes. Um telefone por exemplo se enquadra em diversos grupos: telefones, aparelhos eletrônicos, instrumentos de comunicação e assim por diante.

Usando as ontologias uma máquina simples pode fazer coisas que humanos fazem no dia-a-dia, como cruzar informações de sistemas diferentes e buscar informações sem que seja solicitado, através de um tipo de poder de compreensão (limitado, claro).

A linguagem que o W3C recomenda para criação de ontologias é a OWL, baseada no XML. De qualquer maneira, o uso de ontologias ainda é muito raro e quase que exclusivamente acadêmico, e não existem muitas ferramentas públicas que conseguem processar o conteúdo dessas ontologias. É mais questão de curiosidade mesmo.

Você acha que se as máquinas soubessem identificar e agrupar toda informação que nós humanos sabemos, ela se tornaria inteligente?

Um problema social no mundo das linguagens pra internet que anda ocorrendo com frequência é a escravização do HTML, mesmo já idoso e com seus anos de experiência. Dá até tema de novela, o irmão que nasceu pra completar o HTML acabou por escravizá-lo: O CSS.

Brincadeiras à parte, isso acabou se tornando mesmo uma realidade. Utilizamos o CSS para duramente escravizar o HTML, alguns exemplos com os quais você pode se identificar:

• O cliente afirma “Quero um site com a lista de links e o campo de busca na coluna da direita” e você prontamente ajeita o chicote do seu CSS e cria um div no HTML chamado “coluna-direita” com tudo que ele quer dentro.
• A direção da empresa mudou e decidem que agora a lista de links fica no rodapé. Rapidamente você pega e coloca o HTML no tronco, criando um div chamado “rodape” e movendo o código do “coluna-direita” pra lá.

Aparentemente não há nada de errado com esses procedimentos, você provavelmente já fez algo parecido antes. Mas e se tivesse um jeito melhor?

A sinhazinha mais famosa na década passada era a tabela, ela jogava o conteúdo pra lá e pra cá só pra atender aos desejos do layout. Esse é um dos piores aspectos da web sem padrões, e ainda continua. A senzala mudou de dono, agora quem manda é o CSS.

E se desde o começo você decidisse que a lista de links entraria no div “lista de links” e quando fosse necessário mudar a posição da mesma, alteraria apenas o CSS? O mesmo para o campo de busca, ele entraria no div “busca”, e assim por diante. Cada elemento da página entraria em um elemento que é capaz de descrevê-lo, e todos os demais seriam eliminados. Isso é semântica!

Esqueça coisas no HTML como “coluna-direita”, “cabeçalho” e “rodape”, crie elementos que realmente mostram o que eles são no conteúdo e não no visual.

O HTML e o CSS tem que ser irmãos, e se respeitar. Layout respeita conteúdo. Há dúvidas de que tudo funciona melhor assim?

Já dei uma pequena introdução e alguns exemplos de Web Semântica aqui no blog, só que o difícil mesmo é conseguir algo pra mostrar na prática. Resolvi deixar esses exemplos pra falar um por um, especificamente.

Hoje vou falar de um dos mais surpreendentes, o System One. Ele cria um ambiente típico de web semântica em internet e intranet.

A funcionalidade básica do System One é a mesma de um wiki, dentro de uma intranet. É como se você rodasse um tipo de wikipedia dentro da sua empresa, para organizar documentos, emails, informações, fotos e tudo mais.

O que torna o System One diferente é a maneira que você cria as páginas dentro do wiki. Ele possui um editor de texto próprio bem simples, com uma função interessante: conforme você digita, ele traz na parte inferior resultados relacionados com o texto que você está digitando. As buscas são feitas na internet, nas próprias páginas do System One, nos seus emails particulares, no seus feeds prediletos e nos seus arquivos pessoais.

Cada usuário associa sua conta de email, seu arquivo OPML contendo os feeds prediletos e seus arquivos pessoais de maneira sigilosa. Dessa forma, somente os seus feeds, emails e arquivos são pesquisados quando você está digitando, além de toda a internet, claro.

Isso se encaixa praticamente de uma maneira idêntica a aquela que eu descrevi no meu post com exemplos de Web Semântica, só que ao invés de ser um editor para blogs, é um editor para wikis.

A melhor maneira de mostrar como ele funciona, é vendo o pequeno screencast sobre (em inglês), vale a pena.

Atenção: Não estou falando da doença anorexia nervosa. Esse artigo faz apenas uma comparação humorística sobre uma linguagem tecnológica e não tem intuito ofensivo.

Uma prática muito comum no HTML é tornar os elementos anoréxicos, sendo os mais afetados as âncoras e imagens, embora outros elementos poderiam dar uma boa engordada.

Por padrão as âncoras (o elemento a que forma os links) no HTML não requerem nenhum atributo por padrão, embora seja comum usar o atributo href (por motivos óbvios).

Um exemplo de âncora anoréxica seria essa:

<a href="http://www.acordapraweb.com">site interessante</a>

Apenas a ligação em si é definida, e mais nenhuma informação sobre o destino dela é determinada. Uma pena.

Vamos ver agora uma âncora saudável, corada e em boa forma:

<a href="http://www.acordapraweb.com" title=”Acorda pra Web! - Web Semântica” hreflang=”pt-br”>site interessante</a>

Olhem! Dá até gosto de ver. Além da ligação essa âncora informa ao HTML qual a lingua da página de destino (usando o atributo hreflang) e atribui um título explicativo à mesma (atributo title). Uau!

Uma das âncoras mais bem comportadas, que come bem e fica gordinha, são âncoras de arquivos para download. Por exemplo, nessa:

<a href="http://www.acordapraweb.com/compatibilidade.html" title=”Acorda pra Web! - Tabela de Compatibilidade CSS” hreftype=”text/html” hreflang=”pt-br” rel=”enclosure”>Compatibilidade CSS em navegadores</a>

O atributo hreftype define o tipo de arquivo do link. Nesse caso foi text/html, mas você pode especificar application/zip para arquivos compactados em zip por exemplo.

Outro atributo interessante é o rel com valor enclosure. Esse é um dos microformatos essenciais, que define que o conteúdo daquele link deve ser tratado como um download.

*Imagem por Peter Werner