Zooland

From LABMM1_IDE

Latest revision as of 21:03, 14 January 2011

Elementos do Grupo

Adriana Vaz nº60110

Daniel Rodrigues nº42093

Miguel Moreira nº60108

Ricardo Carvalho nº59763

Projecto

Descrição da aplicação

Neste projecto iremos realizar uma aplicação multimédia para distribuição online, que consistirá numa página web interactiva que se destina a um público infanto-juvenil, numa faixa etária entre 7 aos 10 anos (*). Esta aplicação terá como função proporcionar uma pequena viagem pelo "mundo animal", transmitindo conhecimentos básicos acerca deste assunto num contexto de parque zoológico/natural interactivo.

Conceptualização visual

Pretendemos adoptar um estilo visual adequado ao público alvo, recorrendo portanto, a imagem vectorial e bitmap simples para fácil interpretação, mas sem no entanto perder qualidades atractivas e cativantes para o utilizador.

Estado de Arte

A partir da pesquisa que efectuamos, concluímos que é bastante dificil encontrar aplicações semelhantes há que queremos construir. Sendo esta direccionada para uma viagem no mundo animal, a nossa pesquisa incidiu sobre sites de jardins zoológicos e parques naturais assim como a alguns mini-games com a temática da zoologia.

Links:

Zoo Park S. Inácio

Identidade Visual

Logo

Fonts

Museo Slab

Aplicação: logo, menus, ...

Helvetica

Aplicação: corpo de texto, título, sub-títulos, ...

Cores

Cores do fundo:

Cores dos Habitats:

Diário de bordo

06-12-2010
A tipologia de imagem que escolhemos para a nossa aplicação beseia-se na marca Umbongo. Assim sendo, os cenários, os animais e todos os outros elementos visuais que compõem a aplicação terão um aspecto gráfico semelhante a este:

09/12/2010

(*)Após uma análise das várias etapas de desenvolvimento das crianças e discussão com os professores chegámos à conclusão que existe uma 'gap' significativa a nível de desenvolvimento intelectual em crianças de 6 aos 12 anos. Desta forma, o público alvo insere-se numa faixa etária dos 7 ao 10 anos de idade.

13/12/2010

Continuação dos desenhos em Adobe Illustrator CS3 dos animais e dos cenários.

4/01/2011

Continuação dos desenhos em Adobe Illustrator CS3 dos animais e dos cenários.

Ínicio da realização das animações dos animais em flash CS3.

Procura de sons ambiente para os habitats e para os animais.

Ínicio da implementação em flash dos conteúdos.

10/01/2011

Continuação dos desenhos em Adobe Illustrator CS3 dos animais e dos cenários.

Continuação das animações dos animais em flash CS3.

Continuação da implementação em flash dos conteúdos.

Início da implementação do jogo.

11/01/2011

Conclusão dos desenhos em Adobe Illustrator CS3 dos animais e dos cenários.

Conclusão das animações dos animais em flash CS3.

Conclusão da busca e tratamento de sons para os habitats e os animais.

Continuação da implementação em flash dos conteúdos.

Continuação da implementação do jogo.

12/01/2011

Implementação do panning em flash CS3.

Implementação dos sons dos habitats e dos animais em flash CS3.

Conclusão da implementação do jogo.

Entrega do templete de IDE.

13/01/2011

Conclusão da implementação em flash do projecto e resolução de bugs e problemas.

Início da realização do relatório de Labmm1.

14/01/2011

Resolução de bugs existentes na aplicação.

Conclusão do relatório de Labmm1.

Entrega do projecto final de Labmm1.

Estruturação de elementos a realizar (ao abrir a aplicação - página principal):

Componente:

Logótipo - Objectivo cumprido

Macaco

Detalhes:

Frente - Objectivo cumprido

3/4

Botões - objectivo cumprido

Detalhes:

Som on -

Som off -

Ajuda -

Sobre

Scroll

Habitats

Detalhes

Savana - x3(*)

Selva - x3

Ártico - x3

Floresta - x3

(*) - 3 planos; Noção de profundidade: Plano infinito, médio e primeiro plano.

Animais

Versão básica:

Leão

Zebra

Pinguim

Orca

Cobra

Tigre

Lobo

Urso Pardo

Versão Completa:

Leão

Zebra

Pinguim

Orca

Cobra

Tigre

Lobo

Urso Pardo

Girafa

Elefante

Avestruz

Urso Polar

Foca

Rena

Pantera

Macaco

Papagaio

Coruja

Raposa

Esquilo

...

Objectivos para aula do dia 16-12-2010 de Labmm1

-Pano do scroll funcional;
-Fast forward para o respectivo habitat ao clicar no botão que lhe corresponde;
-Sons Atribuidos.

Arborescência

Ecrãs modelo

Savana:

Árctico:

Cenários

Animais vectorizados

Mascote:

Outros animais:

Hipopótamo:

Hipopótamo final:

Zebra:

Zebra final:

Pássaro:

Pássaro final:

Pinguim:

Rinoceronte:

Leão:

Orca:

Foca:

Coruja:

Papagaio:

Cobra:

Tigre:

Urso polar:

Urso Pardo:

Lobo:

Requisitos funcionais

Menus

Menu up:

Menu over:

Botões

Botões up:

Botões over:

Scroll:

Relatório final

1.Apresentação do projecto:

Esta aplicação multimédia intitula-se Zooland e será para distribuição online, consistindo numa página web interactiva direccionada para um público infanto-juvenil, numa faixa etária entre 7 aos 10 anos. Terá como função proporcionar uma pequena viagem pelo "mundo animal", transmitindo conhecimentos básicos acerca deste assunto num contexto de parque zoológico/natural interactivo.

Adoptamos um estilo visual adequado ao público alvo, recorrendo portanto, a imagem vectorial e bitmap simples para fácil interpretação, mas sem no entanto perder qualidades atractivas e cativantes para o utilizador.

Propusemo-nos a realizar variados meios de navegação e interacção para tornar a nossa aplicação apelativa.

2.Análise e planeamento:

A partir da pesquisa que efectuamos ao longo do semestre,concluímos que é bastante dificil encontrar aplicações semelhantes há que queremos construir, no entanto numa instância final reparamos que o próprio site da marca Um Bongo teria sido actualizado para uma versão um pouco parecida com aquilo que nos propusemos a realizar. Sendo esta direccionada para uma viagem no mundo animal, a nossa pesquisa incidiu sobre sites de jardins zoológicos e parques naturais assim como a alguns mini-jogos com a temática da zoologia.

Começamos por estruturar a arborescência para decidirmos a disposição, meios e tipos de navegação. De seguida, demos mais importância ao design gráfico para termos ideia do aspecto visual que a aplicação viria a ter no produto final, o que se viria a verificar que a evolução das versões ‘beta’ para a final é notável. Na parte gráfica começamos por desenhar as personagens tendo em vista as peças do corpo que seriam utilizadas para animar posteriormente no flash. Depois de concluídos os elementos de navegação e os cenários iniciamos a implementação de conteúdos no flash.

3.Desenho funcional:

3.1.Requisitos funcionais:

Esta aplicação multimédia inicia-se com uma pequena animação de introdução ao Zooland dando a possibilidade ao utilizador de saltar a animação e passar directamente para o menu.

Trata-se de uma aplicação em que o utilizador tem a liberdade de navegar pelos diferentes habitats e clicar nos animais que lhes correspondem obtendo informações sobre eles.

As formas de navegar na aplicação que implementamos são o panning em que o utilizador ao encostar o cursor às extremidades laterais do ecrã consegue mover-se pelo cenário e ainda acesso directo ao habitat ao clicar nos botões do menu que lhe correspondem, com o objectivo de dar uma escolha mais ampla de navegação ao utilizador.

Durante a planificação do projecto, tínhamos decido implementar também o scroll mas após termos posto o panning a funcionar, consideramos que seria muito confuso para o utilizador e, por isso, optamos por não o implementar.

A aplicação tem ainda um jogo interactivo relativamente básico, através de drags áreas de validação de acordo com as respostas correctas, aceitando apenas os animais no habitat correcto mostrando assim, os conhecimentos adquiridos ao navegar na aplicação.

3.2.Estrutura arborescente:

A estrutura arborescente da aplicação é não-linear e está construída de modo a haver possibilidade de navegar entre os diversos nós e links quase sem restrição. O utilizador tem quase totalidade de liberdade ao navegar na aplicação. Está desenhada de modo a não ser demasiado extensa e larga para não a tornar demasiado maçadora ou desinteressante. A página principal e os habitats correspondem aos nós e o jogo e os animais são os links, não possuindo qualquer descendência.

3.3.Desenho de interacção e usabilidade:

Os princípios de interacção e usabilidade considerados no desenho da estrutura, percursos e meios de navegação estiveram bem assentes na aplicação. Para isso, foi preciso fazer uma pesquisa relativamente aprofundada do utilizador (neste caso, crianças dos 7 aos 10 anos) e ficamos bem inteirados daquilo que ele está habituado a ver e a lidar.

Dentro dos factores cognitivos/psicológicos destaca-se o principio “Os utilizadores vêem o que esperam ver”. Por exemplo o botão de fechar está sempre localizado no canto superior direito das janelas para não induzir em erro.

Sabendo que a capacidade humana de recordar informação é limitada e inferior à capacidade de recordar a informação através de pistas visuais, todas a aplicação tem os menus sempre visíveis e os botões muito bem explícitos para permitir ao utilizador aceder à informação que pretende sem exercitar a memória.

As cores foram também escolhidas de acordo com estes princípios não havendo discriminação cromática.

4. Desenho técnico:

Do ponto de vista do desenho técnico adoptamos um estilo gráfico semelhante aos sites que pesquisamos inicialmente, Um Bongo e Quinta de Santo Inácio, sendo esse estilo baseado num tipo de imagem limpa, geométrica, com tons esverdeados, ícones sintéticos/simples, compondo assim um tipo de janelas simples e interessante.

O desenvolvimento dos animais baseou-se nos existiam no Um Bongo, pois são um estilo atractivo e que é reconhecido por maior parte do público alvo. Os animais foram feitos a partir do programa de ilustração Illustrator CS3, havendo a utilização de uma tablet com brush e da ferramenta pen tool, os cenários foram divididos por layers para permitir a criação de planos diferentes e houve a utilização de ferramentas que permitem a criação de sombras em toda a parte gráfica.

Ainda houve a pesquisa de imagens bitmap, que foram tratadas superficialmente no programa Photoshop CS3, para ser possível mostrar os habitats e os animais no seu aspecto real, permitindo ao utilizador ter acesso em termos gráficos ao seu ambiente natural.

5. Produção do projecto:

5.1.Estrutura e meios de navegação/interacção:

Esta aplicação multimédia tem como principal paradigma de interacção ambiente, podendo ser também considerado o paradigma de interacção tutorial. Contém metáforas gráficas como os animais e ainda botões posicionados no menu que permitem acesso directo aos habitats.

Trata-se de uma aplicação com dois paradigmas de interacção, uma vez que a navegação é através de elementos embebidos no cenário/stage, sem qualquer indicação da sua usabilidade do ponto de vista da interacção, recorrendo apenas da percepção do utilizador. Por outro lado, podemos encontrar um paradigma de interacção tutorial do ponto de vista do acesso às fotografias de cada animal, uma vez que é necessário clicar primeiro sobre o animal e depois clicar sobre a fotografia pretendida para a poder visualizar, eliminando portanto a possibilidade de aceder à fotografia sem primeiro ‘passar’ pela pop-up informativa do animal em questão.

5.2. Integração e controlo do som:

Todos os sons utilizados na aplicação, mais concretamente os sons dos habitats, dos animais e do jogo foram manipulados no software Audacity, ficando com as características que pretendíamos para implementar na aplicação tais como como a normalização, o corte do som, nivelização, equalização e o fade in e fade out.

No flash os sons foram implementados de maneira diferente. Os sons dos animais não possuem código, estando embutidos no movie clip da frame Over dos botões. Os sons dos habitats , bem como a notificação sonora de ‘correcto’ e ‘errado’ utilizados no jogo, estão implementados a partir de uma variável pois foram posteriormente utilizados na navegação dos habitats e no código do jogo em si.

5.3. Animação:

As animações existentes na aplicação multimédia são: A animação inicial que desemboca na página principal, e as animações dos animais que estão dentro do movieclip da frame Over dos botões.

5.4. Soluções técnicas adoptadas para a resolução de problemas:

No desenrolar do projecto, foram surgindo alguns bugs ou problemas nomeadamente, alguns botões dos animais não funcionavam, o que foi rapidamente resolvido com o renomear das labels e algumas fotos não estavam alinhadas.

Deparámo-nos também com um problema com as animações dos animais, que continuavam a dar sempre que uma pop-up dos animais ou dos habitats abria, e os sons das animações reproduziam criando um pequeno “caos”.

Assim, para não haver necessidade de criar as variáveis de 16 sons e faze-los parar tivemos de usar códigos enabled para activar e desactivar os botões de maneira a não executarem funções e produzir sons enquanto as pop-ups se mantinham abertas. Houve também alguns bugs relaccionados com o jogo mas , de um modo geral, conseguimos resolver com sucesso todos os problemas com que nos deparámos.

6. Conclusões:

6.1. Reflexão crítica:

De um modo geral, pensamos que o trabalho correu como prevíamos inicialmente. O ideal e objectivo da aplicação manteve-se, e conseguimos atingir todas as metas que planeamos execpto a idea de implementar o scroll, que optamos por não ir para a frente com isso pois já tinhamos implementado o panning e ficaria muito confuso.

É certo que, no densenrolar do projecto tivemos alguns problemas a nível de implementação e alguns problemas e bugs que não esperavamos. Mas conseguimos sempre resolvê-los com sucesso e estivemos à altura do que nos foi proposto.

6.2. Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto:

Para aperfeiçoamento do projecto no futuro, pensamos que poderiamos implementar alguns vídeos dos animais (não o fizemos inicialmente pois a aplicação ficaria muito pesada para web), implementávamos mais animais, extendiamos a informação sobre os mesmos e exploravamos mais a parte dos jogos no intuito de haver um maior entretenimento do público alvo.

7. Referencias web e bibliográficas:

A partir da pesquisa que efectuamos, concluímos que é bastante dificil encontrar aplicações semelhantes há que queriamos construir. Sendo esta direccionada para uma viagem no mundo animal, a nossa pesquisa incidiu sobre sites de jardins zoológicos e parques naturais assim como a alguns mini-games com a temática da zoologia. Links: Zoo Park S. Inácio

      http://www.umbongo.pt/#/home