Aplicativos Web

Autor: Prof. Willamys Gomes Fonseca Arajo

willamys.araujo@ifce.edu.br

Sumrio

1 PLANEJAMENTO DE INTERFACE DE USURIO ........................................................................... 3

1.1 O que seria Interface? ....................................................................................................... 3 1.2 Por que estudar Interfaces? .............................................................................................. 3 1.3 Interface e Design ............................................................................................................. 4

1.3.1 Visibilidade ................................................................................................................ 4 1.3.2 Affordance ................................................................................................................. 5 1.3.3 Bons Mapeamentos ................................................................................................... 5 1.3.4 Bom modelo conceitual ............................................................................................. 6 1.3.5 Feedback.................................................................................................................... 7

1.4 Como objetivar a informao ............................................................................................ 7 1.4.1 Na web: no me faa pensar! ..................................................................................... 7

2 IMAGENS PARA WEB ................................................................................................................ 9 2.1 Modelos de Cor................................................................................................................. 9 2.2 Alguns tipos de arquivos de Imagem Digital .................................................................... 10 2.3 Ferramenta de Edio de Imagens................................................................................... 11

2.3.1 Alguns Editores de Imagens ou Desenho Vetorial Pagos ........................................... 12 2.3.2 Alguns Editores de Imagens ou Desenho Vetorial Gratuitos ...................................... 12 2.3.3 Editorao de imagem com Inkscape ....................................................................... 13

3 APENDICE I - SVG ................................................................................................................... 27 4 REFERNCIAS ......................................................................................................................... 29

3

1 PLANEJAMENTO DE INTERFACE DE USURIO

1.1 O que seria Interface?

o conjunto de comandos de controle do usurio unida com as respotas do computador, constitudos por sinais grficos, acsticos e tcteis), por exemplo podemos citar a tela do computador.

1.2 Por que estudar Interfaces?

A qualidade da interface determina se os usurios aceitam ou recusam o sistema. necessrio estabelecer um bom nvel de conversao entre o usurio e o sistema computacional, as interfaces so modelos para tal.

Uma boa expectativa que a interfaces nos proporcionam que ao interagirmos com objetos conhecidos, esperamos um comportamento baseado em experincias passadas, por exemplo, quando vamos abrir uma torneira, a mesma deveria abrir no sentido anti-horrio, caso contrrio teramos o problema da Figura 1.

Figura 1 Expectativa de abrir a torneira, s vezes pode ser contrria se a interface no for bem definida.

Para o desenvolvimento das interfaces deve-se ter uma preparao, conduzindo o estudo:

Sabendo os momentos de pensar como tcnico/projetista;

Para produzir tecnologia que auxilie humanos, necessrio antes conhece-los;

Estudar em primeiro plano as necessidades dos usurios e no as tecnologias disponveis;

Aproveitar os conhecimentos do usurio e torna-lo um parceiro no desenvolvimento.

Algumas preocupaes com usurio e o software devem ser priorizadas, pois nem todo mundo possui a mesma familiaridade com as novas tecnologias, nesse caso deve-se observar como romper essa barreira tecnolgica, uma vez que:

Usurios novatos ficam apreensivos;

Ficam com medo de estragar algo;

Sentem pnico de possveis mensagens de erro;

4

Dessa forma, quando melhor projetada a interface que venha a ser implementada para usurio, mais confiana este ter em utilizar a sua aplicao.

Figura 2 Problema ao desconhecer que tipo de usurio a interface deve atender.

1.3 Interface e Design

A interface est inteiramente ligada ao design, nesse sentido deve-se saber quais os seus princpios bsicos para assim podermos desenvolver boas aplicaes web. A seguir sero apresentados esses princpios.

Os princpios de design so: Visibilidade, Affordance, Bom modelo conceitual, bons Mapeamentos e Feedback.

1.3.1 Visibilidade

Apenas as coisas necessrias tem que estar visveis, para indicar quais as partes podem ser operadas e como. Deve indicar o mapeamento entre aes pretendidas e as aes pretendidas e as aes reais.

5

Figura 3 A imagem com melhor visibilidade a 3.

Das trs imagens a que mais indicada seria a 3, pois as outras duas apresentam dois botes desnecessrios Enviar Arquivo, pois j se sabe que o processo de envio de arquivo e que ele j est sendo enviado, no sendo preciso o boto de enviar o arquivo.

1.3.2 Affordance

O Affordance se refere as propriedades percebidas e as propriedades reais de um objeto, que deveriam determinar como ele deve ser usado .Quando se predomina affordance em um objeto o usurio sabe o que fazer somente olhando para ele, sem necessidades de elementos adicionais, como figuras, rtulos e etc.

Figura 4 Objetos que possuem affordance.

1.3.3 Bons Mapeamentos

Mapeamento o termo utilizado para denotar relacionamento entre duas entidades. Em interfaces o relacionamento entre os controles e seus movimentos. Ele est ligado ao sentido de movimento ou navegao entre as partes do objeto ou aplicao.

1 2

3

6

Figura 5 Navegao em um browser

A Figura 5 alm de possuir bom mapeamento tambm possui outro principio bsico de design, o de affordance, uma vez que ao observar as indicaes da imagem -> e

7

1.3.5 Feedback

Retornar ao usurio a informao sobre as aes que foram feitas e quais os resultados obtidos.

Figura 7 Feedback

Alguns conceitos ou tipos de feedback que muitos utilizam em suas aplicaes so apresentadas abaixo.

Relgios

Ampulhetas

Indicadores o De unidade de lote; o Tipo manmetro; o Tipo cursor; o Tipo termmetro; o Contador regressivo/progressivo; o Barras de progresso.

1.4 Como objetivar a informao

Quando uma pgina na web desenvolvida ele deve ter a capacidade de ser entendida facilmente, nesse sentido foram propostas duas ideias.

1.4.1 Na web: no me faa pensar!

Ao olhar uma pgina web, ela deve ser evidente por si s, auto-explicativa. O usurio deve ser capaz de perceber: o que ela e como us-la sem fazer nenhum esforo. A pgina deve ser evidente o bastante para que uma pessoa leiga e que no tem nenhum interesse em seu site, ao v-lo possa olhar para sua pgina e dizer que a achou interessante. Veja a Figura 8.

8

Figura 8 Ao olhar uma pgina web sem pensar, os bales de pensamento do usurio dizem: Certo aqui o... e

isso um ... e aqui est o que quero.

Quando olhamos uma pgina web pensando, todos os bales de pensamento do usurio tm ponto de interrogao, ou seja, h confuso, medo de fazer algo errado.

Figura 9 Site que faz o usurio ficar confuso.

Algumas coisas fazem com que pensamos mais ou menos ao acessar uma pgina web. Por exemplo, suponha que o usurio est procurando emprego e encontra uma empresa na internet que deseja contratar algum com suas qualificaes. Uma palavra ou frase pode fazer a diferena.

Figura 10 Coisas que nos fazem pensar.

9

2 IMAGENS PARA WEB

2.1 Modelos de Cor

Os modelos de cores so dividas em RGB, CMYK e HSB.

O RGB um modelo aditivo. As cores so criadas por adio e mistura das cores primrias: RED, GREEN e BLUE. Funciona muito semelhana do olho humano. Os monitores e os scanners seguem o modelo RGB. Zonas claras denotam elevadas concentraes de tinta ou pigmentao, ao passo que zonas escuras denotam baixas concentraes de tinta. Formatos RGB, tambm conhecidos por true-color, usam 8-bits por canal. A paleta de pixis , pois, de 24-bits, ou seja, 16.7 milhes de cores (224=16777216 cores). Imagens JPEG de 16, 24 e 32 bits so imagens RGB.

Figura 11 - RGB

