Tableless - Padrões Web com Pastel e Caldo de Cana

por Elcio Ferreira Setembro 14th, 2007

Site em Ajax? Site em Flash? Pergunta ruim.

Recebi há poucos dias um email que me deixou intrigado. Um amigo descrevia um site que vai construir em breve e me perguntava: você acha que devo fazê-lo em Ajax? Essa é uma pergunta ruim. A boa pergunta seria: onde, nesse site, eu deveria usar Ajax?

Enquanto os cabeças-pequenas ficam discutindo se devem fazer ou não site em Flash, o Flickr faz um site HTML, com um excelente slideshow em Flash. Deixe-me perguntar: o YouTube é um “site em Flash”? O Google Video? E o Charges.com.br? Não? Uma vez que o uso de Flash era inevitável, porque não fizeram logo o site todo em Flash? Porque, amiguinhos, Flash é bom para umas coisas, HTML é bom para outras. Eis uma lição que precisamos aprender: não ao radicalismo, nem oito, nem oitenta.

HTML é a ferramenta ideal se você quer que as pessoas consigam usar o botão voltar, adicionar bookmarks, mandar o endereço para os amigos, selecionar e copiar texto, imprimir a página, encontrar seu conteúdo no Google e etc. Claro, dá para fazer quase tudo isso funcionar com Flash ou Ajax, mas com HTML você faz isso sem trabalho nenhum. Está pronto. Basta escrever bom HTML que o resto acontece sozinho. Além disso, HTML tem um custo de desenvolvimento muito reduzido em relação ao Flash. Custo de desenvolvimento, amigos, se mede em horas de trabalho. Gerar formulários, buscas, listagens e relatórios é muito mais fácil em HTML do que em Flash. Se você usa um desses frameworks modernosos então, nem se fala.

Por outro lado, Flash é bom para algumas outras coisas. Por exemplo, se você vai publicar vídeo numa página web, Flash é hoje a opção mais leve, simples e compatível. Ajax, por sua vez, é excelente para evitar refreshs e modifica o modelo de interação com a página. Então não precisamos escolher entre um “site em Flash” e um “site em Ajax” em detrimento de um “site comum, em HTML”.

Para ajudar meu amigo, vou publicar aqui algumas coisas que levo em consideração ao escolher onde usar Javascript e Ajax em um site. Entenda que isso não é uma verdade absoluta, há provavelmente muito mais coisas que você pode levar em consideração, em que eu talvez nunca tenha pensado. Hoje, eu penso no seguinte:

  • Acessibilidade: o bom Javascript não quebra a acessibilidade do bom HTML (posso falar mais sobre isso outro dia.) Mas isso pode dar algum trabalho. É preciso levar em conta a importância da acessibilidade para aquela aplicação específica. Sim, acessibilidade pode não ser importante para determinadas aplicações. Por exemplo, o Google Maps é inacessível a deficientes visuais e a qualquer um que não consiga usar um mouse. Quem aí vai dizer que eles fizeram uma escolha errada? Mas, para a maioria das aplicações, acessibilidade é importante, e é preciso pensar nisso antes de planejar nosso Javascript.
  • Modelo de interação: você pode torcer o nariz, mas as pessoas estão acostumadas com o modelo de interação com páginas: clica - espera um pouquinho - carrega uma nova página. Elas sabem usar os recursos do navegador feitos para esse modelo, como a barra de endereços, os bookmarks, e o botão voltar. Ah, o que seria de nós sem o botão voltar? Então, eu uso Javascript sem medo onde é claro para as pessoas que elas estão interagindo com a mesma página, no modelo “aplicação”. Mas evito usá-lo onde possa dar a impressão de que estão navegando para outra página. Caso contrário, elas vão tentar usar o botão voltar e o resto todo. Você leu certo, “evito” não quer dizer que eu nunca faça, só tento ser muito parcimonioso. O nosso Tutorial de Ajax (e também a continuação) foi feito em Ajax por motivos didáticos. Navegando nele você vai sentir falta do botão voltar e de poder usar bookmarks.
  • Custo x benefício: convenhamos, HTML comum funciona bem para a maioria das coisas, e realmente muito bem para algumas. É a ferramenta ideal, por exemplo, para publicar um site de conteúdo, como esse aqui. Um portal de notícias, um blog, um manual de produto, etc. Usando Ajax você pode fazer com que, ao navegar em um site assim, seja recarregada apenas a parte principal, com o conteúdo. Menus, cabeçalho e rodapé permanecem. Mas será que vale a pena? Trabalhando com padrões web, com seu CSS, javascript e imagens no cache, você vai economizar quanto em banda com esse Ajax? Aqui no Tableless economizaríamos cerca de 15 Kb por página. Por outro lado, teríamos que incluir um bocado de Javascript colocar esse Ajax para funcionar, e manter funcionando coisas como o botão voltar. Sendo que cada visitante vê em média 2 páginas (1,95 para ser mais exato) isso dificilmente representaria alguma economia em banda. E daria um bocado de trabalho.

