Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Transferir como ODP, PDF0 gostou2,267 visualizações
O documento discute o uso do jQuery e jQuery UI para criar interfaces ricas para a web. Ele descreve como essas bibliotecas permitem adicionar funcionalidades avançadas como animações, efeitos, Ajax e componentes como calendários, abas, menus sanfonas e janelas modais de forma fácil.
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
- 1. Introdução Evandro Klimpel Balmant @EvandroBalmant Interfaces Ricas para WEB Com jQuery e jQueryUI
- 2. São aplicações Web que tem características e funcionalidades de softwares tradicionais tipo Desktop. JavaScript
- 3. Adobe Flash, Adobe Flex, Adobe AIR
- 6. JavaFX
- 7. Java Applets Tecnologias: RIA (Rich Internet Application)
- 8. “ Define uma forma de tornar o conteúdo Web e suas aplicações mais acessíveis a pessoas com deficiência. E especialmente contribui com conteúdo dinâmico e interfaces avançadas de usuário com controles desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.” http://www.w3.org/WAI/intro/aria WAI-ARIA (Accessible Rich Internet Application)
- 9. Prioridade em fazer a aplicação/site funcionar em navegadores mais atuais.
- 10. Determinadas funcionalidades não irão funcionar em algumas plataformas (Navegador sem suporte à Javascript ou sem o Flash Player instalado).
- 11. Obriga o cliente a fazer o upgrade de seus aplicativos.
- 12. Tratamento de erros são executados a posteriori, ou simplesmente ignorados. Graceful Degradation (Degradação Graciosa)
- 13. É uma estratégia de web design que enfatiza a acessibilidade, marcação semântica e estilo externo para tecnologias de script.
- 14. Usa tecnologias da web em camadas que permite a todos o acesso a conteúdos e funcionalidades básicas de uma página web usando qualquer navegador ou ligação à Internet. Progressive Enhancement (Melhoria Progressiva)
- 15. Mas quando e onde usar o jQuery / jQueryUI ?
- 16. Leve (≃ 34KB)
- 18. Manipulação do DOM (Document Object Model)
- 20. Ajax (XML, JSON, JSONP, Script, HTML)
- 21. Cross-browser
- 22. Seletores CSS3
- 23. Milhares de plugins jQuery (Escreva Pouco, Faça Mais)
- 24. //Selecionando pelo ID do elemento $( “#id” ).css( “color” , ”#FF0000” ); //Selecionando pela classe do elemento var background = $( “.classe” ).css( “background-color” ); //Seletores CSS3 $( “#conteudo:not(p)” ).css( “font-size” , ”14px” ); //Objetos $( “li” ).each( function (index){ alert(index + “ : “ + $( this ).text()); }); jQuery – Seletores
- 25. //Clique $( “#botao” ).click( function (){ alert( “Click!” ); }); //Mouse Hover/Out $( “#botao” ).hover( function (){ alert( “Hover!” ); }, function (){ alert( “Hover Out!” ); }); jQuery - Eventos
- 26. //Sobrescrever conteúdo $( “#conteudo” ).html( “<p>Um novo texto.</p>” ); //Adicionar conteúdo $( “#conteudo” ).append( “<p>Uma continuação.</p>” ); //Limpar conteúdo $( “#conteudo” ).empty(); //Remover elemento $( “#conteudo” ).remove(); jQuery – Manipulando o DOM
- 27. //Método extendido $.ajax({ type: “GET” , url: “destino/requisicao” , success: function (retorno){ $( “#conteudo” ).html(retorno); } }); //Método Reduzido $( “#conteudo” ).load( “destino/requisicao” ); jQuery - Ajax
- 29. Temas
- 30. Flexível
- 31. Web Standards (HTML Semântico)
- 32. Acessível
- 33. Customizável
- 34. Cross-browser (Sem necessidade de Plugin/VM)
- 35. jQuery UI CSS Framework jQuery UI (Interface com o Usuário)
- 36. jQuery UI - Componentes
- 37. //HTML <input type = ”text” id = ”calendario” /> //Javascript $( function (){ $( “#calendario” ).datepicker(); }); jQuery UI – Datepicker (Calendário)
- 38. //HTML <div id = "tabs" > <ul> <li><a href = "#tabs-1" >Aba 1</a></li> <li><a href = "#tabs-2" >Aba 2</a></li> </ul> <div id = "tabs-1" ><p>Conteúdo Aba 1</p></div> <div id = "tabs-2" ><p>Conteúdo Aba 2</p></div> </div> //Javascript $( function (){ $( “#tabs” ).tabs(); }); jQuery UI – Tabs (Abas)
- 39. //HTML <div id = "accordion" > <h3><a href = "#" >Section 1</a></h3> <div> <p>Lorem ipsum dolor</p> </div> <h3><a href = "#" >Section 2</a></h3> <div> <p>Vestibulum sit amet purus.</p> </div> </div> //Javascript $( function (){ $( “#accordion” ).accordion(); }); jQuery UI – Accordion (Menu Sanfona)
- 40. //HTML <div id = "dialog" title ="Janela Modal" > <p>Conteúdo...</p> </div> //Javascript $( function (){ $( “#dialog” ).dialog({ modal: true }); }); jQuery UI – Dialog (Janela Modal)
- 41. Os produtos e serviços aqui mencionados, bem como seus respectivos logotipos, são marcas comerciais ou marcas registradas. Dúvidas ? Evandro Klimpel Balmant @EvandroBalmant http://www.blogalizado.com.br