jQueryPlugins.com - Sua fonte de plugins para jQuery

Janeiro 23, 2009 at 12:55 pm · Categorias: Dicas de Javascript, Dicas para freelas, Plugins, Web developer

jQueryPlugins.com é basicamente um acervo de plugins para jQuery (duh!) onde você poderá procurar e avaliar plugins.

Você pode navegar entre os plugins através de categorias pré-definidas ou fazer uma busca na descrição, no nome do autor ou no nome do plugin. Depois de selecionar o plugin você poderá ver uma screenshot do plugin e maiores informações.

O site ainda tem muito o que melhorar, uma gafe absurda é que disponibilizam a ferramenta de busca apenas dentro das páginas das categorias, ao invés de colocar em um lugar visível em todas as páginas.

Estou postando esse arsenal de plugins, que descobri ontem, mas podem deixar que não deixarei de continuar citando os melhores plugins de jQuery que encontrar por aí. ^^

Compartilhe!

Comentários - Gostou do post? Envie para seu amigo

Qual nível de compressão de uma biblioteca Javascript devo escolher para baixar?

Dezembro 11, 2008 at 3:57 pm · Categorias: Dicas de Javascript

Até começar a ler o livro de jQuery do Maujor, eu não tinha a menor idéia de qual era a diferença entre os diferentes níveis de compressão das bibliotecas Javascript que são disponibilizados em cada nova versão da mesma.

No site oficial do framework jQuery, como nos sites de outros frameworks, você encontrará 3 versões, com diferentes níveis de compressão, do framework para download: uncompressed, minified e packed; vamos entender agora a diferença entre elas e quando cada uma deve ser utilizada:

• Uncompressed
  É a maior versão do framework, o código está identado, bem espaçado e possui vários comentários para facilitar o entendimento. É para ser usado quando você está desenvolvendo algum script ou para aprender jQuery.
• Minified
  Essa versão possui um tamanho bem menor do que a Uncompressed pois todo o espaçamento entre os códigos, quebra de linhas e comentários foram retirados do arquivo. É a versão ideal para ser usada no seu site.
• Packed
  Essa é uma versão comprimida da biblioteca, que é totalmente ilegível para humanos; porém existem alguns problemas na sua utilização: elas não ficam armazenadas em cache e durante o processo de descompressão delas, bugs podem ocorrer.

Gostaria também de pedir a opinião de vocês sobre alguma ferramenta, que possa ser feita em jQuery, que vocês estão precisando ou que nunca viram por aí; pois estou precisando colocar o que estou aprendendo no livro em prática e ainda não decidi no que.

Compartilhe!

Comentários (3) - Gostou do post? Envie para seu amigo

Top 50 plugins gratuitos e tutoriais para jQuery

Novembro 23, 2008 at 1:56 pm · Categorias: Dicas de Javascript, Web developer

jQuery, para os que não conhecem, é uma biblioteca Javascript que torna a vida dos programadores e webdesigners, que trabalham com Javascript, muito, mas muito mais fácil! Se vocênão conhece, sugiro dar uma lida nesse ótimo artigo (em inglês) jQuery para designers.

A comunidade em torno do jQuery é muito grande e muito ativa; os desenvolvedores estão sempre criando novos plugins com as mais diversas funcionalidades e disponibilizando para outros desenvolvedores na internet.

Aqui estarei listando 50 dos melhores plugins gratuitos que já encontrei. Observações sobre a lista: ela não está em ordem e os plugins que não possuem “demonstração online” ao lado é porque o exemplo se encontra na mesma página.

1. jQuery Corners (demonstração online)
   Crie bordas arredondadas facilmente.
2. jQuery plugin: Treeview (demonstração online)
   Crie facilmente um menu no formato “Treeview”.
3. Jcrop (demonstração online)
   Plugin para cortar fotos com jQuery.
4. Galleriffic (demonstração online)
   Galerrific é um plugin para jQuery que permite que você crie uma galeria de fotos super rápida.
5. Simple Star Rating System
   Crie um sistema de avaliação, com estrelas, facilmente.
