Aplicativos Web. Autor: Prof. Willamys Gomes Fonseca Araújo

Transcrição

1 Aplicativos Web Autor: Prof. Willamys Gomes Fonseca Araújo

2 Sumário 1 PLANEJAMENTO DE INTERFACE DE USUÁRIO O que seria Interface? Por que estudar Interfaces? Interface e Design Visibilidade Affordance Bons Mapeamentos Bom modelo conceitual Feedback Como objetivar a informação Na web: não me faça pensar! IMAGENS PARA WEB Modelos de Cor Alguns tipos de arquivos de Imagem Digital Ferramenta de Edição de Imagens Alguns Editores de Imagens ou Desenho Vetorial Pagos Alguns Editores de Imagens ou Desenho Vetorial Gratuitos Editoração de imagem com Inkscape APENDICE I - SVG REFERÊNCIAS... 29

3 1 PLANEJAMENTO DE INTERFACE DE USUÁRIO 1.1 O que seria Interface? É o conjunto de comandos de controle do usuário unida com as respotas do computador, constituídos por sinais gráficos, acústicos e tácteis), por exemplo podemos citar a tela do computador. 1.2 Por que estudar Interfaces? A qualidade da interface determina se os usuários aceitam ou recusam o sistema. È necessário estabelecer um bom nível de conversação entre o usuário e o sistema computacional, as interfaces são modelos para tal. Uma boa expectativa que a interfaces nos proporcionam é que ao interagirmos com objetos conhecidos, esperamos um comportamento baseado em experiências passadas, por exemplo, quando vamos abrir uma torneira, a mesma deveria abrir no sentido anti-horário, caso contrário teríamos o problema da Figura 1. Figura 1 Expectativa de abrir a torneira, às vezes pode ser contrária se a interface não for bem definida. Para o desenvolvimento das interfaces deve-se ter uma preparação, conduzindo o estudo: Sabendo os momentos de pensar como técnico/projetista; Para produzir tecnologia que auxilie humanos, é necessário antes conhece-los; Estudar em primeiro plano as necessidades dos usuários e não as tecnologias disponíveis; Aproveitar os conhecimentos do usuário e torna-lo um parceiro no desenvolvimento. Algumas preocupações com usuário 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 tecnológica, uma vez que: Usuários novatos ficam apreensivos; Ficam com medo de estragar algo; Sentem pânico de possíveis mensagens de erro; 3

4 Dessa forma, quando melhor projetada a interface que venha a ser implementada para usuário, mais confiança este terá em utilizar a sua aplicação. 1.3 Interface e Design Figura 2 Problema ao desconhecer que tipo de usuário a interface deve atender. A interface está inteiramente ligada ao design, nesse sentido deve-se saber quais os seus princípios básicos para assim podermos desenvolver boas aplicações web. A seguir serão apresentados esses princípios. Os princípios de design são: Visibilidade, Affordance, Bom modelo conceitual, bons Mapeamentos e Feedback Visibilidade Apenas as coisas necessárias tem que estar visíveis, para indicar quais as partes podem ser operadas e como. Deve indicar o mapeamento entre ações pretendidas e as ações pretendidas e as ações reais. 4

5 1 2 Figura 3 A imagem com melhor visibilidade é a 3. 3 Das três imagens a que é mais indicada seria a 3, pois as outras duas apresentam dois botões desnecessários Enviar Arquivo, pois já se sabe que é o processo de envio de arquivo e que ele já está sendo enviado, não sendo preciso o botão de enviar o arquivo 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 usuário sabe o que fazer somente olhando para ele, sem necessidades de elementos adicionais, como figuras, rótulos e etc Bons Mapeamentos Figura 4 Objetos que possuem affordance. 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 navegação entre as partes do objeto ou aplicação. 5

6 Figura 5 Navegação em um browser A Figura 5 além de possuir bom mapeamento também possui outro principio básico de design, o de affordance, uma vez que ao observar as indicações da imagem -> e <-, percebe-se a ideia de seguir e voltar Bom modelo conceitual Este permite prever o efeito de ações. Se não existe um bom modelo conceitual o usuário opera utilizando tentativa e erro. Para que o modelo conceitual se torne claro é desejável 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, porém alguns ícones não possuem uma boa affordance. 6

