Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Desenvolvimento do jQuery lightBox plugin ao vivo Leandro Vieira
jQuery <ul><ul><li>jQuery.com  </li></ul></ul><ul><ul><li>Framework JavaScript; </li></ul></ul><ul><ul><li>Criado e conduz...
jQuery lightBox plugin <ul><ul><li>Lançado em 21 de Setembro de 2007; </li></ul></ul><ul><ul><li>Simples; </li></ul></ul><...
jQuery lightBox plugin X Lightbox JS
Como utilizar o jQuery lightBox plugin <ul><li>Configuração </li></ul><ul><li>  </li></ul><ul><ul><li><script type=&quot;t...
Changelog e estatísticas de downloads
jQuery lightBox plugin em: &quot;a volta ao mundo&quot;
Como estamos <ul><ul><li>Mais de 60.000 (e contando...) downloads; </li></ul></ul><ul><ul><li>Sendo utilizado por desenvol...
Adoro essa imagem
Para onde vamos <ul><ul><li>Planejar lançamento da próxima versão; </li></ul></ul><ul><ul><ul><li>Corrigir bugs; </li></ul...
Mãos à obra!
Preparando o terreno <ul><ul><li>jquery.nomeDoPlugin.js; </li></ul></ul><ul><ul><li>Novos métodos anexar em jQuery.fn; </l...
Material de trabalho <ul><ul><li>Baixar em leandrovieira.com/download/8; </li></ul></ul><ul><ul><li>Conteúdo: </li></ul></...
Trabalhando...
Obrigado! <ul><li>Leandro Vieira Pinho </li></ul><ul><li>leandrovieira.com </li></ul><ul><li>[email_address] </li></ul>
Upcoming SlideShare
Loading in …5
×

Desenvolvimento Do jQuery Light Box Plugin ao vivo

3,089 views

Published on

Palestra no iMasters interCon 2008 em 25 de Outubro de 2008 no Centro de Convenções Frei Caneca.

Published in: Technology
  • Be the first to comment

