CSS & JQquery

251
-1

Published on

Projeto Capacitar novembro de 2011.
Tema: CSS & JQuery

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
251
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS & JQquery

  1. 1. CSS + jQuery Rodrigo Aguas Projeto Capacitar – GPE Novembro 2011
  2. 2. Visão Geral
  3. 3. CSSDefine 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. 4. Declaração na página• Externa:<link rel="stylesheet" type="text/css" href="mystyle.css" />• Interna:<style type="text/css"> ...</style>
  5. 5. Sintaxe/* Essa é a sintaxe do CSS */seletor { propriedade: valor;}
  6. 6. Seletores • Tag: • Id: • Classe: p { ... } #topo { ... } .foto { ... } #rodape { ... } .comentario { ... } a { ... } #logo { ... } .linhaImpar { ... } table { ... } #lateral { ... } .linhaPar { ... } input { ... } .container { ... } body { ... }
  7. 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. 8. Mão na massa 1Extraia no seu computador o seguinte arquivo:olimpogpeCurso CSS e jQueryExercícios.rar1. Aplique uma cor ao fundo da página.2. Escolha e aplique uma imagem no fundo da página.
  9. 9. Mão na massa 21. Aplique repetição na imagem de fundo da página.
  10. 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. 11. Mão na massa 31. Estilize o título.2. Estilize os textos.3. Estilize os links.4. Clique em um link.O que aconteceu?
  12. 12. Links (pseudo-classes)• a:link• a:visited• a:hover• a:activeA ordem das declarações importa!
  13. 13. Mão na massa 41. Estilize novamente os links
  14. 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. 15. Plugin Firebug para Firefox https://addons.mozilla.org/pt-br/firefox/addon/firebug/
  16. 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. 17. Mão na massa 51. Defina uma cor de fundo e outra da borda para oselementos com os seguintes identificadores:containertopoconteudorodape2. Caracterize os elementos conforme as seguintes classes jádeclaradas neles:com_paddingcom_margin3. Limite a largura do container e centralize o site na tela.
  18. 18. Posicionamento de ElementosUtiliza-se a propriedade position para definir a forma como oelemento 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. 19. Mão na massa 61. Posicione o botão Voltar no canto inferior direito da tela.2. Posicione o indice no canto superior direito da página.
  20. 20. Visualização dos ElementosUtiliza-se a propriedade display para definir a forma como oelemento se comportará na página:• inline• block• none (!= visibility)
  21. 21. Flutuação• float: (left, right)• clear: (left, right, both)
  22. 22. Mais um pouco sobre Seletores• União (vírgula)h1, h2, h3, p, a, span { ... }• Interseçãodiv.comentario { ... }p#inicial { ... }• Aninhamento (espaço)#topo h1 { ... }.comentario p { ... }
  23. 23. Especificidade e/ou Prioridades1. Atributos style dos elementos2. Maior quantidade de identificadores no seletor3. Maior quantidade de classes no seletor4. Maior quantidade de nomes de tags no seletor
  24. 24. Mão na massa 71. 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 aolado das demais.
  25. 25. Pausa...para o banheiro?
  26. 26. JavascriptAdiciona comportamento aos elementos e os manipuladinâmicamente.
  27. 27. Declaração na página• Interna: <script type="text/javascript">... </script>   • Externa: <script type="text/javascript" src="myScript.js"></script>
  28. 28. Declaração de Funçãofunction nome(var1,var2,...,varX) {// Algum código}
  29. 29. Variáveis• Globais (escopo da página)• Locais (escopo da função)
  30. 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. 31. Objeto window• status (texto na barra de status)• alert()• confirm()• print()• close()• Etc...  Dá acesso aos objetos document, history e outros.
  32. 32. Objeto history• back()• foward()• go() 
  33. 33. Objeto document• readyState• title• getElementById()• getElementsByTagName()• Etc... 
  34. 34. Objeto HTMLElement• childNodes[]• innerHTML• parentNode• nextSibling• getElementsByTagName()• removeAttribute()• setAttribute()• Etc... 
  35. 35. Eventos• onblur • onmouseout• onchange • onmouseover• onclick • onmouseup• ondblclick • onresize• onerror • onselect• onfocus • onunload• onkeydown• onkeypress• onkeyup• onload• onmousedown• onmousemove  
  36. 36. Mão na massa 81. 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. 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. 38. Alternativas existem• MooTools• ExtJS• Prototype• YUI• Dojo
  39. 39. Declaração na Página<script type="text/javascript" src="jquery.js"></script>
  40. 40. Sintaxe$( selector ).action();$( selector ).action1().action2().action3();
  41. 41. Seletores• CSS• XPATHhttp://api.jquery.com/category/selectors/
  42. 42. Manipulação de CSS• addClass• removeClass• css
  43. 43. Mão na massa 91. Defina cores alternadas nas linhas da tabela.
  44. 44. O que houve?Tentamos manipular elementos que ainda não haviam sidocarregados na tela.
  45. 45. Tem Solução?Claro! Utilizar o evento document.ready para executar oprocessamento.$(document).ready( function() { // Algum código});
  46. 46. Mão na massa 101. Copie os arquivos do exercício anterior.2. Defina cores alternadas nas linhas da tabela.
  47. 47. Efeitos• show / hide / toggle• fadeIn / fadeOut• slideUp / slideDown
  48. 48. Mão na massa 111. Fazer com que o corpo da tabela desapareça/apareça acada clique no cabeçalho.
  49. 49. Manipulação• before / after• preppend / append• remove• html• text• val
  50. 50. Mão na massa 121. Ao clicar no botão Adicionar inserir o conteúdo do textareano 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. 51. Fim!Já chega né?
  52. 52. www.gpetec.com.brObrigado!Rodrigo Aguas@rodrigoaguaswww.rodrigoaguas.comrodrigoaguas@gmail.com www.myscrumhalf.com

×