Treinamento ministrado para turma iniciante em 2011 Aula 05

1. Aula 05
Wagner Silva

2. Agenda
 Manipulando a exibição de objetos
 Customizando animações com CSS
 Enfileirando animações
 Aplicação de Delay
 Ajax
 Revisão: PHP e XMLHttpRequest
 Conexões Síncronas e Assíncronas
Wagner Silva # Web 2.0 com Ajax Aula 05

3. Manipulando a Exibição
 seleção.fadeIn(tempo,função)
 $(“div”).fadeIn(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

4. Manipulando a Exibição
 seleção.show(tempo,função)
 $(“div”).show(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

5. Manipulando a Exibição
 seleção.slideDown(tempo,função)
 $(“div”).slideDown(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

6. Manipulando a Exibição
 seleção.fadeOut(tempo,função)
 $(“div”).fadeOut(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

7. Manipulando a Exibição
 seleção.hide(tempo,função)
 $(“div”).hide(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

8. Manipulando a Exibição
 seleção.slideUp(tempo,função)
 $(“div”).slideUp(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

9. Customizando com CSS
 seleção.animate(propriedades,tempo,frequencia,função)
 Somente propriedades numéricas são válidas
 Frequência: swing ou linear
Wagner Silva # Web 2.0 com Ajax Aula 05

10. Customizando com CSS
 $(“div”).fadeOut(2000)
 $(“div”).animate({
opacity : 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

11. Customizando com CSS
 $(“div”).hide(2000)
 $(“div”).animate({
height : 0,
width : 0,
marginTop : 0,
marginLeft : 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

12. Customizando com CSS
 $(“div”).slideUp(2000)
 $(“div”).animate({
height : 0,
marginTop: 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05

13. Customizando com CSS
 Propriedades podem possuir valores não numéricos:
 propriedade : ‘show’
 propriedade : ‘hide’
 propriedade : ‘toogle’
Wagner Silva # Web 2.0 com Ajax Aula 05

14. Customizando com CSS
 Os valores das propriedades não necessitam ser exatos:
 propriedade : ‘+= valor’
 propriedade : ‘-= valor ’
Wagner Silva # Web 2.0 com Ajax Aula 05

15. Enfileiramento
 seleção.animação1.animação2. ... .animaçãon
Wagner Silva # Web 2.0 com Ajax Aula 05

16. Delay
 Atrasa a execução de animações enfileiradas
 seleção.animação1.delay(tempo).animação2
Wagner Silva # Web 2.0 com Ajax Aula 05

17. Animação
 Exercício: Utilizar fadeIn e fadeOut para manipular a
exibição dos emails.

18. Ajax
 União de várias tecnologias
 Interação dinâmica com usuário
 Não há necessidade de recarregamento
 Compartilhamento de recursos
 Acessibilidade
Wagner Silva # Web 2.0 com Ajax Aula 05

19. Wagner Silva # Web 2.0 com Ajax Aula 05

20. Wagner Silva # Web 2.0 com Ajax Aula 05

21. PHP
 Linguagem de script server-side
 Possui bibliotecas
 Banco de dados
 E-mail
 Imagens
 Etc
 Instalação, configuração e documentação: www.php.net
Wagner Silva # Web 2.0 com Ajax Aula 05

22. XmlHttpRequest
 Criado pela Microsoft
 Acessar/recuperar dados do servidor (assíncrona)
 Pode retornar:
 XML
 Json
 Texto
 Imagem
 etc
Wagner Silva # Web 2.0 com Ajax Aula 05

23. Conexão com JQuery
 ajaxSetup() e ajax()
 Principais propriedades:
 async : booleano
 data : mapeamento
 statusCode : mapeamento
 type : string (post/get)
 success : função
 url : string
Wagner Silva # Web 2.0 com Ajax Aula 05

24. Métodos
$.get('ajax/teste.php',{},function(dados){
…
});
$.post('ajax/teste.php',{},function(dados){
...
});
Wagner Silva # Web 2.0 com Ajax Aula 05

25. Ajax
 Exercício: manipular pastas e busca via Ajax

26. Web 2.0 com Ajax # Aula 05
 Próxima Aula:
 Manipulando funções através do Ajax.
 E-mail: web2softeam@gmail.com
 Twitter: twitter.com/web2softeam