Graficos Vetoriais Escalaveis Na Criacao de Interfaces de Sistemas Para a Internet

8/19/2019 Graficos Vetoriais Escalaveis Na Criacao de Interfaces de Sistemas Para a Internet

http://slidepdf.com/reader/full/graficos-vetoriais-escalaveis-na-criacao-de-interfaces-de-sistemas-para-a-internet 1/27

Gráficos Vetoriais Escaláveis na criação de interfaces desistemas para a Internet

Naiara Sebben1, Anibal Lopes Guedes1

1Desenvolvimento de Sistemas para Internet – Universidade do Oeste de Santa Catarina(UNOESC)

São Miguel do Oeste – SC – Brazil {naiarasebben, anibalguedes}@gmail.com.br

Abstract. In a society where the Internet is a medium indispenssável, thediscussion on the technologies used in the construction of its interface,through which the communication occurs Humano /Coputer, takes shape of

extreme importance. The evolution with the solutions brought by the ScalableVector Graphics (SVG) in creating layouts for web, in conjunction with therelease of new version of the Markup Language Hirper Text (HTML) usedmost in the world, HTML 5.0 will allow expossição vector images on the

Internet, known for high quality and low size storage and processing. Abordase this work the study of aspects of the XML programming language for creating graphics like SVG, and standards development relating to thesubject matter, structure, support vector graphics on the platform and theirweb browsers, as well as testing the applicability SVG technology on the

Internet.

Resumo. Na sociedade em que a internet é um meio indispenssável, adiscussão acerca das tecnologias utilizadas na contrução da sua interface,meio pelo qual acontece a comunicação Homem/Coputador, ganha contornosde extrema relevância. A evolução, com as soluções trazidas pelos GráficosVetoriais Escaláveis (SVG) na criação de layouts para web, em conjunto como lançamento da nova versão da Linguagem de Marcação de Hirper Textos(HTML). Sendo assim, aborda-se nesse trabalho o estudo de aspectos dalinguagem de programação XML para criação de gráficos do tipo SVG,incluindo normas e padrões de desenvolvimento relativas ao tema em questão,estrutura de suporte de gráficos vetoriais na plataforma web e seusnavegadores, assim como, testes de aplicabilidade da tecnologia SVG na

internet. Palavras-chave. Gráficos Vetoriais Escaláveis, interfaces, layouts, SVG, XML.

1. Introdução

O mundo está sendo caracterizado pela grande quantidade de informações difundidaspelas diferentes mídias da web. Esse fator é agravado com a explosão da internet que seconstitui como o hipertexto universal, promovendo e divulgando cada vez maisinformações de todas as naturezas e crenças, além de interligar os diferentes países emtempo real e a qualquer momento (ANGELONI, 2005).



O contínuo processo de avanço das Tecnologias da Informação e Comunicação(TICs), vem abrindo caminho para uma nova web, intitulada de “Web 2.0”, mais focadana interatividade, disponibilidade, portabilidade, gratuicidade, experimentalismo e que

aproveita a inteligência coletiva.O advento dessa nova forma de interação da web 2.0, reflete a estrutura

institucional e social da sociedade contemporânea e se depara com novas formas deinteragir com o computador. Apesar das disparidades socioeconômicas presentes entreas diversas regiões do planeta, que ditam o grau de avanço tecnológico de cada nação,esta interferência no cotidiano alcança desde as relações comerciais, científicas,tecnológicas, cooperativas e políticas até as relações pessoais, dada a velocidade e aforma com que informações podem ser obtidas ou transmitidas (LÉVY, 1999;ALCÁZAR, 2003 apud ANDRADE, 2007).

Contudo a velocidade de acesso a esse meio, ainda possui barreiras tecnológicas

que ocorrem devido a diversos fatores, como a enorme quantidade de imagens do tipomapa de bits que compõem as interfaces dos aplicativos na internet, assunto foco dessetrabalho.

Imagens do tipo mapa de bits, criam layouts baseados em pixels, que acabamresultando em mais da metade do armazenamento total de todo o sistema web (MARTINS, 2009).

Por outro lado, existem as imagens vetoriais que são baseadas em coordenadasmatemáticas, as quais são capazes de criar arquivos com uma fração do espaço utilizadopelo mapa de bits, e mais importante, podem ser ampliadas indefinidamente semperderem definição e detalhamento (FALLEIROS, 2003).

Essa tecnologia vetorial está prevista no lançamento do HTML 5.0, que virá comsuporte ao padrão SVG, tecnologia que além de ser recomendada pela W3C, é utilizadapara descrever aplicações gráficas vetoriais e bidimensionais (2D) baseadas em XML.Prevendo uma possível revolução na essência do desenvolvimento de interfaces parainternet (W3C, 2010).

A carência de orientações no projeto de uma interface web leve, porém com altaqualidade de visualização constituem uma lacuna de conhecimento nesta área. Paratanto, este trabalho tem seu campo de estudo centrado na criação de interfaces para umaweb baseada em um design muito mais eficiente.

1.1 Objetivo GeralAnalisar o uso do SVG (Scalable Vector Graphics / Gráficos Vetoriais Escaláveis), nacriação de interfaces/layouts para sistemas web.

1.2 Objetivos Específicos

Como objetivos específicos são:

! analisar tendências do uso do SVG na internet;

! analisar o desempenho dos gráficos vetoriais escsaláveis sob os padrões da W3Ce os critérios de acessibilidade;

!

levantar as vantagens dos gráficos vetoriais escaláveis;



! testar o uso do SGV na criação de layouts para interfaces web, assim como, oseu suporte aos principais navegadores da web.

2. JustificativaAlguns problemas de usabilidade na web, principalmente a demora no tempo deresposta que um usuário possui ao tentar carregar uma homepage, fizeram crescer ointeresse em pesquisas que visam apontar soluções para melhor tratar com a variedadede recursos multimídias, que tanto impactam no desempenho dos sistemasdesenvolvidos para a internet.

Segundo a consultoria Aberdeen Group (2010), problemas com o desempenhodos aplicativos têm impacto sobre a receita de uma corporação de até 9%. Também foiprovado que investir no aumento da velocidade dos sites melhora os negócios online epromove um aumento significativo na satisfação do usuário/cliente.

Pois, “quando um consumidor deixa um site, as chances de voltar depois de umaexperiência negativa é praticamente zero.” (S2 ..., 2010)

Isso ocorre porque na maioria dos websites de 50% a 90% do seu tamanho dearmazenamento se deva às imagens e animações (MARTINS, 2009).

Sousa (2009) aponta que do todo o tempo gasto pelo visitante para baixar umapágina, 80% é processado no front-end (cliente) e somente 20% no back-end (servidor),e desses 80%, a maioria é dedicado a baixar componentes dos formatos .bmp, .jpg, .pnge .swf.

Hoje, a solução para páginas mais rápidas é basicamente tratar as

imagens/animações com softwares específicos que reduzem o seu tamanho dearmazenamento e otimizam o número de componentes do site, que resultará em menosrequisições HTTP no momento de renderizar a página no cliente.

Contudo, reduzir o tamanho de armazenamento de uma imagem do tipo mapa debits, impacta em definir uma menor resolução para o desenho, o que ocasiona a perda dequalidade do mesmo. Ou seja, quanto maior a resolução maior será o tamanho doarquivo no disco rígido, pois no caso o computador terá mais informações em pixels para armazenar (MOREIRA, 2008).

Em contrapartida, as transformações extremamente velozes que ocorrem naweb, incentivam novas pesquisas que trazem tecnologias a fim de construir “uma Web

mais ‘inteligente’, colaborativa e personalizada. (KOCH, 2000, p. 1)Como exemplo cita-se o desenvolvimento da nova versão do HTML, o HTML

5.0, que traz entre muitas outras novidades o suporte ao SVG (Scalable VectorGraphics), que consiste em uma linguagem gráfica padrão, que permite desenharpáginas web com alta resolução gráfica, incluindo elementos sofisticados tais como:declives, fontes embutidas, transparências, animação e efeitos de filtro, usandocomandos de texto. (COSTA, 2007)

