From LABMM1_IDE

Revision as of 22:14, 14 January 2011

Projecto Final IDE/LabMM1

O projecto "Aprender Inglês com a Bia" foi realizado no âmbito das Unidades Curriculares de Imagem Digital Estática e de Laboratório Multimédia I.
Esta aplicação multimédia foi desenvolvida, inicialmente, a pensar em crianças entre os 6 e os 10 anos, mas as idade tiveram de ser alteradas para entre os 5 e os 7. Tal alteração justifica-se com o facto de as crianças dos 6 aos 10 anos estarem em diferentes estádios de desenvolvimento cognitivo, pelo que não se iria adequar a todas as crianças nos seus diferentes estádios.

Meio de distribuição: offline (CD)

Elementos do Grupo

Grupo nº3

Alexandra Guedes nº mec.60387

Ana Rita Regatão nº mec.59664

Mónica Azevedo nº mec.61373

Isabel Matos nº mec.61215

Imagens Base

• Fontes e inspirações para desenhar

http://www.tiburcio.locaweb.com.br/colorir.htm desenhos

http://www.shutterstock.com/pic-52921033/stock-vector-suburb-vector-background.html Cenários, mascotes, ideias de cores e identidade visual

Estado da arte

O nosso projecto visa a aprendizagem do vocabulário básico em inglês. Uma vez que se destina a crianças deve ser rico em cor e animação para desta forma conseguir captar a atenção do público alvo. Aqui estão algumas aplicações do mesmo género:

http://www.mingoville.com/pt.html

http://www.storyplace.org/eel/activities/littleredhightops.asp

http://learnenglishkids.britishcouncil.org/en/make-your-own/animal-maker

http://learnenglishkids.britishcouncil.org/en/short-stories/the-princess-and-the-dragon

http://www.canalkids.com.br/portal/canal/index.htm

Divisão de tarefas

Imagem Digital Estática
Ana Rita - Cidade (menu principal), sala de aula, template das caixas de diálogo, caixas de diálogo da sala de aulas e de ajuda
Alexandra - Casa de família, menu, caixa de diálogo da família e de sair
Isabel -Criação da pagina da wiki, estado da arte, arborescência(retificada pela Mónica Azevedo), Loja de animais, caixas de diálogo animais
Mónica - Mascote, logótipos
Template, tema visual e requisitos funcionais- Mónica, com revisão final em grupo

Laboratório Multimédia I
Ana Rita - Animação e programação da cidade (portas) e sala de aula
Alexandra - Animação e programação da casa de família, menu (presente em todos os cenários) e junção de todos os ficheiros Flash
Isabel - Animação e programação da loja de animais
Mónica - Animação inicial e arborescência
Relatório - Mónica, com a colaboração dos restantes elementos

Arborescência

Elementos de Identidade

Mascote_frente, lateral, voar e a chorar

Protótipos para logotipo

Logótipo final

Logótipo com margem de segurança

Logótipo a preto-e-branco

Caixas de diálogo

Menu

Opções Tipográficas

Tipografia Principal Título - Cooper Std

Tipografia Secundária Caixas de diálogo - Arial

Cenários

Som
- Música de fundo (controlo on/off)
- Som em português de cada objecto, pessoa ou animal
- Som em inglês de cada objecto, pessoa ou animal
- Som na caixa de diálogo de ajuda - explicação da aplicação

Diários de Bordo

22 de Novembro
- Escolha do grupo
- Brainstorming acerca do tema/tipo de aplicação

25 de Novembro
- Desenvolvimento do conceito da aplicação: escolha do layout, da mascote, título, escolha da faixa etária do público-alvo
- Definição do meio de distribuição

26 de Novembro
- Memória descritiva
- Pesquisa de aplicações semelhantes - Estado da arte
- Criação da página da wiki
- Tema visual

29 de Novembro
- Divisão de tarefas

30 de Novembro
- Início da ilustração dos cenários, mascote e possíveis logótipos

2 de Dezembro
- Identidade visual

6 de Dezembro
- Arborescência

8 de Dezembro
- Decisão de todas as posições da Bia (mascote)

10 a 13 de Dezembro
- Ilustração dos cenários, mascote e logótipos

13 de Dezembro
- Apresentação Final - Imagem Digital Estática
- Três edifícios da cidade
- Tentiva da sala de aula
- Interior casa de família
- Parte da loja de animais
- Logótipos
- Bia de frente e na lateral

