Ferramentas Web, Web 2.0 e Software Livre em EVT

Transcrição

1 E s t u d o s o b r e a i n t e g r a ç ã o d e f e r r a m e n t a s d i g i t a i s n o c u r r í c u l o d a d i s c i p l i n a d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a Pixie M a n u a l e G u i a d e e x p l o r a ç ã o d o P i x i e p a r a u t i l i z a ç ã o e m c o n t e x t o d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a Luís Raimundo Este recurso foi produzido no âmbito da formação contínua de professores e faz parte integrante da investigação do trabalho de doutoramento em Multimédia em Educação, pela Universidade de Aveiro do professor José Alberto Rodrigues, com o mesmo nome desta oficina de formação. A identificação do autor deste documento é a constante desta página e constituí recurso educativo em EVT.

2 Caracterização e Ficha Técnica do Pixie Nome Pixie Tipo de ferramenta Web / Web 2.0 Autores e/ou Criadores Daniel X. Moore Versão Tipo de versão URL s Língua(s) Tipo de funções Recursos necessários Online, sem indicação da versão ou data de criação Online, gratuita, com possibilidade de registo (gratuito e necessário para guardar projetos) Inglês Programa de desenho e pintura Computador com qualquer sistema operativo, browser e acesso à internet Breve descrição O Pixie foi desenvolvido como uma plataforma de desenvolvimento de jogos online. A plataforma permite o desenvolvimento de diferentes produtos, como imagens, efeitos sonoros, scripts, tilemaps ou entitys. No entanto, dado o objetivo do presente trabalho e a enorme panóplia de funcionalidades, será abordada apenas a funcionalidade de criação de imagens, uma das que poderá ter maior impacto para a disciplina de EVT. 1

3 Manual e Guia de Utilização e Exploração do Pixie 1. O acesso à ferramenta Pixie Para acedermos a esta ferramenta, devemos, no browser da Internet digitar o seguinte endereço (Recomenda-se a utilização do internet browser Google Chrome) Hiperligações Login e registo Barra de comandos Barra de ferramentas de desenho Tela de desenho Paleta de cores Figura 1- Página principal do Pixie A página inicial apresenta um conjunto de funcionalidades de fácil interpretação e semelhantes a outros editores de imagem, como o conhecido Paint. Ao centro encontra-se a tela de desenho, do lado esquerdo as ferramentas de desenho e do lado direito a paleta de cores. Na parte superior encontra-se o acesso a um conjunto de comandos à frente explicados. No canto inferior direito do ecrã pode-se ainda aceder a um chat do software que conta com a presença assídua do autor e que permite trabalhar de forma colaborativa no sentido de resolver dúvidas e problemas que surjam (figura 2). 2

4 Figura 2- Janela de chat do Pixie Fora da área de trabalho e sobre a barra de comandos encontram-se um conjunto de hiperligações que permitem aceder a outras funcionalidades do site e fazer o login ou o registo no mesmo. 2. A barra de ferramentas de desenho A barra de ferramentas de desenho (figura 3) disponibiliza seis ferramentas de simples utilização que podem ser acedidas através de um simples clique. As ferramentas apresentam os nomes e funcionalidades que se apresentam na tabela que se segue. Figura 3- Barra de ferramentas de desenho do Pixie NOME FUNCIONALIDADE Teclas de atalho Exemplo Pencil (Lápis) Permite desenhar linhas em qualquer direção segundo a rede de pixéis definida. P e 1 Mirror Pencil (Lápis de simetria) Desenha, em simultâneo, a linha que se está a desenhar (espelho). m 3

5 Brush (Pincel) Permite desenhar linhas em qualquer direção, embora com maior espessura. B e 2 Dropper (Contagotas) Permite selecionar a cor a utilizar pelas ferramentas anteriores a partir de uma cor já utilizada no desenho. I e 3 Eraser (Borracha) Apaga qualquer área do desenho. E e 4 Fill (Preenchimento) Preenche qualquer parte do desenho com uma cor selecionada. F e 5 Tabela 1- Ferramentas da barra de ferramentas de desenho 3. A paleta de cores A utilização da paleta de cores (figura 4) é bastante simples e intuitiva. As cores aplicam-se apenas a quatro das ferramentas referidas (Pencil, Mirror Pencil, Brush e Fill) e para tal basta selecionar uma delas e clicar sobre a cor desejada antes de utilizar a ferramenta. Figura 4- A paleta de cores. Após a seleção de uma das cores disponíveis é possível ainda proceder a alterações da mesma, nomeadamente a gradação da cor, utilizando o botão que se encontra na parte superior direita (figura 5), e a alteração da intensidade que pode ser realizada clicando sobre a cor selecionada e acedendo a um painel de mistura (figura 6). 4

6 Cor preta com gradação de 50 Cor preta sem gradação (100) Figura 5- A gradação da paleta de cores Figura 6- Painel de intensidade de cores 5

7 4. Barra de comandos e hiperligações A barra de comandos é essencial para o funcionamento da aplicação já que permite a ceder a um conjunto de operações necessárias, conforme se expressa na figura 7. Limpar a tela de desenho Aceder à consola de comandos Criar um novo desenho Publicar no chat Retrocesso Retrocesso Figura 7- Barra de comandos Descarregar o desenho Repete os movimentos realizados Grava o desenho As hiperligações apresentadas permitem aceder a outras funcionalidade além das expressas no programa, conforme apresentadas na figura que se segue, ou aceder à importante opção de login que permite aceder a todas as funcionalidades da aplicação. Acede á própria funcionalidade Permite aceder aos projetos do Pixie Permite aceder ao Fórum do Pixie Permite aceder ao login ou ao registo na aplicação Permite aceder as imagens realizadas Permite aceder a uma lista com os utilizadores registados Permite aceder a um wiki da funcionalidade Figura 8- Hiperligações 6

8 5. Como utilizar o Pixie Antes de utilizar o Pixie propriamente dito, sugere-se a realização de um registo que, como referido, é efetuado através da hiperligação que se encontra no canto superior direito. Após clicar nesta hiperligação surge a janela que apresenta na figura 9 e após clicar em Sign up surgirá a janela que se encontra na figura 10. Resta apenas preencher os campos solicitados, passando no final a ter total acesso às funcionalidades da aplicação, nomeadamente a gravação das imagens. Figura 9- Página de acesso ao login do Pixie Figura 10- Página de registo do Pixie 7

9 Ao aceder ao Pixie editor de imagens encontra-se automaticamente disponível uma tela de desenho, pelo que se pode de imediato iniciar o desenho. Contudo, será de ter em consideração a aplicação da imagem a criar, já que a tela de desenho disponibilizada é muito pequena, dando assim origem a imagens muito pequenas, que se redimensionadas para um tamanho maior perderão muita qualidade, podendo este facto inviabilizar a sua utilização. Desta forma, e sendo de ponderar a utilização final da imagem, recomenda-se a utilização de uma tela de maior dimensão, o que pode ser efetuado clicando no botão New, na barra de comandos (figura 11). Figura 11- Acesso ao botão New Após clicar no referido botão surge uma janela pendente que permite definir o tamanho da tela, estando limitada a uma dimensão de 640x640 pixéis (figura12). Deve-se introduzir o valor desejado e clicar em New Canvas. Para as operações que se seguem foi selecionado uma tela com a dimensão de 200x200 pixéis. 8

10 Figura 12- Definição da área da tela de desenho De notar na figura 13 que a tela passou a ser maior que a área disponível, pelo que será necessário utilizar as barras de deslocação vertical e horizontal para aceder a toda a tela de desenho. Figura 13- Tela de desenho 200x200 pixéis A utilização e combinação das ferramentas dependerão do objetivo do utilizador. Nas figuras que se seguem apresenta-se o exemplo da criação de uma imagem, tendo-se iniciado pela utilização da ferramenta Fill para a criação de um fundo (figura 14). 9

11 Figura 14- Utilização da ferramenta Fill para colorir o fundo da imagem De seguida utilizou-se a ferramenta Pencil para desenhar os contornos da figura e com a ferramenta Fill coloriu-se o interior da mesma, resultando na imagem que se apresenta na figura 15. Figura 15- Utilização das ferramentas Pencil e Fill para a criação de uma figura Saliente-se que a ferramenta Eraser deverá ser utilizada com cuidado, pois a utilização desta ferramenta em camadas de tinta sobreposta leva a que não se apaque apenas a de cima, mas sim todas as camadas (figura 16) 10

12 Figura 16- Utilização da ferramenta Eraser 6. Salvar e Download Após ter criado a imagem da forma poder-se-á salvar a imagem para futura utilização ou efetuar de imediato o download da mesma para utilizar num outro aplicativo como, por exemplo, o MSWord. Para gravar basta clicar sobre o botão Save e aguardar que este seja, salvo. Note-se que o registo gratuito apenas permite armazenar um projeto, para armazenar mais de um terá de ser efetuado um pagamento. 11

13 Figura 17- Gravação da imagem Para fazer o download da imagem terá de clicar no botão de download, altura em que se irá abrir um novo separador no browser que disponibilizará a imagem (figura 18). Neste basta clicar com o botão direito do rato em cima da imagem e decidir se se quer guardar a imagem ou copiá-la para utilização imediata. Figura 18- Download da imagem criada 12

14 O resultado final será uma imagem como a que se apresenta na figura 19. Figura 19- Resultado final 13