Logo, meu conselho é: não faça sites “em Ajax”, nem sites “em Flash”. Faça sites com os padrões web, e use Ajax ou Flash onde isso for realmente ajudar seus usuários.

Se ainda estiver interessado, leia também:

31 Comentários

Inside

100% apoiado =]

[]’s

VitorGGA

Todo baum desenvolvedor deve saber disso
ENTAUM SE VC NAO SABE, LEIA CARAMBA huhuhu
Bom post!

Luan Almeida

Totalmente apoiado, muito bom!

Newton Calegari

Concordo plenamente! Usar o que é necessário, na hora necessária, que realmente sirva pra alguma coisa.

Joe Edman

Alguém viu o site like-youtube da Abril? O fiztv.com parece ser completamente em Flash… ou não?

Diogo Souza

Impecavél nas palavras, parabéns!

Erick Wilder

Como você disse: deve-se avaliar o projeto antes de decidir a tecnologia. “Flash para tudo” só dá certo (na minha opnião) para sites promocionais, alvos de campanhas-relâmpago de agências de publicidade para algum produto que eles acham ser “ultra-super-duper-revolucionaria-interessante-incrivelmente-mente-…-de-se-comprar” (ufa!!). Resumo: sites que não têm relevância de conteúdo na web. Eles vêm e vão na mesma velocidade. Creio que quando o conteúdo é importante devemos sim utilizar o bom e velho HTML.
Infelizmente o que ouço de desenvolvedores em Flash / Flex é que eles não têm paciência de testar os pequenos contratempos de visualização e funcionalidade através dos diferentes browsers do mercado: “Ah! Ajax??!! Pra quê?? Demora pra fazer funcionar em todos browsers…tem que ficar testando toda hora…CSS então, nem se fala, eu odeio o Firefox, nada funciona nele”
Bem, acho que só cresço quando me deparo com um novo pau do IE (quase sempre é ele) ou quando preciso testar no Safari o JS e CSS.
Estamos aqui pra isso não é? Crescer, aprender e apreder!!

Thássius

Bastante interessante. Em resumo, não é necessário se apegar a apenas uma tecnologia. Misturá-las é o ideal, até que chegue a um resultado que seja confortável de fazer para o desenvolvedor e “usável” pelo usuário.

Mark de Souza Costa

É tão obviamente correta sua posição que nem tem como discordar.

Saudações,

Mark Costa

Henrique Pimentel

Nossa, lembro de la por 99, quando o flash apareceu e tinha gente que jurava que os sites em htmls iam acabar.
Até que um dia esses sites todos em flash começaram a precisar de manutenção, como atualização de texto, fotos e etc. Entao essas pessoas que defendiam o uso 10)% do flash começaram a ter problemas por que atualizar flash é chatinho e trabalhoso, bem mais que em html.
Eu sempre defendi o uso hibrido de tudo, flash, html, ajax, dhtml e php. Cada coisa pra sua necessidade.
Viva os sites hibridos, que usam a tecnologia para facilitar o trabalho !

Cristian Trentin

Creio que o ideal é planejar e focar no publico alvo, tudo depende do target do projeto, sites todos em Flash as vezes são necessários (Não que eu goste disso)…

Carlos Eduardo

O conteúdo do post é simples, mas algumas pessoas têm dificuldade em entendê-lo.

Na prática, sempre, devemos ter o bom senso. Realmente cada tecnologia possui sua função e deve ser utilizada no que se faz de melhor com ela, ou seja, utilizar cada coisa para o que realmente foi feita.

Creio que o site ideal seja esse, utilizando o que é necessário e viável para o sucesso do projeto, não se prendendo a idealismos, pois a razão de se utilizar algum meio para o desenvolvimento é a busca pelo resultado ideal, visando sempre a qualidade e agilidade para chegar a ele.

Rafael Dourado

Não posso dizer que o blog está devagar que tenho o meu comentário apagado? Muito bonito.

Aguinelo Pedroso

Criar essa harmonia nos sites é um tanto dificil mas é a saida mais indicada como você disse, muito bem colocadas as palavaras.

Abraço

Alex

As vezes o cara quer demonstrar conhecimento e acaba se expressando mal… Eu costumo dizer que tenho aplicações em php no meu site e nao que meu site é em php…. mas pode ser que outros queriam se expressar de outra forma, sei lá…

André

otimo artigo, estava ja querendo enviar um email para questionar isso, por exemplo, temos o netvibes q eh totalmente feitu em javascript e ajax…isso seria ruim?!
estou para fazer meu projeto d TCC, nele pretendo utilizar idéias como a do netvibes, trabalhando com javascript e ajax soh, sem nenhum refresh, isso seria um pouco d exagero? pois o sistema nao tem necessidade d ser encontrado no google nem nda, soimente a pagina q divulgara a ‘empresa’…
o q acha? se voce puder me da essas dicas ficarei grato pois ainda esotu perdido na ideia do desenvolvimento

obrigado!!!…

Bruno Lourenço

E a TAM inaugura o novo site dela moderno, bem mais bonito do que o antigo, mass… todo em tabela.

Christian

Post absolutamente muito bom. Nada a falar, além dos elogios :)

Deiverson Silveira

Excelente artigo, amigo, só não concordei quando disse isso:
“…mas com HTML você faz isso sem trabalho nenhum…”

Os designer utilizam photoshop, fireworks e esses programas geram um HTML muito porco, dificil de dar qualquer tipo de manutenção, cheio de rowpans e spacer.gif

Talvez exista outra forma de gerar o HTML “bom”, inteligivel para qualquer manutenção/adaptação

Luckas Frigo

Primeiro quero elogiar o artigo que está excelente…

Segundo, me dirigindo ao post do deiverson…
Também sou designer, também utilizo esses programas, mas não acho que um designer deva se limitar a utilização de softwares gráficos…
Conhecer outros meios e tecnologias que possibilitem um bom trabalho de design é fundamental…aliás, designer não devem se limitar ao uso do computador (embora isso não venha ao caso agora)…

Além disso, photoshop e fireworks não foram feitos para gerar html, foram feitos para editar imagens…
O que nos leva à mesma discussão do artigo: utilize cada coisa no seu lugar…

Jairo César

“Além disso, photoshop e fireworks não foram feitos para gerar html, foram feitos para editar imagens…
O que nos leva à mesma discussão do artigo: utilize cada coisa no seu lugar…” - essa foi uma das piores besteiras que ouvi nesse post…

Vinícius Lugão

Pessoal,

Concordo com esse post…

