Arquivos Categoria

Dynamic Drive apresenta caixa de conteúdo com efeito de slide/cortina.

Artigo publicado em December 27, 2007 as 2:46 pm

Caixa de conteudosDynamic drive apresenta uma extensão para o famoso jQuery, em como transformar um simples div numa caixa de conteúdos com navegação e efeito de slide/cortina.

Estas caixas dão bastante jeito quando queremos ter pequenas noticias na pagina principal do nosso site.

Esta extensão vem com dois ficheiros (senão contarmos com o jQuery), e juntos formam apenas 6kb.

O bom desta extensão é o factor de trazer varias opções para o seu uso como:

  • Suporta múltiplas caixas de conteúdo
  • Com conhecimentos CSS é possível modificar o estilo da caixa de uma maneira simples e fácil
  • Possível controlar a velocidade do efeito
  • Suporta manual e slideshow, o manual o conteúdo so muda quando o visitante usa a navegação, o slide show escolhes o tempo que queres para o conteúdo mudar.

Para mais informações e download visite Dynamic Drive.

Directoria de Ajax Scripts.

Artigo publicado em December 24, 2007 as 12:56 pm

Num post mais antigo, apresentei ScripTeka um website que reune todas as extensões para prototype e scriptaculous. Um site bem conseguido e de facil uso para procurar o que queremos.

Hoje descobri mais um site, Best Ajax Scripts, mas em vez de dedicar se apenas a uma framework tenta reunir todos as extensões e scripts em Ajax.

Não acho tão bom como ScripTeka mas sem duvida uma passagem para quem procura extensões em Ajax.

O site de momento já contem perto das 200 extensões / scripts.

Ajax depois do slideshow vem o video.

Artigo publicado em December 24, 2007 as 10:50 am

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.

Ajax dicas por Yahoo como criar aplicações com alta performance.

Artigo publicado em December 22, 2007 as 7:16 pm

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.

Prototype e Scriptaculous compactados.

Artigo publicado em December 21, 2007 as 7:21 pm

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.

Gifs, animações para o efeito loading em Ajax

Artigo publicado em December 20, 2007 as 8:49 pm

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?

Pagina 3 de 6«12345»...Ultima »

Wisemapping Magento Ecommerce TaskFreak
MooFilm Flexigrid ProtoFlow

Drag e Drop com Scriptaculous

Drag e Drop com ScriptaculousEste tutorial consiste em explicar como usar o prototype e o script.aculo.us para criar o efeito drag e drop. Analisamos todas as opções, mostramos como criar com exemplos práticos e visuais.

Uff.. Como usar Prototype para pedidos em Ajax.

Como usar Prototype Neste tutorial explicamos como podes começar a dar os teus primeiros passos na famosa framework prototype, um simples tutorial onde é explicado como podes fazer os teus primeiros pedidos em Ajax.