Esqueci a senha

Campus Online

Padrões e sua Importância

Padrões e sua Importância

Mudando com os Padrões Web

Você provavelmente tem em sua casa um aparelho de videocassete ou DVD. Aqui eu tenho um videocassete. Está ligado na antena, na televisão e no aparelho de som. E, claro, os três aparelhos estão ligados na tomada. A mágica tecnológica nos tornou cegos para a quantidade de trabalho necessária para que essas coisas funcionem. Pense bem: a eletricidade oferecida em minha tomada é gerada no Paraná, os fios e tomadas em minha casa foram fabricados no interior de São Paulo, meu aparelho de som foi feito em Taiwan, minha televisão vem de qualquer outro lugar na Ásia e meu videocassete foi feito em Manaus. Os cabos que ligam esses aparelhos um no outro foram comprados na Rua Santa Efigênia. Não faço a menor idéia da procedência das fitas que estamos usando.
Não parece algo maravilhoso que produtos de origens tão diferentes trabalhem tão bem juntos? Não é de se admirar que os plugs dos três aparelhos, fabricados em lugares diferentes, se encaixem com perfeição nas tomadas? Não é um fato notável que o tipo de sinal que um aparelho transmite seja exatamente o que o outro espera receber, que a fita que compramos no supermercado tenha as exatas dimensões e funcione exatamente como o videocassete espera e que o sinal recebido da antena, gerado sei lá por quem, seja entendido pela televisão?

Provavelmente nada do que eu disse pareceu novo ou assombroso para você. Pelo contrário, você achou natural que as coisas funcionassem assim e ficaria muito furioso se, ao comprar um novo liquidificador, descobrisse que ele não funciona com as tomadas que você tem em casa. Já na web, as coisas às vezes parecem ser diferentes. Tenho notado as pessoas maravilhadas ao verem um site que funciona bem em vários navegadores. Por que um aparelho fabricado na Ásia funciona aqui e na Europa e não conseguimos produzir um site que funcione com consistência no Internet Explorer e no Safari? A resposta são os padrões. Alguém teve o trabalho de definir quais seriam as dimensões dos pinos da tomada e que tipo de corrente elétrica seria fornecido por ali. Se você produzir tomadas com esse padrão elas vão funcionar em qualquer lugar do mundo.

Padrões Web são linguagens básicas de publicação de conteúdo para Web, como por exemplo: HTML, CSS, SVG, XML, entre vários outros. Elas foram criadas pelo W3C - World Wide Web Consortium.

A boa notícia é que existem uma série de padrões para a internet. Esses padrões são definidos pelo consórcio W3, fundado pelo inventor da web, Tim Berners-Lee no MIT em 1994. O consórcio é mantido por uma série de empresas interessadas na existência de padrões. Confira a lista das empresas que ajudam o W3C.
Veja encontrará os principais desenvolvedores de softwares, principalmente sistemas operacionais, navegadores e sistemas embarcados. Se você observar a história recente dos navegadores vai notar que o trabalho do W3C tem dado frutos, e há de fato um movimento dos desenvolvedores de softwares para a web em direção aos padrões. Embora o navegador mais popular enquanto escrevo este texto (o Internet Explorer) seja de todos os navegadores modernos o que mais peca no suporte aos padrões, oferece suporte bom o suficiente para que você possa fazer um bom trabalho, e as últimas versões têm demonstrado caminhar em direção aos padrões.

Padrões e produtividade

Há algo muito interessante que você vai notar enquanto estuda os padrões web: eles tornam o desenvolvimento mais simples. Ao contrário do que muitas pessoas imaginam, os hackers do W3C não passam seu tempo tentando tornar mais complicada a vida de quem trabalha com web. Afinal, as empresas que pagam as contas estão cheias de gente que trabalha com web. Queremos deixar apenas mais uma demonstração de sobre o quê estamos falando. Visite CSS Zen Garden. Hoje posso ver este site assim:

Home do CSSZenGarden em 2007

Mas, clicando nos links à direita, posso ver o mesmo site com muitas outras caras. Enquanto escrevo já são quase uma centena de layouts diferentes. Por exemplo:

Qual é o truque? Os camaradas seguiram uma recomendação do W3C, escreveram o conteúdo em um arquivo XHTML e o layout em um arquivo CSS.
Assim, mudando apenas o arquivo CSS você pode mudar todo o layout do site. Consegue imaginar o impacto disso para o processo produtivo?

Produzindo diferente

Na maioria dos lugares onde se produz sites ou sistemas para web o proceso produtivo pode ser dividido em duas fases: uma de análise, briefing e planejamento; e uma de "mão na massa", de criação de layout, HTML e desenvolvimento. Vamos falar agora apenas da segunda fase, de como colocar a mão na massa e fazer tudo aquilo que você planejou. Veja com o que se parece o processo de produção na maioria desses lugares:

