CSS, Ajax, tudo bem. Mas não esqueça o HTML

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pocket

HTML é o meio básico para acesso ao conteúdo de um site. Mas em muitos sites encontramos falta de cuidado com o funcionamento e a estrutura do HTML, de maneira que, quando isolado do CSS/Ajax, não é possível visualizar o conteúdo ou utilizar links e formulários.

Vamos fazer uma analogia entre o transporte aéreo e o acesso a um site.

Digamos que o cliente tem três opções de transporte/acesso:

1. Um site powered by Ajax é um jatinho particular: ágil, confortável, com tratamento VIP;
2. A primeira classe de um avião é um site sem Ajax, mas powered by CSS. São um pouco menos ágeis e confortáveis, mas ainda há tratamento VIP;
3. A segunda classe é site HTML (sem script e estilo), básico, desconfortável e sem tratamento VIP.

As três opções atendem o cliente, com opções distintas no tratamento.

A opção mais cara de viagem não será necessariamente a melhor. Na maioria dos casos a opção adequada é a classe econômica. Podemos dizer o mesmo no caso da web, onde em muitos casos o meio viável de acesso é através do simples e básico html.

Agora pense no long tail e aplique a regra de 80/20 (princípio de Pareto) para ter uma idéia dos tipos de dispositivos que podem vir a acessar um site.

Os tipos são:

  • browser (com suporte CSS/Ajax);
  • leitor de tela;
  • sistema de busca;
  • mobile;
  • browser sem suporte a novas tecnologias (versões antigas).

O browser (com suporte CSS/Ajax) é o responsável por 80% de todo acesso. Mas lembre que os outros 20% do mercado podem estar com dificuldades para trafegar em seu conteúdo.

É uma armadilha tornar obrigatório o uso de CSS e Ajax para uma página ser exibida. Aquela imagem muito utilizada de background em um botão sem texto, por exemplo, pode não ser acessível quando o CSS estiver desabilitado.

Não se deve perder a autonomia do html. Crie uma estrutura equilibrada, com cabeçalhos (H1, H2…), parágrafos, listas… com formulários, botões e links funcionando, FIR para substituir texto por imagem, que tudo certamente vai funcionar em qualquer situação.

Se o HTML é pobre, feito em tabelas ou mal estruturado, cheio de div, span, id, classe, links funcionado apenas com javascript, com a dependência que tem do CSS/Ajax, em certos casos funcionará com imperfeições ou até mesmo não funcionará. Seu conteúdo não será compreendido ou links e formulários não funcionarão.

Quando se utiliza o trio HTML/CSS/Ajax, é necessário manter a acessibilidade de três maneiras diferentes:

1. Funcionando com CSS/Ajax, em uso HTML/CSS/AJAX;
2. Funcionando com CSS e sem AJAX, em uso HTML/CSS;
3. Funcionando sem CSS/Ajax, em uso HTML.

Teoricamente há uma quarta opção, com ajax e sem CSS, mas em um ambiente onde se executa javascript dificilmente haverá impedimentos ao CSS.

O processo de desenvolvimento deve ser uma cascata para desenvolver:

1. HTML;
2. HTML/CSS;
3. HTML/CSS/AJAX.

E o sentido inverso do desenvolvedor é a cascata para ?quem? ou ?o quê? vai acessar:

1. HTML/CSS/Ajax;
2. HTML/CSS;
3. HTML.

Portanto, designers tableless e desenvolvedores Ajax, se quiserem dormir sem culpa, o jeito é fazer site CSS funcionar sem CSS e site Ajax funcionar sem Ajax.

Podemos e devemos usar e abusar das novas tecnologias, mas não podemos esquecer da responsabilidade e eficiência que o velho html tem.[Webinsider]

<strong>Marcos Moura</strong> (marco.moura@gmail.com) possui um <a href=" http://marcomoura.wordpress.com/ " rel="externo"> blog </a> e é webdeveloper.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pocket

Mais lidas

