mini curso - jquery - fmu
DESCRIPTION
Slide utilizado para apresentação do Mini Curso - jQuery, na FMU(Faculdades Metropolitanas Unidas, campus Liberdade).TRANSCRIPT
slideshare.net/thiagoericson
Mini Curso jQuery
slideshare.net/thiagoericson
O que é o jQuery?
O jQuery é um Framework JavaScript, desenvolvido com o intuito desimplificar e agilizar o desenvolvimento de scripts que interagem com HTML.
slideshare.net/thiagoericson
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
$(“#nota”).val(“10”);
JavaScript “Puro”
jQuery
document.getElementById(“nota").value = “10”;
Atribuir valor a um campo
slideshare.net/thiagoericson
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
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
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.br
slideshare.net/thiagoericson
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
<script language=“javascript” type=“text/javascript” src=“jquery.js”></script>
1 - Incluindo a biblioteca jQuery
Entre as tags <head> </head> deve se incluir o código abaixo:
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
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, trocandoo valor de “src” pelo caminho do seu arquivo Slides:
ATENÇÃO!
O arquivo do Plugin Slides, deve ser incluído após o arquivo do jQuery, caso contrário não funcionará corretamente.
<script language=“javascript” type=“text/javascript” src=“slides.js”></script>
slideshare.net/thiagoericson
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
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
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
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
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
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
Checkpoint 2Seu 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
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">
Atenção!Todos os banners devem ter a mesma dimensão!
Nota: Os valores de Width e Height, são Largura e Altura respectivamente, referenteas dimensões das imagens utilizadas.
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">
slideshare.net/thiagoericson
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
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:
<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
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
Save Point 2 – ParâmetrosO 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
ReferênciasjQuery : http://jquery.com/
Slides : http://slidesjs.com/
SugestõesjQuery 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/