Banner propaganda da DevMedia - Cursos de desenvolvimento web

O que são Web Standards

Publicado em: 22/05/2007

Autor: Robert Nyman
URL do original: http://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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo