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 <-, percebe-se a ideia de
seguir e voltar.
1.3.4 Bom modelo conceitual

Este permite prever o efeito de aes. Se no existe um bom modelo conceitual o usurio opera
utilizando tentativa e erro. Para que o modelo conceitual se torne claro desejvel um efetivo uso
de affordance.

Figura 6 Modelo conceitual da barra de ferramentas do Microsoft-Paint

No exemplo do Microsoft-Paint , o Modelo Conceitual da barra de ferramentas em parte claro,
porm alguns cones no possuem uma boa affordance.


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 <http://pt.wikipedia.org/wiki/SVG>. Acesso em 6 de Agosto de
2013.