Voltar para o site

O que são Web Standards

Publicado em: 22/05/2007

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

Introdução

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 pensam 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 sua tecnologias. Existem sim, orgãos normatizadores, tais com ISO standards e Ecma, mas quando a maioria das pessoas se referem as Web Standards na verdade estão se referindo ao trabalho do W3C.

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.) Na verdade a abrangência do termo Web Standards contempla as seguintes áreas: (NT: Links a seguir para matérias em inglês)

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álido

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 (validate your CSS code). Basicamente, ter um HTML/XHTML válido significa que o código da página Web está escrito de acordocom o doctype 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 os navegadores.

Validar seu código auxilia na detecção de erros e evita uma série de problemas relativos a 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 acôrdo 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 sus página e reduzirá drasticamente o tempo de carregamento da página 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 atribuida 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ás-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 usário depois do primeiro carregamento da página, reduzindo em consequê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ê estrá 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 a 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:

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo