Apostila Aplicativo Web Pronatec

5/25/2018 Apostila Aplicativo Web Pronatec

1/29

Aplicativos Web

Autor: Prof. Willamys Gomes Fonseca [email protected]


2/29

Sumrio

1 PLANEJAMENTO DE INTERFACE DE USURIO........................................................................... 31.1 O que seria Interface?....................................................................................................... 31.2 Por que estudar Interfaces?.............................................................................................. 31.3 Interface e Design............................................................................................................. 4

1.3.1 Visibilidade................................................................................................................ 41.3.2 Affordance................................................................................................................. 51.3.3 BonsMapeamentos................................................................................................... 51.3.4 Bom modelo conceitual............................................................................................. 61.3.5 Feedback.................................................................................................................... 7

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

2 IMAGENS PARA WEB................................................................................................................ 92.1 Modelos de Cor................................................................................................................. 92.2 Alguns tipos de arquivos de Imagem Digital.................................................................... 102.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................................................................................................................... 274 REFERNCIAS......................................................................................................................... 29


3/29

3

1 PLANEJAMENTO DE INTERFACE DE USURIO1.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 docomputador.

1.2 Por que estudar Interfaces?A qualidade da interface determina se os usurios aceitam ou recusam o sistema. necessrioestabelecer um bom nvel de conversao entre o usurio e o sistema computacional, as interfacesso modelos para tal.

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

Figura 1Expectativa 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 mundopossui a mesma familiaridade com as novas tecnologias, nesse caso deve-se observar comoromper essa barreira tecnolgica, uma vez que:

Usurios novatos ficam apreensivos; Ficam com medo de estragar algo; Sentem pnico de possveis mensagens de erro;


4/29

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 2Problema ao desconhecer que tipo de usurio a interface deve atender.

1.3 Interface e DesignA interface est inteiramente ligada ao design, nesse sentido deve-se saber quais os seus princpiosbsicos para assim podermos desenvolver boas aplicaes web. A seguir sero apresentados essesprincpios.

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

1.3.1 VisibilidadeApenas 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 asaes reais.


5/29

5

Figura 3A imagem com melhor visibilidade a 3.

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

1.3.2 AffordanceO Affordance se refere as propriedades percebidas e as propriedades reais de um objeto, quedeveriam determinar como ele deve ser usado .Quando se predomina affordanceem um objeto ousurio sabe o que fazer somente olhando para ele, sem necessidades de elementos adicionais,

como figuras, rtulos e etc.

Figura 4Objetos que possuem affordance.

1.3.3 BonsMapeamentosMapeamento o termo utilizado para denotar relacionamento entre duas entidades. Eminterfaces o relacionamento entre os controles e seus movimentos. Ele est ligado ao sentido demovimento ou navegao entre as partes do objeto ou aplicao.

1 2

3


6/29

6

Figura 5Navegao em um browser

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


7/29

7

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

Figura 7Feedback

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

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 informaoQuando 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 sercapaz de perceber: o que ela e como us-la sem fazer nenhum esforo. A pgina deve serevidente o bastante para que uma pessoa leiga e que no tem nenhum interesse em seu site, aov-lo possa olhar para sua pgina e dizer que a achou interessante. Veja a Figura 8.


8/29

8

Figura 8Ao 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 9Site que faz o usurio ficar confuso.

Algumas coisas fazem com que pensamos mais ou menos ao acessar uma pgina web. Porexemplo, 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 10Coisas que nos fazem pensar.


9/29

9

2 IMAGENS PARA WEB2.1 Modelos de CorOs 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 scannersseguem o modelo RGB. Zonas claras denotam elevadas concentraes de tinta ou pigmentao, aopasso que zonas escuras denotam baixas concentraes de tinta. Formatos RGB, tambmconhecidos 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 bitsso imagens RGB.

Figura 11 - RGB

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

Figura 12CMYK

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


10/29

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 valor0% 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% indicaque a cor muito escura (ou preta) e o valor 100% indica que normal.

Figura 13 - HSB

