DGmike

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

O Internet Explorer foi um browser que trouxe inúmeras novidades como por exemplo suporte à nova linguagem de Estilos em cascata, também conhecido como CSS. Mas o lançamento do Internet Explorer foi dado há mais de oito anos (apromximadamente uns 160 anos humanos).

IE6, jogue fora esse navegador que foi lançado há mais de oito anos e atualize-se! Isto é uma ordem!

Sua grande propagação se deu ao fato de já vir no CD de instalação windows mais popular de todos os tempos: Windows XP. Esse sistema operacional passou por um tempo de rejeição devido à imcompactibilidade de drivers, mas logo após isso a popularização das máquinas se tornou extremamente simples. Isso quer dizer que mais pessoas compravam novas máquinas já compactiveis com o novo e revolucionário XP.

O IE6 dava muita dor de cabeça para programadores front-end (html, css e javascript). Ainda bem que, como todo software que se preze, uma nova versão foi lançada e em alguns meses a versão antiga sairá do mercado e os designers poderão trabalhar sossegados. O problema é que, diferentemente dos softwares normais, o IE6 continua no mercado e os designers continuam batendo cabeça para fazer seu site/sistema rodar nesse programa.

Como já venho dizendo há um bom tempo, precisamos parar de programar para o IE6, já que é a necessidade que faz as pessoas procurarem melhor. Dessa forma, um usuário verá que um site fica “feio” em sua máquina mas na máquina do vizinho fica “redondo” e isso porque está atrasado. Isso fará com que ele corra atrás de um amigo para atualizar seu navegador.

Hoje, não programo mais para IE6 a menos que o cliente me peça, expeficicamente, para que o sistema rode em IE6. Ainda assim tento convencê-lo que o que ele está pedindo é um absurdo e que perderá muitas vantagens com o seu pedido. Mas! Alguém já disse há um tempo (não encontrei a referencia, mas assim que encontrar, publico aqui) que não basta parar de dar suporte, pelo contrário devemos dar suporte. Não ao IE6 mas às pessoas que não sabem como fazer a atualização do seu Browser. Saia da cadeira (depois de ler este post é claro) e vá bater na porta do seu vizinho com um CD do IE7 e atualize o computador dele.

Há um post muito interessante no Web Resources Depot que algumas campanhas internacionais para o fim do IE6 e algumas dicas de como resolver vários problemas (PNG transparente por exemplo) para o dito cujo. Além de uma lista de cartas de obtuários para tal navegador.

Há pouco tempo o pessoal do iMaster começou uma ótima campanha brazuca para darmos cabo ao browser azulzinho defasado. Junto a essa campanha, há uma corrente dentre os blogueiros estão num meme onde você deve incluir o script da campanha no seu blog e indicar mais quatro amigos. Eu vou incluir cinco diferentemente das outras pessoas.

Para este meme, convoco as seguintes lendas da internet:

1. Vinicius Amaral (@vcamaral)
2. Willian Fernandes
3. Bruno Torres
4. Nando Vieira
5. Rafael Apocalypse

Olá pessoal!!!

Bem, eu sei, tenho andado muito sumido por aqui. São muitos projetos e muitas aulas para lecionar. Engano de quem pensa que isso é ruim. Pelo contrário. Ontem um aluno meu me disse o seguinte: “em plena crise global você está com tantos projetos, isso é bom”

Anyway. Tenho trabalhado muito com o sistema de pagamento PagSeguro e minhas impressões sobre essa incrível ferramenta são muito positivas. Hoje fiquei pensando. “Pô, o PagSeguro é tão simples de trabalhar, nem prescisa de um sistema em PHP/Python/Ruby on Rails/.Net/Java/C++/Perl/etc. Na verdade é possivel resolver o problema apenas com JavaScript.”

Então com café e biscoito “na ideia” (ideia agora não tem mais acento, argh!) resolvi tentar resolver o problema criando uma biblioteca na qual designers consigam criar sua própria loja de forma simples e dinâmica tendo apenas que configurar com seus dados e informar seus produtos separados por categorias. O resultado você pode conferir na minha lojinha de demonstração.