A diferença entre o SVG e outros formatos vetoriais, é o fato de ser um formatoaberto e gratuíto, criado sob coordenação da W3C com o apoio das seguintes empresas:

Adobe, Agfa, Apple, Canon, Ericsson, HP, IBM, Kodak, Microsoft, Nokia, Sharp e Sun Microsystems (BISNETO, 2006).



Ao contrário das imagens mapeadas por bits, as imagens vetoriais, sãocompostas de linhas, ângulos e formas geométricas predefinidas por comandos decomputador e por cálculos matemáticos.

Por isso, uma imagem vetorial, ou gráfico vetorial, pode ser reorganizadaindefinidamente e traz a vantagem de ser independente em relação à resolução. Ou seja,pode ser redimensionada indefinidamente sem perder a qualidade na visualização e semaumentar o tamanhos de armazenamento. Proporcionando para os sistemas web, layoutsmais leves, com maior qualidade e produzidos com base em tecnologias gratuitas.

3. Desenvolvimento

O design para todos e as interfaces rápidas, flexíveis e ajustáveis são alvo de pesquisade ponta na própria área de IHC (Interação Humano-Computador), que aumentam àmedida que se considera os variados contextos sócio-econômicos e a diversidade

cultural no mundo.Acerca de fazer uma análise sobre essas interfaces e as tendências trazidas pelo

SVG, aborda-se nos próximos capitulos, assuntos como as interfaces da web e os tiposde desenhos utilizados para desenvolvê-las, assim como as novidades do SVG com olançamento do HTML 5. E por fim apresenta os resultados dos testes de desempenho esuporte do SVG, nos principais navegadores da web.

3.1 Interface Web

Segundo Lévy (1993, p. 181) a interface é o meio que propicia a comunicaçãoentre o ser humano e o computador, e nas palavras de Shneiderman (2004), é o localonde o usuário entra em contato físico, perceptivo e cognitivo, com o sistema.

A interface web tem a função de “permitir ao usuário obter uma visãopanorâmica do conteúdo, navegar na massa de dados sem perder a orientação e, por fim,mover-se no espaço informacional de acordo com seus interesses”. (BONSIEPE, 1997,p. 59).

Existem diversos tipos de interface com o usuário, tais como: interface de linhade comando, interface baseada em menus, interface gráfica, interface de comando devoz; no entanto, “foi através da interface gráfica que o computador juntamente com ainternet rompeu a barreira dos ambientes científicos e chegou até os ambientesdomésticos.” (VALESE et. al., 2003, p. 92).

De acordo com Batista (2008), a interface gráfica é composta por um conjuntode elementos que se subdividem em: textual (texto plano), não textuais (imagens, áudioe videos), interativos (botões, campos de formulários, etc), layout (imagens, cores,linhas, etc) e interpretáveis pelos navegadores (DHTML, CSS).

Na internet, entre todos os elementos, são as imagens, que compõem a maiorparte do espaço de armazenamento de um website e são essenciais para a transmissão deidéias, para o design de layouts, para exemplos e para uma série praticamente infinita deaplicações (MARTINS, 2009).

Isso acontece, pois a maioria das imagens encontradas na web, são imagens dotipo mapa de bits, ou seja, formadas por pixels. Essas imagens são caracterizadas por

serem mais pesadas, ao contrário das imagens do tipo vetorial, como pode ser visto nopróximo tópico.



3.2 Tipos de gráficos digitais

Existem dois tipos de imagens na computação gráfica: as imagens “vetor” e as“bitmap/mapa de bits”. A diferença entre as duas é baseada na forma em que a imagemé armazenada pelo computador.

Alguns programas mais conhecidos que criam arquivos bitmap ( pixel) são: Adobe PhotoShop, Corel Photopaint, Corel Painter, Paint Shop Pro, Gimp e outros. Jáprogramas que criam arte vetorial citam-se: o CorelDraw, Illustrator, Inkscape,Freehand, RealDraw, Xara e Flash.

3.2.1 Imagens Bitmap

As imagens do tipo bitmaps consistem em centenas de linhas e colunas de pequenoselementos. Cada elemento é armazenado individualmente pelo computador e chama-sepixel (abreviatura de picture element) (FALLEIROS, 2003).

isto é, a imagem consiste numa matriz de pontos individuais (ou pixels) em quecada um tem a sua própria cor (descrita usando bits, a mais pequena unidade deinformação para um computador). Para demonstrar essa construção a Ilustração 1mostra os miúsculos quadrados que formam a imagem.

Figura 1. Grade base de pixels ampliados de uma tela. Fonte: O Autor (2010).

Sem a ampliação, o olho humano não é capaz de distinguir cada pixel individualmente, ficando então, com a percepção de uma imagem com suaves

gradações.Caso um círculo bitmap seja desenhado nesta base ampliada (Figura1), o

resultado fica um desenho com as bordas serrilhadas, como mostra a primeira tela daFigura 2 abaixo. Mas re-ajustando a ampliação dos pixeis, para seu tamanho normal, amesma serrilhação torna-se imperceptível ao olho humano, como mostra a terceiraimagem das Figura 2 a seguir.



Figura 2. Círculo bitmap gradativamente ampliado. Fonte: O Autor (2010).

Assim, na primeira tela (Figura 2), é representado cada pixel individualizado,fazendo com que o círculo fique muito blocado, duro e irregular. Porém, com o

acrécimo de pixels, a resolucão será aumentada, e esse círculo se torna mais suaveporque os pixels são muito menores, como mostra a segunda e a terceira tela da Figura2.

O número de pixels determina a resolução do arquivo. O computador registraeste arquivo pela gravação da exata localização e cor de cada pixel. O computador nãotem idéia que isso é um círculo, somente que é um aglomerado de pequenos pontos(FERNANDES, 2003).

Sendo assim, naturalmente, quanto maior a resolução maior será o tamanho doarquivo no disco rígido, porque o computador terá mais informações em pixels paraarmazenar.

Mas, o problema se agrava quando o bitmap é alargado ou aumentado (emescala ou aleatoriamente). A resolução existente quando modificada em tamanho,somente alarga o pixel, resultando num efeito conhecido como “pixelização” daimagem, mostrado no Figura 2.

Figura 2. Efeito de pixelização. Fonte: O Autor (2010).

Formatos de arquivos que suportam desenhos bitmap são: psd, ctp, rif, tif, jpg,bmp, entre outros.

O tratamento de arquivos deste tipo requer ferramentas especializadas,geralmente utilizadas em fotografia, pois envolvem cálculos muito complexos, comointerpolação e álgebra matricial.



3.2.2 Imagens Vetoriais

Imagem vetorial é um tipo de imagem gerada a partir de construções geométricas deformas, diferente das bitmap (mapa de bits) construídas por uma unidade básica ( pixel).Uma imagem desenvolvida em um programa vetorial é composta por curvas, elipses,retangulos, polígonos, texto, entre outros elementos, isto é, utilizam vetoresmatemáticos para sua descrição (FERNANDES, 2003).

Através desta técnica, o programa vetorial pode criar arquivos com uma fraçãodo espaço utilizado pelo bitmap (imagens rastreadas), e mais importante, possuem acapacidade de serem ampliados indefinidamente sem perderem definição edetalhamento (FALLEIROS, 2003).

Como pode ser visto na Figura 3 a seguir, diferentemente da imagem bitmap, ocírculo vetorial aparece suave tanto em 100% quanto em 800%.

Figura 3. Ampliação de vetor de 100% para 800%. Fonte: O Autor (2010).

Outra vantagem do desenho vetorial é a possibilidade de isolar objetos e zonas,tratando-as independentemente, enquanto na imagem bitmap o desenho é engessado emum bloco de pixels (FALLEIROS, 2003).

Sendo assim, por serem baseados em vetores, esses gráficos geralmente são maisleves (ocupam menos memória no disco) e não perdem qualidade ao serem ampliados,além de serem mais flexivéis quanto a alterações/edições. Uma vez que, as funçõesmatemáticas adequam-se facilmente à escala, o que não ocorre com gráficos raster