2.2Alguns tipos de arquivos de Imagem DigitalOs 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 transmitirimagens pelas linhas telefnicas via modem. Suas imagens no possuem meio de compresso. Usao algoritmo de Lempel-Ziv-Welch (uma forma de codificao Huffmann) ligeiramente modificadopara 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 sroyalities da sua patente.

Figura 14Imagem 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/29

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 compressocom-perdas.Tira vantagem das limitaes do sistema de viso humana por forma a atingir elevadastaxas de compresso. Ao salvar um arquivo JPEG, podemos escolher um nvel baixo ou elevado decompresso. Um nvel baixo implica maior qualidade de imagem, mas tambm um tamanho maiordo arquivo. Possui uma resoluo de cor: at 24 bits.

Figura 16Imagem 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 maistarde suportada pela Microsoft. A Compresso sem perdas que permite ao utilizador ativar o nveldesejado de qualidade/compresso. No tem qualquer vantagem sobre o JPEG, no sendocontrolvel pelo utilizador, o que parece ser a razo de ser do seu declnio.

2.3 Ferramenta de Edio de ImagensAtualmente, os programas de imagem est sendo cada vez mais utilizados, seja para fazerilustraes, criar lbuns, redimensionar e editar imagens ou simplesmente compartilhar com

1 2


12/29

12

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

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

2.3.1Alguns Editores de Imagens ou Desenho Vetorial PagosAdobe Photoshop

O programa lei quando se fala em edio de imagens. Conquistou a sua fama com totalmerecimento, afinal o mais profissional editor de imagens e, mesmo assim, no perde a suainterface 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 deaplicativos da Adobe fantstica, sendo que voc pode at mesmo criar objetos em 3D (a partir daverso CS4) e exportar para um projeto do Adobe After Effects, por exemplo. Se voc procura porum editor profissional e que d resultados excelentes, com certeza voc deve optar peloPhotoshop.

Adobe Illustrator

Antigamente quem reinava quando se falava em desenhos vetoriais era o Corel Draw (apesar demuitas pessoas ainda considerarem ele o melhor, pois questo de preferncia). Quando oIllustrator 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, oprograma pago.

2.3.2Alguns Editores de Imagens ou Desenho Vetorial GratuitosThe Gimp

um timo substituto do famoso e pago editor de imagens da Adobe listado logo acima. Sendoassim, 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 maiscomuns do Photoshop, como ferramentas de seleo, pincis, degrads, texturas e at mesmovetores.

Inkscape

Muitos usurios consideram este um programa fantstico para a utilizao de vetores. Issoprincipalmente por ser grtis e, mesmo assim, trazer muitas ferramentas presentes em programascomo o Corel Draw e o Adobe Illustrator. Nem a sua interface muito diferente dos outrosprogramas, 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
http://www.baixaki.com.br/download/inkscape.htmhttp://www.baixaki.com.br/download/inkscape.htm


13/29

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 InkscapeInkscape um software livre para editorao eletrnica de imagens e documentos vetoriais, combase numa verso mais avanada do antigo Sodipodi no qual teve origem. Trata-se assim de umfork considerado de sucesso.

Utiliza o mtodo vetorial, ou seja, gera imagens a partir de um caminho de pontos definindo suascoordenadas, de forma transparente ao usurio. Imagens vetoriais tm maior aplicao emdesenho tcnico ou artstico e so, geralmente, mais leves e no perdem a qualidade ao sofrertransformaes, como redimensionamento ou giro, em oposio aos formatos bitmap, pese

embora o fato dos formatos vetoriais ainda no possuem capacidade direta para lidar comcaptao de fotografias em tempo real, pelo que na maior parte das aplicaes tecnolgicas decaptao de imagem, os formatos bitmap ainda so considerados padro.

