Desenvolvimento Do jQuery Light Box Plugin ao vivo

2,942 views
2,880 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,942
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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>

×