16 de Dezembro
- Início da ilustração das caixas de diálogo
- Escolha logótipo

17 a 27 de Dezembro
- Conclusão de todos os ecrãs e posições da mascote (frente, lateral, voar e chorar) em Illustrator

3 de Janeiro
- O grupo reúne-se pela primeira vez depois de dia 17 de Dezembro para trocar ideias e apresentar o trabalho feito durante as férias.

4 e 5 de Janeiro
- Animação em Flash

6 de Janeiro
- Gravação de todos os sons ditos pela Bia
- Início do controlo por ActioScript 2.0

7 de Janeiro
- Manipulação dos sons
- Escolha da música de fundo

8 a 10 de Janeiro
- Animação e programação em ActionScript 2.0
- Packaging
- Fim do Tema visual e requisitos funcionais

11 de Janeiro
- Fim da animação e programação da sala de aula, portas da cidade e casa de família (interior)
- Colocação dos ecrãs no template, imagens base, continuação do mesmo e alteração da arborescência

12 de Janeiro
- Continuação do Flash
- Revisão e entrega do template final, tema visual e requisitos funcionais
- Início do relatório

13 de Janeiro
- Continuação da programação em Flash (Loja de animais e junção de todos os cenários)
- Continuação do relatório

14 de Janeiro
- Fim de todo o processo em Flash
- Finalização do relatório

Relatório

Resumo

Este relatório surge no decorrer da realização do projecto de Laboratório Multimédia I, do 1º ano do curso de Novas Tecnologias da Comunicação, da Universidade de Aveiro e pretende ser um relatório fidedigno de todo o processo de desenvolvimento da aplicação multimédia.

O relatório está dividido em cinco partes principais: apresentação do projecto, análise e planeamento, desenho funcional (requisitos funcionais, estrutura arborescente, desenho de interacção e usabilidade), desenho técnico, produção do projecto (estrutura e meios de navegação, integração e controlo de som, animações, soluções técnicas adoptadas para a resolução de problemas).

Por fim, faremos uma reflexão crítica de todo o projecto, juntamente com as conclusões e sugestões de melhoria.

1. Apresentação do projecto

O projecto final resultou na construção de uma aplicação multimédia interactiva, desenvolvida para ambiente off-line (CD-ROM), utilizando a ferramenta Adobe Flash CS3 e Ilustrator CS3 leccionadas nas Unidades Curriculares de Laboratório Multimédia II e Imagem Digital Estática.

A aplicação multimédia interactiva destina-se a ensinar inglês a crianças entre os 5 e os 7 anos; é constituída por um cenário principal (cidade) e três secundários (escola, casa e loja de animais), tendo como objectivo a exploração da cidade e dos respectivos edifícios. Optamos por utilizar um ambiente de uma cidade, onde o utilizador pode entrar nos diferentes edifícios e interagir com os objectos, pessoas ou animais que irá encontrar, estes reagem ao rollover com uma pequena animação e, no caso dos animai, com os respectivos sons; cada objecto, ao ser clicado, faz surgir uma caixa de diálogo que contêm as palavras (em português e inglês) e sons associados ao objecto, pessoa ou animal.

Para esta aplicação multimédia interactiva, elegemos o paradigma de interacção Ambiente. O utilizador não sabe à partida quais os objectos clicáveis, sendo necessária a exploração de todo o cenário para os descobrir. Escolhemos este paradigma de interacção para a nossa aplicação, pois este paradigma cativa mais o utilizador. Quando a criança clicar em cada objecto, pessoa ou animal irá surgir uma caixa de diálogo com a palavra escrita em português e inglês e respectivos botões de som; cada caixa de diálogo tem, também, uma imagem do elemento clicado e um botão para a fechar, visto que, quando uma caixa de diálogo está aberta, não é possível passar directamente para outro elemento.

2. Análise e planeamento

Para realizar este projecto, começamos por pensar como seria o layout da aplicação, a mascote, título e a faixa etária do público-alvo.

Começamos por decidir o nome da mascote: Bia. Como a fonética das palavras ‘Bia’ e ‘Bee’ é idêntica, optamos por uma abelha. Para manter a coerência visual, elegemos como cor principal da aplicação o amarelo e a forma de um hexágono para os botões e caixa de diálogo de saída, pois são semelhantes aos favos de mel. Para fazer esta aplicação multimédia interactiva pesquisamos algumas aplicações do mesmo género.

O layout da aplicação não é muito elaborado devido à faixa etária do utilizador.