Prof. Anderson M. Fernandes (Burnes)
[email protected]
www.professorburnes.com
• O jQuery é uma biblioteca Javascript, leve e crossbrowser, 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-forerrors.com/projects/prettyPhoto-jquery-lightboxclone/
• 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/jqueryaddresspicker/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.
<link rel="stylesheet" href="estilo.css" media="screen and (maxwidth:480px)" />
• 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.
CSS Media Types
• Para então distinguir um dispositivo do outro, você
utilizará as características de cada um.
<link rel="stylesheet" href="estilo.css" media="screen and (maxwidth:480px)" />
• 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