Projectocellaris

Da Lab. Multimédia 1
(Diferença entre edições)
Ir para: navegação, pesquisa
(→Reflexão crítica)
 
(55 edições intermédias de 5 utilizadores não apresentadas)
Linha 1: Linha 1:
−
<font color="grey" size="6">Laboratório MM1</font>
+
<font color="grey" size="4">'''Projecto Final'''</font><br>
−
----
+
<font color="grey" size="2">'''Laboratório MM1'''</font>
−
 
+
−
 
+
−
<font size="3">'''Projecto Final''' - ''ProjectOcellaris - ''</font><br>
+
 
<br>
 
<br>
 +
==Docentes==
 
[[Utilizador:Ana Carla Amaro|Prof.ª de Lab MM1]] : Ana Carla Amaro<br>
 
[[Utilizador:Ana Carla Amaro|Prof.ª de Lab MM1]] : Ana Carla Amaro<br>
 +
[[Utilizador:Caixinha|Prof. de Lab MM1]] : Hélder Caixinha<br>
 
<br>
 
<br>
−
<font size="3">'''Elementos do grupo:'''</font><br>
+
==Elementos do grupo==
−
----
+
<table border="1">
−
Fabiana Leal – 64846<br>
+
<tr>
−
Mariana Carlos – 65064<br>
+
<th>[[Ficheiro:Fabiana leal.jpg|255px|center]]Fabiana Leal – 64846<br>[http://wikis.ua.pt/labmm1/index.php/Utilizador:Fabiana_leal Fabiana Leal]</th>
−
Renato Costa – 59424<br>
+
<th>[[Ficheiro:Mariana carlos.jpg|255px|center]]Mariana Carlos – 65064<br>[http://wikis.ua.pt/labmm1/index.php/Utilizador:Mariana_carlos Mariana Carlos]</th>
−
Rúben Leite – 65053<br>
+
<th>[[Ficheiro:Renato costa.jpg|255px|center]]Renato Costa – 59424<br>[http://wikis.ua.pt/labmm1/index.php/Utilizador:Renato_costa Renato Costa]</th>
 +
<th>[[Ficheiro:Ruben leite.jpg|255px|center]]Rúben Leite – 65053<br>[http://wikis.ua.pt/labmm1/index.php/Utilizador:RubenFerreira Rúben Leite]</th>
 +
</tr>
 +
</table>
 
<br>
 
<br>
−
<font size="3">'''O porquê do nome...'''</font><br>
+
<br>
−
----
+
==O porquê do nome...==
 
"O colorido de seu corpo chama a atenção. Pode-se dizer que é um peixe exótico, cuja cor laranja e as tiras brancas ou azuladas, assim como a maneira desalinhada e desajeitada de nadar, dão sentido ao nome: Peixe-Palhaço."
 
"O colorido de seu corpo chama a atenção. Pode-se dizer que é um peixe exótico, cuja cor laranja e as tiras brancas ou azuladas, assim como a maneira desalinhada e desajeitada de nadar, dão sentido ao nome: Peixe-Palhaço."
 
in [http://www.petfriends.com.br/enciclopedia/esp_peixes/peixes_enciclopediapalhaco.htm]
 
in [http://www.petfriends.com.br/enciclopedia/esp_peixes/peixes_enciclopediapalhaco.htm]
Linha 21: Linha 23:
 
Revemo-nos então nas características desta espécie pela forma como queremos ver o nosso projecto reconhecido. Esperamos que este seja reconhecido pela diferença, pela inovação e pela criatividade.<br>
 
Revemo-nos então nas características desta espécie pela forma como queremos ver o nosso projecto reconhecido. Esperamos que este seja reconhecido pela diferença, pela inovação e pela criatividade.<br>
 
<br>
 
<br>
−
<font size="3">'''Memória Descritiva:'''</font><br>
+
==Memória Descritiva==
−
----
+
 
O Oceanário Ocellaris decidiu desenvolver um projecto em parceria com a Universidade de Aveiro com o intuito de desenvolver uma aplicação multimédia onde é dado a conhecer aos utilizadores a diversidade da fauna da Ria de Aveiro. Durante a visita a este quiosque virtual é dada a conhecer a contextualização deste símbolo da cidade, os sapais, os prados marinhos e as diferentes espécies de peixes que ali habitam. De uma forma interactiva as informações científicas são muito mais simples de entender.
 
O Oceanário Ocellaris decidiu desenvolver um projecto em parceria com a Universidade de Aveiro com o intuito de desenvolver uma aplicação multimédia onde é dado a conhecer aos utilizadores a diversidade da fauna da Ria de Aveiro. Durante a visita a este quiosque virtual é dada a conhecer a contextualização deste símbolo da cidade, os sapais, os prados marinhos e as diferentes espécies de peixes que ali habitam. De uma forma interactiva as informações científicas são muito mais simples de entender.
 
<br>
 
<br>
−
----
+
==Documentos==
−
<font size="3">'''Documentos'''</font><br>
+
===Arborescência===
−
[[Ficheiro:Arborescência.jpg]]| Arborescência
+
<br>
 +
[[Ficheiro:Arborescência.png]]
 +
<br>
 +
'''Nota:'''A arborescência do projecto sofreu uma pequena alteração em relação as navegações entre links devido a uma falha humana que impede a navegação correcta da Animação.
 +
<br>
 +
==Cenários para a Animação==
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:projecto.jpg|350px|center]]A. Início do Projecto/ Apresentação</th>
 +
<br>
 +
<th>[[Ficheiro:fundo escuro.jpg|350px|center]]B. Fundo da Aplicação - Noite</th>
 +
<br>
 +
<th>[[Ficheiro:fundo escuro 2.jpg|350px|center]]C. Fundo da Aplicação - Noite - Apresentação do Nome do Projecto</th>
 +
<br>
 +
</tr>
 +
</table>
 +
<br>
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:fundo placas.jpg|350px|center]] D. Menu da Aplicação]</th>
 +
<br>
 +
<th>[[Ficheiro:fauna.jpg|350px|center]]E. Nó da Aplicação - Fauna</th>
 +
<br>
 +
<th>[[Ficheiro:flora.jpg|350px|center]]F. Nó da Aplicação - Flora</th>
 +
<br>
 +
</tr>
 +
</table>
 +
<br>
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:esganagata 2.jpg|350px|center]] G. Link da Aplicação - Peixe Esganagata </th>
 +
