Prof. Anderson M. Fernandes (Burnes) burnes@professorburnes.com www.professorburnes.com

O jQuery é uma biblioteca Javascript, leve e cross-browser, suportada por vários tipos de navegadores, desktop ou de dispositivos móveis. Quando programamos utilizando Javascript, uma linguagem side-client, normalmente utilizamos um código grande. A proposta do jQuery é fazer mais e escrever menos, simplificando linhas de comando, fazendo com que o trabalho do programador diminua.

O jQuery possui código fonte aberto e utiliza duas licenças, a GNU e a MIT, permitindo seu uso em softwares livres e proprietários de forma gratuita. A biblioteca nasceu em 2006 no BarCamp (uma conferência em rede) em Nova Iorque. Com ele podemos criar animações, manipular eventos e objetos, e trabalhar com AJAX de maneira simples e descomplicada.

Várias empresas mantém o jQuery, dentre elas, a Microsoft, que utiliza a biblioteca no seu Visual Studio, para utilização com o .NET Nokia, Adobe, Mozilla, Palm

Além da escrita aprimorada de Javascript, o jQuery possui plugins, escrito por terceiros, que podem realizar diversas tarefas, dentre elas: Animações, podemos criar banners animados tão bons quanto os criados em Flash Interfaces, como Datepickers, Tabs dentre outros elementos. Baseado em HTML 5 e CSS 3 Acessibilidade

O que é necessário para se programar utilizando o jQuery? Conhecimento de Javascript Conhecimento em DOM (Modelo de Objeto de Documento) – alterar os objetos da página de forma dinâmica Como utilizar? Faça o download da versão mais nova do jQuery em www.jquery.com

Ele possui um arquivo .js, escrito em linguagem Javascript, que será inserido no HEAD da página HTML que fará a utilização do mesmo. Se formos utilizar plugins, provavelmente teremos mais arquivos .js, arquivos .css e até imagens. http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

O jQuery pode ler e manipular os Objetos DOM da página Deve funcionar somente quando o DOM estiver pronto

Adicionar uma função no clique de um botão. O $ nada mais é que o apelido para o objeto jQuery

Documentação jQuery: http://api.jquery.com

Com o jQuery podemos construir animações utilizando os objetos da página

Ajax – Asynchonous Javascript and XML Pode buscar e carregar informações de outro arquivo ou página sem a necessidade de dar reload É um conjunto de tecnologias Javascript e XML que pode trabalhar com DOM e HTML http://api.jquery.com/jQuery.ajax/

Ajax – Asynchonous Javascript and XML Pode buscar e carregar informações de outro arquivo ou página sem a necessidade de dar reload É um conjunto de tecnologias Javascript e XML que pode trabalhar com DOM e HTML http://api.jquery.com/jQuery.ajax/

Plugin seria uma extensão ou uma função do jQuery, desenvolvida por um terceiro Os plugins normalmente são desenvolvidos para efetuar uma determinada tarefa Um exemplo de plugin muito utilizado é o lightBox para Ampliar imagens e o cycle para Banners animados Existem milhares de plugins de jQuery Normalmente existe uma página, com a documentação e o download do plugin

lightBox Cycle Colorbox http://leandrovieira.com/projects/jquery/lightbox Cycle http://malsup.com/jquery/cycle/ Colorbox http://www.jacklmoore.com/colorbox/ http://code.alexweber.com.br/memorygame/

Datepicker Easing EasyTip jWysiwyg http://keith-wood.name/datepick.html Easing http://gsgd.co.uk/sandbox/jquery/easing/ EasyTip https://code.google.com/p/jquery-easytip/ jWysiwyg http://jwysiwyg.github.io/jwysiwyg/

prettyPhoto superFish (menus) Animelt jQuery Validation http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/ superFish (menus) http://users.tpg.com.au/j_birch/plugins/superfish/ Animelt http://grsabreu.github.io/Animelt-Plugin/ jQuery Validation http://jqueryvalidation.org/

jQuery AddressPicker Autocomplete Fancybox Parallax http://xilinus.com/jquery-addresspicker/demos/index.html Autocomplete http://jquery.bassistance.de/autocomplete/demo Fancybox http://fancybox.net/ Parallax http://stephband.info/jparallax/

CSS Media Types Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado. Fonte: www.tableless.com.br / Diego Eis

CSS Media Types O HTML foi feito para ser portável Cada dispositivo exibe o HTML de uma maneira O CSS será diferente para cada dispositivo Resolução de telas

CSS Media Types all Para todos os dispositivos braille Para dispositivos táteis embossed Para dispositivos que “imprimem” em braille handheld Para dispositivos de mão. Normalmente com telas pequenas e banda limitada print Para impressão em papel

CSS Media Types projection Para apresentações, como PowerPoint screen Para monitores ou outros dispositivos com telas coloridas e com resolução adequada speech Para sintetizadores de voz. tty Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado tv Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

CSS Media Types Cada vez mais surgem dispositivos de diversos tamanhos com hardwares bem parecidos com os desktops. Isso faz com que a navegação destes aparelhos tenha uma experiência muito próxima de desktop. Um exemplo atual é o iPhone. Sua tela tem boa qualidade e seu navegador renderiza as páginas como um navegador normal de desktop.

CSS Media Queries As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado. <link rel="stylesheet" href="estilo.css" media="screen and (color)" />

CSS Media Types O only irá esconder os estilos de browsers que não reconhecem media queries É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgulafunciona como um operador or. <link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />

CSS Media Types Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Estou especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px. <link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />

CSS Media Types Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Estamos especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px. http://www.w3.org/TR/css3-mediaqueries/ Fonte: www.tableless.com.br <link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />