No artigo anterior falei do slideshow por Julien Lecomte’s (Yahoo) em como criar aplicações com alta performance em Ajax, sem saber agora encontrei o vídeo. Se tiverem interessados e gostaram do slideshow vejam o video.

Yahoo lançou um slideshow com truques e dicas de como criar aplicações de alta qualidade e rapidez em Ajax.
Depois de ler o slideshow notei algumas dicas que eu ainda não sabia, umas das que mais me surpreenderam foram:

Enganar os usuários se for preciso, primeiro fazer o update do interface e depois fazer o trabalho no background.
Interessante muitas das aplicações que crio em Ajax nunca usei esta táctica, por muito que o usuário tenha que esperar.
Um simples exemplo é quando um usuário preenche um formulario, submite, normalmente a minha aplicação faz o trabalho todo verificar, salvar na base de dados, e voltar a resposta ao usuario, mas porque não só verificar, dar a resposta ao usuario e depois salvar na base de dados?
Sem duvida que é uma perspectiva diferente, mas que traz as suas vantagens.

O tempo de espera recomendado em pedidos em Ajax é cerca de 300ms, mais do que isso o usuário pode não gostar da experiência.
Uma das maneiras que existe para analisar e testar a velocidade é usando o famoso firebug.

Em vez de substituir os atributos do css directamente é preferível substituir a classe.
Por defeito eu normalmente modifico o atributos directamente se por exemplo quero que um texto mude de cor mudo a cor (.style.color:) e nao a classe.

onmousedown é preferível do que onclick. Ok mais uma dica que eu tenho que começar a aplicar.

Se usares tabelas, utilizar sempre o atributo width em cada coluna.
Quantas vezes esqueço-me.

Json é preferível do que XML.

Sem duvida uma boa leitura, não se esqueçam de ver o slideshow completo.

O tamanho normal do prototype é 122kb, o tamanho do scriptaculous é 124kb se usares todos os scripts do scriptaculous.

Por isso se imaginarmos que na nossa aplicação vamos precisar de usar ambas as frameworks ao todo são 246kb.

Sem duvida que a nossa aplicação vai ficar um pouco lenta, mesmo hoje em dia que a maioria das pessoas têm banda larga 246kb só em frameworks deixa nos a pensar um bocado, pois em cima disto ainda temos imagens, html, css e mais algum Javascript e talvez suba a parada para 300kb+.

Por isso acabou de sair uma versão de ambas as frameworks compactadas criadas por John-David Dalton e sem duvida que nos vêem ajudar ao problema do tamanho dos ficheiros.

Sendo assim aqui fica os tamanhos conseguidos:

Prototype 20.4kb
Scriptaculous 19.7kb
Protoculous (Prototype + Scriptaculous) 38.4kb

Excelente de 246kb para 38.4kb, sem duvida nenhuma que ajuda.

Podem fazer o dowload no google code.

Como não existe o efeito do refresh quando se cria aplicações em Ajax os visitantes por vezes não sabem se a aplicação esta a fazer alguma coisa ou se se calhar não clicou no botão ou mesmo se a aplicação deu toda para o torto.

Por isso muitas das vezes é preciso um gráfico animado ou algo para informar os visitantes que a pagina esta a ser carregada.

Hoje dei comigo a procura de alguns gifs animados apropriados para isso, talvez porque o meu forte não seja em criar gráficos ou desenhos.

Encontrei varios sites com diversos gifs e deixo aqui a lista para o caso de alguém também andar a procura.

http://www.napyfab.com/ajax-indicators/ contem uns 30 gifs, sinceramente eu so gosto de uns 5.

http://mentalized.net/activity-indicators/ gosto das barras.

http://www.ajaxload.info/ sem duvida o melhor site da lista pois deixa-te escolher a tua animação preferida e ajustares e escolheres em que cores queres. Bastante útil assim a animação fica de acordo com as cores da tua aplicação.

http://www.sanbaldo.com/wordpress/1/ajax_gif/ poucos mas bons.

http://www.ajax.su/ajax_activity_indicators.html bastantes mas nem todos se aproveitam.

Conhecem mais algum site para adicionar a lista?

Ortho extensão para criar gráficos em 2D
Ortho é mais uma extensão para o prototype, para criar simples gráficos em 2D com Javascript. Alem disso Ortho também permite integrar o scriptaculous para criar efeitos.

Ortho permite criar vários tipos de gráficos como:

Gráficos em arvore, em que podes por exemplo usar para criar uma hierarquia de ficheiros.

Gráficos simples, um gráfico normal com pontos. Gráfico em barras, o tradicional e talvez um dos formatos mais usados. Gráfico do tempo, um dos gráficos mais interessantes da extensão Ortho e na minha opinião esta bem conseguido. Bio gráfico? Interessante mas sinceramente não faço ideia onde poderia aplicar este gráfico em aplicações feitas por mim. Para quem quer ter mais controlo e mais opções nos seus gráficos Ortho parece ser uma boa solução, talvez um pouco difícil para quem ainda esta a dar os primeiros passos no prototype.

Ai esta mais uma nova API da Google, ainda ando eu a brincar com o Google Graficos e já lançaram outra API.

Google PartnerBar permite mostrares as feeds de outros websites no teu site de uma maneira bastante simples. É bastante útil para quem tem varios websites e quer partilhar algum tráfego entre sites. Ou se queres teres feeds de outros sites que não sejam teus pois achas que os teus visitantes vão achar interessante.

Ou então outro método de receber dinheiro, para quem usa publicidade nos sites para fazer algum.

Seja para o que for esta API esta bastante fácil de usar. Com mais tempo ainda escrevo um pequeno tutorial em como integrar esta API com as tuas aplicações.