Ferramentas web aula02

665 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
665
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ferramentas web aula02

  1. 1. Design Gráfico Disciplina: Ferramentas Para WEB Professor: Anderson Maia [email_address]
  2. 2. Conceitos Básicos <ul><li>Digital: Sistema no qual a informação é processada em forma numérica, utilizando um sistema binário. </li></ul><ul><li>Sistema Binário: Sistema numérico que pode assumir apenas 2 valores, base para toda informação digital, representado pelos valores 0 ou 1( ligado ou desligado). </li></ul><ul><li>Sistema Decimal: </li></ul><ul><li>1 2 3 4 5 6 7 8 9 10 </li></ul><ul><li>Sistema Binário: </li></ul><ul><li>0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 </li></ul>
  3. 3. Sistemas de Numeração <ul><li>Bit – menor partícula de informação no computador, pode representar 0 ou 1. Esses dois símbolos são opostos e mutuamente exclusivos. </li></ul><ul><li>Byte – conjunto de 8 bits. </li></ul><ul><li>Os Múltiplos do Byte são: </li></ul><ul><li>1.024 bytes = 1 Kb (kilobyte) </li></ul><ul><li>1.024 Kb = 1MB (megabyte) </li></ul><ul><li>1024 Mb = 1 Gb (gigabyte) </li></ul><ul><li>1024 Gb = 1 Tb ( terabyte) </li></ul>
  4. 4. Sistemas de Numeração <ul><li>Existiram e existem diversos sistemas de numeração. </li></ul><ul><li>No computador, serve para questões de endereçamento, armazenamento, conteúdo de tabelas e representações gráficas. </li></ul><ul><li>Bases diferentes usadas nos mais diversos computadores. </li></ul>
  5. 5. Sistemas de Numeração <ul><li>Bases </li></ul><ul><ul><li>Binária </li></ul></ul><ul><ul><ul><li>0, 1 </li></ul></ul></ul><ul><ul><li>Octal </li></ul></ul><ul><ul><ul><li>0, 1, 2, 3, 4, 5, 6, 7 </li></ul></ul></ul><ul><ul><li>Decimal </li></ul></ul><ul><ul><ul><li>0, 1, 2, 3, 4, 5, 6, 7, 8, 9 </li></ul></ul></ul><ul><ul><li>Hexadecimal </li></ul></ul><ul><ul><ul><li>0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F </li></ul></ul></ul>
  6. 6. Sistemas de Numeração <ul><li>Representação nas bases </li></ul><ul><ul><li>101101 2 - 101101 na base 2 (binária) </li></ul></ul><ul><ul><li>752 8 - 752 na base 8 (octal) </li></ul></ul><ul><ul><li>651 - 651 na base 10 (decimal) </li></ul></ul><ul><ul><ul><li>Quando não é indicada a base, a base é decimal. Mas poderia ser representado assim: 651 10 </li></ul></ul></ul><ul><ul><li>423 16 - 423 na base 16 (hexadecimal) </li></ul></ul>
  7. 7. Sistemas de Numeração <ul><li>Representação nas bases – Base decimal </li></ul><ul><ul><li>7484 </li></ul></ul><ul><ul><li>7484 = 7 x 1000 + 4 x 100 + 8 x 10 + 4 </li></ul></ul><ul><ul><li>7484 = 7 X 10 3 + 4 X 10 2 + 8 X 10 1 + 4 X 10 0 </li></ul></ul><ul><li>Representação em polinômio genérico </li></ul><ul><ul><li>Número = d n 10 n + d n-1 10 n-1 + ... d 1 10 1 + d 0 10 0 </li></ul></ul>
  8. 8. Sistemas de Numeração <ul><li>Representação de binário na base 10 </li></ul><ul><ul><li>1101001 2 </li></ul></ul><ul><ul><li>1101001 2 = 1 x 2 6 + 1 x 2 5 + 0 x 2 4 + 1 x 2 3 + </li></ul></ul><ul><ul><li>0 x 2 2 + 0 x 2 1 + 1 x 2 0 </li></ul></ul><ul><ul><li>1101001 2 = 64 + 32 + 0 + 8 + 0 + 0 + 1 </li></ul></ul><ul><ul><li>1101001 2 = 105 10 </li></ul></ul><ul><li>Representação em polinômio genérico </li></ul><ul><ul><li>Número = b n 2 n + b n-1 2 n-1 + ... b 1 2 1 + b 0 2 0 </li></ul></ul>
  9. 9. Sistemas de Numeração <ul><li>Representação de octal na base 10 </li></ul><ul><ul><li>54621 8 </li></ul></ul><ul><ul><li>54621 8 = 5 x 8 4 + 4 x 8 3 + 6 x 8 2 + 2 x 8 1 + </li></ul></ul><ul><ul><li>1 x 8 0 </li></ul></ul><ul><ul><li>54621 8 = 20480 + 2048 + 384 + 16 + 1 </li></ul></ul><ul><ul><li>54621 8 = 22929 10 </li></ul></ul><ul><li>Representação em polinômio genérico </li></ul><ul><ul><li>Número = o n 8 n + o n-1 8 n-1 + ... o 1 8 1 + o 0 8 0 </li></ul></ul>
  10. 10. Sistemas de Numeração <ul><li>Representação de hexadecimal na base 10 </li></ul><ul><ul><li>39741 16 </li></ul></ul><ul><ul><li>39741 16 = 3 x 16 4 + 9 x 16 3 + 7 x 16 2 + 4 x 16 1 + </li></ul></ul><ul><ul><li>1 x 16 0 </li></ul></ul><ul><ul><li>39741 16 = 196608 + 36864 + 1792 + 64 + 1 </li></ul></ul><ul><ul><li>39741 16 = 235329 10 </li></ul></ul><ul><li>Representação em polinômio genérico </li></ul><ul><ul><li>Número = h n 16 n + h n-1 16 n-1 + ... h 1 16 1 + h 0 16 0 </li></ul></ul>
  11. 11. Sistemas de Numeração <ul><li>Mudança da base 10 para binário </li></ul><ul><ul><li>714 </li></ul></ul><ul><ul><li>714 | _2_ </li></ul></ul><ul><ul><li>0 357 | _2_ </li></ul></ul><ul><ul><li>1 178 | _2_ </li></ul></ul><ul><ul><li>0 89 | _2_ </li></ul></ul><ul><ul><li>1 44 | _2_ </li></ul></ul><ul><ul><li>0 22 | _2_ </li></ul></ul><ul><ul><li>0 11 | _2_ </li></ul></ul><ul><ul><li>1 5 | _2_ </li></ul></ul><ul><ul><li>1 2 | _2_ </li></ul></ul><ul><ul><li>0 1 </li></ul></ul>
  12. 12. Sistemas de Numeração <ul><li>Mudança da base 10 para binário </li></ul><ul><ul><li>714 </li></ul></ul><ul><ul><li>714 | _2_ </li></ul></ul><ul><ul><li>0 357 | _2_ </li></ul></ul><ul><ul><li>1 178 | _2_ </li></ul></ul><ul><ul><li>0 89 | _2_ </li></ul></ul><ul><ul><li>1 44 | _2_ </li></ul></ul><ul><ul><li>0 22 | _2_ </li></ul></ul><ul><ul><li>0 11 | _2_ </li></ul></ul><ul><ul><li>1 5 | _2_ </li></ul></ul><ul><ul><li>1 2 | _2_ </li></ul></ul><ul><ul><li>0 1 </li></ul></ul>714 = 1011001010 2
  13. 13. Sistemas de Numeração <ul><li>Mudança da base 10 para octal </li></ul><ul><ul><li>714 </li></ul></ul><ul><ul><li>714 | _8_ </li></ul></ul><ul><ul><li>2 89 | _8_ </li></ul></ul><ul><ul><li>1 11 | _8_ </li></ul></ul><ul><ul><li>3 1 </li></ul></ul>714 = 1312 8
  14. 14. Sistemas de Numeração <ul><li>Mudança da base 10 para hexadecimal </li></ul><ul><ul><li>714 </li></ul></ul><ul><ul><li>714 | _16_ </li></ul></ul><ul><ul><li>10 44 | _16_ </li></ul></ul><ul><ul><li>12 2 </li></ul></ul>714 = 2CA 16 Hexadecimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F A=10 , B=11 , C=12 , D=13 , E=14 , F=15
  15. 15. Sistemas de Numeração <ul><li>Mudança da base binária para decimal (10) </li></ul><ul><li>1011001010 2 </li></ul><ul><ul><li>0 x 2 0 = 0 </li></ul></ul><ul><ul><li> 1 x 2 1 = 2 </li></ul></ul><ul><ul><li> 0 x 2 2 = 0 </li></ul></ul><ul><ul><li> 1 x 2 3 = 8 </li></ul></ul><ul><ul><li> 0 x 2 4 = 0 </li></ul></ul><ul><ul><li> 0 x 2 5 = 0 </li></ul></ul><ul><ul><li> 1 x 2 6 = 64 </li></ul></ul><ul><ul><li> 1 x 2 7 = 128 </li></ul></ul><ul><ul><li> 0 x 2 8 = 0 </li></ul></ul><ul><ul><li> 1 x 2 9 = 512 </li></ul></ul>= 0+2+0+8+0+0+64+128+0+512 = 714
  16. 16. Sistemas de Numeração <ul><li>Mudança da base octal para decimal (10) </li></ul><ul><li>1312 8 </li></ul><ul><ul><li>2 x 8 0 = 2 </li></ul></ul><ul><ul><li> 1 x 8 1 = 8 </li></ul></ul><ul><ul><li> 3 x 8 2 = 192 </li></ul></ul><ul><ul><li> 1 x 8 3 = 512 </li></ul></ul>= 2+8+192+512 = 714
  17. 17. Sistemas de Numeração <ul><li>Mudança da base hexadecimal para decimal </li></ul><ul><li>2CA 16 </li></ul><ul><ul><li>A x 16 0 = 10 x 16 0 = 10 </li></ul></ul><ul><ul><li> C x 16 1 = 12 x 16 1 = 192 </li></ul></ul><ul><ul><li> 2 x 16 2 = 512 </li></ul></ul>= 10+192+512 = 714
  18. 18. Exercício <ul><li>1. Converter para a base decimal os seguintes números: </li></ul><ul><li>a) 1010102 </li></ul><ul><li>b)10103 </li></ul><ul><li>c) 10214 </li></ul><ul><li>d) 10256 </li></ul><ul><li>e) 21658 </li></ul><ul><li>f) 1FA216 </li></ul><ul><li>g) E1A16 </li></ul><ul><li>h) 7078 </li></ul>
  19. 19. Imagens em Computação <ul><li>Imagens Matriciais/ Mapa de bits: imagens onde são guardadas informações de cada ponto que constitui a imagem. </li></ul><ul><li>Exemplos de programas que trabalham com imagens vetoriais. </li></ul>
  20. 20. Imagens em Computação <ul><li>Pixe l: Menor elemento que constitui a imagem. O ‘grão’ da imagem digital . </li></ul>Os pixels que formam uma imagem digitalizada (como arquivos JPEG usados em páginas da Internet) podem ou não estar em uma correspondência de &quot;um para um&quot; com pixels da tela do computador, isso depende como o monitor do computador está configurado para exibir uma imagem. Em computação, uma imagem composta por pixels é conhecida como uma imagem &quot;bitmap&quot;
  21. 21. Tipos de Imagem <ul><li>Bitmap: A imagem é dividida nos pontos de uma matriz. Cada ponto é gravado com seu valor particular de luminosidade e cor formando um mapa (map) dos pontos (bit). Mesmo as áreas sem desenho (fundo) fazem parte do arquivo. </li></ul>
  22. 22. Tipos de Imagem <ul><li>Vetorial : a palavra ‘vetor’ refere-se a uma linha, mas a representação vetorial descreve um desenho como uma serie de linhas e formas. Possui algumas regiões preenchidas com cor sólida ou sombreada. Os arquivos vetoriais podem ser escritos ASCII em um processador de textos . </li></ul>
  23. 23. Tipos de Imagem <ul><li>Bitmap – características : trabalha as imagens com variações complexas de cores, tons ou formas, como fotos ou gravuras ou imagens digitalizadas de vídeo, câmeras fotográficas digitais ou de escaneadas . </li></ul><ul><li>Vetorial – características : trabalha os desenhos em linhas geométricas simples e fórmulas matemáticas. Gráficos e ilustrações a mão livre, imagens em 2D e 3D. O tamanho do arquivo também é menor pois é gravado em ASCII. </li></ul>
  24. 24. Imagem Matricial <ul><li>A imagem Matricial é composta por pontos discretos, os chamados pixels. </li></ul><ul><li>Esses pixels estão dispostos em uma matriz bi-dimensional retangular e formam o que é chamado mapa de bits(bitmap). </li></ul><ul><li>O valor que cada elemento desta matriz contém é a informação (x,y) e cor que ela representa , utilizando para isto um determinado número de bits. </li></ul>A quantidade de bits utilizada para armazenar a informação De cor de um pixel é chamada profundidade da cor
  25. 25. Profundidade de Cor <ul><li>Cada valor de bitmap contém um valor que normalmente representa uma cor. </li></ul><ul><li>Para que um bitmap possa ser interpretado corretamente em diferentes aplicativos, os valores contidos em seus pixels devem seguir padrões definidos. </li></ul>
  26. 26. Tipos de Imagens com relação a profundidade da cor. <ul><li>Imagem bitmap: imagem fotográfica em preto e branco de tom desconhecido. Neste formato cada pixel contém apenas um valor(0) ou um(1). Zero representando um ponto branco, ou incolor, e um representando um ponto preto, ou preenchido. Esta profundida de cor é mais simples e compacta, contudo possui aplicações limitadas por não ser capaz de representar cores. </li></ul><ul><li>Profundidade de cor = 1 bits por pixel </li></ul><ul><li>1 bits por pixel (2 = 2 tons – (preto e branco) </li></ul>1
  27. 27. Tipos de Imagens com relação a profundidade da cor. <ul><li>Bitmap </li></ul>
  28. 28. Tipos de Imagens com relação a profundidade da cor. <ul><li>Imagem escala de cinzas : imagem fotográfica em preto e branco de tom continuo. Neste formato, cada pixel contém apenas um valor entre 0 e 255. 0 representa um ponto branco, e 255 representa um ponto preto. Todos os demais valores entre 1 e 254 representam tons cinza. </li></ul><ul><li>Profundidade da cor: 8 bits por pixel. </li></ul><ul><li>8 bits por pixel (2 = 256 tons de preto e branco). </li></ul>8
  29. 29. Tipos de Imagens com relação a profundidade da cor. <ul><li>Imagem escala Cinza </li></ul>
  30. 30. Tipos de Imagens com relação a profundidade da cor. <ul><li>8 bits indexada : Neste formato, cada pixel contém apenas um valor entre 0 e 255. Cada valor representando um valor na tabela de cores. </li></ul>
  31. 31. Tipos de Imagens com relação a profundidade da cor. <ul><li>Imagem Indexada </li></ul>
  32. 32. Tipos de Imagens com relação a profundidade da cor. <ul><li>Imagens RGB: Neste formato cada pixel contém apenas uma tríade de valores entre 0 e 255. Cada valor da tríade representado, respectivamente, as intensidades das cores vermelho(R), verde(G) e azul(B), que combinadas compõem a cor do pixel. </li></ul><ul><li>Os canais representam a luminosidade, ‘intensidade das luzes’, vermelha, verde e azul respectivamente. </li></ul><ul><li>Profundidade de cor = 24 bits por pixel. </li></ul><ul><li>24 bits por pixel (2 = 16.777.216 cores). </li></ul>24
  33. 33. Tipos de Imagens com relação a profundidade da cor. <ul><li>RGB </li></ul>
  34. 34. Tipos de Imagens com relação a profundidade da cor. <ul><li>RGB </li></ul>
  35. 35. Tipos de Imagens com relação a profundidade da cor <ul><li>Imagens CMYK : conhecidas como imagens de separação de cores, possuem 32 bits de profundidade de cor sendo 8 bits por canal C (cyan), M (magenta), Y(yellow), K (black). Mais utilizadas pela impressão. </li></ul><ul><li>Profundidade de cor = 32 bits por pixdel. </li></ul><ul><li>32 bits por pixel ( 2 ) </li></ul>32
  36. 36. Tipos de Imagens com relação a profundidade da cor
  37. 37. Tipos de Imagens com relação a profundidade da cor
  38. 38. Resolução <ul><li>Um pixel, por si só, não possui nenhuma dimensão especifica. Contudo, ao visualizar, ou imprimir um mapa de bits é preciso dimensioná-lo na área de visualização ou impressão. Para isso utiliza-se o conceito de resolução. </li></ul><ul><li>A resolução de um bitmap é normalmente dada em pixels por polegada, mas também é comum ser especificada em pontos por polegada, ou DPI. </li></ul>
  39. 39. Resolução <ul><li>Exemplo: Se desejar que uma imagem de 600 pixels de largura seja impressa em três polegadas terá 100 dpi. </li></ul><ul><li>Assim, existe proporcionalidade inversa entre as dimensões de uma impressão e a resolução. Aumentando o tamanho da impressão diminui a resolução, e vice versa. </li></ul><ul><li>Obs: a resolução da impressão de uma imagem deveria ser ppi. Mas caiu no uso comum o termo dpi, que serve, a rigor, para medir a resolução da impressoras. </li></ul>
  40. 40. Resolução <ul><li>Para cada sistema de impressão existe uma resolução ideal. </li></ul><ul><li>Resoluções acima dela resultarão arquivos maiores sem ganhos de qualidade, menores resultarão em perda de definição de detalhes e pixelização. </li></ul><ul><li>Resolução ideal para monitores – 72 dpi. </li></ul><ul><li>Resolução ideal para impressão em alta qualidade – 300 dpi </li></ul>
  41. 41. Formato dos arquivos <ul><li>Compressão: Técnica utilizada para reduzir o tamanho do arquivo para facilitar o tamanho e transporte. Existem várias formas, com e sem perda de dados. O JPG usa taxa de compressão variável, desde as que perdas desprezíveis de dados até os que alteram profundamente a imagem, gerando arquivos bem menores. </li></ul><ul><li>BMP(bitmap) – Qualidade original, sem compactação. Arquivo grande. </li></ul>
  42. 42. Formato dos arquivos <ul><li>TIFF(Tagged Image File Format) – Qualidade original, sem compactação ou com compactação reduzida. Arquivo grande. Ideal para imagens fotográficas que necessitam grandes ampliações ou excelente qualidade. </li></ul><ul><li>JPEG ou JPG(Join Photographic Experts Group) – Ótima compactação para fotos e degradês, onde a perda da qualidade passa despercebida em meio a miríade de cores que formam essas imagens. O grau de compactação é regulável. Não é um formato adequado para imagens de precisão ( como logotipos detalhados e brasões ou imagens de textos pequenos) devido a perda de detalhes. </li></ul>
  43. 43. Formato dos arquivos <ul><li>GIF(Graphics Interchange Format) – Não apresenta perda de definição, a não ser de cores, pode ser limitado a um máximo de 256 delas. Seu sistema de compactação descreve bem áreas continuas iguais, o que torna esse formato ideal para desenhos com áreas chapadas. Também é ideal para desenhos onde a precisão de contornos é importante. </li></ul><ul><li>PSD(Photoshop) – Imagem grande, qualidade original. Preserva as camadas e outros elementos adicionados a imagem, pelas ferramentas especificas do programa adobe Photoshop. </li></ul>
  44. 44. Formato dos arquivos <ul><li>EPS(encapsulated Postscript Subset) – imagem grande, qualidade original. Ideal para enviar para as gráficas. </li></ul><ul><li>CDR(Corel Draw) – Imagem Vetorial. </li></ul>
  45. 45. Bibliografia <ul><li>BEAIRD, Jaison. Princípios do Web Design Maravilhoso . São Paulo: Alta Books, 2008. </li></ul><ul><li>ANDERSON, Chris. A cauda longa . Rio de Janeiro: Elsevier, 2006. </li></ul>

×