Mini Curso - jQuery - FMU

  • 1,105 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,105
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mini Curso jQueryslideshare.net/thiagoericson
  • 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. 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. Atribuir valor a um campo JavaScript “Puro” document.getElementById(“nota").value = “10”; jQuery $(“#nota”).val(“10”);slideshare.net/thiagoericson
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Agora vem a mágica!slideshare.net/thiagoericson
  • 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. 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. 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. 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