Alex Coelho SISTEMA DE AUXÍLIO À LOCALIZAÇÃO NO CEULP/ULBRA UTILIZANDO IMAGENS VETORIAIS SCALABLE VECTOR GRAPHICS

Transcrição

1 Alex Coelho SISTEMA DE AUXÍLIO À LOCALIZAÇÃO NO CEULP/ULBRA UTILIZANDO IMAGENS VETORIAIS SCALABLE VECTOR GRAPHICS Palmas 2004

2 Alex Coelho SISTEMA DE AUXÍLIO A LOCALIZAÇÃO NO CEULP/ULBRA UTILIZANDO IMAGENS VETORIAIS SCALABLE VECTOR GRAPHICS "Trabalho de Estágio apresentado como requisito parcial da disciplina Prática de Sistemas de Informação I do curso de Sistemas de Informação, orientado pelo Prof. M.Sc. Fabiano Fagundes" Palmas 2004

3 ALEX COELHO SISTEMA DE AUXÍLIO À LOCALIZAÇÃO NO CEULP/ULBRA UTILIZANDO IMAGENS VETORIAIS SCALABLE VECTOR GRAPHICS Trabalho de Estágio apresentado como requisito parcial da disciplina Prática de Sistemas de Informação I do curso de Sistemas de Informação, orientado pelo Prof. M.Sc. Fabiano Fagundes BANCA EXAMINADORA Prof. M.Sc Fabiano Fagundes Centro Universitário Luterano de Palmas Prof. M.Sc Eduardo Leal Centro Universitário Luterano de Palmas Prof. Jackson Gomes de Sousa Centro Universitário Luterano de Palmas Palmas 2004

4 AGRADECIMENTOS A minha mãe, Leonidia Batista Coelho, meu pai, Antiste Alexandre Coelho, meu irmão e minhas irmãs, já que sem a ajuda e compreensão deles nada disto seria possível. A minha namorada Fernanda, por estar sempre ao meu lado nos momentos bons e ruins, sendo um porto seguro nas situações mais difíceis. A meus amigos Carlos Henrique e Vinícius (Janaúba), que colaboraram para que este trabalho fosse concluído. A todos os professores que sempre se mostraram atenciosos e compreensivos, principalmente ao meu orientador, professor e amigo Fabiano Fagundes que sempre me ajudou e se dedicou para a realização deste trabalho. E a Deus, que sempre está presente em tudo e em todos os momentos da minha vida, e sem Ele nada seria possível.

5 SUMÁRIO 1 Introdução Revisão de literatura MAPAS E PLANTAS VIRTUAIS PADRÕES GRÁFICOS Imagens bitmap Desenhos vetoriais FORMATOS BITMAP GIF (Graphic Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) FORMATOS VETORIAIS SWF (Shockwave Flash) PDF (Portable Document Format) SVG (SCALABLE VECTOR LANGUAGE) XML (Extensible Markup Language) Elementos geométricos SVG e linguagens scripts SVG e banco de dados Comparativo entre os formatos vetoriais SCRIPT ECMAScript JavaScript ASP (ACTIVE SERVER PAGES) ADO (ACTIVEX DATABASE OBJECTS) Material e métodos LOCAL E PERÍODO MATERIAIS METODOLOGIA...45

6 4 Resultados e discussão Storyboard IMPLEMENTAÇÃO Vantagens Desvantagens CONCLUSÕES Referências bibliográficas...63

