Segue abaixo a lista de twitadas de links para plugins de jQuery:

• Menus ou lista de diretórios em modo árvore #jQuery #Treeview plugin http://jquery.bassistance.de/treeview/demo/
• 8 Plugins #jQuery para trabalhar com a #api do #google http://www.reynoldsftw.com/2009/03/8-jquery-plugins-that-utilize-google-apis/
• Transforme um textarea em um editor de texto compacto e útil com #jQuery http://avidansoft.com/dsrte/
• Plugin em #jQuery para usar #flash, também serve como siFR http://jquery.lukelutman.com/plugins/flash/example-basic.html
• Dê adeus aquelas mascaras chatas em formulários com o plugin de #jQuery #MaskedInput http://digitalbush.com/projects/masked-input-plugin/
• Galerias de imagens animadas com o plugin #jQuery @Cylce http://www.malsup.com/jquery/cycle/
• Cantos arredondados, triangulares, cortados, picotados, enfim #jQuery #Corner plugin http://www.malsup.com/jquery/corner/
• Corte imagens com o plugin de #jQuery #jcrop #ImageCropping http://deepliquid.com/content/Jcrop.html
• Ordenando dados em uma tabela com o plugin de #jQuery #TableSorter http://tablesorter.com/docs/
• Exiba imagens, páginas externas via ajax com o #facebox, outro plugin #jQuery http://famspam.com/facebox
• Valide formulários num instante #jQuery #Validate plugin http://jquery.bassistance.de/validate/demo/
• #ToolTip maneiro em #jQuery http://jquery.bassistance.de/tooltip/demo/
• Manipule mapas do #google #maps com muita, mas muita facilidade #jQuery http://olbertz.de/jquery/googlemap.html
• E olha que massa esse #capcha feito com #jQuery http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin?&sitereferring=blarnee.com
• Olha esse menuzinho no estilo #LavaLamp com #jQuery http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
• Paginação de conteúdo com o plugin #Pagination #jQuery http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
• Brincando com scroll do browser facinho, facinho #jQuery #ScrollTo http://demos.flesler.com/jquery/scrollTo/
• Olha que massa que é criar gráficos com esse plugin para #jQuery usando HTML 5 http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
• #Autocomplete #plugin para #jQuery http://jquery.bassistance.de/autocomplete/demo/
• Chega daqueles alerts feiosos e malditos. #jGrowl um plugin para #jQuery que é supimpa http://stanlemon.net/projects/jgrowl.html#samples

Pra quem quiser mais dicas de plugins vale a pena ficar ligado também no blog do Ruan, um amigo e também outro jQuery maníaco, sempre que pode ele posta um plugin útil lá no blog :)

Bom é isso pessoal espero que tenham gostado, se tiverem mais plugins compartilhem nos comentários :)

Um abraço e até a próxima.

Leia também:

• jQuery Plugins, melhore a experiência do usuário
• Classe em php para SEO – class.seo.php
• Personalizando a tag title e meta tags com php.
• JavaScript não obstrutivo com jQuery.
• Web Standards, torne seu site legível em qualquer lugar.

Atualizado 21 de Julho de 2009: Mais 20 Plugins jQuery para facilitar o desenvolvimento Web

Desde que conheço javascript, nunca foi tão fácil usar essa linguagem magnífica como agora que estou me adaptando o jquery e seus plugins. Já vi em muitos blogs aqui do Brasil e de fora que falam sobre plugins para jquery, listas de 10 a 50 plugins mais usados ou mais interessantes. Bem aqui eu vou dar algumas dicas que nos últimos tempos estão me poupando muito tempo e deixando os projetos da agência de internet onde trabalho muito mais atraentes.

Abaixo alguns plugins para jquery que acho legal compartilhar com todos:

Masked Input Plugin

Para formulários este plugin é fenomenal, quando precisar usar mascaras em formulários é este plugin que você deve usar simples e eficiente.
Site do plugin: http://digitalbush.com/projects/masked-input-plugin/
Download do Plugin: http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.1.js

Table Sorter

Se você precisa organizar dados tabulares e ordená-los por ordem alfabética por exemplo, Table Sorter é uma ótima opção. A partir de uma tabela de dados ele ordena os dados conforme você quiser e ainda exibe paginação delimitando o conteúdo exibido. O visual da tabela é você quem determina através do CSS. Muito útil para listagens em sistemas de gestão de conteúdo este plugin com certeza tem que estar entre as ferramentas de um desenvolvedor web.
Site do Plugin: http://tablesorter.com
Download do Plugin: http://tablesorter.com/docs/#Download

Quick Search

Quando precisar utilizar um formulário para uma busca rápida em alguma listagem, tabela ou textos, Quick Search é muito útil, em tempo de execução ele faz uma busca e filtra só o termo digitado no formulário.
Site do Plugin: http://rikrikrik.com/jquery/quicksearch
Download do Plugin: http://rikrikrik.com/jquery/quicksearch/#download

jQuery Cycle Plugin

Slideshow, galeria de imagens, notícias rotativas, rolagem de elementos, enfim este plugin possibilita tudo isso e um pouco mais, além de ser muito fácil de usar ele permite uma infinidade de efeitos de fade, scroll, easing, toggle dentre outros. ( designers adoram este plugin )
Site do Plugin: http://malsup.com/jquery/cycle/
Download do Plugin: http://malsup.com/jquery/cycle/download.html

Datepicker