7 1.3.5 Feedback Retornar ao usuário a informação sobre as ações que foram feitas e quais os resultados obtidos. Figura 7 Feedback Alguns conceitos ou tipos de feedback que muitos utilizam em suas aplicações são apresentadas abaixo. Relógios Ampulhetas Indicadores o De unidade de lote; o Tipo manômetro; o Tipo cursor; o Tipo termômetro; o Contador regressivo/progressivo; o Barras de progresso. 1.4 Como objetivar a informação Quando uma página na web é desenvolvida ele deve ter a capacidade de ser entendida facilmente, nesse sentido foram propostas duas ideias Na web: não me faça pensar! Ao olhar uma página web, ela deve ser evidente por si só, auto-explicativa. O usuário deve ser capaz de perceber: o que ela é e como usá-la sem fazer nenhum esforço. A página deve ser evidente o bastante para que uma pessoa leiga e que não tem nenhum interesse em seu site, ao vê-lo possa olhar para sua página e dizer que a achou interessante. Veja a Figura 8. 7

8 Figura 8 Ao olhar uma página web sem pensar, os balões de pensamento do usuário dizem: Certo aqui é o... e isso é um... e aqui está o que quero. Quando olhamos uma página web pensando, todos os balões de pensamento do usuário têm ponto de interrogação, ou seja, há confusão, medo de fazer algo errado. Figura 9 Site que faz o usuário ficar confuso. Algumas coisas fazem com que pensamos mais ou menos ao acessar uma página web. Por exemplo, suponha que o usuário está procurando emprego e encontra uma empresa na internet que deseja contratar alguém com suas qualificações. Uma palavra ou frase pode fazer a diferença. Figura 10 Coisas que nos fazem pensar. 8

9 2 IMAGENS PARA WEB 2.1 Modelos de Cor Os modelos de cores são dividas em RGB, CMYK e HSB. O RGB é um modelo aditivo. As cores são criadas por adição e mistura das cores primárias: RED, GREEN e BLUE. Funciona muito à semelhança do olho humano. Os monitores e os scanners seguem o modelo RGB. Zonas claras denotam elevadas concentrações de tinta ou pigmentação, ao passo que zonas escuras denotam baixas concentrações de tinta. Formatos RGB, também conhecidos por true-color, usam 8-bits por canal. A paleta de pixéis é, pois, de 24-bits, ou seja, 16.7 milhões de cores (224= cores). Imagens JPEG de 16, 24 e 32 bits são imagens RGB. Figura 11 - RGB No CMYK as cores CYAN, MAGENTA, YELLOW existem na natureza, e a cor BLACK indica ausência de cor. A cor BLACK foi adicionada ao modelo devido às necessidades das indústrias de edição 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 são criadas pela redução do efeito de outras, muito à semelhança de processamento analógico de fotos. É utilizado em impressoras. As zonas em branco indicam inexistência de tinta ou pigmentação. As zonas escuras indicam concentração de tinta. Figura 12 CMYK O modelo HSB baseia-se na percepção humana da cor (modelo de cor dos artistas plásticos). É 9

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, púrpura, e 359 (novamente vermelho). SATURATION. Fornece a vivacidade da cor. O seu valor é percentual entre 0 e 100%. O valor 0% indica inexistência de cor (ou branca) e o valor 100% indica cor normal (ou muito viva). BRIGHTNESS. Fornece o brilho da cor. O seu valor é também 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 estão 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 telefónicas via modem. Suas imagens não possuem meio de compressão. Usa o algoritmo de Lempel-Ziv-Welch (uma forma de codificação Huffmann) ligeiramente modificado para pacotes scan-line (linha de pixéis). Suas imagens são limitadas a cores de 8-bits (paleta de 256 cores). Suporta transparências (duma só cor) e animação básica. 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 semperdas, pois a compressão de ficheiros é feita sem perder quaisquer dados. Possui Flexibilidade. As 10