(bitmap) que utilizam métodos de interpolação na tentativa de preservar a qualidade.

3.3 A nova Web

A nova web, nomeada de Web 2.0 “é o momento em que o mercado, por força dosusuários, voltou a dar importância para web depois do estouro da bolha.” (TEIXEIRA,2006).

A web 2.0, também pode ser vista como uma “mudança ocorrida na vida dosusuários que com a banda larga passam mais tempo on-line e exercem massivamente opotencial interativo da Internet.” (NEPOMUCENO; CAVALCANTI, 2006).

O que instigou o World Wide Web Consortium (W3C), grupo responsável pordesenvolver tecnologias que sejam compatíveis para promover a evolução da web, a



investir em inovações que proporcionacem a web aplicações que satisfaçam as novasnecessidades do usuário.

Assim, o W3C HTML Working Group, está trabalhando na nova versão do HyperText Markup Language (HTML), o HTML 5.0, visando oferecer uma experiênciaweb totalmente diferente para os usuários (ALVAREZ, 2009).

3.4 O HTML 5.0

O HTML foi desenvolvido originalmente por Tim Bernes-Lee no CERN (CentroEuropeu de Física de Partículas), e foi popularizado pelo navegador Mosaic, essedesenvolvido pela NCSA ( National Center for Supercomputing Applications) (SILVA,2008)

Desde o começo o HTML foi criado para ser uma linguagem independente deplataformas, browsers e outros meios de acesso. Com o intuito deste código ser lido pordiversos meios, evitando que a web fosse desenvolvida em uma base proprietária, comformatos incompatíveis e limitados (W3C, 2010).

Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada,fazendo com que a informação publicada por meio deste código fosseacessível por dispositivos e outros meios com características diferentes, nãoimportando o tamanho da tela, resolução, variação de cor. Dispositivospróprios para deficientes visuais e auditivos ou dispositivos móveis eportáteis. O HTML deve ser entendido universalmente, dando a possibilidadepara a reutilização dessa informação de acordo com as limitações de cadameio de acesso (W3C, 2010).

Desde então o HTML passou por inúmeras versões (HTML 2.0, HTML 3.2,

HTML 4.0, HTML 4.01 e X HTML 1.0). Porém, foi quando o W3C focava suasatenções para a criação da segunda versão do XHTML, um grupo chamado Web

Hypertext Application Technology Working Group (WHATWG) trabalhava em umaversão do HTML que trazia mais flexibilidade para a produção de websites e sistemasbaseados na web.

O WHATWG foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Eles não estavam felizes com o caminho que a web tomava enem com o rumo dado ao XHTML. Por isso, essas organizações se juntaram paraescrever o que seria chamado hoje de HTML 5 (HTML5, 2010).

Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo eprincipalmente pelo W3C, que até então trabalhavam individualmente, reconheceu todoo trabalho do grupo. Então em outubro desse mesmo ano, Tim Berners-Lee anunciouque trabalharia juntamente com o WHATWG na produção do HTML 5.0, para posteriordescontinuação do XHTML 2.0 em 2009 (HTML5, 2010).

Assim, após dez anos sem muitas atualizações, surge o HTML 5.0, que prometetrazer novas possibilidades para os desenvolvedores web (FERREIRA, 2010).

"Por isso o frisson em relação ao HTML 5. A linguagem ficou muito temposem evoluir e as pessoas adotaram maneiras alternativas de resolver osproblemas de programação na web", afirma o professor do departamento deCiência da Computação do Instituto de Matemática e Estatística (IME) da

Universidade de São Paulo (USP), Marco Aurélio Gerosa.



Embora exista um longo caminho para ser finalizado, pois a versão final do novoHTML está previsto apenas para final de 2012, muitos navegadores importantes, comoo Ópera, Google Chrome, Safari 4 e o Firefox 3.5 já implementaram grandes partes da

nova linguagem.A evolução do HTML irá interferir na forma como os navegadores fazem a

leitura dos códigos e montam as páginas web para o internauta. Segundo AlejandroVillanueva, responsável pelo relacionamento com comunidades de desenvolvedores doGoogle na América Latina, em entrevista ao IDG Now! (2009) “O HTML 5 ofereceuma experiência de web mais rica para usuários e ferramentas adicionais adesenvolvedores, que podem criar aplicações mais complexas com base em umconjunto de padrões abertos.”

Assim, com a evolução da linguagem, na opinião dos especialistas mencionados,os navegadores passam da categoria de meros mostradores de páginas para completos

ambientes de desenvolvimento, proporcionados pelas novidades que estão sendoimplementadas no HTML 5 ( IDG NOW !, 2009).

3.4.1 Novidades do HTML 5

Para causar tamanho impacto no desenvolvimento web, as mudanças para a nova versãodo HTML foi significativa. Para uma análise mais abrangente, a Tabela 1 mostra asprincipais novidades do HTML 5.0, de acordo com HTML 5 (2010).

Novidade Descrição

Novos elementos e

atributos

O HTML5 trouxe uma série de elementos que nos ajudam a

definir setores principais no documento HTML, tais como:section, nav, article, aside, hgroup, header, footer e time.

Elementosmodificados eausentes

Alguns elementos que existiam no HTML e queanteriormente foram descontinuados agora voltaram à tonacom novos significados semânticos. Assim como outroselementos que não descontinuados, mas também tiveramseus significados modificados.

Elementos modificados: <b>, <i>, <addres>, <hr>,<strong>, <head >.

Elementos modificados: <basefont >, <big>, <center>,

< font >, <s>, <strike>, <tt >, <u>, < frame>, < frameset >,<noframes>.

Novos tipos decampos

O elemento input aceita os seguintes valores para o atributotype: tel, search, email, url, datas, horas, number, range,color.

Tipos de dados evalidadores

O HTML 5 ganhou bastante recursos de formulários evalidadores como por ex: autofocus, placeholder text,required, maxlength, pattern, etc.

Detalhes e conteúdo

editável.

Possibilidade de usar novos elementos como o details e o

summary. Drag-and-drop e Elementos drag-and-drop serão facilmente manipulados e



correção ortográfica agentes de usuário poderão oferecer recursos de revisãoortográfica e gramatical, dependendo da disponibilidade emcada plataforma.

Elementos audio,video, e codecs

Elementos específicos para áudio e vídeo foram criados compossibilidade de inclusão de codecs.

Elemento device estream API

O HTML 5 prevê que os agentes de usuário tenham umainterface de comuicação P2P, que permite a troca de texto,imagem, vídeos e arquivos.

MathML e SVG

O HTML5 incorpora o padrão MathML, uma linguagem demarcação, baseada em XML, para representação de fórmulasmatemáticas. Assim como MathML, o SVG também é umalinguagem XML que pode ser incorporada com facilidade

em HTML5.Canvas API

Possibilidade de usar o elemento canvas API que permitedesenhar na tela do navegador via Javascript .

Server-sent eventsServer-Sent Events API é uma maneira de inverter o fluxodas aplicações Ajax, fazendo com que o servidor possadisparar o envio de dados ao agente de usuário.

DOM e HTML5Diferença entre as versões anteriores do DOM e a do HTML5.

Novos eventos DOM

O HTML 5 oferece um conjunto de novos elementos para

multimídia, novos eventos para campos de formulários, entreoutros.

Menus e toolbars Novos elementos específicos para menus e toolbars.

Tipos de links Possibilidade de acrescentar aos links: metadados denavegação, metadados da página e comportamentos dos links na página.

Microdata Microdata API permite tornar a estrutura semântica maisespecífica, definindo o que é o conteúdo de cada elemento.

Histórico de sessão e

API Storage

O objeto history foi melhorado no HTML5 com dois novos

métodos: o pushState() e o replaceState().

Aplicações offline HTML5 provê uma maneira de se indicar ao navegador queelementos são necessários e devem ser postos em cache paraque uma aplicação funcione offline.

Scroll in to view ehidden