21 respostas

  1. Adoro esses bafafás, que só vêm enriquecer a minha curiosidade. rs rs rs

    Marco, fiz um teste nesse site que você indicou em um portal de uma intranet que um cliente pediu e que estou fazendo html+css.

    Desde que conheci a webstandards e suas implicações, procuro seguir os padrões e aplicar o que for mais conveniente aos meus clientes e ao público dele.

    Intranets, por exemplo, tem restrições de política interna de segurança. O AJAX e js externo é bloqueado pelo servidor deles, pois a área de tecnologia ainda o considera vulnerável. É uma política interna e, nesse caso, não tem o que fazer, a não ser criar um trabalho que não dê pau, e a melhor maneira de fazê-lo é usando a semântica e não sair abusando das novas tecnologias de desenvolvimento.

    O que utilizo de css para criar os sites são apenas os fru-frus e a maquiagem. O conteúdo é todo html purinho e limpo.

    Resumo: o meu cliente é uma minoria e o que você disse se aplica fortemente às intranets de grandes empresas que tem restrições que vão além do que os entusiasmados pelas novidades podem imaginar.

    O fato é que você está certíssimo e as minorias agradecem. Nem todo mundo tem um super pc/apple com windows/Mac OSX mega-power-browser-super-sensacional-fantástico e um telão de 9867650978 para acessar a internet. Ainda mais em ambiente corporativo, em que as máquinas são padronizadas.

    No meu caso como o site a que me referi se trata de um portal na intranet do cliente e que será exibido somente internamente, procurei saber em que ambiente o meu cliente irá distribuir sua informação, e o mais importante, antes de desenvolver qualquer projeto, é saber ONDE (tecnologia, tá?) será distribuída a informação.

    xêrus a todos

  2. Cara… uma das melhores matérias sobre HTML que já li.
    É isso ai mesmo! mais podemos ignorar o passado e tudo que um dia ele foi só por que hoje as coisas são mais modernar e as coisas passadas não tops.
    A HTML (no caso) teve sua importa, que foi ENORME diga-se de passagem, e ainda tem e sempre tera uma grande importancia e participação nesse universo WEB.
    A HTML foi uma das melhores criações tecnologicas já feitas. Se não fosse a html heim…
    Parabens Marcos Moura!
    Otima matéria!

  3. boa materia sim, não podemos só pensar na frente e esquecer (ou querer esquecer) os browsers antigos, conexões lentas ou até sistemas operacionais mais antigos do que a grande média.

  4. Realmente tem que ser feito de maneira coerente os códigos, tanto HTML, CSS e AJAX. Se o HTML não estiver bem feito o CSS vai ser aplicado de forma erradíssima.

  5. jax minha intensão não é excluir o css, longe disso.

    Hoje achei essa ferramenta, que exemplifica o que estou dizendo, é um serviço para vizualizar o site como em um telefone celular ou em um PDA

    http://mowser.com/

    Muito útil para teste, em muitos casos a primeira página é a menos importante do site, por que o q se vê é apenas o menu, para chegar até o conteúdo é preciso avançar até a segunda página, um ajuste no html( e não estou dizendo de semântica) poderia melhorar a usabilidade, não acha ?

    O render é sem ajax e css !!!

  6. …Portanto, designers tableless e desenvolvedores Ajax, se quiserem dormir sem culpa, o jeito é fazer site CSS funcionar sem CSS e site Ajax funcionar sem Ajax…

    Aqui ele disse, o site carregar sem CSS e sem Ajax, ou seja, funcionar os links, ver os textos corretamente, a navegação certamente ficará muito diferenciada mas o usuário mesmo assim tem o direito de usar.

    Usando um comentário: É válido lembrar também a porção de scripting necessária também para evitar erros e para não implicar na acessibilidade à informação disponibilizada. Ou seja, desenhe seu site de forma a funcionar bem com ou sem javascript,CSS e AJAX =].

    O layout não será o mesmo, mas o site tem que continuar funcionando. Tal como uma busca feita em Ajax, e se o browser não der suporte ao Javascript?! E ai?! Vai ficar sem busca?!

    Foi isso que ele quis dizer, pode ter ser expressado mal ou você entende de forma diferenciada. Mas desentendimentos haverão sempre!

    Nenhum cliente pedirá um site sem cor ou cru, 80% do site é conteúdo, então o conteúdo é mais importante que forma de apresentação. Se na pior das hipóteses não tiver layout, que tenha pelo menos o conteúdo.

    Abraço!

  7. Eder vou me explicar:

    Eu quando li essa matéria vi que o autor atacou o css separando ele do html. para mim só existe dois tipos de forma com que vc trabalha com html. uma é html + css que consiste em vc utilizar h1, h2, ul, li, p, etc. e divs com id e classes para a disposição do conteúdo, sendo que se usar divs não uso tabela, e os arquivos css contendo seus estilos de cor, de fonte e etc. E tem a maneira antiga, que eu acho desorganizada e suja que é usar tabelas, tags como aplicadas diretamente no html e misturadas ao texto do conteúdo.
    Conclusão disto é, quando me falam para usar html sem css eu ja entendo como fazer uma página da forma antiga com html ruim pesado cheio de tabelas e sujo.
    E não dá pra ficar sem estilos, imagine vc entregar um site para seu cliente sem cor nem nada e falar pra ele não usei css pq tem uma minoria ai que não visualiza =P

    No final da matéria tem esse trecho no final.

    …Portanto, designers tableless e desenvolvedores Ajax, se quiserem dormir sem culpa, o jeito é fazer site CSS funcionar sem CSS e site Ajax funcionar sem Ajax…

    Então eu pensei como assim? porque que vou fazer algo sem css (sem css no meu conceito é um trabalho ruim) por causa de uma minoria que foi falada na matéria, mas que não foi especificada?

    Foi dai que eu falei tabela dentro de div tb… pq se vc tira o css a div perde sua propriedade mas uma tabela não… fiquei imaginando ter que fazer um trabalho horroso por causa de uma minoria =P

    espero que tenha conseguido me expressar melhor agora sobre o porque da minha revolta com relação a esta matéria.

  8. Pra vc também jax

    Só queria que me mostrassem uma pagina que teve seu conteúdo muito prejudicado por causa do ?malvado ajax?.

    posso te mostrar um exemplo de site q funciona sem o ajax e sem o css

    maps.google.com

    mail.google.com

    experimenta acessar com o javascript/css desabilitado

  9. Olá Jax

    > Fazer site com CSS funcionar sem CSS não existe

    Quando um site funciona só com HTML a unica preocupação é com o conteúdo(SEMÂNTICA) e a funcionalidade, então nada de tabela para diagramar,usar tag font para cor, tabelas dentro de suas divs e use tags..

    >…sendo que css foi criado a um bom tempo e ja era visualisado por browsers antigos?

    O CSS 2 não é completamente e/ou corretamente implementado em alguns browsers atuais, então imagina nos navegadores antigos.

    > …porque que realmente vale a pena o esforço de depreciar o código fonte por ela
    Não vejo em quê isto depreciaria o código fonte!!! muito pelo contrário, a intensão é tornar o código funcionando sobre qualquer hipótese

    > Usar AJAX = melhorarar usabilidade
    Com certeza , não disse para não utilizar, espero que todos que acessem meus sites utilize desses recursos, mas se for preciso funcionar sem eles, tudo bem.

    > …acessibilidade para deficiente visual está ligado diretamente a semantica do código…
    Sim, o que torna o conteúdo acessível é a semântica, mas um site funcional que deficientes visuais possam navegar é com links e formulários sem javascript/ajax no onsubmit ou onclick, no puro html

  10. Ok. Vamos viajar juntos então!

    1º Ok. Você está certo na sua colocação, mas e isso?! Por favor especifique essa minoria e me diga o porque que realmente vale a pena o esforço de depreciar o código fonte por ela. Existem sim celulares que acessam somente, como você fez questão de colocar, (X)Html Strict(acrescentei só pra ficar mais bonito). O que você respondeu pra mim está certo, o problema foi o que você disse antes?! Qual é o grande esforço em produzir um site dentro das recomendações?! Dentro dos padrões?! O esforço de ser profissional?!

    2º tabela dentro de DIVS??? [rs] pra que?! Se o mais importante do site é o conteúdo?!

    …tem que ser um trabalho bem feito e limpo… coisa que só se consegue fazer com CSS! defina isso que eu não entendi! Sem CSS dá pra fazer limpo também, só não irá ter estilo.

    Se você vai escrever uma lista, você pode usar ou , se vai escrever um endereço você deve usar , se precisa de um título, você tem os headings , , e assim por diante. Utilizar as tags no sentido correto é igual a código semântico que por sua vez justifica o termo web standards. Seguir os web standards é respeitar a semântica!

    3ºQuanto ao PHP e JSP só usei o exemplo, há (N) linguagens de programação.
    Ajax não é maldoso como você disse, você disse que o mesmo é uma tendência que ainda não está firmada. Daqui há 5 anos pode ser que seja tudo feito em Ajax, mas hoje não é. Sou muito a favor do Ajax, mas que seja usado de forma correta.

  11. Eder tu que ta viajando

    1º Onde que eu falei que o conteudo ta dentro do CSS??? Ja que vc falou do google, aprende uma coisa… semantica é a chave de sua busca. se vc não aprendeu ainda, códigos semanticamente corretos são mais fáceis de serem identificados pelos bots do google. Exemplo: Vale mais hj vc colocar o nome do seu site em uma tag no (X)html do que usar as obsoletas meta tags.
    E sobre dispositivos móveis que não usam CSS só tenho uma resposta ou melhor, endereço pra isso: http://www.operamini.com/

    2º Tu tb viajou, não entendeu oque eu quis dizer, com tabela dentro de DIVS, e a acessibilidade para deficiente visual está ligado diretamente a semantica do código, e tem que ser um trabalho bem feito e limpo… coisa que só se consegue fazer com CSS! Na boa, procure se informar mais sobre semantica do códigos html e microformats que vc vai entender muito bem oque eu to falando… acho que nem o autor dessa matéria sabe oque é isso, se soubesse não teria falado dessa forma, ou simplesmente se expressou muito mal.

    3º vc falou de php e jsp, mas não esqueça que tem se criado uma grande tendência ao phytom tb… Só queria que me mostrassem uma pagina que teve seu conteúdo muito prejudicado por causa do malvado ajax.

  12. Jax, desculpa mas você viajou total!!!

    1º Minoria que não visualiza CSS. O conteúdo não está no CSS e, a minoria que não visualiza o CSS pode ser o Google. Certo?! O Google não faz pesquisa no CSS e sim a pesquisa dentro do HTML (Linguagem de Marcação de Texto) onde está embutido o conteúdo.
    Vários dispositivos móveis não vêem CSS, por exemplo, celulares.
    Softwares de leitura de tela, não lêem CSS, pra você ficar mais informado, sugiro que leia esse artigo.
    http://webinsider.uol.com.br/index.php/2007/04/02/acessibilidade-para-deficientes-visuais-nao-e-tao-dificil/

    2º Ai você viajooooou total. O site existe sim sem tabelas, se você não usa a ferramenta Webdevelper do Firefox, vá usar, ela desabilita o CSS dá página e mostra como ela ficaria sem CSS. A minoria eu sem que é: Deficientes visuais por exemplo, eles também tem o direito de acessar, certo?! Experimente ler sobre isso também. Absurdo é pensar que seu site será visto somente através do browser.

    3º Aqui você foi razoavelmente bem. Ajax está para melhorar a usabilidade, como pode piorar também. É tendência certo? Pode dar certo como não pode dar certo. A linguagem mais usada hoje para programação web é PHP, a tendência é que o JSP venha subtitui-lá, ou seja, poderá ser, não é. Posso te citar exemplos, é só pedir.

    Eu gostava mais quando pessoas mais competentes criticavam.

  13. Não concordo com o texto…

    1º – Que minoria é essa que não visualisa css, sendo que css foi criado a um bom tempo e ja era visualisado por browsers antigos? Por favor especifique essa minoria e me diga o porque que realmente vale a pena o esforço de depreciar o código fonte por ela.

    2º – HTML semanticamente correto + CSS organizado = código fonte limpo, leve e compatível. Fazer site com CSS funcionar sem CSS não existe a não ser que coloque tabelas dentro de suas divs e use tags como diretamente no texto do html, ou seja, um trabalho absurdo e sem sentido para que? para a tal minoria que nunca ouvi falar? vale a pena o esforço?

    3º – Usar AJAX = melhorarar usabilidade. Tudo bem que tem gente por ai abusando do recurso mas ainda sim, é melhor ter do que não ter. Isso é evolução e tendência, ou vc aceita e usa da forma mais correta que achar, ou vc fica pra tras.

    Eu gostava mais quando profissionais como o Henrique C. Perereira falavam sobre esse tipo de assunto aqui.

  14. ahh um detalhe interessante

    Regra de 80/20 nos dispositivos.

    Mencionei o principio de Pareto nos acessos, mas podemos também aplica-lo nos dispositivos utilizados para navegar.

    Se temos esta listas:

    * browser (com suporte CSS/Ajax);
    * leitor de tela;
    * sistema de busca;
    * mobile;
    * browser sem suporte a novas tecnologias (versões antigas).

    Então o browser (com suporte) é 20% dos veículos que trafegam no site, e o restante soma 80%

    Galera brigadão

  15. Marco, muito bom sua matéria.

    As vezes queremos fazer uma casa sem uma boa base. É como o HTML, não adianta ter efeitos mirabolantes e estilos gigantescos sem uma boa base.

    Você foi conciso no processo de desenvolvimento!

    Abraço,
    Éder Prado

  16. AJAX é método. O problema é o abuso do Javascript, e a dependência dele. Há meio de torná-lo uma ferramenta pra aumentar a acessibilidade. Scripts de qaumento de fonte, e opção de tela em alto contraste são os melhores.

  17. É válido lembrar da importância da semântica para que o sucesso da acessibilidade do desenvolvimento web seja alcançada. Sites sem estruturação semântica estão relativamente fadados a perder a parcela dos 20% de prováveis clientes que acessam o site por outras formas de visualizador. É válido lembrar também a porção de scripting necessária também para evitar erros e para não implicar na acessibilidade à informação disponibilizada. Ou seja, desenhe seu site de forma a funcionar bem com ou sem javascript,CSS e AJAX =]

  18. O CSS deve ser usado apenas para formatar a aparência das informações que estão no HTML, sendo assim, se for feito o uso correto do CSS, o site será 100% acessível em dispositivos que não suportam CSS.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *