Desenvolvimento Web

Gracefull Degradation, Progressive Enhancement e Fluid Layout

Já faz um tempo que não escrevo sobre coisas relacionadas a programação/desenvolvimento, então vou fazer a minha recomendação sobre alguns artigos interessantes.

A algum tempo atrás era comum ouvir por ai que “Internet Explorer” era um mal necessário. Ninguém que desenvolvia gostava, mas quando chegava no contato com o cliente, ele podia nem saber direito pra que servia, mas estava esperneando se de alguma forma o seu site estivesse diferente (não estou nem cogitando a opção dele não funcionar direito, estamos falando de diferenças subjetivas, quase milimétricas).

O vilão ao qual me refiro é a versão 6.0, a talvez, mais odiada de todas. Digo isso, por que as que antecederam, eram tão incapazes que ficaram fadadas ao “de jeito nenhum, é impossível, não tem como”.

O problema aqui em questão é que pra muita gente leiga, o Internet Explorer é aquele “botãozinho azul que liga a internet”, some isso a realidade brasileira do final dos anos 90 em que windows original, quando existia, era uma única cópia pra empresa toda. E por essa realidade, todos tinham/tem medo de atualizar seu computador.

O resultado é um navegador que tem mais de 8 anos de idade e ainda é bastante utilizado. Mas graças ao bom deus, essa realidade está mudando, e com o surgimento da versão 8.0 (amém) será possível escrever códigos mais próximos dos padrões internacionais da W3C e esperar que funcione razoavelmente bem em todos os navegadores.

Mas os artigos que venho propor aqui não tem muito a ver com o Internet Explorer 6, e sim com algumas técnicas que vamos ouvir falar muito ainda daqui pra frente.

Em resumo trata-se de uma maneira de você escrever códigos que funcionem bem em browsers antigos e funcionem melhor ainda em browsers modernos. E sem usar hacks ou artificios como prover códigos personalizados para cada navegador ou folhas de estilos especificas.

Tudo começa com o artigo de 1999 do Nick Finck, um veterano em desenvolvimento web, onde ele explica um pouco sobre o que é Liquid Web Desgin, que segundo ele, seria o exemplo máximo de um bom desgin. Aquele que se adaptasse ao tamanho da janela do cliente e mantivesse todas as suas características originais, ou se adaptasse o melhor possível.

Pela linha do templo, vamos agora para um artigo de 2002, do Peter-Paul Kock, o autor do site QuircksMode, um dos mais bem conceituados, durante muito tempo, website sobre informações de compatibilidade entre browsers. O artigo levanta a questão do Gracefull Degradation ou em uma tradução mais ao pé da letra seria Degradação Harmoniosa. Talvez o termo em português não ajude muito, mas o conceito é bem simples e baseia-se nas seguintes regras:

  1. Qualquer navegador deve ser capaz de ver o conteúdo do seu site
  2. Qualquer navegador deve ser capaz de navegar pelo seu site.

Para que isso seja alcançado, o seu site deve estar legível, mesmo que nenhuma imagem ou estilo CSS tenha sido carregado. Por legível entende-se que as coisas estejam organizadas logicamente e em uma sequência que faça algum sentido.

Uma maneira simples de testar isso é utilizando o navegador W3M do linux (navegador pro terminal).

Pegando um artigo mais novo, do portal de desenvolvedores do Opera, de 2008, é sugerido um conceito novo. Ao invés de pensar pelo lado do Gracefull Degradation (de cima para baixo) ele sugere que comecemos de baixo para cima, pelo angulo do Progressive Enhancement ou Melhoria Progressiva.

Devemos desenvolver o nosso site, pensando na menor tecnologia (a mais antiga) que vamos suportar, e então ir adicionando progressivamente recursos das mais novas. O importante é que esses recursos não entrem em conflito com as tecnologias antigas. Dessa forma um site visualizado com o Internet Explorer 6 tera um visual “meia boca” ou uma versão “simplificada” visualmente falando do que seria visualizado por alguém utilizando o Internet Explorer 7, e progressivamente o Internet Explorer 8.

Progressive Enhancement

Exemplo de Melhoria Progressiva

A idéia é que se a pessoa ainda utiliza uma tecnologia antiga, devemos entregar para ela, algo que seja bem suportado para a tecnologia dela, sem tentar fazer milagres, e para aqueles que utilizam browsers mais avançados (vamos citar aqui todos eles: Safari 4, Opera 10, Firefox 3.5, Google Chrome), que também possam desfrutar das inovações.

Melhores Browsers

O momento é de dizer um basta, para a seguinte frase: “Isso é legal, é uma pena que só vamos poder usar daqui uns 5 ou 6 anos, quando todo mundo resolver atualizar o seu Internet Explorer 6 pra uma versão melhor”.

Para quem não domina o inglês e gostaria de uma segunda opinião, eu indico um artigo do Diego Eis, do site Tableless, em que faz uma abordagem sobre o mesmo assunto, e por coincidência, encontrei enquanto estava escrevendo esse artigo. Fica a dica.

Standard

2 thoughts on “Gracefull Degradation, Progressive Enhancement e Fluid Layout

  1. Cara, gostei muito do seu texto, principalmente sobre o Progressive Enhancement. Mas a versão do Firefox que você citou ainda não existe, 3.5, o atual é 3.0.10.

    Abraços

    InFog

Deixe uma resposta