Novas possibilidades para trabalhar com ocultações deobjetos.

Geolocation APICriação de funções como callback , que são capazes dereceber um objeto de posicionamento.

Undo

Objetos undo podem ser inseridos no histórico e controlados

pelos seus scripts.Tabela 1. Principais novidades do HTML 5.0. Fonte: HTML5 (2010).



Devido ao foco deste trabalho estar nas tendências do desempenffhos dasimagens na web, caracterizado na demanda por páginas mais leves, mais rápidas e commais recursos, passa-se a considerar principalmente os dois últimos itens da Tabela 1

acima, que estão diretamente voltados a inserção de desenhos/imagens na internet.O HTML 5.0, incorpora o padrão MathML, que é uma linguagem de marcação,

baseada em XML, para representação de fórmulas matemáticas. Assim como, o SVGque é uma outra linguagem XML que pode ser incorporada com facilidade em HTML5.0. Ambos darão suporte a uma linguagem para marcação de gráficos vetoriais na web,até então encontrada em minoria, e dependendo de pluggins extras disponibilizados porempresas proprietárias.

Já as canvas API permitem desenhar na tela do navegador via Javascript ,proporcionado por um único elemento HTML existente referenciado pelas tag <canvas>, o resto todo do desenho é feito via código Javascript .

Enquanto por um lado, o MathML e o SVG são vetoriais, e baseado em XML,logo, acessível via DOM, as canvas são desenhadas pixel a pixel, via Javascript .

Cada uma das três tecnologias trazem diversas peculiaridades, porém o maiordestaque é quanto ao uso do SVG, já que a maioria dos editores de gráficos vetoriaisencontrados hoje importa e exporta automaticamente SVG, permitindo aodesenvolvedor construir um gráfico em seu editor vetorial preferido e exportá-lodiretamente (HTML5, 2010).

Em seguida, um programador pode ainda acresentar um código Javascript quemanipula esse SVG, usando os métodos do DOM. Com isso, pode-se criar gráficos

dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveisem Javascript , e principalmente sem tecnologias proprietárias e pluggins (HTML5,2010).

3.5 Tecnologia SVG (Scalable Vector Graphics)

Em geral, o SVG é um formato gráfico vetorial que no seu estado nativo é inteiramentededicado a bases vetoriais, como linhas, preenchimentos, gradientes e texto; quepermitem aos desenvolvedores web, designers, e usuários, ultrapassarem as limitaçõesdo HTML e criar um conteúdo visual robusto e interativo através de um modelo simplesde programação declarativa e muito mais leve.

Segundo a W3C (2010), a SVG é uma linguagem para descrever gráficos emduas dimensões em XML, os quais suportam três tipos de objetos gráficos: vetor deformas gráficas, imagens e texto. As três tecnologias compostas do SVG, podem sertrabalhados pelo desenvolvedor de forma interativa, dinâmica ou ainda animada.

O SVG é formado apartir de declarações de objetos gráficos utilizando XML,possibilitando o desenho se adaptar a qualquer resolução de tela sem perda de qualidadee apresentar os gráficos em duas dimensões. Desde então, imagens SVG têm sido cadavez mais utilizadas na web e já são reconhecidas pelos mais populares softwaresgráficos, oferecendo assim, muitas vantagens para os investidores e utilizadores.

Assim como, os websites tornaram-se mais complexos, oferecendo mais

interactividade e sofisticação visual, os webdesigners necessitam de linguagens que



além de mais poderosas que o antigo HTML 4, virem tendências de mercado (COSTA,2007).

Atualmente, o formato .swf da Adobe, é um dos mais utilizados para inserirvetores na web, com o objetivo principal de criar arquivos pequenos que permitam ainteratividade e que rodem em qualquer plataforma. Porém, é compatível apenas com osnavegadores que suportem pluggins com esta tecnologia.

Neste ano de 2010, Steve Jobs mostrou mais um aparelho da Apple, conhecidocomo iPad (além do iPhone e iPod Touch) sem o suporte ao pluggin Flash, da Adobe.Poucas semanas depois, o co-fundador da Apple se justificou, dizendo que a tecnologiaestava “ultrapassada” e seria logo substituída pelo HTML 5 (AMARAL, 2010).

Sobre o assunto, André Jaccon (2010 apud AMARAL, 2010), arquiteto desoftware da empresa de programação Blue Systems, comenta: “a Apple vem dificultandoa integração de aplicações com Flash em dispositivos como iPhone, iPod e iPad ,alegando que os players diminuiriam a autonomia de bateria.”

Assim como, muitas especulações encontadas na internet sobre o HTML 5.0,que dão rumo a um investimento de uma tecnologia mais eficaz e não-proprietário. OHTML 5.0, mostrou uma forma de evoluir através de uma linguagem aberta, mantidapor uma comunidade e não por uma empresa privada (RAMOS apud AMARAL, 2010).

Com o futuro dos padrões do W3C, a Adobe espera criar as melhoresferramentas para quem quiser trabalhar com eles, da mesma que o Flash vemsendo aprimorado para lidar com desenvolvimento em múltiplas plataformas.(LYNCH, 2010).

Já do ponto de vista da segurança, se por um lado as constantes atualizações doFlash são utilizadas como oportunidade para hackers promoverem golpes disfarçandoprogramas maliciosos como o pluggin da Adobe, o HTML 5 também preocupa(RAMOS apud AMARAL, 2010).).

Como diz Ramos (2010), “a chance de existir alguma brecha nunca é descartada,como a linguagem vem com um número bem grande de aperfeiçoamentos e novidades,as falhas podem ficar evidentes”.

Contudo, “a equipe de desenvolvimento do W3C trabalha duro para minimizaresse tipo de problema, porém, conforme o HTML 5 ganhar popularidade, pode vir aacontecer que alguns crackers encontrem falhas que serão usadas para fins malignos. O

mesmo acontece com qualquer software ou linguagem disponível no mercado”, avisaAmaral (2010).

Sendo assim, ainda em meio a algumas situações não definidas sobre o HTML5.0, o SVG já é considerado adequado para aplicações web interativas, personalizadas ecom gráficos em tempo real baseados em fontes de dados, como por exemplo: e-commerce, sistemas corporativos e bases de dados; permitindo ao desenvolvedorpersonalizar o SVG para diversos objetivos, não importando o modo como o usuáriointeraja com os dados.

3.5.2 SVG sob os padrões da W3C e os critérios de acessibilidade;

Tangarife e Alvão (2005) afirmam que acessibilidade diz respeito a locais, produtos,serviços ou informações efetivamente disponíveis ao maior número e variedade possível



de pessoas independente de suas capacidades físico-motoras e perceptivas, culturais esociais. Isto requer a eliminação de barreiras arquitetônicas, a disponibilidade decomunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e

apresentação da informação em formatos alternativos.Melo e Baranauskas (2005) comentam, que a acessibilidade está sendo

reconhecida como uma condição fundamental para a inclusão digital, com essesmecanismos que auxiliam e viabilizam a inclusão social. Várias medidas estão sendoadotadas para promover esse acesso.

Nos domínios das tecnologias da informação, o acesso universal faz referênciaàs noções de interoperabilidade, compatibilidade, equipamentos, infra-estruturas e deacessibilidade. O acesso universal exige, que se atinja essas determinadas condições, emprol da contrução de uma web para todos, ideologia seguida pelo W3C (AMBROSI;PEUGEOT; PIMIENTA, 2005).

Desde o início, o W3C define a noção de acesso universal como sendo apossibilidade para todos os indivíduos de acessar os recursos da web, qualquer que sejaseu material ou software, sua rede de infra-estrutura, seu idioma materno, sua cultura,sua localização geográfica ou suas aptidões físicas ou mentais (AMBROSI; PEUGEOT;PIMIENTA, 2005).

A utilização da ergonomia e da acessibilidade proporciona um impacto naqualidade de interação das pessoas com necessidades especiais, atingindo diretamente ousuário final. Enquanto que, as imagens bitmaps ou fornecidadas através de pluggins fechados, são a principal barreira de acesso a informação para usuários que necessitam,por exemplo, de uma leitor de tela para navegar na internet. Pois, essas imagens não são

interpretáveis sem o sentido visual (QUEIROZ, 2006).Já, o SVG é acessível, pois suporta conteúdos alternativos, sendo possível

seleccionar, escalar, indexar e extrair o texto de uma imagem. Isto significa grandesavanços para acessibilidade, internacionalização e rendering variável em múltiplosdispositivos de output . Como é baseado em texto XML, scripts externos e ligações àbase de dados são capazes de seguir os sistemas dinâmicos em HTML, tornando aimagem mais flexível e interpretáveis (COSTA, 2007).

Devido a isso, o SVG 1.1 é a mais recente versão da especificação completarecomendada pela W3C e o SVG Tiny 1.2 é a mesma recomendação só que com metaspara dispositivos móveis (SCALABLE …, 2010).

3.5.3 Outras vantagens dos gráficos vetoriais escaláveis

Além de altos níveis de acessibilidade e dos padrões de desenvolvimento, oformato SVG, possui outras caracteristicas que aplicadas a web, que proporcionamvantagens na sua aplicação. As quais são descritas nas seções a seguir.

3.5.3.1 São escaláveis

O SVG suporta o zoom nos gráficos com verdadeiro escalonamento, portanto todos osobjetos e atributos são ampliados uniformenente com o nível do zoom.



Imagens SVG podem se adaptar a qualquer resolução de vídeo sem perda naqualidade, uma vez que, o processo de renderização é feito através de declarações XML(objetos gráficos e suas propriedades) e não baseado em pixels fixos.

Asim, uma imagem SVG pode ser submetida a efeitos de zoom sem qualquerperda alguma de qualidade, devido as suas caracteristicas herdadas do gráfico vetoriais,

jávistos anteriormente nesse trabalho.

3.5.3.2 Compatibilidade

Devido à sua compatibilidade e a disponibilização de outros padrões web, recursospodem ser implementados em XHTML e elementos SVG simultaneamente na mesmapágina web.

Assim, o SVG se integra com outras especificações do W3C e os esforços denormalização. Entrando em conformidade com outras normas, o SVG torna-se maisforte e mais fácil para os desenvolvedores incorporarem o SVG em seus websites.

A seguir encontram-se algumas das maneiras em que o SVG mantém acompatibilidade e se integra com outros esforços/normas do W3C, de acordo com omanual de especificação do SVG, publicado pela própria W3C (SCALABLE …, 2010):

! SVG é uma aplicação de XML e é compatível com o Extensible Markup Language (XML) 1.0. Recomendação XML10 (2008) do W3C;

! SVG é compatível com os Namespaces em XML. Recomendação XML-NS(2006) do W3C;

! SVG utiliza XML Linking Language (XLink) para referenciar IRI e requersuporte para IRI especificações base definida em XML-BASE (2009) pelo W3C.

! Um conteúdo SVG pode ser denominado por uma CSS (Cascading StyleSheets), recomentado pelo W3C no CSS2 (2008); ou por um XSLT (XSLTransformations versão 1.0 e 2.0). Definidos nas normas XSLT (1999) eXSLT2 (2007) do W3C. Suportando assim, propriedades relevantes eabordagens comuns de CSS e XSL, além de semântica selecionados e ascaracterísticas de CSS.

! Folhas de estilo externas são referenciadas usando o mecanismo documentadoem Associando Style Sheets com documentos XML versão 1.0, especificado emXML-SS (1999) do W3C;

! Inclui um completo Document Object Model (DOM) e está em conformidadecom o Document Object Model (DOM) Level 1, recomendação DOM1 (1998).Além disso, o DOM SVG possui um alto nível de compatibilidade e coerênciacom o DOM HTML, suportando e integrando muitas das instalações descritasno DOM Nível 2, incluindo o modelo de objeto CSS e manipulação de eventos;

! O SVG incorpora algumas características e abordagens que fazem parte doSynchronized Multimedia Integration Language (SMIL 1.0). EspecificaçãoSMIL1 (1998), incluindo o "interruptor" e o elemento “systemLanguage”;

! Recursos de animação SVG foram desenvolvidas em colaboração com o W3C,

segundo a especificação SMIL1 (1998). Assim como, os recursos de animação



SVG de incorporar e ampliar o uso geral capacidades de animação XMLdescrito na animação SMIL especificado no SMILANIM (2001);

! O SVG foi projetado para permitir que futuras versões de SMIL para usardesenhos animados ou estáticos conteúdo SVG como componentes de mídia;

! O SVG empenha-se nas tentativas de alcançar a máxima compatibilidade com asverssões HTML 4 e XHTML 1.0. Muitas das instalações do SVG são modeladasdiretamente após HTML, incluindo o uso de CSS e a sua abordagem paramanipulação de eventos, por meio do DOM;

! SVG é compatível com o trabalho na internacionalização do W3C. Estando deacordo com as referências do UNICODE (2007) e do CHARMOD (2005);

! SVG é compatível com o trabalho de acessibilidade na web elaborado peloW3C, através do WCAG2 (2008), o qual explica como os autores podem criar

conteúdo da web que é acessível para pessoas com deficiência.Assim, em ambientes que suportam DOM para outras gramáticas XML (por

exemplo, XHTML) e que também suportam o DOM e SVG, uma abordagem descripting simples podem ser usados simultaneamente para ambos os documentos XML eSVG gráficos, em que o processo dinâmico e efeitos interativos serão possíveis emXML namespaces múltiplos utilizando o mesmo conjunto de scripts.

3.5.3.3 Mais leves

Arquivos no formato SVG acabam sendo mais compactos do que os formatostradicionais de imagens (como PNG, JPG e o BMP) já que na verdade são arquivos de

texto e não de pixels.Um exemplo disso, pode ser visto no trecho de código (Código 1), que mostra

um desenho simples criado e a sua respectiva codificação.

Desenho Código

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Camada_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="3000px" height="3000px" viewBox="0 0 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve">

<rect fill="#00E045" stroke="#000000" width="3000" height="3000"/>

</svg>

Código 1. Código de gráfico SVG. Fonte: O Autor (2010).

Por exemplo, na criação do trecho de código, pode-se analisar a diferença detamanho do ficheiro, de acordo com o formato utilizado para armazenar a mesmaimagem, inclusive em diversas resoluções no caso das imagens baseadas em pixels. ATabela 2 a seguir explana os dados em questão.



Desenho Formato Tamanho em pixels /resolução

Tamanho dearmazenamento

.svg 300 x 300 pixels / não possui 4 Kb

.svg 3000 x 3000 pixels / não possui 4 Kb

.png 300 x 300 pixels / 72 dpi 4 Kb

.png 3000 x 3000 pixels / 72 dpi 45 Kb

.jpg 300 x 300 pixels / 72 dpi 20 Kb

.jpg 3000 x 3000 pixels / 72 dpi 238 Kb

.bmp 300 x 300 pixels / 72 dpi 369 Kb

.bmp 3000 x 3000 pixels / 72 dpi 36.864 Kb

Tabela 2. Comparação de desempenho do SVG em relação a outras tecnologias.Fonte: O Autor (2010).

Os dados da Tabela 2 acima, estão ordenados por ordem de melhor desempenho,com o SVG no topo. Pode-se perceber também que o formato PNG, para o tamanho de300 x 300 pixels, se equipara ao SVG, porém quando aumentado para 3 mil pixels dedimensão o tamanho do arquivo aumenta. Salientando ao SVG, caracteristicas únicasquanto a leveza da imagem.

3.5.3.4 Extremamente extensível a objetos não nativos

O SVG é também extensível no sentido em que suporta extensões com capacidades defiltrar, podendo ser expansível a outras aplicações XML. “Por exemplo, trabalha comscripting, eventos e modelos de objetos definidos pelo DOM e pode ser alteradodinamicamente com CSS, mas pode ser também integrado com qualquer coisa comoanimação integrada” (COSTA, 2007).