7 LISTA DE FIGURAS Figura 1 Imagem que utiliza mapas de bits...13 Figura 2 Imagem que utiliza a idéia de vetores Figura 3 Exemplo da árvore de codificação de Huffman (WILLRICH, 2004)...20 Figura 4 Decodificação utilizando algoritmo de LZ Figura 5 Tag de um arquivo SWF...23 Figura 6 Exemplo de uma DTD com quatro elementos e um atributo Figura 7 Exemplo de um documento XML - estrutura em forma de árvore...27 Figura 9 Declaração de uma linha utilizando o elemento path Figura 10 Declaração de um elemento circle utilizando estilos...30 Figura 11 Elemento text utilizando estilo...31 Figura 12 Utilização dos elementos image e animate Figura 13 Elementos group, symbol, def...33 Figura 14 - Imagem SVG que sofre alterações dinamicamente Figura 15 - Código da Imagem SVG em XML com script...35 Figura 16 - DTD que valida a utilização de elementos scrips em imagens SVG...36 Figura 17 Função Hello World em ECMAScript...38 Figura 18 - Função Hello World em JavaScript Figura 19 - Esquema de processamento de uma página ASP Figura 20 - Imagem criada dinamicamente através de um arquivo ASP...40 Figura 21 - Imagem criada dinamicamente através de um arquivo ASP...41 Figura 22 - Conexão ASP a um BD utilizando ADO...43 Figura 23 Script para transição entre elementos na imagem...50 Figura 24 Código script que altera o atributo visibility...52 Figura 25 Inserção do atributo tranform em um objeto através de script Figura 26 Inserção de métodos em elementos...53 Figura 27 Reutilização de código com o elemento use...54 Figura 28 Utilização do elemento animate na animação de um elemento do sistema..55 Figura 29 Criação dos caminhos com o elemento animatemotion e script Figura 31 Função realiza a autenticação do usuário....59

8 Figura 32 Criação dos gráficos do sistema...60 Figura 33 Determinado valores para os elementos dos gráficos....60

9 LISTA DE TABELAS Tabela 1 Demonstrativo de cores proporcional à quantidade de bits...14 Tabela 2- Comparativo entre os tamanhos de arquivo para diferentes formatos...25

10 LISTA DE ABREVIAÇÕES SVG Scalable Vector Graphics XML Extensible Markup Language ASP Active Server Page ADO Active Data Object IE Internet Explorer GIF Graphic Interchange Format JPEG Joint Photographic Experts Group PNG Portable Network Graphics PDF Portable Document Format SWF Shockwave Flash CSS Cascading Style Sheet DTD Document Type Definitions LZ77 Lempel-Ziv 77 LZW Lempel-Ziv-Welsh Pixel Picture element DPI Dots per inche CMYK Cyan, Magenta, Yellow, Black RBG Red, Blue, Green DIG Digital Imaging Group SGML Standard Generalized Markup Language RDF Resouce Description Framework HTML HyperText Markup Language W3C World Wide Web Consortium COM Componente Object Model

11 RESUMO Este trabalho tem como objetivo auxiliar visitantes, alunos, usuários, professores e funcionários do CEULP/ULBRA a localizarem setores e departamentos nas instalações físicas do Centro Universitário Luterano de Palmas, bem como chegar ao campus. Além disto, o sistema fornecerá estatísticas sobre as consultas ao mapa, que serão armazenadas em um banco de dados. Para tanto será utilizada a tecnologia de imagens vetoriais SVG (Scalable Vector Language), bem como a utilização de linguagens scripts Client e Server- Side. Palavras chave: SVG, Web, XML, Imagens vetoriais.

12 ABSTRACT This work presents an tool to help visitors, students, users and teachers of CEULP/ULBRA to find sectors and departments on phisical space of Palmas Lutheran Universitary Center, as well to access the campus. Futhermore, the system will provide statistics data about all realized queries, that will be stored on a data base. To this tasks this work porposes the utilization of SVG vector images and script-client/server-side script languages. Keywords: SVG, Web, XML, Imagens vetoriais.

