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

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

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 www.jquery.com

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. • http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

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

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

18. Ajax – AsynchonousJavascriptand 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/

19. Ajax – AsynchonousJavascriptand 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/

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 pluginsde jQuery • Normalmente existe uma página, com a documentação e o download do plugin

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

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

23. prettyPhoto • 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/ • jQueryValidation • http://jqueryvalidation.org/

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

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: www.tableless.com.br / 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 • allPara todos os dispositivos • braillePara dispositivos táteis • embossedPara dispositivos que “imprimem” em braille • handheld Para dispositivos de mão. Normalmente com telas pequenas e banda limitada • printPara impressão em papel

28. CSS Media Types • projectionPara apresentações, como PowerPoint • screen Para monitores ou outros dispositivos com telas coloridas e com resolução adequada • speech Para sintetizadores de voz. • ttyPara dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado • tvPara 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. • http://www.w3.org/TR/css3-mediaqueries/ • Fonte: www.tableless.com.br <link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />