![Page 1: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/1.jpg)
SITE – ESPAÇO +
P R O J E C T O F I N A L
![Page 2: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/2.jpg)
ANTÓNIO CARMO- LUCINDA ALMEIDA
PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO
ESCOLA SUPERIOR DE EDUCAÇÃO J E A N PI A G E T - A L M A D A
2006
![Page 3: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/3.jpg)
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
![Page 4: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/4.jpg)
INTRODUÇÃO
PÁGINA PRINCIPAL
TUCANOZEBRA TIGRE
CARACTERÍSTICAS
JOGOS
FICHA TÉCNICA
![Page 5: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/5.jpg)
FORMULAÇÃO DO TRABALHO
OBTER E TRATAR CONTEÚDOS
DESIGN GRÁFICO
DESENVOLVIMENTO WEB
PUBLICAÇÃO
RELATÓRIO
15 JULH
ENTREGA DO PROJECTO
CRONOGRAMA
![Page 6: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/6.jpg)
STORYBOARD
2006
![Page 7: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/7.jpg)
STORYBOARD
2006
![Page 8: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/8.jpg)
STORYBOARD
2006
![Page 9: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/9.jpg)
STORYBOARD
2006
![Page 10: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/10.jpg)
STORYBOARD
2006
![Page 11: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/11.jpg)
STORYBOARD
2006
STORYBOARD
2006
![Page 12: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/12.jpg)
STORYBOARD
2006
![Page 13: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/13.jpg)
STORYBOARD
2006
![Page 14: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/14.jpg)
STORYBOARD
2006
![Page 15: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/15.jpg)
STORYBOARD
2006
![Page 16: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/16.jpg)
STORYBOARD
2006
![Page 17: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/17.jpg)
STORYBOARD
2006
![Page 18: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/18.jpg)
STORYBOARD
2006
![Page 19: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/19.jpg)
MEMÓRIA DESCRITIVA
2006
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.
![Page 20: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/20.jpg)
MEMÓRIA DESCRITIVA
2006
-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
![Page 21: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/21.jpg)
MEMÓRIA DESCRITIVA
2006
-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
![Page 22: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/22.jpg)
MEMÓRIA DESCRITIVA
2006
Criação de jogos com utilização intensiva do photoshop – jogo de diferenças duplicação de imagens e utilização de transparênciasPuzzles – 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
![Page 23: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/23.jpg)
MEMÓRIA DESCRITIVA
2006
- 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.
![Page 24: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/24.jpg)
MEMÓRIA DESCRITIVA
2006
- 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
![Page 25: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/25.jpg)
MEMÓRIA DESCRITIVA
2006
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)
![Page 26: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/26.jpg)
MEMÓRIA DESCRITIVA
2006
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 écran3 – Colocação de imagem como 1.º layer2 – Criar título no photoshop – 2.ª layer4 – Criação da máscara5 – Correcção da cor
![Page 27: SITE – ESPAÇO + P R O J E C T O F I N A L. ANTÓNIO CARMO- LUCINDA ALMEIDA PÓS-GRADUAÇÃO EM TECNOLOGIAS DE INFORMAÇÃO E COMUNICAÇÃO ESCOLA SUPERIOR DE](https://reader035.vdocuments.com.br/reader035/viewer/2022062700/552fc119497959413d8c9278/html5/thumbnails/27.jpg)