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

Save this PDF as:
 WORD  PNG  TXT  JPG

Tamanho: px
Começar a partir da página:

Download "Aplicativos Web. Autor: Prof. Willamys Gomes Fonseca Araújo willamys.araujo@ifce.edu.br"

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

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

PHOTOSHOP. Menus. Caixa de Ferramentas:

PHOTOSHOP. Menus. Caixa de Ferramentas: PHOTOSHOP Universidade de Caxias do Sul O Photoshop 5.0 é um programa grande e complexo, é o mais usado e preferido pelos especialistas em editoração e computação gráfica para linha PC. Outros programas

Leia mais

ETI - Edição e tratamento de imagens digitais

ETI - Edição e tratamento de imagens digitais Curso Técnico em Multimídia ETI - Edição e tratamento de imagens digitais 2 Fundamentos "Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus." 2 Timóteo 1:13

Leia mais

Fotografia Digital. Aula 1

Fotografia Digital. Aula 1 Fotografia Digital Aula 1 FOTOGRAFIA DIGITAL Tema da aula: A Fotografia 2 A FOTOGRAFIA A palavra Fotografia vem do grego φως [fós] ("luz"), e γραφις [grafis] ("estilo", "pincel") ou γραφη grafê, e significa

Leia mais

CorelDRAW 11 1. UM PROGRAMA DE DESIGN

CorelDRAW 11 1. UM PROGRAMA DE DESIGN CorelDRAW 11 1. UM PROGRAMA DE DESIGN Com o Corel você vai trabalhar com um dos aplicativos mais usados no campo do design e da auto-edição, já que permite operar com dois tipos de gráficos (vetoriais

Leia mais

TUTORIAL: Criando e animando sprites no Inkscape

TUTORIAL: Criando e animando sprites no Inkscape TUTORIAL: Criando e animando sprites no Inkscape Pra quem não sabe, o Inkscape é um programa de desenho vetorial, assim como o Illustrator da Adobe, porém é software livre. Atualmente encontra-se na versão

Leia mais

APLICATIVOS GRÁFICOS (AULA 4)

APLICATIVOS GRÁFICOS (AULA 4) Prof. Breno Leonardo G. de M. Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 4) 1 Classificação da imagem Em relação à sua origem pode-se classificar uma imagem,

Leia mais

APLICATIVOS GRÁFICOS (AULA 6)

APLICATIVOS GRÁFICOS (AULA 6) Prof. Breno Leonardo G. de M. Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 6) 1 Inkscape O Inkscapeé um programa de desenho vetorial, com capacidades similares

Leia mais

AULA: BrOffice Impress terceira parte. Ao final dessa aula, você deverá ser capaz de:

AULA: BrOffice Impress terceira parte. Ao final dessa aula, você deverá ser capaz de: AULA: BrOffice Impress terceira parte Objetivo Ao final dessa aula, você deverá ser capaz de: Conhecer a integração dos softwares do BrOffice; Aprender a trabalhar no slide mestre; Utilizar interação entre

Leia mais

Apostila de CmapTools 3.4

Apostila de CmapTools 3.4 Apostila de CmapTools 3.4 Índice Definição do software... 3 Criando um novo mapa... 3 Adicionando um conceito... 3 Alterando a formatação das caixas (Barra de Ferramentas Estilos Paleta Styles)... 7 Guia

Leia mais

19/11/2015. Um pouco de história antes... A FOTOGRAFIA. James Clerk Maxwell (1831 1879) Escócia (Reino Unido) físico, filósofo e matemático.

19/11/2015. Um pouco de história antes... A FOTOGRAFIA. James Clerk Maxwell (1831 1879) Escócia (Reino Unido) físico, filósofo e matemático. Prof. Reginaldo Brito Um pouco de história antes... A FOTOGRAFIA Joseph-Nicéphore Niepce * França, (1765-1833) James Clerk Maxwell (1831 1879) Escócia (Reino Unido) físico, filósofo e matemático. 1826,

Leia mais

ferramentas da imagem digital

ferramentas da imagem digital ferramentas da imagem digital illustrator X photoshop aplicativo ilustração vetorial aplicativo imagem digital 02. 16 imagem vetorial X imagem de rastreio imagem vetorial traduz a imagem recorrendo a instrumentos

Leia mais

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010. 1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.

Leia mais

Banner Flutuante. Dreamweaver

Banner Flutuante. Dreamweaver Banner Flutuante Dreamweaver Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Formatos de Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Formatos de Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage FormatosdeImagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger FormatosdeImagens Índice 1 FORMATOS

Leia mais

7 Introdução ao uso do LibreOffice Impress

7 Introdução ao uso do LibreOffice Impress Introdução a Informática - 1º semestre AULA 04 Prof. André Moraes Objetivos desta aula: Criar apresentações básicas com uso do LibreOffice Impress; o Manipular a estrutura de tópicos para a digitação de

Leia mais

SUMÁRIO TUTORIAL DO HQ. 2 DICAS PEDAGÓGICAS:. 2 DOWNLOAD DA INSTALAÇÃO. 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD. 2 PASSO 2 ESCOLHENDO A VERSÃO.

SUMÁRIO TUTORIAL DO HQ. 2 DICAS PEDAGÓGICAS:. 2 DOWNLOAD DA INSTALAÇÃO. 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD. 2 PASSO 2 ESCOLHENDO A VERSÃO. SUMÁRIO TUTORIAL DO HQ... 2 DICAS PEDAGÓGICAS:... 2 DOWNLOAD DA INSTALAÇÃO... 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD... 2 PASSO 2 ESCOLHENDO A VERSÃO... 3 PASSO 3 INSTRUÇÕES DE INSTALAÇÃO... 4 CRIANDO NOVAS

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido

Leia mais

Aula: BrOffice Impress primeira parte

Aula: BrOffice Impress primeira parte Aula: BrOffice Impress primeira parte Objetivos Conhecer as características de um software de apresentação; Saber criar uma apresentação rápida com os recursos de imagem e texto; Saber salvar a apresentação;

Leia mais

Conceitos do Photoshop. Bitmap image Formatos de arquivos Memória Escalas de cores

Conceitos do Photoshop. Bitmap image Formatos de arquivos Memória Escalas de cores Conceitos do Photoshop Bitmap image Formatos de arquivos Memória Escalas de cores Bitmap Image Conceito de pixel Imagem bitmap x imagem vetorial Pixel x bits Resolução de tela e imagem 72 pixel/inch 300

Leia mais

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material

Leia mais

Bitmap X Vetorial OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA

Bitmap X Vetorial OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA Editores vetoriais são frequentemente contrastadas com editores de bitmap, e as suas capacidades se complementam. Eles são melhores para leiaute

Leia mais

Prática 3 Microsoft Word

Prática 3 Microsoft Word Instituto Federal de Educação, Ciência e Tecnologia do Estado da Paraíba, Campus Sousa Disciplina: Informática Básica Prática 3 Microsoft Word Assunto: Tópicos abordados: Prática Utilização dos recursos

Leia mais

Fluxo de trabalho do Capture Pro Software: Indexação de código de barras e separação de documentos

Fluxo de trabalho do Capture Pro Software: Indexação de código de barras e separação de documentos Este procedimento corresponde ao fluxo de trabalho de Indexação de código de barras e de separação de documentos no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se

Leia mais

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção Este procedimento corresponde ao fluxo de trabalho de Indexação de OCR com separação de código de correção no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se na

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

ALBUM DE FOTOGRAFIAS NO POWER POINT

ALBUM DE FOTOGRAFIAS NO POWER POINT ALBUM DE FOTOGRAFIAS NO POWER POINT O PowerPoint é uma poderosa ferramenta que faz parte do pacote Office da Microsoft. O principal uso desse programa é a criação de apresentação de slides, para mostrar

Leia mais

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011 Conteúdo 1. OBJETIVO DO FIREWORKS... 2 1.1 - Diferença entre imagem Vetorial e Bitmap... 2 1.2 - Formato de Arquivos... 3 2. AMBIENTE DO FIREWORKS... 3 2.1 - INICIANDO UM PROJETO... 4 3. DESENHANDO NO

Leia mais

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG)

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG) Corel Draw 12 Enviado por: Jair Marcolino Felix Corel Draw 12 O Corel Draw é um programa de design gráfico pertencente à Corel.O Corel Draw é um aplicativo de ilustração e layout de página que possibilita

Leia mais

O Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais.

O Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais. MICROSOFT WINDOWS O Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais. Apresentaremos a seguir o Windows 7 (uma das versões do Windows)

Leia mais

WEB DESIGN ELEMENTOS GRÁFICOS

WEB DESIGN ELEMENTOS GRÁFICOS ELEMENTOS GRÁFICOS Parte 4 José Manuel Russo 2005 24 A Imagem Bitmap (Raster) As imagens digitais ou Bitmap (Raster image do inglês) são desenhadas por um conjunto de pontos quadrangulares Pixel alinhados

Leia mais

UM POUCO DE COMPUTAÇÃO GRÁFICA.

UM POUCO DE COMPUTAÇÃO GRÁFICA. UM POUCO DE COMPUTAÇÃO GRÁFICA. Imagem digital é a representação de uma imagem bidimensional usando números binários codificados de modo a permitir seu armazenamento, transferência, impressão ou reprodução,

Leia mais

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Introdução ao Microsoft Windows 7 O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Visualmente o Windows 7 possui uma interface muito intuitiva, facilitando a experiência individual do

Leia mais

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Designer Gráfico APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1... 3 Apresentação do Photoshop... 3 Barra de Menus... 3 Barra de Opções... 3 Barra de Ferramentas...4

Leia mais

11/06/2013. O que é Software Aplicativo? Suítes de Software. Adquirindo Software SOFTWARES APLICATIVOS

11/06/2013. O que é Software Aplicativo? Suítes de Software. Adquirindo Software SOFTWARES APLICATIVOS 2 O que é Software Aplicativo? SOFTWARES APLICATIVOS Introdução à Microinformática Prof. João Paulo Lima Software que realiza tarefa útil específica Suítes de aplicativos Softwares empresariais Softwares

Leia mais

Manual PAINT.NET de imagens

Manual PAINT.NET de imagens Manual PAINT.NET de imagens 1. Instalação 1.1 - Para instalar o programa paint.net, o primeiro passo é baixá-lo do endereço a seguir e salvá-lo em seu computador. http://ww2.prefeitura.sp.gov.br/paint_net/paint.net.3.36.exe

Leia mais

Imagem digital. Unidade 3

Imagem digital. Unidade 3 Imagem digital Unidade 3 Objectivos Reconhecer o potencial comunicativo/ expressivo das imagens; Reconhecer as potencialidades narrativas de uma imagem; A criação de sentido nas associações de imagens

Leia mais

Manual da AGENDA GRACES 2011

Manual da AGENDA GRACES 2011 1 Agenda Graces Manual da AGENDA GRACES 2011 O Sistema Agenda Graces integrada ao Sistema Graces e Agenda Graces Grátis foi desenvolvido pela empresa Quorum Informática. Este Manual tem por objetivo atender

Leia mais

CICLO DE APERFEIÇOAMENTO PROFISSIONAL DOS SERVIDORES MUNICIPAIS DE MARICÁ- RJ EDITOR DE TEXTO - WORD

CICLO DE APERFEIÇOAMENTO PROFISSIONAL DOS SERVIDORES MUNICIPAIS DE MARICÁ- RJ EDITOR DE TEXTO - WORD Faculdade de Administração, Ciências Contábeis e Turismo Pós-Graduação em Gestão de Negócios CICLO DE APERFEIÇOAMENTO PROFISSIONAL DOS SERVIDORES MUNICIPAIS DE MARICÁ- RJ EDITOR DE TEXTO - WORD EMENTA

Leia mais

APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 - Área de trabalho e personalizando o sistema... 3 A área de trabalho... 3 Partes da área de trabalho.... 4 O Menu Iniciar:...

Leia mais

Sistemas e Conteúdos Multimédia. 4.1. Imagem. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt

Sistemas e Conteúdos Multimédia. 4.1. Imagem. Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Sistemas e Conteúdos Multimédia 4.1. Imagem Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Cores O que é a cor? Distribuição espectral do sinal de excitação. Função da reflectância e da iluminação

Leia mais

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Introdução ao Microsoft Windows 7 O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Visualmente o Windows 7 possui uma interface muito intuitiva, facilitando a experiência individual do

Leia mais

Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/

Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/ Crie uma pasta (0) no ambiente de trabalho com o seu nome. Inicie o Internet Explorer através do: W O R K S H O P Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/

Leia mais

COMO COLABORAR NO WIKI DO MOODLE 1. Orientações para produção escolar colaborativa no wiki do Moodle:

COMO COLABORAR NO WIKI DO MOODLE 1. Orientações para produção escolar colaborativa no wiki do Moodle: COMO COLABORAR NO WIKI DO MOODLE 1 Ilse Abegg e Fábio da Purificação de Bastos e-mail: iabegg@mail.ufsm.br O wiki no Moodle é uma ferramenta de atividade que visa produção escolar colaborativa. Isso significa

Leia mais

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART Continuação 32. Inserir uma imagem da GALERIA CLIP-ART a) Vá para o primeiro slide da apresentação salva no item 31. b) Na guia PÁGINA INICIAL, clique no botão LAYOUT e selecione (clique) na opção TÍTULO

Leia mais

Ferramenta de Design Gráfico/ Imagem Digital Adobe Photoshop Fábio Fernandes

Ferramenta de Design Gráfico/ Imagem Digital Adobe Photoshop Fábio Fernandes Ferramenta de Design Gráfico/ Imagem Digital Adobe Photoshop Fábio Fernandes O Adobe Photoshop vem liderando o mercado de imagem digital há anos. Portanto, não podemos deixar de explorar essa ferramenta

Leia mais

Unidade 1: O Painel de Controle do Excel *

Unidade 1: O Painel de Controle do Excel * Unidade 1: O Painel de Controle do Excel * material do 2010* 1.0 Introdução O Excel nos ajuda a compreender melhor os dados graças à sua organização em células (organizadas em linhas e colunas) e ao uso

Leia mais

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo.

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo. O que é o Gimp? O GIMP é um editor de imagens e fotografias. Seus usos incluem criar gráficos e logotipos, redimensionar fotos, alterar cores, combinar imagens utilizando o paradigma de camadas, remover

Leia mais

Sistema Click Principais Comandos

Sistema Click Principais Comandos Sistema Click Principais Comandos Sumário Sumário... 1 1. Principais Funções:... 2 2. Inserção de Registro (F6):... 3 3. Pesquisar Registro (F7):... 4 3.1 Pesquisa por letras:... 5 3.2 Pesquisa por números:...

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Alterne entre a entrada por toque

Leia mais

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano Informática Aplicada Aula 2 Windows Vista Professora: Cintia Caetano AMBIENTE WINDOWS O Microsoft Windows é um sistema operacional que possui aparência e apresentação aperfeiçoadas para que o trabalho

Leia mais

Desenhando no Flash. Comece um novo arquivo novo, de tamanho 500 X 300 pixels.

Desenhando no Flash. Comece um novo arquivo novo, de tamanho 500 X 300 pixels. Desenhando no Flash Os arquivos criados no Flash guardam e apresentam as informações gráficas vetorialmente. Isto significa que as imagens são entendidas como formas e preenchimentos e o que é armazenado

