9 de janeiro de 2011

Cuidando dos padrões web

Cuidando dos padrões webQuem desenvolve sites profissionalmente ou mesmo quem o faz para uso pessoal, por hobby, mas gosta de se manter atualizado, sempre se depara com problemas de incompatibilidade entre navegadores e plataformas computacionais.

Muitos desses problemas são causados pela falta de padrão entre os navegadores, mas vários outros podem ser resolvidos simplesmente conhecendo os padrões web e aplicando-os corretamente. Os famosos “Web Standards” determinam, através de regras muito rígidas e bem documentadas, como devemos escrever documentos para a Internet, usando as sintaxes e parâmetros de forma certa.

O bom conhecimento desses padrões pode aliviar dores de cabeça e até provar que nem sempre o problema está na falta de padrões dos navegadores e sim no desenvolvedor desatento.

Tenho observado ao longo do tempo em que desenvolvo sites de Internet, que muitos dos problemas de incompatibilidade ocorrem por falta de conhecimento dos padrões web. Vou dar dois exemplos, um sobre “linguagens” para páginas de Internet e outro sobre a definição do tipo de documento (DTD).

HTML, XHTML e XML: a confusão!

Para criar páginas de Internet, existe a linguagem HTML, atualmente na versão 4.01 cuja documentação oficial está em www.w3.org/TR/html401 (o HTML5 ainda é um draft/rascunho) e também a linguagem XHTML que atualmente está na versão 1.0 e cuja documentação oficial está em www.w3.org/TR/xhtml1/.

Ambas tem formatação similar e a mesma função fundamental, “criar páginas de Internet”. A diferença é que o XHTML tem uma sintaxe muito mais rígida, pois segue as regras do XML (apenas as regras!). Até mesmo o “case” das tags podem ser interpretados erroneamente. Veja como exemplo os trechos abaixo:
<P><b><i>Teste</b></i></P>
Apesar de “feio”, em HTML 4.01 o trecho acima é completamente válido e funcional, já em XHTML 1.0 não.
<hr size="1" noshade="noshade" />
O formato acima é obrigatório em XHTML, mas não em HTML. Observe o fechamento da tag que em HTML seria apenas “>” e não ” />” como no XHTML.
<HR SIZE=1 noshade>
Em HTML 4.01 o trecho acima está corretíssimo, mas não no XHTML.

Tenho visto que muita gente mistura sem querer HTML com XHTML, o que pode causar problemas na interpretação por parte dos navegadores, principalmente quando temos o JavaScript participando ativamente da página.

XML não é HTML nem XHTML

Note que XML, é outra coisa! Ele não serve para criar páginas diretamente. Sua função básica é conter dados, como os de uma tabela de banco de dados por exemplo, que podem ser “manuseados” de diversas formas e por diversas plataformas. Podemos usar o XML para imagens, sons, planilhas, filmes e até sistemas de arquivos completos…

Diferentemente do HTML e do XHTML, não existem tags padrão XML. Por exemplo, o trecho abaixo é totalmente válido como XML, mas não é um HTML ou XHTML válido.
<?xml version="1.0" encoding="UTF-8"?>
<agenda>
 <entrada>
 <nome>Siriliano Sirinelson</nome>
 <telefone tipo="celular">9876-5432</telefone>
 <cadastro data="09/09/03" />
 </entrada>
</agenda>
Além de muitas aplicações, o XML é amplamente usado na web, por exemplo, nos feeds RSS e Atom. Especificamente para páginas (conteúdo visual) usamos o XHTML que é baseado no HTML mas usa as regras rígidas do XML.

E o DTD?

É muito importante que, antes de apresentar a codificação de sua página, você informe ao navegador, “exatamente” que tipo de documento ele vai encontrar logo abaixo. O DTD – Document Type Definition – é definido pela primeira linha do documento, o tal <!DOCTYPE…>, antes da primeira tag HTML ou XHTML válida ser inserida.
Nota: muitas formatações CSS como posicionamento, efeitos visuais e pseudo classes só são funcionais no Intenet Explorer se o cabeçalho DTD do documento estiver corretamente definido.
Para o HTML 4.01, por exemplo, temos pelo menos 3 DOCTYPES possíveis:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Define um documento que deve seguir à risca (strict) todas as regras de sintaxe do padrão HTML 4.01. Nenhuma tag ou parâmetro “deprecated” (depreciada) deve ser usada. Um bom exemplo é a “velha” tag <font>…</font>, uma das banidas do HTML 4.01.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Define um documento onde são permitidas algumas tags e parametros de versões anteriores do HTML (transitional). Lembre-se que os navegadores não são obrigados a suportar tags e parâmetros “deprecated” e sua página pode ter problemas ao ser exibida em navegadores mais novos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Define um documento que será formado por frames (frameset). Use apenas se adotar frames no documento. Se for usar <iframes>…</iframes> ou <object>…</object> no documento, não é necessário definir este “doctype”, use o “strict” ou o “transitional” neste caso.

Note que os códigos DTD acima não são tags HTML ou XHTML válidos e sim “códigos de navegador”, por isso devemos ter cuidado com maiúsculas e minúsculas, espaços, símbolos, etc. Também pelo mesmo motivo, não deve ser misturado com códigos destas linguagens, esta diretiva deve estar na primeira linha, inclusive sem espaços ou qualquer outro caractere antes de “<!DOCTYPE …”.

Esses são apenas alguns exemplos de erros que podem causar problemas de renderização de páginas pelos navegadores, além, é claro da própria “incompatibilidade natural” dos browsers.

Outros problemas comuns?

Quer mais? Note que:
<script language="JavaScript1.2" type="text/javascript">
é diferente de:
<script language="JavaScript" type="text/javascript">
Mais um? O código:
<html xmlns="http://www.w3.org/1999/xhtml">...</html>
afetará o documento de forma diferente de
<html>...</html>
Até mesmo editores de uso comum como Dreamweaver e FrontPage são passíveis de levar o usuário a gerar incompatibilidades desse tipo inadvertidamente, até porque quase não paramos para ver o código gerado por esses softwares.

Não vou dissertar sobre cada regra do HTML ou do XHTML aqui porque tudo está muito bem documentado nos sites oficiais citados acima. Uma outra boa referência é o site W3 Schools que tem uma vasta documentação sobre praticamente todas as linguagens e padrões usados na Internet, muitas delas acompanhadas de exemplos simples e práticos.

Um bom domínio das regras, com consultas constantes à documentação, podem evitar alguns inconvenientes.

Em caso de dúvidas, nossos comentários e nosso fórum estão à disposição.

Esta é uma edição revisada, ampliada e atualizada. A versão anterior não está mais disponível na Internet.

0 comentários neste post

Postar um comentário

Atenção comentarista!
  • Todos os comentários serão rigidamente moderados;
  • Identifique-se! Comentários anônimos não são recomendados;
  • Comentários com três ou mais links serão removidos;
  • Comentários escritos em miguxês ou excesso de gírias serão removidos;
  • Comentários escritos com predominância de maiúsculas serão removidos;
  • Por favor, prove que você é coerente, educado e bem informado: conheça o restante do site, saiba quem somos, sobre o que, para quem e como escrevemos antes de comentar futilidades;
  • Respeite as opiniões dos autores e dos outros comentaristas. Seja breve e sem ofensas;
  • Escreva comentários relevantes e que contribuam de alguma forma para o bem da humanidade;
  • Não seja um inútil social. Lembre-se que o mundo não gira ao seu redor.