DGmike

Nesta sexta-feira, dia 30 de outubro, o PagSeguro mudou a sua homepage e com ela muitas coisas novas aconteceram. Inclusive rolou uma palestra para 70 pessoas do twitter que acompanharam as mudanças do Twitter. A palestra foi ministrada pelo Dennis Ferreira e pela Valéria Santos. Pessoas que tive a oportunidade de conhecer de perto e eles são pessoas responsáveis e estão conscientes das mudanças e do impacto que esta mudança causa.

PagSeguro - Uma empresa UOL

Tem bastante gente falando sobre as novidades do novo site do PagSeguro por aí, então se quiser saber o que exatamente, recomendo os slides da palestra e uma busca no oráculo.

Mas, e na parte de códigos? O que muda? Você precisa atualizar seus códigos para essa nova plataforma? A resposta é simples e óbvia: NADA. Sim você não precisa atualizar seu código correndo achando que sua URL mudou. O PagSeguro deixou de ser implementado em ASP e passou a ser implementado em JAVA, o que deixou a aplicação muito mais robusta e segura, com isso a URL do retorno automático mudou. No site do PagSeguro eles indicam uma nova URL para o retorno automático ( https://pagseguro.uol.com.br/pagseguro-ws/checkout/NPI.jhtml ) mas a URL anterior continua funcionando normalmente e continuará por um longo tempo.

O pessoal do PagSeguro fez todas as alterações no seu sistema e antes de por no ar fez uma longa bateria de testes e só foi para o ar após verificar se todas as bibliotecas oficiais continuavam funcionando normalmente. Então, as URL de retorno automático continuará funcionando normalmente. Com o passar do tempo, é óbvio que a URL anterior morra, mas isso acontecerá muito tempo depois, até perceberem que ninguém mais utiliza a URL antiga.

A mudança vai ser longa e sutil, com o tempo iremos alterar todos os scripts para a nova URL, mas você não precisa sair desesperado para trocar suas URLs. O PagSeguro pensou bem nisso quando alterou a url de retorno automático. Eu mesmo fiz testes hoje de tarde para comprovar isso, já que recebi algumas dúvidas de alguns clientes e algumas pessoas reclamaram disso no twitter. Portanto, não se preocupe, você não precisa alterar nada no seu script de retorno automático do PagSeguro.

Aqui na ACSP, onde estamos desenvolvendo um mega-hiper-ultra-plus-and-is-the-maximun-software-of-the-solar-system sistema ultra-secreto nos deparamos com um problema cabuloso no Browser azul até a versão 7. A idéia é a seguinte: quando um usuário clicar em um determinado botão “adicionar uma cópia” do formulário ele deve copiar o fieldset anterior e colá-lo abaixo do mesmo. Obviamente, devemos alterar o name dos campos para conseguir tratá-los no PHP no server-side. Atente a este ponto, todas as ações aplicadas aos campos devem continuar funcionando, ou seja, se você aplicou um “click”, “change” “blur” ou seja lá o que for, deve continuar funcionando normalmente. Ah sim, vamos utilizar a biblioteca “coisinha bonitinha do papai” jQuery.

JavaScript - Mais uma dica para você

A melhor forma de resolver esse problema é pensar antes de escrever o código. Mas algumas vezes não conseguimos prever coisas que nem a Microsoft explica. Então o ideal é fazer uma função que aplique as ações ao formulário assim, podemos usar um template para fazer o clone.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
  aplica_acoes();
  $('button.duplicar').click('duplica_fieldset');
});
 
function duplica_fieldset() {
  $('fieldset:last').after ('------------ cole aqui o template -----------');
  aplica_acoes();
}
 
function aplica_acoes() {
  $('.campo').click(function (){alert("Hey! Ho!");});
}

O problema disso é ao alterarmos qualquer campo teriamos que alterar o javascript para que o template fique exatamente igual. Outro problema é que ao chamarmos a função aplica_funcoes ele adicionará duas vezes a ação click no campo.

Mas vamos por partes, primeiro o problema do click duplicado. Podemos resolver isso sem problema algum. Basta usar o unbind e bind.

11
12
13
14
15
16
17
18
19

function aplica_funcoes() {
  $('.campo')
    .unbind('click', heyho)
    .bind('click', heyho);
}
 
function heyho() {
  alert("Hey! Ho!");
}

Legal, o que isso faz é remover os eventos click e recoloca-os. Muito bem, também poderiamos usar o live, adicionado na jQuery desde a versão 1.3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(function(){
  aplica_acoes();
  $('button.duplicar').click('duplica_fieldset');
});
 