Tenho um site que utiliza duas versões: um simples HTML e outro com aplicação AJAX. A versão com aplicação AJAX carrega as páginas da versão em HTML e coloca-as dentro do “modelo” do AJAX.

Nesse modo, o “portal” teria uma escolha de duas versões e suas descrições. E teria uma página de menu separado com outras páginas de conteúdo, assim o AJAX seria como se fosse os frames, porém em única página.

Assim, aqueles usuários que não possuem acesso a versão AJAX devido a incompatibilidade, utilizam a versão acessível, o HTML.

Portanto, essa idéia faz que o site continue sendo acessível do mesmo jeito. Isso é correto, não?

E, falando do Flash, é verdade que o Flash é bom em algo, o Flash possui muita falta de acessibilidade, então devemos tomar uma boa decisão que se devemos usar Flash, Javascript ou HTML. Até agora, quase nunca utilizei o Flash!

Guilherme Bortoli

Odeio extremismos…
Concordo plenamente em relação ao uso certo das tecnologias.
Recentemente fiz um site que usa HTML e Flash, aproveitando o melhor de cada um. Gostei muito do resultado. Se quiser dar uma conferida: http://www.natalluzdegramado.com.br/
Abraços!

Lancelotti

Estou fazendo o site de uma casa noturna.
Nele tem um player em flash que fica tocando as músicas do deejays. Normalmente as pessoas colocam isso num frame para ele não ficar dando reload e reiniciando a música.
Resolvi com ajax, mas perdi o botão voltar e etc.
Resolvi usando o GWT (Google Web Toolkit).
Gostei muito desse framework. Javascript sem javascript =)
Você faz tudo em java (aproveita os recuros de ferramentas como o eclipse) e o GWT gera todo o javascript cross-browser.
Alguém tem alguma idéia melhor?
Abraços.

Guilherme Mattos

Precisa-se de um programador em Flash para a AlmapBBDO [Agência de Publicidade em …… Caso você seja um webdesigner envie seu currículo e portifólio para …

Eu também uso flash e não me considero um programador por causa disso

Depois dessa só me resta ver lagoa azul na sessão da tarde…

Rafaela Saldanha

Parabéns!!!Adorei as informações, a criação e desenvolvimento desse site!!!
http://www.nextcriacaodesitesesistemas.com

Rubia

Olá amigos, venho agir em defesa do Flash.

Estou trabalhando em alguns sites em tableless, é incrível como o desenvolvimento em flash é mais rápido e mais preciso. Além de se poder integrar qq dado muito mais facilmente.

Fiz um site em html e php que quase fiquei louca com tantos problemas de acentuação. No flash isso nunca teria ocorrido.

Claro, sites muito longos em conteúdo, que precisam ser indexados pelo Google não tem jeito, precisa ser em HTML.

Algumas classes em javascript têm eliminado totalmente o problema de não se poder gravar o endereço do flash. Agora se pode gravar um único SWF como se fosse uma página html normal, habilitar o history e tudo mais, salvar com endereço marcado, como se fosse uma âncora… usar Google Analytics…

Isso de o texto deixar de ser selecionável tb é intriga da oposição, não vou nem comentar isso.

Agora os defensores do html não têm mais essa alternativa pra reclamar do flash. E não podem tb negar q desenvolvimento em flash é milhões de vezes mais empolgante q qualquer javascript ultra-animado e moderno…

Andres

Tem toda razão. Se tivesse lido um pouquinho sobre usabilidade, o rapaz não teria feito esta pergunta.

  Construir meu site todo em Flash ou Ajax? by 4DesignBlog

[…] Este artigo do site Tableless é muito bom para abrir a cabeça dos desenvolvedores. Atualmente ainda podemos presenciar muitos desenvolvedores que constroem seus projetos todo em AJAX ou em FLASH. Espero que após ler este artigo você possa utilizar o que cada tecnologia oferece de melhor. […]

Voltar para o topo

Histórico