A configuração não é um bicho de sete cabeças. Ao baixar o arquivo .zip você receberá cinco arquivo e uma pasta. Eis a estrutura:

index.html - Arquivo onde roda sua loja
configuracoes.js - Arquivo de suas configurações junto ao pagseguro. Como o e-mail, tipo de frete, imagem do botão, etc
loja.js - Seus produtos estarão listados aqui
pagseguro.js - Enfim a biblioteca que faz tudo funcionar :D
style.css - Apenas o CSS que dará um gás na sua loja
imagem/ - Pasta onde ficarão as imagens dos produtos

Agora, como diria o Jack: vamos por partes.

configuracao.js

Nesse arquivo você deve colocar as configurações de sua conta e do seu carrinho PagSeguro. A principal configuração é o seu e-mail. O mesmo e-mail que você cadastrou-se no pagseguro.

1
2
3

configuracoes = {
email       : 'INFORME SEU E-MAIL CADATRADO NO PAGSEGURO',
moeda       : 'BRL', // Atualmente o PagSeguro só suporta (BRL) Brasil - Real

Deixei para você decidir qual será a moeda usada porque não vai que um dia o PagSeguro trabalha com Dolar, né? Então a configuração já está lá e funcionando, só que se você passar outro valor, o PagSeguro mandará um erro para seu cliente, e nós não queremos isso, né?

As configurações sobre o frete são opcionais e devem atuar com o sua configuração no admin do PagSeguro. Se você quiser que seja um frete único para todos os itens você deve passar a informação aqui.

1
2
3
4
5
6
7
8
9

// Configurações sobre o frete
tipofrete   : 'EN', // Se esta opção for definida (é opcional),
// use frete nas configurações para frete unico por
// item ou um tipo de frete para cada produto
//
// Aqui você deverá informar EN para PAC ou SD para Sedex
// Não se esqueça de definir suas opções no seu Admin do PagSeguro
frete       : 2,
peso        : 2, // Sim, ele aceita float 2.4 e inteiro, a biblioteca já converte pra voce em 240 ou 200 :D

* nota: quando digo um frete único quero dizer que os correios irão cobrar um valor único para cada item então, se a pessoa te pede dois itens (do mesmo produto ou não) esse valor será multiplicado por dois.

A próxima configuração será onde deverão atuar cada área da sua loja. Passe os IDs que você achar melhor. O legal é que você pode escrever o HTML como desejar que a biblioteca colocará cada parte em seu determinado lugar.

1
2
3
4

// Abaixo, coloque as referencias aos seus elementos do HTML
id_menu     : 'menu',
id_main     : 'main',
id_carrinho : 'carrinho',

Agora, com relação às imagens de cada produto. Cada produto deverá ter um código identificador (ou id), um para cada tipo de produto, logo uma câmera fotográfica deverá ter um id diferente de câmera fotografica digital. Se você setar esse valor como true, a biblioteca irá procurar por imagens na pasta imagem da seguinte forma: [codigo_de_identificacao].[extensao]

Logo, você pode definir a extensão que suas imagens terão, pode ser gif, bmp, jpg, jpeg, png, fique à vontade. O único problema é que todas as imagens devem ter a mesma extensão.

1
2
3
4
5

// Gostaria de inserir imagens aos seus itens.
// Os arquivos devem estar dentro da pasta imagem
// no formato [id].[formatoimg]
imagem      : true,
formatoimg  : 'jpg',

Botão de compra, você pode adicionar qualquer imagem nesta parte, já deixei preparado para você as imagens padrão do PagSeguro. Aconselho a usar essas imagens porque elas estão no PagSeguro, se acontecer de o PagSeguro estar offline o usuário verá uma imagem de erro e saberá que não conseguirá efetuar a compra por qualquer que seja o motivo.

1
2
3
4
5

// Endereço do botão de compra
//imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg',
//imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluirBR.jpg',
imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnFinalizar.jpg',
//imgBotao    : 'https://pagseguro.uol.com.br/Security/Imagens/btnConcluir.jpg',

Para escolher o botão basta descomentar a linha e comentar a linha descomentada.

E, por último, configure a categoria que aparecerá ao abrir a página, ou seja, a home de sua loja. Você verá mais par frente que você separa seus produtos por categoria. O nome da categoria deve ser exatamente igual ao nome da categoria que você informou. Isso quer dizer que “MAIÚSCULAS” é diferente de “maiúsculas” ok ;D

1
2
3
4

// Abaixo, informe o primeiro grupo a ser mostrado na loja
// Não se esqueça! Este valor é case-sensitive, ou seja Maiúsculas é diferente de MAIÚSCULAS
inicio     : 'Bebê'
}