11 imagens podem ser: indexadas (ou baseadas em paleta) em tons de cinzento true-color (ou RGB) com resolução até 48-bits. 1 2 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 idêntica. O tamanho do ficheiro é de 4253 bytes. JPEG foi criada pelo Joint Photographics Experts Group. Utiliza-se de uma norma para compressão com-perdas.tira vantagem das limitações do sistema de visão humana por forma a atingir elevadas taxas de compressão. Ao salvar um arquivo JPEG, podemos escolher um nível baixo ou elevado de compressão. Um nível baixo implica maior qualidade de imagem, mas também um tamanho maior do arquivo. Possui uma resolução de cor: até 24 bits. Figura 16 Imagem JPEG O TIFF é uma norma para ficheiros de imagem sem compressão. Armazena vários tipos de imagem: monocromática, tons de cinzento, 8-bits, 24-bits, etc. Desenvolvida pela Aldus Corp., 1980, e mais tarde suportada pela Microsoft. A Compressão sem perdas que permite ao utilizador ativar o nível desejado de qualidade/compressão. Não tem qualquer vantagem sobre o JPEG, não sendo controlável pelo utilizador, o que parece ser a razão de ser do seu declínio. 2.3 Ferramenta de Edição de Imagens Atualmente, os programas de imagem está sendo cada vez mais utilizados, seja para fazer ilustrações, criar álbuns, redimensionar e editar imagens ou simplesmente compartilhar com 11

12 amigo. Para o desenvolvimento de aplicações para web mais do que nunca se tem a necessidade de utilização das imagens para não só deixar o site com uma aparência melhor, mas para deixa-lo mais intuitivo. No mercado existem diversos programas pagos e gratuitos, assim serão demonstrados alguns deles e depois será falado em especifício do qual será usado na disciplina Alguns Editores de Imagens ou Desenho Vetorial Pagos Adobe Photoshop O programa é lei quando se fala em edição de imagens. Conquistou a sua fama com total merecimento, afinal é o mais profissional editor de imagens e, mesmo assim, não perde a sua interface simples e prática. Na verdade, a cada nova versão, o programa sempre traz novidades que facilitam o uso de usuários ainda novatos no Photoshop.A sua integração com a linha de aplicativos da Adobe é fantástica, sendo que você pode até mesmo criar objetos em 3D (a partir da versão 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 é questão de preferência). Quando o Illustrator deu as caras com novas ferramentas e funções sensacionais, ganhou fama e passou a ser altamente utilizado por profissionais da área de Design e Publicidade, por exemplo. Entretanto, o programa é pago 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, é possível dizer que o Gimp é uma alternativa grátis ao Photoshop, já que traz uma grande variedade de ferramentas fiéis ao programa da Adobe. O programa traz, ao menos, as funções mais comuns do Photoshop, como ferramentas de seleção, pincéis, degradês, texturas e até mesmo vetores. Inkscape Muitos usuários consideram este um programa fantástico para a utilização de vetores. Isso principalmente por ser grátis 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, não sendo difícil familiarizar-se com ele. Além de tudo, o usuário tem total liberdade para criar os seus próprios efeitos manualmente. É claro que as ferramentas básicas para programas vetoriais estão disponíveis, como a edição de nós 12

