Celula animal
(→Referências Web e Bibliográficas) |
(→Anexos) |
||
| Linha 324: | Linha 324: | ||
---- | ---- | ||
[[Multimédia:Celula animal.swf|Primeira abordagem da célula vectorizada]] | [[Multimédia:Celula animal.swf|Primeira abordagem da célula vectorizada]] | ||
| + | |||
| + | [[Multimédia:relatorioide_celula.pdf|Relatório de IDE]] | ||
Edição actual desde as 12h08min de 13 de Janeiro de 2012
Índice |
Docentes
Elementos do Grupo
João Miguel Ferreira - n.º mec. 65964
José Abreu Silva - n.º mec. 65411
Reinaldo Ferro - n.º mec. 65522
Tiago Casqueira - n.º mec. 65830
Apresentação do Projeto
(apresentação e caracterização do produto multimédia)
Uma visita pela célula animal é um projecto para o desenvolvimento de uma aplicação interativa offline integrada numa exposição do Museu da Ciência, mais concretamente na secção de citologia. Propomos um quiosque virtual para satisfazer as necessidades curiosas das pessoas que afluem a essa exposição e posssibilitará ao utilizador a obtenção de informação relevante sobre o funcionamento e constituintes da célula animal (ou eucariótica).
Análise e planeamento
(investigação temática, estado da arte, definição do conceito…)
Investigação temática
Após a selecção do tema efetuámos pesquisas por alguns sites online, nomeadamente:
http://www.pavconhecimento.pt/home/
http://www.uc.pt/museudaciencia/
http://www.sobiologia.com.br/conteudos/Seresvivos/Ciencias/Celulaanimal.php/
http://www.mundovestibular.com.br/articles/214/1/CELULA-ANIMAL/Paacutegina1.html
http://www.cientic.com/tema_celula_img1.html
http://cvc.instituto-camoes.pt/conhecer/bases-tematicas/ciencia-em-portugal.html
http://www.cienciadivertida.pt/
http://www.cienciaviva.pt/home/
http://www.cellsalive.com/cells/cell_model.htm
http://www.wisc-online.com/Objects/ViewObject.aspx?ID=AP11403
http://www.crie.min-edu.pt/files/@crie/1227873703_escolher_celula_animal.swf
Após esta pesquisa, concluímos que:
- A área da ciência não dá grande relevância do ponto de vista estético em detrimento do conteúdo;
- É comum a utilização da cor azul já que está associada a conhecimento e à racionalidade;
- Sites de ciência têm muita informação em texto o que, por vezes, torna a leitura desinteressante;
- É raro encontrar um website de ciência com o uso de uma grelha correta para estruturação dos elementos.
Medidas a adotar:
- A navegação pelos componentes celulares é toda incorporada no ambiente inicial para apelar a um uso facilitado;
- Uso de uma gama de azuis em concordância com o significado desta cor (conhecimento, racionalidade, intelecto) e como cor tonal optámos pela cor laranja;
- Utilização de grelha estruturante adequada para os conteúdos da aplicação;
- Tipo de letra: Helvetica (fácil leitura e actual);
- A informação textual contida é curta e adaptada para não se tornar maçadora para os utilizadores face ao objectivo da exposição (uso rápido e eficiente);
- Acesso rápido às informações relevantes (2 ou 3 cliques) daí o uso de uma arborescência pouco profunda.
Objetivos:
- Apresentar imagens da célula animal e seus principais constituintes acompanhados de informação relevante;
- Segmentar em blocos de informação relativamente triviais de perceber de acordo com cada um dos constituintes;
- Tornar algo didático (como é o funcionamento celular) em algo leve e divertido de se fazer;
- Cativar o interesse de uma vasta gama de idades (a aplicação é direcionada tanto para adultos como jovens e possui uma navegação interativa e simples);
- Integrar imagens, vídeos e sons;
- Integrar um jogo didático (quiz) por forma a testar os conhecimentos do utilizador e proporcionar diversão.
Resumo do conceito:
Esta visita pela célula animal surge no museu como um complemento para as pessoas que visitam a exposição se poderem apoiar e assim obterem mais informação sobre o tema. Os conteúdos que exigem leitura por parte do utilizador são relativamente curtos mas diretos para permitir que o fluxo de pessoas que estão a usar a aplicação seja otimizado. Como se trata de uma aplicação disponível aos visitantes serão incluídos um painel de ajuda à navegação e um sistema que, a partir de um certo período de inatividade, volta ao menu inicial evitando que o próximo(s) utilizador(es) não fique(m) confuso(s) ou perdido(s) num menu subsequente.
Desenho funcional
Requisitos funcionais
(descrição das funcionalidades da aplicação…)
Esta aplicação faz uso de animações utilizando a Tecnologia Flash. Trata-se de uma aplicação multimédia offline para consulta num quiosque multimédia. A aplicação contém no menu inicial uma célula animal com os seus vários constituintes. Para tal, foram recolhidas imagens da célula animal a partir de fontes fidedignas, vectorizadas em Adobe Illustrator para a integração no layout. O Background é uma imagem tratada em Adobe Photoshop em cima de fundo azul. A informação será inserida em contexto para não sobrecarregar a estética do layout com elementos desnecessários. Portanto, os constituintes são botões que se destacam com a passagem do rato (uso de outlines e nome do elemento) e quando clicados permitem ao utilizador aceder a informação mais detalhada (texto, imagem e vídeo).
A aplicação contém ainda botões para acesso a:
- Ajuda: zona com ajuda à navegação;
- Créditos: com descrição dos autores da aplicação, âmbito de desenvolvimento, descrição dos sons;
- Quiz: questionário com perguntas aleatórias para o utilizador verificar/testar conhecimentos;
- Som: controlo do volume de som;
- Vídeos: complemento à informação escrita com botões de controlo.
Os botões de uma forma geral são de fácil identificação e compreensão.
Os conteúdos da aplicação são sucintos, simples e objectivos.
Estrutura arborescente
(apresentação e descrição da arborescência)
Desenho de interação e usabilidade
(princípios de interação e usabilidade considerados no desenho da estrutura, percursos e meios de navegação)
O desenho de interação é bastante importante para o sucesso das aplicações na medida em que conferem usabilidade. Para tal desenvolvemos uma interface que, na nossa opinião, vai de encontro aos objetivos e necessidades do utilizador, pois este, ao visitar uma exposição num museu da ciência mais concretamente na zona de citologia e que pretende adquirir ou solidificar conhecimentos na área da célula animal consulta a aplicação e esta irá proporcionar uma aquisição rápida de informação relevante, acesso à composição da imagem e seus constituintes de uma forma coerente. Tivemos atenção nos mais pequenos pormenores e conferimos um aspeto visual coerente e sólido.
- Princípio da consistência: uso de cores, posições e formas;
- Princípio da estrutura e orientação: botões de navegação na célula em contexto mas devidamente identificáveis (outlines e nome); estruturação (layout organizado, áreas de informação dedicadas, navegação facilitada); princípios de organização perceptual da Gestalt (proximidade, semelhança, continuidade, concretização…); ajuda à navegação; navegação/interacção funcional e simples; mecanismo de retorno ao início; iconografia consistente com metáfora gráfica que permite e facilita o reconhecimento;
- Princípio da simplicidade: simplicidade nas tarefas, no acesso a conteúdos, design "limpo" sem elementos irrelevantes;
- Princípio da visibilidade: não sobrecarga do utilizador com infinidade de alternativas; conteúdos e opções, necessárias para determinada tarefa, sempre visíveis; - Princípio do conhecimento do utilizador: aplicação destinada a jovens (estudantes) e adultos e portanto a interface é concebida de acordo com este perfil.
Desenho técnico
(identificação dos requisitos técnicos para a operacionalização dos aspectos funcionais)
O perfil de utilizador desta aplicação são jovens estudantes e adultos que estão ligados à área científica ou pretendem adquirir conhecimento, portanto, o nosso projecto faculta uma simplicidade visual e com fácil acesso à informação (imagens, texto, som e vídeos). Os botões permitem uma navegação e interação organizada, coerente, rápida e simples. Assim a interação é feita em contexto através dos componentes da célula animal (botões) e também através de outros botões complementares para acesso por exemplo ao Quiz, Ajuda e Créditos. Foi acrescentado um botão para voltar ao menu inicial e botões para controlo do vídeo e som.
Produção do projeto
(descrição dos aspectos técnicos da produção do projeto)
Estrutura e meios de navegação/interação
Todos os elementos criados estão presentes numa Library devidamente organizados por tipologia. Foram criadas layers, nomeadamente: actions (com um "stop" em cada uma das frames para que a aplicação pare em cada uma delas); labels (para a associação de rótulos a cada frame para assim podermos associar a navegação aos botões); conteúdos; fundo. Assim que a aplicação é aberta surge um movie clip, na frame "inicio", com a célula montada em cima de um fundo. Este movie clip é a composição da célula com todos os elementos que a compõem. Cada um destes elementos são também movie clips (onde foi dado movimento). O fundo é também um movie clip onde foi aplicado um movimento suave para dar uma sensação de vida, associada ao conceito presente. Por trás do movie clip da célula montada está um botão com o formato do corpo da célula, assim foi possível dar destaque a cada estado do botão e associámos o código de Action Script 2.0 para que quando clicado faça a navegação para o frame "menu".
Na frame seguinte, "menu", aparece um novo movie clip com a célula montada, sendo agora, cada um dos constituintes, um botão, assim foi possível associar diferentes formatações em função do estado do botão (por exemplo no estado "over" o elemento em causa aparece com um outline e também com o nome do elemento). Ao clicar neste elemento, através de código Action Script 2.0, é permitida a navegação para a frame correspondente a este elemento. Em todos os constituintes da célula a navegação é feita da mesma forma.
Quando se está na frame de algum dos constituintes aparece no canto inferior esquerdo um botão, na forma de uma seta para a esquerda que permite a navegação para a frame "menu".
Quando se está na frame "menu" é ainda possível aceder ao botão da "ajuda", "créditos" e "quiz". Toda a forma de navegação é feita da mesma forma, ou seja, ao clicar no botão correspondente é feita a navegação para a frame pretendida.
Na frame "quiz" houve necessidade de criar novos botões, um que permite iniciar o questionário e outro para fazer a passagem para a pergunta seguinte. As respostas às questões são feitas através de clique na resposta, sendo cada uma delas um botão. O quiz é constituído por três perguntas (de 12 disponíveis) e escolhidas aleatoriamente e sem repetição. É ainda feita a contagem das perguntas corretas para disponibilizar no fim do quiz uma informação ao utilizador. Usou-se código Action Scrip 2.0 nomeadamente com contadores e função random.
Nos vídeos presentes nos constituintes da célula criaram-se botões para fazer "play", "stop", "mute" e "pause" do vídeo.
Criou-se um botão para controlo do volume de som de fundo.
Integração e controlo de som
O som de fundo que está presente na aplicação foi acoplado através de uma variável em Action Script 2.0 e inicia automaticamente e está continuamente em reprodução. É possível controlar o volume de som (aumentar ou diminuir até mute) através de um controlador programado em Action Script 2.0.
Os vídeos presentes na aplicação foram todos eles editados a partir de um único vídeo. Para o efeito foram feitos pequenos vídeos (cortes no vídeo original), feito trabalho de tradução e adicionadas legendas e respetivo som (narração nossa).
Animação
As animações criadas foram:
Motion Tween: para associar movimento a instâncias presentes no stage. Por exemplo assim que se entra num dos elementos da célula, o elemento é destacado e move-se para um dos lados do stage e é alterada a sua escala. Em algumas situações foi usado também o efeito de alterar a cor do objecto através da propriedade alpha.
Soluções técnicas adoptadas para a resolução de problemas
Durante a conceção do projeto foram surgindo algumas dificuldades que foram superadas através de entreajuda dos vários elementos do grupo e orientação dos professores. Inicialmente foi o estudo visual e organização/criação de uma estrutura que servisse de suporte para a aplicação. Após termos tudo planeado foi necessário começar a produzir elementos, para o efeito, partimos de uma imagem de baixa qualidade mas com os elementos que pretendíamos, portanto, houve o trabalho de vetorização em Illustrator o que foi moroso e bastante meticuloso.
Uma das dificuldades que ultrapassámos foi a disponibilização atualizada de todos os materiais que iam sendo produzidos pelos elementos do grupo através do uso da Dropbox.
Todas as situações que foram surgindo foram resolvidas com mais ou menos dificuldade, no entanto, a que nos deu mais problemas foi a conceção de um quiz com perguntas aleatórias sem repetição e com resultado para o utilizador. Resolvemos através da implementação de um código Action Script 2.0 que basicamente passava pelo seguinte:
- uso de dois contadores (um para a pontuação e outro para o fazer apenas três perguntas), uso de uma função "random" e condições "if".
Conclusões
Reflexão crítica
A realização deste trabalho permitiu-nos o aperfeiçoamento e aplicação prática dos conhecimentos adquiridos nas várias disciplinas lecionadas durante o semestre, com especial incidência nas disciplinas de Laboratório Multimédia 1 e Imagem Digital Estática. Enquanto grupo de trabalho permitiu-nos também o recurso a várias ferramentas para minimizar a distância dos elementos. São mais-valias para o futuro pois são práticas que iremos concerteza utilizar profissionalmente.
Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projeto
Foram feitos alguns testes de usabilidade recorrendo a alguns amigos que testaram a aplicação. Até ao momento não foi detetado nenhuma dificuldade de interação/navegação. No entanto, temos consciência que o real utilizador da aplicação (visitantes da exposição) não utilizaram a mesma, portanto estes testes servem apenas de referência. Todos os projetos podem e devem ser melhorados, num processo de melhoria contínua. No nosso caso poderíamos, com tempo, disponibilizar a aplicação para testes de usabilidade mais aprofundados para sabermos onde melhorar.
Referências Web e Bibliográficas
Imagens:
Vetorizações em Illustrator feitas pelos elementos do grupo
Vídeo:
Uma célula animal, disponível em http://www.youtube.com/watch?v=Ac2dsKM0qdw
Textos:
Enciclopédia Kougan Larousse Selecções
Enciclopédia Britannica
Material de Laboratório Multimédia 1 da UA
Material de Bioengenharia da UTAD
Sons:
Música "Heartbeat" por João Ferreira
Locução de vídeos: Tiago Casqueira
Anexos
Elementos do Grupo:
- João Correia - 60105
- João Miguel Ferreira - 65964
- José Abreu Silva - 65411
- Reinaldo Ferro - 65522
- Tiago Casqueira - 65830
Arborescência
Divisão de Tarefas entre elementos do Grupo:
- Divisão por todos os elementos do grupo de imagens para vectorizar
- Estudo da Cor, Tipo de Letra e Grelha - todos os elementos
- Criação da arborescência - todos os elementos em aula de LabMM1
- Pesquisa e selecção de Informação (texto, imagens e vídeo) - Todos os elementos
- Divisão das animações por todos os elementos do grupo
- Pesquisa para a melhor realização do Quiz de forma a que as perguntas sejam aleatórias - Todos os elementos do grupo
Fase de produção do projecto
