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– 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– 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– http://www.no-margin-for-errors.com/projects/pr

ettyPhoto-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– http://xilinus.com/jquery-addresspicker/demos/in

dex.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)" />