Melhorar a interação do campo de busca de um site permite que as pessoas que usam tal formulário para buscar tenham uma melhor experiência de uso (leia-se: usabilidade). Com pequenos detalhes, um pouquinho de bom-senso e algumas poucas linhas de jQuery, é possível promover efeitos interessante no campo de busca.

Para ficar claro, será abordada a seguinte interação:

• Campo de busca é “populado” com um termo pré-definido;
• Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende;
• Quando o campo perde o foco, se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece;
• Quando o botão é pressionado, caso o valor seja termo pré-definido ou esteja em branco, o form não submete e o foco passa ao campo apropriado.

O formulário de busca

Um exemplo de um formulário simples de busca, que pode ser usado em “sites reais”, profissionalmente, pode ser do tipo:

<form method="get" action="script.php" name="form" id="form">
    <input type="text" id="form-input" name="form-input" value="Snippets ou Scripts" />
    <input type="submit" id="form-submit" name="form-submit" value="Buscar" />
</form>

Termo pré-definido

A expressão “termo pré-definido” é mais adequada, já que cada site pede um “label” de indicação diferente, conforme as especificações e necessidades deste. Algumas pessoas preferem o termo “Buscar” ou “Procurar” com um botão de label “OK” ou “Vai”; já alguns sites preferem explicitar a função da busca com algo do tipo “Produtos ou Serviços”, acompanhado de um botão com o label “Buscar” (o que é uma abordagem bem interessante).

De uma maneira ou de outra, é preciso definir que termo será esse. Para nosso exemplo, vamos supor que seja um site voltado a desenvolvimento web e o termo pré-definido será “Snippets ou Scripts“. Vamos criar uma expressão regular simples com uma parte do termo pré definido:

patt = new RegExp('Snippets ou');

E por que não colocar a expressão inteira? Também poderia ser feito, mas o “esforço” para identificar o padrão aumenta em relação ao tamanho/complexidade da mesma. Sinta-se à vontade para fazer vários testes.

Melhorando a interação do formulário de busca

A melhora da interação se de duas formas:

• Interção com o campo;
• Interação com o botão;

Interação com o campo

Segundo o planejamento, o que se pretende é “Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende”. A lógica é testar a expressão regular: caso o teste seja positivo, o campo é limpo e recebe o foco para a pessoa escrever. Ao perder o foco, “se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece”.

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});

Interação com o botão

A interação com o botão também é importante – e, infelizmente, é um ponto esquecido por muitos desenvolvedores. A ideia é, ao se clicar no botão, testar se a expressão “bate” ou o campo está em branco e, caso seja um desses casos, dar o foco no campo.

$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Não é necessário dar a instrução de limpar o campo no foco porque a peça de script anterior, sobre a interação com o campo, já faz isso.

JavaScript final

Juntando os pedaços de códigos, já devidamente explicados, tem-se o seguinte:

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});
 
$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Conclusão sobre a melhora da interação em formulários de busca

Certamente essas não são as únicas melhorias cabíveis para a melhoria de usabilidade e interação de um formulário de busca simples, mas, certamente, são 2 medidas muito bem-vindas para que a experiência e “agradabilidade” sejam melhoradas.

Poderia haver, por exemplo, uma tooltip com o que se pode encontrar no site e/ou fornecendo algum exemplo de termo; implementar uma solução de autocomplete; ou, ao invés de limpar o campo, apenas selecionar todo o termo para, já digitação, substituí-lo pelo o que está sendo digitado. Depende da necessidade do projeto.

E você, tem alguma dica ou solução interessante para melhorar a interação em formulários de busca?

Artigos Relacionados

• Sobre parcerias de trabalhos em desenvolvimento web
• 8 características de User Interfaces (UI) de sucesso
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Erros comuns em desenvolvimento web para campanhas de SEO
• Textarea: dicas e truques que você sempre quis saber
• 8 maneiras de melhorar a performance de um site
• Melhores editores WYSIWYG para seu projeto
• 15 fantásticos comandos SQL para WordPress
• Recursos de usabilidade grátis
• Perguntas ao cliente para antes e depois de um projeto

jQuery é um framework javascript que está se tornando se tornou incrivelmente popular. É rápido, fácil de usar e criar plugins personalizados e componentes são feitos rapidamente. Atualmente, todo mundo é um desenvolvedor jQuery e o repositório de plugins está praticamente explodindo com a adições praticamente diárias.