13 e a própria vetorização por exemplo. Este ultimo é o que será objeto de estudo na etapa final dessa disciplina Editoração de imagem com Inkscape Inkscape é um software livre para editoração eletrônica de imagens e documentos vetoriais, com base numa versão mais avançada do antigo Sodipodi no qual teve origem. Trata-se assim de um fork considerado de sucesso. Utiliza o método vetorial, ou seja, gera imagens a partir de um caminho de pontos definindo suas coordenadas, de forma transparente ao usuário. Imagens vetoriais têm maior aplicação em desenho técnico ou artístico e são, geralmente, mais leves e não perdem a qualidade ao sofrer transformações, como redimensionamento ou giro, em oposição aos formatos bitmap, pese embora o fato dos formatos vetoriais ainda não possuem capacidade direta para lidar com captação de fotografias em tempo real, pelo que na maior parte das aplicações tecnológicas de captação de imagem, os formatos bitmap ainda são considerados padrão. O Inkscape trabalha nativamente com o formato SVG (Scalable Vectorial Graphics), um formato aberto de imagens vetoriais, nomeadamente, uma subdefinição (DTD) da linguagem XML definido pela W3C. O aplicativo também exporta para o popular formato da Internet PNG e importa vários formatos vetoriais ou bitmap, como por exemplo: TIFF, GIF, JPG, AI, PDF, PS, entre outros. Veja mais informações sobre o SVG no Apêndice I Interface gráfica A equipe de desenvolvimento do Inkscape intenciona manter uma interface simples, porém 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 implementação de janelas encaixáveis, como já é possível no GIMP. Imagens bitmap incluídas no desenho não são diretamente incorporadas ao SVG, sendo antes referências a arquivos externos, como acontece no HTML; entretanto, o usuário pode usar o efeito "Embed All Images" para incorporar os bitmaps ao arquivo SVG. Trabalha com edição de nós, transparência, anti-aliasing, textos, degradês, vetorização, múltiplas camadas e todos os recursos necessários para desenho vetorial. É um software relativamente novo que conta com uma equipe de desenvolvedores com ritmo de trabalho considerado muito rápido. Algumas correntes de analistas tecnológicos consideram que tem potencial para a curto e médio prazo concorrer em pé de igualdade com outros programas de desenho e manipulação vetorial já existentes do mercado, como é o caso do Corel Draw, do Illustrator ou do Adobe Indesign, ambos softwares proprietários. A Figura 17, mostra a interface gráfica do inkscape. 13

14 Figura 17 - Interface Gráfica do Inkscape A seguir são detalhas as informações que foram destacadas na Figura Menu Textual: menu em que os comandos e controles são exibidos de forma textual; 2. Comandos: barra de ícones com os comandos. Também podem ser encontrados no menu textual; 3. Controles: barra sensível ao contexto que exibe os controles referentes à ferramenta ativa no momento; 4. Caixa de Ferramentas: barra com as ferramentas que o sistema disponibiliza para realização do trabalho; 5. Área de desenho: Apesar de você poder desenhar em qualquer lugar desta área, o retângulo no meio auxilia como a exibição de uma folha de papel. Nas configurações padrão, 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 configurações de exibição e bloqueio; 8. Paleta de Cores: Disponibiliza as cores para uso; 9. Informações: exibe informações referentes ao contexto; 10. Zoom: caixa com opções de magnificência do documento. 14

15 Logomarca do Instituto Como uma forma de familiarizar com as ferramentas que o Inskcape possui será mostrado passo a passo a construção da logomarca do Instituto Federal de Educação, Ciência e Tecnologia do Ceará. Ao final da criação da imagem espera-se que a mesma se assemelhe a Figura 18, vista abaixo Configurando o documento Figura 18 Logomarca do IFCE Antes de iniciarmos cada projeto devemos configurar o documento. Por padrão o Inkscape é configurado para páginas A4, mas ele tem diversas pré-configurações 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 configuração nos dará uma área em pixels para ser desenhada a logomarca. Veja a Figura 19. Figura 19 Configurando documento 15

16 Ferramenta zoom Ao selecionar o novo tamanho a página se modifica, mas fica muito pequena para ser trabalhada. A ferramenta Zoom oferece várias formas de visualização para que fique mais confortavel. Entre as várias opções encontra-se a Caber a Página 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 visualização da página. Figura 20 - Ferramenta Zoom, atalho F3. Ferramenta para caber a página na janela, atalho Ferramenta retangulos e quadrados Com a página ajustada, será utilizada a ferramenta retangulos e quadrados (Create rectangles and square) para desenhar um quadrado na página. Selecione a ferramenta, clique e arraste na página. Não se preocupe nem com tamanho, posição ou cores. Ajustaremos isto mais adiante. Figura 21 Ferramenta de retângulos e quadrados, atalho F4 16

