DGmike

No sábado passado realizei uma palestra na Impacta sobre como implementar uma loja virtual do nada com ajuda do PagSeguro da UOL. Esta palestra já está na terceira versão, eu já a apresentei no PHP-Minas e PHPConference no ano passado. Eu sempre dou um upgrade entre uma apresentação e outra ou corto coisas que não são importantes, mas o conteúdo é basicamente o mesmo.

Foram abordados os temas controle de versão, PDO, Frameworks, motivação, KISS (keep it simple, stupid!) e desenvolvimento ágil.

Eu gosto muito dessa palestra em particular porque demonstra como você pode (e deve) ter sistemas grandes implementados com poucas linhas de código, bastando usar a essência do PHP. Hoje o PHP pode ser considerado uma linguagem bem estável e com grandes recursos que em muitos casos usar um Framework completo é algumas vezes perda de tempo, valendo mais a pena usar a essência da linguagem.

Sala cheia (duas) na palestra sobre PagSeguro na Impacta

Também gosto pra caramba de implementar PagSeguro em palestras por ser simples. Em menos de vinte minutos explicativos é possível demonstrar como implementar PagSeguro com direito a retorno automático e dicas de segurança na hora de implementar. É muito satisfatório ver o quanto é rápido, simples e fácil implementar vários meios de pagamento de uma só vez. Com a segurança de “pishing”, fraude, reembolso e muitas outras vantagens que o PagSeguro disponibiliza.

A palestra esteve bem cheia, foram necessárias duas salas e uma conexão de áudio e vídeo para que todos possam ver a palestra. Dentre o pessoal consegui ver o @caferrari – dono do projeto vortice framework, e o @rodrideme – ex-funcionário da Visie e sua namorada @alazanscarol. Muito bom ver esse pessoal.

Enfim a palestra foi ótima e o código-fonte do projeto está no trac para qualquer um estudar. Para ver a palestra, basta vê-la no SlideShare. Espero que tenha mais palestras como esta pois acredite em mim, não é a mesma coisa assistir a palestra e vê-la no SlideShare, é completamente diferente.

Você, assim como eu, já deve ter se deparado com o problema de gerar uma cobrança para alguém através da internet e não queria entrar no painel de controle do PagSeguro e mandar aquele e-mail padrão que eles enviam quando fazem uma cobrança.

Ao invés disso você quer que ele acesse uma url única (bit.ly e tinyurl.com, por exemplo) para que ele possa fazer o pagamento via PagSeguro. Assim você pode fazer o e-mail formatado como você desejar. Talvez você considere essa mesma formula para mandar scraps via Orkut/FaceBook/Twitter/Skype/etc com cobranças ou pagamentos sem que você tenha a necessidade de escrever um formulário nos padrões do PagSeguro.

Existem inúmeras possibilidades para o PagSimples, use com moderação

Acontece que nem sempre você pode inserir HTML onde você gostaria que as pessoas lhe dessem dinheiro, como um link do youtube. Então faça uma cobrança no PagSimples e mande para quem você quiser.

Veja como é simples: http://pagsimples.dgmike.com.br/p/4b537c4bb8aed

O PagSimples é mais um projeto de uma madrugada (como diria o Marco Gomes) escrito com o Ice-Baby que foi desenvolvido a partir de uma conversa que tive com o Elcio dentro de um taxi.

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

Vamos falar um pouco de listas em xHTML. No mundo do html existem três tipos de listas: ordenadas, desordenadas e definição. Devemos usar cada uma com base em seus fundamentos. É assim que implantamos a semântica no html, não se preocupe se a lista aparece estrana no seu layout, o CSS é seu amigo e vai reestruturar a lista como você desejar. Também não se preocupe com os itens que aparecem antes de cada item, eles também podem ser trocados via CSS.

Os tipos diferentes de listas que podemos ter em HTML

Para realizarmos estas listas usamos as tags OL, UL, LI, DL, DT e DL.

Desmistificando…

As listas desordenadas são utilizadas quando ela não deve ser utilizada na sequência em que  foi passada, sendo assim podemos efetuar as ações de uma determinada lista em qualquer ordem que ela continuará fazendo sentido. Para esta lista, usamos a tag UL, que em inglês, é o resumo de “Unordened List“. Sendo assim, para cada item da lista usamos a tag LI, que seria o resumo de “List Item” em inglês.

Um código de exemplo, mantendo o que estou falando é:

<ul>
<li>Catar as roupas</li>
<li>Varrer o chão</li>
<li>Cozinhar o almoço</li>
</ul>

O mesmo ocorre com as listas ordenadas, a diferença é que elas devem ser executadas ou lidas nessa determinada ordem, senão o sentido da lista pode mudar completamente, ficando inintendível. Um belo exemplo de lista ordenada é quando nos deparamos com o índice de um livro: que tem uma ordem a ser seguida.

Para este tipo de lista usa-se a tag OL que é uma abreviação para “Ordened List” em inglês. E para cada item, assim como em listas desordenadas, usa-se “List Item“, ou seja, LI.

<ol>
<lt>Tire as penas da galinha</li>
<li>Coloque-a na panela fervendo</li>
<li>Adicione água até cobrir ela por inteiro</li>
<li>Cozinhe por 30 minutos</li>
</ol>

Estas duas são as listas mais comuns no nosso dia-a-dia, mas ainda temos as listas de definição. As listas de definição são separadas para escrever itens com seus respectivos detalhes. A lista de definição mais comum que encontramos hoje é o dicionário, mas podemos nos aproveitar dessa lista de diversas formas. É muito interessante quando quisermos descrever uma série de itens, como os cômodos de uma casa ou vários itens de uma loja virtual.

Para uma lista de definição, usamos a tag DL, ou seja, “Definition List” e para cada item a tag DT que em inglês, é uma abreviação para “Definition Term“. Para os detalhes desse termo, a tag DD é quem se encarrega dessa tarefa, ela significa “Definition Description“.

<dl>
<dt>Lista</dt>
<dd>relação ordenada de nomes ou de quaisquer objectos que tenham de ser inventariados</dd>
<dt>Música</dt>
<dd>arte e ciência de combinar harmoniosamente os sons</dd>
</dl>

Algumas notas: Podemos ter mais de uma descrição para um mesmo termos, assim como dois ou mais termos podem ter a mesma descrição. Você pode fazer os agrupamentos como desejar, logo pode colocar dois ou mais DDs em sequência, assim como dois ou mais DTs em sequência. Outra forma de uso, menos comum, é o log de um chat, onde o termo é o nick do usuário e sua descrição são as mensagens enviadas por ele.

<dl>
<dt>Centro</dt>
<dt>Meio</dt>
<dd>ponto que se encontra a igual distância de todos os pontos da circunferência ou da superfície da esfera;</dd>
<dd>ponto que divide ao meio as rectas que, por sua vez, dividem a figura geométrica em duas partes iguais;</dd>
<dd>o meio de qualquer espaço;</dd>
</dl>