* Nota: O padrão do javascript é aceitar que você coloque virgulas no último item de um objeto (nosso objeto de configuração por exemplo), mas o internet explorer acha que isso é um BUG, quebrando assim o script então a última configuração deverá estar sem a vírgula.

loja.js

Ah sim! Os produtos. Esses não tem mistério nenhum. Você deve trabalhar com o formato JSON para criar os seus elementos. Mas vamos devagar, você aprenderá como é facil configurar sua loja.

Primeiro, definimos a nossa loja:

1
2
3

loja = {
 
}

Com isto já temos uma loja e podemos adicionar categorias.

1
2
3
4
5

loja = {
'Bebê': [],
'Eletro-portáteis': [],
'Câmeras digitais': []
}

E para cada elemento, você deve seguir o modelo, mas preste atenção do BUG do Internet explorer: não coloque vírgula no último item do objeto. Para fazer a sua loja iniciar com uma determinada categoria aberta, coloque o nome dessa categoria no arquivo configurações, mas lembre-se! “Mamãe” é diferente de “mamãe” que é diferente de “Mamae” ;D

Agora, os produtos. Para cada categoria você deve colocar seus produtos, então vamos adicionar dois produtos ao nosso objeto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

loja = {
'Bebê': [
{
'id'    : '00001',
'descr' : 'Chupeta doce',
'valor' : 3.4
},
{
'id'    : '00002',
'descr' : 'Chupeta salgada',
'valor' : 4.8
},
{
'id'    : 'A12MF5',
'descr' : 'Chupeta amarga',
'valor' : 4
}
],
'Eletro-portáteis': [],
'Câmeras digitais': []
}

E pronto! Sua loja está montada coloque quantos produtos você achar conveniente. Lembre-se, que nesta parte você também não pode colocar virgula no último elemento, já que o Internet Explorer implica com isso.

Se você definiu, nas suas configurações, a biblioteca deverá produrar por imagens no formato PNG você deverá ter as seguintes imagens na sua pasta imagem: 00001.png, 00002.png e A12MF5.png

Para cada item você pode passar um valor de frete e valor de peso, mas se você passar para um, deve passar para todos.

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

loja = {
'Bebê': [
{
'id'    : '00001',
'descr' : 'Chupeta doce',
'valor' : 3.4,
'peso' : 0.53,
'frete' : 4.3
},
{
'id'    : '00002',
'descr' : 'Chupeta salgada',
'valor' : 4.8,
'peso' : 0.7,
'frete' : 5
}
]
}

Você também deve fazer a configuração no arquivo de configurações do tipo de frete. Se você definir o valor de frete único nas suas configurações a biblioteca irá ignorar os valores de frete e passará a atuar com frete único.

Obviamente, esta biblioteca trabalha com o tipo “Carrinho Próprio” já que no “Carinho PagSeguro Brasileiro” não podemos enviar mais de um produto de vez, mas não se preocupe, isso não quer dizer que você tem que tratar retorno automático e etc. Ah, sim, não se esqueça de cobrar pelo frete seja ele por peso ou por valor de frete fixo.

Agora que você já tem sua loja funcional, use sua criatividade para criar um belo layout e comece hoje mesmo a lucrar com sua loja PagSeguro. Quem quiser, pode inclusive colocar o link de suas criadas com esta biblioteca para ver qual é a melhor. Abraços!

