ferramentas web aula02

Design GráficoDisciplina: Ferramentas Para WEB

Professor: Anderson Maia

Tecnologo.maia@gmail.com

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

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:4. 1.024 bytes = 1 Kb (kilobyte)5. 1.024 Kb = 1MB (megabyte)6. 1024 Mb = 1 Gb (gigabyte)7. 1024 Gb = 1 Tb ( terabyte)

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.

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

Sistemas de Numeração

• Representação nas bases• 1011012 - 101101 na base 2 (binária)

• 7528 - 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: 65110

• 42316 - 423 na base 16 (hexadecimal)

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 103 + 4 X 102 + 8 X 101 + 4 X 100

• Representação em polinômio genérico• Número = dn10n + dn-110n-1 + ... d1101 + d0100

Sistemas de Numeração

• Representação de binário na base 10 • 11010012

• 11010012 = 1 x 26 + 1 x 25 + 0 x 24 + 1 x 23 + 0 x 22 + 0 x 21 + 1 x 20

• 11010012 = 64 + 32 + 0 + 8 + 0 + 0 + 1

• 11010012 = 10510

• Representação em polinômio genérico• Número = bn2n + bn-12n-1 + ... b121 + b020

Sistemas de Numeração

• Representação de octal na base 10 • 546218

• 546218 = 5 x 84 + 4 x 83 + 6 x 82 + 2 x 81 + 1 x 80

• 546218 = 20480 + 2048 + 384 + 16 + 1

• 546218 = 2292910

• Representação em polinômio genérico• Número = on8n + on-18n-1 + ... o181 + o080

Sistemas de Numeração

• Representação de hexadecimal na base 10 • 3974116

• 3974116 = 3 x 164 + 9 x 163 + 7 x 162 + 4 x 161 + 1 x 160

• 3974116 = 196608 + 36864 + 1792 + 64 + 1

• 3974116 = 23532910

• Representação em polinômio genérico• Número = hn16n + hn-116n-1 + ... h1161 + h0160

Sistemas de Numeração• Mudança da base 10 para binário

• 714714 |_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

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 = 10110010102

Sistemas de Numeração

• Mudança da base 10 para octal • 714

714 |_8_ 2 89 |_8_ 1 11 |_8_ 3 1

714 = 13128

Sistemas de Numeração

• Mudança da base 10 para hexadecimal • 714

714 |_16_ 10 44 |_16_ 12 2

714 = 2CA16

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

Sistemas de Numeração

• Mudança da base binária para decimal (10) 10110010102

0 x 20 = 0 1 x 21 = 2 0 x 22 = 0 1 x 23 = 8 0 x 24 = 0 0 x 25 = 0 1 x 26 = 64 1 x 27 = 128 0 x 28 = 0 1 x 29 = 512

= 0+2+0+8+0+0+64+128+0+512 = 714

Sistemas de Numeração

• Mudança da base octal para decimal (10) 13128

2 x 80 = 2

1 x 81 = 8 3 x 82 = 192 1 x 83 = 512

= 2+8+192+512 = 714

Sistemas de Numeração

• Mudança da base hexadecimal para decimal 2CA16

A x 160 = 10 x 160 = 10

C x 161 = 12 x 161 = 192 2 x 162 = 512

= 10+192+512 = 714

Exercício

• 1. Converter para a base decimal os seguintes números:a) 1010102b)10103c) 10214d) 10256e) 21658f) 1FA216g) E1A16h) 7078

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.

Imagens em Computação

• Pixel: 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"

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.

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.

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.

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çãoDe cor de um pixel é chamada profundidade da cor

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.

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

Tipos de Imagens com relação a profundidade da cor.

• Bitmap

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

Tipos de Imagens com relação a profundidade da cor.

• Imagem escala Cinza

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.

Tipos de Imagens com relação a profundidade da cor.

• Imagem Indexada

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

Tipos de Imagens com relação a profundidade da cor.

• RGB

Tipos de Imagens com relação a profundidade da cor.

• RGB

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

Tipos de Imagens com relação a profundidade da cor

Tipos de Imagens com relação a profundidade da cor

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.

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.

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

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.

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.

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.

Formato dos arquivos

• EPS(encapsulated Postscript Subset) – imagem grande, qualidade original. Ideal para enviar para as gráficas.

• CDR(Corel Draw) – Imagem Vetorial.

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.