CSS & JQquery
Upcoming SlideShare
Loading in...5
×
 

CSS & JQquery

on

  • 447 views

Projeto Capacitar novembro de 2011.

Projeto Capacitar novembro de 2011.
Tema: CSS & JQuery

Statistics

Views

Total Views
447
Views on SlideShare
447
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

CSS & JQquery CSS & JQquery Presentation Transcript

  • CSS + jQuery Rodrigo Aguas Projeto Capacitar – GPE Novembro 2011
  • Visão Geral
  • 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
  • Declaração na página• Externa:<link rel="stylesheet" type="text/css" href="mystyle.css" />• Interna:<style type="text/css"> ...</style>
  • Sintaxe/* Essa é a sintaxe do CSS */seletor { propriedade: valor;}
  • Seletores • Tag: • Id: • Classe: p { ... } #topo { ... } .foto { ... } #rodape { ... } .comentario { ... } a { ... } #logo { ... } .linhaImpar { ... } table { ... } #lateral { ... } .linhaPar { ... } input { ... } .container { ... } body { ... }
  • 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;}
  • 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.
  • Mão na massa 21. Aplique repetição na imagem de fundo da página.
  • 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;}
  • 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?
  • Links (pseudo-classes)• a:link• a:visited• a:hover• a:activeA ordem das declarações importa!
  • Mão na massa 41. Estilize novamente os links
  • 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;
  • Plugin Firebug para Firefox https://addons.mozilla.org/pt-br/firefox/addon/firebug/
  • Propriedades das Caixas• width• height• margin (-top, -right, -bottom, -left)• padding (-top, -right, -bottom, -left)• border (-top, -right, -bottom, -left) (-color, -width, -style)
  • 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.
  • 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)
  • 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.
  • Visualização dos ElementosUtiliza-se a propriedade display para definir a forma como oelemento se comportará na página:• inline• block• none (!= visibility)
  • Flutuação• float: (left, right)• clear: (left, right, both)
  • 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 { ... }
  • 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
  • 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.
  • Pausa...para o banheiro?
  • JavascriptAdiciona comportamento aos elementos e os manipuladinâmicamente.
  • Declaração na página• Interna: <script type="text/javascript">... </script>   • Externa: <script type="text/javascript" src="myScript.js"></script>
  • Declaração de Funçãofunction nome(var1,var2,...,varX) {// Algum código}
  • Variáveis• Globais (escopo da página)• Locais (escopo da função)
  • Document Object Model (DOM)• Objetos representam recursos do navegador ou elementos  do HTML;• Objetos possuem atributos, métodos e tratadores de  eventos (event handlers); 
  • Objeto window• status (texto na barra de status)• alert()• confirm()• print()• close()• Etc...  Dá acesso aos objetos document, history e outros.
  • Objeto history• back()• foward()• go() 
  • Objeto document• readyState• title• getElementById()• getElementsByTagName()• Etc... 
  • Objeto HTMLElement• childNodes[]• innerHTML• parentNode• nextSibling• getElementsByTagName()• removeAttribute()• setAttribute()• Etc... 
  • Eventos• onblur • onmouseout• onchange • onmouseover• onclick • onmouseup• ondblclick • onresize• onerror • onselect• onfocus • onunload• onkeydown• onkeypress• onkeyup• onload• onmousedown• onmousemove  
  • 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.
  • 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
  • Alternativas existem• MooTools• ExtJS• Prototype• YUI• Dojo
  • Declaração na Página<script type="text/javascript" src="jquery.js"></script>
  • Sintaxe$( selector ).action();$( selector ).action1().action2().action3();
  • Seletores• CSS• XPATHhttp://api.jquery.com/category/selectors/
  • Manipulação de CSS• addClass• removeClass• css
  • Mão na massa 91. Defina cores alternadas nas linhas da tabela.
  • O que houve?Tentamos manipular elementos que ainda não haviam sidocarregados na tela.
  • Tem Solução?Claro! Utilizar o evento document.ready para executar oprocessamento.$(document).ready( function() { // Algum código});
  • Mão na massa 101. Copie os arquivos do exercício anterior.2. Defina cores alternadas nas linhas da tabela.
  • Efeitos• show / hide / toggle• fadeIn / fadeOut• slideUp / slideDown
  • Mão na massa 111. Fazer com que o corpo da tabela desapareça/apareça acada clique no cabeçalho.
  • Manipulação• before / after• preppend / append• remove• html• text• val
  • 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.
  • Fim!Já chega né?
  • www.gpetec.com.brObrigado!Rodrigo Aguas@rodrigoaguaswww.rodrigoaguas.comrodrigoaguas@gmail.com www.myscrumhalf.com