Além disso, o SVG tem a capacidade habitual do XML em suportar objetosembutidos. Bitmaps podem ser disponibilizados na sintax do SVG através da tag <image>.

Os arquivos SVG também podem ter folhas de estilo ligados a eles, permitindoum controle de alto nível, uma vez que, um stylesheet pode ser aplicado a diferentes

ficheiros e usado para determinar a aparência do documento, mais ou menos como ostemplates do Word.

3.5.3.5 Trabalha com DOM

Aplicações sofisticadas de SVG são possíveis através da utilização de uma linguagemde script que acessa suplementar SVG Document Object Model (DOM), que forneceacesso completo a todos os elementos, atributos e propriedades.

Para além do scripting do lado do servidor, o SVG trabalha com o DOM,para permitir do lado do cliente, uma programação por eventos. Ou seja,coisas como rollovers de vetores que funcionam mesmo quando se faz zoom e objetos animados que são programados ao longo do écran são suportadas.

Porque o SVG partilha o espaço documental com outras coisas do DOM, asações no mundo SVG serão capazes de comunicar independentemente com



XHTML no browser (um clique num gráfico pode resultar no preenchimentode um campo de um form) (COSTA, 2007).

O Document Object Module (DOM) especifica um conjunto de interfaces de

programação para documentos XML e HTML. Define a estrutura lógica de umdocumento e a forma como uma aplicação pode manipulá-lo. O DOM para o SVGpermite uma eficiente animação de vetores gráficos através de scripting.

Por ser plenamente suportado pelo DOM é inteiramente programável. ImagensSVG ou partes de uma imagem SVG podem reagir aos cliques e aos movimentos domouse, originando mudanças, mudanças essas para os próprios gráficos ou para outrosobjetos que estejam na mesma página, tais como texto HTML ou outros gráficos(COSTA, 2007).

Graças a isso, o SVG é considerada uma linguagem de conteúdo gráfico rico.Por meio do DOM, um conjunto de manipuladores de eventos tais como 'onmouseover'

e 'onclick' pode ser atribuído a qualquer objeto gráfico SVG.

3.5.3.6 Atualização

A versão 2.0 do SVG já está em desenvolvimento, e irá adicionar novas características afacilidade de uso para SVG, bem como uma maior integração com HTML, CSS eDOM.

O SVG Group está atualmente a trabalhando em paralelo com um conjunto demódulos para alargar as especificações anteriores e adicionando funcionalidade paraCSS, SVG e as novas especificações terá duas combinar os módulos com o resto doquadro de SVG para trabalhar em toda a gama de dispositivos e plataformas

(SCALABLE …, 2010).

3.5.3.7 Não é proprietário

Para o movimento do software livre, um movimento social, não é ético aprisionar a umapatente um conhecimento científico, que deve estar sempre disponível, para assimpermitir a evolução da humanidade. Já o movimento pelo código aberto, que é ummovimento mais voltado ao mercado, prega que o software desse tipo traz diversasvantagens técnicas e econômicas. O segundo surgiu para levar as empresas a adotarem omodelo de desenvolvimento de software livre (CAMPOS, 2006).

Como um padrão livre e de código aberto, o SVG não pertence a nenhuma

companhia, ele é o resultado da cooperação entre líderes industriais.O SVG está disponível para qualquer companhia ou para individuais que o

queiram implementar, existem aplicações de várias companhias que suportam a criação,edição e viewing do SVG.

3.5.3.8 Melhor indexação aos buscadores

Através de gráficos como o SVG que são baseados em XML, ou seja, as imagens sãoformadas por textos, o conteúdo se torna pesquisável e editável.

Assim, com a habilidade para procurar elementos num texto, os desenhos em

SVG podem ser indexado por motores de busca ou procurados em browser pelos



utilizadores. Facilitando a identificação e a logalização das imagens pelos buscadores deconteúdo na Internet (COSTA, 2007).

3.5.3.10 Visualização das coresO SVG funciona bem sobre plataformas, resoluções de saída, cores espaçadas, e umafila de largura de banda, promovendo maior qualidade de visualização.

Devido ao seu modelo de cor fidedigno, o SVG imprime na tela com as mesmascores que o utilizador vê e com a máxima resolução de visualização; pois o controle decores superior do SVG oferece uma paleta de 16 milhões de cores.

3.5.4 O uso do SGV na criação de layouts para interfaces web

Há uma variedade de opções para a utilização de conteúdo SVG dentro de uma páginaweb. A seguir estão 4 das principais formas que um navegador pode interpretar e

mostrar o gráfico SVG ao usuário final, de acordo com o manual de referência do SGV,disponibilizados pelo W3C (SCALABLE, 2010).

! Através de um stand-alone SVG na página Web:

Neste caso, um documento SVG é carregado diretamente em um navegador web, ouseja, o documento SVG é a própria página web que é apresentada ao usuário.

! Incorporação por referência:

Neste caso, uma página web faz referência em separado ao documento SVG que estáarmazenado independentemente, incorporando o arquivo SVG através de umcomponente/elemento da página web. Para HTML ou XHTML, aqui estão três

opções:Elemento Descrição Código exemplo

img o tag <img> é o método maiscomum para a inserção de gráficosem páginas HTML, além de sersuprtado em todos os navegadores.

<img src="imagem.svg"height="100" width="300"alt=”imagem svg” />

object o tag <object> é um tag HTML4padrão e é suportado em todos osbrowsers.

<object data="imagem.svg"height="100" width="300"type="image/svg+xml"codebase="http://www.adobe.com/svg/viewer/install/" >

embed o tag <embed > é suportado em quasetodos os browsers principais.

Obs.: o tag <embed> não é alistadoem nenhumas especificações doHTML, por isso não é consideradouma forma válida, apesar defuncionar.

<embed src="imagem.svg"height="100" width="300"type="image/svg+xml"pluginspage="http://www.adobe.com/svg/viewer/install/" >

iframe o tag do <iframe> trabalha em quasetodos os browsers.

<iframe src="imagem.svg"height="100" width="300"



type="image/svg+xml"></iframe>

Tabela 3. Formas de incorporação por referência de arquivo SVG em documentoHTML. Fonte: O Autor (2010).

No exemplo acima os códigos representados na Tabela 3 acima, devem ser inseridosem um documeto do tipo HTML para o funcionamsento do mesmo.

! Incorporação inline

Neste caso, o conteúdo está incorporado inline SVG diretamente na homepage. Umexemplo (Código 2) é um XHTML página web com um fragmento de documentoSVG textualmente incluído no XHTML.

<html xmlns:svg="http://www.w3.org/2000/svg">

<body>

<p>Parágrafo em HTML</p>

<svg:svg width="300" height="100" version="1.1" >

<svg:circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</svg:svg>

</body>

</html>

Código 2. Forma de incorporação inline de arquivo SVG em documento HTML.Fonte: O Autor (2010).

Assim, no Código 2 acima, a parte grifada representa o código SVG e o restorepresenta o código HTML.

! Referenciado a partir de uma propriedade CSS

CSS é uma linguagem declarativa amplamente implementada para a atribuição depropriedades de estilo XML para conteúdo, incluindo SVG. Representa umacombinação de características, a simplicidade e a densidade que o torna muitoadequado para muitas aplicações de SVG. Além de ser uma exigência da W3C que oestilo CSS possa ser aplicado para o conteúdo SVG.

Um exemplo disso, pode ser visto no Código 3 abaixo, onde é representado o uso

com SVG com folhas de estilos através do um arquivo CSS externo, nomeado deestilo.css.

Arquivo estilo.css

rect {

fill: red;

stroke: blue;

stroke-width: 3

}

Arquivo principal que faz referência ao estilo.css<?xml version="1.0" standalone="no"?>



<?xml-stylesheet href="estilo.css" type="text/css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10cm" height="5cm"viewBox="0 0 1000 500">

<rect x="200" y="100" width="600" height="300"/>

</svg>

Código 3. Formatando SVG a partir de uma propriedade CSS externa.Fonte: O Autor (2010).