Leia mais

Utilização do Sistema Multimédia. 2. Formatos de ficheiros 2.1. Compressão 2.2. Formatos mais comuns 2.3 Captura de imagens. 2. Formatos de ficheiros

Utilização do Sistema Multimédia. 2. Formatos de ficheiros 2.1. Compressão 2.2. Formatos mais comuns 2.3 Captura de imagens. 2. Formatos de ficheiros Utilização do Sistema Multimédia 2.1. Compressão 2.2. Formatos mais comuns 2.3 Captura de imagens 2.1. Compressão Formatos com e sem compressão Técnicas de compressão (reduzem tamanho) de 2 tipos: Compressão

Leia mais

Figura 1: Formato matricial de uma imagem retangular. Figura 2: Ampliação dos pixels de uma imagem

Figura 1: Formato matricial de uma imagem retangular. Figura 2: Ampliação dos pixels de uma imagem Universidade Federal de Santa Maria - UFSM Departamento de Eletrônica e Computação - DELC Introdução à Informática Prof. Cesar Tadeu Pozzer Julho de 2006 Imagens Uma imagem é representada por uma matriz

Leia mais

Vinte dicas para o Word 2007

Vinte dicas para o Word 2007 Vinte dicas para o Word 2007 Introdução O Microsoft Word é um dos editores de textos mais utilizados do mundo. Trata-se de uma ferramenta repleta de recursos e funcionalidades, o que a torna apta à elaboração

Leia mais

Dicas para usar melhor o Word 2007

Dicas para usar melhor o Word 2007 Dicas para usar melhor o Word 2007 Quem está acostumado (ou não) a trabalhar com o Word, não costuma ter todo o tempo do mundo disponível para descobrir as funcionalidades de versões recentemente lançadas.

Leia mais

Exemplo Cartão de Visita 88 x 48mm

Exemplo Cartão de Visita 88 x 48mm Criando e configurando arquivos para impressão gráfica no Adobe Photoshop Exemplo Cartão de Visita 88 x 48mm Etapa 1 Crie um novo documento em Arquivo>Novo e configure-o com as especificações mostradas

Leia mais

AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II)

AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II) AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II) A seguir vamos ao estudo das ferramentas e aplicativos para utilização do correio

Leia mais

APOSTILA WORD BÁSICO

APOSTILA WORD BÁSICO APOSTILA WORD BÁSICO Apresentação O WORD é um editor de textos, que pertence ao Pacote Office da Microsoft. Suas principais características são: criação de textos, cartas, memorandos, documentos, mala

Leia mais

Adobe Photoshop CS5. Aula 5

Adobe Photoshop CS5. Aula 5 Adobe Photoshop CS5 Aula 5 Tema da aula: Mudando a cor dos olhos Assuntos tratados nesta aula: Criar nova camada Renomear camada Ferramenta Zoom Ferramenta Pincel Definindo Cor do Primeiro Plano Regulagem

Leia mais

COMO PREPARAR/ENVIAR SEU ARQUIVO PARA IMPRESSÃO EM COREL DRAW E PHOTOSHOP

COMO PREPARAR/ENVIAR SEU ARQUIVO PARA IMPRESSÃO EM COREL DRAW E PHOTOSHOP COMO PREPARAR/ENVIAR SEU ARQUIVO PARA IMPRESSÃO EM COREL DRAW E PHOTOSHOP ÍNDICE EXPORTANTO EM COREL DRAW 1 - definindo o tamanho pág. 3 2 - padrão (sistema de cores - cmyk) pág. 3 3 - resolução pág. 4

Leia mais

Desenho e Apresentação de Imagens por Computador

Desenho e Apresentação de Imagens por Computador Desenho e Apresentação de Imagens por Computador Conteúdo s: Aspetos genéricos sobre o trabalho com imagens computacionais. Imagens computacionais e programas que criam ou manipulam esse tipo de imagens.

Leia mais

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do

Leia mais

APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK

APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK 1 SÚMARIO ASSUNTO PÁGINA Componentes da Lousa... 03 Função Básica... 04 Função Bandeja de Canetas... 05 Calibrando a Lousa... 06

Leia mais

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor i.exe FrontPage Criação de Home Page s PPaaggi innaa 1 Sobre FrontPage Parte 1 Front Page é uma ferramenta para criação e gerenciamento de web s.o aluno não necessita de nenhum conhecimento de programação

Leia mais

COMO REDUZIR O CUSTO NA COMUNICAÇÃO USANDO A INTERNET

COMO REDUZIR O CUSTO NA COMUNICAÇÃO USANDO A INTERNET COMO REDUZIR O CUSTO NA COMUNICAÇÃO USANDO A INTERNET Ao mesmo tempo em que hoje se tornou mais fácil falar a longa distância, pela multiplicidade de opções e operadoras de telefonia, também surgem as

Leia mais

PS02_02-08: Exercícios: Photoshop CS3. Objetivo: FERRAMENTAS DE PINTURA. 1) Abra um novo arquivo e altere os valores para a seguinte configuração:

PS02_02-08: Exercícios: Photoshop CS3. Objetivo: FERRAMENTAS DE PINTURA. 1) Abra um novo arquivo e altere os valores para a seguinte configuração: PS02_02-08: Objetivo: FERRAMENTAS DE PINTURA Exercícios: 1) Abra um novo arquivo e altere os valores para a seguinte configuração: 2) Finalize a configuração. A janela da imagem, também chamada de tela

Leia mais

UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA TREINAMENTO EM INFORMÁTICA MÓDULO V

UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA TREINAMENTO EM INFORMÁTICA MÓDULO V UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO E PLANEJAMENTO DEPARTAMENTO DE INFORMÁTICA TREINAMENTO EM INFORMÁTICA MÓDULO V MACAPÁ-AP 2011 UNIVERSIDADE FEDERAL DO AMAPÁ PRÓ REITORIA DE ADMINISTRAÇÃO

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 apresenta uma aparência diferente das versões anteriores; desse modo, criamos este guia para ajudá-lo a minimizar a curva de aprendizado. Alternar entre o

Leia mais

Manual de Utilização do Sistema GRServer Cam on-line (Gerenciamento de Câmeras On-line)

Manual de Utilização do Sistema GRServer Cam on-line (Gerenciamento de Câmeras On-line) Manual de Utilização do Sistema GRServer Cam on-line (Gerenciamento de Câmeras On-line) Criamos, desenvolvemos e aperfeiçoamos ferramentas que tragam a nossos parceiros e clientes grandes oportunidades

Leia mais

Introdução. Como adquirir o FrontPage?

Introdução. Como adquirir o FrontPage? Introdução O software FrontPage é muito utilizado para a criação, gerenciamento e publicação de páginas (sites) na Internet. Sendo um produto da Microsoft Corporation, ele apresenta uma interface bastante

Leia mais

O computador. Sistema Operacional

O computador. Sistema Operacional O computador O computador é uma máquina desenvolvida para facilitar a vida do ser humano, principalmente nos trabalhos do dia-a-dia. É composto basicamente por duas partes o hardware e o software. Uma

Leia mais

Compositor de Impressão do QGIS

Compositor de Impressão do QGIS Compositor de Impressão do QGIS 1. Introdução O Compositor de Impressão é uma ferramenta oferecida pelo QGIS para elaborar a versão final dos mapas que serão impressos. Permite a definição de escala e

Leia mais

O que é a cor? Como converter as cores para CMYK