A biblioteca foi montada em menos de um dia de trabalho, logo, podemos ver como o sistema de pagamento nos permite que trabalhemos de forma rápida e simples. Como se não bastasse, em apenas um dia foi possivel criar uma loja completa e funcional com direito a pagamento via boleto, cartões de crétido, débito em conta e tudo o que tem direito.

Aqui na visie o pessoal está organizando uma série de palestras sobre produtividade, acessibilidade, linguagens, programação, produtividade. O custo de cada palestra é de apenas R$ 35,00 (R$ 30,00 se cadastrado com antecedencia) um preço muito amigável, levando em conta a informação que eles vão passar e a quantidades de horas que eles vão falar.

Não digo isso só porque eu sou funcionário da visie, mas antes de entrar aqui eu assisti a alguns eventos dos caras como o CodeShow, palestra (resenha do arquivo de audio) no ELPI e interCon, universidades ou mesmo videos no Youtube (ah, o bate papo com eles também é muito bom, por mais que saibamos, eles sempre tem uma coisa nova para ensinar) com palestras dos caras e digo, com experiência que vale a pena pagar o preço por cada hora com os caras.

As palestras vão até outubro e cada uma leva em torno de duas horas (das 19:30 até às 21:30) e acontecerão Colégio Adventista da Liberdade (fica uma rua atrás do metrô, como você pode conferir no mapa). E até agora, as paleastras são: Formulários, Internet Móvel, JQUERY, implementação de Layout CSS, Python, Acessibilidade e Controle de Versão.

Enfim, mesmo se eu fosse de outra cidade eu juntava uma excursão, pegava um ônibus e algumas palestras para visitar a cidade e ver a palestra dos caras mais tarde. Vale a pena, já fiz muito isso. Se você quiser saber mais detalhes sobre os eventos, o @diegoeis está tirando todas as dúvidas sobre os eventos no twitter e eu também posso colocar mais informações aqui no meu blog, basta comentar suas dúvidas.

[Nota] Para quem mora fora de São Paulo e virá de ônibus, o ônibus te deixa dentro da estação de metrô (a rodoviária e o metrô são interligados) e o evento é uma rua atrás do mesmo. O metrô em São Paulo é um meio de transporte muito seguro. Então quase não há perigo para ir às palestras.

Um tempo atrás comecei a fazer um tutorial sobre criar tabelas com o auxilio de uma classe em php que gera uma tabela semantica (o que é dificil) e de forma simples. Antes de continuarmos a classe propriamente dita, irei explicar um pouco sobre expressões regulares.

As expressões regulares auxiliam muito na hora de fazer uma busca sobre qualquer coisa em um bloco de texto, como por exemplo os links de um bloco html ou os emails contidos em uma conversa ou mesmo o ip contido em uma frase. Tudo o que é necessário é saber o padrão necessário do que você procura.

Vamos pegar um exemplo bem básico, um bloco de texto e vamos pegar alguns dados contidos nele.

IP é um acrónimo para a expressão inglesa “Internet Protocol” (ou Protocolo de Internet), que é um protocolo usado entre duas ou mais máquinas em rede para encaminhamento dos dados.

Os dados numa rede IP são enviados em blocos referidos como pacotes ou datagramas (os termos são basicamente sinónimos no IP, sendo usados para os dados em diferentes locais nas camadas IP). Em particular, no IP nenhuma definição é necessária antes do host tentar enviar pacotes para um host com o qual não comunicou previamente.

Estes são exemplos de IPs: 189.78.131.168 , 189.78.131.168 , 10.27.12.11 , 192.168.0.1 , 127.0.0.1

Retirado da Wikipedia

Percebam que existe um padrão na numeração dos IPs: Quatro sequências de até três números separados por pontos. Nas expressões regulares, podemos fazer buscas por digitos usando a expressão \d que significa digito, então para produrarmos um digito usamos \d. Também podemos definir uma quantidades de vezes que esse caracter pode aparecer, no caso, pode aparecer de uma a três vezes. Logo, nossa busca fica assim: \d{1,3}