Estilo de Processo 1

Talvez você se identifique com esse processo. Depois de toda a fase de planejamento inicial o designer faz todo o seu trabalho e, depois de muitas horas de Photoshop e Dreamweaver, entrega as telas do sistema prontas em HTML. O cliente aprova o layout (ou não, o que faz o processo recomeçar.) Depois disso o programador começa sua parte no trabalho, que depois também será submetida a aprovação. Sim, eu sei que empresas sérias oferecem muito mais ao cliente do que coloquei aqui. Estou simplificando as coisas para que possamos nos focar na produção. Se você reparar bem, vai notar que já viu esse processo várias vezes. Em alguns lugares em que o foco é o desenvolvimento de sistemas web o processo acontece ao contrário:

Estilo de Processo 2

Esse método é muito mais raro, mas já passei por lugares em que se trabalhava assim. Primeiro programação, depois design. Há duas coisas em comum a notar nos dois processos:

1. As etapas são seqüênciais
Para que o programador comece a trabalhar é preciso que o designer termine seu trabalho, e vice-versa. Isso implica em um grave problema. Ninguém pode mudar de idéia. Se, depois que o site estiver pronto, o cliente resolver mudar a posição de um menu, por exemplo, isso implica em repetir em escala menor todo o processo produtivo. O designer vai novamente sentar-se em sua cadeira e vai modificar o layout gerando HTML que o programador vai ter que usar para deixar o site como o cliente deseja. Isso nos leva a duas aprovações durante o processo de produção. Porque sabemos que se o cliente pedir alguma alteração de layout depois que o site estiver pronto teremos que "fazer tudo de novo". Mas se tem uma coisa que a experiência tem me ensinado sobre clientes é que, a despeito de tudo o que estiver escrito no contrato, eles mudam de idéia.
2. As partes são interdependentes
Um programador não consegue fazer alterações no funcionamento do sistema, a não ser as extremamente superficiais ou aquelas que não implicam em mudança de interface. Ele sempre precisa de um designer para mudar o sistema. Um designer não consegue fazer uma mudança de layout sem o programador. Ele raramente consegue mexer em um sistema pronto, cheio de códigos server-side, sem a ajuda de um programador. Ou seja, para cada alteração significativa a se fazer são precisos pelo menos dois profissionais.

Os hackers do W3C têm trabalhado em padrões para a web que podem separar o trabalho do designer do trabalho do programador, tornando o processo de desenvolvimento parecido com isso:

Estilo de Processo 3

Após a fase inicial de planejamento, cria-se HTML. Note que o HTML pode ser criado antes do layout, porque nos padrões web, HTML não é uma linguagem de forma: é uma linguagem de conteúdo. Cria-se então um HTML com o conteúdo. Depois disso, simultaneamente, designers podem trabalhar no layout e programadores no funcionamento do sistema. Note as diferenças:

1. As etapas são simultâneas
E isso acontece sem que um interfira no trabalho do outro, ao mesmo tempo em que vêem a soma de seus trabalhos ficando pronta. Isso torna os trabalhos mais rápidos e fáceis de gerenciar, e evita significativamente o retrabalho.
2. As partes são independentes
Ou seja, você não tem medo de mudanças. Se o cliente mudar de idéia e pedir um menu em outra posição, por exemplo, isso pode ser feito pelo designer sem a interferência do programador. Da mesma forma, alterações significativas no sistema podem ser feitas por um programador sem a ajuda de um designer. Mudar se torna muito mais rápido e barato.
Resultados melhores

Produzir sites de acordo com os padrões não apenas é mais rápido e fácil, mas o resultado obtido é melhor. Provavelmente você já deve ter dado uma olhada nesse gráfico:

Comparação de velocidades

O gráfico acima compara o desempenho entre uma página feita da maneira convencional e uma página feita usando os Padrões Web.
Suponha que leva 10 segundos para a página ser carregada na primeira visita se ela for feita da maneira convencional. Na segunda visita, como já há arquivos de imagens e códigos no cache do navegador, o tempo diminui para 6 segundos. Se o HTML for otimizado, tiramos tags desencessários, colocarmos as tags em apenas uma linha, e etc... Este tempo diminui para 8,7 segundos na primeira visita. Na segunda visita ele cai para 5,3 Segundos.

Se a página for feita com Padrões Web, a primeira visita dura apenas 7,3 segundos e a segunda dura apenas 2,5 segundos!
Se este código tableless for otimizado, o tempo da primeira visita cai para 3,7 segundos, e o da segunda cai para 0,7 segundos!
Resultados incríveis, não acha?

Esta é apenas uma das vantagens de se criar sites de acordo com os padrões. As demais incluem ter um site acessível a qualquer navegador e torná-lo mais indexável pelos buscadores, entre outras.