Desenvolvimento Do jQuery Light Box Plugin ao vivo

  1. 1. Desenvolvimento do jQuery lightBox plugin ao vivo Leandro Vieira
  2. 2. jQuery <ul><ul><li>jQuery.com </li></ul></ul><ul><ul><li>Framework JavaScript; </li></ul></ul><ul><ul><li>Criado e conduzido por John Resig;  </li></ul></ul><ul><ul><li>Utilizada por: Google, Mozilla, Dell, Digg, WordPress, ... </li></ul></ul><ul><ul><li>Otimiza o desenvolvimento; </li></ul></ul><ul><ul><li>Simplifica a manipulação HTML, eventos, animação, interações Ajax; </li></ul></ul><ul><ul><li>Cross-browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+); </li></ul></ul><ul><ul><li>Arquitetura de plugins. </li></ul></ul>
  3. 3. jQuery lightBox plugin <ul><ul><li>Lançado em 21 de Setembro de 2007; </li></ul></ul><ul><ul><li>Simples; </li></ul></ul><ul><ul><li>Elegante; </li></ul></ul><ul><ul><li>Não obstrutivo; </li></ul></ul><ul><ul><li>Não exige marcação HTML proprietária; </li></ul></ul><ul><ul><li>Utiliza-se do poder e flexibilidade dos seletores da jQuery; </li></ul></ul><ul><ul><li>Inspirado no Lightbox JS criado por Lokesh Dhakar. </li></ul></ul><ul><ul><li>jQuery lightBox plugin e Lightbox JS  </li></ul></ul>
  4. 4. jQuery lightBox plugin X Lightbox JS
  5. 5. Como utilizar o jQuery lightBox plugin <ul><li>Configuração </li></ul><ul><li>  </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot; jquery.js &quot;></script> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot; jquery.lightbox.js &quot;></script> </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot; jquery.lightbox.css &quot; media=&quot;screen&quot; /> </li></ul></ul><ul><li>  </li></ul><ul><li>Ativação </li></ul><ul><li>  </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>jQuery(function($) { </li></ul><ul><li>     $('a').lightBox(); </li></ul><ul><li>}); </li></ul><ul><li>Marcação HTML necessária </li></ul><ul><li>  </li></ul><ul><li><a href=&quot; imagem.jpg &quot; title=&quot;Legenda&quot;> </li></ul><ul><li>     <img src=&quot; imagem-thumb.jpg &quot; alt=&quot;&quot; /> </li></ul><ul><li></a> </li></ul>
  6. 6. Changelog e estatísticas de downloads
  7. 7. jQuery lightBox plugin em: &quot;a volta ao mundo&quot;
  8. 8. Como estamos <ul><ul><li>Mais de 60.000 (e contando...) downloads; </li></ul></ul><ul><ul><li>Sendo utilizado por desenvolvedores em todo o mundo; </li></ul></ul><ul><ul><li>Sendo utilizado pela fundação Mozilla*; </li></ul></ul><ul><ul><ul><li>Firefox Add-ons; </li></ul></ul></ul><ul><ul><ul><li>Thunderbird Add-ons; </li></ul></ul></ul><ul><ul><ul><li>Sunbird Add-ons; </li></ul></ul></ul><ul><ul><ul><li>Seamonkey Add-ons; </li></ul></ul></ul><ul><ul><li>+39.000 exibições da página do plugin em Setembro de 2008.  </li></ul></ul><ul><li>  </li></ul><ul><li>* Vitor Almeida, 10 de Abril de 2008 às 12:56 </li></ul>
  9. 9. Adoro essa imagem
  10. 10. Para onde vamos <ul><ul><li>Planejar lançamento da próxima versão; </li></ul></ul><ul><ul><ul><li>Corrigir bugs; </li></ul></ul></ul><ul><ul><ul><li>Adicionar funcionalidades; </li></ul></ul></ul><ul><ul><li>Redesign do site; </li></ul></ul><ul><ul><li>Newsletter; </li></ul></ul><ul><ul><li>FAQ; </li></ul></ul><ul><ul><li>Botão para doação :D </li></ul></ul>
  11. 11. Mãos à obra!
  12. 12. Preparando o terreno <ul><ul><li>jquery.nomeDoPlugin.js; </li></ul></ul><ul><ul><li>Novos métodos anexar em jQuery.fn; </li></ul></ul><ul><ul><li>Novas funções anexar em JQuery; </li></ul></ul><ul><ul><li>Dentro dos métodos &quot;this&quot; refere-se ao objeto jQuery; </li></ul></ul><ul><ul><li>Após os métodos ou funções use ponta-e-vírgula (;); </li></ul></ul><ul><ul><li>Métodos devem retornar o objeto jQuery; </li></ul></ul><ul><ul><li>Sempre utilize jQuery no lugar de $; </li></ul></ul><ul><ul><li>Mais detalhes em http://docs.jquery.com/Plugins/Authoring </li></ul></ul>
  13. 13. Material de trabalho <ul><ul><li>Baixar em leandrovieira.com/download/8; </li></ul></ul><ul><ul><li>Conteúdo: </li></ul></ul><ul><ul><ul><li>jQuery 1.2.6; </li></ul></ul></ul><ul><ul><ul><li>Arquivo jquery.lightbox.js; </li></ul></ul></ul><ul><ul><ul><li>Arquivo jquery.lightbox-0.5.js; </li></ul></ul></ul><ul><ul><ul><li>jQuery lightBox plugin em 23 partes; </li></ul></ul></ul><ul><ul><ul><li>Imagens utilizada pelo jQuery lightBox plugin; </li></ul></ul></ul><ul><ul><ul><li>Arquivo CSS para estilizar o jQuery lightBox plugin; </li></ul></ul></ul><ul><ul><ul><li>5 fotos; </li></ul></ul></ul><ul><ul><ul><li>Arquivo .htm </li></ul></ul></ul>
  14. 14. Trabalhando...
  15. 15. Obrigado! <ul><li>Leandro Vieira Pinho </li></ul><ul><li>leandrovieira.com </li></ul><ul><li>[email_address] </li></ul>

×