No CMYK as cores CYAN, MAGENTA, YELLOW existem na natureza, e a cor BLACK indica ausncia de cor. A cor BLACK foi adicionada ao modelo devido s necessidades das indstrias de edio de documentos em papel. O modelo baseia-se na forma como a natureza cria as suas cores, refletindo parte do espectro de luz e absorvendo outras. um modelo subtrativo. As cores so criadas pela reduo do efeito de outras, muito semelhana de processamento analgico de fotos. utilizado em impressoras. As zonas em branco indicam inexistncia de tinta ou pigmentao. As zonas escuras indicam concentrao de tinta.

Figura 12 CMYK

O modelo HSB baseia-se na percepo humana da cor (modelo de cor dos artistas plsticos).

10

representado por um sistema 3D de coordenadas polares.

HUE. a matiz ou cor. O seu valor varia entre 0 (vermelho), passando pelo laranja, amarelo, verde, azul, prpura, e 359 (novamente vermelho).

SATURATION. Fornece a vivacidade da cor. O seu valor percentual entre 0 e 100%. O valor 0% indica inexistncia de cor (ou branca) e o valor 100% indica cor normal (ou muito viva).

BRIGHTNESS. Fornece o brilho da cor. O seu valor tambm percentual, O valor 0% indica que a cor muito escura (ou preta) e o valor 100% indica que normal.

Figura 13 - HSB

2.2 Alguns tipos de arquivos de Imagem Digital

Os tipos de imagem esto divididos nesta apostila em:

GIF (Graphics Interchange Format) a cair em desuso

PNG (Portable Network Graphics)

JPEG (Joint Photographics Experts Group)

TIFF (Tagged Image File Format) a cair em desuso

O GIF foi Proposto pela Unisys Corp. e pela Compuserve. O Objetivo inicial era de transmitir imagens pelas linhas telefnicas via modem. Suas imagens no possuem meio de compresso. Usa o algoritmo de Lempel-Ziv-Welch (uma forma de codificao Huffmann) ligeiramente modificado para pacotes scan-line (linha de pixis). Suas imagens so limitadas a cores de 8-bits (paleta de 256 cores). Suporta transparncias (duma s cor) e animao bsica. Est a cair em desuso devido s royalities da sua patente.

Figura 14 Imagem GIF

O PNG Foi desenvolvido para substituir o formato GIF em ambiente Web. um formato sem-perdas, pois a compresso de ficheiros feita sem perder quaisquer dados. Possui Flexibilidade. As

11

imagens podem ser:

indexadas (ou baseadas em paleta)

em tons de cinzento

true-color (ou RGB) com resoluo at 48-bits.

Figura 15 - A imagem 1 um GIF e usa uma paleta de 155 cores. O tamanho do ficheiro de 5125 bytes. A imagem 2 um PNG e usa uma paleta idntica. O tamanho do ficheiro de 4253 bytes.

JPEG foi criada pelo Joint Photographics Experts Group. Utiliza-se de uma norma para compresso com-perdas.Tira vantagem das limitaes do sistema de viso humana por forma a atingir elevadas taxas de compresso. Ao salvar um arquivo JPEG, podemos escolher um nvel baixo ou elevado de compresso. Um nvel baixo implica maior qualidade de imagem, mas tambm um tamanho maior do arquivo. Possui uma resoluo de cor: at 24 bits.

Figura 16 Imagem JPEG

O TIFF uma norma para ficheiros de imagem sem compresso. Armazena vrios tipos de imagem: monocromtica, tons de cinzento, 8-bits, 24-bits, etc. Desenvolvida pela Aldus Corp., 1980, e mais tarde suportada pela Microsoft. A Compresso sem perdas que permite ao utilizador ativar o nvel desejado de qualidade/compresso. No tem qualquer vantagem sobre o JPEG, no sendo controlvel pelo utilizador, o que parece ser a razo de ser do seu declnio.

2.3 Ferramenta de Edio de Imagens

Atualmente, os programas de imagem est sendo cada vez mais utilizados, seja para fazer ilustraes, criar lbuns, redimensionar e editar imagens ou simplesmente compartilhar com

1 2

12

