Webpoint

Foi mais rápido do que eu imaginava. O IE7 agora é o browser mais usado no mundo:

Marketshare

The counter

O Internet Explorer 6 ainda tem uma grande representação, mas já é um bom começo saber que ele não predomina mais. Isso é uma média Global, no Brasil seria diferente, pois esta utilização está inteiramente ligada ao uso do Vista que possui o Internet Explorer 7 já instalado. Infelizmente a escolha do Browser é feita baseada no que o computador já possui de fábrica. Usuários do Internet Explorer geralmente nem tem o conhecimento de Browsers e suas peculiaridades, diferenças e que em menos de 3 minutos ele pode ter um leque de opções, apesar de muitas campanhas existentes.

Boa noite pessoal. Gostaria de compartilhar com todos o momento que estou passando, mas isto vai ter que ficar para outro momento. Estou vendo as estatísticas dos termos pesquisados para entrar no blog e estou aflito! Tem muita gente buscando solução para upload de arquivos múltiplos! Devido a mudanças no jQuery que eu nem previa (o plugin interface, um dos melhores para jQuery ter sido abandonado e passado a ser padrão o jQuery UI o script que fiz não sei como funciona com outras versões do jQuery. A biblioteca SWFupload mudou muito também e melhorou muito e estou desenvolvendo baseado nela. O jQuery UI Uploader é a solução ideal para upload, mas não sei por que motivo ela não está tão bem documentada e tem dados muitos problemas.

Então mãos à obra!

A função de inserir arquivos Javascripts ou CSS sob demanda (através de um comando) deveria ser essencial no javascript. Existe alguns plugins para jQuery que faz isto como Javascript on demand, mas ainda faltava flexibilidade e a possibilidade de adicionar arquivos CSS.

Criei um plugin que insere no head do documento a tag script apontando para um script externo ou a tag link para um arquivo css. Você pode passar uma string como arquivo ou um array de arquivos para serem carregados. Ele não insere scripts duplicados, pois sempre verifica a existência do arquivo antes de inserir.

Sintaxe

$.include(String | Array url, Function callback);

Exemplos

//Javascript único
$.include('file.js');

//Você pode passar uma array de arquivos

$.include(['file01.js','file02.js']);

//Você pode especificar o diretório base para todos arquivos inclusos

$.ImportBasePath = '/foo/test/';

//Você pode inserir arquivos de diferentes formatos em um único array

$.include(['file01.js','file02.css']);

//O plugin suporta callback também
$.include(['file01.js',function(){
//code be executed when script loads
});

//Ainda não amplamento testado, você pode usar callbacks para scripts gerados

$.include(['file01.css',function(){
//code be executed when css loads
});

Utilidade

Ideal para inserir scripts sob demanda ou executar scripts e estilos em requisições Ajax

Por que não usar $.getScript?

O $.getScript é muito útil para carregar arquivos javascript, mas ele faz uma requisição ajax em que o retorno é avaliado e executado. O proposta deste plugin é criar um novo elemento no head do documento.

Compatibilidade

• Firefox 2+
• Internet Explorer 6+

Download

http://plugins.jquery.com/project/includedemand

Código fonte

http://code.google.com/p/jquerydevbrazil/source/browse/trunk/jquery.include.js

Depois de ter mostrado o Ajax Form Plugin, como prometido irei falar neste post sobre o Plugin para jQuery Validate.

O que é o Validate?

O Validate é um plugin para o jQuery que permite que você possa centralizar todas as validações de dados no formulário, tanto no cliente como no servidor. Neste post irei falar sobre a validação no cliente somente.

Este é um dos plugins mais antigos e o mais completo na minha opinião. Você pode controlar todas as validações, mensagens e ainda ter a possibilidade de facilmente criar novos métodos de validação. Além de tudo, ele é integrado com o Ajax Form Plugin para que os dados enviados com sucesso seja enviado por Ajax.

Irei mostrar o funcionamento básico deste plugin na prática:

Exemplo do Validate

Neste exemplo, há um formulário com os campos nome, idade, e-mail e país. Esses campos não foram usados por acaso. O campo nome foi usado para mostrar como é simples a validação de campos que precisam ser preenchidos com algum valor. No campo idade irei ilustrar como criar um novo método para o Plugin, neste caso o usuário tem que ter mais de 18 anos. No campo e-mail irei mostrar como pode ser usado os métodos já definidos no plugin. O campo país mostra como validar selects, radios e checkboxes.

As mensagens de erro e como elas irão serem mostradas são totalmente personalizáveis, tanto onde e como elas irão aparecer tanto como no CSS. Por padrão, o plugin irá gerar um label logo depois do campo com a classe error. Isso pode ser modificado em suas configurações facilmente. Além do label, o input do elemento que não foi validado corretamente também irá ter uma classe error.

Vamos ao código HTML do formulário:

<form name="validate" id="validate" action="validate.html" method="post">

<label for="nome">Nome:</label>
<input type="text" name="nome" />

<label for="idade">Idade:</label>
<input type="text" name="idade" />

<label for="email">E-mail:</label>
<input type="text" name="email" />

<label for="pais">Pa&iacute;s:</label>
<select type="text" name="pais">
<option value="">Selecione</option>
<option value="brasil">Brasil</option>
<option value="canada">Inglaterra</option>
</select>

<input type="submit" value="Validar" />

</form>

Assim, o estilo da classe de erro ficaria:

label.error {
border: 1px solid red;
color: red;
font-weight: bold;
padding: 3px;
background-color: #99CCFF;
margin: 6px 0;
width: 120px;
text-align: center;
}

Note que foi passado o elemento label para estilizar somente a classe error aplicada a algum label e não o elemento input.

Depois de fazer o download do plugin, você poderá utilizar o seguinte código no head do documento abaixo do arquivo referente ao core do jQuery:

$(function(){

$("#validate").validate({

submitHandler: function(form) {
$(form).submit(function(){
alert('todos os dados foram preenchidos corretamente');
return false

});
},
rules: {
nome: 'required',
idade: {
required: true,
minAge: 18
},
email: {
required: true,
email: true
},
pais: 'required'
},
messages: {
nome: 'Você não preencheu seu nome',
idade: {
required: 'Você não preencheu sua idade',
},
email: {
required: 'Você precisa preencher um e-mail',
email: 'Endereço de e-mail não válido'
},
pais: 'Você precisa escolher um país'
}

});

});

Irei explicar passo a passo o código:

Primeiro, você passa um seletor para referenciar um formulário(neste caso o id do formulário) e executa o método validate, que aceita um objeto de parâmetros:

• submitHandler: esta opção irá especificar o comportamento do formulário quando a validação passar com sucesso. Aqui é onde o plugin pode ser integrado com o Ajax Form plugin, o parâmetro form é a referência do formulário passado no seletor do jQuery.
• rules: Este é o objeto de regras de validação. Cada item deste objeto refere-se ao name do formulário. Se o formulário apenas não pode ser vazio, você pode passar uma string 'required', caso contrário você tem que especificar dentro deste campo todas as regras de validação, que seria um novo objeto. O campo nome e país neste caso apenas não pode ser vazio, enquanto que os demais possui outras regras.
• messages: da mesma forma que o rules, mas com especificação de qual mensagem será exibida quando a validação não passar. Cada método possui mensagens pré-definidas que estão em inglês, você pode especificar qualquer mensagem aqui ou alterar o código fonte dos métodos de validação para aparecer mensagens padrões.

No caso da regra minAge eu criei um novo método de validação:

jQuery.validator.addMethod("minAge", function(value, element, params) {
return this.optional(element) || value > params;
}, "Você precisa ter mais de 18 anos.");

Esta é a sintaxe para criação de novos métodos para o Validate. Primeiro você atribui um nome para o método (para ser usado dentro do objeto rule) e passa uma função que retorna um valor Booleano para verificar se a validação confere. O primeiro parâmetro é o valor digitado ou escolhido pelo usuário(no caso do input, o valor digitado e do select, o valor escolhido). O segundo parâmetro é o elemento que está sendo validado (Elemento DOM) e o terceiro é o parâmetro passado na regra de validação. No caso da validação de idade, o primeiro parâmetro é a idade que o usuário digitou, o segundo é o input e o terceiro é o valor inserido na regra. Sendo assim ele verifica primeiro se o parâmetro é opcional, por que caso seja, ele não precisa validar e o segundo verifica se o valor digitado é maior que o valor atribuido na regra (você pode, por exemplo, colocar na regra que a idade seja maior que 21).

O ideal é colocar todas as regras de validação personalizadas em um arquivo javascript separado e inserir logo depois do plugin Validate.

Com a validação de selects, checkboxes e radio buttons é possível trabalhar da mesma forma que um input. No caso do select, o value colocado para o option "Selecione um país " é vazio, sendo assim ele não irá passar com sucesso na validação.

Espero que tenha ajudado a todos e não se esqueçam de olharem a documentação, experimentar e colocar em prática para descobrir todas as funcionalidades do Plugin.

Explorando mais a fundo as possibilidades de de usar o Firebug com o jQuery, encontrei o jQuerify.

Como havia mostrado no post Usando o Firebug com o jQuery, é possível pelo console do firebug executar comandos Javascript. Se o jQuery estiver na página que você deseja debugar, você pode usar todas as suas funcionalidades para navegar no documento através do Firebug. Mas e se o site for o Google? Se você deseja debugar em outros sites, ou até treinar o poder dos seletores do jQuery, existe o jQuerify.

Esta ferramenta nada mais é que um link que executa um javascript on the fly para inserir no documento atual uma tag script para carregar o jQuery e torná-lo disponível para ser utilizado no console do Firebug.

Executar jQuerify

Se você carregar o link acima para o seu favoritos, ou até mesmo copiar o link e colar no navegador quando estiver em qualquer página, você pode usá-lo para deixar o jQuery disponível e usar a vontade no console do Firebug.

Vale lembrar que as modificações da página são feitas localmente (com a página no cache) e não terá efeito se a página for recarregada, então para cada página aberta você tem que executar o link. O próprio código exibe uma mensagem de que foi inserido o jQuery com sucesso.

Abaixo vai um exemplo usado no site do Google:

Para utilizar este método, apenas arraste este link para o seu favoritos, e execute no console do firebug qualquer comando jQuery.

O Firebug salva o desenvolvedor Web. Isto não tenha dúvida. Além de suas várias utilidades, tanto para o HTML / CSS, tanto para o Javascript. Neste último ele deixa disponível em seu console todas as variáveis e funções para serem acessadas.

Sendo assim, se você usa o jQuery em sua página, você pode usar o console do Firebug para executar métodos do jQuery. Como assim? A figura abaixo ilustra esta ferramenta:

Como você pode ver, eu digitei no console o seletor $('.doc') que retornou um array com todos os elementos retornados pelo jQuery. Depois disto mandei retornar o primeiro elemento através da sintaxe $('h3').get(0). O firebug logo abaixo retorna o primeiro elemento da página atual. Mas ele vai mais além...

Como você pode ver abaixo, ele linka o elemento retornado a aba HTML e mostra o elemento no contexto da página inteira:

Assim, você pode ter um controle e debugar o seu código muito mais facilmente.

O que acontece se você executar o seletor abaixo no firebug?

Este seletor irá retornar como previsto o primeiro parágrafo ligando ao documento atual.

Além de tudo, você pode modificar o dom utilizando o método $('seletor').html('conteudo'). As possibilidades são várias, depende da necessidade. Então não hesite em explorar esta ferramenta.

Espero que tenha sido útil para todos. Um abraço e até o próximo post.

Este plugin tem por objetivo acessar uma query string anexada numa url similar a maneira feita pelo GET em uma linguagem de servidor

Como usá-lo?

//url: http://www.alexandremagno.net/jquery/plugins/jget/
//?test=var&test2=var2
 
var save1 = $.jget['test'];
 
alert(save1);
 
//imprime 'var'
 
var save2 = $.jget['test2'];
 
alert(save2);
 
//imprime 'var2'

Plugin no site do jQuery

http://plugins.jquery.com/project/jget

Download

http://plugins.jquery.com/files/jquery.jget_3.zip

Página de exemplo

http://www.alexandremagno.net/jquery/plugins/jget

Você pode anexar uma query string e se estiver usando o Firefox com o firebug, poderá ver no console as variáveis anexadas. Exemplo: http://www.alexandremagno.net/jquery/plugins/jget/?test=jgetplugin

Autor

Alexandre Magno

Licença

MIT - http://www.opensource.org/licenses/mit-license.php

Pessoal, tomei a iniciativa de criar um local para todos que desenvolvem plugins aqui no Brasil publicarem.

O endereço é: http://code.google.com/p/jquerydevbrazil/

A idéia é manter um local acessível para o mundo, para compartilhar os plugins e manter a sua documentação original. O autor do plugin poderá manter uma documentação em português em seu blog, mas ter uma documentação em inglês no site do projeto. Através do SVN, o Google code permite um controle de código e edição em equipe. Assim, com o seu plugin plubicado neste local, ele poderá ser melhorado por outros integrantes.

Se quiser fazer parte deste projeto, basta entrar em contato, possuir algum plugin, ter conhecimento sobre SVN, ter uma conta no Google que eu irei enviar o convite.

Com isto, você será orientado de  como será os padrões para publicação.

Não tenho intenção nenhuma de tomar crédito pelos plugins criados pelos colaboradores que se interessarem, esta é apenas uma maneira de centralizar o desenvolvimento e criar um trabalho em equipe para podermos melhorar o que já foi criado da maneira mais prática e moderna.

Desta maneira também, o desenvolvedor pode ter seu plugin em português, mas ter uma referência global para outros que desejarem acessá-los.

Neste local também os membros poderam fazer uma inspeção maior e relatar erros e idéias de novos plugins.

Espalhem a idéia e vamos criar extensões para facilitar o nosso dia-a-dia e consequentemente da nossa equipe e vice-versa.

No site do projeto tem uma idéia de como funciona, pois nele eu publiquei um plugin para centralizar elementos.

E ai pessoal,

Gostaria de informar que agora faço parte da equipe do jQuery para desenvolvimento de plugins e melhoria da Framework e em breve irei publicar os plugins no site do jQuery . Aqui no Blog permanecerá uma documentação em português e no site de plugins do jQuery a documentação original em inglês, para todos poderem usufruírem.

Obrigado a todos que me ajudaram e espero poder continuar passando algo de bom para todos que desejam aprender e se aperfeiçoarem nesta framework.

Só recapitulando. Para quem não sabe, o jQuery é uma framework/biblioteca de javascript para facilitar o desenvolvimento web, principalmente nesta nova era de Ajax e Web 2.0. Ela possui ferramentas para trabalhar com manipulação do DOM, CSS, XML, Ajax e efeitos. Uma das suas grandes vantagens em relação às outras é a possibilidade de facilmente extendê-la, podendo manter "limpa" o seu código original e usar os plugins de acordo com a demanda.

Qualquer projeto reusável pode ser pensado como uma extensão do jQuery e tudo pode ser feito em termos de plugin, facilitando a reutilização do código e a sua manutenção.

Todos os plugins são livres e contém uma documentação de como são usados e ainda servem de lição para quem quer começar a desenvolvê-los. Mas para isto precisa saber e se aprofundar no javascript, que apesar dos pesares e da briga eterna de browsers, ela pode ser uma linguagem amiga e não uma inimiga do desenvolvimento. E o jQuery é a maior prova de que esta linguagem polêmica pode dar bons frutos.

Este plugin centraliza qualquer elemento através do método CSS da margem negativa.

Como usá-lo

Sem nenhum argumento, o método do plugin cetraliza horizontalmente e verticalmente.

$("class_or_id").center();

Você pode também especificar a direção de alinhamento

$("class_or_id").center({
 
    horizontal: false // somente vertical
 
});
 
$("class_or_id").center({
 
vertical: false //somente horizontal
 
});

O plugin no site do jQuery

http://plugins.jquery.com/project/elementcenter

Suporte

Este plugin foi testado no IE 6, IE 7, Safari 3, Firefox 2.0

* Não funcionou no Firefox 3.0 e no Google Chrome. Estou tendo dor de cabeças com os dois ultimamente. Para mim uma grande decepção. Muitos Javascript estão lentos, assim como o Flash.

Irei trabalhar em uma próxima versão usando integralmente o Dimensions, que funciona muito bem.

Dependências

Este plugin requer o Dimensions plugin para funcionar corretamente

Página de teste

http://www.alexandremagno.net/jquery/plugins/center

Documentação original

http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin

Download

http://code.google.com/p/jquerydevbrazil/downloads/list

Autor

Alexandre Magno - http://www.alexandremagno.net

Licença

http://www.opensource.org/licenses/mit-license.php