View
216
Download
3
Category
Preview:
Citation preview
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
COLOURlovers M a n u a l e G u i a d e e x p l o r a ç ã o d o C O L O U R l o v e r s 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
Elisa Cidade
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 COLOURlovers ©
Nome COLOURlovers
Tipo de ferramenta Web 2.0
Autores e/ou Criadores CHROMAom, Inc. ©
Versão Versão 2
Tipo de versão Online e gratuita (com necessidade de registo)
URL’s http://www.colourlovers.com
Língua(s) Inglês
Tipo de funções Ferramenta para composição de cores e criação de paletas e
padrões.
Recursos necessários Computador com ligação à Internet e browser
Breve descrição O COLOURlovers é uma comunidade online e oferece um
conjunto de ferramentas de criação de cores, paletas e outras
aplicações, muito interessante para exploração em contexto
educativo (e não só). Podemos criar e partilhar Cores, Paletas e
Padrões, muitos deles criados a partir de imagens/fotografias.
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 COLOURlovers ©
1. Para acedermos a esta ferramenta, devemos, no browser da Internet digitar o seguinte
endereço www.colourlovers.com/.
2. Iremos visualizar a página inicial (Figura 1).
Figura 1 – Página inicial do COLOURlovers
3. Nesta primeira página, existe uma barra de menus com as opções” Browse” (Procurar),
“Creat” (Criar), “Search” (Pesquisar), “Comunity” (Comunidade), “Chanells” (Negócios),
“Trends” (Tendências), “Tools” (Ferramentas) e Store (Figura 2).
Figura 2 – Barra de menus do Colourlovers
4. Ao clicarmos na primeira ferramenta desta barra “Browse” (Procurar), temos acesso a
um infinito número Paletas, Padrões, Cores e amigos de COLOURlolovers.
5. A segunda opção da Barra de Ferramentas “Creat” (Criar), permite criar uma Paleta de
cores, criar um padrão e o nome de uma cor (Figura 3).
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 3 - Barra de ferramentas
5.1. Clicando em “Pallette (Paleta), aparece-nos uma janela (Figura 4), que nos explica o que
podemos criar, e nos dá acesso a três menus de criação: “Basic” (Básico), “Advanced”
(Avançado) e “From a Photo” (a aplicar a partir de uma fotografia).
Figura 4 – Criação de uma paleta de cores
5.1.1. Básica: para guardar esta Paleta de cores, exige o registo.
Figura 5 – Exemplo de paleta de cores
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
5.1.2. Avançada: remete-nos para a ferramenta COPASO (Figura 6).
Figura 6 - Página de visualização do COPASO
5.1.3. A partir de uma foto- Remete-nos para a ferramenta PHOTOCOPA (Figura 7).
Figura 7 - Página de visualização PHOTOCOPA
5.2. Clicando em “Pattern” (Padrões), aparece-nos uma janela (Figura 8), que nos explica o que
podemos criar, e nos dá acesso a dois menus de criação: “Color a Pattern” (Padrão de cor
única) e “Design a Pattern” (Padrão de Design).
Figura 8 - Criação de uma “Pattern”
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
5.2.1. Padrão de cor única. Para guardar exige registo (Figura 9).
Figura 9 – Padrão de cor única
5.2.2. Padrão de Design. Remete-nos para a ferramenta SEAMLESS (Figura 10).
Figura 10 – Página de visualização SEAMLESS
5.3. Clicando em “Color” (Cor), aparece-nos uma janela (Figura 11), que nos explica o que
podemos criar, e nos dá acesso a um menu de criação: “Creat a Color” (Criar a cor) (Figura
12).
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
Figura 11 – Nomear uma cor
Figura 12 – Criar uma cor
6. A terceira opção da Barra de Ferramentas, “Search” (Pesquisar) permite encontrar
muitas Paletas, Padrões e Cores, para nos inspirar.
7. A quarta opção da Barra de Ferramentas, “Comunity” (Comunidade) permite a partilha
de informações sobre os trabalhos realizados.
8. A quinta opção da Barra de Ferramentas, “Chanells” (Negócios) permite o acesso a
negócios, moda, etc.
9. A sexta opção da Barra de Ferramentas, “Trends” (Tendências) permite o acesso a
uma variada informação relacionada com o COLOURlovers.
10. A sexta opção da Barra de Ferramentas “Tools” (Ferramentas) permite o acesso a
algumas ferramentas de criação: SEAMLESS, PHOTOCOPA e COPASO.
10.1. Ao clicar em “SEAMLESS” visualizamos a seguinte figura (Figura 13).
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
Figura 13 – Página de visualização do SEAMLESS STUDIO
10.1.1. Do lado esquerdo da figura (Figura 14), encontramos o menu “BASIC” com
algumas formas a utilizar na criação do padrão desejado.
Figura14 – Menu Basic
10.1.2. Depois de seleccionada a forma desejada, a mesma deverá ser desenhada na
área de trabalho (Active Tool Draw), num espaço central destinado a esse fim.
Seleccionar formas:
Figura 15 – Ferramentas – Seleccionar Formas
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
Desenhar:
Figura 16 – Àrea de trabalho
10.1.3. O menu Layers permite-nos gerir o trabalho efectuado. Para tal dispõe das
seguintes ferramentas:
Delete – Apaga a forma seleccionada.
Group – Permite agrupar duas ou mais
formas para as editar em simultâneo.
Clone – Permite duplicar uma ou mais
formas.
Flip horizontally and vertically -
Permite girar a forma seleccionada
horizontalmente e verticalmente.
Move Top e Move Bottom -
Permite mover a forma seleccionada, para
cima e para baixo
Figura 17 – Ferramentas básicas de trabalho
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
10.1.4. Cada forma fica numa “Layer” e pode ser editada individualmente, podendo ser
colorida em diferentes tonalidades de cinza. A “Layer” activa fica sinalizada a
vermelho.
Figura 18 – Layers
10.1.5. Na parte superior da área de edição existem as seguintes ferramentas (da
esquerda para a direita):
Figura 19 – Barra de ferramentas
Draw: Ferramenta de desenho
Select: Permite seleccionar uma forma.
Undo e Redu: Anula ou refaz uma acção.
Zoom: Permite aumentar ou diminuir a área de edição.
10.1.6. Depois de concluido o padrão o mesmo poderá ser guardado (exige registo)
ficando o mesmo disponível na comunidade do www.colourlovers.com.
11. Ao clicar em “PHOTOCOPA” visualizamos a seguinte figura (Figura 20):
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 20 – Página de visualização da PHOTOCOPA
11.1. Do lado direito da figura (Figura 21), encontramos na parte superior uma barra de
menus (Figura 21) e um menu básico (Figura 22), com diferentes opções.
11.2. Este menu permite: publicar o trabalho (Publish), guardar o trabalho (Save), abrir o
trabalho (Open) e ajuda.
Figura 21 – Barra de Menus do PHOTOCOPA
11.3. Clicando em “Photos” (Fotos), “Colors” (Cores) ou “Gallery” (Galeria) abre-se
janelas diferentes.
Figura 22 – Opções Photos, Colors e Gallery
11.4. Clicando em “Photos” (fotos), visualizamos a figura 23. Este permite ir buscar fotos
de maneiras: digitando a URL dada foto pretendida ou procurar a foto no Flicckr.
Figura 23 – Carregar fotografias de um URL ou Flickr
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
11.5. Clicando em “Gallery” (Galeria), visualizamos a figura 24. Esta permite escolher uma
foto nas existentes na galeria e que depois de seleccionada passa para a area de
trabalho.
Figura 24 – Exemplo de uma imagem da Galeria
11.6. Clicando em “Colors” (Cores), visualizamos a figura 25. As cores que aparecem,
são as da foto.Na parte inferior temos uma serie de opções: “Bright”, “Muted”,
“Analogous”, “Chance”, “Dark” e Light”. (Figura 26), que nos permitem …..
Figura 25 – Edição e selecção de cores a partir de uma imagem
Figura 26 – Paleta de cores da imagem
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
11.7. A partir daqui começamos a construir a nossa paleta de cores. Pomos o cursor em
cima da cor que queremos seleccionar (Figura 27) e a cor aparece no quadrado, na
parte inferir (Figura 28). Repetindo os passos anteriores vamos criando a nossa
Paleta de Cores, a partir de uma foto.
Figura 27
Figura 28
12. Ao clicar em COPASO visualizamos a seguinte figura (Figura 29). Temos que entrar em
“Log in”, com a nossa senha, para podermos aceder à ferramenta.
Figura 29 – Ferramenta COPASO
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
12.1. Na parte superior da figura, temos um espaço para escrever o nome da paleta. Logo
por baixo, temos um espaço para colocarmos a imagem seleccionada. Para
seleccionar a imagem, clicamos em “Attach New” (Figura 30).
Figura 30 – Selecção de imagem para uma paleta no COPASO
12.2. Clicando em “Attach New”, aparece-nos a figura 31, clicar novamente em Procurar e
aparece-nos a figura 32. Nesta figura, vamos buscar a imagem, voltamos a clicar
em “Attach New” e a imagem aparece-nos no canto superior esquerdo, na área de
trabalho (Figura 33).
Figura 31 – Adicionar imagem à Livraria
Figura 32 – Procurar a imagem no nosso computador
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
14
Figura 33 – Imagem carregada pronta para a criação de uma paleta
12.3. Repetindo o processo anterior passo acrescentar novas fotos, que ficam na parte
inferior esquerda (Figura 34). Clicando na imagem que quero, ela passa para o
quadrado de cima (Figura 35).
Figura 34
Figura 35
12.4. Para podermos, criar a nossa paleta de cores, temos que clicar em “Pixelate” e
seleccionar a cor pretendida na imagem (Figura 36), clicar duas vezes e ela passa
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
15
para a paleta de cores, no lado direito (Figura 37). E assim sucessivamente, até
termos a nossa Paleta de cores (Figura 38).
Figura 36
Figura 37
Figura 38
12.5. No lado esquerdo, temos a cor seleccionada no momento e três barras de cor
(Figura 39). A primeira serve para alterar a cor, a segunda permite mudar o tom (da
cor seleccionada até ao branco) e a terceira permite mudar o tom(da cor
seleccionada até ao preto).
Figura 39
12.6. Depois de concluida a Paleta de Cores, poderá ser guardada e partilhada.
Recommended