amigo. Para o desenvolvimento de aplicaes para web mais do que nunca se tem a necessidade de utilizao das imagens para no s deixar o site com uma aparncia melhor, mas para deixa-lo mais intuitivo.

No mercado existem diversos programas pagos e gratuitos, assim sero demonstrados alguns deles e depois ser falado em especifcio do qual ser usado na disciplina.

2.3.1 Alguns Editores de Imagens ou Desenho Vetorial Pagos

Adobe Photoshop

O programa lei quando se fala em edio de imagens. Conquistou a sua fama com total merecimento, afinal o mais profissional editor de imagens e, mesmo assim, no perde a sua interface simples e prtica. Na verdade, a cada nova verso, o programa sempre traz novidades que facilitam o uso de usurios ainda novatos no Photoshop.A sua integrao com a linha de aplicativos da Adobe fantstica, sendo que voc pode at mesmo criar objetos em 3D (a partir da verso CS4) e exportar para um projeto do Adobe After Effects, por exemplo. Se voc procura por um editor profissional e que d resultados excelentes, com certeza voc deve optar pelo Photoshop.

Adobe Illustrator

Antigamente quem reinava quando se falava em desenhos vetoriais era o Corel Draw (apesar de muitas pessoas ainda considerarem ele o melhor, pois questo de preferncia). Quando o Illustrator deu as caras com novas ferramentas e funes sensacionais, ganhou fama e passou a ser altamente utilizado por profissionais da rea de Design e Publicidade, por exemplo. Entretanto, o programa pago.

2.3.2 Alguns Editores de Imagens ou Desenho Vetorial Gratuitos

The Gimp

um timo substituto do famoso e pago editor de imagens da Adobe listado logo acima. Sendo assim, possvel dizer que o Gimp uma alternativa grtis ao Photoshop, j que traz uma grande variedade de ferramentas fiis ao programa da Adobe. O programa traz, ao menos, as funes mais comuns do Photoshop, como ferramentas de seleo, pincis, degrads, texturas e at mesmo vetores.

Inkscape

Muitos usurios consideram este um programa fantstico para a utilizao de vetores. Isso principalmente por ser grtis e, mesmo assim, trazer muitas ferramentas presentes em programas como o Corel Draw e o Adobe Illustrator. Nem a sua interface muito diferente dos outros programas, no sendo difcil familiarizar-se com ele.

Alm de tudo, o usurio tem total liberdade para criar os seus prprios efeitos manualmente. claro que as ferramentas bsicas para programas vetoriais esto disponveis, como a edio de ns

13

e a prpria vetorizao por exemplo.

Este ultimo o que ser objeto de estudo na etapa final dessa disciplina.

2.3.3 Editorao de imagem com Inkscape

Inkscape um software livre para editorao eletrnica de imagens e documentos vetoriais, com base numa verso mais avanada do antigo Sodipodi no qual teve origem. Trata-se assim de um fork considerado de sucesso.

Utiliza o mtodo vetorial, ou seja, gera imagens a partir de um caminho de pontos definindo suas coordenadas, de forma transparente ao usurio. Imagens vetoriais tm maior aplicao em desenho tcnico ou artstico e so, geralmente, mais leves e no perdem a qualidade ao sofrer transformaes, como redimensionamento ou giro, em oposio aos formatos bitmap, pese embora o fato dos formatos vetoriais ainda no possuem capacidade direta para lidar com captao de fotografias em tempo real, pelo que na maior parte das aplicaes tecnolgicas de captao de imagem, os formatos bitmap ainda so considerados padro.

O Inkscape trabalha nativamente com o formato SVG (Scalable Vectorial Graphics), um formato aberto de imagens vetoriais, nomeadamente, uma subdefinio (DTD) da linguagem XML definido pela W3C. O aplicativo tambm exporta para o popular formato da Internet PNG e importa vrios formatos vetoriais ou bitmap, como por exemplo: TIFF, GIF, JPG, AI, PDF, PS, entre outros.

Veja mais informaes sobre o SVG no Apndice I.

