Aula de Desenvolvimento de Sistemas Web - CSS3

960 views

Published on

Aula de Desenvolvimento de Sistemas Web - CSS3

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

No Downloads
Views
Total views
960
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
98
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Aula de Desenvolvimento de Sistemas Web - CSS3

  1. 1. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO DESENVOLVIMENTO DE SISTEMAS WEB – 2015.2 Fábio M. Pereira (fabio.mpereira@uesb.edu.br)
  2. 2. “Em questões de estilo, nade com a correnteza; em questões de princípios, se mantenha firme como uma rocha” Thomas Jefferson
  3. 3. Roteiro • Introdução • Cores, Bordas e Sombras • Ação – CSS3 na Prática • Pano de Fundo • Ação – Adicionando Gradientes e Imagens de Botões • Transições e Transformações • Ação – Efeitos • Estilos Dinâmicos • Ação – Adicionando Um Seletor de Tema • Ocupando a Janela • Ação – Expandindo a Aplicação
  4. 4. Introdução • CSS3 não faz parte da especificação HTML5, mas é uma parte integral do desenvolvimento de aplicações HTML5 • CSS3 está sendo desenvolvido em conjunto com HTML5 e fornece muitos novos estilos que fazem com que as páginas Web funcionem e pareçam muito melhor que antes • Coisas que estavam apenas disponíveis no Photoshop, como gradientes e sombras, agora são facilmente adicionadas via estilo • O uso dessas novas características gráficas tornarão nossas aplicações modernas e com personalidade
  5. 5. Cores em CSS3 • Antes de iniciarmos com os novos efeitos, vamos discutir cores • CSS3 tem novas maneiras de definir cores e permite que possamos atribuir transparência e definir cores no formato HSL – HSL (Hue, Saturation, Luminance, ou em português TSL – Tonalidade, Saturação, Luminância) – É claro que os padrões antigos de valores hexadecimais, nomes de cores CSS e especificador rgb() continuam válidos • Um novo especificador rgba() foi adicionado permitindo que o alfa, ou quantidade de opacidade, seja atribuído juntamente com a cor
  6. 6. Cores em CSS3 • Assim como em rgb(), os três primeiros parâmetros especificam as quantidades de vermelho, verde e azul, e são valores variando entre 0 e 255 • Um quarto parâmetro, o alfa, é um valor de ponto flutuante entre 0 e 1, onde 0 é completamente transparente e 1 completamente opaco • A instrução a seguir define uma cor de fundo vermelha com 50 por cento de transparência: background-color: rgba(255, 0, 0, 0.5); • Embora a maioria dos navegadores darem suporte a rgba(), é uma boa ideia especificar uma alternativa para aqueles que não dão suporte, definindo uma cor no formato rgb() antes: background-color: rgb(255, 0, 0); background-color: rgba(255, 0, 0, 0.5);
  7. 7. Cores em CSS3 • Um exemplo de sobreposição de três elementos com uma transparência de 0.5 e cores vermelho, verde e azul – Note que podemos desenhar elementos circulares!
  8. 8. O Modelo HSL • O modelo HSL (Hue, Saturation, Luminance, ou em português TSL – Tonalidade, Saturação, Luminância), que se baseia nos trabalhos do pintor Albert H. Munsell (que criou o Atlas de Munsell), é um modelo de representação dito “natural”, ou seja, próximo da percepção fisiológica da cor pelo olho humano • Com efeito, o modelo RGB, apesar de adaptado para a representação informática da cor ou a afixação nos periféricos de saída, não permite selecionar facilmente uma cor
  9. 9. O Atlas de Munsell
  10. 10. O Modelo HSL • O modelo HSL consiste em decompor a cor de acordo com critérios fisiológicos : – a tonalidade (em inglês Hue), correspondendo à percepção da cor (camiseta roxa ou laranja) – a saturação, descrevendo a pureza da cor, ou seja o seu carácter vivo ou desbotado (camiseta nova ou debotada) – a luminância, indicando a quantidade de luz da cor, ou seja o seu aspecto claro ou sombrio (camiseta ao sol ou à sombra) • Uma representação gráfica do modelo HSL, no qual a tonalidade é representada por um círculo cromático e a luminância e a saturação por dois eixos :
  11. 11. O Modelo HSL • Em CSS3, a cor é especificada usando hsl(h, s, l): – A tonalidade (h) é um valor entre 0 e 360 que mapeia o grau no círculo de cores (0 é vermelho, 120 é verde, 240 é azul e 360 retorna ao vermelho) – Saturação (s) é um percentual de cor, onde 0% é completamente cinzento e 100% a cor completa – Luminância (l) é um percentual, onde 0% é preto, 50% a cor completa e 100% é branco • Podemos especificar uma cor com ou sem o valor alfa, do mesmo modo que rgb(): hsl(240, 100%, 50%); hsla(240, 100%, 50%, 0.5);
  12. 12. O Modelo HSL
  13. 13. Escolha a Sua Cor... http://hslpicker.com
  14. 14. Bordas Arredondadas • Anteriormente, se quiséssemos bordas arredondadas, existiam apenas poucas soluções não ótimas disponíveis: – Poderíamos carregar quatro imagens, uma para cada canto, e colocar algum código extra para alinhá-las (e tentar fazer funcionar em todos os navegadores) – Ou implementar algum tipo de hack usando múltiplas tags div para “desenhar” um canto arredondado – ..., no final nenhuma delas era uma solução ideal • Mas por que tanto trabalho para fazer cantos arredondados? – Porque as pessoas são atraídos por eles e fazem o design parecer mais natural
  15. 15. Bordas Arredondadas • Bordas arredondadas são ridicularmente fáceis em CSS3, usando a nova propriedade border-radius • Se quisermos que todas os cantos possuam o mesmo raio de borda, apenas dê um valor a ele: border-radius: 0.5em; • Se quisermos atribuir um raio diferente para cada borda, também podemos fazê-lo, atribuindo valores a partir do canto superior esquerdo e seguindo o sentido horário: – superior-esquerdo, superior-direito, inferior-direito, inferior- esquerdo border-radius: 1px 4px 8px 12px;
  16. 16. Bordas Arredondadas • Podemos atribui de um a quatro valores: – Se dois valores são atribuídos, o primeiro é aplicado aos cantos superior-esquerdo e inferior-direito, e o segundo aos cantos superior-direito e inferior-esquerdo (cantos opostos) – Se três valores são atribuídos, o segundo valor é aplicado aos cantos superior-direito e inferior-esquerdo, o primeiro ao superior-esquerdo e o terceiro ao canto inferior-direito • Podemos também atribuir o valor do raio de cada canto separadamente: border-top-left-radius: 1px; border-top-right-radius: 4px; border-bottom-right-radius: 8px; border-bottom-left-radius: 12px;
  17. 17. Bordas Arredondadas • Exemplos:
  18. 18. Sombras • Adicionar sombra a elementos e texto é uma tarefa simples em CSS3 • Utilize sombras para fazer com que elementos se destaquem para dar uma aparência mais natural a sua Interface • Existem muitas opções para adicionar sombras, como seu tamanho, posição e cor • Sombras nem sempre estão atrás de elementos e de texto, eles também podem ser uma moldura, destaque e adicionar efeitos a eles
  19. 19. Sombras de Caixa • Podemos adicionar sombras a elementos usando a nova propriedade CSS3 box-shadow box-shadow: h-offset v-offset blur-radius spread-radius color; • Parâmetros: – h-offset: deslocamento horizontal da sombra, valores negativos colocam a sombra à esquerda do elemento – v-offset: deslocamento vertical da sombra, valores negativos colocam a sombra acima do elemento – blur-radius: quantidade de névoa/embaçamento da sombra – quanto maior o número, mais embaçado (opcional) – spread-radius: o tamanho da sombra, se zero, o mesmo tamanho de blur (opcional) – color: a cor da sombra (opcional) – inset: adicione inserção para mudar a sombra de fora para dentro (opcional)
  20. 20. Sombras de Caixa • Exemplos:
  21. 21. Sombras de Texto • CSS3 dá suporte a sombras de textos usando a propriedade text-shadow • Funciona de maneira praticamente idêntica a box- shadow e usa quase todos os mesmos parâmetros: text-shadow: h-offset v-offset blur-radius color; • Assim como em box-shadow, podemos produzir alguns efeitos interessantes:
  22. 22. Ação – CSS3 Na Prática • Iremos colocar efeitos na borda e sombras em nossa aplicação de lista de tarefas • Primeiro iremos centralizar a lista de tarefas na página, então colocaremos uma borda em torno de cada tarefa com cantos arredondados e uma sombra
  23. 23. <div id=“main”> • Iremos mudar o estilo do elemento <div id=“main”>, que contém o campo de texto para entrada do nome da tarefa e a lista de tarefas – Vamos dar a esta seção um tamanho mínimo de 9em e um máximo de 25em – isto permitirá um layout reativo – Iremos também atribuir 1em às nossas margens superior e inferior, e deixar as margens esquerda e direita em auto para centralizá-las na página
  24. 24. new-task-name • Também vamos mudar o campo de entrada de texto do nome da tarefa para que ocupe o tamanho de toda a seção principal, atribuindo a propriedade width 98%:
  25. 25. task-list .task • Iremos dar uma cor de fundo, cantos arredondados e uma sombra aos item da lista de tarefas – A sombra será preta com alguma transparência, de forma a aparecer a cor de fundo – Também iremos atribuir à propriedade position o valor relative, assim poderemos colocar os botões de tarefa dentro dele
  26. 26. task-list .task .tools • Vamos adicionar uma borda em torno dos botões para agrupá-los, e movê-los para o lado superior-direito do elemento task, usando posicionamento absoluto – Utilizando posicionamento absoluto, o elemento é posicionado em relação ao elemento pai mais próximo, neste caso o elemento task
  27. 27. Executando... • Execute a aplicação e depois tente redimensionar a janela do navegador para ver o que acontece
  28. 28. Pano de Fundo • Existem vários novos estilos para atribuir o estilo do pano de fundo de elementos – Podemos desenhar gradientes facilmente, sem usar imagens – Podemos mudar o tamanho e origem das imagens de fundo – Ou até mesmo usar múltiplas imagens como pano de fundo • Gradientes desenham um pano de fundo para um elemento que varia de uma cor para uma ou mais outras cores – Eles dão maior profundidade à página e uma aparência mais natural • Podemos especificar dois tipos de gradientes em CSS3: – Linear: variam de uma cor para outra de uma maneira direta – Radial: se espalham a partir de um ponto central de uma maneira circular
  29. 29. Gradientes Lineares • Gradientes lineares são definidos através do especificador linear-gradient na propriedade background • Na forma mais simples, podemos especificar uma cor de início e de fim, utilizando-se qualquer dos especificadores de cor, que será desenhado um gradiente de cima para baixo do elemento • O exemplo a seguir varia de vermelho para azul: background: linear-gradient(#FF0000, #0000FF); • Embora praticamente todos os navegadores darem suporte a gradientes, ainda precisamos usar prefixos específicos para cada navegador para que eles funcionem – Isto significa especificar pelo menos quatro vezes para alcançar a maioria dos navegadores
  30. 30. Gradientes Lineares • Se lembre de sempre especificar a versão não-proprietária por último, assim ela irá sobrepor a versão específica do navegador, quando disponível: background: -webkit-linear-gradient(#FF0000, #0000FF); background: -moz-linear-gradient(#FF0000, #0000FF); background: -ms-linear-gradient(#FF0000, #0000FF); background: linear-gradient(#FF0000, #0000FF); • Se quisermos que o início do gradiente seja diferente do topo, devemos especificar um primeiro parâmetro que pode ser tanto o nome do lado de início quanto o grau de rotação – Os lados são: top, bottom, left e right – O grau pode variar de -360deg a 360deg ou em radianos de -6.28rad a 6.28rad, 0 é o mesmo que left (esquerda) – Um valor positivo indica sentido anti-horário
  31. 31. Gradientes Lineares • Um gradiente da esquerda para a direita: background: linear-gradient(left, #FF0000, #0000FF); • Um gradiente com 45 graus, a partir do canto inferior esquerdo: background: linear-gradient(45deg, #FF0000, #0000FF); • Podemos também adicionar mais de uma cor de parada – Um gradiente com ângulo de 45 graus do vermelho para o azul para o verde: background: linear-gradient(45deg, #FF0000, #0000FF, #00FF00);
  32. 32. Gradientes Radiais • Gradientes radiais são quase idênticos a gradientes lineares nos parâmetros que usam • O padrão é desenhar o gradiente do centro para a borda do elemento: background: radial-gradient(#FF0000, #0000FF); • Podemos especificar a posição usando uma das posições pré-definidas ou um ponto a partir do canto superior esquerdo para o centro do gradiente: background: radial-gradient(top, #FF0000, #0000FF); • Um gradiente com centro em 20 pixels a direita e 20 pixels para baixo: background: radial-gradient(20px 20px, #FF0000, #0000FF);
  33. 33. Gradientes Radiais • Também podemos especificar mais de duas cores de parada para gradientes radiais • Um gradiente com centro em 20px, 20px do vermelho, para o azul, para o verde: background: radial-gradient(20px 20px, #FF0000, #0000FF, #00FF00);
  34. 34. Gradientes • Se você quiser criar o seu próprio gradiente... – http://www.colorzilla.com/gradient-editor/
  35. 35. Imagens de Pano de Fundo • Podemos atribuir o tamanho de uma imagem de um pano de fundo para uma quantidade fixa de pontos (pixels) ou um percentual da área do elemento – A imagem será colocada em escala para caber na área especificada • A propriedade background-size recebe dois valores: um tamanho horizontal e um tamanho vertical • Se quisermos que uma imagem preencha todo o pano de fundo de um elemento: background-size: 100% 100%;
  36. 36. Imagens de Pano de Fundo • Podemos especificar múltiplas imagens de pano de fundo as separando com vírgulas – A primeira imagem será desenhada no topo e a última embaixo • Duas imagens de fundo: background: url(bg-front.png), url(bg-back.png);
  37. 37. Imagens de Pano de Fundo • Existe uma nova propriedade background-origin que determina onde a imagem será desenhada: – content-box: desenha a imagem apenas na área de conteúdo de um elemento – padding-box: desenha a imagem na área de preenchimento de um elemento – border-box: desenha a imagem em todo o caminho até a borda de um elemento • Exemplo: background-origin: content-box;
  38. 38. Imagens de Pano de Fundo
  39. 39. Sprites CSS • Não é uma tecnologia nova do CSS3, mas devemos saber como utilizá-la quando escrevemos aplicações HTML5 • Sprites CSS permitem que coloquemos todas as imagens de uma aplicação em um único arquivo de imagens – Então podemos dividir as imagens individuais em elementos usando CSS • Esta técnica diminui o tempo e recursos de rede para baixar múltiplas imagens – É especialmente útil se a aplicação possui muitas imagens pequenas • Para implementar sprites CSS, devemos colocar todas as imagens em um único arquivo, chamado de folha de sprites (sprite sheet)
  40. 40. Sprites CSS • Para buscar uma imagem na planilha e colocá-la em um elemento da página: 1. Faça com que o elemento tenha o mesmo tamanho da imagem que queremos mostrar 2. Atribua a imagem de pano de fundo do elemento à imagem da folha de sprites 3. Ajuste a posição do pano de fundo da folha de sprites de maneira que a imagem que queremos ver esteja no canto superior esquerdo do elemento • Exemplo: – Supondo que a folha de sprites possui 16 imagens e cada imagem possui tamanho 10x10 pontos – Primeiro, atribuímos ao tamanho do elemento (propriedades width e height) o valor 10px
  41. 41. Sprites CSS • Exemplo (cont.): – Em seguida atribuímos à imagem do pano de fundo a folha de sprites (sprite-sheet.png) – Se pararmos agora, podemos apenas atribuir a primeira imagem ao nosso elemento – Mas se quisermos mostrar a sétima imagem, precisaremos atribuir à posição do pano de fundo a folha de sprites em 20 pontos à esquerda e 10 ponto acima – Precisamos usar valores negativos para chegar à posição correta, uma vez que estamos movendo a imagem e não o elemento #seven { Width: 10px; height: 10px; background-image: url(sprite-sheet.png); background-position: -20px -10px; }
  42. 42. Sprites CSS • O resultado:
  43. 43. Ação – Adicionando Gradientes • Primeiro, iremos adicionar um pano de fundo gradiente em nossa aplicação de lista de tarefas: – Iremos adicionar um gradiente linear ao elemento <div id=“app”> – Ele irá iniciar com a cor de fundo anterior no topo e irá terminar com a cor azul escuro na parte inferior – Note que mantemos o pano de fundo na cor anterior para compatibilidade com navegadores que não dão suporte a gradientes
  44. 44. Resultado...
  45. 45. Adicionando Imagens dos Botões • Agora iremos utilizar sprites CSS para adicionar imagens aos botões da nossa aplicação • Precisamos de imagens para os botões de exclusão, mover para cima e mover para baixo • Como nossos botões terão tamanho de 16x16 pontos, as imagens deverão possuir o mesmo tamanho • Como temos três imagens, iremos criar uma folha de sprites com 48 pontos de largura e 16 de altura • Iremos colocá-las em um arquivo chamado icons.png dentro da pasta images
  46. 46. Adicionando Imagens dos Botões • Agora precisamos adicionar as imagens da folha de sprites em nossos botões: – Primeiro iremos alterar o estilo aplicado a todos os botões, atribuindo 16x16 pontos ao tamanho e à imagem de pano de fundo a nossa folha de sprites – Desta maneira temos que especificar a folha de sprites apenas uma vez e ela será aplicada a todos os botões
  47. 47. Adicionando Imagens dos Botões • Agora que todos os botões utilizam icons.png como pano de fundo, devemos apenas atribuir as posições do pano de fundo para cada botão, para que se alinhem com a imagem correta:
  48. 48. Executando a Aplicação...
  49. 49. Transições • Podemos melhorar ainda mais a nossa interface com transições • Transições CSS3 adicionam efeitos de animação aos elementos quando os seus estilos mudarem • Por exemplo, se mudarmos o tamanho de um elemento, ele irá gradualmente mudar do tamanho pequeno para um tamanho maior, fornecendo um feedback visual ao usuário • Quando as coisas mudam gradualmente, chamam mais atenção que algo que apenas aparece repentinamente na página
  50. 50. Transições • A propriedade transition de CSS3 tem o seguinte formato: transition: property duration timing-function delay • Parâmetros: – property: a propriedade CSS que deverá ser adicionada uma transição, por exemplo, width ou color – utilize all para aplicar transições a todas as propriedades – duration: a quantidade de tempo que a transição irá durar, por exemplo, 0.5s leva meio segundo para completar a transição – timing-function: determina como será o progresso da transição no tempo de duração • linear: a mesma velocidade do início ao fim • ease: inicia lenta, então acelera, e termina lenta • ease-in: inicia lenta, então acelera • ease-out: inicia rápida, então se torna lenta • ease-in-out: combinação das duas
  51. 51. Transições – timing-function (cont.): • cubic-bezier(): se não quisermos utilizar uma função predefinida, podemos criar a nossa própria – delay: a quantidade de tempo a aguardar antes de iniciar a transição • A função cubic-bezier receber quatro parâmetros que são número entre 0 e 1 – O exemplo a seguir produz o mesmo efeito que a função ease: transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1); • Se quiser explorar a construção de suas próprias funções de tempo: – http://cubic-bezier.com/
  52. 52. Transições • Assim como gradientes, vários navegadores dão suporte a transições, mas ainda devemos usar prefixos específicos quando as declararmos: -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
  53. 53. Transições • A maneira mais fácil de aplicar uma transição é em combinação com um seletor CSS hover • O código a seguir irá esvair a cor de fundo de um elemento de branco para azul, em um quarto de segundo, quando o usuário mover o mouse sobre ele: #some-element { background-color: White; transition: all 0.25s ease; } #some-element:hover { background-color: Blue; }
  54. 54. Transformações • Transformações CSS3 permitem efeito ainda mais sofisticados • Existem transformações 2D e 3D disponíveis – Iremos discutir apenas transformações 2D • Forma básica da propriedade transform: transform: function(); • Existem algumas poucas funções transform 2D diferentes • A função translate() move um elemento da posição atual para uma nova posição – Ela recebe como parâmetros posições x e y – Podemos usar valores negativos para mover para cima e para esquerda – A instrução a seguir move um elemento 10 pontos para a direita e 25 pontos para cima: transform: translate(10px, -25px);
  55. 55. Transformações • A função rotate() gira um elemento dada um valor – O tamanho da rotação pode ser especificado em graus ou radianos – Use valores negativos para girar no sentido anti-horário transform: rotate(45deg); • A função scale() ajusta o tamanho de um elemento com base em algum fator – Ela recebe um ou dois parâmetros – Se apenas um parâmetro for fornecido, usa como escala o valor – Se dois parâmetros forem fornecidos, ela utilizará valores de escalas horizontal e vertical separadamente – O exemplo a seguir dobra o comprimento e diminui pela metade a altura de um elemento transform: scale(2, 0.5);
  56. 56. Transformações • A função skew() distorce ou alonga um elemento – Ela recebe dois parâmetros que são quantidades para girar os eixos x e y – Ângulos são especificados da mesma maneira que na função rotate() transform: skew(45deg, 10deg); • Transformações requerem prefixos específicos para cada navegador: -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
  57. 57. Transformações • Exemplos:
  58. 58. Ação – Efeitos • Vamos adicionar alguns efeitos na lista de tarefas: – Primeiro, iremos adicionar a habilidade de selecionar uma tarefa na lista – Quando a tarefa for clicada, ela irá aumentar em tamanho e ter uma borda colorida, de maneira a nos mostrar facilmente que está selecionada – Iremos também adicionar o efeito de flutuação (hover) nas tarefas, para que quando o usuário passar o mouse sobre a mesma, os botões de ação apareçam; quando o mouse sair da tarefa, os botões devem desaparecer
  59. 59. Modificando taskAtHand.js • Devemos modificar o arquivo taskAtHand.js para adicionar um manipulador de evento de clique para o elemento task após a sua criação no método addTaskElement(): $task.click(function() { onSelectTask($task); }); • Ela chamará o método onSelectTask() quando uma tarefa é clicada – Neste método iremos marcar um elemento task como selecionado atribuindo-lhe uma classe de nome selected – Iremos também remover a classe selected do elemento previamente selecionado
  60. 60. Modificando taskAtHand.js
  61. 61. #task-list .task.selected • De volta ao arquivo taskAtHand.css, iremos adicionar um estilo para uma tarefa selecionada – Iremos aumentar o preenchimento (padding) de maneira a tornar o elemento maior – Adicionar uma borda para destacá-lo – E modificar a cor de fundo
  62. 62. Adicionando Uma Transição • Iremos adicionar uma transição através da propriedade transition da classe .task – Ela será do tipo ease e terá uma duração de um quarto de segundo em qualquer mudança de propriedade – Ela dará um bom retorno visual quando o usuário clicar em uma tarefa
  63. 63. Adicionando Uma Transição • Iremos adicionar mais uma transição – iremos esconder os botões de ação até que o usuário mova o mouse sobre uma tarefa ou a selecione – Primeiro iremos atribuir 0 à propriedade opacity para esconder o elemento que contém os botões de tarefa, tornando-o transparente – Então adicionamos as mesmas propriedades de transição como fizemos anteriormente
  64. 64. #task-list .task .tools
  65. 65. Efeito de Flutuação (hover) • Agora iremos adicionar um seletor hover para o elemento de tarefa que atribui 1 à propriedade opacity, para torná-lo visível – Isto, em conjunto com a transição, fará com que os botões de tarefa apareçam gradualmente quando o usuário passar o mouse sobre uma tarefa – Também devemos adicionar um seletor para que os botões apareçam quando estiverem selecionados • Antes de CSS3, poderíamos fazer isso utilizando os métodos jQuery fadeIn() e fadeOut() em conjunto com algum evento de mouse, mas necessitando consideravelmente de mais código
  66. 66. Efeito de Flutuação (hover)
  67. 67. Executando a Aplicação...
  68. 68. Estilos Dinâmicos • Iremos adicionar uma nova funcionalidade à nossa aplicação: a capacidade do usuário escolher um esquema de cores ou tema, para que ele possa customizar a aparência da aplicação • Podemos mudar a aparência de páginas Web carregando dinamicamente arquivos CSS, sobrepondo estilos existentes na folha de estilos padrão • Para fazer isso, iremos adicionar uma lista drop-down de temas para que o usuário possa escolher – quando ele mudar o tema, a folha de estilos será mudada e consequentemente as cores da página
  69. 69. Adicionando Um Seletor de Tema • Vamos adicionar uma barra de tarefas à aplicação de lista de tarefas no arquivo taskAtHand.html: – Iremos colocá-la entre os elementos <header> e <div id=“main”> – A barra de tarefas irá conter um <label> e uma lista de seleção <select> – A lista irá conter quatro tipos diferentes de temas: blue, green, magenta e red
  70. 70. Adicionando Um Seletor de Tema
  71. 71. Estilo da Barra de Tarefas • Iremos tornar a fonte um pouco menor que a do resto da página, e o pano de fundo preto com alguma transparência:
  72. 72. Implementando os Temas • Vamos criar alguns arquivos CSS, um para cada tema – Iremos colocá-los em uma pasta chamada themes a fim de mantê-los agrupados – Os arquivos CSS deverão ter os mesmos nomes dos valores de <option>: blue.css, green.css, magenta.css e red.css • Código de green.css:
  73. 73. Implementando os Temas • Primeiro, sobrepomos os gradientes de pano de fundo para o elemento app (verde em vez de azul) • Mudamos também os elementos header e footer, também para torná-los verde • Os outros arquivos CSS serão exatamente iguais, exceto por possuírem cores diferentes
  74. 74. blue.css
  75. 75. magenta.css
  76. 76. red.css
  77. 77. Editando o Arquivo HTML • Devemos adicionar um elemento <link> ao elemento <header> do arquivo HTML para o arquivo de tema CSS • Uma vez que o tema padrão é o azul, iremos carregar o blue.css: – Note que incluímos a folha de estilos de tema logo abaixo do tema base – Note também que demos ao elemento <link> um atributo id, para que possamos usá-lo no JavaScript posteriormente
  78. 78. Editando o Arquivo JavaScript • Primeiro iremos adicionar um manipulador de evento de mudança ao seletor de temas no método TaskAtHand.start(): $("#theme").change(onChangeTheme); • Quando o usuário escolher um novo tema, o método privado onChangeTheme() será chamado:
  79. 79. onChangeTheme() • Este método captura a opção selecionada na lista buscando por elementos <option>, então utiliza o seletor jQuery :selected dentro de filter() para encontrar a opção selecionada • Então chama o método setTheme(), que será implementado a seguir • Finalmente, salva o tema selecionado no localStorage, de maneira que possamos atribuí-lo da próxima vez que o usuário retornar à aplicação
  80. 80. setTheme() • O método setTheme() recebe o nome do tema como parâmetro • Então captura o elemento <link id=“theme-style”> e muda o seu atributo href para a nova URL da folha de estilos • Quando isto acontecer, a página irá carregar a nova folha de estilos e aplicar os seus estilos sobre os existentes, fazendo com que a página mude de cor
  81. 81. loadTheme() • Precisamos agora carregar o tema quando o usuário retornar à aplicação • Iremos criar o método loadTheme() para fazer isso: – O método carrega o nome do tema do localStorage – Se encontrar algum, chama setTheme() para atribuí-lo – Então seleciona o tema na lista drop-down encontrando o <option> na lista que tem como valor o nome do tema e atribui selected a ele
  82. 82. start() • Finalmente devemos chamar loadTheme() no método start()
  83. 83. Executando a Aplicação...
  84. 84. Ocupando a Janela • Iremos fazer uma última alteração no estilo de nossa aplicação de lista de tarefas – ocupar todo o espaço da tela • Do modo atual, se a lista cresce, o gradiente de pano de fundo cresce e o rodapé se move para baixo • Seria melhor se o gradiente cobrisse toda a tela e o rodapé sempre permanecesse embaixo
  85. 85. Expandindo a Aplicação • Podemos preencher a janela do navegador utilizando posicionamento absoluto • Vamos adicionar o código a seguir no elemento <div id=“app”>:
  86. 86. Expandindo a Aplicação • Primeiro, atribuímos ao elemento posicionamento absoluto, para que possamos posicionar o elemento no local que quisermos na tela • Em seguida atribuímos 0 a todos as propriedades position – Isto faz com que o elemento ocupe todo o espaço da janela • Finalmente, atribuímos auto à propriedade overflow – Isto fará com que a barra de rolagem apareça e o gradiente se expanda abaixo da janela se a lista de tarefas for além da altura da janela
  87. 87. Expandindo a Aplicação • Também precisamos reposicionar o rodapé para que fique no final da janela • Podemos fazer da mesma maneira, atribuindo absolute à propriedade position e 0 a bottom • Note que não atribuímos 0 a right, assim o rodapé não irá se expandir por toda a largura, de outro modo poderia interferir na lista de tarefas:
  88. 88. Executando a Aplicação...
  89. 89. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO DESENVOLVIMENTO DE SISTEMAS WEB – 2015.2 Fábio M. Pereira (fabio.mpereira@uesb.edu.br)

×