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

Calma! Eu sei que o certo é não usar CSS Hacks nem comentários condicionais, mas antes de me atirarem pedras eu tenho que me defender. Algumas vezes a pressa/pressão do cliente nos obriga a enfiar um hack ou outro, então temos que inserir mesmo assim. Hoje, quando termino um projeto meus arquivos CSS tem dois ou três hacks que acabo resolvendo após a entrega do material. Mas na hora do aperto, o cliente está contando os minutos, uma boa lista de CSS hacks pode salvar sua pele. Por isso essa lista de hacks para css que encontrei no AJAXIAN, originado pelo Paul Irish.

A lista definitiva pra resolver seus problemas mais comuns com CSS

O Paul ainda fez uma página de teste e você ainda pode ver um screenshoot de cada browser com os resultados.

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

/***** Selector Hacks ******/
 
/* IE 6 e inferiores */
* html #uno { color: red }
 
/* IE 7 e superiores */
*:first-child+html #dos { color: red } 
 
/* IE 7 e browsers modernos */
html>body #tres { color: red }
 
/* Browsers modernos (exceto IE 7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 e inferiores */
html:first-child #cinco { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
/***** Hacks para Atributos ******/
 
/* ie6 e inferiores */
#once { _color:blue }
 
/* ie7 e inferiores */
#doce { *color: blue } /* ou #color:blue */
 
/* 'Browsers Modernos' incluem IE8, se concorda ou não .. :) */

O cara é tão bom nesse negócio de distinguir os browsersque criou uma lista de como reconhecer seu browser via javascript (para você escrever um código para determinado browser por exemplo). Mas, se você usa jQuery em seus projetos, ele já tem isso tá?!

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

Vi no Ajaxian que o Firefox 3.1 irá suportar a tag video do html 5. Isso é um grande avanço para nós, que criamos páginas. Como qualquer desenvolvedor Web não vejo a hora de começar a escrever códigos novos e simples que deveriam ter sido inventados muito antes.

Nume viagem maluca pra São Paulo, há um tempo com meu amigo Zamana, nos deparamos com esse CrossFox Firefox. Fã é assim mesmo!

Hoje, para rodar um video nos navegadores você precisa usar uma embed complicada que muitas vezes não conseguimos decorar e precisamos procurar no google como resolver tal problema. E ainda parece que não roda mpeg direito.

<embed
    src="nomedoarquivo.wmv"
    controller="true"
    autoplay="true"
    width="320" height="240"
>

Já com a tag video podemos inserir videos nativamente ao firefox. Navegando um pouco, encontrei que a última versão do WebKit também suporta as tags video e audio, já o Opera suporta apenas a tag video e não a audio. Vale também lembrar que nenhum deles suporta essas funcionalidades por completo. Mas com o que já é suportado, podemos inserir videos facilmente:

<video src="nomedoarquivo.ogg" />

E obviamente, para alterar suas propriedades, o bom e velho CSS vem à calhar.

<video src="nomedoarquivo.ogg" style="width:130px;height:130px" />

Para que o video seja rodado automaticamente basta colocar o atributo autoplay.

<video src="video.ogg" autoplay="autoplay" />

Ainda podemos manipular os videos por meio de javascript, assim.

<script language="JavaScript"><!--
document.getElementsByTagName('video')[0].play()
--></script>

Ou com a jQuery…

<script language="JavaScript"><!--
$('video')[0].play()
--></script>

E se não bastasse, a tag video também pode receber uma lista de videos com o auxilio da tag source.

<video>
  <source src="foo.ogg" type="video/ogg"></source>
  <source src="foo.mov"></source>
</video>

O fato é que vai ficar muito mais simples implementar videos e audios para nossos clientes (ha-ham…) nosos usuários. Pena que o Internet Explorer não roda direito. É simples fazer uma implementação que faça substituir a tag video por uma tag embed, alguém aí se disponibiliza a fazer? Mas como eu gosto de incentivar o usuário a “atualizar-se a um browser de verdade” prefiro fazer o seguinte.

<video src="video.ogg">
Seu navegador não suporta a tag video, por favor mude para o Firefox... 
</video>

Claro que com uma mensagem mais amigável, mas não pretendo escrever o script que fará a gambiarra para o Internet Explorer simplesmente porque penso (lembrando que é minha humilde opinião) que se não dizermos ao usuário Seu internet explorer é um lixo, troque agora! [link para um browser melhor] ele nunca se mecherá para trocar (afinal, pra que trocar se roda tudo que preciso nele?!), mesmo que esse mecher leve-o a chamar alguém que saiba como fazer a troca.

Você ainda pode ver o video demo do pessoal da Mozilla Labs demonstrando que funciona mesmo!

[Nota]

Vale a pena lembrar que a tag source não é suportada por completo ainda e que a tag video e audio apenas suporta o formato ogg. Mas espero que suporte um dia o formato flv para videos e o famoso mp3. Mas, assim que sair a nova versão do Firefox implementarei com certeza essa tag.

Este pos foi escrito ao som de:

• You Should Be Dancing – Bee Gees
• Born To Be Wild – SteppenWolf
• Smoke On The Water – Deep Purple
• Money For Nothing – Dire Straits
• Sheet Child O’ Mine – Guns N’ Roses

Não! Não vou contar nenhuma novidade sobre o google ter lançado um novo browser no mercado. Ou fazer uma resenha do tipo “Minhas impressões sobre o Google Chrome“. Tem muita gente fazendo isso na grande web. Quero colocar minha visão atual sobre o software que pegou quase três por cento do mercado em no seu primeiro dia de vida.

O Google Chrome é um bom navegador e me ensinou algumas verdades

Tem gente dizendo por aí que o chrome não quer dizer nada para os desenvolvedores porque eles vão ter que, na verdade desenvolver para mais um browser ao invés de acabar com o problema de verdade.

Para mim, que trabalho com padrões tenho uma visão mais radical disso. Hoje sou 98% programador back end (programação PHP, MySQL, Python e outras coisas que só maluco entende), mas quando pego um projeto para fazer o front end procuro esquecer que o IE6 existe e desenvolvo para browsers. Acho que só vamos conseguir fazer o usuário ou empresas atualizarem seus browser quando ficar impossivel navegar no IE6. Sempre pensei que a necessidade faz milagres e acredito que no mundo da web isso não seja tão diferente, veja como as ferramentas evoluiram de uns três anos para cá. Mas isso é outro assunto.

Quero me focar no fato de “O BROWSER” ser uma solução inteligente para quase todos os problemas. Como qualquer desenvolvedor eu ainda uso o Firefox devido às suas extensões – pelas quais virei escravo, mas sempre que posso abro chrome para navegar.

Ele é rápido demais, minha forma de navegar na web mudou consideravelmente depois dele. Não sei como eles fizeram, mas o bixinho voa na web. E os aplicativos google então? Nooooosa! Agora sim eu posso utilizar os recursos do docs, gmail, reader, etc da forma como deveria usar há um bom tempo. O que me assusta é o fato de não poder inserir plugins, mas ele já vem com um bom gerenciador de downloads e uma “firebug” muito mais bacana (limitada em recursos, mas mais agradável) que a original.

É nesse momento que eu penso de novo na forma como virei escravo dos Add-ons do firefox, se eu parar para contar, uso mais de 40 plugins que eu considero essenciais. Isso, além de deixar meu firefox lento me faz pensar duas vezes quando penso em abrir um site mais pesado no meio de um download. Então eu me volto para o browser pokebola e percebo que dá para viver sem eles, tendo só o essencial, o que é indispensavel em um browser e ele continuar sendo rápido pra caramba!

O símbolo do Chrome é a mistura de um brinquedo dos anos 80 com uma pokebola

Bem, eu vou continuar usando os meus dois browsers preferidos como padrão, sendo um para navegar e outro para trabalhar. Ainda não vi diferenças consideráveis na renderização do CSS de um browser com outro. Encontrei uma ou troa diferença que era ajustável com no máximo duas linhas de código devido à falha do próprio desenvolvedor então acho que migrar o leque de trÊs para quatro browsers para desenvolver não vai ser tão complicado assim.