Mini Curso                                jQueryslideshare.net/thiagoericson
O que é o jQuery?               O jQuery é um Framework JavaScript, desenvolvido com o intuito de               simplifica...
Em que o jQuery me ajuda?      •    Controle total sobre o DOM;      •    Desenvolver javascript facilmente;      •    Man...
Atribuir valor a um campo                                     JavaScript “Puro”                           document.getElem...
Pontos Fortes         • Cross browser, ou seja, compatível com os principais navegadores         • Inúmeros plugins que co...
Pontos Fracos                      • Relativamente pesada.                      • Me desculpem, mas foi só isso que encont...
Alguns sites que utilizam jQuery:     portal.fmu.br | terra.com.br | globoesporte.globo.com | g1.globo.com | greenpeace.or...
Vamos codar jQuery!       Utilizaremos o plugin Slides Js (http://slidesjs.com/) para criarmos um banner rotativo,       e...
1 - Incluindo a biblioteca jQuery      Entre as tags <head> </head> deve se incluir o código abaixo:              <script ...
2 - Incluindo o Plugin Slides          Logo abaixo de onde foi inserido o código de referencia ao jQuery, ainda entre as  ...
3 - Incluindo Estilo(CSS) Slides          Devemos agora inserir o CSS(Estilo) para nosso Banner. Para inserir o arquivo CS...
E agora?      Agora já temos a Biblioteca jQuery, o Plugin Slides e o CSS configurados em nossa      página, só nos resta ...
3 – Escrevendo o HTML 1/5                   Vamos definir nossa estrutura básica, entre as tags <body> </body>            ...
4 – Escrevendo o HTML 2/5                   Dentro das tags <div id=“banner”></div> insira o seguinte código:             ...
Checkpoint 1                   Seu código entre as tags <body></body> deve estar assim:    <div id="conteudo">       <div ...
5 – Escrevendo o HTML 3/5                   Dentro das tags <div id=“slides”></div> insira o seguinte código: <div class="...
Checkpoint 2                   Seu código entre as tags <body></body> deve estar assim:   <div id="conteudo">    <div id="...
6 – Escrevendo o HTML 4/5      Dentro das tags <div class=“slides_container”></div> vamos inserir as nossas imagens,      ...
7 – Escrevendo o HTML 5/5      Você pode inserir link em cada banner, assim:      <a href=“#” target=”_blank”><img src="im...
Agora vem a mágica!slideshare.net/thiagoericson
8 – Escrevendo o jQuery      Logo após os códigos HTML que inserimos, e antes da tag </body> vamos      inserir o código: ...
Save Point 1 – O que é isso? O código “$(function(){ });” significa que tudo o que estiver contido entre as “{“ “}” será e...
Save Point 2 – Parâmetros   O Slides tem cerca de 26 parâmetros, mas muitos são desnecessários para um uso   simples, e aq...
Referências                                       jQuery : http://jquery.com/                                        Slide...
Upcoming SlideShare
Loading in …5
×

Mini Curso - jQuery - FMU

1,537 views

Published on

Slide utilizado para apresentação do Mini Curso - jQuery, na FMU(Faculdades Metropolitanas Unidas, campus Liberdade).

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

No Downloads
Views
Total views
1,537
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mini Curso - jQuery - FMU

  1. 1. Mini Curso jQueryslideshare.net/thiagoericson
  2. 2. O que é o jQuery? O jQuery é um Framework JavaScript, desenvolvido com o intuito de simplificar e agilizar o desenvolvimento de scripts que interagem com HTML.slideshare.net/thiagoericson
  3. 3. Em que o jQuery me ajuda? • Controle total sobre o DOM; • Desenvolver javascript facilmente; • Manipular valores de propriedades de CSS; • Aplicar efeitos visuais; • Uso de AJAX; • E Muito, muito mais!slideshare.net/thiagoericson
  4. 4. Atribuir valor a um campo JavaScript “Puro” document.getElementById(“nota").value = “10”; jQuery $(“#nota”).val(“10”);slideshare.net/thiagoericson
  5. 5. Pontos Fortes • Cross browser, ou seja, compatível com os principais navegadores • Inúmeros plugins que complementam (ainda mais) suas funcionalidades • Comunidade ativa, contribuindo com melhorias, suporte, plugins, etc. • Possui extensão de Interface de Usuário, jQuery UI (User Interface). • É a biblioteca JavaScript mais difundida no mundo.slideshare.net/thiagoericson
  6. 6. Pontos Fracos • Relativamente pesada. • Me desculpem, mas foi só isso que encontrei. Nota: Em trabalhos simples, como Sites/Portais/CMS, dificilmente se encontrará algum ponto fraco, pois a biblioteca atende com muita eficácia esse tipo de projeto.slideshare.net/thiagoericson
  7. 7. Alguns sites que utilizam jQuery: portal.fmu.br | terra.com.br | globoesporte.globo.com | g1.globo.com | greenpeace.org itau.com.br | caixa.gov.br | bbc.co.uk | folha.uol.com.br | estadao.com.br espn.estadao.com.br | oglobo.globo.com | odia.ig.com.br | lastfm.com.br olhardigital.uol.com.br | imasters.com.br | info.abril.com.br | mestreseo.com.br santosfc.com.br | corinthians.com.br | saopaulofc.net | palmeiras.com.br | cbf.com.br carrefour.com.br | buscape.com.br | netshoes.com.br | livrariasaraiva.com.br peixeurbano.com.br | kennen.com.br | jullytour.com.br | agisnet.com.brslideshare.net/thiagoericson
  8. 8. Vamos codar jQuery! Utilizaremos o plugin Slides Js (http://slidesjs.com/) para criarmos um banner rotativo, em uma página html. Seguiremos um breve passo-a-passo, e ao final teremos um resultado bem bacana.slideshare.net/thiagoericson
  9. 9. 1 - Incluindo a biblioteca jQuery Entre as tags <head> </head> deve se incluir o código abaixo: <script language=“javascript” type=“text/javascript” src=“jquery.js”></script> Altere o valor de “src”, pelo caminho relativo do seu arquivo jquery. Ex: se o arquivo tem o nome “jquery.js” e está dentro da pasta “js”, o valor inserido em “src” é: “js/jquery.js”slideshare.net/thiagoericson
  10. 10. 2 - Incluindo o Plugin Slides Logo abaixo de onde foi inserido o código de referencia ao jQuery, ainda entre as tags <head> </head>, deve se incluir o código abaixo, trocando o valor de “src” pelo caminho do seu arquivo Slides: <script language=“javascript” type=“text/javascript” src=“slides.js”></script> ATENÇÃO! O arquivo do Plugin Slides, deve ser incluído após o arquivo do jQuery, caso contrário não funcionará corretamente.slideshare.net/thiagoericson
  11. 11. 3 - Incluindo Estilo(CSS) Slides Devemos agora inserir o CSS(Estilo) para nosso Banner. Para inserir o arquivo CSS seguimos o mesmo padrão, ou seja, entre as tags <head> </head>, deve se incluir o código abaixo, trocando o valor de “src” pelo caminho do seu arquivo CSS: <link rel="stylesheet" href="slides.css">slideshare.net/thiagoericson
  12. 12. E agora? Agora já temos a Biblioteca jQuery, o Plugin Slides e o CSS configurados em nossa página, só nos resta montar nosso banner. Vamos lá!slideshare.net/thiagoericson
  13. 13. 3 – Escrevendo o HTML 1/5 Vamos definir nossa estrutura básica, entre as tags <body> </body> Insira o seguinte código: <div id="conteudo"> <div id="banner"> </div> </div>slideshare.net/thiagoericson
  14. 14. 4 – Escrevendo o HTML 2/5 Dentro das tags <div id=“banner”></div> insira o seguinte código: <div id="slides"> </div> <img id="moldura" src="img/moldura.png" width="739" height="341">slideshare.net/thiagoericson
  15. 15. Checkpoint 1 Seu código entre as tags <body></body> deve estar assim: <div id="conteudo"> <div id="banner"> <div id="slides"> </div> <img id="moldura" src="img/moldura.png" width="739" height="341"> </div> </div>slideshare.net/thiagoericson
  16. 16. 5 – Escrevendo o HTML 3/5 Dentro das tags <div id=“slides”></div> insira o seguinte código: <div class="slides_container"> </div> <a href="#" class="prev"><img src="img/anterior.png" width="24" height="43"></a> <a href="#" class="next"><img src="img/proximo.png" width="24" height="43"></a>slideshare.net/thiagoericson
  17. 17. Checkpoint 2 Seu código entre as tags <body></body> deve estar assim: <div id="conteudo"> <div id="banner"> <div id="slides"> <div class="slides_container"> </div> <a href="#" class="prev"> <img src="img/anterior.png" width="24" height="43"> </a> <a href="#" class="next"> <img src="img/proximo.png" width="24" height="43"> </a> </div> <img id="moldura" src="img/moldura.png" width="739" height="341"> </div> </div>slideshare.net/thiagoericson
  18. 18. 6 – Escrevendo o HTML 4/5 Dentro das tags <div class=“slides_container”></div> vamos inserir as nossas imagens, insira o seguinte código: <img src="img/1.jpg" width="570" height="270"> Para inserir 4 banners, por exemplo: <img src="img/1.jpg" width="570" height="270"> <img src="img/2.jpg" width="570" height="270"> <img src="img/3.jpg" width="570" height="270"> <img src="img/4.jpg" width="570" height="270"> Nota: Os valores de Width e Height, são Largura e Altura respectivamente, referente as dimensões das imagens utilizadas. Atenção! Todos os banners devem ter a mesma dimensão!slideshare.net/thiagoericson
  19. 19. 7 – Escrevendo o HTML 5/5 Você pode inserir link em cada banner, assim: <a href=“#” target=”_blank”><img src="img/1.jpg" width="570" height="270"></a> Nota: Altere o valor de “href” para o link que deseja para o banner. Dica: Caso o link seja externo, deve-se utilizar a propriedade “target” com o valor “_blank”, caso contrário não é necessário utilizar essa propriedade.slideshare.net/thiagoericson
  20. 20. Agora vem a mágica!slideshare.net/thiagoericson
  21. 21. 8 – Escrevendo o jQuery Logo após os códigos HTML que inserimos, e antes da tag </body> vamos inserir o código: <script> $(function(){ $(#slides).slides({ preload: true, preloadImage: img/loading.gif, play: 5000, hoverPause: true }); }); </script> Nota: Todo código JavaScript deve ser inserido dentro das tags <script></script>slideshare.net/thiagoericson
  22. 22. Save Point 1 – O que é isso? O código “$(function(){ });” significa que tudo o que estiver contido entre as “{“ “}” será executando assim que a página terminar de ser carregada totalmente pelo navegador. O código “$(#slides).slides({ });” converte o elemento HTML que tem ID = “slides”, para um Slides. O que estiver entre as “{“ ”}” são os parâmetros de configuração do Slides. Com esse algoritmo, eu estou dizendo ao Navegador: “- Quando terminar de carregar a página, converta a div#slides para um Slides!”slideshare.net/thiagoericson
  23. 23. Save Point 2 – Parâmetros O Slides tem cerca de 26 parâmetros, mas muitos são desnecessários para um uso simples, e aqui utilizaremos apenas os essenciais, que são: preload, preloadImage, play, hoverPause. Vamos as descrições: preload: Carregar as imagens que compõe o banner, antes de exibir a página. preloadImage: Imagem que será exibida durante o carregamento das imagens. play: intervalo de transição entre um banner e outro, em milissegundos. hoverPause: pausa a transição de banner, quando o mouse estiver posicionado. Nota 1: Esses itens são ditos essenciais por questão de boas práticas, contudo, não são realmente necessários para o funcionamento do Slides, pois todas os parâmetros possuem valores padrões definidos pelo próprio plugin.slideshare.net/thiagoericson
  24. 24. Referências jQuery : http://jquery.com/ Slides : http://slidesjs.com/ Sugestões jQuery UI : http://jqueryui.com/ Fórum iMasters : http://imasters.com.br/ Blog do Maujor : http://maujor.com.br/ Blog Tableless : http://tableless.com.br/ | http://tableless.com.br/html5/slideshare.net/thiagoericson

×