Existem outras formas de fazer referência a um estilo em uma página web, porém,através de link externo (como mostra o Código 3) é a recomendada pelo W3C.

3.5.5 Testes sobre o uso do SGV na criação de layouts para interfaces web

Acerca de tantas vantagens proporcionados pelo formato SVG em aplicações para web,resta saber como seria um site basedo nessa tecnologia. E como seria suadisponibilidade diante de tantos navegadores utilizados para o acesso ao mundo digital.

Os navegadores são cada vez mais importantes na forma como as pessoas usama internet, pois, é a base por onde elas interagem no mundo virtual. Assim, para que oSVG seja utilizado na web de forma eficaz, é necessário que os inúmeros navegadoresexistentes, implementem todas os funcionalidades proporcionados pelo SVG (MAIA,2010).

Nos últimos anos, o SVG está sendo implementado nativamente em váriosnavegadores, incluindo o Opera, Firefox e do WebKit (Safari e Google Chrome), em2009, a Microsoft anunciou que também apoiaria SVG nativamente no Internet

Explorer 9, arredondando os principais navegadores para suporte SVG, trazendo umcírculo completo a sua origem (PRADO, 2010).

Apesar da motivação em prol do SVG, nem todos os navegadores estãocompletamente implementados para suportar todos os elementos dessa tecnologia. Umaalternativa temporária, até que isso ocorra, seria o uso de um pluggin como o Adobe SVG Viewer.

Por isso o W3C cria e mantém suites de teste como parte de seu processo derecomendação, para reforçar a qualidade das suas especificações, garantindo que o textoé claro o suficiente para produzir dois ou mais interoperáveis implementaçõesindependentes para cada função (SCALABLE …, 2010).

Um dos objetivos do W3C como uma organização de padrões é o de promover ainteroperabilidade em toda a gama de dispositivos, plataformas e classes de agentes deusuário (como navegadores e ferramentas de criação de conteúdo).