<br>
 +
<th>[[Ficheiro:spartina.jpg|350px|center]]H.Link da Aplicação - Spartina</th>
 +
<br>
 +
<th>[[Ficheiro:Contextualizaçao.jpg|350px|center]]I. Nó da Aplicação - Contextualização</th>
 +
<br>
 +
</tr>
 +
</table>
 +
<br>
 +
===Pormenores dos Cenários===
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:farol.jpg|350px|center]]J. Detalhes da Aplicação - Farol</th>
 +
<br>
 +
<th>[[Ficheiro:moliceiro.jpg|350px|center]]K. Detalhes da Aplicação - Moliceiro</th>
 +
<br>
 +
<th>[[Ficheiro:gaivota.jpg|350px|center]] L. Detalhes da Aplicação - Gaivota</th>
 +
<br>
 +
</tr>
 +
</table>
 +
<br>
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:peixinhos.jpg|350px|center]]M. Detalhes da Aplicação - Conjunto de Peixes</th>
 +
<br>
 +
<th>[[Ficheiro:spartina 1.jpg|350px|center]]N. Detalhes da Aplicação - Exemplo de Flora - Spartina</th>
 +
<br>
 +
<th>[[Ficheiro:nuvens.jpg|350px|center]] O. Detalhes da Aplicação - Nuvens</th>
 +
<br>
 +
</tr>
 +
</table>
 +
<br>
 +
<br>
 +
==Botões==
 +
<br>
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:Botões grelha.jpg|850px|center]]<br></th>
 +
</tr>
 +
</table>
 +
'''P.''' Botões utilizados em toda a aplicação.
 +
<br>
 +
==Janela==
 +
<br>
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:Janela sair.jpg|500px|center]]</th>
 +
</tr>
 +
</table>
 +
'''Q.''' Janela utilizada para sair da aplicação.
 +
<br>
 +
==Capas do CD==
 +
<br>
 +
<br>
 +
<table border="1">
 +
<tr>[[Ficheiro:Frente.jpg|400px|center]]<br>
 +
<tr>[[Ficheiro:Tras.jpg|519px|center]]<br>
 +
<br>
 +
==Diário de Bordo==
 +
No dia '''20 de Dezembro''' foi efectuada a entrega da parte gráfica da aplicação multimédia sobre a ria de Aveiro para o Oceanário Ocellaris. Essa entrega, para a cadeira de Imagem Digital - Estática, foi adiada devido à grande quantidade de trabalho que os alunos tinham na última semana de aulas do semestre. Feita a apresentação dessa parte no dia '''15 de Dezembro''', as críticas ajudaram o grupo a melhorar alguns aspectos do desenho da aplicação e melhoramento de cores.
 +
<br>
 +
A partir do dia '''20 de Dezembro''' ficou decidido que o trabalho seria dividido ficando a Fabiana Leal com a parte de integração dos elementos gráficos no flash e actualização da Wiki do projecto, respectivas animações e programação dos conteúdos; a Mariana Carlos e o Renato Costa com a parte do relatório e o Rúben Leite com a parte sonora e também o Relatório, ficando também a Mariana Carlos encarregue da actualização da Wiki do projecto.
 +
<br>
 +
Têm sido então feitas pesquisas no que toca à parte sonora de modo a encontrarmos os sons perfeitos para a aplicação. A parte da montagem dos elementos também está pronta, e a programação dos botões também. O relatório, com algumas dificuldades tem também sido desenvolvido.
 +
<br>
 +
Até agora a maior dificuldade encontrada tem sido o facto de sermos todos de lugares distantes, nomeadamente Lourosa, Matosinhos, Aveiro e Leiria, o que torna o desenvolvimento integral do trabalho um pouco complicado mas não impossível. A utilização do Dropbox para partilha dos ficheiros tem sido diária.
 +
<br>
 +
No dia '''21 de Dezembro'''demos início da Animação. Inserção dos cenários realizados em ID-E no Flash.
 +
<br>
 +
No período de '''21 de Dezembro a 6 de Janeiro''' realização da animação e respectiva programação.
 +
<br>
 +
Nos dias '''9 e 10 de Janeiro''' procura de Sons para a animação e consequentemente o tratamento dos mesmos (recurso ao Audacity). Últimas revisões e reparações em alguns aspectos da Animação.
 +
<br>
 +
Paralelamente a execução da animação demos início ao Relatório, distribuindo os vários tópicos pelos elementos do grupo encarregues do mesmo.
 +