17 Pintura do traço Para este trabalho, especificamente, o traço de borda irá atrapalhar. Pode ser removido selecionando no menu textual Objecto (Object), a opção Preenchimento e Traço (Fill and Stroke). Irá aparecer uma caixa de diálogo como na Figura 22, clique na aba Pintura de Traço (Stroke Paint), depois no x para retirar o cotorno. Figura 22 - Painel Preenchimento e Traço, atalho Shift + Ctrol + F Ferramenta seleção e transformação de objetos É necessário agora deixar o quadrado como deve ser. Antes um aviso importante. Inkscape é capaz de trabalhar com subdivisões de pixel. Isto é muito bom, mas na hora de gerar imagens, pode causar problemas. Para resolver isto, é necessário que quando você crie alguma ilustração, use apenas valores redondos de pixel. Será demonstrada estas correções. Na Barra de Ferramentas clique na ferramenta Seleção e Transformação de Objetos (Selects and transform objects) e no quadrado. Veja na Figura 23, na parte destacada em vermelho, a posição x e y do objeto, a largura em w, a altura em h. Deixe como na figura. 17

18 Figura 23 Ferramenta de seleção, atalho F Preenchimento Agora, vamos fazer o preenchimento. Abra a caixa Preenchimento e Traço (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 configurações de preenchimento que podem ser Cor Lisa, Degradê Linear, Degradê Radial, Padrão e Swatch. Selecione Cor Lisa (Flat Color) que está apontado por uma seta verde. Clique no botão 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. 18

19 Figura 24 Preenchimento e Traço Inserindo curva no retângulo 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 19

20 Duplicando quadrados e posicionando-os Será necessário 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 idêntico ao anterior, mas estará posicionado em cima do anterior. Nesse momento terá que ser definida a posição desse novo quadrado. O calculo da posição do quadrado será da seguinte forma: Primeira coluna de quadrados Posição X: 30 Posição Y para cima: posição atual + tamanho do quadrado + 10% do tamanho do quadrado. Posição Y para baixo: posição atual - tamanho do quadrado - 10% do tamanho do quadrado. Situação para o segundo quadrado em relação ao primeiro ( = 65). Faça o processo até termos três quadrados, um abaixo do outro. Veja a Figura 26 e 27. Figura 26 - Primeira coluna de quadrados 20

21 Figura 27 - Primeira coluna de quadrados Segunda coluna de quadrados Duplicando o primeiro quadrado da primeira coluna, faça. Posição X para direita: posição atual + tamanho do quadrado + 10% do tamanho do quadrado. Posição X = = Posição Y : Veja a Figura 28. Figura 28 Segunda coluna de quadrados 21

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, porém para a Posição Y para Cima. Veja a formula na seção da primeira coluna Terceira coluna de quadrados Devemos relembrar que a logomarca do IFCE na sua coluna três só temos quadrados na primeira e terceira linhas. Nesse sentido serão selecionados os quadrados 1 e 3 da segunda coluna. Na Terceira duplicando o primeiro quadrado da primeira coluna, faça. Posição X para direita: posição atual + tamanho do quadrado + 10% do tamanho do quadrado. Posição X = = 85. Faça o mesmo calculo para o quadrado 3 da segunda coluna. Ao final desse processo teremos. Veja Figura

23 Figura 30 Terceira coluna Ferramenta círculo, elipse e arcos Com a página ajustada, vamos utilizar a ferramenta Círculo, Elipse e Arcos (Create circles, ellipses, and arcs) para desenhar um círculo na página. Selecione a ferramenta, clique e arraste na página. O circulo na logomarca do IFCE deve preencher o espaço que estávamos deixando entre os quadrados, assim as suas dimensões devem adicionar esse espaço. Como o quadrado tem 25px, circulo deve possuir diâmetro de 27.5 (25+2.5). Veja Figura 31 e suas dimensões marcadas com um quadrado vermelho. Agora, vamos fazer o preenchimento. Siga o mesmo procedimento para preenchimento dos quadrados, porém a cor que se deve definir para o circulo é 0C, 100M, 100Y, 0K, 100A. Figura 31 Logo do IFCE quase pronta. 23

24 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 localização 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 retângulo vermelho está destacando a localização destes controles, observe também o posicionamento do texto. Você pode arrastar o texto utilizando a ferramenta de Seleção (Select). Para isso, basta clicar no objeto e arrastar para a nova posição. 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 distância entre abaixo do no INSTITUTO FEDERAL. Se a fonte não estiver disponível em seu computador, você deve fazer o download no seguinte site: Extraia os arquivos em um local que vá lembrar. Depois faça 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 estão na pasta Helvetica Rounded e cole o seu conteúdo. 24

25 5. Para que a fonte fique disponível no Inkscape, é necessário que feche e abra o programa, mas antes SALVE sua logomarca em um lugar de fácil acesso. 6. Inicie o Inkscape, abra o seu arquivo e finalize a sua logomarca. Após 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. Após issso clique em Export. Pronto. Temos a Logomarca do IFCE pronta. Figura 34 Exportar Bitmap 25

26 Figura 35 - Logomarca do Instituto Federal de Educação, Ciência e Tecnologia do Ceará. 26

27 3 APENDICE I - SVG O Scable Vectorial Graphics ou, mais simplesmente, SVG pode guardar três tipos de representação: gráficos vetoriais: formas geométricas descritas através de comandos; imagens bitmaps: imagens raster como fotografias; texto: a informação sobre o texto guardada possibilita a edição posterior, o que não é possível quando o texto é convertido em imagem raster ou gráficos vetoriais. Como o arquivo armazenado é em formato textual, eles são 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 extensão SVGZ. Características do SVG Vimos que o SVG se destaca por ser um excelente padrão de armazenagem para ilustrações vetoriais para a web, em comparação a outros formatos. Além disso, ele é utilizado para salvar as ilustrações realizadas no Inkscape, programa que veremos mais adiante. Por estas características, vamos focar nosso estudo nele e conhecê-lo melhor. Padrão Aberto Por ser definido por um consórcio de várias empresas que tem a intenção de padronizar a troca de documentos pela internet, o SVG foi determinado como um padrão 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 padrão. Visualização em Navegadores Assim, vários programas de criação vetorial, entre eles o Corel Draw, Illustrator, Inkscape podem abrir e salvar neste formato. Não só programas de desenho como também os navegadores, como o Internet Explorer, Firefox, Chrome etc., em suas versões mais recentes, também podem visualizá-los. Embutido em HTML A W3C construiu o SVG derivado do XML. Então, os comandos de criação são fáceis de serem compreendidos, possibilitando seu uso junto do código HTML. Vocês verão HTML na disciplina de Web Design que será dada mais adiante. Observe a Figura 6, abaixo, perceba o código HTML e, no meio, em destaque azul, o código SVG de um círculo vermelho, com contorno preto. Ao lado do código está o que é exibido pelo navegador. 27

28 Figura 36 - À esquerda o código de uma página web simples. Em destaque azul, o comando de criação de um círculo, sua posição, seu raio, cor contorno, largura do contorno e cor de preenchimento. No lado direito o resultado. 28

29 4 REFERÊNCIAS KRUG, S. Não me faça pensar abordagem do bom senso a navegabilidade da web. Editora Market Books, LIMA, P. S. R.. Notas de Aula: Projeto de Interfaces para Aplicações Web. UEPA/UFPA MENDONÇA, E. M. Ilustração Vetorial para WEB.. Secretaria de Educação do Governo do Estado de Pernambuco. Rede e-tec Brasil NILSEN, J. e TAHR, M. Homepage Usabilidade 50 Websites Desconstruídos. Editora Campus, SHNEIDERMAN, B. A. W. Design the User Interface. Third Edition WIKIPEDIA, SVG. Disponível em < Acesso em 6 de Agosto de