O ponto também é uma expressão regular, que indica qualquer coisa. Sim! Qualquer coisa, ele procura por uma letra, número, espaço, pontuação, <CR> (Carriage Return, ou tecla enter), então para “desconvertermos” essa expressão regular, usamos uma barra invertida antes. Logo nossa busca por IP é: \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} ou simplesmente (\d{1,3}\.){3}\d{1,3} que indica uma busca de três sequencias de \d{1,3}\. e uma de \d{1,3}

Como vocês podem constatar na imagem, a expressão regular funcionou perfeitamente. Eu uso essa extensão do Firefox (Regular Expressions Tester) para de auxiliar no dia-a-dia, já que uso expressões regulares muitas vezes por dia.

Outra coisa interessante em expressões regulares é que podemos definir uma lista de palavras ou expressões que queremos que apareça em nossa sequência. Fazemos isso através de parênteses e “pipes” (ou barrinha em pé). Eis um exemplo prático, queremos procurar a palavra menino e menina. Basta fazermos a seguinte sentença menin(o|a)

[Nota] A busca anterior também poderia ser dada por menin[oa] uma diferença básica entre parânteses e colchetes é que em parênteses podemos fazer uma busca por outras expressões ou palavras, já que nos colchetes apenas por caracteres específicos. Logo, cas(a|inha|arão) irá procurar pelas três palavras, o que não é possivel fazer com os colchetes.

Vamos pensar em entradas de usuário, ou seja, frases ou listas simples (lembre-se que o nosso objetivo é a classe de criação de tabelas, logo as entradas são pequenas). Então, queremos procurar uma determinada expressão no inicio da entrada do usuário. Algo como dois pontos e uma palavra e depois dois pontos.

Explico: Digamos que queremos que o usuário entre com os seguintes dados, sequencialmente:

• Nome
• Sobrenome
• :centro: Idade
• :tel: Telefone
• :tel: Celular
• CPF
• Filiação (Pai)
• Filiação (Mãe)

Perceba que o usuário quer colocar um atributo na entrada que alinhe ou ajuste as celulas para uma determinada classe. Podemos resolver este problema usando a mágica do circunflexo (^). Quando colocado no inicio da expressão regular, ele indica o inicio da entrada. Então, nossa expressão regular irá iniciar com ^:

Assim como os digitos (\d) também existe o \w que indica um caractere alfa numérico, ou seja letras de A a Z (maiusculas e minusculas) e números de zero a nove. E também podemos definir que deve existir um ou mais desta expressão regular na oração. (Lembram do {n,m} onde n e m são os numeros limites de caracteres?) Com o mais, podemos definir que deve existir um ou mais elementos da expressão regular anterior. Assim, nossa expressão regular fica assim: ^:\w+: Com isto, pegamos o que queremos, se não existir, ele não pegará nada.

Bom, a nossa expressão regular está quase no fim. Como você é esperto, vou deixar a expressao regular final e deixarei que você pense como ela foi criada com base no que foi dito anteriormente:

^(:((\.|#)\w+|(r|c)\d+))+:

Com esta expressão regular, podemos esperar que o usuário entre com as seguintes condições e mais suas subcondições possiveis:

• :.classe:
• :#id:
• :c12:
• :r1:
• :.classe:#id:
• :.classe:r12:
• :#id:c21:
• :.qualquerClasse:#qualquerId:c21:r18

Tendo isto em mente, podemos tratar a entrada do usuário, permitindo saber que classe e/ou id ele vai querer colocar na determinada célula, e qual o numero de colspan e rowspan ele vai querer. Onde colspan é junção de colunas e rowspan é junção de linhas, como você pode ver aqui, aqui e aqui.

Digo e repito, estude expressões regulares, vale a pena! Como você pode ver para fazermos um monte de validações em nossa entrada usamos apenas 26 caracteres. Faremos o tratamento dos mesmos na próxima edição, mas adianto que usaremos as funções preg_match e preg_replace.