Padrões Web, modo mundo real

July 9th, 2007 § 13 comments

A confusa discussão que aconteceu aqui no blog sobre CSS e tabelas (1, 2) me chamou a atenção para um fato bem interessante: há vários desenvolvedores que se dizem ferrenhos defensores dos padrões Web e mesmo assim consideram que o HTML é irrelevante desde que o CSS torne o seu site usável.

Nos meus exemplos, eu disse que tanto o Google Docs quanto o Google Reader se removidos do seu CSS se tornavam uma completa bagunça. Um dos comentaristas disse que isso era normal e esperado, já que o CSS é para estilizar o site.

O Google Reader é exemplo interessante e vale a penar remover o CSS do mesmo e ver o que acontece: o usuário desavisado toparia com uma mensagem de carga (“loading“) no topo da página, seguida de um elemento IFRAME vazio, vários botões que não funcionam e, no final da página, uma verdadeira confusão de imagens, textos, pedaços de elementos da páginas jogados ao acaso.

Alguém poderia argumentar que é justamente para isso que o Google investe tempo em detectar o navegador e apresentar uma versão customizada da página de acordo com o necessário–o que, por experiência própria, posso dizer que não funciona em todos os casos e sempre acaba ocorrendo uma situação em que você gostaria de ver o conteúdo e não consegue.

A primeira lição que eu aprendi no desenvolvimento com padrões Web é que seu site deve degradar graciosamente, isto é, deve cair em comportamentos menores e ainda assim acessíveis e aceitáveis se certas tecnologias forem desabilitadas. Em outras palavras, se você usa Flex e alguém desabilita plugins, você deve passar a usar algo que substitua o Flex sem perder a funcionalidade; se você usa Ajax e alguém desabilita o JavaScript, seu site deve cair para HTML puro; se você usa CSS e o navegador não suporta ou não tem CSS habilitado, você deve ter HTML puro que ainda assim é usável.

Não adianta absolutamente dizer que você desenvolve com padrões, que valida seu HTML, que faz tudo dentro dos ditamesdo W3C se o seu site fica uma massa inútil de HTML quando perde o apoio de certas tecnologias.

E nisso entram situações comuns como inverter a ordem lógica de objetos da página porque você não conseguiu fazer seu float funcionar direito, colocar centenas de itens de navegação no começo da página porque seu layout requer isso e esquecer de colocar um link para pular esses itens, deixar elementos de Ajax soltos na página porque todo mundo usa navegadores modernos, e por aí vai.

Se você realmente diz usar padrões Web, lembre-se que isso é muito mais do que meramente criar um HTML que pretende ser semântico e jogar um punhado de CSS por cima, declarando que agora está completo. Testar no Internet Explorer, Mozilla e Safari nunca foi e ainda não é suficiente. Sem contar o pessoal que precisa de navegadores especiais (portadores de deficiências físicas e assim por diante), as pessoas estão cada vez mais usando navegadores em condições diferentes como portáteis e celulares onde o seu maravilhoso layout de 1024×768 (que, segundo você, é uma grande concessão já que todo mundo usa mais do que isso) falha miseravelmente porque a tela tem meros 240×320 (e isso quando é uma tela grande).

O que estamos vendo hoje é muito fervor em cima de algo que, na prática, mal está sendo aplicado. Sites que realmente seguem padrões Web no mundo real funcionam quando a situação de renderização muda radicalmente sem perder o passo. Dizer que você aplica os padrões sem chegar nesse ponto é a mesma coisa que usar tabelas para layout no seu site–porque, no final das contas, não diferença alguma entre o sujo e o mal-lavado.

§ 13 Responses to Padrões Web, modo mundo real"

  • eu ja não posso dizer que concordo com isto …
    quando você vai desenvolver um site ou um sistema, ou qualquer coisa …
    se começa com um monte de premissas …
    por exemplo, este site vai usar CSS para o layout …
    Então se o browser não tiver suporte para CSS, só lamento …
    concordo que o ideal é ter a maior acessibilidde possível, mas nem sempre o ideal é possível …

    se o foco do site for responsibilidade para o usuário, utilizando AJAX por exemplo, tem coisas que podem continuar funcionando sem o ajax, outras coisas, seria necessário ter uma funcionalidade toda duplicada, o que pode fazer com que nem valha a pena desenvolver o site/sistema/aplicação/qualquer coisa …

    Padrões existem para serem seguidos, se alguem desenvolve utilizando padrões, esta esperando que os clientes da aplicação sigam aqueles padrões …

    se não vira zona …

    mas é só a minha opinião 😀

  • […] Link to Article google Padrões Web, modo mundo real » Posted at Superfície Reflexiva on […]

  • Ronaldo says:

    Opa, Rodrigo! Tudo bom? Sobre a questão, você já pensou nos usuários do seu site que podem ser cegos? E nos que estão usando celulares? E nos que possuem dificuldades motoras? Esse pessoal todo não liga para o seu CSS, liga só para o site funcionando.

    A maior premissa de uso de padrões é a degradação graciosa, ou seja, seu site *tem* que funcionar em condições extremas. E é possível, perfeitamente, fazer um site que funcione sem CSS e sem Ajax sem ter que duplicar o esforço.

  • […] Link to Article ajax Padrões Web, modo mundo real » Posted at Superfície Reflexiva on […]

  • Rafael says:

    Ronaldo,

    Concordo com sua visão. Realmente não dá para xiita, nem de um lado, nem do outro.
    Padrões são excelentes e estão aí para serem usados, mas não podem ser o único fator a se ponderar na hora de construir a interface de um sistema baseado na Web.

    É óbvio que os padrões auxiliam em questões visuais e também de acessibilidade, mas nem sempre se faz uso só de padrões para se conseguir um layout.

    Eu trabalho no SERPRO e por determinação legal, todo site construído deve ser acessível(nem todos ainda são, mas deverão ser). O uso de javascript pode prejudicar pessoas que usam browsers textuais(deficientes visuais, geralmente), então deve-se ter uma forma alternativa(leia-se “degradar graciosamente”).

    Sou defensor ferrenho dos padrões, mas não podemos colocar isso acima dos usuários, afinal, fazemos o site pelo conteúdo, não pela beleza ou pela sua organização. O conteúdo é que deve ser fácil de encontrar, e não somente o site ser bonitinho e/ou agradável…

  • Bruno says:

    Ponto de vista interessante. Se importaria de dar alguns exemplos de sites que já seguem essa filosofia? Não gostaria que fossem blogs. Gostaria que os sites fizessem uso intensivo de tecnologias como Flex, Ajax, CSS. Daí, vou ter o prazer de desabilitar tudo isto e ainda vê-lo funcionando. Não entenda isso com ceticismo. É apenas curiosidade científica.
    Abs.

  • André Pessoa says:

    Perfeito seu post. Um dos primeiros artigos que eu li sobre CSS foi o “Style Sheet Dependence” (não vou colocar o link aqui, mas qualquer um acha pelo Google). Apesar de antiquíssimo, ainda é completamente atual, e aplicável aos exemplos que você cita: sites que ficam “inusáveis” se for tirado o CSS.

  • Bruno Torres says:

    Falou e disse, Ronaldo. Eu ainda pretendo entrar nessa discussão, atrasado como sempre, mas acho que, nem de longe, a “guerra” dos padrões web está vencida, como alguns acham.
    Mal vencemos algumas batalhas e tem muito, muito chão pela frente.

  • Ronaldo, um dos benefícios que o CSS traz é justamente esse: ser flexível a diversos dispositivos.

    Você pode definir a maneira pela qual seu site será visualizado dependendo do dispositivo, seja computador convencional utilizando monitor, ou alguma apresentação, handheld, celular, impressão, televisão, etc… Então, o argumento de que um site visto em resoluções diferentes será comprometido é furado, basta o desenvolvedor ter cuidado (essa flexibilidade definitivamente não é oferecida por um site construído com tabelas).

    Quem julga que um site sem CSS fica bagunçado deve repensar seus conceitos pois, quem hoje em dia, em condições “normais”, visualizaria um site sem CSS? Qual browser, dentro desses padrões normais de navegabilidade, acessa um site sem abrir seu CSS?

    Agora, se você falar sobre os vários recursos de um Google Reader da vida que, sem o CSS fica confuso, desde quando alguém que não tem como abrir CSS vai acessar um site com recursos desse tipo? Não vejo nexo nesse comentário…

    O HTML feito sem a forma de apresentação fica muito mais limpo e leve. Supondo que alguém visite seu site sem CSS, ele será visto de maneira coerente, se for desenvolvido de maneira semântica… Se for levar em conta serviços muito complexos, como esses “Web 2.0”, obviamente ele não será muito amigável, já que oferecem recursos que não atingem ao público que navega sem a necessidade de CSS.

  • Ronaldo says:

    Ronaldo, um dos benefícios que o CSS traz é justamente esse: ser flexível a diversos dispositivos.

    Mais uma vez você está pregando para o coro, Carlos. Eu não sei o porquê da insistência em entender errado o que está escrito aqui, mas você pode ler os demais comentários e ver que outras pessoas entenderam exatamente o que eu quis dizer.

    Você pode definir a maneira pela qual seu site será visualizado dependendo do dispositivo, seja computador convencional utilizando monitor, ou alguma apresentação, handheld, celular, impressão, televisão, etc… Então, o argumento de que um site visto em resoluções diferentes será comprometido é furado, basta o desenvolvedor ter cuidado (essa flexibilidade definitivamente não é oferecida por um site construído com tabelas).

    Continua pregando para o coro, principalmente para alguém que, como eu, já trabalha com isso há vários anos e inclusive escreveu e ajudou a traduzir material sobre o assunto.

    Quem julga que um site sem CSS fica bagunçado deve repensar seus conceitos pois, quem hoje em dia, em condições “normais”, visualizaria um site sem CSS? Qual browser, dentro desses padrões normais de navegabilidade, acessa um site sem abrir seu CSS?

    E quem disse que eu estava falando de condições usuais? São exatamente para as condições fora do usual (normal é derrogatório) que os padrões existem.

    Falar que ninguém visualiza um site sem CSS é, no mínimo, uma visão míope de como a Web funciona. Uma boa porcentagem dos acessos em qualquer site é feita por pessoas que usam navegadores que não suportam CSS ou não o renderizam adequadamente.

    Isso, sem contar com o fato de que mesmo entre os navegadores mais usados atualmente há divergências enormes da renderização. E, ao contrário de certos desenvolvedores, eu não penso que todo navegador deveria usar o mesmo rendering engine por trás.

    Agora, se você falar sobre os vários recursos de um Google Reader da vida que, sem o CSS fica confuso, desde quando alguém que não tem como abrir CSS vai acessar um site com recursos desse tipo? Não vejo nexo nesse comentário…

    É óbvio que você continua a não entender absolutamente nada do que eu estou falando. Um exemplo de alguém que vai tentar usar o Google Reader sem CSS é alguém que não vê, para dar um exemplo básico.

    Agora, o Google Reader é um caso relativamente irrelevante porque é um sistema mais especializado. Mas, se você viu o vídeo do pessoal da Acesso Digital (http://acessodigital.net/video.html), viu que uma senhora tenta acessar o site da UOL e tem uma dificuldade enorme porque o site não funciona sem CSS. Ele só aparece organizado porque o CSS faz a função das tabelas de antigamente: posicionar elementos.

    Aliás, esse é um excelente experimento para você tentar: instalar o Jaws, desligar o monitor e tentar usar o computar, abrindo um navegador e depois acessando os sites que você usa normalmente. É uma experiência que muda completamente sua visão da Web.

    O HTML feito sem a forma de apresentação fica muito mais limpo e leve. Supondo que alguém visite seu site sem CSS, ele será visto de maneira coerente, se for desenvolvido de maneira semântica… Se for levar em conta serviços muito complexos, como esses “Web 2.0”, obviamente ele não será muito amigável, já que oferecem recursos que não atingem ao público que navega sem a necessidade de CSS.

    É nisso que está o seu grande problema: o que seu comentário passa é que você acredita que a Web é navegada somente por jovens com visão perfeita, controle motor perfeito e usando navegadores modernos em máquinas modernas.

    Você não acha que uma pessoa com dificuldade visuais ou motoras não quer usar um site “Web 2.0”? Você acha que não é possível fazer um site assim acessível? Dizer que não será amigável é uma desculpa bem furada para não se esforçar. Não amigável é somente uma outra forma de dizer que não acessível.

    Se você continuar repetindo esse tipo de argumento, a única coisa que você vai passar é que, a despeito do tanto que escreve, não entende muito do que está falando.

  • Ronaldo says:

    Opa, Torres! Bom ver você por aqui. :-)

    Como você disse, é uma guerra e difícil mesmo. O vídeo que você e o pessoal fizeram já é toda uma batalha em si: ficou muito, muito bom. Espero que mais pessoas se conscientizem de que não basta colocar CSS no site em cima de um monte de DIVs e achar que o problema foi resolvido.

  • Ronaldo, acredito que suas respostas aos comentários já foram suficientes para alguém com bom senso entender o que você quis dizer.
    Se me permite mudar um pouco o foco, gostaria de perguntar uma coisa baseado na sua experiência. Como ligar com gerenciadores de conteúdo que não lidam muito bem com os padrões? Afinal, montar um site seguindo os padrões é “fácil” para quem desenvolve, mas não para quem mantém o site.
    Nos meus sites geralmente utilizo o WordPress, e por melhor que o tinymce seja, ele está longe de ser perfeito.
    Como você tem lidado com isso para manter a acessibilidade de seus trabalhos?

    Gostei do seu blog. Só o conheci a pouco tempo.

  • Ronaldo says:

    Essa é uma questão complicada mesmo. Geralmente, se você recebe entrada de vários locais–como em um blog, por exemplo, que recebe comentários, trackbacks, etc–com encodings e padrões diferentes, a menos que você faça um esforço por trás, não vai conseguir se manter 100% com os padrões.

    Uma possibilidade, e a que uso ultimamente, em sistemas onde tenho um controle mais necessário é fazer um tratamento da entrada: primeiro, converter o encoding para o que você precisa; depois, passar por algo como o tidy para criar uma entrada bem-formada em termos de (X)HTML; por fim, eliminar os tags que você não permite. É complicado, mas se você quer 100% de validação, não tem como evitar.

    Fico contente que você tenha gostado do blog. :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

What's this?

You are currently reading Padrões Web, modo mundo real at Superfície Reflexiva.

meta