Conseguimos avançar positivamente no Relatório o que nos facilitou a questão da falta de tempo.
 +
<br>
 +
No dia '''10 de Janeiro''' finalizamos o ponto 5 do Relatório (''Produção do projecto'') que já tinha ficado definido pelos elementos do grupo que seria mais fácil a sua concretização quando a animação estivesse concluída para podermos abordar aspectos mais minuciosos na questão do Som, Animação e eventuais problemas que surgissem, sem nunca esquecer o factor principal: Actionscript.
 +
<br>
 +
Primeiros esboços para a capa do CD.<br>
 +
Também no dia '''10 de Janeiro e manhã do dia 11 de Janeiro''' actualizamos a nossa Wiki. Inserimos na mesma as imagens dos cenários realizado em ID-E,os botões e janelas. Prevemos ainda terminar as capas para o CD.
 +
Actualizamos a Wiki, integrando nela parte do Relatório feito, deixando para amanhã o restante.
 +
<br>
 +
No dia '''12 de Janeiro''' integramos o Som, já tratado anteriormente, na Animação.
 +
Iniciamos a preparação para a Apresentação que realizar-se-a no dia '''16 de Janeiro pelas 11:40H.'''
 +
Como previsto a Animação será entregue dentro do prazo estipulado pelos Professores da Disciplina.<br>
 +
