Introdução· Standard· Validação· Ferramentas·
QA Homepage· Latest News· QA Resources· QA IG· QA WG· QA Calendar·
Esta é a tradução do artigo "My Web site is standard! And yours?" de autoria de Karl Dubost publicado no site do W3C.
1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/QA/2002/04/Web-Quality e os seus direitos são conforme:
Copyright ©2002 W3C® (MIT, INRIA, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidade, marcas, uso de documentos e licença de software
2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no sítio do W3C.
3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.
Este documento foi traduzido em 20 de dezembro de 2004 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.
Este artigo foi escrito para fazer parte das publicações do grupo de trabalho Quality Assurance Interest Group do W3C. Qualquer comentário sobre este artigo poderá ser enviado para um arquivo público através da lista de discussão public-evangelist@w3.org ou via uma mensagem privada para karl@w3.org. O autor agradece aos colaboradores que dedicaram seu tempo para revisões e sugeriram idéias para este artigo.
Aqui você encontrará técnicas e sugestões simples que permitirão aumentar a qualidade do seu Web site bem como validá-lo. Este documento destina-se a usuários de HTML, desenvolvedores de aplicações Web e Web masters.
A maioria dos sites da Web não são válidos. Podemos considerar que 99% das páginas Web não validam, embora não hajam estatísticas para comprovar esta afimação. Seria interessante realizar uma pesquisa para comprovar que este número está correto.
Mas, por que não validam ?
Tenho ouvido muitos comentários e bravatas sobre este assunto. A maioria deles frequentemente é resultado da falta de conhecimento e entendimento do que é validação do HTML. As seguintes afirmativas exemplificam:
Steve, CEO, disse: Se meu Web site for projetado em conformidade com as standards, ele será pouco atrativo e eu perderei visitantes.
Com as W3C standards, é possível criar Web sites bastante atrativos. Criar um Web site conforme com as standards não tem nada a ver com estar condenado a gerar páginas de texto somente.
O W3C vem propondo um conjunto de tecnologias que se integram de forma bastante arrojada. Você pode experimentar um Web site com recursos plenos de multimedia usando tecnologias interoperacionais do W3C valendo-se de XHTML (marcação estruturada do XML), CSS (Folhas de estilos), SVG (Gráficos vetoriais animados 2D), e SMIL ( Multimedia sincronizada). Estas tecnologias tem sido desenvolvidas em consenso com os responsáveis pelas diferentes áreas do mercado desenvolvedor para Web.
Alan, Diretor Técnico, disse: Eu não disponho de verbas suficientes para investir no desenvolvimento do nosso Web site, em conformidade com as standards. Isto custa muito caro!
Projetar em conformidade com as standards simplifica a manutenção do código do Web site, porque esta filosofia dispensa a necessidade de múltiplas versões para atender a diferentes browsers. Suas páginas terão longa vida e estarão libertas de tecnologias passageiras. Na verdade projetar com as Web standards diminui custos.
Dean, Diretor Artístico, disse: As standards, limitarão minha criatividade.
Restrições técnicas existem em qualquer setor da atividade artística, quer você esteja desenhando, esculpindo ou projetando Web pages. A pintura, seja em aquarelas ou em óleo sobre tela, tem suas restrições, porém o uso de uma destas técnicas não restringe a criatividade, ao contrário cada uma delas possibilita seus meios próprios para expressar a criatividade.
Desenvolver com as Web standards abrirá um novo mundo com técnicas projetadas para uma mídia em particular, para tecnologias existentes e para sua audiência. Ainda há muito o que desenvolver neste campo. Estamos apenas começando a explorar os benefícios de multimídia baseada em standards.
Cláudia, Designer Gráfica, disse: Eu não me preocupo com acessibilidade. Pessoas com necessidades especiais não fazem parte do público alvo do site.
Você se beneficiará ao projetar considerando a acessibilidade. Pessoas com necessidades especiais representam de 8% a 10% do total da população. É muito fácil manutenir um Web site que segue as normas de acessibilidade (e consequentemente as web standards). O tráfego do site aumentará pois uma variedade bem maior de tipo de browser terá acesso ao conteúdo do site.
Em alguns países, como a Austrália por exemplo, as normas de acessibilidade para Web sites são previstas em lei. (Disability Discrimination Act Advisory Notes Versão 3.1 Maio 1999) ou USA (Section 508 - Web-based Intranet and Internet Information and Applications) ou Europa está para implementar (e-accessibility).
Aminata, Programador Web, disse: Porque devo respeitar as standards? A Web é livre.
A Web é um lugar livre compartilhado por milhares de usuários cujas necessidades você não necessariamente conhece. As standards foram projetadas tendo em vista a maior gama de possíveis usuários. É um desafio para a comunidade Web, projetar em conformidade com as Web standards. Você não ficará dependente de nenhum tipo de fabricante ou tecnologia proprietária. Usará tecnologias que não dependem da plataforma usada.
Karl, Desenvolvedor Web, disse: Eu sigo as instruções contidas em livros.
Infelizmente muitos livros não ensinam as técnicas corretas de programação Web. Ao criar um Web site você deverá checar a correção do seu código. Se você é um desenvolvedor Web, cuidado ao usar livros para desenvolver suas aplicações e procure ler as especificações particulares para a aplicação que está implementando.
Alguns Web sites disponibilizam material muito bom para ajudar aos que pretendem projetar em conformidade com as W3C standards. No Web site do W3C, você encontra uma crescente lista de tutoriais ensinando as práticas corretas.
Alguns colaboradores do W3C desenvolveram softwares gratuitos para seu uso. Nós incentivamos você a usá-los sempre que for necessário. Estes pacotes de softwares implementam as tecnologias preconizadas pelo W3C.
Tim, Contabilidade, disse: Meu editor Web gera uma marcação incorreta.
Muitas ferramentas de desenvolvimento geram marcação inválida. Alguns possuem um verificador de sintaxe embutido, outras geram a marcação correta e muitas geram marcação incorreta. Como uma solução prática você deve validar seu código em um Validador de HTML. Por outro lado, entre em contato com o fabricante da ferramenta (por mail, telefone, carta) informando-o do problema com a geração do código. Os fabricantes normalmente consideram as informações dos usuários.
Valerie, Desenvolvedor de Conteúdo Web, disse: Não é erro meu. O gerador de template foi projetado assim. (Normalmente isto ocorre em um sistema com interface para produção Web).
Certo. Não é um erro seu. Esta afirmação é uma maneira simplista de justificar o erro. Se você não sabe codificar à mão, reporte o erro ao desenvolvedor da interface ou ao serviço de manutenção até que o problema seja resolvido. Se você não está seguro sobre a correção do código gerado quanto sua conformidade com as web standards, valide o conteúdo em um Validador de HTML, e submeta o resultado da validação ao seu Web master, ou a pessoa responsável pelo gerenciamento do sistema.
Ning, Desenvolvedor de Software, disse: Não há fontes de consulta disponíveis. Todo o material está em inglês.
Alguns colaboradores traduziram documentos e especificações para outras línguas. O W3C mantém uma lista de traduções dos seus documentos.
HTML evoluiu em seu desenvolvimento e várias versões estão disponíveis. Todas estas versões são standards, e você pode escolher entere elas aquela que melhor atenda as suas necessidades. Na maioria das vezes a última versão é a melhor escolha, a menos que você se dirija a uma audiência muito específica ou browsers mais antigos. A versão escolhida define os elementos e atributos a usar.
Por exemplo, em HTML 4.01, você tem uma lista de elementos e uma lista de atributos que poderá usar na sua página Web. Você pode editar seu código manualmente o que é usualmente conhecido como (codificação manual) "hand-coding" ou (escrever o código) "writing the source."
HTML 4.01 permite escrever um parágrafo e seu respectivo identificador assim:
<p id="ref">Este é um parágrafo.</p>
Muita atenção quando aninhar elementos (tags). Alguns elementos não podem ser aninhados dentro de outros e alguns atributos são específicos de certos elementos.
Os elementos que você pode usar ao escrever seu documento ou ao implementar seu software dependem da versão do HTML. A tabela a seguir contém uma lista de tipos de documentos (DOCTYPEs), que poderá ser usado:
| Versão | lista DTD | DOCTYPE Declaração no documento |
|---|---|---|
| HTML 2.0 | DTD |
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> |
| HTML 3.2 | DTD |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> |
| HTML 4.01 | Strict, Transitional, Frameset |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
| XHTML 1.0 | Strict, Transitional, Frameset |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
| XHTML 1.1 | DTD |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
Você não conseguirá validar seu código caso não use um destes DOCTYPEs no início do documento. Não se esqueça de incluí-los se você escreve seu código à mão.
A seguir, exemplo de um template para documento XHTML 1.0 Strict.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Template standard para XHTML 1.0 Strict</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
... Código HTML aqui ...
</body>
</html>
Um template XHTML Strictis é bastante simples de escrever. A modificação e a validação do documento é simples e direta.
Um validador de HTML simplesmente confere a correção do documento contra seu DOCTYPE declarado.
Para validar seu documento final quando ele estiver sendo exibido por um agente de usuário (um Web browser por exemplo), use o W3C Validador do HTML. O validador do HTML fornecerá uma lista de erros baseado no DOCTYPE escolhido. Se o documento não contiver erros será retornada uma mensagem de erros não encontrados!.
Se você editou seu código em um formulário gerador (e não usou tags HTML no formulário) e ao validar encontrou erros, reporte os erros ao seu Webmaster e solicite a correção da geração de marcação errada.
Se você codificou à mão e o validador retornou erros, simplesmente volte ao código e corrija os erros. O validador informa o número da linha onde o código é inválido.
O validador HTML informa o número da linha onde ocorreu erro no código e isto vai auxiliá-lo a localizar o problema. O validador confere o código linha por linha começando da primeira linha. Isto implica que quanto mais no início do código um erro for detectado mais linhas subsequentes ele afetará. Uma boa técnica para correção de erros consiste em corrigir o primeiro erro que apareceu e revalidar o código. É frequente a correção de um erro trazer como consequência a correção de mais outros, apontados logo a seguir no código. Continue com está prática de ir corrigindo o erro na linha mais acima no código, até corrigir todos os erros e no final validar o documento.
Se você usou uma ferramenta de edição para gerar seu código HTML e ao término da edição sua página não validou, informe ao fabricante ou ao desenvolvedor do software. Você deverá ser capaz de contactar o suporte técnico do fabricante.
Se você desenvolveu um gerador de templetes, uma ferramenta de desenvolvimento ou um sistema gerenciador de conteúdos, use o validador HTML para corrigir problemas na sua implementação. Você pode incorporar o validador no seu software ou como back-end. O código fonte do validador do HTML é de distribuição e uso livre. O validador tem sido aperfeiçoado diariamente e você pode participar do seu desenvolvimento.
Note: Alguns documentos podem ser validados contra as DTD mas mesmo assim inválidos contra as especificações do HTML . Em um futuro próximo apresentaremos uma lista de possíveis erros não detetáveis pelo validador HTML.
Lista de validadores HTML.
Outro item importante em um Web site é a consistência das URI. Quando você linca para outros Web sites, espera que os links permaneçam estáveis e consistentes. Isto é, você espera que quando o usuário clicar no link seja remetido a uma página existente e a informação que você indicou. Para verificar se os links indicados no seu web site apontam para páginas existentes, foi desenvolvida uma ferramenta: W3C Link Checker.
A verificação retorna um relatório de links. O tamanho do relatório depende da quantidade de links na sua página. Para processar a verificação o programa envia uma solicitação HEAD HTTP para o documento lincado. Se o servidor da página lincada estiver configurado erroneamente e não for capaz de retornar o HEAD, será reportado um erro no link mesmo que ele não esteja "quebrado". Neste caso informe ao Web master do Web site lincado para que ele solicite a correção na configuração do seu servidor.
Checking link http://webstandards.org/ HEAD http://webstandards.org/ fetched in 0.1s
Acima um exemplo de um trecho da lista retornada pelo Link Checker. Ali está indicado o tempo decorrido para busca do link.
Logo a seguir a lista dos links, será reportado os links "quebrados" ou redirecionados para orientá-lo na correção de problemas com links incorretos.
Caso você necessite de informações adicionais a respeito da importância dos links leia o documento URIs não devem mudar
escrito por Tim Berners-Lee.
Caso você como Web master, desejar instalar no seu Web site um programa para seus usuários checarem os links de suas páginas use livremente o código fonte W3C Link Checker.
Desde 1996, as Folhas de estilos em cascata (CSS) têm possibilitado separar-se a estrutura da apresentação de uma maneira efetiva e elegante ao se projetar páginas Web. No ano de 2001 muitos agentes de usuários (browsers) implementaram suporte para CSS 1 e CSS 2. Usar Folhas de estilos permite manutenir toda a informação de estilo dos documentos a partir de um arquivo central.
À época que este documento foi escrito, era possível escolher entre CSS 1 e CSS 2 para estilizar seu documento.
Projetar com folhas de estilos traz muitos benefícios, tais como reduzir custos de produção e aumentar a interoperabilidade dos Web sites (legibilidade do Web site em diferentes agentes de usuários). Projetar Web sites com tabelas e javascript para múltiplas versões de agentes de usuários aumenta os custos iniciais de produção em aproximadamente 30%.
Não use o elemento FONT com o atributo FACE . Isto é considerado internacionalmente uma prática nociva. Se você deseja saber como livrar-se do elemento font e adotar o uso de folhas de estilo, leia este tutorial de Todd Fahrner Beyond the FONT tag:
Practical HTML text styling
Tal como o serviço de validação do W3C para HTML e para CSS, você poderá checar a validade de sua folha de estilos. Você pode checar a validade de folhas de estilos externas lincadas ao seu documento. Se desejar instalar o serviço de validação no seu próprio site o código fonte do validadorCSS é de uso livre.
Construir um Web site não é tudo. Na maioria dos casos você não conhece sua audiência. As pessoaas que acessam o site utilizam-se de diferentes tipos de agentes de usuários e/ou tem necessidades especiais. Inúmeras são as vantagens de se construir um web site acessível. Infelizmente é mais difícil e complicado validar seus documentos para acessibilidade. Algumas ferramentas, tais como Bobby, poderão ajudá-lo na validação, mas não fornecem a palavra final acerca do cumprimento dos itens de acessibilidade. Você deverá proceder a uma verificação manual dos conteúdos. A Web Accessibility Initiative mantém uma lista de referências que o ajudará a projetar um Web site acessível.
É comum o projetista desistir da validação do seu site quer seja porque há muitas páginas que não validam quer por não saber por onde começar. Ora, isto é muito simples, use a inteligência: (SMART - Small, Meticulous, Accesible, Regular, Template) pequeno, meticuloso, acessível, regular, template.) Avançar dando passos pequenos vai ajudá-lo a projetar um site acessível. Assim vá progredindo aos poucos e encontre as soluções para simplificar seu trabalho como por exemplo, usar templates.
A seguir uma lista de ferramentas que o ajudarão a projetar um Web site melhor.
Tidy foi desenvolvido inicialmente por Dave Raggett. Ele vai auxiliá-lo na tarefa de construir uma página válida. Em algumas situações Tidy não detecta um erro. Tidy não é um editor - ele simplesmente ajuda a resolver os problemas de validação.
Por vezes torna-se difícil identificar quais são as páginas de seu Web site que não são válidas. Se você rodar um script capaz de varrer todas as páginas você terá uma extensa lista de páginas inválidas.
O que fazer então ?
No W3C, Gerald Oskoboiny desenvolveu uma ferramenta que funciona como um questionário progressivo que visa a compartimentar o trabalho de validação não sobrecarregando o Web master do site. Ela fornece um relatório mostrando as dez páginas com a maior quantidade de itens inválidos, fornecendo notificações para a sua correção. Semanalmente o Web master receberá um novo relatório reportando as 10 páginas mais inválidas. Esta ferramenta foi colocada a disposição do público. Você poderá adaptá-la para as suas necessidades.
Olivier Théreaux, do W3C, desenvolveu uma variante mais portátil e plugável desta ferramenta: LogValidator
Esta ferramenta baseia-se nos logs e registros do servidor e processa os documentos por módulos de validação. Os módulos de validação checam as páginas mais acessadas quanto a validade contra uma determinada tecnologia. O módulo default de validação é para HTML, mas há outros disponíveis.
Assim você será capaz de corrigir a ortografia das suas páginas Web se foram incluídas metadatas, se os links são válidos, etc. Uma documentação API vai ajudá-lo a criar novos módulos de acordo com suas necessidades.
Obrigado a todos que participaram da revisão deste artigo: Ian Jacobs, Susan Lesch, Olivier Théreaux, Stephanie Troeth, Jeffrey Zeldman e os participantes da public-evangelist mailing-list.
Este artigo não seria possível sem a participação de Kim Nylander, Technical writer, que o revisou.