Your SlideShare is downloading. ×

CSS & JQquery

191
views

Published on

Projeto Capacitar novembro de 2011. …

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
191
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
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. CSS + jQuery Rodrigo Aguas Projeto Capacitar – GPE Novembro 2011
  • 2. Visão Geral
  • 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. 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 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. Mão na massa 21. 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 31. 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:activeA ordem das declarações importa!
  • 13. Mão na massa 41. 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 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. 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. 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. Visualização dos ElementosUtiliza-se a propriedade display para definir a forma como oelemento 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çãodiv.comentario { ... }p#inicial { ... }• Aninhamento (espaço)#topo h1 { ... }.comentario p { ... }
  • 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. 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. Pausa...para o banheiro?
  • 26. JavascriptAdiciona comportamento aos elementos e os manipuladinâ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çãofunction 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 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. 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• XPATHhttp://api.jquery.com/category/selectors/
  • 42. Manipulação de CSS• addClass• removeClass• css
  • 43. Mão na massa 91. Defina cores alternadas nas linhas da tabela.
  • 44. O que houve?Tentamos manipular elementos que ainda não haviam sidocarregados na tela.
  • 45. Tem Solução?Claro! Utilizar o evento document.ready para executar oprocessamento.$(document).ready( function() { // Algum código});
  • 46. Mão na massa 101. 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 111. Fazer com que o corpo da tabela desapareça/apareça acada clique no cabeçalho.
  • 49. Manipulação• before / after• preppend / append• remove• html• text• val
  • 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. Fim!Já chega né?
  • 52. www.gpetec.com.brObrigado!Rodrigo Aguas@rodrigoaguaswww.rodrigoaguas.comrodrigoaguas@gmail.com www.myscrumhalf.com