Seleção de datas, períodos exibição de hora e data são apenas algumas das funcionalidades deste plugin. Com um calendário simpático ele permite todas essas interações com quase nenhum esforço do programador/desenvolvedor e com certeza para o usuário o resultado final é o melhor possível.
Site do Plugin: http://docs.jquery.com/UI/Datepicker
Download do Plugin: http://ui.jquery.com/download

jQuery Tabs Plugin

Muitas vezes um conteúdo extenso precisa ser compactado para tornar a experiência do usuário mais agradável. O uso de abas é uma maneira muito utilizada, o plugin Tabs permite a criação de abas de uma forma muito simples, e não obstrutiva como comentei no meu post anterior sobre javacript não obstrutivo.
Site do Plugin: http://docs.jquery.com/UI/Tabs
Download do Plugin: http://ui.jquery.com/download

Em rítmo de férias que 2009 seja fantástico a todos.

Leia também:

• 20 Plugins jQuery para facilitar o desenvolvimento Web
• JavaScript não obstrutivo com jQuery.
• Classe em php para SEO – class.seo.php
• Personalizando a tag title e meta tags com php.
• Web Standards, torne seu site legível em qualquer lugar.

Acessibilidade

Vamos supor que tenhamos um menu horizontal e quando passamos o mouse por algum dos itens do menu apareçam outros sub-menus como na imagem abaixo.

Quando o site é acessado em computadores que não tenham suporte ao JavaScript ou que estejam com ele desabilitado o risco de os sub-itens não aparecerem ou aparecerem de forma errônea é muito grande, por isso o uso do JavaScript não obstrutivo extingue definitivamente a possibilidade de o usuário não conseguir acessar os sub-itens.

Nos próximos posts vou falar sobre JavaScript não obstrutivo em barras de navegação. Assine o feed e fique esperto.

Relação JavaScript não obstrutivo e SEO

No exemplo acima vimos que o JavaScript não obstrutivo ajuda na acessibilidade das páginas na web, com os mecanismos de busca não é diferente. Menus como os da imagem acima quando gerados dinamicamente através de JavaScript se tornam um grande problema para os buscadores, a dificuldade dos robôs está em interpretar o código JavaScript quando o buscador analisa um web site a procura de links seja do mesmo site ou externos.
Já que o conceito básico de rastreamento em Search Engines é sair farejando sites em busca de novos links para assim indexar o maior número de informações em seus servidores, por exemplo, se o link para a página de Produtos do seu web site for gerado dinamicamente através de JavaScript, é muito provável que os motores de busca tenham dificuldade em indexar essa página correndo o risco até de nem se quer ser indexada, este é apenas um exemplo dentre tantos problemas que scripts obstrutivos podem causar para o rank de sua página nos buscadores. Portanto JavaScript não obstrutivo passa a ser uma técnica indispensável para quem quer estar no topo do Google.

Simplificando o desenvolvimento com jQuery

jQuery é um poderoso Framework em JavaScript que facilita muito o desenvolvimento do JavaScript não obstrutivo, é utilizado por grandes empresas de todo mundo como Google e DELL por exemplo. Compatibilidade e produtividade são umas das características mais marcantes dessa fantástica ferramenta.

Compatibilidade

Utilizando jQuery para o desenvolvimento de aplicações na web o desenvolvedor está seguro de que os scripts funcionarão perfeitamente nos Browsers mais utilizados no mundo inteiro como Internet Explorer, Mozilla Firefox, Safari e Opera. A segurança de que as interações no seu web site funcionarão para qualquer usuário com certeza é um ponto muito forte do jQuery.

Produtividade
Para exemplificar o que muda quando passamos utilizar jQuery nada melhor do que comparar um código de JavaScript puro com um que execute a mesma função porém utilizando jQuery.
Nas especificações do XHTML da W3C o parâmetro target=”_blank” da tag <a>, utilizado para fazer com que o link seja aberto em nova janela, foi retirado por se tratar de uma funcionalidade extra a de apenas marcar as páginas.

Para simular este efeito agora é recomendado que seja utilizado através de JavaScript, pois bem, vamos ver o exemplo de link externo em JavaScript puro:

function createExternalLinks() {
    if(document.getElementsByTagName) {
        var anchors = document.getElementsByTagName('a');
        for(var i=0; i
Neste script é feito uma varredura no documento procurando tags ancora, <a>, que possua o atributo, rel="externo", e depois é adicionado nessa tag o atributo target="_blank".
Agora vamos ver a mesma função sendo escrita com o uso do jQuery:
$(document).ready(function(){
      $("a[@rel=externo]").attr('target','_blank');
});

Assim como no script anterior este faz a mesma varredura, porém com um número de linhas muito reduzido.
É grande a diferença não é?
Este é apenas um exemplo do uso do jQuery em um script pequeno, agora tente imaginar o que o uso do jQuery faria em funções com 50 ou mais linhas de código, manutenção e peso das aplicações com certeza seriam reduzidos.
Neste post mostrei apenas um exemplo do uso do jQuery para ilustrar a facilidade que a ferramenta proporciona, nos próximos posts vou falar mais sobre jQuery e suas facilidades, exemplos de aplicação e plugins para uso no desenvolvimento serão explorados.
Até a próxima.

Leia também:

• jQuery Plugins, melhore a experiência do usuário
• Black Hat e White Hat, o que é, o que é?
• UaiSEO o primeiro evento de SEO de 2010
• Apresentação de SEO Off-Page no SEOcamp
• 20 Plugins jQuery para facilitar o desenvolvimento Web