Estava com um tempinho sobrando e estudando sobre html5, css3 e vi que algumas pessoas já começaram a desenhar com as técnicas de cantos arredondados do css3. Decidi fazer a minha versão do logo daqui do vírgula.
O portal vírgula ganhou uma versão do seu símbolo em HTML5 e CSS3
Claro que não funciona no Internet Explorer, mas funcionou em google Chrome, Opera e Firefox no meu linux ubuntu. Também não testei no IE9, mas quem se importa?. E aí na sua máquina, funcionou?
Você se lembra quando inserir um video em uma página web era complicado? Você prescisava usar a tag embed e colocar um arquivo .wma que muitas vezes prescisava de um plugin da microsoft para conseguir rodar. Consequentemente, o player do tio Bill carregava no Internet Explorer e deixava o usuário furioso com o consumo de memória que ele consumia.
Apesar dos pesares, era relativamente fácil inserir um video com o html4 que tinhamos na época:
1 | <embed autoplay="false" src="VIDEO.wma" width="50" height="50></embed> |
Videos online, assim foi que o youtube conseguiu a maior audiência do mercado web do mundo
Ainda bem que o tempo passa e, com ele, a tecnologia só melhora. Inventaram o flash e com ele o player personalizado. Pouco tempo depois nascia um dos mais visitados sites do mundo: Youtube. Mas, infelizmente se tornaria mais complicado inserir um video no seu site. Agora era necessário usar o embed de flash, que não decorei até hoje.
1 2 3 4 5 6 | <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/ID_VIDEO"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/ID_VIDEO" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed> </object> |
O pior veio quando, em alguns casos, o browser bloqueava o embed e precisou-se usar algum hack em javascript para conseguir “embebedar” o flash player com suas trocentas variáveis.
Com a chegada do html5 tudo ficou mais fácil. Eu já havia explicado por aqui como se faz para inserir um video em formato .ogg em sua página. Isso foi um pouco antes do html5 estourar nas paradas de sucesso. Algum tempo depois o Youtube aderiu a essa novidade.
Mas infelizmente nem tudo são flores na vida de Joseph Climber, e agora nos deparamos com uma pergunta básica: usar video com html5 ou embed de flash player. O caso é que, dependendo da máquina/browser do usuário, o html5 (que tem muito mais vantagens) simplesmente não funciona. O youtube está convertendo, pouco a pouco os videos em formato .flv para o formato .ogg aos poucos, então quando saber que está na hora de atualizar os videos do seu blog?
Para resolver o problema, o youtube decidiu tomar as redias e “inventou” uma nova forma de colocar os videos dele no seu site/blog: através de iframes. Veja como a sintaxe fica mais interessante.
1 2 3 4 | <iframe class="youtube-player" type="text/html" frameborder="0"
src="http://www.youtube.com/embed/VIDEO_ID"
width="640" height="385"
></iframe> |
Apenas trocando o ID do video. E voilà, seu video está em seu site sem você precisar se preocupar com atualizações de versão, compactibilidade, etc, etc.
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!");}); } |
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.
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
