Blog CataBits

Como Mestre André bem colocou, o DTD¹ do HTML determina como a página web vai ser renderizada pelo navegador, e a declaração do “javascript” determina como a programação vai ser interpretada. Erros ou inconsistências no código gerado pelo software (ou manualmente) acabam afetando como a página vai ser renderizada ou bloqueando funcionalidades desta.

Um fato comum em minhas aulas de web é layout de páginas com  tabelas aninhadas (tabela dentro de outra tabela) não centralizarem verticalmente com código X/HTML.

Outra coisa comum é o “javascript” gerado pelo software – ou manualmente – ser interpretado de maneira incorreta pelo navegador em situações simples: o link para a página seguinte não funciona ou o link de retorno (que chama o histórico do navegador, p.ex.) também não rola.

Inicialmente resolvia a questão removendo:

1. os DTDs de XML;
2. os comentários em formato XML do código gerado “automaticamente” pelo software (nas preferências do software, quando possível, ou manualmente).

ou ainda: refazendo a sintaxe do javascript gerado, manualmente.

A solução para o design baseado em HTML está em conhecer os DTDs corretos para cada tipo de página (HTML “restrito”, HTML “de transição”, XHTML, ou XML). Isso evita do navegador renderizar erroneamente seu layout para web, pois cada DTD determina quais tags são aceitas/renderizadas ou quais foram abandonadas (depreciadas).

No exemplo do layout com tabelas que não centralizam verticalmente tabelas aninhadas, observei que nenhum dos DTDs sugeridos pelo W3C é suportado pelos principais navegadores – só removendo o DTD é que o layout centraliza, o que me leva a concluir que conteúdo centralizado verticalmente na página agora só em camadas (?). E não esquecendo que nem todos os navegadores seguem os padrões como o Firefox e, portanto, não centralizam camadas verticalmente na página…

Outra solução – esta envolvendo a programação – está em conhecer como se declara o javascript corretamente para que o navegador saiba como interpretá-lo. Isso envolve saber quais funções, métodos e propriedades são aceitas e onde/como são declaradas. Por exemplo, se o evento OnClick não retorna a página desejada, colocar o javascript dentro do parâmetro “HREF” faz o evento funcionar em ambos os navegadores.

Para ambos os casos, um guia (em inglês) é o W3Schools que possui exemplos e descrições sobre HTML e Javascript, o que ajuda a localizar e corrigir eventuais erros em ambos. Isso demanda certo tempo e conhecimento técnico em inglês até localizar a marcação (tag), seletor ou função problemática em sua página.

Sei que o ideal seria haver uma única ferramenta que validasse – em português – HTML, CSS e Javascript simultaneamente (como existem validadores de HTMLs) para webdesigners poderem ter uma orientação de como corrigir seu código (programadores, eis uma ferramenta a ser desenvolvida!). Enquanto isso, seguem endereços de validadores dos três, em separado:

Validadores:

• JavaScript: http://www.jslint.com/
• CSS: http://jigsaw.w3.org/css-validator/
• HTML: http://validator.w3.org
• HTML, XML, CSS: http://www.w3schools.com/site/site_validate.asp

__________________________________________________
Notas:
¹ DTD ou Document Type Definition é o comentário no início do documento HTML que define o tipo de documento HTML que está sendo apresentado; por exemplo, HTML com frames, de transição (que suporta marcações abandonadas/depreciadas pelos padrões atuais do HTML), ou estrito (que só suporta marcações padrões do HTML atual).