Projeto Capacitar novembro de 2011. Tema: CSS & JQuery

1. CSS + jQuery
Rodrigo Aguas
Projeto Capacitar – GPE
Novembro 2011

2. Visão Geral

3. CSS
Define a forma como o documento XHTML é exibido.
Ganhou força com o surgimento do XHTML e Tableless.
Apresenta alguns benefícios:
• Manutenção
• Desempenho
• Reutilização

4. Declaração na página
• Externa:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
• Interna:
<style type="text/css">
...
</style>

5. Sintaxe
/* Essa é a sintaxe do CSS */
seletor {
propriedade: valor;
}

6. Seletores
• Tag: • Id: • Classe:
p { ... } #topo { ... } .foto { ... }
#rodape { ... } .comentario { ... }
a { ... }
#logo { ... } .linhaImpar { ... }
table { ... }
#lateral { ... } .linhaPar { ... }
input { ... }
.container { ... }
body { ... }

7. Estilos de Fundo
• background-color
• background-image
• background-repeat
• background-position
#topo {
background-color: black;
background-image: url("../imagens/fundo_topo.png");
background-repeat: repeat-x;
background-position: center top;
}

8. Mão na massa 1
Extraia no seu computador o seguinte arquivo:
olimpogpeCurso CSS e jQueryExercícios.rar
1. Aplique uma cor ao fundo da página.
2. Escolha e aplique uma imagem no fundo da página.

9. Mão na massa 2
1. Aplique repetição na imagem de fundo da página.

10. Estilos de Texto
• color
• text-align
• text-decoration
• text-transform
• font-family
• font-style
• font-size
• font-weight
.citacao {
font-style: italic;
text-decoration: underline;
font-weight: bold;
}

11. Mão na massa 3
1. Estilize o título.
2. Estilize os textos.
3. Estilize os links.
4. Clique em um link.
O que aconteceu?

12. Links (pseudo-classes)
• a:link
• a:visited
• a:hover
• a:active
A ordem das declarações importa!

13. Mão na massa 4
1. Estilize novamente os links

14. Box Model
• Todos os elementos do HTML são "caixas";
• Podem conter ou estar contidas dentro de outras "caixas";
• Possuem: espaço do conteúdo, padding, borda e margem;

15. Plugin Firebug para Firefox
https://addons.mozilla.org/pt-br/firefox/addon/firebug/

16. Propriedades das Caixas
• width
• height
• margin (-top, -right, -bottom, -left)
• padding (-top, -right, -bottom, -left)
• border (-top, -right, -bottom, -left) (-color, -width, -style)

17. Mão na massa 5
1. Defina uma cor de fundo e outra da borda para os
elementos com os seguintes identificadores:
container
topo
conteudo
rodape
2. Caracterize os elementos conforme as seguintes classes já
declaradas neles:
com_padding
com_margin
3. Limite a largura do container e centralize o site na tela.

18. Posicionamento de Elementos
Utiliza-se a propriedade position para definir a forma como o
elemento se posicionará na página:
• static (padrão, posição no fluxo normal dos elementos)
• relative (relativa ao posicionamento original dele)
• absolute (posição fixa na página)
• fixed (posição fixa na tela)

19. Mão na massa 6
1. Posicione o botão Voltar no canto inferior direito da tela.
2. Posicione o indice no canto superior direito da página.

20. Visualização dos Elementos
Utiliza-se a propriedade display para definir a forma como o
elemento se comportará na página:
• inline
• block
• none (!= visibility)

21. Flutuação
• float: (left, right)
• clear: (left, right, both)

22. Mais um pouco sobre Seletores
• União (vírgula)
h1, h2, h3, p, a, span { ... }
• Interseção
div.comentario { ... }
p#inicial { ... }
• Aninhamento (espaço)
#topo h1 { ... }
.comentario p { ... }

23. Especificidade e/ou Prioridades
1. Atributos style dos elementos
2. Maior quantidade de identificadores no seletor
3. Maior quantidade de classes no seletor
4. Maior quantidade de nomes de tags no seletor

24. Mão na massa 7
1. Desapareça com a caixa com identificador invisivel.
2. Faça as demais caixas ficarem uma ao lado da outra.
3. Coloque a caixa com identificador abaixo para não ficar ao
lado das demais.

25. Pausa...
para o banheiro?

26. Javascript
Adiciona comportamento aos elementos e os manipula
dinâmicamente.

27. Declaração na página
• Interna:
<script type="text/javascript">
...
</script>
• Externa:
<script type="text/javascript" src="myScript.js"></script>

28. Declaração de Função
function nome(var1,var2,...,varX) {
// Algum código
}

29. Variáveis
• Globais (escopo da página)
• Locais (escopo da função)

30. Document Object Model (DOM)
• Objetos representam recursos do navegador ou elementos
do HTML;
• Objetos possuem atributos, métodos e tratadores de
eventos (event handlers);

31. Objeto window
• status (texto na barra de status)
• alert()
• confirm()
• print()
• close()
• Etc...
Dá acesso aos objetos document, history e outros.

32. Objeto history
• back()
• foward()
• go()

33. Objeto document
• readyState
• title
• getElementById()
• getElementsByTagName()
• Etc...

34. Objeto HTMLElement
• childNodes[]
• innerHTML
• parentNode
• nextSibling
• getElementsByTagName()
• removeAttribute()
• setAttribute()
• Etc...

35. Eventos
• onblur • onmouseout
• onchange • onmouseover
• onclick • onmouseup
• ondblclick • onresize
• onerror • onselect
• onfocus • onunload
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove

36. Mão na massa 8
1. Defina uma função que imprime um texto numa janela de
alerta.
2. Utilize a função para avisar o fim da carga da página;
3. Utilize a função para avisar há quanto tempo a página foi
carregada a cada vez que o mouse passa pelo bloco.

37. jQuery ( != jQuery UI )
"jQuery é uma biblioteca JavaScript rápida e concisa que
simplifica a varredura de documentos HTML, a manipulação de
eventos, animação e interações Ajax para um desenvolvimento
web rápido. jQuery é projetado para mudar a maneira que você
escreve JavaScript."
http://jquery.com/
http://docs.jquery.com/Main_Page

38. Alternativas existem
• MooTools
• ExtJS
• Prototype
• YUI
• Dojo

39. Declaração na Página
<script type="text/javascript" src="jquery.js"></script>

40. Sintaxe
$( selector ).action();
$( selector ).action1().action2().action3();

41. Seletores
• CSS
• XPATH
http://api.jquery.com/category/selectors/

42. Manipulação de CSS
• addClass
• removeClass
• css

43. Mão na massa 9
1. Defina cores alternadas nas linhas da tabela.

44. O que houve?
Tentamos manipular elementos que ainda não haviam sido
carregados na tela.

45. Tem Solução?
Claro! Utilizar o evento document.ready para executar o
processamento.
$(document).ready( function() {
// Algum código
});

46. Mão na massa 10
1. Copie os arquivos do exercício anterior.
2. Defina cores alternadas nas linhas da tabela.

47. Efeitos
• show / hide / toggle
• fadeIn / fadeOut
• slideUp / slideDown

48. Mão na massa 11
1. Fazer com que o corpo da tabela desapareça/apareça a
cada clique no cabeçalho.

49. Manipulação
• before / after
• preppend / append
• remove
• html
• text
• val

50. Mão na massa 12
1. Ao clicar no botão Adicionar inserir o conteúdo do textarea
no fim da área de texto.
2. Ao clicar em um parágrafo, removê-lo do texto.
3. Ao clicar no botão Imprimir, abrir a janela de impressão.

51. Fim!
Já chega né?

52. www.gpetec.com.br
Obrigado!
Rodrigo Aguas
@rodrigoaguas
www.rodrigoaguas.com
rodrigoaguas@gmail.com
www.myscrumhalf.com