6. jQuery lightBox plugin
   O famoso lightbox.
7. FaceBook Like - jQuery and autosuggest Search Engine (demonstração online)
   Plugin para criar um autosuggest com um design baseado no do Facebook.
8. jQuery sIFR Plugin
   Este plugin permite que você substitua um texto com um fonte default pelo mesmo texto com uma fonte customizada.
9. jQuery plugin: Accordion (demonstração online)
   Plugin para criar menus no estilo Acordião. (veja o exemplo online para entender melhor)
10. Tutorial: Crie uma interface com tabs (demonstração online)
    Um tutorial que ensina a criar uma interface com tabs com ajuda do jQuery.
11. ThickBox (demonstração online)
    É como um lightbox mas que funciona para todo tipo de conteúdo: imagem, galeria de fotos, iFrame, texto, formulários e puxar conteúdo via AJAX.
12. Table Sorter Plugin
    Plugin que permite que o usuário ordene uma tabela automaticamente (sem atualizar a página) de acordo com o campo clicado.
13. Tutorial para justificar elementos via jQuery e CSS
    Aprenda a justificar perfeitamente diferentes elementos via jQuery e CSS.
14. Jquery Slider
    Crie facilmente aquele efeito do conteúdo sendo deslizado ao clicar em algum link.
15. prettyComments
    Acabou o problema com seus inputs de texto e textareas; agora o comprimento delas vai aumentando enquanto os usuários vão digitando.
16. Masked Input Plugin
    Coloque máscaras para datas, telefones, CEP etc nos inputs de uma maneira super simples.
17. jQZoom (demonstração online)
    O usuário terá uma visão ampliada de uma imagem ao passar o mouse sobre ela. (funciona como uma lupa)
18. jWYSIWYG
    Um editor WYSIWYG em jQuery fácil de ser chamado e com poucas ferramentas.
19. Tutorial para criar um menu no estilo de porta de garagem (demonstração online)
    Aprenda a criar menus desse tipo.
20. TableRowCheckboxToggle (demonstração online)
    Permite adicionar a função “toogle” em uma linha de uma tabela.
21. jQuery Corner Demo
    Adicione bordas arredondadas e diversos outros tipos de canto nos elementos da sua página.
22. jQuery Flash Plugin
    Acabou o problema para inserir flash na sua página de maneira válida.
23. Pagination (demonstração online)
    Crie uma paginação para uma lista enorme de itens.
24. DynaCloud
    Plugin que gera uma nuvem de tags ou palavras-chave de um texto ou de alguma página.
25. EasyDrag jQuery Plugin
    Permite que você possa dar a habilidade de selecionar e arrastar a praticamente qualquer objeto da sua página.
26. JCarousel (demonstração online)
    Crie um carousel de imagens facilmente com JQuery.
27. Tutorial para criar um belo menu com sub-itens (demonstração online)
    Plugin para cortar fotos com jQuery.
28. Slider Gallery (demonstração online)
    Uma galeria de imagens, com um slider, similar à do site da Apple.
29. Tutorial para criar um header igual ao do Digg (demonstração online)
    Um ótimo tutorial que abusa do CSS e do jQuery para criar um header semelhante ao do Digg, com direito à menus com sub-menus e tudo mais.
30. Drop Shadows
    Crie um efeito de drop shadow via jQuery.
31. Flexi Grid
    Um poderoso plugin para se mostrar e editar um grid (tabela) com diversas linhas e colunas para o usuário.
32. jQuery Multimedia Portfolio (demonstração online)
    Um plugin para criar um portfolio que suporta diferentes tipos de media: fotos, áudio e vídeo; detectando automaticamente a extensão de cada um para aplicar o respectivo player.
33. Accessible slider (demonstração online)
    Um controle no formato de um slider pra você usar na sua aplicação web.
34. Simple Effects Plugins
    Permite que você adicione efeitos em seus objetos de uma maneira super simples. Efeitos como “toogle”, esconder, mostrar, fade-in e fade-out e slide.
35. jQuery Nice Form
    Estilize os elementos do seu formulário facilmente com esse plugin.
36. Humanized Messages (demonstração online)
    Plugin para exibir mensagens de feedback para os usuários.
37. HoverAccordion
    Um menu no formato acordião que funciona com mouse over.
38. jQuery.ScrollTo (demonstração online)
    Plugin para fazer um scroll até um elemento específico na página.
39. Facebox
    Uma lightbox inspirada no design do facebook, permite carregar imagens, divs ou páginas inteiras.
40. jQueryColorPicker
    Um plugin para facilitar o usuário na hora de escolher uma cor.
41. jQuery AlphaNumeric
    Previna que o usuário insira algum tipo de caracter dentro de um input.
42. Another In-Place Editor (demonstração online)
    Plugin que transformará qualquer elemento em um campo editável.
43. Featured Content Glider
    Plugin para criar seções com o conteúdo de destaque no site, com slideshow e tudo mais.
44. Gradient jQuery plugin (demonstração online)
    Permite que você crie e insira gradientes facilmente nos elementos do site.
45. Cookie Plugin for jQuery
    Um plugin para facilitar o uso de cookies.
46. Date Picker
    Plugin que permite ao usuário escolher uma data através de um pequeno calendário.
47. Tutorial para criar um header com fade (demonstração online)
    Tutorial que ensina a criar um header com fade-in durante o hover e fade-out quando o usuário tira o mouse de cima do header.
48. JQuery Cycle Plugin (demonstração online)
    Plugin que permite adicionar diversos efeitos de transição entre fotos e imagens.
49. jTruncate (demonstração online)
    Plugin para fixar um limite de caracteres em uma div e colocar um link do tipo “leia mais” que irá expandir a div sem refresh.
50. Farbtastic
    Cria um controle do tipo paleta de cores onde o usuário poderá fazer a sua seleção.

Pra quem se interessou e quer saber mais, sugiro participar da comunidade brasileira de jQuery. Aproveito o post também para participar deste concurso do Just Creative Design, que por acaso é um ótimo blog sobre design.

Compartilhe!

Comentários (14) - Gostou do post? Envie para seu amigo

Typeface.js - Use fontes customizadas nos seus sites com ajuda do Javascript

Novembro 4, 2008 at 2:11 pm · Categorias: Dicas de Javascript, Dicas para freelas, Utilitários, Web developer

O Typeface.js vem a calhar quando você quer usar um texto com uma fonte diferente no seu site e sabe que esse texto será modificado eventualmente ou quando você não tem saco de ficar abrindo o Photoshop para editar textos em imagens, use o Typeface.

Ao invés de criar imagens ou usar o Flash apenas para mostrar um texto em uma fonte diferente das padrões, você pode usar o typeface.js e escrever o texto via HTML e CSS. É um procedimento bem simples e no site você encontra um tutorial explicando como se faz.

Veja alguns exemplos do que pode ser feito com o Typeface.js e, se quiser, baixe-o aqui.

Compartilhe!

Comentários (4) - Gostou do post? Envie para seu amigo

Galleriffic - Galeria de fotos, em jQuery, otimizada para velocidade

Outubro 8, 2008 at 3:11 pm · Categorias: Dicas de Javascript, Utilitários, Web developer

Galerrific é um plugin para jQuery que permite que você crie uma galeria de fotos super rápida.

A galeria tem suporte à paginação e as imagens  podem ser vistas individualmente ou através de um slideshow; a transição entre as imagens é feita com um fade out/ fade in.

Mas o diferencial da galeria é que ela faz um pré-loading das imagens após a página ter acabado de carregar. Além disso, cada foto da galeria possui uma URL própria, o que ajuda em SEO e permite ao usuário guardar no delicious ou no favoritos uma foto específica.

Você ainda pode permitir ao usuário que baixe a foto no tamanho original; possui uma versão para quando o javascript estiver desabilitado e ainda suporta múltiplas galerias.

Compartilhe!

Comentários (1) - Gostou do post? Envie para seu amigo