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

Posts da TAG ‘AJAX’

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.

31 Comentários

Cuidado para não regredir

Você se lembra de quando esse treco todo de Web Standards começou a pegar aqui no Brasil? Muitos falavam que era moda, que ia passar… Outros queriam descobrir as vantagens e outros ainda as desvantagens. Foi bem parecido com o que aconteceu com o “Ajax”. Nos dois começaram a surgir pessoas praticando os conceitos com afinco e tendo resultados interessantes. Entretanto há uma outra parte que mesmo utilizando conceitos novos, conseguiram regredir.

Engraçado isso né? Mesmo utilizando tecnologias e metodologias que geram uma produtividade acima do normal para qualquer projeto, o desenvolvedor consegue regredir e usar essas novas idéias da maneira antiga. Com Tableless foi assim e está sendo agora com o Ajax. Hoje em dia o pessoal está utilizando Ajax em tudo! Quer mostrar algum texto, use Ajax. Quer mostrar uma coluna? Use Ajax. Desde de quando precisamos usar Ajax para poder mostrar um simples texto na tela? Deixa o site mais rápido? Deixa mais acessível? Fica melhor em relação a performance, compatibilidade ou algo parecido?

Vamos com calma. Vamos planejar e pensar antes de sentar o bumbum no banco e codificar. Essas metodologias ajudam demais o desenvolvedor mas só se forem usadas com moderação e da maneira correta. Caso contrário elas são tão penosas quanto as maneiras antigas de desenvolvimento.

O bom desenvolvimento é um conjunto de vários pontos. Vão desde planejamento até a relação de designers e programadores. É um caminho tortuoso, mas bem fácil de caminhar.

12 Comentários

Máscaras Javascript em Campos de Formulário

Vou tentar, uma vez por semana, responder aqui a alguma dúvida de algum aluno dos cursos da Visie que seja útil para todo mundo. A de hoje:

Javascript: máscara em campos de formulário simples e crossbrowser:

Uma dúvida muito comum diz respeito ao tratamento de teclas para campos de formulário. É um hábito de programadores de sistemas Desktop filtrar o que o usuário digita em campos como, por exemplo, data e CPF, permitindo apenas que ele digite número, e colocando automaticamente pontos, traços e outros separadores conforme ele digita. Ao tentar reproduzir esse comportamento na web, a experiência pode ser um tanto quanto frustrante, principalmente devido às diferenças entre o Internet Explorer e os outros navegadores. Além disso, a captura de eventos de teclado em Javascript é uma tarefa relativamente complicada. Por isso vou apresentar uma técnica alternativa, que não usa a captura de teclas.

Comentários aqui.

37 Comentários

Apontador Web 2.0

Uso o Apontador há muito tempo. E já fazia tempo que eu estava descontente com aquele applet Java horrível. Com a vinda do Google Maps, que agora tem mapas brasileiros, eu quase tinha um bom substituto. Só faltava funcionar a busca por endereços brasileiros.

E não é que eu entrei agora no Apontador e eles finalmente mudaram aquela velha interface? Trocaram o mapinha por um mapa Ajax na tela inteira, me mandaram direto para o conteúdo, agilizaram a busca e está funcionando bem rápido. E parece que funciona completamente no meu Firefox no Linux. A interação está muito mais confortável, destacando-se os seguintes pontos:

Arrastar o mapão na tela inteira, principalmente funcionando rápido como está, é muito melhor do que as setinhas da velha versão HTML do Apontador. E muito mais leve que a velha versão Java.
A busca está muito melhor assim. Muito mais fácil de usar.
O site é um excelente exemplo de uso do Ajax. A antiga busca de endereço te levava por três ou quatro telas. Em cada uma delas você tinha que esperar carregar menus, cabeçalhos, rodapés, publicidades e etc.
As ferramentas de agenda, clima, trânsito e traçado de rotas também foram muito bem implementadas. A impressão geral é de que tudo o que eu for fazer é mais rápido, e mais fácil de encontrar, nessa nova versão.
O layout melhorou muito.

Senti falta da informação sobre CEP. Eu usava o Apontador ao invés do site dos Correios, que é quase sempre muito lento, pra consultar CEPs.

Puseram um selinho “web 2.0″ lá. O que vocês acham? Eu não tenho opinião formada sobre isso, fico meio com a pulga atrás da orelha. Queria ouvir a opinião de vocês.

Vamos ver se eles vão mesmo manter o espírito da coisa ao chamar de web 2.0. Algumas características dos sites web 2.0 que ajudariam bastante esse produto:

Always beta: a melhoria contínua. O Apontador ficou congelado por anos, parecia um produto largado. Vamos ver se agora tem novidade toda semana.
APIs públicas: por enquanto não vi nada disso, mas é assim com quase todo site web 2.0. Primeiro se lança o produto, assim que ele é bom o suficiente para ser útil. Algum tempo depois chegam coisas como APIs públicas. O problema é que infelizmente muitos nunca liberam APIs para nos divertirmos. Vamos ver que caminho o Apontador vai tomar.
Conteúdo gerado pelo usuário: isso seria bem interessante. Imagine enviar para seus amigos uma URL do mapa de sua festa de aniversário, de modo que eles possam traçar rotas até lá? Ou alguma coisa como o Wikimapia? Quem sabe até um mash-up com a Wikimapia?

Está aí, Apontador, um exemplo de um site que sofreu uma melhoria muito grande, e um projeto para se acompanhar.

29 Comentários

Web 2.0 Awards

Fizeram uma seleção dos melhores sites Web 2.0 (sem discussão ao nome, ok?! :-P. O legal é que você acaba conhecendo mais serviços interessantes que existiam por aí, alternativos aos serviços que o pessoal costuma conhecer.

E lembrando… O conceito (pelo menos para mim) de um site ser ou não da Web 2.0 é muito mais profundo. Não é só por que o camarada coloca um ajax aqui, outro ali, que o site será automaticamente promovido a Web 2.0. Na minha opinião o buraco é mais embaixo. Os sites com este quilate trabalham de outra forma, as funcionalidades são pensadas nos mínimos detalhes para tornar a experiência de navegação mais prazerosa, mais ágil para o usuário. Só colocar um Ajax bonitinho não faz isso, não muda toda essa experiência.

Tem gente que só por que essa onda de Web 2.0 chegou, pensa que algumas soluções são totalmente revolucionárias e que vão melhorar a vida do usuário. Engano… se você usar por exemplo, sem estudo prévio de público e tudo mais, um recurso de “drag and drop”, você pode estragar totalmente a experiência do usuário. Pensou na acessibilidade (um cego acessando por exemplo), usabilidade (como o usuário vai se tocar que é para arrastar e não clicar?), público alvo e etc? Estas premissas ainda continuam valendo - só que agora valem muito mais - já que estamos mexendo com funcionalidades que antes não eram muito exploradas.

To errado? Qual sua opinião?

16 Comentários

Auto-completar Ajax como o Google Suggest

Algumas pessoas tem escrito perguntando como se produz um efeito semelhante ao Google Suggest. Esta série de artigos e o script que a acompanha são uma maneira de tentar responder a esta dúvida.

Como você pode ver lá, é o início do trabalho. Pretendo ter tudo pronto em duas semanas. Colaborações são muito bem vindas!

19 Comentários

Podcast #16

Você se lembra quando o flash começou a abrir suas asinhas? Se lembra de como todos ficaram impressionados e boquiabertos com as possibilidades vindouras? Todos faziam sites “fúteis”, com pouco conteúdo mas com muitas firulas e coisas que faziam qualquer visitante ficar apaixonado pelos efeitos especiais.
Talvez o Ajax tenha o mesmo caminho…

tempo: ~9m06
tamanho: 8,33mb

Cadastre nosso feed no seu agregador preferido, ou baixe o arquivo mp3.

16 Comentários

Descontos no DreamHost - para serviços anuais e mensais

Atenção: Se tiver problemas com o pagamento por ser necessário o Google Checkout, leia as instruções aqui:
Pagando o Dreamhost com Google Checkout mesmo sendo brasileiro e outras informações aqui.

Eu uso Dreamhost a muito tempo. Quase nunca tenho problemas (você já viu este site fora do ar?). Ele tem ferramentas úteis como Wordpress ou PHPBB que são facilmente instaláveis com apenas 1 clique. Fazer atualização destes sistemas também é tão fácil quanto instalá-los.

Algumas vantagens:

No Dreamhost você também pode criar domínios e subdomínios ilimitados. Isso é bom para quem quiser hospedar sites de clientes, amigos e etc;
Painel de controle simple e bonito;
Você pode criar uma conta FTP individual para cada domínio hospedado;
Além do FTP, você tem acesso o servidor via SSH;
O plano mais básico do Dreamhost te dá 200 Gigas de espaço e 2 Teras de transferência mensal.
Você pode ter mais de 3000 contas de email para cada domínio hospedado… e isso no plano básico!
Fora painel de controle, instalações com um clique, Ruby on Rails, PHP nas versões 4 e 5 e MySQL, Streamming Quicktime, Aliases de e-mails ilimitados e muito mais.
Você ganha um domínio .com/.net/.org graça
E depois que virar cliente, você ainda pode ganhar uns trocados com o programa de afiliados que eles tem. É só indicar assim como fazemos aqui. Se quiser, pode copiar as informações descritas nesta página.

No Wiki do Dreamhost tem mais detalhes e repostas de alguma dúvida que você possa ter.

Com o Tableless você ganha 3 tipos de descontos no Dreamhost, abaixo veja as descrições e passos para o cadastro:

Com o cupom de desconto TABLELESS você consegue:
25% de desconto no L1 Anual: de $119.40 você paga $89.65
15% no L2 Anual: de $239.40 você paga $203.49

Se você preferir uma conta mensal no Dreamhost, também damos desconto, use o cupom TABLEBLESSMENSAL e ganhe $39,90 de desconto em todos os planos mensais do Dreamhost.
Mensal L1 de $59,90 você paga $20,00.
Mensal L2 de $69,90 você paga $30,00.
Mensal L3 de $89,90 você paga $50,00.

E tem também o cupom TABLELESS6007, onde você ganha 60% de desconto nos planos:
Mensal L1 de $59,90 você paga $24,96.
Anual L1 de $119,40 você paga $47,76 por um ano!
Mensal L2 de $69,90 você paga só $27,96.
Mensal L3 de $89,90 você paga $35,96.

E tem também o TABLELESS2 onde você ganha $40,00 de desconto em qualquer plano do Dreamhost. Só colocar TABLELESS2 na hora de comprar qualquer plano e você ganha $40,00 de desconto no ato.

Para poder ganhar desconto ao assinar algum plano de hospedagem na Dreamhost, siga os seguintes passos:

Escolha o plano que gostar mais;
Clique no botão “SIGN UP NOW” do respectivo plano;
Na seguinte página, você escolhe o nível do plano que você gostaria de ter;
Na mesma página, você escolhe se quer receber comissões por indicações;
Logo após, selecione as opções de domínio, se você não tiver domínio ainda, preencha os dados referentes ao seu domínio, conta de usuário, email e seus dados pessoais. Se já tiver, é só selecionar dizendo que já tem um domínio;
No último campo, intitulado “Promo Code or email of who referred you:“, digite um dos cupons do Tableless: TABLELESS, TABLELESSMENSAL ou TABLELESS60;
Clique em I agree to abide by DreamHost’s Terms of Service and Anti-Spam Policy.
E para finalizar clique no botão “Continue to secure payment…”;
Cheque o valor. Ele já deve estar com o desconto aplicado;
Preencha os dados do seu cartão de crédito (tem que ser internacional ou via paypal) e finalize a compra;

Pagando pelo GoogleChekout é fácil:

Por causa de fraudes que estavam ocorrendo o Dreamhost está passando a utilizar o GoogleCheckout como forma de pagamento. Para ter uma conta no GoogleCheckout, você precisa apenas já ter ou criar uma conta no Google (GMail).

Para usar o GoogleCheckout no Dreamhost, siga os passos abaixo:

Ao se cadastrar, no país escolha BAHAMAS. Isso porque você não precisará colocar CEP.
Preencha o restante dos dados normalmente.
Quando chegar em SHIP MY ORDER TO, selecione a opção A DIFFERENT ADDRESS, e agora sim, selecione BRAZIL como seu país. Depois, preencha seu endereço.
Clique em AGREE e CONTINUE e pronto!

Assine o DreamHost pelo Tableless e saia do sufoco.

53 Comentários

Web 2.0 pé no chão

Publiquei o texto lá no meu site, mas acho que ele é relevante aqui também, então lá vai o link:
Web 2.0 pé no chão.

7 Comentários

24 ways to impress your friends

Excelente site: 24ways.org

24 dicas de desenvolvimento web. CSS, DOM, Ajax, etc… Todas preciosíssimas.

Você pode ver aqui um exemplo do tipo de coisa que se ensina lá. Fantástico, não?

Dica do DvD Franco na webstandards-br, que perguntou:

o que acontece quando vira o mês? somem as 24 dicas dos meses anteriores? vc num tem + acesso, nem por 1 menu do site?

Também não sei…

10 Comentários

Voltar para o topo

Outros posts

Aprenda