SITE – ESPAÇO +
PROJECTO FINAL
ESCOLA SUPERIOR DE EDUCAÇÃO
J E A N PI A G E T - A L M A D A
ANTÓNIO CARMO- LUCINDA ALMEIDA
PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO
2006
FICHA TÉCNICA
• Titulo – Animajoga
• Sítio – www.animajoga.com
 Tema –Animais
• Género -Lúdico/Pedagógico
• Objectivos do projecto – Promover o jogo como actividade
lúdica e educativa
• Audiência alvo - Crianças
• Ferramentas/Tecnologias – Adobe Photoshop
Macromedia Dreamweaver/HTML e CSS
Macromedia Flash
Software de FTP / Internet Explorer
 Autores – António Carmo & Lucinda Almeida
2006
INTRODUÇÃO
PÁGINA
PRINCIPAL
ZEBRA
TIGRE
CARACTERÍSTICAS
JOGOS
FICHA
TÉCNICA
TUCANO
FORMULAÇÃO DO
TRABALHO
OBTER E TRATAR
CONTEÚDOS
CRONOGRAMA
ENTREGA
DO PROJECTO
DESIGN GRÁFICO
DESENVOLVIMENTO
WEB
PUBLICAÇÃO
RELATÓRIO
15 JULH
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
STORYBOARD
2006
MEMÓRIA DESCRITIVA
A apresentação da posposta para a criação do site com o tema
ANIMAJOGA, tem como objectivo a divulgação/utilização de um espaço,
onde a aprendizagem sobre os animais é feita de forma lúdica.
Os conteúdos apresentados nas páginas abrangem diferentes áreas,
desde as características dos animais aos diferentes jogos , que se
encontram hierarquizados, de modo a atingir os objectivos definidos.
A identidade visual do site é estabelecida através de uma linha,
designada de perfil, que funciona como elemento polarizador, que
encerra as áreas que ao longo do site vão ser abordadas. A linha perfil
contém três grandes espaços Zebra Tigre e Tucano que ao longo da
navegação integram outros espaços. O dinamismo da linha gera o
percurso de navegação que se estrutura em seis níveis e estabelecem
ligações quer entre os diferentes níveis quer dentro dos mesmos.
2006
MEMÓRIA DESCRITIVA
-Utilização de um perfil com imagens
estilizadas (filtros)
- layers na generalidade das páginas
-Tabelas com as opções de menu e
imagens trabalhadas sem fundo na maioria
das páginas
-Estilos em estilos.css – configuração de
cor de textos, títulos e links (body)
-Utilização de subclasses para definição de
diferentes cores de links na mesma página
2006
MEMÓRIA DESCRITIVA
-Utilização de flash para criar animações na
abertura e nas páginas de características
-As animações de flash foram previamente
preparadas no photoshop, imagens de
animais e pegadas
-Cores utilizadas - cor laranja #FF8C00 e
dois tons de cinza #CCCCCC E #6C6C6C
-Tabelas nas páginas de impressão dos
puzzles como elemento predominante
2006
MEMÓRIA DESCRITIVA
Criação de jogos com utilização intensiva
do photoshop – jogo de diferenças
duplicação de imagens e utilização de
transparências
Puzzles – utilização de seleccões,
camadas, e estilos de layer (Bebel and
emboss)
Descobre 6 tigres – seleccções, path,
desenho vectorial – Pen tool / selecion tool
2006
MEMÓRIA DESCRITIVA
- No jogo das diferenças utilização de várias
páginas e imagens;
- No Jogo dos tigres, utilização de image
maps, juntamente com layers, do tigre
recortado, escondidas e aplicação de
Behaviors no DreamWeaver. Camadas,
selecções, paths, composição com brush –
folhas e ervas em várias camadas com os
tigres recortados (sem fundo) no meio.
2006
MEMÓRIA DESCRITIVA
- Behaviors – para além do jogo do tigre,
aplicação na página do tucano, mostrando,
uma imagem de cada vez, à passagem do
rato por parte da própria imagem.
- Utilização de imagens “Rollover image”
nas páginas das características.
- Optimização frequente das imagens no
photoshop
2006
MEMÓRIA DESCRITIVA
Na página da zebra utilização de Path
(Simulando a pele da zebra) -Fill Path sobre
imagem com opacidade de 30% sobre um
gradiente.
Na página do tigre utilizámos o mesmo
processo anterior com diferentes selecções
(circulos perspectivados – revelando o olhar
do tigre)
2006
MEMÓRIA DESCRITIVA
Utilização de uma máscara na página de
abertura feita a partir da imagem base da
home page, sendo a identificação do
trabalho:
1 - Imagem de écran
3 – Colocação de imagem como 1.º layer
2 – Criar título no photoshop – 2.ª layer
4 – Criação da máscara
5 – Correcção da cor
2006