function duplica_fieldset() {
  $('fieldset:last').after ('------------ cole aqui o template -----------');
}
 
function aplica_funcoes() {
  $('.campo').live('click', heyho);
}
 
function heyho() {
  alert("Hey! Ho!");
}

Assim, todos os campos que forem criados após essa chamada do live, todas as vezes que um elemento com a classe .campo for criado ele já nascerá com a ação click.

Muy biem, compañeros! Vamos ao próximo problema. O template que não deve ficar aqui no javascript e sim clonar o dito cujo. Para isso vamos usar o método clone da jQuery, assim ele copiará o código escrito no próprio html, assim não precisamos dar manutenção no código duas vezes. Veja como é simples usar o clone.

6
7
8
9

function duplica_fieldset() {
  var fls = $('fieldset:last').clone();
  $('fieldset:last').after (fls);
}

Ok, com isso já podemos copiar um fieldset e colar logo abaixo do outro fieldset. Uma coisa muito interessante é que podemos passar o parametro true dentro do clone, assim ele já copia os eventos, fazendo essa alteração nosso script ficará mais ou menos assim (perceba como diminui a quantidade de código).

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
  aplica_acoes();
  $('button.duplicar').click('duplica_fieldset');
});
 
function duplica_fieldset() {
  var fls = $('fieldset:last').clone(true);
  $('fieldset:last').after (fls);
}
 
function aplica_funcoes() {
  $('.campo').click(function(){alert("Hey! Ho!");});
}

E o name?

Agora, vamos ao problema maior, vamos alterar o name para podermos trabalhar no server-side. Tomemos o seguinte template de html:

1
2
3
4
5

<fieldset>
   <label for="nome_123">Nome <input type="text" name="nome_123" id="nome_123" /></label>
   <label for="campo_123">Nome <input type="text" name="campo_123" id="campo_123" class="campo" /></label>
</fieldset>
<button class="duplicar">Nova Assinatura</button>

Perceba que usamos o padrão “123″ em todos os campos, seria o nosso ID temporário para podermos tratar sem problemas no server-side. Então, para alterar o campo deveriamos criar um número aleatório único e alterar via comando attr da jQuery. Algo como isto:

6
7
8
9
10
11
12
13
14
15
16

function duplica_fieldset() {
  var num = ''+(new Date().getTime())+(parseInt(Math.random()*100));
  var fls = $('fieldset:last').clone(true);
  $('[name]', fls).each(function(){
    var lastName = this.name;
    var base = lastName.split('_')[0];
    var newName = base+'_'+num;
    this.name=newName;
  });
  $('fieldset:last').after (fls);
}

Veja, para criar um número aleatório único usei o getTime do objeto Date, assim pegamos os microsegundos que aconteceram naquele momento, um momento único que não se repetirá. E então adicionamos a um número aleatório qualquer. O Math.random() gera um número aleatório entre zero e um, então é necessário multiplicá-lo com um valor multiplo de dez para termos o inteiro desejado. Então usamos o parseInt para converter esse float maluco para inteiro e obtermos apenas o desejado. Perceba que no inicio dessa linha adicionamos uma string vazia, isso para que os dois valores não sejam somados e sim concatenados.

Veja, que logo após chamamos todos os campos que tenham o campo name, isso apenas no nosso fls, clonado anteriormente. Podemos fazer isso com todos os atributos (id, for, class, etc). Aconselho a fazer um each só para não deixar sua aplicação lenta.

Tá, mas qual é o problema com o Internet Explorer?

Tudo bem? Tudo funcionando perfeitamente? Tudo tranquilo? Sim, com apenas um problema. No Internet Explorer. Até a versão sete esse problema existia, mas na versão oito o problema foi corrigido. O problema é o seguinte: EM RADIO BUTTONS E CHECKBOXES O NAME NÃO PODE SER ALTERADO DINAMICAMENTE VIA JAVSCRIPT! Aí já viu, né? Eles (os desenvolvedores do Internet Explorer) devem ter feito isso por que se alterar o name destes tipos de campos acabará com o grupo já instituido.

Então, o nosso código funciona perfeitamente em browsers. Então aquela história de escrever o template no JavaScript é a forma de resolver. Sim, é uma forma, o problema é que algumas vezes só nos deparamos com problemas quando a tela já está cheia de detalhes. Então o que temos que fazer é tentar resolver de outra forma, mais simples.

