<ul>Introdução </ul><ul>Evandro Klimpel Balmant @EvandroBalmant </ul><ul>Interfaces Ricas para WEB <li>Com jQuery e jQuery...
São aplicações Web que tem características e funcionalidades de softwares tradicionais tipo Desktop. <ul><li>JavaScript
Adobe Flash, Adobe Flex, Adobe AIR
Microsoft Silverlight
Controles ActiveX
JavaFX
Java Applets </li></ul>Tecnologias: <ul><li>RIA (Rich Internet Application) </li></ul>
“ Define uma forma de tornar o conteúdo Web e suas aplicações mais acessíveis a pessoas com deficiência. E especialmente c...
<ul><li>Prioridade em fazer a aplicação/site funcionar em navegadores mais atuais.
Determinadas funcionalidades não irão funcionar em algumas plataformas (Navegador sem suporte à Javascript ou sem o Flash ...
Obriga o cliente a fazer o upgrade de seus aplicativos.
Tratamento de erros são executados a posteriori, ou simplesmente ignorados. </li></ul><ul><li>Graceful Degradation (Degrad...
<ul><li>É uma estratégia de web design que enfatiza a acessibilidade, marcação semântica e estilo externo para tecnologias...
Usa tecnologias da web em camadas que permite a todos o acesso a conteúdos e funcionalidades básicas de uma página web usa...
<ul><li>Mas quando e onde usar o jQuery / jQueryUI ? </li></ul>
<ul><li>Leve (≃ 34KB)
JavaScript Não-Obstrutivo
Manipulação do DOM (Document Object Model)
Próximos SlideShares
Carregando em…5
×

Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)

3.938 visualizações

Publicada em

Slides da apresentação usada no dia 22/09 na Semana Tecnológica da FATEC-PR - Curitiba

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
3.938
No SlideShare
0
A partir de incorporações
0
Número de incorporações
883
Ações
Compartilhamentos
0
Downloads
62
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)

  1. 1. <ul>Introdução </ul><ul>Evandro Klimpel Balmant @EvandroBalmant </ul><ul>Interfaces Ricas para WEB <li>Com jQuery e jQueryUI </li></ul>
  2. 2. São aplicações Web que tem características e funcionalidades de softwares tradicionais tipo Desktop. <ul><li>JavaScript
  3. 3. Adobe Flash, Adobe Flex, Adobe AIR
  4. 4. Microsoft Silverlight
  5. 5. Controles ActiveX
  6. 6. JavaFX
  7. 7. Java Applets </li></ul>Tecnologias: <ul><li>RIA (Rich Internet Application) </li></ul>
  8. 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 <ul><li>WAI-ARIA (Accessible Rich Internet Application) </li></ul>
  9. 9. <ul><li>Prioridade em fazer a aplicação/site funcionar em navegadores mais atuais.
  10. 10. Determinadas funcionalidades não irão funcionar em algumas plataformas (Navegador sem suporte à Javascript ou sem o Flash Player instalado).
  11. 11. Obriga o cliente a fazer o upgrade de seus aplicativos.
  12. 12. Tratamento de erros são executados a posteriori, ou simplesmente ignorados. </li></ul><ul><li>Graceful Degradation (Degradação Graciosa) </li></ul>
  13. 13. <ul><li>É uma estratégia de web design que enfatiza a acessibilidade, marcação semântica e estilo externo para tecnologias de script.
  14. 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. </li></ul><ul><li>Progressive Enhancement (Melhoria Progressiva) </li></ul>
  15. 15. <ul><li>Mas quando e onde usar o jQuery / jQueryUI ? </li></ul>
  16. 16. <ul><li>Leve (≃ 34KB)
  17. 17. JavaScript Não-Obstrutivo
  18. 18. Manipulação do DOM (Document Object Model)
  19. 19. Animações e Efeitos
  20. 20. Ajax (XML, JSON, JSONP, Script, HTML)
  21. 21. Cross-browser
  22. 22. Seletores CSS3
  23. 23. Milhares de plugins </li></ul><ul><li>jQuery (Escreva Pouco, Faça Mais) </li></ul>
  24. 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()); }); <ul><li>jQuery – Seletores </li></ul>
  25. 25. //Clique $( “#botao” ).click( function (){ alert( “Click!” ); }); //Mouse Hover/Out $( “#botao” ).hover( function (){ alert( “Hover!” ); }, function (){ alert( “Hover Out!” ); }); <ul><li>jQuery - Eventos </li></ul>
  26. 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(); <ul><li>jQuery – Manipulando o DOM </li></ul>
  27. 27. //Método extendido $.ajax({ type: “GET” , url: “destino/requisicao” , success: function (retorno){ $( “#conteudo” ).html(retorno); } }); //Método Reduzido $( “#conteudo” ).load( “destino/requisicao” ); <ul><li>jQuery - Ajax </li></ul>
  28. 28. <ul><li>Efeitos Avançados
  29. 29. Temas
  30. 30. Flexível
  31. 31. Web Standards (HTML Semântico)
  32. 32. Acessível
  33. 33. Customizável
  34. 34. Cross-browser (Sem necessidade de Plugin/VM)
  35. 35. jQuery UI CSS Framework </li></ul><ul><li>jQuery UI (Interface com o Usuário) </li></ul>
  36. 36. <ul><li>jQuery UI - Componentes </li></ul>
  37. 37. //HTML <input type = ”text” id = ”calendario” /> //Javascript $( function (){ $( “#calendario” ).datepicker(); }); <ul><li>jQuery UI – Datepicker (Calendário) </li></ul>
  38. 38. //HTML <div id = &quot;tabs&quot; > <ul> <li><a href = &quot;#tabs-1&quot; >Aba 1</a></li> <li><a href = &quot;#tabs-2&quot; >Aba 2</a></li> </ul> <div id = &quot;tabs-1&quot; ><p>Conteúdo Aba 1</p></div> <div id = &quot;tabs-2&quot; ><p>Conteúdo Aba 2</p></div> </div> //Javascript $( function (){ $( “#tabs” ).tabs(); }); <ul><li>jQuery UI – Tabs (Abas) </li></ul>
  39. 39. //HTML <div id = &quot;accordion&quot; > <h3><a href = &quot;#&quot; >Section 1</a></h3> <div> <p>Lorem ipsum dolor</p> </div> <h3><a href = &quot;#&quot; >Section 2</a></h3> <div> <p>Vestibulum sit amet purus.</p> </div> </div> //Javascript $( function (){ $( “#accordion” ).accordion(); }); <ul><li>jQuery UI – Accordion (Menu Sanfona) </li></ul>
  40. 40. //HTML <div id = &quot;dialog&quot; title =&quot;Janela Modal&quot; > <p>Conteúdo...</p> </div> //Javascript $( function (){ $( “#dialog” ).dialog({ modal: true }); }); <ul><li>jQuery UI – Dialog (Janela Modal) </li></ul>
  41. 41. Os produtos e serviços aqui mencionados, bem como seus respectivos logotipos, são marcas comerciais ou marcas registradas. <ul>Dúvidas ? </ul><ul>Evandro Klimpel Balmant @EvandroBalmant </ul><ul>http://www.blogalizado.com.br </ul>

×