Alexandre Colucci

Ok, eu sei que existe uma infinidade de tutoriais e guias sobre boas práticas, muitas excelentes, o assunto é até batido, mas… Tenho respondido nos últimos meses uma série de questionamentos “bobos” sobre boas práticas de codificação XHTML/CSS, o que me motivou a escrever um guia de Padrões Web compilado, reunindo o que é essencial no assunto e algumas dicas do dia-a-dia, acumuladas em 10 anos de experiência. Espero que seja útil, tanto para os iniciantes quanto para os experts, como uma fonte de referência em português. Não pretendo ser exaustivo nos temas, mas tentarei não ser superficial também. Comentários e sugestões são muito bem-vindos!

A semântica da Web

Existem dois conceitos correntes sobre web semântica: o mais conhecido é o proposto por Tim Berners-Lee, que define a Web Semântica como um ambiente onde “a informação é dada com um significado bem definido, permitindo melhor interação entre os computadores e as pessoas” (BERNERS-LEE et al, 2001). O outro pode ser definido como “semântica da web”, e trata da forma como escrevemos nossos códigos, utilizando a tag correta no contexto correto para a qual ela foi criada.

No fim das contas, um dos objetivos finais de uma semântica da Web é facilitar a organização da informação para a sua manipulação por máquinas, mas não fica só nisso (como veremos adiante). E, com exceção dos bots das máquinas de busca e alguns poucos agentes, escrever seu código corretamente não irá fazer com que seus sites e sistemas sejam reconhecidos por estes. Um conceito não exclui o outro, e são até complementares (ambos tratam de padrões e buscam a interoperabilidade) mas são completamente diferentes entre si nos objetivos finais e nas técnicas de desenvolvimento. Assim, quando trato de Padrões Web, estou dizendo sobre o desenvolvimento de front-end de aplicativos Web, para evitar confusões. Para saber mais sobre Web Semântica, acesse o site oficial do assunto do W3C, ou confira outros artigos publicados neste blog.

Por que codificar seguindo boas práticas?

Ao desenvolver dentro dos Padrões Web, a organização e a função dos elementos XHTML é um dos fatores essenciais na codificação. Cada elemento da página exerce uma função (como título, parágrafo, formulário, divisor, lista etc.), definindo assim um “significado” para cada parte do layout.

É muito importante que os elementos estejam marcados corretamente, e é útil por uma série de motivos como:

• Reduzir o custo e a complexidade do desenvolvimento e manutenção;
• Aumentar a acessibilidade e a interoperabilidade;
• Permitir a indexação eficiente do conteúdo pelos motores de busca;
• Reduzir o tamanho dos arquivos e o tempo de renderização do navegador;

Entre diversos outros. Na medida em que formos avançando no guia, você verá que é muito mais lógico desenvolver de acordo com os padrões do que utilizar milhares de gambiarras com tabelas.

O que são os Padrões Web (Web Standards)?

Padrões Web (ou Web Standards, em inglês) são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C, destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos. Prevê o desenvolvimento em camadas (informação, formatação e comportamento), e possui inúmeras vantagens: uniformidade, simplicidade, liberdade, separação de estrutura e apresentação, facilidade de criação e manutenção, acessibilidade, extensibilidade, estabilidade etc. A lista é crescente, e só é percebida pelo desenvolvedor na medida em que ele os utiliza no seu dia-a-dia.

Eis como fica um trecho de código HTML desenvolvido com tabelas:

<table cellspacing="0" cellpadding="0" width="500">
  <tr>
    <td width="200"><a href="produto.php?id=1">TV LCD 22</a></td>
    <td><font color="FF0000">R$ 599,99</font></td>
  </tr>
  <tr>
    <td width="200"><a href="produto.php?id=2">TV LCD 40</a></td>
    <td bgcolor="#333333"><font color="FF0000">R$ 999,99</font></td>
  </tr>
  <tr>
    <td width="200"><a href="produto.php?id=3">TV LCD 45</a></td>
    <td><font color="FF0000">R$ 1199,99</font></td>
  </tr>
  <tr>
    <td width="200"><a href="produto.php?id=4">TV Plasma 45</a></td>
    <td><font color=“FF0000”>R$ 1299,99</font></td>
  </tr>
</table>

E o mesmo trecho equivalente nos Padrões Web:

<ul>
  <li>
    <a href="produto.php?id=1">TV LCD 22</a> - R$ 599,99
  </li>
  <li>
    <a href="produto.php?id=2">TV LCD 40</a> - R$ 999,99
  </li>
  <li>
    <a href="produto.php?id=3">TV LCD 45</a> - R$ 1199,99
  </li>
  <li>
    <a href="produto.php?id=4">TV Plasma 45</a> - R$ 1299,99
  </li>
</ul>

Imagine agora o HTML acima programado em PHP para acessar uma tabela em um banco de dados qualquer:

<table cellspacing="0" cellpadding="0" width="500">
<? foreach ($produtos as $produto) { ?>
  <tr>
    <td width="200">
      <a href="produto.php?id=<?=$produto[0];?>">
        <?=$produto[1];?>
      </a>
    </td>
    <td bgcolor="#333333">
      <span class="preco"> - R$ <?=$produto[2];?></span>
    </td>
  </tr>
<? } ?>
</table>

Veja o mesmo código nos Padrões Web:

<ul>
<? foreach ($produtos as $produto) { ?>
  <li>
    <a href="produto.php?id=<?=$produto[0];?>">
      <?=$produto[1];?>
    </a>
    - R$ <?=$produto[2];?>
  </li>
<? } ?>
</ul>

Compare os códigos na programação final. O segundo é infinitamente mais legível, ocupa menos espaço em bytes e requer muito menos processamento do computador (e olha que o código em HTML nem está tão “sujo” assim…). Precisa falar mais?

A semântica dos elementos

Como foi dito anteriormente, a função de cada elemento no XHTML é um dos fatores essenciais na codificação. Cada um deles tem um propósito específico e, além de não fazer sentido, é completamente errado seu uso para outros propósitos. O caso clássico é o das tabelas: durante muito tempo (até hoje na verdade, não me canso de ver sites e aplicativos usando e abusando de tabelas) elas foram utilizadas como suportes para o layout.

Existe um grande motivo para que tal bizarrice: a clássica incompatibilidade e limitação dos navegadores na renderização de layouts complexos. Mas isso foi há mais de década atrás, quando o Nestcape dominava o mercado e a Microsoft nem dava muita bola para o novo meio. O HTML era somente uma linguagem simples de publicação de documentos, e poucos pensaram que a Web se transformaria no meio de comunicação multimídia que hoje conhecemos.

A estrutura de elaboração do HTML consiste em instruções no conteúdo do documento, através de marcas de início e fim (tags) definindo trechos do conteúdo, mediante as quais se determina a formatação do texto, imagens e demais elementos que o compõem. O HTML se esgotou justamente por conta da confusão que faz na elaboração de seus documentos, não distinguindo os dados de marcação da própria informação contida no documento.

Nesses tempos heróicos, o uso de tabelas não só era massivo, como também incentivado, como podemos conferir na “pérola” a seguir:

As tabelas são parte integrante do HTML. Ao definir uma grade de linhas e colunas, pode-se alinhar sistematicamente os itens. O exemplo mais simples de uma tabela é colocar o material em duas ou mais colunas. (GOLDING; WHITE, p.125).

Em 1997 fazia muito sentido codificar com tabelas, até porque não havia outro jeito mesmo. Que atire a primeira pedra quem tem mais de 10 anos de desenvolvimento Web e não usou NENHUMA tabela para montar layouts. Mas, fazê-lo em 2010 mostra uma extrema ignorância, para não dizer coisa pior.

No próximo artigo, irei explicar detalhadamente cada elemento do XHTML e sua aplicação. Até breve!

Referências bibliográficas:

FERRAZ, Ronaldo. Construindo sites com Padrões Web.  Disponível em: http://kb.reflectivesurface.com/br/artigos/sitesComPadroesWeb. Acesso em 25 mar. 2010.

FERREIRA, Elcio. Produtividade Web 2.0: como ser produtivo desenvolvendo para Web. Disponível em: http://visie.com.br. Acesso em 5 jun. 2008.

GOLDING, Mordy; WHITE, Dave. Guia de cores para Web Designers. São Paulo: Quark, 1997.

WASP. The Web Standards Project. Disponível em: http://www.webstandards.org. Acesso em 25 mar. 2010.

WORLD WIDE WEB CONSORTIUM. XHTML2 Working Group Home Page. Disponível em: http://www.w3.org/MarkUp. Acesso em 10 mar. 2010.

Leia também:

• W3C HTML Working Group Publishes New Drafts (blogs.msdn.com)
• World Wide Web Consortium Must Seize High Ground on Web Standards Earlier, Says New CEO Jeffrey Jaffe (xconomy.com)
• Microsoft bolsters Web-accessible data plan (news.cnet.com)