Separar informação e formatação, princípio básico dos web standards

Separar informação e formatação, princípio básico dos web standards

No primeiro artigo deste curso, vimos como os desenvolvedores e empresas de tecnologia criaram meios de criar e interpretar HTML de formas que desviam a intenção inicial da linguagem, que seria transmitir informação através de marcações sem grandes preocupações com o aspecto visual. Vimos também que o W3C foi criado para determinar padrões para a construção de sites e assim permitir que a internet continue sendo um ambiente para troca de informações de uma maneira que todos transmitam e entendam da mesma forma. Neste artigo, vamos ver como um projeto web pode ter o visual formatado sem deturpar as características básicas do HTML.

A primeira diretriz para quem quer aprender web standards é entender a separação total entre arquivo de informação e arquivo de formatação. O primeiro, como você já deve saber, é o bom e velho HTML. Trata-se de um documento que vai conter todo o conteúdo de uma página, marcado corretamente. Ou seja, o desenvolvedor deve marcar o que é um título, o que é um parágrafo, o que é uma lista etc. Cada marcação deve ser usada para aquilo que foi criada.

a hora e a vez do CSS

Depois que o arquivo de informação estiver pronto, o desenvolvedor pode aplicar a formatação, ou seja, dar ao conteúdo uma apresentação mais agradável, com maior apelo visual e, por conseguinte, comercial. Isso é feito através de um outro arquivo, que fica relacionado ao primeiro, chamado de CSS, ou folha de estilos em cascata.

Através do CSS, é possível definir cores, posicionamento, imagens de fundo e tudo o mais que é preciso para deixar o site com o visual que a criatividade do desenvolvedor permitir. A liberdade que o CSS dá é bem superior àquela permitida pela metodologia “tradicional” com tabelas usadas para diagramação.

Existe um mito de que projetos construídos seguindo web standards ficam quadrados ou com visual mais careta. Isso não é verdade. O que pode acontecer é que, como o uso do CSS para formatação total de projetos web ainda é relativamente recente, a maioria dos desenvolvedores ainda não consegue explorar todas as suas possibilidades. O CSS permite posicionar qualquer objeto em qualquer lugar da tela e dar-lhe o aspecto que o desenvolvedor desejar, então não há como afirmar que só é possível fazer visuais quadrados desta forma.

vantagens para o desenvolvedor…

A separação entre informação e formatação traz um curso de vantagens tanto para os desenvolvedores quanto para os usuários. Para os desenvolvedores, pode significar uma redução no tempo de produção de até 50%. Pensemos da seguinte forma: temos um projeto de um jornal para colocar na internet. Da maneira tradicional, a estrutura seria definida por um arquiteto da informação, que passaria a bola para o designer e este para o programador.

Com web standards, depois que o HTML estiver montado, programadores e designers podem trabalhar simultaneamente. Os primeiros vão programando em cima do HTML montado e os designers cuidam da formatação somente através do CSS. Isso representa ganho de tempo e, conseqüentemente, redução de custo para quem produz o site.

Outra vantagem é na hora da manutenção ou alteração. Digamos que o cliente queira mudar a posição de uma coluna em todo um site com 30 páginas. Na metodologia tradicional, seria necessário um retrabalho imenso. Com web standards, isso pode ser feito abrindo o CSS e mudando apenas uma linha.

…vantagens para o usuário

Para os usuários, as vantagens também são imensas. Os arquivos ficam mais leves e são carregados em forma de cortina. Um site construído com tabelas só aparece em alguns navegadores quando a tabela é totalmente carregada. Seguindo os padrões, o site vai aparecendo na medida em que vai sendo carregando, podendo trazer economia de tempo e maior satisfação para o usuário.

Além disso, o usuário pode dispensar a apresentação visual e ficar só com o arquivo de informação. Navegadores modernos como Opera e Firefox já permitem que os estilos sejam dispensados e aí o usuário vê só o conteúdo do HTML.

Isso é muito importante para aumentar a abrangência e acessibilidade de um projeto. Um cego que acessa um site através de um leitor de tela e se depara com um projeto construído com tabelas vai ter enormes dificuldades para compreender a página. O leitor vê na marcação que aquilo é uma tabela e lê tentando relacionar linhas por colunas. Como as tabelas estão lá só para diagramar o site, a leitura ficará sem o menor sentido.

O mesmo vale para quem acessar o projeto através de um dispositivo móvel. Se o usuário puder acessar somente o arquivo de conteúdo, conseguirá acessar a informação em menos tempo. Como geralmente o valor varia de acordo com a quantidade de bytes transmitidos, isso gerará economia para o usuário. Além disso, o site será perfeitamente navegável mesmo em telas pequenas como as de um celular ou PDA.

Walmar Andrade
Perguntas dos alunos

2 comentários