Ferramentas web aula02
Transferir como PPT, PDF1 gostou580 visualizações
O documento discute conceitos básicos de sistemas de numeração digitais, incluindo binário, byte e conversão entre bases numéricas. Explica como imagens digitais são representadas por pixels em uma matriz e diferentes formatos de arquivo de imagem.
![Design Gráfico Disciplina: Ferramentas Para WEB Professor: Anderson Maia [email_address]](https://image.slidesharecdn.com/ferramentaswebaula02-120206215217-phpapp01/85/Ferramentas-web-aula02-1-320.jpg)
Ferramentas web aula02
- 1. Design Gráfico Disciplina: Ferramentas Para WEB Professor: Anderson Maia [email_address]
- 2. Conceitos Básicos Digital: Sistema no qual a informação é processada em forma numérica, utilizando um sistema binário. 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). Sistema Decimal: 1 2 3 4 5 6 7 8 9 10 Sistema Binário: 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010
- 3. Sistemas de Numeração Bit – menor partícula de informação no computador, pode representar 0 ou 1. Esses dois símbolos são opostos e mutuamente exclusivos. Byte – conjunto de 8 bits. Os Múltiplos do Byte são: 1.024 bytes = 1 Kb (kilobyte) 1.024 Kb = 1MB (megabyte) 1024 Mb = 1 Gb (gigabyte) 1024 Gb = 1 Tb ( terabyte)
- 4. Sistemas de Numeração Existiram e existem diversos sistemas de numeração. No computador, serve para questões de endereçamento, armazenamento, conteúdo de tabelas e representações gráficas. Bases diferentes usadas nos mais diversos computadores.
- 5. Sistemas de Numeração Bases Binária 0, 1 Octal 0, 1, 2, 3, 4, 5, 6, 7 Decimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 Hexadecimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
- 6. Sistemas de Numeração Representação nas bases 101101 2 - 101101 na base 2 (binária) 752 8 - 752 na base 8 (octal) 651 - 651 na base 10 (decimal) Quando não é indicada a base, a base é decimal. Mas poderia ser representado assim: 651 10 423 16 - 423 na base 16 (hexadecimal)
- 7. Sistemas de Numeração Representação nas bases – Base decimal 7484 7484 = 7 x 1000 + 4 x 100 + 8 x 10 + 4 7484 = 7 X 10 3 + 4 X 10 2 + 8 X 10 1 + 4 X 10 0 Representação em polinômio genérico Número = d n 10 n + d n-1 10 n-1 + ... d 1 10 1 + d 0 10 0
- 8. Sistemas de Numeração Representação de binário na base 10 1101001 2 1101001 2 = 1 x 2 6 + 1 x 2 5 + 0 x 2 4 + 1 x 2 3 + 0 x 2 2 + 0 x 2 1 + 1 x 2 0 1101001 2 = 64 + 32 + 0 + 8 + 0 + 0 + 1 1101001 2 = 105 10 Representação em polinômio genérico Número = b n 2 n + b n-1 2 n-1 + ... b 1 2 1 + b 0 2 0
- 9. Sistemas de Numeração Representação de octal na base 10 54621 8 54621 8 = 5 x 8 4 + 4 x 8 3 + 6 x 8 2 + 2 x 8 1 + 1 x 8 0 54621 8 = 20480 + 2048 + 384 + 16 + 1 54621 8 = 22929 10 Representação em polinômio genérico Número = o n 8 n + o n-1 8 n-1 + ... o 1 8 1 + o 0 8 0
- 10. Sistemas de Numeração Representação de hexadecimal na base 10 39741 16 39741 16 = 3 x 16 4 + 9 x 16 3 + 7 x 16 2 + 4 x 16 1 + 1 x 16 0 39741 16 = 196608 + 36864 + 1792 + 64 + 1 39741 16 = 235329 10 Representação em polinômio genérico Número = h n 16 n + h n-1 16 n-1 + ... h 1 16 1 + h 0 16 0
- 11. Sistemas de Numeração Mudança da base 10 para binário 714 714 | _2_ 0 357 | _2_ 1 178 | _2_ 0 89 | _2_ 1 44 | _2_ 0 22 | _2_ 0 11 | _2_ 1 5 | _2_ 1 2 | _2_ 0 1
- 12. Sistemas de Numeração Mudança da base 10 para binário 714 714 | _2_ 0 357 | _2_ 1 178 | _2_ 0 89 | _2_ 1 44 | _2_ 0 22 | _2_ 0 11 | _2_ 1 5 | _2_ 1 2 | _2_ 0 1 714 = 1011001010 2
- 13. Sistemas de Numeração Mudança da base 10 para octal 714 714 | _8_ 2 89 | _8_ 1 11 | _8_ 3 1 714 = 1312 8
- 14. Sistemas de Numeração Mudança da base 10 para hexadecimal 714 714 | _16_ 10 44 | _16_ 12 2 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. Sistemas de Numeração Mudança da base binária para decimal (10) 1011001010 2 0 x 2 0 = 0 1 x 2 1 = 2 0 x 2 2 = 0 1 x 2 3 = 8 0 x 2 4 = 0 0 x 2 5 = 0 1 x 2 6 = 64 1 x 2 7 = 128 0 x 2 8 = 0 1 x 2 9 = 512 = 0+2+0+8+0+0+64+128+0+512 = 714
- 16. Sistemas de Numeração Mudança da base octal para decimal (10) 1312 8 2 x 8 0 = 2 1 x 8 1 = 8 3 x 8 2 = 192 1 x 8 3 = 512 = 2+8+192+512 = 714
- 17. Sistemas de Numeração Mudança da base hexadecimal para decimal 2CA 16 A x 16 0 = 10 x 16 0 = 10 C x 16 1 = 12 x 16 1 = 192 2 x 16 2 = 512 = 10+192+512 = 714
- 18. Exercício 1. Converter para a base decimal os seguintes números: a) 1010102 b)10103 c) 10214 d) 10256 e) 21658 f) 1FA216 g) E1A16 h) 7078
- 19. Imagens em Computação Imagens Matriciais/ Mapa de bits: imagens onde são guardadas informações de cada ponto que constitui a imagem. Exemplos de programas que trabalham com imagens vetoriais.
- 20. Imagens em Computação Pixe l: Menor elemento que constitui a imagem. O ‘grão’ da imagem digital . 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 "um para um" 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 "bitmap"
- 21. Tipos de Imagem 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.
- 22. Tipos de Imagem 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 .
- 23. Tipos de Imagem 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 . 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.
- 24. Imagem Matricial A imagem Matricial é composta por pontos discretos, os chamados pixels. Esses pixels estão dispostos em uma matriz bi-dimensional retangular e formam o que é chamado mapa de bits(bitmap). 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. A quantidade de bits utilizada para armazenar a informação De cor de um pixel é chamada profundidade da cor
- 25. Profundidade de Cor Cada valor de bitmap contém um valor que normalmente representa uma cor. Para que um bitmap possa ser interpretado corretamente em diferentes aplicativos, os valores contidos em seus pixels devem seguir padrões definidos.
- 26. Tipos de Imagens com relação a profundidade da cor. 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. Profundidade de cor = 1 bits por pixel 1 bits por pixel (2 = 2 tons – (preto e branco) 1
- 27. Tipos de Imagens com relação a profundidade da cor. Bitmap
- 28. Tipos de Imagens com relação a profundidade da cor. 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. Profundidade da cor: 8 bits por pixel. 8 bits por pixel (2 = 256 tons de preto e branco). 8
- 29. Tipos de Imagens com relação a profundidade da cor. Imagem escala Cinza
- 30. Tipos de Imagens com relação a profundidade da cor. 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.
- 31. Tipos de Imagens com relação a profundidade da cor. Imagem Indexada
- 32. Tipos de Imagens com relação a profundidade da cor. 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. Os canais representam a luminosidade, ‘intensidade das luzes’, vermelha, verde e azul respectivamente. Profundidade de cor = 24 bits por pixel. 24 bits por pixel (2 = 16.777.216 cores). 24
- 33. Tipos de Imagens com relação a profundidade da cor. RGB
- 34. Tipos de Imagens com relação a profundidade da cor. RGB
- 35. Tipos de Imagens com relação a profundidade da cor 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. Profundidade de cor = 32 bits por pixdel. 32 bits por pixel ( 2 ) 32
- 36. Tipos de Imagens com relação a profundidade da cor
- 37. Tipos de Imagens com relação a profundidade da cor
- 38. Resolução 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. A resolução de um bitmap é normalmente dada em pixels por polegada, mas também é comum ser especificada em pontos por polegada, ou DPI.
- 39. Resolução Exemplo: Se desejar que uma imagem de 600 pixels de largura seja impressa em três polegadas terá 100 dpi. 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. 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.
- 40. Resolução Para cada sistema de impressão existe uma resolução ideal. 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. Resolução ideal para monitores – 72 dpi. Resolução ideal para impressão em alta qualidade – 300 dpi
- 41. Formato dos arquivos 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. BMP(bitmap) – Qualidade original, sem compactação. Arquivo grande.
- 42. Formato dos arquivos 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. 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.
- 43. Formato dos arquivos 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. PSD(Photoshop) – Imagem grande, qualidade original. Preserva as camadas e outros elementos adicionados a imagem, pelas ferramentas especificas do programa adobe Photoshop.
- 44. Formato dos arquivos EPS(encapsulated Postscript Subset) – imagem grande, qualidade original. Ideal para enviar para as gráficas. CDR(Corel Draw) – Imagem Vetorial.
- 45. Bibliografia BEAIRD, Jaison. Princípios do Web Design Maravilhoso . São Paulo: Alta Books, 2008. ANDERSON, Chris. A cauda longa . Rio de Janeiro: Elsevier, 2006.