O Inkscape trabalha nativamente com o formato SVG (Scalable Vectorial Graphics), um formatoaberto de imagens vetoriais, nomeadamente, uma subdefinio (DTD) da linguagem XML definidopela W3C. O aplicativo tambm exporta para o popular formato da Internet PNG e importa vriosformatos 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.1Interface grficaA equipe de desenvolvimento do Inkscape intenciona manter uma interface simples, pormextensivel, facilitando o uso do iniciante e do profissional. Efeitos (criados em virtualmentequalquer linguagem) estendem o menu do Inkscape. Em 2007, os desenvolvedores trabalharam naimplementao de janelas encaixveis, como j possvel no GIMP.

Imagens bitmap includas no desenho no so diretamente incorporadas ao SVG, sendo antesreferncias 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, mltiplascamadas e todos os recursos necessrios para desenho vetorial.

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


14/29

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 ferramentaativa no momento;

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

5. rea de desenho: Apesar de voc poder desenhar em qualquer lugar desta rea, oretngulo no meio auxilia como a exibio de uma folha de papel. Nas configuraespadro, 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/29

15

2.3.3.2Logomarca do InstitutoComo uma forma de familiarizar com as ferramentas que o Inskcape possui ser mostrado passo apasso 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 18Logomarca do IFCE

2.3.3.3Configurando o documentoAntes 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 menutextual Ficheiro (File), clique em Propriedades do Desenho... (Document Properties...). Na telaque 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 19Configurando documento


16/29

16

2.3.3.4Ferramenta zoomAo selecionar o novo tamanho a pgina se modifica, mas fica muito pequena para sertrabalhada. 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 inwindow), que est destacada pelo cursor do mouse na Figura 20. Clique na Ferramenta Zoom nabarra 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.5Ferramenta retangulos e quadradosCom a pgina ajustada, ser utilizada a ferramenta retangulos e quadrados (Create rectangles andsquare)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 21Ferramenta de retngulos e quadrados, atalho F4


17/29

17

2.3.3.6Pintura do traoPara este trabalho, especificamente, o trao de borda ir atrapalhar. Pode ser removidoselecionando 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.7Ferramenta seleo e transformao de objetos necessrio agora deixar o quadrado como deve ser. Antes um aviso importante. Inkscape capazde trabalhar com subdivises de pixel. Isto muito bom, mas na hora de gerar imagens, podecausar problemas. Para resolver isto, necessrio que quando voc crie alguma ilustrao, useapenas valores redondos de pixel.

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


18/29

18

Figura 23Ferramenta de seleo, atalho F1.

2.3.3.8PreenchimentoAgora, vamos fazer o preenchimento. Abra a caixa Preenchimento e Trao (F ill and Stroke),

como fizemos anteriormente para apagar a borda do quadrado, na Figura 24, o coneapontado pela quadrado vermelho. Depois selecione a aba Preenchimento (Fill),apontada pelaseta azul. Esta aba guarda as configuraes de preenchimento que podem ser Cor Lisa, DegradLinear, Degrad Radial, Padro e Swatch.

Selecione Cor Lisa (Flat Color)que est apontado por uma seta verde. Clique no botoCMYKqueest 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/29

19

Figura 24Preenchimento e Trao

2.3.3.9Inserindo curva no retngulo ou quadradoCom 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 mesmosvalores, como na F igura 25.

Figura 25Arredondando as bordas


20/29

20

2.3.3.10 Duplicando quadrados e posicionando-osSer necessrio duplicar este quadrado. Para isso voc pode selecionar no menu textualEditar (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 cimado anterior. Nesse momento ter que ser definida a posio desse novo quadrado. O calculo daposio do quadrado ser da seguinte forma:

2.3.3.11 Primeira coluna de quadradosPosio 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/29

21

Figura 27 - Primeira coluna de quadrados

2.3.3.12 Segunda coluna de quadradosDuplicando 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 F igura 28.

Figura 28Segunda coluna de quadrados


22/29

22

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

Figura 29 - Segunda coluna de quadradosMas na Logomarca com IFCE a segunda coluna possui 4 quadrados, nesse caso devemos adicionarmais um quadrado acima. Para Isso devemos duplicar o primeiro quadrado da segunda coluna efazermos o mesmo calculo, porm para a Posio Y para Cima.Veja a formula na seo da primeiracoluna.

2.3.3.13 Terceira coluna de quadradosDevemos relembrar que a logomarca do IFCE na sua coluna trs s temos quadrados na primeira eterceira 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. VejaFigura 30.


23/29

23

Figura 30Terceira coluna

2.3.3.14 Ferramenta crculo, elipse e arcosCom 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 umquadrado vermelho. Agora, vamos fazer o preenchimento. Siga o mesmo procedimento parapreenchimento dos quadrados, porm a cor que se deve definir para o circulo 0C, 100M, 100Y,0K, 100A.

Figura 31Logo do IFCE quase pronta.


24/29

24

2.3.3.15 Ferramenta textoVamos colocar o texto da logomarca pra finalizarmos.

Selecione a ferramenta Criar e Alterar Blocos de Texto (Creat and Edit text objects), na Barrade Ferramentas. Observe sua localizao na Figura 32. Na Barra de Controle escolha a fonteMyriad Proe um tamanho 15e negrito. Digite o Texto INSTITUTO FEDERALe posicione o nomena mesma linha do quadrado da linha 3. Na Figura 32 o retngulo vermelho est destacando alocalizao destes controles, observe tambm o posicionamento do texto.

Voc pode arrastar o texto utilizando a ferramenta de Seleo (Select). Para isso, basta clicarno objeto e arrastar para a nova posio.

Figura 32Logomarca com Texto INSTITUTO FEDERAL

Agora para colocarmos o nome Cear teremos que irna Barra de Controle escolha a fonte HelveticaRounded Condensede um tamanho 15e negrito. Digite o Texto CEARe posicione o nome namesma linha do quadrado da linha 2 e com 2.5 de distncia entre abaixo do no INSTITUTOFEDERAL. Se a fonte no estiver disponvel em seu computador, voc deve fazer o download noseguinte 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 Iniciare 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.
http://www.helveticafontdownload.com/free-helvetica-font-helvetica-rounded-complete.htmlhttp://www.helveticafontdownload.com/free-helvetica-font-helvetica-rounded-complete.htmlhttp://www.helveticafontdownload.com/free-helvetica-font-helvetica-rounded-complete.htmlhttp://www.helveticafontdownload.com/free-helvetica-font-helvetica-rounded-complete.htmlhttp://www.helveticafontdownload.com/free-helvetica-font-helvetica-rounded-complete.html


25/29

25

5. Para que a fonte fique disponvel no Inkscape, necessrio que feche e abra o programa, mas antesSALVE 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 ExportBitmap. Ir abrir essa Janela (Figura 34) e na ExportArea, selecione Page. Onde tem FIlenamesignifica o local em que voc deseja salvar o seu arquivo. Aps issso clique em Export. Pronto.Temos a Logomarca do IFCE pronta.

Figura 34Exportar Bitmap


26/29

26

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


27/29

27

3 APENDICE I - SVGO 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 sercompactados 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 ilustraesvetoriais para a web, em comparao a outros formatos. Alm disso, ele utilizado para salvar asilustraes realizadas no Inkscape, programa que veremos mais adiante. Por estascaractersticas, 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 atroca de documentos pela internet, o SVG foi determinado como um padro aberto. Isto querdizer 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, Inkscapepodem abrir e salvar neste formato. No s programas de desenho como tambm osnavegadores, 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 seremcompreendidos, possibilitando seu uso junto do cdigo HTML. Vocs vero HTML na disciplina deWeb 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. Aolado do cdigo est o que exibido pelo navegador.


28/29

28

Figura 36 - esquerda o cdigo de uma pgina web simples. Em destaque azul, o comando de criao de umcrculo, sua posio, seu raio, cor contorno, largura do contorno e cor de preenchimento. No lado direito oresultado.


29/29

29

4 REFERNCIASKRUG, S. No me faa pensar abordagem do bom senso a navegabilidade da web.Editora MarketBooks, 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 Estadode 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 de2013.

Date post:	15-Oct-2015
Category:	Documents
Upload:	waldireng8072
View:	24 times
Download:	3 times

Apostila Aplicativo Web Pronatec

Documents