O que é a cor? Como converter as cores para CMYK Introdução A Cartilha de Fechamento de Arquivos a seguir foi preparada pela equipe de criação da gráfica Cores, com o intuito de ajudar seus clientes a criarem artes o mais precisa possível, evitando assim

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3 WORD 2007 E 2010 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 CAPTURAS DE TELA WORD 2010... 3 02 IMAGENS 2007/2010... 5 03 NOTAS DE RODAPÉ... 13 04 NUMERAÇÃO DE PÁGINAS... 15 05 CONTAR PALAVRAS...

Leia mais

OneDrive: saiba como usar a nuvem da Microsoft

OneDrive: saiba como usar a nuvem da Microsoft OneDrive: saiba como usar a nuvem da Microsoft O OneDrive é um serviço de armazenamento na nuvem da Microsoft que oferece a opção de guardar até 7 GB de arquivos grátis na rede. Ou seja, o usuário pode

Leia mais

Instrutor Alexandre - CorelDraw

Instrutor Alexandre - CorelDraw Quem não leu o meu primeiro tutorial, corra para ler, pois tem muitas dicas interessantes lá! Quem já leu, preparem-se para mais dicas!! Abra o COREL e coloque a folha na horizontal (paisagem). Feito assim

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft PowerPoint 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Encontre o que você precisa Clique

Leia mais

Aula Au 3 la 9 Windows-Internet

Aula Au 3 la 9 Windows-Internet Aula 39 Aula 1 Resolução de Vídeo São as dimensões de uma imagem ou tela na horizontal e vertical, medida em pixels. O termo pixel tem origem do inglês, sendo composto pelas palavras picture (imagem) e

Leia mais

Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico.

Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Criar um logotipo Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Neste tutorial, você criará um logotipo para uma cafeteria imaginária.

Leia mais

APOSTILA DE INFORMÁTICA MICROSOFT WORD 2012

APOSTILA DE INFORMÁTICA MICROSOFT WORD 2012 APOSTILA DE INFORMÁTICA MICROSOFT WORD 2012 Profa Responsável Fabiana P. Masson Caravieri SUMÁRIO 1. MICROSOFT WORD 2010.... 3 1.1 INICIANDO O WORD 2010.... 3 2. Pagina Inicial.... 6 2.1 Aba arquivo...

Leia mais

Informática Básica para o PIBID

Informática Básica para o PIBID Universidade Federal Rural do Semi Árido Programa Institucional de Iniciação à Docência Informática Básica para o PIBID Prof. Dr. Sílvio Fernandes Roteiro O Tamanho e Resolução de imagens O Compactação

Leia mais

Topo para a loja virtual Brasmarket com imagens

Topo para a loja virtual Brasmarket com imagens Topo para a loja virtual Brasmarket com imagens Este tutorial é para orienta-lo na criação do topo da sua loja virtual Brasmarket usando o programa Paintnet que é gratuito e simples de usar Primeiro faça

Leia mais

Ela funciona de um jeito parecido com as mídia de RSS próprio: o sistema acessa o feed do twitter e exibe, na tela, os últimos tweets.

Ela funciona de um jeito parecido com as mídia de RSS próprio: o sistema acessa o feed do twitter e exibe, na tela, os últimos tweets. Mídia do Twitter Esta mídia serve para mostrar os últimos tweets de uma conta específica. É útil para estabelecimentos que usam com frequência o twitter e que desejam que seus clientes acompanhem isso

Leia mais

Retocar imagens. O que você aprenderá

Retocar imagens. O que você aprenderá Retocar imagens Bem-vindo ao Corel PHOTO-PAINT, um poderoso programa de edição de imagens bitmap que permite o retoque de fotos existentes ou a criação de gráficos originais. Neste tutorial, você aprenderá

Leia mais

O que há de novo. Audaces Idea

O que há de novo. Audaces Idea O que há de novo Audaces Idea Com o propósito de produzir tecnologia de ponta, o principal requisito da Política de Qualidade da Audaces é buscar a melhoria contínua de seus produtos e serviços. Inovadora

Leia mais

Como gerar arquivos.plt

