Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,663 views

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

Statistics

Views

Total Views
3,663
Views on SlideShare
2,900
Embed Views
763

Actions

Likes
0
Downloads
50
Comments
0

3 Embeds 763

http://www.blogalizado.com.br 759
http://feeds.feedburner.com 3
http://blog.comunicad.com.br 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Introdução
      Evandro Klimpel Balmant @EvandroBalmant
      Interfaces Ricas para WEB
    • Com jQuery e jQueryUI
  • São aplicações Web que tem características e funcionalidades de softwares tradicionais tipo Desktop.
    • JavaScript
    • Adobe Flash, Adobe Flex, Adobe AIR
    • Microsoft Silverlight
    • Controles ActiveX
    • JavaFX
    • Java Applets
    Tecnologias:
    • RIA (Rich Internet Application)
  • “ 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)
    • 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 Player instalado).
    • Obriga o cliente a fazer o upgrade de seus aplicativos.
    • Tratamento de erros são executados a posteriori, ou simplesmente ignorados.
    • Graceful Degradation (Degradação Graciosa)
    • É uma estratégia de web design que enfatiza a acessibilidade, marcação semântica e estilo externo para tecnologias de script.
    • 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)
    • Mas quando e onde usar o jQuery / jQueryUI ?
    • Leve (≃ 34KB)
    • JavaScript Não-Obstrutivo
    • Manipulação do DOM (Document Object Model)
    • Animações e Efeitos
    • Ajax (XML, JSON, JSONP, Script, HTML)
    • Cross-browser
    • Seletores CSS3
    • Milhares de plugins
    • jQuery (Escreva Pouco, Faça Mais)
  • //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
  • //Clique $( “#botao” ).click( function (){ alert( “Click!” ); }); //Mouse Hover/Out $( “#botao” ).hover( function (){ alert( “Hover!” ); }, function (){ alert( “Hover Out!” ); });
    • jQuery - Eventos
  • //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
  • //Método extendido $.ajax({ type: “GET” , url: “destino/requisicao” , success: function (retorno){ $( “#conteudo” ).html(retorno); } }); //Método Reduzido $( “#conteudo” ).load( “destino/requisicao” );
    • jQuery - Ajax
    • Efeitos Avançados
    • Temas
    • Flexível
    • Web Standards (HTML Semântico)
    • Acessível
    • Customizável
    • Cross-browser (Sem necessidade de Plugin/VM)
    • jQuery UI CSS Framework
    • jQuery UI (Interface com o Usuário)
    • jQuery UI - Componentes
  • //HTML <input type = ”text” id = ”calendario” /> //Javascript $( function (){ $( “#calendario” ).datepicker(); });
    • jQuery UI – Datepicker (Calendário)
  • //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)
  • //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)
  • //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)
  • 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