2.3.3.1 Interface grfica

A equipe de desenvolvimento do Inkscape intenciona manter uma interface simples, porm extensivel, facilitando o uso do iniciante e do profissional. Efeitos (criados em virtualmente qualquer linguagem) estendem o menu do Inkscape. Em 2007, os desenvolvedores trabalharam na implementao de janelas encaixveis, como j possvel no GIMP.

Imagens bitmap includas no desenho no so diretamente incorporadas ao SVG, sendo antes referncias a arquivos externos, como acontece no HTML; entretanto, o usurio pode usar o efeito "Embed All Images" para incorporar os bitmaps ao arquivo SVG.

Trabalha com edio de ns, transparncia, anti-aliasing, textos, degrads, vetorizao, mltiplas camadas e todos os recursos necessrios para desenho vetorial.

um software relativamente novo que conta com uma equipe de desenvolvedores com ritmo de trabalho considerado muito rpido. Algumas correntes de analistas tecnolgicos consideram que tem potencial para a curto e mdio prazo concorrer em p de igualdade com outros programas de desenho e manipulao vetorial j existentes do mercado, como o caso do Corel Draw, do Illustrator ou do Adobe Indesign, ambos softwares proprietrios. A Figura 17, mostra a interface grfica do inkscape.

14

Figura 17 - Interface Grfica do Inkscape

A seguir so detalhas as informaes que foram destacadas na Figura 17.

1. Menu Textual: menu em que os comandos e controles so exibidos de forma textual;

2. Comandos: barra de cones com os comandos. Tambm podem ser encontrados no menu textual;

3. Controles: barra sensvel ao contexto que exibe os controles referentes ferramenta ativa no momento;

4. Caixa de Ferramentas: barra com as ferramentas que o sistema disponibiliza para realizao do trabalho;

5. rea de desenho: Apesar de voc poder desenhar em qualquer lugar desta rea, o retngulo no meio auxilia como a exibio de uma folha de papel. Nas configuraes padro, esta a rea que ser impressa;

6. Cores: Exibe as cores de preenchimento e borda do objeto selecionado;

7. Camada: Exibe a camada ativa no momento, junto com suas configuraes de exibio e bloqueio;

8. Paleta de Cores: Disponibiliza as cores para uso;

9. Informaes: exibe informaes referentes ao contexto;

10. Zoom: caixa com opes de magnificncia do documento.

15

2.3.3.2 Logomarca do Instituto

Como uma forma de familiarizar com as ferramentas que o Inskcape possui ser mostrado passo a passo a construo da logomarca do Instituto Federal de Educao, Cincia e Tecnologia do Cear. Ao final da criao da imagem espera-se que a mesma se assemelhe a Figura 18, vista abaixo.

Figura 18 Logomarca do IFCE

2.3.3.3 Configurando o documento

Antes de iniciarmos cada projeto devemos configurar o documento. Por padro o Inkscape configurado para pginas A4, mas ele tem diversas pr-configuraes de tamanho. No menu textual Ficheiro (File), clique em Propriedades do Desenho... (Document Properties...). Na tela que aparecer, em Stage Size, selecione Business Card (US) 2.0 x 3.5 in que equivale a 315 x 180 px. Esta configurao nos dar uma rea em pixels para ser desenhada a logomarca. Veja a Figura 19.

Figura 19 Configurando documento

16

2.3.3.4 Ferramenta zoom

Ao selecionar o novo tamanho a pgina se modifica, mas fica muito pequena para ser trabalhada. A ferramenta Zoom oferece vrias formas de visualizao para que fique mais confortavel. Entre as vrias opes encontra-se a Caber a Pgina na Janela (Zoom to fit page in window), que est destacada pelo cursor do mouse na Figura 20. Clique na Ferramenta Zoom na barra de ferramentas e depois no cone destacado para ajustar a visualizao da pgina.

Figura 20 - Ferramenta Zoom, atalho F3. Ferramenta para caber a pgina na janela, atalho 5

2.3.3.5 Ferramenta retangulos e quadrados

Com a pgina ajustada, ser utilizada a ferramenta retangulos e quadrados (Create rectangles and square) para desenhar um quadrado na pgina. Selecione a ferramenta, clique e arraste na pgina. No se preocupe nem com tamanho, posio ou cores. Ajustaremos isto mais adiante.

Figura 21 Ferramenta de retngulos e quadrados, atalho F4

17

2.3.3.6 Pintura do trao

Para este trabalho, especificamente, o trao de borda ir atrapalhar. Pode ser removido selecionando no menu textual Objecto (Object), a opo Preenchimento e Trao (Fill and Stroke). Ir aparecer uma caixa de dilogo como na Figura 22, clique na aba Pintura de Trao (Stroke Paint), depois no x para retirar o cotorno.

Figura 22 - Painel Preenchimento e Trao, atalho Shift + Ctrol + F

2.3.3.7 Ferramenta seleo e transformao de objetos

necessrio agora deixar o quadrado como deve ser. Antes um aviso importante. Inkscape capaz de trabalhar com subdivises de pixel. Isto muito bom, mas na hora de gerar imagens, pode causar problemas. Para resolver isto, necessrio que quando voc crie alguma ilustrao, use apenas valores redondos de pixel.

Ser demonstrada estas correes. Na Barra de Ferramentas clique na ferramenta Seleo e Transformao de Objetos (Selects and transform objects) e no quadrado. Veja na Figura 23, na parte destacada em vermelho, a posio x e y do objeto, a largura em w, a altura em h. Deixe como na figura.

18

Figura 23 Ferramenta de seleo, atalho F1.

2.3.3.8 Preenchimento

Agora, vamos fazer o preenchimento. Abra a caixa Preenchimento e Trao (Fill and Stroke), como fizemos anteriormente para apagar a borda do quadrado, na Figura 24, o cone apontado pela quadrado vermelho. Depois selecione a aba Preenchimento (Fill), apontada pela seta azul. Esta aba guarda as configuraes de preenchimento que podem ser Cor Lisa, Degrad Linear, Degrad Radial, Padro e Swatch.

Selecione Cor Lisa (Flat Color) que est apontado por uma seta verde. Clique no boto CMYK que est apontado pela seta laranja. A cor que deve-se definir para o quadrado verde 50C, 0M, 100Y, 25K, 100A, que est marcada com um quadrado amarelo.

19

Figura 24 Preenchimento e Trao

2.3.3.9 Inserindo curva no retngulo ou quadrado

Com a quadrado selecionada v na barra de ferramenta e selecione ferramenta retangulos e quadrados (Create rectangles and square). Na parte destaca em vermelho deixe com os mesmos valores, como na Figura 25.

Figura 25 Arredondando as bordas

20

2.3.3.10 Duplicando quadrados e posicionando-os

Ser necessrio duplicar este quadrado. Para isso voc pode selecionar no menu textual Editar (Edit) o item Duplicar (Duplicate), ou usar as teclas de atalho Ctrl + D. Lembre-se que o objeto a ser duplicado precisa estar selecionado.

Uma vez duplicado ser criado um quadrado idntico ao anterior, mas estar posicionado em cima do anterior. Nesse momento ter que ser definida a posio desse novo quadrado. O calculo da posio do quadrado ser da seguinte forma:

2.3.3.11 Primeira coluna de quadrados

Posio X: 30

Posio Y para cima: posio atual + tamanho do quadrado + 10% do tamanho do quadrado.

Posio Y para baixo: posio atual - tamanho do quadrado - 10% do tamanho do quadrado. Situao para o segundo quadrado em relao ao primeiro (92.5 - 25 -2.5 = 65).

Faa o processo at termos trs quadrados, um abaixo do outro. Veja a Figura 26 e 27.

Figura 26 - Primeira coluna de quadrados

21

Figura 27 - Primeira coluna de quadrados

2.3.3.12 Segunda coluna de quadrados

Duplicando o primeiro quadrado da primeira coluna, faa.