Os resultados dos teste da W3C relativos ao SVG, estão disponíveis no link (http://dev.w3.org/SVG/profiles/1.1F2/test/harness/index.html), no qual indica umconjunto de implementações suportadas em cada recurso testado do SVG 1.1. O acervo

encontrado nesse endereço, possui um total de 465 testes que podem ser abertos e



testados em qualquer navegador. É importante salientar que a especificação W3C temcomo objetivo testar a tecnologia SVG, e não os navegadores.

Cada um dos 465 testes da W3C, é relativo a um dos muitos elementos do SVG,e esses 465 elementos foram testados em 5 diferentes formas de usar o SVG numapágina web, como pode ser visto na Tela 1 que representa a tela principal dos testes emquestão.

Tela 1. Tela principal da suite de testes do SVG realizados pela W3C.Fonte: SVG Test Suite (2010).

Os testes consistem em comparar uma imagem no formato PNG com outra noformato SVG. Um dos exemplo da suite de testes é mostrado na Tela 2 abaixo, que

representa o teste de número 465, no navegador Mozila Firefox.

Tela 2. Teste número 465 da suite de teste da W3C referente ao SVG.Fonte: SVG Test Suite (2010).

A Tela 2, mostrada acima, testa se o conteúdo de um objeto do tipo animVal ésomente leitura. Ele pode fazer uso de 7 elementos de animação: AnimatedNumberList ,

AnimatedLength, AnimatedLengthList , AnimatedAngle, AnimatedRect , AnimatedTransformList e AnimatedPreserveAspectRatio.



Uma vez carregado, o teste (Tela 2) mostra sete retângulos representando os setesub-testes que refletem o resultado da verificação do objeto animVal. Assim, oretângulo aparecerá em preto para indicar que o sub-teste não pode ser executado, em

vermelho para indicar que o sub-teste falhou, e verde para indicar que o sub-testepassou.

Como no teste acima, foram selecionados os principais navegadores da web (Google Chrome 6.0.472.59, Internet Explorer 8.0 Mozilla Firefox 3.6.8, Ópera 10.61,Safari 5.0.2) nas suas versões estáveis mais recentes e foi testado todos os 465 testes daW3C referentes ao formato SVG. E os resultados quanto ao funcionamento do SVG nosnavegadores é apresentado nos Graficos 1, 2, 3, 4 e 5 a seguir.

! Ópera 10.61:passou falhou teste incompleto

359 38 68

Gráfico 1. Desempenho do SVG no Ópera 10.61Fonte: O Autor (2010)

! Google Chrome 6.0.472.59:passou falhou teste incompleto

311 86 68

Gráfico 2. Desempenho do SVG no Google Chrome 6.0.472.59Fonte: O Autor (2010)



! Safari 5.0.2:passou falhou teste incompleto

293 104 68

Gráfico 3. Desempenho do SVG no Safari 5.0.2Fonte: O Autor (2010)

! Mozilla Firefox 3.6.8:passou falhou teste incompleto

222 175 68

Gráfico 4. Desempenho do SVG no Firefox 3.6.8Fonte: O Autor (2010)

! Internet Explorer 8.0:passou falhou teste incompleto

0 397 68



Gráfico 5. Desempenho do SVG no Explorer 8.0

Fonte: O Autor (2010)As fatias verdes nos gráficos acima, representam a porcentagem que o SVG é

suportado por cada navegador em questão. Já as fatias em cinza e em vermelhorepresentam os teste que ainda estão em desenvolvimento pela W3C e os que nãopassaram pelos critérios de aprovação respectivamente.

Os resultados completos desses testes podem ser encontados no endereço<http://www.naiarasebben.com.br/artigos/SVG>.

4. Conclusão

O SVG advem como uma importante ferramenta para web, visto que suporta o

escalonamento de imagens para diferentes tamanhos de displays, sem perda dequalidade e principalmente sem aumento no tamanho de armazenamento.

Apesar de não ser uma tecnologia nova, no ambiente web o SVG ainda éiniciante e com muitas barreiras a serem quebradas. Começando com o suporte nativoaos principais navegadores da web, referente a todas as funcionalidades do SVG, quehoje só é possivél com o auxilio de pluggins.

Como pode ser visto nos testes, que mostram que o Ópera, o Chrome e o Safari já suportam mais de 50% das funcionalidades do padrão. Seguidos pelo Firefox quesuporta quase 50% da tecnologia e do Internet Explorer que apesar das promessas jámencionadas neste trabalho sobre a sua versão 9.0, ainda não suporta o formato SVG.

Assim, o SVG é uma linguagem gráfica ainda em desenvolvimento, por estarazão este trabalho centrou-se na apresentação das capacidades e limitações do SVG.

Porém, com a promessa dos navegadores e com a pressão imposta pela W3C,para que o SVG se desenvolva rapidamenta na web juntamente com o HTML 5, poderáser presenciado, num futuro não muito distante, o surgimento de um novo paradigma decriação de desenho para Internet, ou seja, trata-se de uma linguagem poderosa que iráalterar o estado actual da web.

Com isso, é de suma importância que o desenvolvedor web tenha conhecimentode imagens SVG e de sua utilização/aplicação nos sistemas virtuais.

Sendo assim, por mais que ainda não possa ser usado em larga escala, aevolução tecnológica comprova que não se pode ficar a merce do desconhecimento das



novas tendencias da web, além disso, interfaces ricas estão se tornando um requisitobásico para aplicação na Internet.

Referências

Aberdeen Group. Frustração dos consumidores com desempenho de websitesimpacta nos negócios. Disponível em: <http://www.aberdeen.com>. Acesso em: 23

jul. 2010.

Alvarez, Miguel Angel. O futuro do desenvolvimento web: HTML 5. 2009.Disponível em: <http://www.criarweb.com/artigos/futuro-desenvolvimento-web-html-5.html>. Acesso em: 11 ago. 2010.

Amaral, Bruno do. Html 5.0 promete ser o futuro da navegao na internet. 2010.

Disponível em: <http://blog.primeiramao.com.br/index.php/2010/03/03/html5-promete-ser-o-futuro-da-navegao-na-internet>. Acesso em: 21 mai. 2010.

Ambrosi, Alain; Peugeot, Valérie; Pimienta, Daniel. Desafios de Palavras: EnfoquesMulticulturais sobre as Sociedades da Informação. C & F Éditions, 2005. Disponívelem: < http://www.vecam.org/article.php3?id_article=612&nemo=edm >. Acesso em:24 set. 2006.

Andrade, Antonio Luis Lordelo. Usabilidade de interfaces web: avaliação heurísticano jornalismo on-line. 1 ed. Editora E-papers, 2007. 142 pg.

Angeloni, Maria Terezinha. Organizações do Conhecimento: Infra-Estrutura, Pessoase Tecnologias, Editora Saraiva, São Paulo, 2005.

Batista, Claudia Regina. Modelo e Diretrizes para Processo de Design de InterfaceWeb Adaptativa. UFSC – Universidade Federal de Santa Catarina, 2008.Disponível em: < http://btd.egc.ufsc.br/wp-content/uploads/2010/06/Claudia-Regina-Batista.pdf >. Acesso em: 03 ago. 2010.

Bisneto. Achilles de Bylon Fróes. Gráficos Vetoriais em Jogos. Faculdades JorgeAmado, 2006. Disponível em:<http://www.programadoresdejogos.com/trab_academicos/achilles_froes.pdf>.Acesso em: 14 jun. 2010.

Campos, Augusto. O que é software livre. BR-Linux. Florianópolis, março de 2006.

Disponível em: <http://br-linux.org/linux/faq-softwarelivre>. Acesso em: 29 jul.2010.

Costa, Maria de Fátima. SVG (Scalable Vector Graphics). Universidade de Coimbra,Departamento de Engenharia Informática, 2007. Disponível em:<http://student.dei.uc.pt/~mcosta/smm.html>. Acesso em: 15 mai. 2010.

Falleiros, Dario Pimente. O Mundo Gráfico da Informática: Editoração eletrônica,Design gráfico & Artes digitais. São Paulo:Futura, 2003.

Fernandes, Amaury. Fundamentos de produção gráfica: para quem não é produtorgráfico. São Paulo: Rubio, 2003.

Ferreira, Danilo. HTML5. 2010. Disponível em:<http://www.webdesignblog.com.br/html5/#more-802>. Acesso em: 14 ago. 2010.



Html5. Consórcio World Wide Web - W3C. 2010 Disponível em: <http://www.w3c.br/cursos/html5/conteudo/>. Acesso em: 03 ago. 2010.

IDG Now! HTML 5: conheça a linguagem que vai revolucionar sua navegação na web.2009. Disponível em: <http://idgnow.uol.com.br/internet/2009/06/16/html-5-conheca-a-linguagem-que-vai-revolucionar-sua-navegacao-na-web/paginador/pagina_3>. Acesso em: 07 ago. 2010.

Lévy, Pierre. As tecnologias da inteligência: o futuro do pensamento na era dainformática. Trad. Carlos Irineu da Costa. – Rio de Janeiro: Ed. 34, 1993.

Maia, Rafael. Palestrantes defendem a importância de múltiplos navegadores.Redação Terra, 2010. Disponível em:<http://tecnologia.terra.com.br/noticias/0,,OI4581056-EI16771,00-Palestrantes+defendem+a+importancia+de+multiplos+navegadores.html>. Acessoem: 03 ago. 2010.

Martins, Gonçalo. Utilize correctamente imagens no seu website. 2009. Disponívelem: <http://weblouca.com/Artigos/utilize-correctamente-imagens-no-seu-website>.Acesso em: 21 mai. 2010.

Melo, Amanda M.; Baranauskas, Cecília C. Design e Avaliação de Tecnologia Web-acessível. Anais do XXV Congresso da Sociedade Brasileira de Computação, SãoLeopoldo, Universidade do Vale dos Sinos, Unisinos, 2005.

Moreira, Luis Miguel Coelho. Tamanho e resolução da imagem. FEUP - Faculdade deEngenharia da Universidade do Porto. 2008. Disponível em:<http://paginas.fe.up.pt/~ee03037/tmp/api11/imagem_resol.pdf>. Acesso em: 14 jun.

2010.Nepomuceno, Carlos; Cavalcanti, Marcos. O conhecimento em Rede. 1. ed. Editora:

Campus. 2006. 160 p.

Nora Koch. Reference Model, Modeling techniques and Development Process:Software Engineering for Adaptive Hypermedia Systems. KI-Journal (ArtificialIntelligence), Special Issue on Adaptivity and User Modeling, 2000. Disponível em:<http://www.pst.ifi.lmu.de/people/staff/koch/publications#2000>. Acesso em: 14

jun. 2010.

Prado, Francisco. Padrões Web: os resultados não combinam entre os navegadores.

2010. Disponível em: <http://franciscoprado.com.br/2010/04/24/padroes-web-navegadores-ie-svg-html5-javascript-flash-plugin-webstandards-browser-chrome-firefox>. Acesso em: 24 ago. 2010.

Queiroz, Marco Antonio de. Acessibilidade web, Usabilidade, Teclado e Leitores deTela. Originalmente publicado na Bengala Legallink para um novo site. 2006.Disponível em: http://acessodigital.net/art_maq_nocoes.html>. Acesso em: 03 ago.2010.

Ramos, Idmar Junior. Web Developer at Fundação CERTI. Universidade Federal deSanta Catarina, 2010.

S2 Comunicação Integrada. Frustração dos consumidores com desempenho de

websites impacta nos negócios. São Paulo: 2010. Disponível em:



<http://www.s2.com.br/ReleaseTexto.aspx?press_release_id=23401>. Acesso em: 12 jun. 2010.

Scalable Vector Graphics (SVG) 1.1. Consórcio World Wide Web - W3C. 2010Disponível em: <http://www.w3.org/TR/SVG/>. Acesso em: 07 ago. 2010.

Shneiderman, Ben. Designing the user interface: Strategies for effective Human-Computer Interaction. 3rd edition. Berkeley, California: Addison Wesley Longman,Inc., 1998.

Silva, Mauricio Samy. Criando Sites com HTML: Sites de Alta Qualidade com HTMLe CSS. Editora Novatec, 1ed. 2008. 432 p.

Sousa, Ribamar Ferreira de. Melhores práticas para um site mais rápido. Viva oLinux, 2009. Disponível em: <http://www.vivaolinux.com.br/dica/Melhores-praticas-para-um-site-mais-rapido>. Acesso em: 16 jabr. 2010.

Tangarife, Timóteo; Alvão, Cláudia Mont’. Estudo Comparativo Utilizando umaFerramenta de Avaliação de Acessibilidade para Web. Rio de Janeiro,Laboratório de Ergonomia e Usabilidade de Interfaces – LEUI, 2005. Disponível em:<http://delivery.acm.org/10.1145/1120000/1111394/p313-tangarife.pdf?key1=1111394&key2=2845492611&coll=&dl=acm&CFID=15151515&CFTOKEN=6184618 >. Acesso em: 29 nov. 2006.

Teixeira, Paulo Rodrigo. Web 2.0 BR: a evolução da web. Criador do 0BR, 2007.Disponível em: < http://web2.0br.com.br/conceito-web20/ >. Acesso em: 03 ago.2010.

Valese, Adriana; Lupinacci, Ana Lucia Ribeiro; Barbosa, Carlos Alberto. et al. Facesdo Design. Editora Rosari, 1 ed. 2003. 246 p.

W3C. What is SVG? Consórcio World Wide Web. Disponível em:<http://www.w3.org/Graphics/SVG>. Acesso em: 21 jul. 2010.

W3schools. Introduction to SVG. Online Web Tutorials, 2010. Disponível em:<http://www.w3schools.com/svg/svg_intro.asp >. Acesso em: 15 jul. 2010.

Graficos Vetoriais Escalaveis Na Criacao de Interfaces de Sistemas Para a Internet

Documents

Transcript of Graficos Vetoriais Escalaveis Na Criacao de Interfaces de Sistemas Para a Internet