Globalcode – Open4education

Pare de Sofrer! Conheça o jQuery!

Victor Cavalcante

Arquiteto de Software na Microsoft / Lambda3@vcavalcante

Globalcode – Open4education

Quem sou eu?

Desenvolvedor WebArquiteto de SoftwareProfessor Universitário de fériasPalestrante por gostoMembro do .Net ArchitectsMembro do conselho Jedi da Lambda3

Globalcode – Open4education3

O que é uma aplicação Web?

Sistemas de informática desenvolvidos para rodar através de um Browser;Utiliza um servidor para fazer o processamento;A comunicação é feita através do protocolo HTTP;Existe algumas tecnologias/linguagens padrões para exibição do conteúdo nos browsers;

Globalcode – Open4education4

Tecnologias/Linguagens

Tecnologias para desenvolvimento de interfaces ricas como:

Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas:

Globalcode – Open4education

O que significa WebStandards?

Padrões Web;

É um conjunto de padrões produzidos pela W3C;

Destinado a orientar como deve ser desenvolvido páginas/sistemas para internet;

5

Globalcode – Open4education

O que é WebStandards

A base do desenvolvimento Web;Visa a separação das camadas;Composto por 3 partes;

6

Globalcode – Open4education

Por que WebStandards?

Todos os sites desenvolvidos segundo os padrões W3C podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software;Acessibilidade;Portabilidade;Velocidade;

7

Globalcode – Open4education

Produzir para todos os browsers?

Globalcode – Open4education

Deixe de ser um Herói!

Globalcode – Open4education

Em vez de escrever muito:

function trail() { // trailing functionfor (i = 0; i < images.length; i++) { // for every div/layer

document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinatedocument.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinated = d+2

}for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind

storage[i] = storage[i-2]}d = 0 // reset for future usevar timer = setTimeout("trail()",10) // call recursively

}

E fazer pouco

Globalcode – Open4education11

Globalcode – Open4education

O que é o jQuery

Poderosa biblioteca JavaScriptSimplifica tarefas comuns com JavaScriptAcessa qualquer parte das páginas

usando CSS ou expressões XPath-like

Modifica a aparência das páginasAltera o conteúdo das páginasAdiciona animação à páginaProve suporte a AjaxAbstrai os erros dos browsers

12

Globalcode – Open4education

Por que o jQuery

Leve 14kb (Minified and Gzipped)

Suporte Cross Browser (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)

Sintaxe CSS likeFácil para web-developers e web-designersComunidade ativa

Extensibilidade com muitos pluginsAproximadamente 5000 plugins cadastrados

13

Globalcode – Open4education

Posso apostar?

Globalcode – Open4education

Quem usa?

15

Globalcode – Open4education

Como funciona?

Acrescente o arquivo do jQuery na páginaJá está pronto para usar o jQuery

16

Globalcode – Open4education

jQuery – Seletores - CSS

$(“p”) nome do elemento (tag)$(“#id”) identificador (id do CSS)$(“.class”) nome da classe do CSS$(“p.class”) elemento com 1 determinada classe$(“p a”) link que está dentro de um elemento p$(“p > a”) link que é filho direto de um elemento p

17

Globalcode – Open4education

jQuery – Seletores - filtros

$(“p:first”) primeiro parágrafo$(“li:last”) último item da lista$(“a:eq(3)”) quarto link$(“p:even”) ou p:odd parágrafo sim, parágrafo não$(“a:gt(3)”) ou a:lt(3) todo link acima do quarto$(“a:contains(‘click’)”) links que contenha a palavra click$(“:checked”) todos os itens “checados”$(“:radio”) todos os inputs do tipo radio

18

Globalcode – Open4education

jQuery – Eventos

$(document).ready();$(“#menu a”).click();$(“form”).submit();$(“select”).bind(“change”,function(){})

19

Globalcode – Open4education

jQuery – Plugins

20

(470)

(770)

(170)(360)

(330)

(90)

(290)

(810)(240)

(350)

(460)

(310)

(250)

(50)

(330)

(160)

(160)

(1360)

(413)

(570)

(250)

5000 plugins 8193

Globalcode – Open4education

Globalcode – Open4education

AJAX

Asynchronous JavaScript and XML(AJAX)Técnica de desenvolvimento web para criar aplicações webTroca pequenos pedaços de dados ao invés de carregar a página inteira.Permite que a página troque seu conteúdo sem atualizar a páginaÉ uma tecnologia do lado do cliente, não importando o lado do servidor

22

Globalcode – Open4education

AJAX - Derivações

AJAX Asynchronous JavaScript and XMLAJAH Asynchronous JavaScript and HTMLAJAJ Asynchronous JavaScript and JSON

JSON – JavaScript Object Notation

23

Globalcode – Open4education

Links

Site do jQueryhttp://www.jQuery.com

jQuery UIhttp://www.jQuery UI.com

API do jQueryhttp://api.jquery.com/ http://api.jquery.com/browser

jQuery 1.4 API Cheat Sheethttp://www.futurecolors.ru/jquery/

FireBughttp://getfirebug.com/

24

Globalcode – Open4education

Dúvidas?

Globalcode – Open4education

Victor Cavalcantevictor@cavalcante.net

@vcavalcante

Globalcode – Open4education27