Posio X para direita: posio atual + tamanho do quadrado + 10% do tamanho do quadrado. Posio X = 30 + 25 +2.5 = 57.5. Posio Y : 92.5. Veja a Figura 28.

Figura 28 Segunda coluna de quadrados

22

Selecione o segundo quadrado da primeira coluna e o terceiro e repita o processo at termos a segunda coluna como na Figura 29.

Figura 29 - Segunda coluna de quadrados

Mas na Logomarca com IFCE a segunda coluna possui 4 quadrados, nesse caso devemos adicionar mais um quadrado acima. Para Isso devemos duplicar o primeiro quadrado da segunda coluna e fazermos o mesmo calculo, porm para a Posio Y para Cima. Veja a formula na seo da primeira coluna.

2.3.3.13 Terceira coluna de quadrados

Devemos relembrar que a logomarca do IFCE na sua coluna trs s temos quadrados na primeira e terceira linhas. Nesse sentido sero selecionados os quadrados 1 e 3 da segunda coluna.

Na Terceira duplicando o primeiro quadrado da primeira coluna, faa.

Posio X para direita: posio atual + tamanho do quadrado + 10% do tamanho do quadrado. Posio X = 57.5 + 25 +2.5 = 85.

Faa o mesmo calculo para o quadrado 3 da segunda coluna. Ao final desse processo teremos. Veja Figura 30.

23

Figura 30 Terceira coluna

2.3.3.14 Ferramenta crculo, elipse e arcos

Com a pgina ajustada, vamos utilizar a ferramenta Crculo, Elipse e Arcos (Create circles, ellipses, and arcs) para desenhar um crculo na pgina. Selecione a ferramenta, clique e arraste na pgina. O circulo na logomarca do IFCE deve preencher o espao que estvamos deixando entre os quadrados, assim as suas dimenses devem adicionar esse espao. Como o quadrado tem 25px, circulo deve possuir dimetro de 27.5 (25+2.5). Veja Figura 31 e suas dimenses marcadas com um quadrado vermelho. Agora, vamos fazer o preenchimento. Siga o mesmo procedimento para preenchimento dos quadrados, porm a cor que se deve definir para o circulo 0C, 100M, 100Y, 0K, 100A.

Figura 31 Logo do IFCE quase pronta.

24

2.3.3.15 Ferramenta texto

Vamos colocar o texto da logomarca pra finalizarmos. Selecione a ferramenta Criar e Alterar Blocos de Texto (Creat and Edit text objects), na Barra de Ferramentas. Observe sua localizao na Figura 32. Na Barra de Controle escolha a fonte Myriad Pro e um tamanho 15 e negrito. Digite o Texto INSTITUTO FEDERAL e posicione o nome na mesma linha do quadrado da linha 3. Na Figura 32 o retngulo vermelho est destacando a localizao destes controles, observe tambm o posicionamento do texto. Voc pode arrastar o texto utilizando a ferramenta de Seleo (Select). Para isso, basta clicar no objeto e arrastar para a nova posio.

Figura 32 Logomarca com Texto INSTITUTO FEDERAL

Agora para colocarmos o nome Cear teremos que irna Barra de Controle escolha a fonte Helvetica Rounded Condensed e um tamanho 15 e negrito. Digite o Texto CEAR e posicione o nome na mesma linha do quadrado da linha 2 e com 2.5 de distncia entre abaixo do no INSTITUTO FEDERAL. Se a fonte no estiver disponvel em seu computador, voc deve fazer o download no seguinte site: http://www.helveticafontdownload.com/free-helvetica-font-helvetica-rounded-complete.html. Extraia os arquivos em um local que v lembrar. Depois faa o seguinte:

1. Clique em Iniciar e em Executar.

2. Digite o seguinte comando e clique em OK:

%windir%\fonts

3. No menu Arquivo, clique em Instalar nova fonte.

4. Copie os arquivos que esto na pasta Helvetica Rounded e cole o seu contedo.

25

5. Para que a fonte fique disponvel no Inkscape, necessrio que feche e abra o programa, mas antes

SALVE sua logomarca em um lugar de fcil acesso.

6. Inicie o Inkscape, abra o seu arquivo e finalize a sua logomarca.

Aps tudo isso, teremos a logomarca conforme a Figura 33.

Figura 33 - Logomarca no Inkscape

Se quiser exportar a imagem para outro formato, v no menu File(Ficheiro) e depois em Export Bitmap. Ir abrir essa Janela (Figura 34) e na Export Area, selecione Page. Onde tem FIlename significa o local em que voc deseja salvar o seu arquivo. Aps issso clique em Export. Pronto. Temos a Logomarca do IFCE pronta.

Figura 34 Exportar Bitmap

26

Figura 35 - Logomarca do Instituto Federal de Educao, Cincia e Tecnologia do Cear.

27

3 APENDICE I - SVG

O Scable Vectorial Graphics ou, mais simplesmente, SVG pode guardar trs tipos de representao:

grficos vetoriais: formas geomtricas descritas atravs de comandos;

imagens bitmaps: imagens raster como fotografias;

texto: a informao sobre o texto guardada possibilita a edio posterior, o que no possvel quando o texto convertido em imagem raster ou grficos vetoriais.

Como o arquivo armazenado em formato textual, eles so bem pequenos e ainda podem ser compactados em GZIP, sem perda de dados e consequentemente, semperda de qualidade. Nestes casos, voc pode encontrar estes arquivos compactados com a extenso SVGZ.

Caractersticas do SVG

Vimos que o SVG se destaca por ser um excelente padro de armazenagem para ilustraes vetoriais para a web, em comparao a outros formatos. Alm disso, ele utilizado para salvar as ilustraes realizadas no Inkscape, programa que veremos mais adiante. Por estas caractersticas, vamos focar nosso estudo nele e conhec-lo melhor.

Padro Aberto

Por ser definido por um consrcio de vrias empresas que tem a inteno de padronizar a troca de documentos pela internet, o SVG foi determinado como um padro aberto. Isto quer dizer que a empresa que quiser utilizar o SVG poder, sem ter que pagar pelo seu uso. Para isto, basta seguir as regras definidas pelo padro.

Visualizao em Navegadores

Assim, vrios programas de criao vetorial, entre eles o Corel Draw, Illustrator, Inkscape podem abrir e salvar neste formato. No s programas de desenho como tambm os navegadores, como o Internet Explorer, Firefox, Chrome etc., em suas verses mais recentes, tambm podem visualiz-los.

Embutido em HTML

A W3C construiu o SVG derivado do XML. Ento, os comandos de criao so fceis de serem compreendidos, possibilitando seu uso junto do cdigo HTML. Vocs vero HTML na disciplina de Web Design que ser dada mais adiante. Observe a Figura 6, abaixo, perceba o cdigo HTML e, no meio, em destaque azul, o cdigo SVG de um crculo vermelho, com contorno preto. Ao lado do cdigo est o que exibido pelo navegador.

28

Figura 36 - esquerda o cdigo de uma pgina web simples. Em destaque azul, o comando de criao de um

crculo, sua posio, seu raio, cor contorno, largura do contorno e cor de preenchimento. No lado direito o

resultado.

29

4 REFERNCIAS KRUG, S. No me faa pensar abordagem do bom senso a navegabilidade da web. Editora Market Books, 2001.

LIMA, P. S. R.. Notas de Aula: Projeto de Interfaces para Aplicaes Web. UEPA/UFPA

MENDONA, E. M. Ilustrao Vetorial para WEB. . Secretaria de Educao do Governo do Estado de Pernambuco. Rede e-Tec Brasil. 2012 NILSEN, J. e TAHR, M. Homepage Usabilidade 50 Websites Desconstrudos. Editora Campus, 2002.

SHNEIDERMAN, B. A. W. Design the User Interface. Third Edition. 1998

WIKIPEDIA, SVG. Disponvel em . Acesso em 6 de Agosto de 2013.