13 10 1 INTRODUÇÃO A velocidade com que a evolução tecnológica tem acontecido abriu portas para pesquisas em novas áreas que trabalham com exposição da informação. Estas variam desde simples páginas Web a sistemas de pesquisa laboratorial com fórmulas complexas e assim por diante. Dentre estas áreas uma das que mais tem se desenvolvido e chamado a atenção são os sistemas geográficos, também conhecidos como mapas virtuais, que auxiliam na localização se preocupando com o conteúdo e forma de apresentação da informação. O trabalho aqui proposto consiste na criação de imagens SVG (Scalable Vector Graphics) para auxílio à localização de visitantes, funcionários, acadêmicos e professores nas instalações do CEULP/ULBRA, bem como um auxílio à localização da instituição em um mapa da cidade de Palmas. Em paralelo a este sistema, será trabalhado um protótipo de um sistema de ClickStream Analysis cujo objetivo é proporcionar à aplicação uma base de dados com a descrição das interações estabelecidas pelos usuários, bem como dos dados referentes às visualizações disponibilizadas. Estes dados servirão de base para a construção de gráficos estatísticos que estarão presentes no sistema, utilizando-se da linguagem ASP (Active Server Pages) para o registro das interações do usuário com o sistema em um banco de dados, utilizando para isto conexões ADO (ActiveX Database Objects). Deve-se mencionar que todas as telas (imagens), formulários, e gráficos contidos no sistema serão desenvolvidos em SVG é a utilização de objetos HTML (Hyper Text Markup Language) somente ocorrerá para garantir uma interface mais amigável facilitando a interação com os usuários.

14 11 Na revisão de literatura estão descritos tópicos como: imagens bitmap, desenhos vetoriais, formatos disponíveis na Web para ambos, além de uma comparação entre os padrões. Descrevem-se ainda as linguagens scripts, que podem ser utilizadas para a criação de elementos básicos de imagens ou mesmo animações nas imagens SVG. Outro ponto a ser destacado é a interação da imagem SVG com bancos de dados através da utilização de linguagens script server-side. O trabalho destaca na seção de implementação alguns pontos interessantes encontrados durante o desenvolvimento da aplicação, expondo as vantagens e desvantagens do formato SVG perante outras tecnologias que também são citadas no trabalho. O trabalho se encerra com a conclusão e a apresentação das referências utilizadas para a realização deste.

15 12 2 REVISÃO DE LITERATURA Nos tópicos a seguir são apresentados os temas estudados para a construção do sistema de auxílio a localização, bem como a descrição de padrões e formatos de imagens, além de outras tecnologias auxiliares à implementação da aplicação. 2.1 Mapas e Plantas Virtuais Entende-se por mapa ou planta virtual tudo aquilo que a partir de algum dispositivo eletrônico demonstre algo ou alguma coisa de forma coesa e esclarecedora a quem for repassada a informação visual; estes, por sua vez, também são conhecidos como sistemas de informação geográfica (RAWAT et al, 2001). Com o surgimento de tecnologias de baixo custo, de computadores de alta capacidade e da internet, cada vez mais recursos são focados na criação de mapas e plantas virtuais. Estes mapas muitas vezes estão disponíveis na internet e são de fácil acesso. Isso fez com que a computação colaborasse expressivamente para o surgimento de diferentes tecnologias que contribuem para a interação entre o homem e o computador. Mapas e plantas virtuais geralmente são desenvolvidos em formatos gráficos utilizados para criação ou manipulação de imagens. Neste contexto, imagens vetoriais possuem vantagens sobre outros formatos como, por exemplo, a utilização de atributos ou coordenadas X e Y, o que caracteriza uma imagem vetorial 2D (PEARLMAN & HOUSE, 2003). Isto abre espaço para a utilização em maior escala de imagens vetoriais na construção e implementação de sistemas de informações geográficas. Entre as diversas

16 13 formas de apresentação de mapas e plantas virtuais, certamente as que mais chamam a atenção são as que possuem animação, já que o movimento é uma forma diferenciada de se dirigir ao público alvo. Tais tecnologias estão presentes em áreas comuns como: sistemas de informação, interface homem-computador, multimídia e hipermídia. Nas próximas seções são abordados alguns padrões de imagens geralmente utilizadas na Web. 2.2 Padrões Gráficos Imagens bitmap Os formatos de imagens mais encontrados na Web, como GIF, JPG e PNG consistem em bitmaps, também chamados rasters graphics (EISENBERG, 2003). Um bitmap consiste basicamente em uma coleção de pixels picture element que é a unidade de medida da quantidade de pontos que o olho humano pode distinguir em uma imagem (o que corresponde a uma matriz de 3000 X 3000) (PÁDUA, 2000). Em sua maioria os dispositivos de exposição gráfica utilizam amostragem de pixels, como por exemplo, a televisão e imagens de revistas ou jornais (PÁDUA, 2000). A Figura 1 apresenta uma visão do que consiste uma imagem formada por pixels. Figura 1 Imagem que utiliza mapas de bits. A Figura 1 na curva em destaque apresenta pequenos quadrados que consistem nos pixels da imagem. Cada pixel consiste na representação de informações sobre as cores. Um pixel pode representar um número n de cores. Este número é determinado pela quantidade de bits suportado pela imagem, o que se chama de profundidade de bits. Numa imagem

