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

  • 3,204 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,204
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
53
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
    • 4. Microsoft Silverlight
    • 5. Controles ActiveX
    • 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)
    • 17. JavaScript Não-Obstrutivo
    • 18. Manipulação do DOM (Document Object Model)
    • 19. Animações e Efeitos
    • 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
  • 28.
    • Efeitos Avançados
    • 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 = &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(); });
    • jQuery UI – Tabs (Abas)
  • 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(); });
    • jQuery UI – Accordion (Menu Sanfona)
  • 40. //HTML <div id = &quot;dialog&quot; title =&quot;Janela Modal&quot; > <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