Vendo o código-fonte da jQuery, percebi que a função clone já faz um hack para IE, devido à forma como o dito cujo faz cópia com o comando cloneNode. Usando o método cloneNode do DOM, o Browser da Microsoft faz um clone dos eventos, então, se você remover o evento de um, ele remove o evento de todos ao mesmo tempo. Veja o trecho onde o clone é definido na jQuery.

301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346

	clone: function( events ) {
		// Do the clone
		var ret = this.map(function(){
			if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) {
				// IE copies events bound via attachEvent when
				// using cloneNode. Calling detachEvent on the
				// clone will also remove the events from the orignal
				// In order to get around this, we use innerHTML.
				// Unfortunately, this means some modifications to
				// attributes in IE that are actually only stored
				// as properties will not be copied (such as the
				// the name attribute on an input).
				var html = this.outerHTML;
				if ( !html ) {
					var div = this.ownerDocument.createElement("div");
					div.appendChild( this.cloneNode(true) );
					html = div.innerHTML;
				}
 
				return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0];
			} else
				return this.cloneNode(true);
		});
		// Copy the events from the original to the clone
		if ( events === true ) {
			var orig = this.find("*").andSelf(), i = 0;
 
			ret.find("*").andSelf().each(function(){
				if ( this.nodeName !== orig[i].nodeName )
					return;
 
				var events = jQuery.data( orig[i], "events" );
 
				for ( var type in events ) {
					for ( var handler in events[ type ] ) {
						jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data );
					}
				}
 
				i++;
			});
		}
 
		// Return the cloned set
		return ret;
          },

Bom, já que ele já hackeia, decidi fazer um plugin que seja igual ao clone só que interferindo nesse hack. Eis o código final.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/**
 * Extensão para jQuery clonar um elemento para corrigir o BUG do IE
 */
 
$.fn.clonar = function( events , manipulateForIE) {
// Do the clone
var ret = this.map(function(){
  if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) {
    var html = this.outerHTML;
    if ( !html ) {
      var div = this.ownerDocument.createElement("div");
      div.appendChild( this.cloneNode(true) );
      html = div.innerHTML;
    }
    // Isto foi adicionado à função de clonar
    if (manipulateForIE != undefined && $.isFunction(manipulateForIE))
      html=manipulateForIE(html)
 
    return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0];
  } else
    return this.cloneNode(true);
});
// Copy the events from the original to the clone
if ( events === true ) {
  var orig = this.find("*").andSelf(), i = 0;
  ret.find("*").andSelf().each(function(){
    if ( this.nodeName !== orig[i].nodeName ) return;
    var events = jQuery.data( orig[i], "events" );
    for ( var type in events )
      for ( var handler in events[ type ] )
        jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data );
    i++;
  });
}
// Return the cloned set
return ret;
}

Daí, basta passar uma função que interfirirá no meio do clone da jQuery clonar. O código deve ficar assim:

8
9
10

var fls=$('fieldset.'+classe+':last').clonar(true, function(html){
  return html.replace(/name="?(\w+)_\d+/ig, 'name="$1_'+r+'" ');
});

E este é o nosso código final, já com o plugin e tudo o que tem direito:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

$(function(){
  aplica_acoes();
  $('button.duplicar').click('duplica_fieldset');
});
 
function duplica_fieldset() {
  var fls = $('fieldset.'+classe+':last').clonar(true, function(html){
    return html.replace(/name="?(\w+)_\d+/ig, 'name="$1_'+r+'" ');
  });
  $('fieldset:last').after (fls);
}
 
function aplica_funcoes() {
  $('.campo').click(function(){alert("Hey! Ho!");});
}
 
/**
 * Extensão para jQuery clonar um elemento para corrigir o BUG do IE
 */
 
$.fn.clonar = function( events , manipulateForIE) {
// Do the clone
var ret = this.map(function(){
  if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) {
    var html = this.outerHTML;
    if ( !html ) {
      var div = this.ownerDocument.createElement("div");
      div.appendChild( this.cloneNode(true) );
      html = div.innerHTML;
    }
    // Isto foi adicionado à função de clonar
    if (manipulateForIE != undefined && $.isFunction(manipulateForIE))
      html=manipulateForIE(html)
 
    return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0];
  } else
    return this.cloneNode(true);
});
// Copy the events from the original to the clone
if ( events === true ) {
  var orig = this.find("*").andSelf(), i = 0;
  ret.find("*").andSelf().each(function(){
    if ( this.nodeName !== orig[i].nodeName ) return;
    var events = jQuery.data( orig[i], "events" );
    for ( var type in events )
      for ( var handler in events[ type ] )
        jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data );
    i++;
  });
}
// Return the cloned set
return ret;
}

Uma vez o professor me disse: “Não tenha medo do código.” E isso eu passo para todo mundo que eu converso. Como você pode ver, o código da jQuery é bem escrito e bem documentado, pare e leia alguma coisa para você aprender cada vez mais. Ah, e caso você precise de um lugar de consulta para o dia-a-dia você pode usar o JavaScript Cheat Sheet.

JavaScript Cheat Sheet

Voltamos a um assunto que interessa muitas pessoas: ganhar dinheiro. Talvez você não tenha nada físico para vender, mas você provavelmente tem talento (não, chocolate não) e sabe escrever um bom livro ou mesmo fazer ótimas fotografias. Você pode não saber, mas dá pra ganhar dinheiro com esse seu talento. Por que você não começa a vender arquivos para download? Sim! Por que não?! Comece a explorar o seu lado criativo e faça de seus dons uma forma de fazer lucros.

Crie uma loja virtual. Você pode começar com uma loja poderosa como o Magento ou mesmo uma coisa mais simples como OsCommerce, Joomla o mesmo WordPress. Mas, se você é programador como eu e prefere escrever seu próprio código ou mesmo entender como o sistema de sua loja (ou loja de seus clientes) funcionará, farei uma série de artigos para demonstrar como é simples criar uma loja virtual cujos produtos não são nada além de links para download.

Loja virtual com PagSeguro? Agora ficou fácil!

Para você conseguir acompanhar este “curso” você deve entender um pouco dos seguintes assuntos:

• PagSeguro: Vamos usar esta ferramenta de pagamento online para que nossos clientes se sintam seguros ao comprar em sua loja, então você já pode criar sua conta para podermos fazer a nossa loja virtual
• PHP: Não precisa ser um expert, mas saber conceitos básicos de banco de dados e orientação a objetos já dão um gás
• MySQL: Vamos trabalhar com a dobradinha mais conhecida da Web. Não usaremos o MySQL ao extremo mas iremos fazer um join ou outro
• Ânimo: muitas vezes você irá errar. Podem ser erros básicos como não colocar um ponto-e-virgula/ no seu script, então não desanime e continue em frente

Ok, com os requisitos em mãos vamos por a mão na massa. A começar pela estruturação do nosso banco de dados.

O banco de dados

Vamos precisar basicamente de duas tabelas para organizar os produtos: categorias, produtos. Elas são descritas pelas seguintes queries:

CREATE TABLE `categoria` (
  `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `slug` VARCHAR(45) NOT NULL,
  `titulo` VARCHAR(100) NOT NULL,
  PRIMARY KEY (`id`)
);
 
CREATE TABLE `produto` (
  `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `categoria_id` INTEGER UNSIGNED NOT NULL,
  `slug` VARCHAR(45) NOT NULL,
  `titulo` VARCHAR(100) NOT NULL,
  `descricao` TEXT NOT NULL,
  `valor` FLOAT NOT NULL,
  `url` VARCHAR(32) NOT NULL,
  `imagem` CHAR(32) NOT NULL,
  PRIMARY KEY (`id`)
);

Usaremos os campos “slug” tanto de categoria quanto de produto para a url na loja virtual ficar mais fácil de enteder, é o que chamamos de URLs amigáveis. Repare também que temos “categoria_id” na tabela de produto, é nela que vamos basear a nossa organização, um produto deve ter uma categoria e uma categoria pode ter diversos produtos. Os campos de url e imagem da tabela de produtos conterá o endereço do arquivo físico (o arquivo que o usuário fará o download) e a imagem que aparecerá na loja virtual respectivamente. Eles receberão uma criptografia para a segurança de sua loja, usarei md5 como criptografia.

Muito bem, não vamos nos prender a criação de usuários no nosso sistema. Por quê?! Porque você realmete não precisa disso na sua loja. Se um usuário compra de sua loja ele terá os seus dados no PagSeguro, afinal, ele vai pagar por lá não é mesmo? Então para quê ter dados repetidos no seu sistema? Não vamos fazer também um sistema de login, tenho em mente que você é um programador experto e já sabe fazer isso de olhos fechados. Vamos colocar um sistema de login no nosso sistema sim, claro, mas com um usuário único e uma senha única. Isso para não perdermos o foco da loja virtual.

A outra tabela que iremos precisar é a tabela de compra, nela teremos a compra de cada usuário, assim poderemos reenviar um e-mail ao usuário com os links para onde ele pode efetuar o download dos produtos que ele comprou. Esta tabela também serve para sabermos que o produto foi enviado ao cliente, digo, a data de envio do e-mail. Essa tabela é regida pelo seguinte SQL.

CREATE TABLE `compra` (
  `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `email` VARCHAR(100),
  `produtos` TEXT NOT NULL,
  `transacao_id` VARCHAR(45),
  `status` VARCHAR(45) NOT NULL,
  `data_confirmacao` DATETIME NOT NULL,
  PRIMARY KEY (`id`)
);

Veja que produtos é um campo do tipo do tipo TEXT, nele vamos gravar os ids contidos na tabela produto, separados por virgula. Os campos transacao_id, status e data_confirmacao serão completados ao receber o retorno do PagSeguro.

Com isso já temos as tabelas básicas necessárias para a criação de nossa loja virtual. Fique ligado para a próxima parte dessa série onde vamos montar uma loja virtual voltada para downloads.

• Campo DataTransacao no retorno do PagSeguro
• Palestra PagSeguro na Impacta
• Verifique o retorno automático, sempre!
• [PagSeguro] O campo status
• O PagSeguro mudou a URL de retorno automático, e agora?

Aqui na Visie, nós trabalhamos bastante com Linux (Ubuntu) por inumeras razões. A minha preferia é usar o editor de textos Vim e poder fazer malabarismos infinitos com o terminal. Infelizmente meu laptop não consegue ficar com o Windows e o Ubutu rodando juntos. Ou seja, trabalhar com dual boot, que consiste no computador apresentar um menu com opções para inicializar em Ubuntu ou em Windows. Por isso resolvi o meu problema instalando o Windows como Sistema Operacional e dentro dele um VMware com o Ubuntu instalado. Faço isso com o Ubuntu e com o Windows. Sim! eu tenho windows rodando no WIndows. Acontece que eu tenho que testar os sites em IE7 e algumas vezes em IE6, e não adianta, a renderização do IE6 portable não é igual ao IE6 de verdade, então tenho um windows com o IE7 atualizado, normal, e um IE parado no tempo.

Como não gostar desse ótimo SO?

Se eu pudesse escolher, ficaria com o Ubuntu e somente ele, mas preciso rodar o Internet Explorer e alguns programas (Photoshop por exemplo, e não! Gimp não resolve o problema) que só rodam em Windows.

Mas tem gente que não gosta de Linux e não consegue se adaptar de forma alguma. É o caso de meu amigo Luciano, que está batalhando para trabalhar com um editor de textos no ubuntu e quer conseguir usar o EditPlus a qualqer custo. Bom, na máquina dele já tem o Ubuntu e vamos instalar o Windows. O problema é que o Windows é um bicho-papão que não sabe ler a partição do Ubuntu e como resultado, perdemos o dual boot.

O ideal é instalar o Windows e o Ubuntu na sequencia, porque aí temos o dual boot que é feito pelo programa GRUB. Mas ao instalar o Windows por cima perdemos essa configuração e ficamos apenas com Windows. Muitas pessoas falariam para formatar a máquina e instalar tudo de novo, mas o ambiente do Ubuntu já está todo montado e funcionando bem, como resolver.

Após fazer a caquinha instalar o windows por cima, inicialize o seu computador com um Live CD do ubuntu você deve reinstalar o GRUB na sua partição do Ubuntu. Existem três formas de fazer isso:

Primeira forma

Para listar todas as partições do disco rígido, digite o seguinte comando no terminal:

sudo fdisk -l

Localize a partição onde o Ubuntu está instalado, e digite o comando:

sudo mount /dev/hdY /mnt

Onde /dev/hdY é a partição onde o Ubuntu está instalado.

Com a partição já montada, recupere o GRUB com o seguinte comando:

sudo grub-install --root-directory=/mnt /dev/hdY

Novamente substituindo o /dev/hdY pela sua partição raiz.

Reinicie o seu computador.

Segunda forma

Caso ocorra algum problema com o método acima, você pode tentar recuperar o GRUB utilizando o chroot. Para isso, monte a partição do Linux digitando no terminal:

sudo chroot /mnt

Finalize então, instalando o GRUB (substituindo o Y pela letra do seu disco rígido):

grub-install /dev/hdY

Este é particularmente útil quando se está rodando um Live CD de alguma distribuição que não possua o GRUB instalado, ou está usando o modo de recuperação do Alternate Install CD do Ubuntu.

Reinicie o seu computador.

Terceira forma

Caso as tentativas anteriores falhem podemos seguir as recomendações abaixo inicializando por um Live CD do Ubuntu e executando os comandos abaixo em um terminal.

sudo grub

Será aberto então o console de comandos do Grub exibindo o prompt grub>. Prossiga executando um-a-um os demais comandos abaixo no mesmo.

find /boot/grub/stage1
root (hdX,Y)

Onde (hdX,Y) deve ser substituído pelo que aparece na saída do comando anteriormente executado, como (hd0,1) por exemplo:

setup (hd0)
quit

Reinicie o seu computador.

Epílogo

Você não precisa instalar o Windows e só após o Ubuntu, pode fazer o contrário e continuar com o GRUB functionando normalmente. Claro que é o mais aconselhável e dá menos trabalho, mas isso não quer dizer que seja obrigatório. Aqui na visie, a gente só conseguiu com a terceira forma de instalação. Mas agora o Luciano está feliz rodando seu EditPlus a todo vapor! =D

Estes métodos e mais outras dicas podem ser encontradas no próprio site do Ubuntu Brasil, onde eles falam abertamente sobre o GRUB. Vale a pena dar uma clicada para ver o que é possivel fazer com essa belíssima ferramenta.

Este post foi escrito ao som de:

Navegando pela internet me deparei com vários plugins, extensões, scripts que trabalham com ajax. Mantenho sempre meus feeds marcados como não lidao para utilizar depois, mas percebi que a lista de não lidos estava ficando um pouco grande, então resolvi escrever este memo para registrar bons scripts que podem ser usados em um futuro distante (ou não).

Várias ferramentas em javascript para você poder usar no seu site/blog/sistema

Tree View para jQuery

Emular um sistema de arvores como o que o windows explorer tem é uma tarefa um pouco complicada se formos parar para colocar imagens diferentes para cada estado (pasta aberta ou não), se quisermos aplicar uma animação a cada ação ou mesmo se quisermos que ela seja dinâmica, atualizando os eventos de cada elemento atomaticamente. Como jQuery é minha biblioteca favorita, este plugin resolve este problema e os mais comuns relacionados a arvores.

Você pode ver vários exemplos de formas de customização no próprio site do desenvolvedor.

Se você pretende fazer uma aplicação com opções, este plugin resolve um de seus problemas.

Time Picker (Experimental)

Um gosto muito de projetos experimentais porque eles podem nos dar uma breve visão de como vão ser os projetos em um futuro próximo. Este projeto é um selecionador de horas – um plugin para jQuery, que trabalha de uma forma diferente, você vai selecionando por partes as horas, minutos e duração (am ou pm). O legal é que é intuitivo e não é necessário ficar clicando em botões desnecessários, só no que realmente é necessário. Bom, fica a dica, mas lembre-se: é um projeto experimental, só use se seus usuários forem cabeça aberta…

Para utilizar este plugin, mais que uma linha de código não é necessário, e você ainda tem uma série de opções para customizar seu novo “relógio”. Confira na página do projeto.

Não gaste seu mouse clicando várias vezes para definir a hora. É o que propõe este script experimental

jCrop

Tá aí a solução para nossos problemas! Que tal criar um sisteminha de upload onde o usuário escolhe qual área da foto ele quer usar no site? Complicado, né? Criar uma div para fazer a area a ser cortada, criar um outro que manipule cada área de onde o elemento será cortado. Dependendo da área, o cursos do mouse deve ser alterado. Sim, é complicado fazer isso. Ainda mais porque tem que interagir com o servidor (aliás, quem vai cortar na verdade é o servidor e não o javascript) e escrever uma função que use a biblioteca GD se for em PHP. Se ainda achou fácil, que tal definir um tamanho mímino para a imagem ou proporção ou mesmo criar uma prévia de como vai ficar depois de pronto?

Para resolver todos esses pontos, existe um plugin para jQuery chamado jCrop que faz o crop com maestria, ele já vem com um script em PHP de exemplo que você pode usar sem problemas para implementar. Eu já usei e aprovo este plugin, o cliente ficou muito satisfeito e queria até implementar em outras áreas.

Cortar imagens no Browser do usuário se tornou uma tarefa fácil

Tem muita coisa legal chegando nos meus feeds, mas muita coisa sem nexo também, então para quem quiser acompanhar o que eu leio sobre ajax, pode assinar meu feed de Categoria Ajax, assim eu filtro, pessoalmente, o que é bom para seus ouvidos.