Prof. Anderson M. Fernandes (Burnes)

Apresentação em tema: "Prof. Anderson M. Fernandes (Burnes)"— Transcrição da apresentação:

1 Prof. Anderson M. Fernandes (Burnes)

2 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.

3 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.

4 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

5 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

6 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

7 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.

8

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

10

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

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

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

14

15

16

17

18 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

19 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

20 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

21 lightBox Cycle Colorbox
Cycle Colorbox

22 Datepicker Easing EasyTip jWysiwyg
Easing EasyTip jWysiwyg

23 prettyPhoto superFish (menus) Animelt jQuery Validation
superFish (menus) Animelt jQuery Validation

24 jQuery AddressPicker Autocomplete Fancybox Parallax
Autocomplete Fancybox Parallax

25 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: / Diego Eis

26 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

27 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

28 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.

29 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.

30 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)" />

31 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)" />

32 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)" />

33 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. Fonte: <link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />

34