Projecto Quimica
(→Referências Web e Bibliográficas) |
(→Diário de Bordo) |
||
| (Uma edição intermédia de um utilizador não apresentada) | |||
| Linha 79: | Linha 79: | ||
'''13 | Janeiro''' | '''13 | Janeiro''' | ||
| − | Integração final dos sons restantes, correcção de erros do | + | Integração final dos sons restantes, correcção de erros do relatório, edição final da Wiki e entrega final. |
== Divisão de Tarefas == | == Divisão de Tarefas == | ||
| Linha 281: | Linha 281: | ||
==== Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto ==== | ==== Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto ==== | ||
| + | Existe algum aperfeiçoamento a ser realizado à aplicação, no entanto, com mais tempo se poderia concluir. Poderiamos melhorar alguns aspectos da interacção, animação, bem como, com mais pesquisa, implementar código ActionScript 2.0 mais elaborado, de forma a aumentar a interactividade do utilizador e as respostas pela aplicação por ele proporcionadas. | ||
| + | |||
| + | Seria interessante também acrescentar mais informação relativa à química, para, desta forma, incentivar mais o conhecimento dos utilizadores bem como oferecer mais conhecimento, de forma simplificada e divertida. | ||
=== Referências Web e Bibliográficas === | === Referências Web e Bibliográficas === | ||
Edição actual desde as 21h58min de 13 de Janeiro de 2012
Índice
|
Projecto Final
Projecto Final das unidades curriculares de Laboratório Multimédia I e de Imagem Digital Estática
Este projecto, de autoria multimédia, tem como objectivo geral o desenvolvimento de um quiosque multimédia interactivo, para distribuição off-line. Este serviria como local para interacção de todos os utilizadores que por lá passem. Apesar de poder ser feito por todos estes, é indicado para a faixa etária dos 9 aos 14 anos.
Elementos do Grupo
Luís Monteiro - 64356
Hugo Marques - 64575
Jorge Carvalho - 65153
Gonçalo Marques - 64302
Fase Inicial
Como ponto de partida o nosso grupo de trabalho escolheu como tema: "Museu da Ciência" e como sub-tema: Química. Uma vez que dentro da Química existem muitas possibilidades, decidimos escolher como conteúdo para o projecto "Elementos, compostos e misturas".
Diário de Bordo
3 | Dezembro
Primeiras ideias relacionadas com o projecto. Escolha do tema e subtema. Primeiras ideias para o ambiente geral da aplicação, começando assim os primeiros esboços da mesma para posterior apresentação na aula de IDE de 5 de Dezembro.
9 | Dezembro
Criação da página Wiki
10 - 11 | Dezembro
Elaboração dos cenários em illustrator das várias ideias que o grupo obteve. Foram desenhadas duas opções do ambiente gráfico. Este tem como paradigma de interação, o paradigma ambiente, uma vez que todos os objectos na cena não serão de interpretação óbvia.
12 | Dezembro
Elaboração da Arborescência para Laboratório Multimédia 1.
A arborescência acima apresentada é do tipo composta, começando com o Ambiente Principal, subdividindo-se em 4 nós: "Puzzle", "Microscópio", "Tubos de Ensaio" e "Livro/Informações". Cada uma destas subdivide-se em links. Esta tipologia foi escolhida uma vez que é necessária a coexistência de estruturas anteriores. O Quizz é um questionário, que se inicia obrigatoriamente na questão 1 e a partir desta é possível seguir até à questão 10. No entanto, a partir de cada questão é possível desistir e regressar ao "link" que lhe deu origem.
18 - 19 - 20 | Dezembro
Mehoramento de tudo o que foi realizado em IDE para entrega final desta parte do projecto.
21 | Dezembro
Inicio da estruturação de todos os elementos criados em IDE no stage do Flash CS3. Inicio da pesquisa dos sons que irão ser utilizados, bem como os respectivos elementos que os irão conter. Decisão sobre as perguntas que irão constar no Quizz e sobre os elementos que serão animados no ambiente principal. Foi feita a divisão de tarefas entre o grupo, onde, cada um, individualmente ficaria responsável por um ou mais ambientes. Isto, incluindo também as respectivas animações e programação.
28 | Dezembro
O grupo reuniu-se de forma a ter noção sobre o estado de cada desenvolvimento individual e desta forma dar opiniões de alterações que deviam ser feitas a cada ambiente. Inicio da estruturação e animação do Ambiente Principal.
3 | Janeiro
Pesquisa de sons, revisão de todos os sites pesquisados para dar inicio à programação e animação da aplicação multimédia. Continuação da estruturação e animação do Ambiente Principal e início da estruturação do ambiente das Experiências. Inicio do Relatório
4 | Janeiro
O grupo reuniu-se, mais uma vez, para organizar tudo o que tinha sido feito e desta forma proceder à estruturação final do projecto. Continuação do Relatório
7 | Janeiro
A animação, sonorização, programação e estruturação do Ambiente Principal foi finalizada e integrada no ficheiro finalizado. O grupo reuniu-se, virtualmente, de forma a trocar ideias sobre como algumas coisas poderiam ser feitas, nomeadamente a utilização do Microscópio e como seria a sua interacção com o público.
11 | Janeiro
O grupo reuniu-se para juntar tudo o que tinha sido realizado e resolver problemas que entretanto foram surgindo no que toca a programação em ActionScript.
12 | Janeiro
Finalização do Quiz e das Experiências. Resolução de problemas em ambos os ambientes. Continuação e finalização do relatório.
13 | Janeiro
Integração final dos sons restantes, correcção de erros do relatório, edição final da Wiki e entrega final.
Divisão de Tarefas
Cada elemento do grupo ficou responsável pela estruturação, animação e programação de um ou mais ambientes. No entanto, no que toca ao som, foram destacados dois elementos para pesquisar os respectivos elementos sonoros.
Gonçalo Marques - 64302
Desenho Vectorial da Personagem e Ambientes
Estruturação, Animação e Programação do ambiente do "Microscópio"
Arborescência
Pesquisa dos Textos da Aplicação
Luis Monteiro - 64356
Desenho Vectorial
Estruturação, Animação e Programação do ambiente principal
Estruturação, Animação e Programação do Quizz
Arborescência
Elaboração do Relatório
Pesquisa e escolha dos Sons com Jorge Carvalho
Pesquisa de aplicações semelhantes para inspiração/noção do estado de arte com Jorge Caralho e Hugo Marques
Pesquisa dos Textos da Aplicação
Edição da Wiki
Programação e Animação do ambiente das "Microscópio"
Jorge Carvalho - 65153
Desenho Vectorial
Estruturação, Animação e Programação do ambiente das "Experiências"
Arborescência
Pesquisa e escolha dos Sons com Luís Monteiro
Pesquisa de aplicações semelhantes para inspiração/noção do estado de arte com Luís Monteiro e Hugo Marques
Hugo Marques - 64575
Desenho Vectorial
Elaboração do Relatório
Estruturação, Animação e Programação do ambiente do "Livro"
Pesquisa de aplicações semelhantes para inspiração/noção do estado de arte com Luís Monteiro e Jorge Carvalho
Estruturação, Animação e Programação do ambiente das "Experiências"
Animação do ambiente das "Microscópio"
Pesquisa e escolha dos Sons com Luís Monteiro
Arborescência
Edição da Wiki
Ambiente
Capa do DVD
Relatório
Apresentação do Projecto
Este é um projecto que resulta do trabalho desenvolvido em duas unidades curriculares: Imagem Digital Estática e Laboratório Multimédia 1. Na primeira foi essencialmente desenvolvida a parte gráfica deste, culminando com o estudo da cor, de pesquisa, entre outros. De forma a finalizar o projecto temos a segunda unidade curricular apresentada, Laboratório Multimédia 1. Aqui irão ser utilizados todos os elementos gráficos já desenvolvidos, bem como todas as ideias já conceptualizadas.
Foi optado pelo desenvolvimento de uma aplicação para distribuição offline, uma vez que se destina a integrar quiosques multimédia situados no interior de um Museu da Ciência, mais propriamente num patamar relacionado com a Química, uma vez que a aplicação trata especificamente de “Elementos, Compostos e Misturas”.
Esta, denominada “Uma aventura na Química”, faz parte da área de conteúdos de Educação e é adequada a idades compreendidas entre os nove e os catorze anos, uma vez que é composto por informações pouco elaboradas para fácil compreensão. Ao longo de toda a aplicação é possível interagir com quase todos os elementos que a constituem, tendo estes geralmente ligações com informações, jogos, experiências, entre outros. Desta forma, e, utilizando cada um dos links, o utilizador pode navegar livremente entre toda a aplicação, de forma simples e directa. Foi utilizado um paradigma de interação ambiente, de forma a dar a possibilidade ao utilizador de explorar todo este sem qualquer restrição. A filiação desta aplicação é a Universidade de Aveiro.
Análise e Planeamento
A fase inicial deste projecto passou, sem qualquer dúvida pela análise e planeamento do mesmo. Tendo em conta todos os objectivos definidos anteriormente, começámos por pesquisar diversas aplicações/websites que estivessem directa ou indirectamente relacionados com o tema apresentado. Posteriormente, utilizando como inspiração algumas animações que foram visionadas e a ideia conceptualizada na unidade curricular de IDE foi iniciado o projecto.
De forma a não prejudicar os utilizadores que iriam interagir com a aplicação, decidimos focar a nossa atenção em elementos, compostos e misturas químicas, uma vez que o mundo da química é imensamente vasto. Utilizando todo o conhecimento que já possuíamos com o conhecimento de posteriores pesquisas que foi adquirido começámos a definir todo o conteúdo que iria estar presente. No entanto, o nosso foco principal era a facilitação de entendimento e simplificação de apresentação do conteúdo, uma vez que o publico que irá interagir com a aplicação será essencialmente público infantil, com pouco conhecimento e que o adquire de forma mais rápida se for leccionado de forma simples e, claro, divertida. Partindo deste último conceito, “diversão”, pretendíamos também que fosse possível transmitir todo este conhecimento mas de forma divertida e despreocupada. Qualquer tipo de interacção deveria fornecer conhecimento, mas nem sempre de forma tão directa como se poderá imaginar. Finalmente, a decisão de cor, já anteriormente feita em IDE foi aplicada e um pouco alterada perante aquilo que tinha sido idealizado. Os primeiros testes de cor idealizados foram baseados na ideia de um ambiente limpo, sem qualquer sujidade e impurezas, predominando assim o cinzento. No entanto, acabámos por perceber que tal cor deveria ser utilizada mas não em abundância como inicialmente teríamos pensado, uma vez que a ideia da aplicação é também a apelatividade, sendo esta uma ideia fulcral, uma vez que teríamos de ser capazes de apelar ao interesse, utilizando assim diversas cores. A cor dominante deixou então de estar no campo dos cinzentos, mas sim dos castanhos, utilizando outras cores tonais para dar vida e destaque a cada um dos conteúdos.
Anexo 1 – Estudo da Cor
Desenho Funcional
Requisitos Funcionais
A aplicação desenvolvida é de um teor simples, sem muita confusão visual. Isto permitiu-nos uma maior exploração da interacção dos utilizadores e das funcionalidades que teria, podendo assim aprofundar nestas. Começando no ambiente principal (Anexo 2), este é composto por diversas ligações que nos dão acesso a todos os conteúdos da aplicação. Uma vez que o seu desenho é simples, o acesso e descoberta destas funcionalidades torna-se igualmente simples, que, para a faixa etária a que se destina, é algo que se deve ter bastante em conta. A partir daqui é possível aceder à zona de Jogos, representada por um conjunto de átomos na secretária (Anexo 3), onde podemos aceder a um “Quiz”. Este é constituído por um conjunto de 10 perguntas, onde o utilizador deverá escolher as correctas. Na etapa final é fornecida a pontuação com base no número de perguntas correctas e erradas, como também é fornecida uma avaliação do desempenho, baseada, por sua vez, na pontuação. Temos também uma zona de experiências (Anexo 4), onde são apresentadas diversas experiências químicas ao utilizador, de forma a que este as possa realizar mais tarde. Outra zona é a zona “Microscópio” (Anexo 5) onde os utilizadores são levados para uma simulação do mesmo. Finalmente temos um livro de informações (Anexo 6), com algumas informações mais aprofundadas sobre o tema escolhido.
Estrutura Arborescente
(Anexo 7)
A arborescência apresentada é do tipo composta, começando com o Ambiente Principal, subdividindo-se em 4 nós: "Puzzle", "Microscópio", "Tubos de Ensaio" e "Livro/Informações". Cada uma destas subdivide-se em links. Esta tipologia foi escolhida uma vez que é necessária a coexistência de todas as outras estruturas. O Quizz é um questionário, que se inicia obrigatoriamente na questão 1 e a partir desta é possível seguir até à questão 10. No entanto, a partir de cada questão é possível desistir e regressar ao "link" que lhe deu origem.
É uma estrutura relativamente simples, sem muitos ramos, possui uma navegação directa muitas vezes. Foi escolhida mediante tudo o que queríamos apresentar e tendo em conta o publico alvo a quem iriamos apresentar.
Desenho de Interacção e Usabilidade
A interacção e usabilidade de uma aplicação multimédia um dos, se não for o, elemento mais importante no seu desenvolvimento. A forma como o utilizador interage com a aplicação deve ser pensada com antecedência por quem a desenvolve. Desta forma, esta aplicação multimédia reflecte princípios básicos como simplicidade e inexistência de qualquer tipo de poluição visual. Todos os links são de fácil acesso, basta para isso uma pequena exploração pelo cenário. Os contrastes de cores estão feitos de modo a que o utilizador consiga distinguir facilmente tudo o que esteja escrito, sem qualquer tipo de esforço e dificuldade.
Em todos os links existe a possibilidade de retornar ao ambiente principal, de forma simplificada e objectiva. Na zona de experiências existe a possibilidade de avançar e retroceder de forma directa sem qualquer tipo de ambiguidade. Existe também a possibilidade regressar à página inicial das experiências a partir de cada uma destas.
Desta forma a interacção é directa e não transmite qualquer tipo de ambiguidade ao utilizador. Conhecendo o perfil deste, sabemos com certeza que precisávamos de um design simples e de fácil compreensão, uma vez que o objectivo principal de quem irá interagir é exactamente isso, interagir. Precisámos de um ambiente simples, limpo e objectivo, com muitos elementos que possuíssem interacção, de forma a prender o utilizador.
Desenho Técnico
Uma vez que o publico alvo são crianças entre os nove e catorze anos, foram reunidas todas as ideias relativas a como deveriam ser mostradas as coisas. O plano de cores passou essencialmente por ser de cores vivas, uma vez que estas estimulam a vontade e interesse das crianças. Assim, poderíamos prender a atenção destas sem grande dificuldade. Os elementos com interacção possuem este plano de cor, no entanto o cenário em si possui cores menos vivas, dando assim destaque aos elementos de interesse.
Todos os elementos foram desenhados no Adobe Illustrator, em IDE. Optámos por um tipo de desenho invulgar e com mais personalidade. Nada é recto nem igual. Podemos dizer que é um tipo de desenho sketchy.
No Flash foram utilizadas transições e animações divertidas, bem como sons alegres.
Produção do Projecto
Toda a aplicação está devidamente organizada e com bastantes tipos de interacção. A aplicação é composta por uma página principal, que dá acesso às diferentes janelas. Como o programa é designado para o público mais jovem, temos que nos concentrar em ter mais "animação" e menos informação. Então, o que decidimos, foi para além de termos as animações necessárias para entrar nas diferentes janelas e para "preencher" a aplicação, também fizemos outro tipo de interacções - as interacções "sem propósito". Essas interacções apenas servem para manter o programa interessante ao público jovem, e poderem explorar a aplicação por completo. Existem diferentes exemplos dessas interacções "sem propósito", como por exemplo, na página principal em que temos na prateleira a cima do cientista um tubo em que, se clicarmos, ele explode e queima a cabeça ao cientista; entre outras... Todos os acessos às diferentes janelas têm animação em botões para facilitar o público jovem. Está tudo muito bem identificado e distingue-se bem os elementos interactivos e animados, dos elementos não interactivos e não animados.
Integração e controlo de som
A aplicação possui uma musica de fundo que se mantém constantemente. Esta foi inicializada na primeira frame de todas do stage, de forma a poder continuar durante toda a aplicação e, aquando do seu final, repete desde o seu início.
Inicialização da variável:
var atoms:Sound = new Sound();
atoms.attachSound("atoms");
Play da música de fundo aquando do seu final:
atoms.onSoundComplete = function(){
atoms.start();
}
Play da música de fundo
atoms.start();
Stop da música de fundo
atoms.stop("atoms");
Todos os elementos sonoros foram incluidos através de programação em ActionScript 2.0, bem como a sua manipulação (Stop, Play).Cada elemento interactivo tem acoplado um especifico que retrata a sua animação.
Todos os efeitos sonoros foram retirados da Internet, mais propriamente de http://www.freesounds.com.
Através de botões colocados no stage é possível interagir com os elementos sonoros, nomeadamente parar os mesmos e dar continuidade.
Animação
Uma vez que é uma aplicação complexa, são utilizadas diversos tipo de animação na mesma, desde Motion-Tweens, Shape-Tweens, entre outros. Utilizámos predominantemente Movie-Clips que oferece excelentes formas de animação e de forma livre.
Utilizaram-se bastantes efeitos 'on(rollOver)' e 'on(rollOut)', de forma a que o utilizador perceba que ali se encontra um botão, ou uma animação, para ser clicada. No microscópio foi utilizada uma animação de Drag and Drop. Esta não foi leccionada e funciona da seguinte forma: Através de um MovieClip no layer inferior, visualizamos o que queremos ao clicar e arrastar o mesmo.
Soluções técnicas adoptadas para a resolução de problemas
Durante o desenvolvimento do projecto surgiram algumas complicações e duvidas relativamente a código desconhecido. Algo que, com um pouco de pesquisa foi de fácil resolução. Podemos destacar a execução de um código de Drag and Drop que não sabíamos como colocar em prática. Depois de alguma pesquisa encontrámos solução e ao percebermos o código utilizado foi fácil de realizar a sua aplicação no nosso projecto. Aparte desse problema encontrado não existe mais nenhum com o mesmo grau de importância.
Conclusões
Reflexão Crítica
O desenvolvimento deste projecto foi um culminar de conhecimento adquirido nas Unidades Curriculares de Laboratório Multimédia 1 e Imagem Digital Estática. Desta forma foi possível aplicar tudo o que foi leccionado ao longo do semestre. Para além dos conhecimentos adquiridos, foi necessária pesquisa externa de forma a resolver problemas que foram aparecendo ao longo do desenvolvimento do projecto, principalmente no que toca a animações e programação em ActionScript 2.0. Uma vez que o projecto está finalizado, podemos concluir que foi a melhor forma de aplicar todo o conhecimento leccionado, uma vez que, para além de utilizarmos os conhecimentos de aula, nos forçou a uma pesquisa extra, o que proporcionou uma simulação de um ambiente em equipa com o mesmo fim.
Com este projecto pretendemos ensinar, mas também impulsionar o desejo pelo conhecimento dos utilizadores, mais especificamente sobre a química, que, embora pareça que não tem muitas ramificações e pode, a longo curso ser uma matéria complicada. Finalmente também nos ajudou a intensificar o nosso conhecimento no que toca a este assunto.
Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto
Existe algum aperfeiçoamento a ser realizado à aplicação, no entanto, com mais tempo se poderia concluir. Poderiamos melhorar alguns aspectos da interacção, animação, bem como, com mais pesquisa, implementar código ActionScript 2.0 mais elaborado, de forma a aumentar a interactividade do utilizador e as respostas pela aplicação por ele proporcionadas.
Seria interessante também acrescentar mais informação relativa à química, para, desta forma, incentivar mais o conhecimento dos utilizadores bem como oferecer mais conhecimento, de forma simplificada e divertida.
Referências Web e Bibliográficas
http://ycsoftware.net/mute-and-unmute-sounds-with-flash-action-script-2-0/
http://web.educom.pt/pr1305/ciencia_experien.htm
Anexos
Anexo 2:
Anexo 3:
Anexo 4:
Anexo 5:
Anexo 6:
Anexo 7:
