Prof. Anderson M. Fernandes (Burnes)[email protected]
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)" />