17 14 que suporta n bits, cada pixel pode representar 2 n cores. A Tabela 1 mostra a quantidade de cores proporcional à utilização de bits das imagens mais utilizadas na Web. Tabela 1 Demonstrativo de cores proporcional à quantidade de bits Quantidade de bits Cálculo Total de cores 1 2¹ Uma das medidas de resolução de imagem mais utilizada é o DPI (dots per inche) que fornece o número de pixels por polegada. O pixel está diretamente associado à luminosidade do ponto, sendo que imagens em tons de cinza (grayscale) possuem 2 8 níveis de luminosidade diferentes. Imagens com dois bits de profundidade, também chamadas imagens binárias, possuem apenas 2 níveis de luminosidade. A maioria das imagens coloridas segue o modelo de cores RGB, que é baseado na existência de três picos de cores: red, green e blue. Existe ainda o modelo de cores CMYK (Cyan, Magenta, Yellow, black), que é o modelo mais utilizado em editoração gráfica (PÁDUA, 2000). Os formatos de imagens encontrados na Web, em sua maioria, seguem o modelo RGB. Por isso, estes formatos são considerados neste trabalho. Imagens bitmap possuem diversas limitações e problemas, dentre estes pode-se citar a relação direta entre tamanho do arquivo e a qualidade da imagem (quanto maior a qualidade, maior o arquivo). Em uma conexão com a Internet, este torna-se um aspecto a ser considerado, já que a maioria das conexões é de baixa velocidade, e mesmo em conexões de maior velocidade, as imagens bitmap podem se tornar dispendiosas. Algumas características devem ser consideradas antes da utilização de formatos que utilizam o conceito de bitmap, como (PÁDUA, 2000): número de cores suportadas; resoluções; popularidade;

18 15 grau de compressão. Uma alternativa para a utilização de imagens do tipo bitmap são os desenhos vetoriais, descritos na próxima seção Desenhos vetoriais Desenhos vetoriais, como o próprio nome sugere, trabalham com a utilização de matrizes e fórmulas matemáticas. Eles permitem o armazenamento de figuras sinteticamente em formatos muito mais compactos que os arquivos de imagens bitmap (PÁDUA, 2000). Dada a importância que os vetores da geometria têm na descrição computacional dos desenhos esses arquivos são também chamados de arquivos vetoriais (PÁDUA, 2000). Estes podem ser redimensionados de forma a preservar a qualidade na apresentação das imagens que seguem este padrão. Outra característica importante é a utilização dos eixos x e y para tratamento das coordenadas da imagem. Imagens vetoriais são descritas como instruções para criação de imagens, enquanto imagens bitmap são pontos de cor (pixels) em lugares específicos (DAVID, 2003). Desenhos vetoriais são compostos por primitivas gráficas que podem ser descritas de forma algébrica através de funções. Estas primitivas estão divididas em primitivas lineares e não lineares. As primitivas mais comuns em desenhos vetoriais são: retângulo, círculo, linha, polígono, elipse. Uma das características mais interessantes dos desenhos vetoriais são as transformações lineares, que são operações sobre entidades geométricas. Dentre estas transformações encontra-se utilizações comuns como (PÁDUA, 2000): translações: os pontos de uma entidade têm suas coordenadas adicionada ao deslocamento; rotações: os pontos de uma entidade são girados em um ângulo em relação a seu ponto de referência; mudanças de escala: os pontos têm suas coordenadas multiplicadas pelos chamados fatores de escala;

19 16 cisalhamento: para todos os pontos uma nova coordenada é adicionada de um valor proporcional de outra coordenada. Assim como as transformações linerares existem as transformações não lineares, que são usadas para criações de efeitos especiais, dentre estes se pode citar operações como a extrusão e falsa perspectiva ou mesmo deformações. Comparando a Figura 1 com a Figura 2, nota-se a que a curva em destaque é apresentada de forma mais linear, sem as falhas, como as provocadas pela apresentação dos pixels apresentadas na Figura 1. Figura 2 Imagem que utiliza a idéia de vetores. Imagens vetoriais trabalham sobre uma matriz semelhante à idéia de mapa de bits das imagens bitmap, porém as imagens vetoriais não guardam o valor pixel, mas sim sua localização nesta matriz e outros atributos como: x, y, cor, transparência, estilo entre outros. Desta forma, a imagem ao ser redimensionada não tem sua qualidade afetada, como ocorre com o exemplo da Figura 1. Apresentados os conceitos sobre ambos os tipos de arquivos, pode-se fazer uma pequena comparação entre os desenhos vetoriais e imagens bitmap, citando prós e contras. Se comparadas representações de uma mesma figura, os arquivos vetoriais apresentam as seguintes vantagens em relação aos arquivos bitmap (PÁDUA, 2003): o tamanho é geralmente muito menor, já que a informação geométrica é muito mais compacta do que um pixel;

20 17 precisão no redimensionamento: uma reta apresentada de forma vetorial continuará sendo exibida com resolução original. Já com a forma bitmap a escada formada pelos pixels será mais visível quanto maior for o redimensionamento; o processamento é feito de forma mais fácil e eficiente. Entretanto, existem problemas com a apresentação de desenhos vetoriais que devem ser levados em consideração (PÁDUA, 2003): inadequação para representar imagens naturais; dependentes dos programas para autoria e apresentação; tempo de apresentação é proporcional a complexidade do desenho. Apresentados os prós e contras de ambos os padrões, ficam claros alguns pontos que devem ser levados em consideração antes da escolha de um padrão e conseqüentemente um formato. Assim é interessante a apresentação destes formatos. 2.3 Formatos bitmap Alguns formatos são usados para a representação de imagens na Web. Isto requer uma escolha cuidadosa de forma que estes não se tornem um entrave para a aplicação. Esta seção apresenta os formatos mais comuns para a representação de imagens bitmap na Web GIF (Graphic Interchange Format) É o formato de imagem mais utilizado na Web. A informação relativa à imagem é codificada numa paleta indexada de 8 (oito) bits por pixel na qual a quantidade de cores pode variar entre 2 a 256 conforme demonstrado na Tabela 1. O formato GIF é suportado pelos principais browsers do mercado. Foi desenvolvido em 1984 para compactar dados em discos magnéticos pela CompuServer (CompuServer, 2004), fazendo com que a imagem fosse menor e mais compacta (MARIANO,1998).

21 18 O algoritmo de compressão utilizado pelo formato GIF é o LZW (Lempel-Ziv- Welsh) de propriedade da Unisys (WILLRICH, 2004), sendo que a codificação LZW é baseada na construção de um dicionário de frases (grupos de um ou mais caracteres) a partir do fluxo de entrada. Quando uma nova frase é encontrada, a máquina de compressão adiciona ao dicionário um token que identifica a posição da frase no dicionário e substitui a frase. Se a frase já foi registrada, ela é substituída pelo token de posição no dicionário (WILLRICH, 2004). O LZW funciona muito bem com imagens gráficas nas quais a quantidade de cores é pequena e onde existem muitas áreas com tons contínuos. Imagens GIF consistem em um formato sem perdas. Sendo sem perdas, o GIF preserva todos os dados visuais na figura: nenhuma informação é descartada ou alterada durante a compressão/descompressão. Com isto, as taxas de compressão não são muito grandes (WILLRICH, 2004). Como citado anteriormente, o formato GIF trabalha com uma profundidade de cor de até 8 (oito) bits por pixel, ou seja, imagens com um máximo de 2 8 cores. Se uma imagem de 24 (vinte e quatro) bits por pixel for convertida para o formato GIF, será perdida grande parte da informação da cor. Neste caso, verifica-se que a qualidade da imagem obtida é bastante inferior à qualidade da imagem original, devido ao aparecimento dos chamados ruídos, que são deformações e falhas visíveis na apresentação da imagem. Os arquivos GIF são compostos de blocos seqüenciais de dados, cada um servindo a uma finalidade diferente. Além disto o formato GIF suporta animações (Aminated gif) de pequena qualidade ideais para serem disponibilizadas em páginas web e redes de baixa velocidade. Sua maior vantagem em relação a outros formatos é o tamanho geralmente pequeno. O GIF está disponível em duas versões: seu formato original o GIF 87a e sua versão mais nova é o 89a. Em sua segunda versão a Compuserve, além de acrescentar suporte a animação, adicionou outras características ao formato, como transparência e entrelaçamento. A transparência consiste na utilização de qualquer cor dentre as 256 possíveis, sendo que, esta é definida como transparente. Com isto, o browser, ao processar a imagem, ao invés de apresentar a cor informada irá apresentar a cor do fundo. Já o entrelaçamento é uma característica voltada para Web, sendo que a idéia é que a imagem vá sendo

