quinta-feira, 7 de junho de 2007

WebStandards

WebStandards

As WebStandards são um conjunto de diretrizes e recomendações na confecção de páginas web, criadas pela Organização W3C, fundada pelo criador da Web (Tim Berners-Lee).

Quando ouvi falar em webstandards, não tive uma reação muito boa, o que eu mais ouvi foi a briga entre FireFox e Internet Explorer, que em sua maioria é fanatismo. Então a desprezei. Depois, por alguns caprichos em me aperfeiçoar mais no mundo da web, comecei a ler artigos de um site que já conhecia a algum tempo, sobre css e webstandards, o site do Maujor, http://www.maujor.com/. Fiquei conhecendo a ferramenta de validação de html e xhtml do w3c, e achei divertido validar os meus sites, e isso me incentivou a ler mais artigos traduzidos da w3c pelo Maujor, consigo agora validar os meus sites sem dores de cabeça, no entanto ainda tenho muita dificuldade com Tableless.
Para se ter um site de acordo com as webstandards é necessário então dominar as seguintes técnicas: Tableless, CSS e Acessibilidade, são técnicas que interagem junto uma com as outras portanto são bem parecidas, não são técnicas distintas, mas diferentes e com o mesmo propósito.

O Que é tableless

Tableless é um elemento das webstandards que tem tirado o meu sono, e acredito que também o de muitos desenvolvedores web que aceitaram o desafio de aprender essa técnica, que consiste em não utilizar tabelas na construção do layout das páginas, teoricamente essas tabelas devem ser substituidas por "divs", que por sua vez são estilizadas com CSS (Cascading Style Sheet, folhas de estilo em cascata, abordarei sobre css no próximo tópico).

Mas porquê não usar as tabelas?

A ferramenta de validação do W3c não verifica o uso de tableless, pois as tabelas podem ser usadas no HTML/XHTML, apenas para a exibição de dados tabulares, ou seja, para preservar o seu sentido semâtico. É nisso que se baseiam as WebStandards, organizar os elementos de uma página web de acordo com a tag à que corresponde, como por exemplo usar a tag à h6 para cabeçalhos, títulos, a tag "p" para parágrafos, a tag "div" para organização da página, e etc. Mesmo utilizando esses elementos, há alguns atributos dessas tags que cairam em desuso e não são mais utilizados, nesse caso, o Validator W3 irá apontar um erro (comentarei alguns desses erros mais abaixo). Uma regra gerasl, seria utilizar sempre CSS para a estilização de cada componente, isso é o que elimina muitos atributos das tags, mas também facilita bastante a vida do Profissional Web.

CSS

CSS..., Ah! é uma maravilha, eu adoro muito as CSS, passei a utilizá-las quando era iniciante no estudo de HTML para estilizar os links. É onde se começa a perceber os benefícios das CSS, pois é possível alterar algumas propriedades que não podem ser alteradas em HTML. (você pode dizer que é possível estilizar o link com HTML, sim, há um atributo da tag "body", "alink", que pode mudar a cor do link, só isso e nada mais, com css é possível mudar a cor, tirar o sublinhado e alterar em cada um dos eventos ocorridos com o link: link; hover; active e visited). Mas Css não para por aí, pode-se alterar muita coisa, é realmente fantástico, quem quizer ver um exemplo do quanto as CSS são poderosas, visite o site ZenGarden http://www.csszengarden.com/tr/portuguese/, escolha uma das folhas de estilo no menu direito e poderá ver, que alterando apenas o arquivo de CSS foi possível mudar todo o layout da página.

Acessibilidade

É um item que eu acho realmente importante nas WebStandards, pois proporciona uma real universalização da web, onde todos podem ter acesso à ela, até mesmo deficientes visuais, que à primeira impressão pode parecer irônico, "Um cego acessar a internet", mas a realidade é que é possível. É claro que é necessário o uso de aparelhos adaptados ao indivíduo, mas também é preciso o trabalho extra, por parte do desenvolvedor, na contrução e confecção de um site, para que esse seja totalmente acessível.

Validação

A validação de HTML/XHTML pode ser feita por várias ferramentas, eu recomendo e uso a ferramenta de validação da W3c http://validator.w3.org/.
Algumas regras para validação:
Todas as tags devem ser escritas com letras caixa baixa(minúsculas).
Todas as tags devem ser fechadas, as que não tiverem tag de fechamento devem terminar com "/>". Exemplo: a tag "br" deve terminar com "br />".
Para a validação é importante declarar qual a sua versão de HTML ou XHTML, segue abaixo os cabeçalhos para HTML 4.01 e XHTML 1.0:
HTML 4.01:
Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd>
Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd>
XHTML 1.0:
Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Explicação sobre Strict, Transitional e Frameset.

Strict:

Como o próprio nome sugere: "estrito", ou seja, não permite nenhuma exceção às regras estabelecidas. Se o site for validado com Strict, facilita o projeto de acessibilidade.

Transitional:

Permite algumas exceções nas regras, é o mais utilizado, muito bom para iniciantes.

Frameset:

A diferença básica para o Transitional, é que permite o uso de Frames.

Finalizando:

Dica: Para aprender validação, comece validando o seu site, o próprio validator diz qual é o erro, relata como proceder, é em ingês, mas use tradutores disponíveis na internet que você consegue.
Bom, por enquanto é só, aguardem, irei escrever mais detalhado sobre cada item que coloquei aqui, até a próxima. Obrigado e bons estudos!
Quer saber mais sobre as WebStandards? Veja os links abaixo:
http://www.maujor.com/, O Melhor, de cara você se depara com uma linda interface, e tem muitos e ótimos artigos sobre tudo que foi escrito aqui, CSS, Tableless, Acessibilidade, além de conter vários documentos traduzidos da W3C.
http://www.maujor.com/w3ctuto/webquality.html, Tradução de um documento da W3c sobre validação, muito bom, compensa ler, comenta sobre o que algumas pessoas dizem por não estar de acordo com esse padrão web, muito interessante!

Nenhum comentário: