Novatec Editora
www.novateceditora.com.br
Marcelo Silveira
Formatos de
Arquivos da
Internet
Guia de Consulta Rápida
Guia de Consulta Rápida Formatos de Arquivos da
Internet de Marcelo Silveira
Copyright2002 da Novatec Editora Ltda.
Todos os direitos reservados. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora.
ISBN: 85-7522-017-9
Novatec Editora Ltda.
Rua Cons. Moreira de Barros 1084 Conj. 01 02018-012 São Paulo - SP Brasil
Tel.: (0xx11) 6959-6529 Fax: (0xx11) 6950-8869
E-mail: novatec@novateceditora.com.br Site: www.novateceditora.com.br
Sumário
Sumário
Apresentação ... 5
Introdução aos conteúdos Web ... 6
Arquivos e páginas ... 6 Arquivos HTML ... 6 Imagens ... 6 Outros conteúdos ... 6 Arquivos de documentos ... 7 Conteúdos dinâmicos ... 7
Plug-ins e aplicativos externos ... 8
A especificação MIME ... 9
Conceitos básicos sobre gráficos ... 10
Gráficos bitmap e vetoriais ... 10
Pixel ... 12
Resolução ... 12
Medidas de resolução ... 12
Profundidade de cores ... 13
Cores verdadeiras (true colors) ... 13
Serrilhado (aliasing) ... 14
Pontilhamento (dithering) ... 15
Transparência ... 15
Compressão ... 16
Compressão com e sem perda ... 16
Formatos gráficos para Web ... 17
Formato GIF ... 17
Formato JPEG ... 21
Formato PNG ... 22
Imagens e animações Flash ... 23
Formato IPIX ... 24
Otimização de gráficos para Web ... 25
Usando o software apropriado ... 25
Usando a resolução adequada ... 27
Tamanho da imagem ... 27
Otimização de imagens JPEG ... 28
Otimização de imagens GIF ... 30
Comparação entre os formatos ... 33
Imagens fatiadas ... 34
Conceitos gerais sobre áudio e vídeo ... 36
Taxa de amostragem (sample rate) ... 36
Resolução de áudio ... 36
Canais de áudio ... 36
Compressão ... 37
Compressão com perda ... 37
Streaming e não -streaming ... 37
Formatos streaming ... 38
Player encoder ... 38
Taxa de transferênia (bit rate) ... 39
Ripper ... 39
Lista de reprodução de mídia ... 40
Sumário Formatos de áudio ... 41 Formato WAV ... 41 Formato AIFF ... 42 Formato AU ... 43 Formato MIDI ... 43 Formato MP3 ... 44 Formato MP3Pro ... 45
Windows Media Audio ... 46
Formatos de vídeo ... 47
Formato AVI ... 47
Formato QuickTime ... 48
Formato MPEG ... 48
Windows Media Video ... 50
Formato DivX ... 50
Mídia streaming ... 51
Principais formatos streaming ... 51
Conceitos básicos ... 51
Formato RealMedia ... 54
Formato Windows Media ... 55
Criando conteúdo streaming ... 56
Gravação da mídia original ... 56
Codificando em formato streaming ... 57
Colocando a mídia na Web ... 58
Formatos de documentos ... 61
Documentos em Word ... 61
Documentos em formato RTF ... 61
Documentos em formato PDF ... 62
Livros eletrônicos (eBook) ... 63
Otimização de HTML ... 65
Páginas mais rápidas ... 65
Código mais eficiente ... 66
Código menor ... 67
Otimização para sites de busca ... 69
Tipos de sites e ferramentas de busca ... 69
Catálogos de busca ... 69
Ferramentas automáticas de busca ... 70
A seção HEAD ... 70
As tags META ... 71
Palavras-chave no conteúdo ... 73
Conteúdo gráfico ... 73
Arquitetura com frames ... 74
Conteúdo criado com Flash ... 74
Mapas de imagem ... 75
Links com JavaScript e Java ... 75
Extensões de arquivos ... 76
Apresentação
Apresentação
Este livro oferece uma ótima fonte de consulta sobre arquivos usados na Internet, bem como quais programas usar para abrir, criar e editar esses arquivos.
Além de servir de referência para uma grande variedade de formatos de arquivos, também é uma fonte de informações mais aprofundadas sobre otimização de arquivos mais utilizados na criação de websites. O livro está dividido em duas partes:
Formatos e otimização de arquivos
Com as dicas de otimização de arquivos, o desenvolvedor de websites poderá criar soluções mais otimizadas para seu site, como:
• Criar gráficos de boa qualidade com carregamento mais rápido;
• Gerar e incluir conteúdo multimídia em uma página;
• Otimização de HTML para páginas mais rápidas e eficientes;
• Dicas de design e conteúdo para obter melhor classificação em sites de busca.
Extensões de arquivos
Enquanto você navega pela Web, encontrará diferentes tipos de arquivos. Você pode identificar o formato de um arquivo olhando a sua extensão, que é usualmente expressa como um ponto seguido por 2, 3 ou 4 letras. Por que você deveria se preocupar?
Você precisa ser capaz de identificar os tipos de arquivos para conhecer:
• Seu conteúdo.
• Se eles poderão trabalhar em seu computador. • Se eles precisam de um tipo específico de software
para abrir, descompactar, tocar ou visualizar o arquivo.
Introdução aos conteúdos Web
Este capítulo mostra os conceitos mais básicos sobre arquivos e páginas de websites.
Arquivos e páginas
Uma página pode conter as tags HTML, textos, imagens, animações, multimídia e scripts, ou seja, trechos de programas.
Quando você cria uma página, na verdade está lidando com vários arquivos. Por exemplo, uma página com texto e uma figura são compostas de pelo menos dois arquivos: o arquivo com texto e código HTML e o arquivo com a figura. Quando a página é exibida no browser, você a enxerga como um único documento, mas ele pode conter referências a dezenas de arquivos diferentes.
Arquivos HTML
Um documento HTML é um arquivo de texto contendo tags de marcação que informam ao browser como exibir a página.
HTML é a sigla de Hyper Text Markup Language (linguagem de marcação de hipertexto), a linguagem usada para criar páginas web.
Um arquivo HTML tem de ter a extensão .htm ou .html e pode ser criado com um editor de texto ou com um editor HTML.
Imagens
Um site simples, em geral, contém os arquivos HTML e arquivos de imagens nos formatos JPEG e GIF, os dois formatos gráficos que podem ser visualizados por qualquer tipo de navegador.
Outros conteúdos
Sites mais complexos podem conter arquivos com estilos CSS, animações criadas em Flash, arquivos de som e vídeo em diferentes formatos, aplicativos Java etc.
Introdução Introdução
Arquivos de documentos
Além dos arquivos que podem ser exibidos no próprio navegador, um site pode ter links para outros tipos de arquivos que podem ser baixados para o computador do usuário, como arquivos de documentos formatados em PDF, arquivos comprimidos em formato ZIP, livros eletrônicos (eBooks) etc.
Conteúdos dinâmicos
Sites com conteúdo dinâmico possuem links para arquivos que não são exibidos diretamentes no navegador, mas que executam um programa no servidor. Esse programa, então, gera uma página que será enviada para o navegador.
As informações dinâmicas geralmente são mantidas em bancos de dados e manipuladas por aplicações criadas especificamente para obter esses dados e colocá-los em formato utilizável por um browser que os exibe em HTML.
Arquivos com as extensões .PHP. .PL, .ASP, .CGI, por exemplo, indicam a execução de alguma aplicação no servidor que resultará em uma página em HTML para o navegador.
As informações formatadas em HTML são fornecidas por programas executados no servidor e podem usar vários tipos de tecnologias e linguagens. Algumas das tecnologias mais amplamente usadas para criar páginas dinâmicas são ASP, JSP, PHP e Perl.
Introdução Introdução
Plug-ins e aplicativos externos
Qualquer arquivo pode ser colocado como um link dentro de um arquivo HTML, mas o que o browser faz quando o link for clicado será diferente conforme o tipo de arquivo.
A extensão usada no arquivo indica ao navegador o que ele deve fazer. Se o navegador não puder abrir determinado arquivo, ele usará um plug-in ou um aplicativo externo.
Por exemplo, um arquivo de música em formato RealAudio não pode ser aberto diretamente no browser e precisa de um programa chamado RealPlayer, um
aplicativo externo.
Um plug-in é um aplicativo que pode estar incorporado ao navegador de forma a abrir determinado tipo de arquivo dentro da própria página.
Por exemplo, os navegadores de última geração já possuem um plug-in embutido que abre arquivos Flash. Os navegadores mais antigos precisavam de um aplicativo Flash Player que devia ser baixado e instalado separadamente.
Se um arquivo não puder ser aberto, o navegador perguntará se o usuário deseja fazer o download deste arquivo. Em geral, mesmo que o arquivo possa ser aberto por um aplicativo externo, o navegador pergunta se o arquivo deve ser aberto ou se deve fazer o download desse arquivo.
A padronização das extensões para a Internet, que indica o tipo de cada arquivo para o browser, é conhecido como MIME (Multipurpose Internet Mail Extensions).
A especificação MIME
MIME é a abreviação de Multipurpose Internet Mail Extensions, que é uma especificação de mensagens e arquivos em formatos não-ASCII, definida pela entidade Internet Engineering Task Force para a transmissão de arquivos gráficos, áudio e vídeo etc. na Internet. O MIME também prevê suporte para outros conjuntos de caracteres diferentes do ASCII. Com raríssimas exceções, todos os navegadores e programas de e-mail têm suporte aos tipos MIME, de forma que podem exibir outros arquivos que não estejam no formato HTML.
Existem muitos tipos MIME predefinidos, mostrados na tabela a seguir, mas também é possível que outros tipos sejam definidos.
Tipo MIME Extensão image/gif .gif
image/jpeg .jpeg, .jpg, .jpe image/pict .pic, .pict image/tiff .tif, .tiff image/x-xbitmap .xbm audio/basic .au, .snd audio/aiff .aif, .aiff audio/x-wav .wav video/quicktime .qt, .mov video/mpeg .mpg, .mpeg, .mpe video/x-msvideo .avi
application/mac-binhex40 .hqx application/x-stuffit .sit application/x-macbinary .bin application/octet-stream .exe application/postscript .ai, .eps, .ps application/rtf .rtf
application/x-compressed .zip, .zip, .gz, .tgz application/x-tar .tar
Conceitos básicos sobre gráficos
Este capítulo apresenta os conceitos mais importantes sobre gráficos. A sua compreensão é fundamental para entender as características específicas a cada formato e a melhor maneira de otimizar o tamanho e a qualidade dos gráficos.
Gráficos bitmap e vetoriais
Os gráficos bitmap e vetoriais são os dois tipos principais de categorias de imagens de computador. Entender as suas diferenças e as suas diversas aplicações é fundamental em qualquer trabalho que exige a criação de imagens.
Imagens bitmap
Uma imagem bitmap consiste de uma reunião de pequenos quadrados chamados de pixel ou ponto. Por exemplo, uma imagem bitmap de um círculo vermelho é a reunião de pequenos pontos agrupados no formato de um círculo, que, impressos ou exibidos na tela, dão a impressão visual de formar um círculo perfeito. Imagens vetoriais
Uma imagem vetorial consiste de fórmulas matemáticas que definem as linhas, curvas e todas as formas da imagem. Por exemplo, um círculo é representado internamente por um raio de determinado tamanho localizado em uma determinada posição.
Redimensionamento de imagens
As imagens vetoriais são mais flexíveis que as imagens bitmap porque elas mantêm a mesma qualidade quando transformadas em diferentes tamanhos. As imagens bitmap, quando aumentadas ou diminuídas, tendem a ficar com pontos distorcidos nas bordas das imagens, dando um efeito de serrilhado ("escadinha" de pixels).
A figura a seguir mostra uma imagem bitmap redimensionada no Paint do Windows.
Compare com uma imagem vetorial redimensionada no CorelDraw.
Imagens na tela
As imagens na tela de um computador ou em uma impressora são criadas como uma grade de pontos; então, tanto as imagens vetoriais como as imagens bitmap aparecem como um conjunto de pontos. As imagens vetoriais diferem na maneira como são armazenadas e tratadas pelo programa.
Pixel
Pixel, redução de picture element (elemento de imagem), é um único ponto em uma imagem. Os monitores de vídeo exibem imagens dividindo a tela em milhares ou milhões de pixels ordenados em linhas e colunas.
O número de bits usados para representar cada pixel determina quantas cores podem ser exibidas. Cada pixel na tela é composto pela combinação de três cores: vermelho, azul e verde, resultando no sistema de cores RGB (red, green, blue).
Resolução
A densidade dos pixels, ou seja, a quantidade de pontos em um determinado comprimento, é a resolução. Ela determina o quão detalhadamente a imagem é representada, sua clareza e qualidade.
Medidas de resolução
A resolução pode ser expressa em pontos por polegada ou dpi (dots per inch) para as impressoras ou pelo número de linhas e colunas que compõem a imagem, por exemplo 640x480 ou 800x600 para os monitores de vídeo.
A resolução de vídeo pode ser traduzida para dpi, mas depende do tamanho da tela. Por exemplo, um monitor de 15 polegadas com resolução de 800 x 600 resulta em cerca de 70 dpi.
As resoluções típicas de impressoras são 300, 600 ou 1200 dpi.
Observe que uma boa imagem na tela necessita de uma resolução bem menor que uma imagem impressa porque o efeito visual dos pontos iluminados (pixels) é diferente dos pontos impressos.
Essa característica determina um importante ponto a ser levado em consideração na utilização de imagens para a Web, cujos detalhes serão abordados no capítulo sobre a otimização de gráficos para a Web.
Profundidade de cores
A cor de cada ponto é armazenada com um ou mais bits. Assim, o número de bits usados para as cores determina o número de cores e tons de cinza que podem ser representados.
A profundidade ou número de cores de uma imagem (em inglês, color depth ou bit depth) determina a quantidade de bits necessários para armazená-la. Uma imagem em preto-e-branco, sem tons de cinza, precisa de apenas um bit para informar se um pixel é preto ou branco (um bit pode ter o valor 0 ou 1).
Uma imagem com 256 cores precisará de 8 bits para cada pixel, pois são necessários oito bits para representar 256 números diferentes em formato binário. Por essa razão, o tipo de imagem e como esta será empregada é importante para determinar o número ou a profundidade de cores.
Cores verdadeiras (true colors)
Uma imagem de vídeo ou fotografia com o que se convencionou chamar de cores verdadeiras (true
colors) precisará de 24 bits para cada pixel no monitor,
que permitem representar mais de 16 milhões de cores.
Serrilhado (aliasing)
Serrilhado ou aliasing é o processo pelo qual as curvas e linhas inclinadas de uma imagem ficam serrilhadas (linhas com pontas agudas em formato de escada) porque a resolução não é suficiente para representar uma curva perfeita e suave.
Praticamente todos os editores de imagens possuem técnicas para suavizar o serrilhado (antialiasing). O efeito antialiasing reduz as serrilhas colocando diferentes tons de cor ou de cinza na transição de uma cor para outra. A figura a seguir mostra uma transição sem antialiasing à esquerda e outra com o antialiasing à direita.
Pontilhamento (dithering)
Pontilhamento ou dithering é o efeito que cria a ilusão de novas cores e sombras variando os padrões de pontos. Os diferentes tons de cinza de uma fotografia de jornal, por exemplo, são criados por padrões de pontos em preto-e-branco diferentes. Na verdade não existe uma tinta cinza impressa, mas apenas a ilusão visual.
Quando um monitor não consegue representar uma cor na tela, ele a representa de maneira aproximada com o pontilhamento, apresentando imagens de menor qualidade.
Transparência
Imagens transparentes permitem a definição de uma cor qualquer como sendo transparente. Assim, quando a imagem fica sobre uma página com um fundo colorido, por exemplo, a cor de baixo é visualizada no local da cor tornada transparente.
A definição de transparência para uma parte de uma imagem é suportada em dois tipos de formatos gráficos: GIF e PNG. O formato JPEG não permite transparência. A necessidade de usar imagens transparentes define, então, o tipo de imagem que deverá ser usada. Veja maiores detalhes no capítulo correspondente aos formatos gráficos para a Web.
