Pare de Sofrer!  Conheça o jQuery! Victor Cavalcante Arquiteto de Software na Microsoft / Lambda3 @vcavalcante
Quem sou eu? <ul><li>Desenvolvedor Web </li></ul><ul><li>Arquiteto de Software </li></ul><ul><li>Professor Universitário d...
O que é uma aplicação Web? <ul><li>Sistemas de informática desenvolvidos para rodar através de um Browser; </li></ul><ul><...
Tecnologias/Linguagens <ul><li>Tecnologias para desenvolvimento de interfaces ricas como: </li></ul><ul><li>Linguagens que...
O que significa WebStandards?  <ul><li>Padrões  Web; </li></ul><ul><li>É um  conjunto  de padrões produzidos pela W3C; </l...
O que é WebStandards  <ul><li>A base do desenvolvimento Web; </li></ul><ul><li>Visa a separação das camadas; </li></ul><ul...
Por que WebStandards? <ul><li>Todos os sites desenvolvidos segundo os padrões W3C podem ser acessados e visualizados por q...
Produzir para todos os browsers?
Deixe de ser um Herói!
<ul><li>Em vez de escrever muito: </li></ul><ul><li>function trail() { // trailing function </li></ul><ul><li>for (i = 0; ...
O que é o jQuery <ul><li>Poderosa biblioteca JavaScript </li></ul><ul><ul><li>Simplifica tarefas comuns com JavaScript </l...
Por que o jQuery <ul><li>Leve  </li></ul><ul><ul><li>14kb (Minified and Gzipped) </li></ul></ul><ul><li>Suporte Cross Brow...
Posso apostar?
Quem usa?
Como funciona? <ul><li>Acrescente o arquivo do jQuery na página </li></ul><ul><li>Já está pronto para usar o jQuery </li><...
jQuery – Seletores - CSS <ul><li>$(“p”)   nome do elemento (tag) </li></ul><ul><li>$(“#id”)   identificador (id do CSS) </...
jQuery – Seletores - filtros <ul><li>$(“p:first”) primeiro parágrafo </li></ul><ul><li>$(“li:last”)  último item da lista ...
jQuery – Eventos <ul><li>$(document).ready(); </li></ul><ul><li>$(“#menu a”).click(); </li></ul><ul><li>$(“form”).submit()...
jQuery – Plugins (470) (770) (170) (360) (330) (90) (290) (810) (240) (350) (460) (310) (250) (50) (330) (160) (160) (1360...
 
AJAX <ul><li>Asynchronous JavaScript and XML(AJAX) </li></ul><ul><li>Técnica de desenvolvimento web para criar aplicações ...
AJAX - Derivações <ul><li>AJAX Asynchronous JavaScript and XML </li></ul><ul><li>AJAH Asynchronous JavaScript and HTML </l...
Links <ul><li>Site do jQuery </li></ul><ul><ul><li>http://www.jQuery.com  </li></ul></ul><ul><li>jQuery UI </li></ul><ul><...
Dúvidas?
Victor Cavalcante [email_address] @vcavalcante
Mini Curso de jQuery Lambda3/Globalcode
Próximos SlideShares
Carregando em…5
×

Mini Curso de jQuery Lambda3/Globalcode

1.311 visualizações

Publicada em

Mini Curso de jQuery ministrado na GlobalCode em parceria com a Lambda3.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.311
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
42
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mini Curso de jQuery Lambda3/Globalcode

  1. 1. Pare de Sofrer! Conheça o jQuery! Victor Cavalcante Arquiteto de Software na Microsoft / Lambda3 @vcavalcante
  2. 2. Quem sou eu? <ul><li>Desenvolvedor Web </li></ul><ul><li>Arquiteto de Software </li></ul><ul><li>Professor Universitário de férias </li></ul><ul><li>Palestrante por gosto </li></ul><ul><li>Membro do .Net Architects </li></ul><ul><li>Membro do conselho Jedi da Lambda3 </li></ul>
  3. 3. O que é uma aplicação Web? <ul><li>Sistemas de informática desenvolvidos para rodar através de um Browser; </li></ul><ul><li>Utiliza um servidor para fazer o processamento; </li></ul><ul><li>A comunicação é feita através do protocolo HTTP; </li></ul><ul><li>Existe algumas tecnologias/linguagens padrões para exibição do conteúdo nos browsers; </li></ul>
  4. 4. Tecnologias/Linguagens <ul><li>Tecnologias para desenvolvimento de interfaces ricas como: </li></ul><ul><li>Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas: </li></ul>
  5. 5. O que significa WebStandards? <ul><li>Padrões Web; </li></ul><ul><li>É um conjunto de padrões produzidos pela W3C; </li></ul><ul><li>Destinado a orientar como deve ser desenvolvido páginas/sistemas para internet; </li></ul>
  6. 6. O que é WebStandards <ul><li>A base do desenvolvimento Web; </li></ul><ul><li>Visa a separação das camadas; </li></ul><ul><li>Composto por 3 partes; </li></ul>
  7. 7. Por que WebStandards? <ul><li>Todos os sites desenvolvidos segundo os padrões W3C podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software; </li></ul><ul><li>Acessibilidade; </li></ul><ul><li>Portabilidade; </li></ul><ul><li>Velocidade; </li></ul>
  8. 8. Produzir para todos os browsers?
  9. 9. Deixe de ser um Herói!
  10. 10. <ul><li>Em vez de escrever muito: </li></ul><ul><li>function trail() { // trailing function </li></ul><ul><li>for (i = 0; i < images.length; i++) { // for every div/layer </li></ul><ul><li>document.getElementById(&quot;obj&quot; + i).style.top = storage[d]+'px' // the Y-coordinate </li></ul><ul><li>document.getElementById(&quot;obj&quot; + i).style.left = + storage[d+1]+'px' // the X-coordinate </li></ul><ul><li>d = d+2 </li></ul><ul><li>} </li></ul><ul><li>for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind </li></ul><ul><li>storage[i] = storage[i-2] </li></ul><ul><li>} </li></ul><ul><li>d = 0 // reset for future use </li></ul><ul><li>var timer = setTimeout(&quot;trail()&quot;,10) // call recursively </li></ul><ul><li>} </li></ul><ul><li>E fazer pouco </li></ul>
  11. 11.
  12. 12. O que é o jQuery <ul><li>Poderosa biblioteca JavaScript </li></ul><ul><ul><li>Simplifica tarefas comuns com JavaScript </li></ul></ul><ul><ul><li>Acessa qualquer parte das páginas </li></ul></ul><ul><ul><ul><li>usando CSS ou expressões XPath-like </li></ul></ul></ul><ul><ul><li>Modifica a aparência das páginas </li></ul></ul><ul><ul><li>Altera o conteúdo das páginas </li></ul></ul><ul><ul><li>Adiciona animação à página </li></ul></ul><ul><ul><li>Prove suporte a Ajax </li></ul></ul><ul><ul><li>Abstrai os erros dos browsers </li></ul></ul>
  13. 13. Por que o jQuery <ul><li>Leve </li></ul><ul><ul><li>14kb (Minified and Gzipped) </li></ul></ul><ul><li>Suporte Cross Browser </li></ul><ul><ul><li>(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) </li></ul></ul><ul><li>Sintaxe CSS like </li></ul><ul><ul><li>Fácil para web-developers e web-designers </li></ul></ul><ul><ul><li>Comunidade ativa </li></ul></ul><ul><li>Extensibilidade com muitos plugins </li></ul><ul><ul><li>Aproximadamente 5000 plugins cadastrados </li></ul></ul>
  14. 14. Posso apostar?
  15. 15. Quem usa?
  16. 16. Como funciona? <ul><li>Acrescente o arquivo do jQuery na página </li></ul><ul><li>Já está pronto para usar o jQuery </li></ul>
  17. 17. jQuery – Seletores - CSS <ul><li>$(“p”) nome do elemento (tag) </li></ul><ul><li>$(“#id”) identificador (id do CSS) </li></ul><ul><li>$(“.class”) nome da classe do CSS </li></ul><ul><li>$(“p.class”) elemento com 1 determinada classe </li></ul><ul><li>$(“p a”) link que está dentro de um elemento p </li></ul><ul><li>$(“p > a”) link que é filho direto de um elemento p </li></ul>
  18. 18. jQuery – Seletores - filtros <ul><li>$(“p:first”) primeiro parágrafo </li></ul><ul><li>$(“li:last”) último item da lista </li></ul><ul><li>$(“a:eq(3)”) quarto link </li></ul><ul><li>$(“p:even”) ou p:odd parágrafo sim, parágrafo não </li></ul><ul><li>$(“a:gt(3)”) ou a:lt(3) todo link acima do quarto </li></ul><ul><li>$(“a:contains(‘click’)”) links que contenha a palavra click </li></ul><ul><li>$(“:checked”) todos os itens “checados” </li></ul><ul><li>$(“:radio”) todos os inputs do tipo radio </li></ul>
  19. 19. jQuery – Eventos <ul><li>$(document).ready(); </li></ul><ul><li>$(“#menu a”).click(); </li></ul><ul><li>$(“form”).submit(); </li></ul><ul><li>$(“select”).bind(“change”,function(){}) </li></ul>
  20. 20. jQuery – Plugins (470) (770) (170) (360) (330) (90) (290) (810) (240) (350) (460) (310) (250) (50) (330) (160) (160) (1360) (413) (570) (250) 5000 plugins 8193
  21. 22. AJAX <ul><li>Asynchronous JavaScript and XML(AJAX) </li></ul><ul><li>Técnica de desenvolvimento web para criar aplicações web </li></ul><ul><li>Troca pequenos pedaços de dados ao invés de carregar a página inteira. </li></ul><ul><li>Permite que a página troque seu conteúdo sem atualizar a página </li></ul><ul><li>É uma tecnologia do lado do cliente, não importando o lado do servidor </li></ul>
  22. 23. AJAX - Derivações <ul><li>AJAX Asynchronous JavaScript and XML </li></ul><ul><li>AJAH Asynchronous JavaScript and HTML </li></ul><ul><li>AJAJ Asynchronous JavaScript and JSON </li></ul><ul><li>JSON – JavaScript Object Notation </li></ul>
  23. 24. Links <ul><li>Site do jQuery </li></ul><ul><ul><li>http://www.jQuery.com </li></ul></ul><ul><li>jQuery UI </li></ul><ul><ul><li>http://www.jQuery UI.com </li></ul></ul><ul><li>API do jQuery </li></ul><ul><ul><li>http://api.jquery.com/ http://api.jquery.com/browser </li></ul></ul><ul><li>jQuery 1.4 API Cheat Sheet </li></ul><ul><ul><li>http://www.futurecolors.ru/jquery/ </li></ul></ul><ul><li>FireBug </li></ul><ul><ul><li>http://getfirebug.com/ </li></ul></ul>
  24. 25. Dúvidas?
  25. 26. Victor Cavalcante [email_address] @vcavalcante

×