Post on 13-Nov-2018
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.
Ferramentas Web, Web 2.0 e Software Livre em EVT 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
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
1
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 Online, sem indicação da versão ou data de criação
Tipo de versão Online, gratuita, com possibilidade de registo (gratuito e
necessário para guardar projetos)
URL’s http://pixieengine.com/creation/images/new
Língua(s) Inglês
Tipo de funções Programa de desenho e pintura
Recursos necessários 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.
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
2
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 http://pixieengine.com/creation/images/new. (Recomenda-se a utilização do internet
browser Google Chrome)
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).
Tela de desenho
Barra de
ferramentas
de desenho
Barra de
comandos
Paleta de
cores
Hiperligações Login e
registo
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
3
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
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
4
Brush (Pincel)
Permite desenhar linhas em
qualquer direção, embora com
maior espessura.
B e 2
Dropper (Conta-
gotas)
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).
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
5
Figura 5- A gradação da paleta de cores
Figura 6- Painel de intensidade de cores
Cor preta com
gradação de 50
Cor preta sem
gradação (100)
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
6
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.
Figura 7- Barra de comandos
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.
Figura 8- Hiperligações
Retrocesso
Retrocesso
Limpar a
tela de
desenho
Aceder à
consola de
comandos
Criar um
novo
desenho
Publicar no
chat
Descarregar
o desenho Repete os
movimentos
realizados
Grava o
desenho
Acede á
própria
funcionalidade
Permite aceder
as imagens
realizadas
Permite aceder
aos projetos
do Pixie
Permite aceder
ao Fórum do
Pixie
Permite aceder
a uma lista
com os
utilizadores
registados
Permite aceder
a um wiki da
funcionalidade
Permite aceder ao
login ou ao registo
na aplicação
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
7
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
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
8
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.
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
9
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).
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
10
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)
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
11
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.
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
12
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
Ferramentas Web, Web 2.0 e Software Livre em EVT
Estudo sobre a integração de ferramentas digitais no currículo da disciplina de Educação Visual e Tecnológica
13
O resultado final será uma imagem como a que se apresenta na figura 19.
Figura 19- Resultado final