22 19 descarregada progressivamente ao invés de ser descarregada de uma vez. O entrelaçamento geralmente ocorre em 4 (quatro) etapas melhorando a definição a cada etapa JPEG (Joint Photographic Experts Group) O formato JPEG, é um dos mais populares na Web, principalmente para fotos, sendo praticamente o padrão adotado para utilização em câmeras digitais (KELNER & FRERY, 2004) Possui algumas características importantes: utiliza em sua maioria um esquema de compressão com perdas, mas o grau de compressão pode ser ajustado, além de já existirem compressões utilizando um esquema sem perdas; formato suporta 24 bits de cores seguindo o modelo RGB. Em comparação com o formato GIF, que suporta apenas 8 bits, isto representa uma grande diferença; imagens com formato JPEG são degenerativas. Por exemplo, em um programa de edição, a cada vez que a imagem é salva é feita a compressão novamente e se perde mais de sua qualidade. A compressão no formato JPEG utiliza a codificação que leva seu nome para a compactação de suas imagens, sendo que a codificação JPEG é atualmente a técnica mais importante de compressão, principalmente de imagens com graduações suaves de intensidade geradas por captura de fotos ou síntese tridimensional (PÁDUA, 2000). O algoritmo JPEG foi desenvolvido, em 1992, pelo ISO/IEC em colaboração com a ITU-TS. Trabalha explorando as limitações da visão humana, no qual decompõe a imagem e então transforma estes blocos no domínio da freqüência usando a transformada discreta de co-seno (DCT). O DCT efetua a separação dos componentes de baixa e de maior freqüência presente na imagem, que podem ser desprezados sem resultar em grandes alterações no conteúdo da imagem (WILLRICH, 2004). De uma forma geral, JPEG é bem superior ao formato GIF para imagens em cores reais ou em tons de cinza no qual retratem cenas reais, ou seja, qualquer imagem com variação na cor, como em áreas brilhantes ou sombreadas. Nestes casos, a imagem JPEG

23 20 será apresentada com uma melhor qualidade e em menor espaço. O formato JPEG passou por poucas mudanças desde que surgiu, contudo existe um novo estudo realizado pela DIG (Digital Imaging Group), no qual o formato ganharia 20% a mais de compressão com menos perda de qualidade PNG (Portable Network Graphics) Surgiu para substituir o formato GIF, pois, até certo tempo, o algoritmo utilizado no formato consistia em um algoritmo proprietário, agregando custos à sua utilização. Este formato de arquivo foi desenvolvido na busca de balancear qualidade e redução do tamanho do arquivo. O formato PNG utiliza os algoritmos de compressão Lempel-Ziv 77 (LZ77) e Huffman (WILLRICH, 2004). A Codificação de Huffman é um exemplo de técnica de codificação estatística, que diz respeito ao uso de um código curto para representar símbolos comuns, e códigos longos para representar símbolos pouco freqüentes (WILLRICH, 2004). Trabalha a distribuição de freqüência sobre uma árvore em que o nó raiz é o elemento de maior freqüência e os de menor freqüência, os nós folhas. Depois de estruturada, são atribuídos valores aos nós da árvore, na qual o nó raiz (o símbolo mais freqüente) recebe o valor de bits 1. No decorrer da árvore são atribuídos valores menores que o atribuído ao nível acima, no qual a cada nível que se desce na estrutura da árvore o valor de bits diminui. Ao final, símbolos com maiores freqüências em um arquivo, e que representam a maior parte do arquivo, ocuparão menos espaço. Figura 3 Exemplo da árvore de codificação de Huffman (WILLRICH, 2004).

24 21 O algoritmo Lempel-Ziv 77 (LZ77) (Ziv & Lempel 1977) trabalha com a substituição de ocorrências de um determinado grupo de bytes, em uma seqüência de dados com referência a uma prévia ocorrência deste grupo de bytes. Utiliza janelas deslizantes definindo a seqüência de bytes enviados, sendo que o algoritmo deve retornar um ponteiro para a maior seqüência coincidente existente. Uma maneira mais simples de se entender o algoritmo de LZ77 é realizando a decodificação de uma frase ou conjunto de bits, como ilustra a Figura 4. Saída do decodificador a b a a b a b Entrada do codificador (0, 0, a) (0, 0, b) (2, 1, a) (3, 2, 1) (5, 3, 1) Figura 4 Decodificação utilizando algoritmo de LZ77. A Figura 4 mostra uma codificação e uma decodificação LZ77, supondo que a frase a ser decodificada consiste apenas de a s e b s. A saída é a janela a ser utilizada. O codificador trabalha com conjuntos de três componentes sendo que o primeiro componente é quanto se deve voltar no texto já decodificado para encontrar a próxima ocorrência do caractere, o segundo componente armazena o número de vezes que o caractere deve ser inserido na janela, e o terceiro é o caractere da entrada. Os dois primeiros itens constituem um ponteiro de localização do texto. O LZ77 limita quanto um ponteiro pode voltar em um texto, e o tamanho máximo de uma frase. Para codificar então, o LZ77 vai percorrendo o texto e vai produzindo conjuntos para partes do texto percorridas. Com isto o PNG apresenta um grau de compressão até 30% maior dos arquivos com menor perda da qualidade em relação aos formatos GIF e JPEG. O PNG apresenta ainda outras características como a possibilidade de utilização de maior número de cores em relação aos formatos GIF e JPEG, o que torna sua utilização bastante interessante. Além disso é gratuito e suportado por quase todos os navegadores.

25 22 Este padrão suporta até 48 bits por pixel (24 bits do RGB, 8 bits do canal Alpha e 16 bits para escalas de cinza), ou 16 bits por pixel para escalas de cinza, sendo que ao contrário do GIF, não suporta animação. 2.4 Formatos vetoriais Esforços para criação de formatos baseados em vetores existem desde 1993, começando com o SVF (Simple Vector Format). As próximas seções apresentam os formatos vetoriais mais utilizados na Web SWF (Shockwave Flash) O SWF, mais conhecido como o formato Flash, é atualmente o formato mais difundido para desenvolvimento de imagens vetoriais para Web. Foi originalmente apresentado como uma tecnologia voltada para a computação orientada a ponteiros (mouse, canetas ópticas), tecnologia que transformava traços em desenhos que foi comercializada com o nome de SmartSketch (pacote de desenho para computadores pessoais) (JACOBSON & JACOBSON, 2001). O SmartSketch facilitou a criação de figuras definidas como imagens vetoriais em relação à técnica de desenho por pixels. O SmartSketch evoluiu para o CelAnimator, que se tornou uma ferramenta para a criação de desenhos animados. A Macromedia desenvolveu um sistema de animação, o Director, sob o nome de Shokwave, cuja tecnologia é baseada em pixels, sendo inflexível e lenta para ser carregada. A Macromedia, em 1996, adquiriu o CelAnimator e passou a chamá-lo de FutureSplash, sendo que logo seu nome foi alterado para Flash, e anexado à linha de produtos Shockwave, acrescentando recursos para a criação de scripts. Foi adotado o ActionScript com a adoção do padrão ECMA-262 como base para a definição da linguagem. O formato SWF foi originalmente projetado com os seguintes objetivos (SWF ESPECIFICATION, 2004): exposição: desenvolvido para apresentações de animações e ferramentas interativas;

