Esquerda - Conteúdo.

O que são Web Standards.

Autor: Robert Nyman Site Externo.
URL do original: http://www.robertnyman.com/... term/ Site Externo.
Título original: What are Web Standards? A comprehensive explanation of what is comprised in the term
Traduzido com autorização expressa do autor
por: Maurício Samy Silva. Site Externo.

O termo Web Standards está amplamente disseminado pela Web, é largamente empregado em reuniões com clientes e exaustivamente citado entre desenvolvedores em geral, porém as pessoas têm visões diferentes do significado e abrangência do termo.

Assim, tentarei explicar minha visão sobre o que significa e o que a maioria das pessoas pensa quando se referem às Web Standards.

Não existem normas que regulam a Web (Web Standards) e sim Recomendações.

O primeiro conceito a entender é o de que não existem normas que regulam o desenvolvimento Web e suas tecnologias. Existem sim, orgãos normatizadores, tais como ISO standards Site Externo. e Ecma Site Externo., mas quando a maioria das pessoas se referem as Web Standards, na verdade estão se referindo ao trabalho do W3C Site Externo..

A diferença está no fato de que o W3C, atualmente, não cria normas e sim Recomendações. Em outras palavras:

Uma Recomendação do W3C é uma especificação ou um conjunto de diretrizes que depois de ter passado por exaustiva discussão e ter-se estabelecido um consenso, recebeu o endosso dos Membros e do Diretor do W3C. O W3C indica vivamente o amplo emprego de suas Recomendações.

O que as pessoas querem dizer quando falam Web Standards.

Em primeiro lugar, Web Standards são usadas para caracterizar o desenvolvimento HTML/XHTML, contudo é bom saber que o trabalho do W3C vai muito além disso e consiste em muitas outras Publicações Técnicas ( Technical Reports and Publications) Site Externo.. Na verdade, a abrangência do termo Web Standards contempla as seguintes áreas:

Para alguns Web Standards abrange todas as três áreas acima listadas, para outros apenas uma das áreas. O que é importante saber, entretanto, é que todas as três áreas são cruciais para desenvolver Web Site genuinamente bom.

Código HTML/XHTML válidos.

Vamos começar com o conceito geral: a primeira coisa que as pessoas buscam quando falam em Web Standards é que o código do Site deve ser válido. Para a maioria das pessoas isto significa apenas validar o código HTML/XHTML, mas existem ferramentas que validam também as CSS (CSS code Site Externo.). Basicamente, ter um HTML/XHTML válido significa que o código da página Web está escrito de acordo com o doctype Site Externo. que foi escolhido para o documento.

É importante a escolha criteriosa do DOCTYPE, uma vez que é ele quem vai determinar como seu código HTML/XHTML será interpretado e qual o modo de layout será ativado nos diferentes navegadores. Sendo seu código válido, você não precisa se preocupar com os diferentes erros de interpretação dos diferentes navegadores e assegurar uma maneira uniforme de renderização por todos eles.

Validar seu código auxilia na detecção de erros e evita uma série de problemas relativos à renderização do layout proposto pelo seu código HTML/XHTML. Validar simplifica as tarefas de corrigir erros de código, acelera o desenvolvimento e resulta em um código de fácil manutenção.

Leia mais sobre as razões para validar o código.

Ferramentas de validação.

Existem inúmeras ferramentas de validação, tanto online como add-ons para diferentes navegadores. A seguir uma lista das mais populares:

Leia mais sobre doctypes

Código Semanticamente Correto.

Uma questão que frequentemente é negligenciada é a do significado de código semântico. A proposta é a de que cada porção constituinte de uma página Web deva ser marcada com um elemento de código de acordo com um significado apropriado, valor e propósito. Uma explicação básica para este conceito é de que devemos usar o elemento de marcação apropriado ao contexto.

Exemplos de código.

Código semanticamente pobre:

<div class="topo-pagina">Título da página</div>
<div class="texto-paragrafo"> Um texto explicando o conteúdo da página </div>
<a class="menu-item" href="/item-1">Menu item 1</a>
<a class="menu-item" href="/item-2">Menu item 2</a>
<a class="menu-item" href="/item-3">Menu item 3</a>

Código semanticamente correto:

<h1>Title of the page</h1>
<p>Um texto explicando o conteúdo da página</p>
<ul class="menu">
<li><a href="/item-1">Menu item 1</a></li>
<li><a href="/item-2">Menu item 2</a></li>
<li><a href="/item-3">Menu item 3</a></li>
</ul>

As diretrizes e recomendações para escrever um código semântico são fáceis de seguir. Simplesmente use elementos cabeçalhos (<h1> - <h6>) para marcar diferentes níveis de cabeçalhos, elementos parágrafo (<p>) para marcar textos, elementos listas (<ul>, <ol> etc.) para qualquer tipo de lista que você pretenda montar e assim por diante, cada elemento com sua finalidade e significado.

Isto irá ajudá-lo na busca de determinadas partes da sua página e reduzirá drasticamente o tempo de carregamento dela, com menos código e ao mesmo tempo facilitará a tarefa de manutenção. E também não se esqueça dos aspectos ligados a SEO, porque código semântico e amigável aos mecanismos do Google e outros indexadores em geral, maximizando a indexação e facilitando o encontro do seu Web site por tais mecanismos.

Importante notar é que a semântica não deve ser atrelada ao modo como a página é renderizada. Um mesmo elemento é renderizado de forma diferente em diferentes navegadores, mas isto não é uma falha a ser atribuída a semântica, mas aos navegadores. A solução para tais inconsistências não é a de abrir mão de um código semântico, mas sim padronizar a renderização com uso das CSS.

Leia mais sobre semântica

Separar conteúdo (HTML/XHTML), apresentação (CSS) e interatividade (JavaScript)

Existem inúmeras razões que justificam a vital separação de HTML/XHTML, CSS e código JavaScript. Eles têm propósitos completamente diferentes e como usá-los deve ser uma decisão muito bem pensada.

Principais razões para separar.

  • Performance: Arquivos externos como .css e .js ficarão armazenados no cache do navegador do usuário depois do primeiro carregamento da página, reduzindo em conseqüência, drasticamente o tempo de carregamento.
  • Visão geral: Você saberá exatamente onde procurar um código. Cada layer de código com seu propósito.
  • Uso do código: Fica fácil usar o mesmo código em diferentes partes do Web site.
  • Manutenção: O código fica centralizado em um lugar controlando apresentação e interatividade em todo o Web site.

Ler mais sobre separação de HTML/XHTML, CSS e JavaScript

E a acessibilidade?

Uma crença comum e totalmente equivocada é a de que a construção de um Web site acessível requer uma carga extra de trabalho. A verdade, contudo, é que seguindo os conceitos de desenvolvimento enumerados acima para as três áreas das Web Standards você estará pavimentando uma via segura e sólida para seu Web site ser acessível.

Validar o código, especialmente usando um doctype strict ajudará você a encontrar erros de conteúdos e inexistência de textos alternativos. Um código semântico é amigável às tecnologias assistivas, perfeitamente usável com as CSS desabilitadas e mais fácil de ser entendido.

Ao separar interação (JavaScript) do código HTML/XHTML o site deverá funcionar mesmo sem JavaScript se ele for projetado inteligentemente. Assim, naturalmente, você pode adicionar JavaScript com a finalidade de incrementar seu Web site, mas não deverá depender de JavaScript para realizar as tarefas básicas de funcionamento do site.

Leia mais sobre acessibilidade

O que mais há para ler

Abaixo listei alguns links relacionados a este artigo sobre seguir as Web Standards:

Disponibilizado em: 04/04/2008.