Tableless, Webstandards e Semantic Web

O objetivo deste texto não é ser uma verdade absoluta, tampouco pretendo abordar todos os mínimos detalhes do tema a ser discutido, pois, provavelmente poderia ser escrita toda uma coleção de livros e ainda assim não abordaria-se todas as minúcias de um tema tão complexo.

Observação: Eu posso estar errado.

As melhores pessoas para falarem sobre tableless é o pessoal do Tableless.com.br, por isso, não acredite em nada do que está escrito abaixo e só acredite neles quando se tratar deste assunto.

Ao contrário do que pode parecer, uma página tableless não é uma página totalmente sem tabelas, e sim, uma página com <table> para construir tabelas de dados e <div> para construir divisões de conteúdo.

Por quê? Porque dessa forma os browsers não PC vão rederizar o conteúdo de forma inteligível mesmo que as tabelas se percam na renderização. Também porque alguns browsers antigos (todas as versões do Internet Exploder incluídas) precisam baixar todo o conteúdo da tabela antes de exibi-la, ou seja, se todo o seu layout está dentro de uma tabela, o browser só vai exibir o conteúdo depois de baixar tudo, imagens, texto, animações etc.

_ Podre isso né?

Nem tanto, pois, lembre-se, as <table> foram feitas para formatar tabelas de dados – como preços de produtos, ou os ramais e os funcionários dos departamentos de uma certa empresa, logo, é aceitável que o browser baixe tudo antes de exibir, para não confundir o usuário com informações "incompletas".

Também faz parte desse "movimento" a utilização das tags para o que elas foram projetadas, por exemplo, se você tem um título, use: <h1>, se você tem um subtítulo: <h2>, <h3>, <h4> e assim por diante. Se você tem uma lista de itens – um Menu, por exemplo -, use: <ul> ou <ol> e <li> para cada item. Se vai formatar uma lista de definições: <dl>, <dt>, <dd>. Se você vai escrever uma definição: <dfn>, uma abreviação: <abbr>, um acrônimo: <acronym>, uma citação: <cite>, um código computacional: <code> e de forma semelhante existem dezenas de tags específicas para cada tipo dee conteúdo, o melhor mesmo é estudar a documentação do HTML 4.01 do W3C. Estes padrões é o que chamamos de webstandards.

_ Mas por quê isso, pra quê esse fundamentalismo todo em volta dos webstandards?

Xiita? Eu? Quê isso! Um dos motivos é que os arquivos ficam muito menores, podendo chegar a menos da metade do tamanho do arquivo não tableless. A redução é de alguns KB, mas em um site como o UOL ou Terra essa redução aparentemente insignificante pode traduzir-se em dezenas de terabytes economizados! Para ver mais exemplos como este veja os estudos de caso do Tableless.com.br.

Outro motivo é que marcados semânticamente, um browser não visual – como um leitor de tela ou um robô de busca – vai saber o que fazer com o texto que está com marcação semanticamente correta (conceitos de Semantic Web [Web Semântica]). Por exemplo, um leitor de tela ao invés de ler WYSIWYG – o que seria um verdadeiro caos – lê "What You See Is What You Get" se seu acrônimo estiver marcado assim: <acronym title="What You See Is What You Get">WYSIWYG</acronym>.

E não é só isso, um robô de busca – Google por exemplo – pode colocar em seu banco de dados que sua página tem a expressão "What You See Is What You Get" no seu conteúdo caso você use o <acronym>, se você não usar essa tag ele simplesmente não vai saber que WYSIWYG tem o mesmo significado. Isso implica que, se alguém procura por WYSIWYG, seu site vai aparecer no resultado, porém, se alguém procura por "What You See Is What You Get", bem, aí sua página rodou, você não estará no resultado.

A publicidade gratuita dos sites de procura é muito preciosa e não pode ser desperdiçada. Um texto marcado com <h1> por exemplo, recebe um escore muito maior que um marcado com <p>. No futuro, com a popularização da Semantic Web, poderemos criar mecanismos de busca específicos, como, por exemplo, um que procure apenas pela definição de "opróbrio", ou então pelo significado da abreviação LTDA.

_ Mas afinal, qual a diferença entre acrônimo e abreviação? Ou qual a diferença entre abreviação e acrônimo?

Bem, eu quebrei bastante minha cabeça para compreender isso… Acrônimo é uma sequência de letras que são lidas normalmente e representam várias palavras, como o já citado WYSIWYG ou IE, W3C, GNU, Linux, WinAmp. Nem sempre precisam ser todas maiúscilas, tampouco é regra que seja apenas uma letra de cada palavra, pode ser mais de uma letra como em WinAmp, por exemplo, o importante é que seu acrônimo represente mais de uma palavra. Abreviação é um modo reduzido de escrever uma palavra, como ex, Ms, Win, site, fone, Br, end etc.

_ Beleza, marquei meu texto todo seguindo os padrões, tudo lindo e cheio de tags malucas, mas e agora? Tá tudo feio e monocromático aqui no meu browser super moderno que aceita até applet Java! Deixa eu colocar tudo em um applet Java com uma reflexão bem linda e um super movimento bem legal?

Não faça isso, pelo amor de Deus, applet Java ninguém merece. Java é lento.

Bem, sua palavra chave é: CSS! Sim, as tais das folhas de estilo, é com elas que você vai formatar todo o seu conteúdo. Você quer que seu título seja roxo e com uma linda borda verde limão? Você quer que os itens da lista do seu menu esteja todo em apenas uma linha lá no canto direito na página? Você quer que todas os seus acrônimos apareçam em fonte Comic Sans com o fundo prateado? Você quer que as suas citações estejam em itálico e com tamanho 20% maior que o resto do texto? Tudo isso e muito mais pode ser feito via CSS, você nem tem idéia do que estas três letras podem fazer na sua vida… Mais poderosa que elas só Jesus Cristo*.

Como já foi dito, aprenda mais visitando Tableless.com.br e vá também ao W3C, se quiser ver exemplos do poder do CSS veja o CSS Zen Garden. A propósito, deus sempre pode te ajudar nessa busca por conhecimento.

Boa sorte pequeno gafanhoto.

* Exagero explícito e exageradamente forçado.