26 23 extensibilidade: pode ser evoluído com novas características e ferramentas além de manter a compatibilidade com versões mais antigas; rede: os arquivos são comprimidos de forma a serem renderizados incrementalmente tornando o arquivo mais leve em sua transmissão; simplicidade: o formato é simples de modo que os arquivos sejam pequenos e portáveis; independência: os arquivos podem ser apresentados sem nenhuma dependência de recursos ou fontes externas; velocidade: desenvolvido para que seus arquivos fossem renderizados e apresentados de forma veloz. Os arquivos SWF são binários. Em sua composição, o cabeçalho contém algumas informações que são divididas em campos, seguindo a estrutura: os três primeiros campos do cabeçalho representam a assinatura do formato; o quarto campo especifica a versão; o quinto, o tamanho do arquivo; o sexto, o tamanho dos frames no arquivo; o sétimo, a taxa de apresentação dos frames por segundo; e o oitavo campo representa o número total de frames no arquivo (SWF ESPECIFICATION, 2004). O formato SWF trabalha com a idéia de tags, contudo estas não podem ser alteradas ou manuseadas de forma simples. Um exemplo de tag Flash pode ser observado na Figura 5. taglen 10: tagplaceobject2 flags 1 depth 26 tag 1 pos matrix hex [ a_fixed b_fixed] = [ ] [ c_fixed d_fixed] [ ] [tx_fixed ty_fixed] [000010a ] Figura 5 Tag de um arquivo SWF Os arquivos SWF são divididos em vários frames numerados por uma tag denominada ShowFrame, que define a ordem de apresentação dos frames de um arquivo Flash. Como mencionado um dos objetivos do formato SWF é que seus arquivos sejam compactos de forma que estes sejam relativamente pequenos e que isto não afete a transferência deste na rede. Para tanto foram adotados métodos e técnicas de compactação

27 24 para seus arquivos. Uma das técnicas empregadas no SWF é o reuso de elementos já declarados anteriormente, realizando somente referências a estes elementos. O SWF suporta uma variedade de técnicas da compressão, sendo que o som é comprimido em vários níveis da compressão de ADPCM (Adaptive Differentiel Pulse Code Modulation) que podem ser de 37,8 khz sobre 8 bits, ADPCM B 37,8 khz sobre 4 bits ou ADPCM C 18,9 khz sobre 4 bits, e a compactação utilizada sobre as imagens utiliza um esquema de modulação delta (SWF ESPECIFICATION, 2004) PDF (Portable Document Format) O PDF é um formato de imagens vetoriais desenvolvido originalmente para digitalização e editoração eletrônica. Não projetado primeiramente para Web, contudo pode ser utilizado com a ajuda dos plugins. É um padrão proprietário da Adobe System Inc. (ADOBEa, 2004) e é fechado. O PDF é projetado basicamente para imagens estáticas sendo possível a utilização de Hyperlinking, além de conter som e vídeo, sendo utilizado também em apresentações multimídia, mas não fornece muitas possibilidades de interação (Neumann & Winter, 2001). Contudo, arquivos que utilizam o formato PDF são bastante compactos, além de garantir a autoria dos documentos. Segundo (ADOBEb, 1998), a maior vantagem do formato PDF relativa à digitalização de documentos está no fato de que o layout original (look and feel) da obra é mantido, ou seja, o texto e imagens são distribuídos exatamente como no original: paginação, títulos, fotografias, gráficos, figuras, funcionando de forma semelhante a uma fotografia cada página de um livro, tudo agrupado em um só arquivo digital. A criação dos arquivos no formato PDF pode ser realizada através de captura ótica mediante a utilização de um scanner, ou através de softwares. É um formato bastante difundido no qual, segundo dados fornecidos pela Adobe System Inc., mais de sites estão distribuindo informações utilizando o formato PDF, e mais de 20 milhões de pessoas já realizaram downloads de software para leitura de arquivos PDF (ADOBEb, 2004).