À luz de tudo isto, aqui estão 8 excelentes dicas para fazer códigos melhores com jQuery e se tornar um melhor programador em jQuery que você deve considerar antes de começar seu próximo projeto.

Mantenha a acessibilidade através da degradação

Com jQuery ser popular é assim, mais e mais pessoas estão escrevendo plugins e criando pacotes de componentes que estão prontos para uso. Mas alguns desenvolvedores tem em mente que projetos online também devem funcionar sem javascript ativado. Essa é uma das principais razões para fazer javascript não obstrusivo. Como exemplo, vejam:

CSS

.animate {
color:red;
display:none
}

jQuery

$('.animate').fadeIn();

Usaria jQuery para dar um fadeIn() com a classe “animate”. Mas se o javascript estiver desativado, o navegador ainda analisa a CSS e, naturalmente, os elementos nunca serão mostrados!

Ao invés disso, tenha sempre o hábito de separar “javascript CSS” e “CSS puro”. Tente isto:

CSS

.animate {
color:red
}
 
.animate_js {
display:none
}

jQuery

$('.animate').addClass('animate_js').fadeIn();

Dessa forma, você pode estilizar os elementos para cada situação e manter a degradação de uma forma sensata. Como sempre, sem testar seu código javascript ativado antes da implementação.

Mover efeitos visuais para a camada de apresentação

Quando for escrever javascript, mantenha sempre o foco nos comportamentos. jQuery não é CSS, então esteja atento as diferenças fundamentais entre a apresentação e comportamento.

Por exemplo, quase sempre é uma boa ideia adicionar classes ao invés de trabalhar com somente propriedades CSS. Evite fades e “glamour” nas funções. Guarde os efeitos para uma fantástica apresentação, mas cuidado no uso em funções javascript - nem todos compartilham seu gosto visual!

Usar Firebug e console.log

Firebug é seu amigo quando está desenvolvendo com jQuery – na verdade, no desenvolvimento web, geral. E assim é o comando console.log, que graciosamente substitui o alert() chato.

Basta digitar console.log() para debugar sempre que você precisar no seu código. Mas lembre-se de remover essas instruções antes da produção, uma vez que muitos navegadores terão conflitos, incluindo o IE (claro!).

E, para outras funcionalidades do Firebug, confira a Console API.

Definir padrões sensatos e utilizar uma quantidade limitada de parâmetros

Quando você é mordido pelo inseto jQuery e começa a criar plugins, frequentemente tenta maximizar o número de parâmetros para tornar o desenvolvimento o mais flexível possível.

Isso tudo é muito nobre, mas que fique claro e que tente não confundir o desenvolvedor web com parâmetros minúsculos que quase não fazem diferença (como fades, velocidades, etc.). Ao invés disso, passe paràmetro de objeto e defina padrões sensíveis. Seu código não precisa fazer literalmente tudo!

Encapsular seu próprio alias

jQuery não é o único framework que usa a abreviação de dólar ($). Vários plugins JQuery e trechos de código também o utilizam para definir onDomReady callbacks e funções de seletores CSS, mas você pode acabar (e evitar) com esse conflitos.

Você pode usar seu próprio alias (que pode continuar sendo o “$”) desse jeito:

jQuery(function($) {
    // código usando alias próprio
});

O exemplo acima usa tanto o atalho para $(document).ready(), quanto o argumento para escrever código jQuery em failsafe usando o alias $, sem contar com o alias global. Você pode e deve, igualmente, integrar o $ quando for criar plugins:

(function($) {
    // código do plugin, usando $ quantas vezes quiser
})(jQuery);

Definir callbacks próprios

Quando estiver criando plugins para jQuery, é uma boa idéia deixar o desenvolvedor atribuir callbacks próprios como como parâmetros de funções, tornando possível personalizar ainda mais o plugin. Então, ao invés de forçar os efeitos de callback dentro do plugin, engatilhe funções de eventos e defina os efeitos livremente.

Aqui está um exemplo em que passamos a função onFade para o plugin, escrito como um simples plugin fadeIn:

/*
This plugin fades an element and triggers the onFade when completed
 
EXAMPLE USAGE:
  $('.fademe').customFade({
    fadeSpeed: 50,
    onFade: function(elem) {
      console.log(elem+' has faded!')
    }
  });
*/
 
jQuery.fn.customFade($params) {
  var $defaults = {
    fadeSpeed: 1000,
    onFade: function(element){}
  };
  var $p = $.extend($defaults, $params);
  $(this).fadeIn($p.fadeSpeed,$p.onFade($(this)));
}

Ficar atento com as diferenças entre navegadores

jQuery é bastante propenso a ser crossbrowser. Mas ainda existem falhas, especialmente com os navegadores como o Safari, que tem um trigger diferente para onLoad, e IE, evidentemente. Sempre teste em vários navegadores e preste muita atenção em quando e onde as falhas ocorrem.

Não ser excessivo e definir seu propósito

Certifique-se de que não está usando jQuery apenas porque você pode. Sempre analise suas necessidades e tenha uma ideia clara do que você quer alcançar antes mesmo de escrever a primeira linha. Faça sketches de seu código e discuta suas ideias com seus pares antes da codificação (se não estiver trabalhando sozinho, claro).

Não reinvente a roda a menos que você esteja fazendo isso para aprender e/ou se educar, analise o código de plugins de qualidade para inspirar-se e ver o que tem sido feito por bons programadores.

Bons códigos!

Artigos Relacionados

• Jetpack: explorando novas maneiras de ampliar e personalizar a web
• Dicas para otimizar códigos PHP
• Melhorando a interação em formulários de busca
• URLs amigáveis (slug) à WordPress
• 8 maneiras de melhorar a performance de um site
• Melhores editores WYSIWYG para seu projeto
• User Interface em dicas rápidas
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)

É fato que o plugin NextGEN Gallery do WordPress é o melhor quando o assunto é gerenciamento de galerias de imagens. Com NextGEN Gallery é possível criar galerias facilmente, acrescentar/retirar imagens em modo batch (é possível enviar um arquivo .zip e ele “abre” as imagens numa galeria), dá pra criar álbuns, copiar/transferir imagens entre galerias, inserir marca d’água automaticamente, enfim, o NextGEN Gallery é bem conhecido na comunidade WordPress e certamente está no “Top 5″ de plugins!

Existe, também, apesar não ser tão conhecido, um script à “lightbox” muito bonito e interessante: SexyLightBox. Como é possível ver em sua página, o efeito que ele oferece é bem interessante e, de certa maneira, diferenciado dos outros lightboxes que encontramos por aí (ênfase ao fato de as imagens serem apresentadas em tamanho completo respeitando a resolução do navegador do visitante).

Aproveitando que o NextGEN Gallery oferece a possibilidade de se utilizar script de terceiros para a exibição de suas galerias e somado ao fato de que o SexyLightBox é realmente interessante… NextGEN Gallery + SexyLightBox = Galerias de Imagens Sexy!

Baixando, instalando e configurando NextGEN Gallery

O primeiro passo é baixar e instalar NextGEN Gallery no seu WordPress. Devido ao fato de eles serem de “naturezas” diferentes (o primeiro é um plugin do WordPress; o segundo é um script que pode ser usado em qualquer tipo de site), a maneira de instalar e usar cada um deles é diferente.

Para o NextGEN Gallery, devido ao fato de ser um plugin do WordPress, a instalação é aquela, mesma, que já estamos acostumados:

• Baixar o NextGEN Gallery;
• Descompactar em sua pasta wp-content/plugins;
• Habilitar o plugin.

Depois, perceba que aparece em seus menus um novo módulo, “Gallery”, com subopções para controle do NextGen.

É possível traduzir as opções para vários idiomas, inclusive Língua Portuguesa. Baixe o pacote Portuguese / Brazilian Português [pt_BR] nas traduções oficiais e faça upload do arquivo .mo para wp-content/plugins/nextgen-gallery/lang e, automaticamente, os menus serão traduzidos.

Painel NextGen Gallery em Língua Portuguesa

Para já preparar o NextGen para trabalhar com o SexyLightBox, acesse em seu painel WordPress Galeria > Opções > Efeitos e altere as opções para:

• Efeito Javascript para miniaturas: Personalizado;
• Linha de código do link: rel=”sexylightbox”.

Baixando, instalando e configurando SexyLighbox

Vá até o site oficial do SexyLighbox para fazer download do SexyLightbox. Depois, é preciso subir a pasta descompactada para o servidor.

Não sei você, mas eu costumo criar uma pasta “js” dentro do meu tema para tudo ficar organizado e eu poder usar as funções de caminho relativo do WordPress tranquilamente. Então, uma estrutura que eu usaria para o caso seria wp-content/themes/MEU-TEMA/js/sexy-lightbox-2.3 (essa é a versão mais atual no dia de publicação deste artigo).

Agora é o momento de chamar o SexyLightbox para que funcione em seu tema. Há muitas maneiras diferentes de mexer com chamadas a scripts no WordPress; no caso, vou mostrar uma delas e, em artigos futuros, vou comentando sobre as outras (essa é a deixa para você assinar o feed do desenvolvimento para web).

Uma coisa importante é que o SexyLighbox não é feito para ser usado em standalone, ele deve estar associado a jQuery ou Mootools. Obviamente vamos usar jQuery para o serviço!  ;-)

Então, o código com as respectivas chamadas a scripts e folhas de estilo fica assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.js"></script>
<link rel="stylesheet" href="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
    SexyLightbox.initialize({color:'white', imagesdir: '<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexyimages'});
});
</script>

Perceba que alguns parâmetros foram passados na inicialização do script do SexyLightbox. O grande “trunfo” é usar o parâmetro imagesdir, porque na documentação está errado!

Personalizando seu SexyLighbox

Uma coisa muito boa é que há uma pasta “PSDs” no SexyLighbox para que cada um posso personalizar a aparência como quiser. Então, você pode alterar a cor de fundo, texto, alterar os elementos (setinhas, etc) e usar da forma que você quiser. Então quando você alterar a cor de fundo para o SexyLighbox ficar com a identidade visual de seu site, você vai perceber que a parte do meio da moldura ainda permanece intacta. No caso, você deve fazer um pequeno acréscimo de CSS em seu arquivo padrão (pode ser ao final):

#SLB-Contenido {
border-color:#HEXADECIMAL !important;
}

Agora você tem galerias Sexy!

Com isso, agora você galerias de imagens automatizadas e sexy! Para tirar melhor proveito disso, estude a documentação do NextGen Gallery (além dos fóruns, os tutoriais sobre NextGen de David Potter devem ajudar) e do SexyLightbox para incrementar/customizar ainda mais as galerias de imagens de seu site para que fiquem práticas, bonitas e com excelente performance.

E capriche nas imagens! ;-)

Artigos Relacionados

• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• Textarea: dicas e truques que você sempre quis saber
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• 15 fantásticos comandos SQL para WordPress
• Ferramentas para criação de wireframes
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Jetpack: explorando novas maneiras de ampliar e personalizar a web
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin

Agora imagine como seria bom se houvesse uma maneira de criar sumários dinamicamente para as páginas de seu site! “Seria”, não; é! É possível criar sumários de forma dinâmica através do plugin TOC (Table of Contents) jQuery plugin (jquery.toc) para jQuery!

Sobre o TOC jQuery Plugin

Na página oficial do TOC jQuery Plugin é possível encontrar informações importantes sobre o funcionamento do plugin, histórico de atualizações, exemplo de funcionamento, dentre outros. Mas, para você que está lendo este artigo diretamente no desenvolvimento para web, é possível ver em todos os artigos o plugin em ação, já que implementei a criação dinâmica de sumários oficialmente aqui no blog! Desabilite o javascript que você vai ver, ou melhor, não vai ver o Sumário! ;-)

O funcionamento do plugin é em cima das tags de títulos e subtítulos presentes nas páginas do site. Através da análise destes o plugin:

• Gera um Sumário (“Table of Contents”) dinamicamente (através de tags de lista);
• Adiciona automaticamente numeração ao Sumário e aos correspondentes títulos e subtítulos da página.

E, seguindo a “filosofia” do jQuery, tudo é feito de forma bastante automática e simplificada, bastando somente algumas pouquíssimas linhas de código para colocar a extensão em funcionamento!

Funcionamento do jquery.toc

A primeira coisa a se fazer, logicamente, é baixar o query.toc.  Lembrando que é sempre aconselhável baixar a última versão disponível – na data de publicação deste artigo é a v1.0.2. Em relação a seu tamanho, também não há nada com o que se preocupar: sua versão “normal” tem 5.3KB e a versão compactada tem 2.4KB. Depois disso, basta fazer a “chamada” do script (abaixo da chamada ao jQuery, claro) e começar a codificar.

Lembrando que é conveniente fazer a chamada de todos javascripts e codificar na linguagem ao final do documento, preferencialmente antes de “</body>”.

Codificando

Primeiro é importante escolher em qual lugar vai aparecer o sumário dinâmico. É bom dedicar uma DIV especialmente para isso para evitar erros/conflitos. Para facilitar, neste exemplo a DIV terá o ID “toc”.

1

<div id="toc"></div> <!-- sim, é uma DIV vazia... -->

Uma das condições para o correto funcionamento do TOC jQuery Plugin é que cada título/subtítulo que se queira incluir no sumário tenha o atributo id para ser referenciado e que será usado nos links de âncora do Sumário criado. Falando claramente: todos seus títulos/subtítulos têm que ter id.

Logicamente que criar manualmente um id para cada título/subtítulo a fim de gerar dinamicamente o Sumário seria um trabalho extra e, diga-se de passagem, desnecessário, já que é possível fazer isso via javascript/jQuery. Vamos por partes.

O primeiro objetivo é “pegar” todos título/subtítulos da página (no trecho em que se queira incluir no Sumário dinâmico) e acrescentar um id para cada um. O id pode ser qualquer nome que seja diferente para cada título/subtítulo; afinal, trata-se de um id (mais informações a respeito, leia o artigo sobre diferenças entre IDs e Classes):

1
2
3
4
5

(function ($) {
    $("#content :header").each(function(){ // http://tinyurl.com/celarh
        // fazer qualquer coisa com cada título/subtítulo dentro de #content (nome-alvo fictício)
    });
})(jQuery);

No caso da geração automática de Sumário de conteúdos com o plugin TOC jQuery, nosso objetivo, como já explicado, é dar um id para cada título/subtítulo. Poderíamos criar um nome genérico e fazer um contador para marcar com números (o resultaria seria “#id1″, “#id2″, “#id3″…); mas acho mais “elegante” manter o texto do título e, para enfeitar mais um pouco, inserir “_” no lugar de cada espaço (dado que nomes de IDs não podem conter white spaces).

Vamos gerar um ID para cada título/subtítulo baseados nas seguintes premissas:

• Nome será o texto do título/subtítulo;
• Todos caracteres minúsculos;
• Eliminação de qualquer caractere que não seja letra ou número (incluindo caracteres especiais);
• Substituição de espaços por underscore (“_”).

Então, estamos assim, por enquanto:

1
2
3
4
5
6

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_'); // http://tinyurl.com/dl9z35
        $(this).attr('id', id); //  http://tinyurl.com/68cxmw
    });
})(jQuery);

Depois disso, já temos todos os títulos e subtítulos “alvo” com um ID. Agora é o momento de mandar o jquery.toc entrar em ação:

1
2
3
4
5
6
7
8

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc(); // #toc é o "container" do Sumário, definido anteriormente
})(jQuery);

O “grosso” da coisa é isso! Pode fazer seus testes e ver que o Sumário foi criado automaticamente e está funcional, com todas as âncoras apontando para seus respectivos títulos/subtítulos.

“Refinando” o Sumário dinâmico

Para obter um resultado mais “fino” ainda falta codificar alguns detalhes.

Por exemplo: vamos supor que, por algum motivo, você queira que alguns títulos/subtítulos não entrem na listagem do Sumário. Consultando a documentação oficial do TOC jQuery Plugin é possível identificar que isso é possível através da opção exclude. Vamos supor que não queremos que os títulos primários e o título secundário de id “apresentacao” entrem na listagem; então o trecho ficaria:

1

$('#toc').toc({exclude: 'h1, h2#apresentacao'});

Em conversa com o desenvolvedor do plugin, fiquei sabendo que existe uma limitação quanto ao número de elementos possíveis no exclude. Então, caso tenha bastantes elementos que não gostaria que estivesse listados no Sumário, uma boa dica é criar uma classe qualquer (por exemplo “toc-exclude”) e marcar os elementos indesejáveis com ela. Então, ficaria algo como:

1

$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'});

Aproveitando que estamos querendo fazer um trabalho bem-feito e que jQuery nos permite isso com muita facilidade, não nos custa indicar ao visitante que aquela listagem é um Sumário, inserindo, via jQuery, um subtítulo antes da DIV “toc”:

1

$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend('<h3>Sum&aacute;rio</h3>'); // http://tinyurl.com/bjlr42

O script final de nosso exemplo – que serve de “base” para a implementação do jquery.toc em qualquer site – fica assim:

1
2
3
4
5
6
7
8

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend('<h3>Sum&aacute;rio</h3>');
})(jQuery);

Conclusões sobre o Table of Contents jQuery plugin

Como foi demonstrado, criar um sumário automático-dinâmico com jQuery utilizando o plugin jquery.toc é algo bastante simples. E ele pode ser usado em qualquer tipo de site, inclusive os que utilizam CMSs, como os desenvolvidos em WordPress – vejam que este blog é WordPress e o recurso está presente.

Como “desafio”, no site em que for implementar o jquery.toc faça o seguinte: gere a DIV #toc através de jQuery ao invés de deixá-la na marcação (X)HTML. Coloque o link para o site nos comentários! ;-)

Artigos Relacionados

• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• 15 fantásticos comandos SQL para WordPress
• Jetpack: explorando novas maneiras de ampliar e personalizar a web
• Sobre parcerias de trabalhos em desenvolvimento web
• 8 características de User Interfaces (UI) de sucesso
• Preciosas dicas de segurança e otimização para WordPress
• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• Erros comuns em desenvolvimento web para campanhas de SEO
• URLs amigáveis (slug) à WordPress

São indicações de tutoriais, exemplos, apostilas e macetes de jQuery, tanto de tutoriais individuais, quanto web sites inteiros dedicados ao framework! Gostei especialmente dos links sobre uso de AJAX com jQuery!

Enfim, mais uma belíssima compilação do Noupe sobre este framework javascript que, com certeza, é o mais leve, fácil e eficiente disponível hoje em dia!

Artigos Relacionados

• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• 30 extensões para Firefox que vão mudar sua vida na web (para melhor)
• Preciosas dicas de segurança e otimização para WordPress
• Mais de 450 extensões para WordPress
• WassUp: plugin WordPress para ver estatísticas de acesso (em tempo real)
• Como tirar screenshot de um web site inteiro e obter uma imagem completa
• 25 extensões para o Firefox para aumentar a produtividade no dia-a-dia na web
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber

Tudo está bem separadinho por categorias:

• Painéis deslizantes;
• Menus;
• Abas;
• “Acordeons”;
• Shows de slides;
• Efeitos de transição;
• Carroséis;
• Seletores de cores;
• Lightboxes;
• Validações de formulários;
• Elementos de formulários;
• Tooltips;
• Tabelas;
• Muitos, muitos outros…

Ufa! São tantas as categorias e tão bons os exemplos que, provavelmente, esta é a melhor seleção de plugins para jQuery que existe atualmente!

Pessoal, é sério: guardem esta lista com vocês (seja favoritando, adicionando no del.icio.us, navegador, ou o que quer que seja), porque, certamente, aqueles que desenvolvem com jQuery um dia precisarão de algo que está nesta lista!

Abraços e aproveitemos!

<update>
Saiu uma lista com mais 37 plugins para jQuery!
</update>

Artigos Relacionados

• jQuery: apresentação
• Melhorando a interação em formulários de busca
• Melhores editores WYSIWYG para seu projeto
• 8 dicas para fazer códigos melhores com jQuery
• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• ie7-js: um javascript para fazer o Internet Explorer renderizar melhor

jQuery é o melhor framework javascript da atualidade (oficialmente é considerado uma biblioteca javascript), isso todos que já mexem com desenvolvimento web já sabem. Já quem está iniciando no mundo do desenvolvimento para web ainda não sabe… E justamente para explicar um pouco mais sobre o jQuery é que este artigo foi escrito, visando auxiliar aos que estão iniciando a jornada javascript a encontrar um caminho seguro para começar.

Introdução

Geralmente desenvolvedores web gostam de colecionar bibliotecas e scripts prontos das linguagens de programação que utilizam no dia-a-dia. Ter à disposição inúmeros arquivos de terceiros, desde exemplos e classes, passando por modelos e tudo o mais que possa servir de alguma maneira – e/ou simplesmente satisfazer a curiosidade acerca determinado modo ou técnica para programar – é o modus operandi de quem programa para web.

Obviamente, todos queremos ter o melhor! E, em se tratando de progração, não poderia ser diferente. Dado que o melhor framework javascript atual é jQuery, então não há nada mais natural do que conhecer e saber usar esta poderosíssima ferramenta para desenvolver sites, blogs, produtos virtuais, sistemas online e o que mais você precisar que tenha javascript!

O que é um framework?

jQuery é a maneira mais fácil, simples, elegante e sofisticada de codificar javascript; é, nada mais, nada menos, que, segundo a opinião de profissionais do ramo e publicações especializadas, um dos melhores frameworks já desenvolvidos! Para ficar mais claro, framework, segundo definição encontrada na Wikipédia, é:

No desenvolvimento do software, um framework ou arcabouço é uma estrutura de suporte definida em que um outro projeto de software pode ser organizado e desenvolvido. Um framework pode incluir programas de suporte, bibliotecas de código, linguagens de script e outros softwares para ajudar a desenvolver e juntar diferentes componentes de um projeto de software.

Frameworks são projetados com a intenção de facilitar o desenvolvimento de software, habilitando designers e programadores a gastarem mais tempo determinando as exigências do software do que com detalhes tediosos de baixo nível do sistema. (sic)

Para que serve jQuery?

Segundo consta no web site oficial, “jQuery is designed to change the way that you write JavaScript”, ou seja, jQuery é projetado para mudar sua maneira de escrever javascript (tradução livre). Por experiência própria, posso afirmar que o objetivo da equipe de desenvolvimento foi atingido com sucesso!

jQuery é disponibilizado das diferentes maneiras:

• Desenvolvimento. Apresenta todos seus códigos completos, identados e de fácil entendimento (isso é relativo). Ideal para quem queira estudar e compreender como as coisas funcionam, essa “versão sem cortes” é ideal para estudo/aprendizado a fundo da biblioteca.
• Produção. Esta é a versão para quem se preocupa somente em utilizar o jQuery e usufruir de todo o seu poder através de um arquivo compactado, diminuto e ideal para aqueles que querem usar o framework rapidamente, evitando transferências desnecessárias e tempos de carregamento excessivos.
• Google API/CDN. Através da API AJAX de bibliotecas do Google é possível, dentre outros frameworks e bibliotecas, incorporar o jQuery a suas páginas web. Leia mais sobre como usar jQuery a partir da API AJAX do Google.

Quando se usa jQuery, realmente a maneira de se escrever javascript muda! É o fim das enormes linhas que servem somente para identificar um elemento; o fim dos laços de repetição que somente identificam quantos elementos de determinada categoria estão presentes no documento; o fim de inúmeros “Ctrl + C, Ctrl + V”; enfim, é o término do trabalho pesado e perda de tempo na codificação javascript e o início da codificação simples, elegante e eficazmente robusta e de fácil entendimento.

Com pouquíssimas linhas de código, é possível mexer à vontade com o DOM (identificação, edição, inserção, deleção, etc), manipular eventos javascript, alterar regras CSS, aplicar efeitos visuais (fade in / fade out, drag and drop, slides, movimentos, etc) e muito mais coisas interessantes, úteis e cross browser. E quando digo “pouquíssimas linhas de código”, refiro-me, por exemplo, a 3 ou 4 linhas para requisições AJAX!

Quer mais? jQuery é projetado para aceitar extensões de terceiros, quer dizer, qualquer um com certa habilidade em programação pode criar funcionalidades extra para a biblioteca, extendendo suas potencialidades nativas e/ou aproveitando seu poder de funcionamento.

Artigos Relacionados

• A melhor lista de plugins para jQuery do mundo!
• Melhorando a interação em formulários de busca
• Melhores editores WYSIWYG para seu projeto
• Breadcrumbs: guia completo com exemplos e melhores práticas
• 8 dicas para fazer códigos melhores com jQuery
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• ie7-js: um javascript para fazer o Internet Explorer renderizar melhor
• “Acessibilidade Web: Sete Mitos e Um Equívoco”