No dia '''13 de Janeiro''' procedemos á impressão das capas, actualização do relatório na wiki e gravação dos conteúdos desenvolvidos em dois Dvd's distintos. '''Durante o fim de semana''' iremos finalizar a distribuição de tarefas e respectiva preparação para a apresentação que decorrerá no dia 16 de Janeiro.<br>
 +
==Relatório==
 +
===Apresentação do projecto===
 +
O projeto apresentado resulta de um trabalho desenvolvido para duas unidades curriculares distintas Laboratório Multimédia 1 e Imagem Digital Estática.
 +
O nosso projeto insere-se  assim numa das temáticas apresentadas na unidade curricular de Imagem Digital Estática, mais propriamente o “Oceanário”.
 +
O Oceanário Ocellaris decidiu desenvolver um projecto em parceria com a Universidade de Aveiro com o intuito de desenvolver uma aplicação multimédia offline destinada a um público infantil com idades compreendidas entre os 7 e os 10 anos, onde é dada a conhecer a diversidade da fauna e flora da Ria de Aveiro. Durante a interação com esta aplicação é apresentada uma breve contextualização deste símbolo da cidade, os sapais, os prados marinhos e as diferentes espécies de peixes que ali habitam. De uma forma interactiva as informações científicas tornam-se muito mais apelativas e simples de entender.
 +
<br>
 +
===Análise e planeamento===
 +
Para a concretização deste projeto houve uma análise pormenorizada sobre a região em destaque, Aveiro e enumeras pesquisas sobre os principais interesses do nosso público-alvo.
 +
O desenvolvimento deste projecto foca-se na Ria de Aveiro, já referenciado anteriormente, o que nos levou a uma investigação intensiva sobre os recursos que nela encontramos. É através desses recursos que desencadeamos o nosso projecto, levando-nos a conhecer aprofundadamente as espécies que muitos de nós até então desconhecíamos.
 +
Sentimos uma enorme motivação de dar ênfase ao que podemos encontrar neste meio e contribuir assim, de forma didática, para o desenvolvimento dos conhecimentos e possível interesse na Fauna e na Flora presentes na Ria.
 +
Sem nunca abandonarmos o nosso tema, fixamos as nossas ideias iníciais em pontos cruciais desta cidade que nos acolhe, como o típico moliceiro, o farol da Barra e por fim todas as espécies presentes na Ria, desde espécies marinhas a sapais e prados.
 +
Com esta aplicação pretendemos criar pontos de interesse científico sobre o tema em geral e inter-ligar desta forma as Artes e as Ciências, criando assim um meio de informação e conhecimento, entrelaçando assim aspectos cromáticos e contextos históricos fundamentais para a sua interpretação.
 +
Por fim, debruçamo-nos em interpretar de que forma poderíamos tornar tudo muito mais apelativo, recorrendo assim, a paletes de cores, ('''ver Anexo 1''') que criam uma harmonia visual sem esquecermo-nos da palavra-chave Ocellaris. Ocellaris, o peixe palhaço, é desta forma o ponto fundamental deste projecto devido as suas cores chamativas e pelo contexto singular que vincam, sem duvida, o nosso projecto. É desta forma que pretendemos marcar a diferença e contribuir para o desenvolvimento, crescimento e domínio de conhecimento com bases científicas que possam criar pontos de interesse neste público.
 +
Analisamos e agrupamos os temas Fauna e a Flora de formas distintas, para criar diferentes meios, recurso a dois Habitat, devido ao diferente meio em que se encontraram e facilitarem, desta forma, a integração da criança nesta diversidade.
 +
<br>
 +
===Desenho funcional===
 +
====Requisitos funcionais====
 +
O utilizador poderá navegar na aplicação desenvolvida através de botões de navegação. Na criação destes botões foi tido em conta o público alvo escolhido, daí os botões serem de fácil compreensão, simples e apelativos ('''ver Anexo 2'''). Também as cores foram escolhidas de forma a tornar a aplicação mais divertida e entusiasmante. Na criação de todos os conteúdos foi tido em conta os requisitos de funcionalidade e simplicidade visto que a aplicação foi concebida para ser utilizada por crianças, que não possuem grande conhecimento informático. A titulo de exemplo, os menus são de bastante fácil compreensão('''ver Anexo 3''').
 +
<br>
 +
====Estrutura arborescente====
 +
A quando a elaboração da estrutura arborescente foi tido em conta o público alvo escolhido. Pretendeu-se  assim desenvolver uma estrutura simples e um pouco desafiante. A estrutura desenvolvida pode ainda ser caracterizada como hierárquica linear, onde se verifica uma organização ramificada e hierarquizada da informação, é unicamente permitido ao utilizador navegar em profundidade entre os níveis da estrutura, não podendo assim navegar entre itens do mesmo nível da estrutura.
 +
A aplicação desenvolvida, assenta num paradigma de interacção tutorial, havendo uma sequencialidade do fluxo da informação.
 +
No planeamento e desenvolvimento da estrutura arborescente, e de toda a aplicação, foi tido em conta o público alvo escolhido. Tendo deste modo resultado uma estrutura simples e de fácil navegação para os utilizadores ('''ver anexo 4''').
 +
<br>
 +
====Desenho de interacção e usabilidade====
 +
Na concepção do desenho da aplicação foi bastante importante uma revisão da materia lecionada até então. Foi ainda necessária uma pesquisa mais aprofundada, incidindo principalmente sobre as “Heuristicas de Usabilidade” (Nielsen(1994)-Ten Usability Heuristics). Tentamos na elaboração do desenho da aplicação considerar os principios  enunciados por Nielsen, destacando-se o feedback, o falar a linguagem do usuário, minimizar a sobrecarga de memoria do usário e diálogos simples e naturais.
 +
O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação.
 +
Se for necessária a ajuda deve estar facilmente acessível on-line.
 +
<br>
 +
===Desenho técnico===
 +
Em relação ao desenho técnico, o nosso projecto remete-nos para uma simplicidade visual que caracteriza o público-alvo. Assim, os botões, os textos e as imagens dinamizam o projecto de forma simples o que torna a sua navegação rápida e concisa. Visto que o nosso público-alvo são as crianças e sem nunca esquecermos o quanto é importante, do ponto de vista técnico, a sua fácil interacção com o sistema, tentamos de forma divertida e numa linguagem característica desta faixa etária denominar aspectos que poderiam caracterizar-se pela sua complexidade em algo que a palavra-chave seria simplicidade.
 +
Sem nunca esquecer a usabilidade do sistema, tendo em vista todos os requisites acima descritos, optamos por usar e usufruir do que aprendemos até então e pormos em prática os processos de fácil identificação presentes nos botões e menus.
 +
<br>
 +
===Produção do projecto===
 +
====Estrutura e meios de navegação/interação====
 +
Em relação aos meios de navegação temos um menu principal que é mostrado ao utilizador no inicio da aplicação. Decidimos optar por esta solução, devido á sensação de organização que é criada ao utilizador. Neste menu é possível clicar num link com descendência, Fauna e Flora, que irá permitir a visualização de toda a biodiversidade presente na Ria de Aveiro.
 +
A interacção entre utilizador e a aplicação é feita através de um menu, botões e janela de sair da aplicação.
 +
<br>
 +
====Integração e controlo de som====
 +
Ao navegar pela aplicação, é possível ao utilizador ouvir um som de fundo que o remete para um ambiente maritimo e de biodiversidade. O controlo do mesmo pode ser feito através de botões posicionados no stage no campo superior direito. É permitido ao utilizador através dos botões ligar e desligar o som. A interação com estes botões pode ser feita em toda a estrutura da aplicação.<br>
 +
'''Códigos de Integração e controlo de som:'''<br>
 +
 
 +
var som_fundo:Sound=new Sound();<br>
 +
som_fundo.attachSound("som_fundo");<br>
 +
 
 +
som_fundo.start();<br>
 +
som_fundo.onSoundComplete=function(){<br>
 +
som_fundo.start();<br>
 +
}<br>
 +
 
 +
Ligar som:<br>
 +
on (release) {<br>
 +
som_fundo.stop();<br>
 +
som_fundo.start();<br>
 +
}<br>
 +
 
 +
Desligar som:<br>
 +
on (release) {<br>
 +
som_fundo.stop();<br>
 +
}<br>
 +
 
 +
<br>
 +
 
 +
====Animação====
 +
A aplicação apresentada apresenta algumas animações, geralmente baseadas em tween’s e guide layer’s. Estas surgem como um elemento fulcral na aplicação, visto tornarem a aplicação mais dinâmica. A animação pode ser considerada simples, pois a faixa etária á qual se destina a aplicação demonstra bastante interesse em animações deste género.
 +
<br>
 +
====Soluções técnicas adoptadas para a resolução de problemas====
 +
Durante o desenvolvimento do projecto surgiram algumas adversidades, destacando-se apenas uma complicação na execução de um código em actionscript 2.0, definido para colocar um scroll na informação  a apresentar. Conseguimos arranjar então uma solução viável de dividir a informação e coloca-la em duas frames distintas.
 +
<br>
 +
===Conclusões===
 +
====Reflexão crítica====
 +
Com o desenvolver deste projecto foi possível aos vários elementos do grupo assimilarem uma série de conhecimentos adquiridos tanto em Imagem Digital estática bem como em Laboratório Multimédia 1 ao longo do semestre. Para além da aplicação desses mesmos conhecimentos leccionados foi necessária uma pesquisa extra para ajudar a execução do projecto. Pesquisa esta que incidiu principalmente a nível de actionscript 2.0, usada no projecto.
 +
Com este projecto pretendíamos criar uma aplicação offline que permitisse ao público-alvo conhecer a fauna e a flora da ria de Aveiro. Finalizado o projecto achamos que chegamos ao objectivo inicial de criar uma aplicação interactiva simples, coesa e interessante.
 +
Várias foram as dificuldades encontradas, mas em grupo foi-nos possível superá-las com sucesso.
 +
Para além da aplicação dos conhecimentos adquiridos ao longo do semestre podemos dizer que este projecto contribui ainda para a formação enquanto pessoa de cada elemento. Principalmente devido ao facto de este ser um trabalho de grupo, o que implica o confronto de ideias e personalidades que só são ultrapassadas através do entendimento entre ambas as partes. Também foi-nos permitido obter um maior conhecimento sobre o tema abordado na aplicação e obter assim uma nova visão mais viva e dinâmica da Ria de Aveiro.
 +
<br>
 +
 
 +
====Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto====
 +
Quando foi abordada esta questão, em grupo, de ser feito um aperfeiçoamento da aplicação desenvolvida foi unânime a opinião de que se poderia evoluir ao nível da interactividade, tornando a aplicação ainda mais desafiante para o utilizador. Esta sugestão requer assim algum tempo e dedicação. Só não nos foi possível criar um nível de interactividade mais elevado devido á condicionante do tempo.
 +
Seria também interessante se a aplicação apresenta-se mais informação referente á biodiversidade existente na área de Aveiro para além da ria de Aveiro.
 +
<br>
 +
===Referências Web e Bibliográficas===
 +
'''Cenários'''<br>
 +
http://www.biorede.pt/<br>
 +
http://www.smartkids.com.br/especiais/peixes-peixe-eletrico.html<br>
 +
http://www.souamigodomar.com.br/<br>
 +
 
 +
 
 +
'''Recolha de Dados'''<br>
 +
http://riadeaveiro.web.ua.pt/1000000000_index.html<br>
 +
http://pescaveiro.org/?p=ep_peixesosseos_congro<br>
 +
 
 +
 +
'''Desenho interacção e de usabilidade''' <br>
 +
http://www.slideshare.net/agner/heuristicas-usabilidade - Nielsen(1994)-Ten Usability Heuristics<br>
 +
 
 +
 
 +
'''Desenho Técnico'''<br>
 +
http://www.flashwebtraining.com/tutoriais/actionscript/captions/01.php<br>
 +
 
 +
'''Produção do Projecto'''<br>
 +
* Som<br>
 +
 
 +
http://souamigodomar.com.br/<br>
 +
http://www.freesound.org<br>
 +
- http://www.freesound.org/people/acclivity/sounds/13564/ <br>
 +
- http://www.freesound.org/people/hazure/sounds/23707/ <br>
 +
- http://www.freesound.org/people/digifishmusic/sounds/43760/<br>
 +
<br>
 +
'''Nota:''' Recurso aos materiais lecionados e fornecidos nas aulas teóricas e práticas.
 +
<br>
 +
===Anexos===
 +
<table border="1">
 +
<tr>
 +
<th>[[Ficheiro:Palete.jpg|400px|center]]<center>'''Anexo 1'''
 +
<br>
 +
<br>
 +
<br>
 +
[[Ficheiro:Botões grelha.jpg|600px|center]]<br>
 +
'''Anexo 2'''
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
[[Ficheiro:Placa sair.jpg|500px|center]]
 +
'''Anexo 3'''
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
[[Ficheiro:Arborescência.png]]
 +
'''Anexo 4'''
 +
<br>

Edição actual desde as 09h42min de 16 de Janeiro de 2012

Projecto Final
Laboratório MM1

Índice

Docentes

Prof.ª de Lab MM1 : Ana Carla Amaro
Prof. de Lab MM1 : Hélder Caixinha

Elementos do grupo

Fabiana leal.jpg
Fabiana Leal – 64846
Fabiana Leal
Mariana carlos.jpg
Mariana Carlos – 65064
Mariana Carlos
Renato costa.jpg
Renato Costa – 59424
Renato Costa
Ruben leite.jpg
Rúben Leite – 65053
Rúben Leite



O porquê do nome...

"O colorido de seu corpo chama a atenção. Pode-se dizer que é um peixe exótico, cuja cor laranja e as tiras brancas ou azuladas, assim como a maneira desalinhada e desajeitada de nadar, dão sentido ao nome: Peixe-Palhaço." in [1]
Revemo-nos então nas características desta espécie pela forma como queremos ver o nosso projecto reconhecido. Esperamos que este seja reconhecido pela diferença, pela inovação e pela criatividade.

Memória Descritiva

O Oceanário Ocellaris decidiu desenvolver um projecto em parceria com a Universidade de Aveiro com o intuito de desenvolver uma aplicação multimédia onde é dado a conhecer aos utilizadores a diversidade da fauna da Ria de Aveiro. Durante a visita a este quiosque virtual é dada a conhecer a contextualização deste símbolo da cidade, os sapais, os prados marinhos e as diferentes espécies de peixes que ali habitam. De uma forma interactiva as informações científicas são muito mais simples de entender.

Documentos

Arborescência


Arborescência.png
Nota:A arborescência do projecto sofreu uma pequena alteração em relação as navegações entre links devido a uma falha humana que impede a navegação correcta da Animação.

Cenários para a Animação




Projecto.jpg
A. Início do Projecto/ Apresentação
Fundo escuro.jpg
B. Fundo da Aplicação - Noite
Fundo escuro 2.jpg
C. Fundo da Aplicação - Noite - Apresentação do Nome do Projecto





Fundo placas.jpg
D. Menu da Aplicação]
Fauna.jpg
E. Nó da Aplicação - Fauna
Flora.jpg
F. Nó da Aplicação - Flora





Esganagata 2.jpg
G. Link da Aplicação - Peixe Esganagata
Spartina.jpg
H.Link da Aplicação - Spartina
Contextualizaçao.jpg
I. Nó da Aplicação - Contextualização


Pormenores dos Cenários




Farol.jpg
J. Detalhes da Aplicação - Farol
Moliceiro.jpg
K. Detalhes da Aplicação - Moliceiro
Gaivota.jpg
L. Detalhes da Aplicação - Gaivota





Peixinhos.jpg
M. Detalhes da Aplicação - Conjunto de Peixes
Spartina 1.jpg
N. Detalhes da Aplicação - Exemplo de Flora - Spartina
Nuvens.jpg
O. Detalhes da Aplicação - Nuvens



Botões


Botões grelha.jpg

P. Botões utilizados em toda a aplicação.

Janela


Janela sair.jpg

Q. Janela utilizada para sair da aplicação.

Capas do CD



Frente.jpg

Tras.jpg


Diário de Bordo

No dia 20 de Dezembro foi efectuada a entrega da parte gráfica da aplicação multimédia sobre a ria de Aveiro para o Oceanário Ocellaris. Essa entrega, para a cadeira de Imagem Digital - Estática, foi adiada devido à grande quantidade de trabalho que os alunos tinham na última semana de aulas do semestre. Feita a apresentação dessa parte no dia 15 de Dezembro, as críticas ajudaram o grupo a melhorar alguns aspectos do desenho da aplicação e melhoramento de cores.
A partir do dia 20 de Dezembro ficou decidido que o trabalho seria dividido ficando a Fabiana Leal com a parte de integração dos elementos gráficos no flash e actualização da Wiki do projecto, respectivas animações e programação dos conteúdos; a Mariana Carlos e o Renato Costa com a parte do relatório e o Rúben Leite com a parte sonora e também o Relatório, ficando também a Mariana Carlos encarregue da actualização da Wiki do projecto.
Têm sido então feitas pesquisas no que toca à parte sonora de modo a encontrarmos os sons perfeitos para a aplicação. A parte da montagem dos elementos também está pronta, e a programação dos botões também. O relatório, com algumas dificuldades tem também sido desenvolvido.
Até agora a maior dificuldade encontrada tem sido o facto de sermos todos de lugares distantes, nomeadamente Lourosa, Matosinhos, Aveiro e Leiria, o que torna o desenvolvimento integral do trabalho um pouco complicado mas não impossível. A utilização do Dropbox para partilha dos ficheiros tem sido diária.
No dia 21 de Dezembrodemos início da Animação. Inserção dos cenários realizados em ID-E no Flash.
No período de 21 de Dezembro a 6 de Janeiro realização da animação e respectiva programação.
Nos dias 9 e 10 de Janeiro procura de Sons para a animação e consequentemente o tratamento dos mesmos (recurso ao Audacity). Últimas revisões e reparações em alguns aspectos da Animação.
Paralelamente a execução da animação demos início ao Relatório, distribuindo os vários tópicos pelos elementos do grupo encarregues do mesmo. Conseguimos avançar positivamente no Relatório o que nos facilitou a questão da falta de tempo.
No dia 10 de Janeiro finalizamos o ponto 5 do Relatório (Produção do projecto) que já tinha ficado definido pelos elementos do grupo que seria mais fácil a sua concretização quando a animação estivesse concluída para podermos abordar aspectos mais minuciosos na questão do Som, Animação e eventuais problemas que surgissem, sem nunca esquecer o factor principal: Actionscript.
Primeiros esboços para a capa do CD.
Também no dia 10 de Janeiro e manhã do dia 11 de Janeiro actualizamos a nossa Wiki. Inserimos na mesma as imagens dos cenários realizado em ID-E,os botões e janelas. Prevemos ainda terminar as capas para o CD. Actualizamos a Wiki, integrando nela parte do Relatório feito, deixando para amanhã o restante.
No dia 12 de Janeiro integramos o Som, já tratado anteriormente, na Animação. Iniciamos a preparação para a Apresentação que realizar-se-a no dia 16 de Janeiro pelas 11:40H. Como previsto a Animação será entregue dentro do prazo estipulado pelos Professores da Disciplina.
No dia 13 de Janeiro procedemos á impressão das capas, actualização do relatório na wiki e gravação dos conteúdos desenvolvidos em dois Dvd's distintos. Durante o fim de semana iremos finalizar a distribuição de tarefas e respectiva preparação para a apresentação que decorrerá no dia 16 de Janeiro.

Relatório

Apresentação do projecto

O projeto apresentado resulta de um trabalho desenvolvido para duas unidades curriculares distintas Laboratório Multimédia 1 e Imagem Digital Estática. O nosso projeto insere-se assim numa das temáticas apresentadas na unidade curricular de Imagem Digital Estática, mais propriamente o “Oceanário”. O Oceanário Ocellaris decidiu desenvolver um projecto em parceria com a Universidade de Aveiro com o intuito de desenvolver uma aplicação multimédia offline destinada a um público infantil com idades compreendidas entre os 7 e os 10 anos, onde é dada a conhecer a diversidade da fauna e flora da Ria de Aveiro. Durante a interação com esta aplicação é apresentada uma breve contextualização deste símbolo da cidade, os sapais, os prados marinhos e as diferentes espécies de peixes que ali habitam. De uma forma interactiva as informações científicas tornam-se muito mais apelativas e simples de entender.

Análise e planeamento

Para a concretização deste projeto houve uma análise pormenorizada sobre a região em destaque, Aveiro e enumeras pesquisas sobre os principais interesses do nosso público-alvo. O desenvolvimento deste projecto foca-se na Ria de Aveiro, já referenciado anteriormente, o que nos levou a uma investigação intensiva sobre os recursos que nela encontramos. É através desses recursos que desencadeamos o nosso projecto, levando-nos a conhecer aprofundadamente as espécies que muitos de nós até então desconhecíamos. Sentimos uma enorme motivação de dar ênfase ao que podemos encontrar neste meio e contribuir assim, de forma didática, para o desenvolvimento dos conhecimentos e possível interesse na Fauna e na Flora presentes na Ria. Sem nunca abandonarmos o nosso tema, fixamos as nossas ideias iníciais em pontos cruciais desta cidade que nos acolhe, como o típico moliceiro, o farol da Barra e por fim todas as espécies presentes na Ria, desde espécies marinhas a sapais e prados. Com esta aplicação pretendemos criar pontos de interesse científico sobre o tema em geral e inter-ligar desta forma as Artes e as Ciências, criando assim um meio de informação e conhecimento, entrelaçando assim aspectos cromáticos e contextos históricos fundamentais para a sua interpretação. Por fim, debruçamo-nos em interpretar de que forma poderíamos tornar tudo muito mais apelativo, recorrendo assim, a paletes de cores, (ver Anexo 1) que criam uma harmonia visual sem esquecermo-nos da palavra-chave Ocellaris. Ocellaris, o peixe palhaço, é desta forma o ponto fundamental deste projecto devido as suas cores chamativas e pelo contexto singular que vincam, sem duvida, o nosso projecto. É desta forma que pretendemos marcar a diferença e contribuir para o desenvolvimento, crescimento e domínio de conhecimento com bases científicas que possam criar pontos de interesse neste público. Analisamos e agrupamos os temas Fauna e a Flora de formas distintas, para criar diferentes meios, recurso a dois Habitat, devido ao diferente meio em que se encontraram e facilitarem, desta forma, a integração da criança nesta diversidade.

Desenho funcional

Requisitos funcionais

O utilizador poderá navegar na aplicação desenvolvida através de botões de navegação. Na criação destes botões foi tido em conta o público alvo escolhido, daí os botões serem de fácil compreensão, simples e apelativos (ver Anexo 2). Também as cores foram escolhidas de forma a tornar a aplicação mais divertida e entusiasmante. Na criação de todos os conteúdos foi tido em conta os requisitos de funcionalidade e simplicidade visto que a aplicação foi concebida para ser utilizada por crianças, que não possuem grande conhecimento informático. A titulo de exemplo, os menus são de bastante fácil compreensão(ver Anexo 3).

Estrutura arborescente

A quando a elaboração da estrutura arborescente foi tido em conta o público alvo escolhido. Pretendeu-se assim desenvolver uma estrutura simples e um pouco desafiante. A estrutura desenvolvida pode ainda ser caracterizada como hierárquica linear, onde se verifica uma organização ramificada e hierarquizada da informação, é unicamente permitido ao utilizador navegar em profundidade entre os níveis da estrutura, não podendo assim navegar entre itens do mesmo nível da estrutura. A aplicação desenvolvida, assenta num paradigma de interacção tutorial, havendo uma sequencialidade do fluxo da informação. No planeamento e desenvolvimento da estrutura arborescente, e de toda a aplicação, foi tido em conta o público alvo escolhido. Tendo deste modo resultado uma estrutura simples e de fácil navegação para os utilizadores (ver anexo 4).

Desenho de interacção e usabilidade

Na concepção do desenho da aplicação foi bastante importante uma revisão da materia lecionada até então. Foi ainda necessária uma pesquisa mais aprofundada, incidindo principalmente sobre as “Heuristicas de Usabilidade” (Nielsen(1994)-Ten Usability Heuristics). Tentamos na elaboração do desenho da aplicação considerar os principios enunciados por Nielsen, destacando-se o feedback, o falar a linguagem do usuário, minimizar a sobrecarga de memoria do usário e diálogos simples e naturais. O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária a ajuda deve estar facilmente acessível on-line.

Desenho técnico

Em relação ao desenho técnico, o nosso projecto remete-nos para uma simplicidade visual que caracteriza o público-alvo. Assim, os botões, os textos e as imagens dinamizam o projecto de forma simples o que torna a sua navegação rápida e concisa. Visto que o nosso público-alvo são as crianças e sem nunca esquecermos o quanto é importante, do ponto de vista técnico, a sua fácil interacção com o sistema, tentamos de forma divertida e numa linguagem característica desta faixa etária denominar aspectos que poderiam caracterizar-se pela sua complexidade em algo que a palavra-chave seria simplicidade. Sem nunca esquecer a usabilidade do sistema, tendo em vista todos os requisites acima descritos, optamos por usar e usufruir do que aprendemos até então e pormos em prática os processos de fácil identificação presentes nos botões e menus.

Produção do projecto

Estrutura e meios de navegação/interação

Em relação aos meios de navegação temos um menu principal que é mostrado ao utilizador no inicio da aplicação. Decidimos optar por esta solução, devido á sensação de organização que é criada ao utilizador. Neste menu é possível clicar num link com descendência, Fauna e Flora, que irá permitir a visualização de toda a biodiversidade presente na Ria de Aveiro. A interacção entre utilizador e a aplicação é feita através de um menu, botões e janela de sair da aplicação.

Integração e controlo de som

Ao navegar pela aplicação, é possível ao utilizador ouvir um som de fundo que o remete para um ambiente maritimo e de biodiversidade. O controlo do mesmo pode ser feito através de botões posicionados no stage no campo superior direito. É permitido ao utilizador através dos botões ligar e desligar o som. A interação com estes botões pode ser feita em toda a estrutura da aplicação.
Códigos de Integração e controlo de som:

var som_fundo:Sound=new Sound();
som_fundo.attachSound("som_fundo");

som_fundo.start();
som_fundo.onSoundComplete=function(){
som_fundo.start();
}

Ligar som:
on (release) {
som_fundo.stop();
som_fundo.start();
}

Desligar som:
on (release) {
som_fundo.stop();
}


Animação

A aplicação apresentada apresenta algumas animações, geralmente baseadas em tween’s e guide layer’s. Estas surgem como um elemento fulcral na aplicação, visto tornarem a aplicação mais dinâmica. A animação pode ser considerada simples, pois a faixa etária á qual se destina a aplicação demonstra bastante interesse em animações deste género.

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

Durante o desenvolvimento do projecto surgiram algumas adversidades, destacando-se apenas uma complicação na execução de um código em actionscript 2.0, definido para colocar um scroll na informação a apresentar. Conseguimos arranjar então uma solução viável de dividir a informação e coloca-la em duas frames distintas.

Conclusões

Reflexão crítica

Com o desenvolver deste projecto foi possível aos vários elementos do grupo assimilarem uma série de conhecimentos adquiridos tanto em Imagem Digital estática bem como em Laboratório Multimédia 1 ao longo do semestre. Para além da aplicação desses mesmos conhecimentos leccionados foi necessária uma pesquisa extra para ajudar a execução do projecto. Pesquisa esta que incidiu principalmente a nível de actionscript 2.0, usada no projecto. Com este projecto pretendíamos criar uma aplicação offline que permitisse ao público-alvo conhecer a fauna e a flora da ria de Aveiro. Finalizado o projecto achamos que chegamos ao objectivo inicial de criar uma aplicação interactiva simples, coesa e interessante. Várias foram as dificuldades encontradas, mas em grupo foi-nos possível superá-las com sucesso. Para além da aplicação dos conhecimentos adquiridos ao longo do semestre podemos dizer que este projecto contribui ainda para a formação enquanto pessoa de cada elemento. Principalmente devido ao facto de este ser um trabalho de grupo, o que implica o confronto de ideias e personalidades que só são ultrapassadas através do entendimento entre ambas as partes. Também foi-nos permitido obter um maior conhecimento sobre o tema abordado na aplicação e obter assim uma nova visão mais viva e dinâmica da Ria de Aveiro.

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

Quando foi abordada esta questão, em grupo, de ser feito um aperfeiçoamento da aplicação desenvolvida foi unânime a opinião de que se poderia evoluir ao nível da interactividade, tornando a aplicação ainda mais desafiante para o utilizador. Esta sugestão requer assim algum tempo e dedicação. Só não nos foi possível criar um nível de interactividade mais elevado devido á condicionante do tempo. Seria também interessante se a aplicação apresenta-se mais informação referente á biodiversidade existente na área de Aveiro para além da ria de Aveiro.

Referências Web e Bibliográficas

Cenários
http://www.biorede.pt/
http://www.smartkids.com.br/especiais/peixes-peixe-eletrico.html
http://www.souamigodomar.com.br/


Recolha de Dados
http://riadeaveiro.web.ua.pt/1000000000_index.html
http://pescaveiro.org/?p=ep_peixesosseos_congro


Desenho interacção e de usabilidade
http://www.slideshare.net/agner/heuristicas-usabilidade - Nielsen(1994)-Ten Usability Heuristics


Desenho Técnico
http://www.flashwebtraining.com/tutoriais/actionscript/captions/01.php

Produção do Projecto

http://souamigodomar.com.br/
http://www.freesound.org
- http://www.freesound.org/people/acclivity/sounds/13564/
- http://www.freesound.org/people/hazure/sounds/23707/
- http://www.freesound.org/people/digifishmusic/sounds/43760/

Nota: Recurso aos materiais lecionados e fornecidos nas aulas teóricas e práticas.

Anexos

Palete.jpg
Anexo 1




Botões grelha.jpg

Anexo 2



Placa sair.jpg

Anexo 3



Arborescência.png Anexo 4


Obtida de "http://wikis.ua.pt/labmm1/index.php?title=Projectocellaris"
Ferramentas pessoais
Espaços nominais
Variantes
Acções
Navegação
Ferramentas