Como gerar arquivos.plt Como gerar arquivos.plt O formato PLT destina se a uso em plotters. É como se você tivesse um plotter conectado diretamente ao seu computador. No momento que manda imprimir, o AutoCAD (ou qualquer outro

Leia mais

Universidade Federal do Mato Grosso - STI-CAE. Índice

Universidade Federal do Mato Grosso - STI-CAE. Índice CAPA Universidade Federal do Mato Grosso - STI-CAE Índice 1. Página da área administrativa... 1.1 Botões e campo iniciais... 2. Explicar como funcionam as seções... 2.1. Seções dinâmicos... 2.1.1 Como

Leia mais

Apresentando o Sistema GeoOffice GPS Profissional

Apresentando o Sistema GeoOffice GPS Profissional Apresentando o Sistema GeoOffice GPS Profissional O Sistema GeoOfficeGPS é uma ferramenta de automação desenvolvida pela Solution Softwares LTDA-ME para auxiliar no armazenamento e manipulação de dados

Leia mais

COFFEE BREAK!!: CRIAÇÃO DE UM CARTAZ COM INKSCAPE

COFFEE BREAK!!: CRIAÇÃO DE UM CARTAZ COM INKSCAPE COFFEE BREAK!!: CRIAÇÃO DE UM CARTAZ COM INKSCAPE O Inkscape (http://www.inkscape.org/) é uma aplicação de Software Livre para desenho e edição electrónica de imagem vectorial. É uma ferramenta para edição

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

Apostila de PowerPoint 2013

Apostila de PowerPoint 2013 Iniciando o Power Point 2013...01 Nova apresentação baseada no modelo...01 Escolhendo o esquema de cores do fundo do slide manualmente...02 Modificando o layout do slide... 03 Inserindo textos no slide...

Leia mais

Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U)

Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U) Animação Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U) Crie uma bola segurando a tecla SHIFT com uma cor qualquer Duplique essa bola através do menu Editar

Leia mais

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar

Leia mais

Sumário INTRODUÇÃO 3 TELA DE APRESENTAÇÃO 3 DESENHANDO E TRANSFORMANDO 29 FERRAMENTA FORMA 29 PREENCHIMENTOS E CONTORNOS 36

Sumário INTRODUÇÃO 3 TELA DE APRESENTAÇÃO 3 DESENHANDO E TRANSFORMANDO 29 FERRAMENTA FORMA 29 PREENCHIMENTOS E CONTORNOS 36 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

CONHECENDO A ÁREA DE TRABALHO DO WINDOWS 7

CONHECENDO A ÁREA DE TRABALHO DO WINDOWS 7 CONHECENDO A ÁREA DE TRABALHO DO WINDOWS 7 A Área de trabalho é a principal área exibida na tela quando se liga o computador e faz logon no Windows. É onde se exibe tudo o que é aberto (programas, pastas,

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido Microsoft PowerPoint 2013 apresenta uma aparência diferente das versões anteriores; desse modo, criamos este guia para ajudá-lo a minimizar a curva de aprendizado. Encontre o que

Leia mais

Uma nova maneira de interagir com a Gráfica Art3! A mais nova tecnologia em aprovação de arquivos via WEB.

Uma nova maneira de interagir com a Gráfica Art3! A mais nova tecnologia em aprovação de arquivos via WEB. Uma nova maneira de interagir com a Gráfica Art3! A mais nova tecnologia em aprovação de arquivos via WEB. O Portal Art3 é um sistema que permite uma grande flexibilidade na entrega e aprovação de seus

Leia mais

Tutorial: Abrindo Vídeos e Medindo Comprimentos no ImageJ

Tutorial: Abrindo Vídeos e Medindo Comprimentos no ImageJ 1 1. Introdução Tutorial: Abrindo Vídeos e Medindo Comprimentos no ImageJ O ImageJ é um software livre (freeware) que pode ser obtido gratuitamente no site http://rsb.info.nih.gov/ij/. Esse software é

Leia mais