The velociraptor
(→Relatório) |
(→Botões interactivos) |
||
| Linha 149: | Linha 149: | ||
1º botão - Opção "Classificação científica" 2º botão - Opção "Bilhete de Identidade" | 1º botão - Opção "Classificação científica" 2º botão - Opção "Bilhete de Identidade" | ||
| + | |||
| + | [[Ficheiro:Botao.png]] | ||
== '''Elementos visuais''' == | == '''Elementos visuais''' == | ||
Revisão das 00h07min de 13 de Janeiro de 2012
Índice |
Constituição do grupo
Daniela Santos
David Crispim
Gisela Marquez
Marcelo Bettencourt
Projecto
Dentro dos diversos temas apresentados, o grupo optou pelo “Museu da Ciência”, centrando-se na escolha de um dinossauro que nos pareceu interessante pela sua história, fisionomia e aparência, elaborando um quiosque multimédia que potencie diferentes tipos de funcionalidades.
Neste contexto, ao tentar recriar o cenário onde habitava, o utilizador terá a oportunidade de descobrir diferentes aspectos que particularizam a espécie animal em diferentes domínios – alimentação, habitat, características físicas, curiosidades, anatomia, origem, hábitos, etc.
Ao iniciar a aplicação, o utilizador deparar-se-á com uma interacção do tipo ambiente, onde estará o dinossauro em grande plano. Ao passar o rato por cima do dinossauro (RollOver), surgirão diferentes menus (em todos existirá um botão que permitirá regressar conteúdo original) que especificarão os aspectos referidos anteriormente. Como tal, o utilizador deterá o controlo do fluxo da informação, onde poderá clicar e aceder aos conteúdos inerentes a esse mesmo menu.
A título de exemplo, relativamente ao menu “anatomia”, apresentaremos mais uma interacção do tipo ambiente, onde estará presente o esqueleto do dinossauro permitindo, ao clicar por cima do mesmo, descobrir mais detalhes sobre as suas partes mais relevantes (através de popups).
Além dos componentes descritos, a aplicação terá diversos elementos sonoros que aparecerão ao clicar-se num menu, e também uma música ambiente.
Objectivos
"Demonstrar competências de conceptualização e implementação de estruturas não lineares de informação e elementos interativos, no respeito pelos conceitos e princípios do desenho de interação e usabilidade";
"Revelar competências ao nível dos processos de aquisição/digitalização, edição e composição de som";
"Demonstrar o domínio dos processos técnicos de integração e implementação de som, animação 2D e interatividade no Adobe Flash e em ActionScript 2.0 (as2)";
Revelar diferentes características que particularizam o velociraptor, despertando simultaneamente o interesse pelo mesmo.
Estrutura Arborescente
Diário de bordo
03/01 - 09/01
Continuação da realização do relatório e da animação no Adobe Flash - encontro entre os membros do grupo.
2/01
Início da realização do relatório do projecto final e da animação no Adobe Flash.
26/12
Encontro virtual para planear alguns dos aspectos a desenvolver, do ponto de vista mais técnico, e consequente divisão de tarefas.
20/12
De acordo com as indicações sugeridas pelo professor de IDE, tornou-se necessário alterar alguns elementos definitivos (como os botões interactivos e o bilhete de identidade), realizando-se assim a entrega definitiva do projecto final da unidade curricular.
15/12
Finalização e entrega final do projecto final de IDE.
14/12
Continuação das inúmeras componentes relativas ao projecto final de IDE.
13/12
Continuação das inúmeras componentes relativas ao projecto final de IDE.
12/12
Desenvolvimento da arborescência da aplicação durante o decorrer da aula de Laboratório Multimédia 1.
Início do desenvolvimento dos elementos a apresentar no projecto final de IDE.
Pesquisas visuais e consequente vectorização das imagens escolhidas.
8/12
Escolha do tema e do subtema a apresentar, com a ajuda do professor de IDE.
Pesquisa visual tendo em conta os objectivos definidos, como por exemplo, diferentes tipologias textuais e o estado de arte actual.
Distribuição de tarefas
Daniela Santos
Actualização da informação na wiki do grupo
Pesquisa visual
Vectorização da "personagem principal"
Pesquisa acerca dos conteúdos a abordar nas opções "Bilhete de Identidade", "Classificação científica" e "Período Histórico"
Realização do relatório do projecto final
David Crispim
Pesquisa visual
Vectorização e criação do cenário principal
Criação de alguns elementos definitivos a utilizar nos diversos menus disponíveis
Gisela Marquez
Pesquisa visual
Criação de alguns elementos definitivos a utilizar nos diversos menus disponíveis
Pesquisa acerca dos conteúdos a abordar nas opções "Bilhete de Identidade", "Classificação científica" e "Período Histórico"
Marcelo Bettencourt
Pesquisa visual
Pesquisa relativa aos elementos sonoros a utilizar
Iniciação da aplicação multimédia no Adobe Flash
Elementos visuais iniciais
Após conversarmos com o professor de Imagem Digital - Estática, optámos por substituir estas componentes da nossa aplicação multimédia.
Botões interactivos
1º botão - Menu "Características" 2º botão - Menu "Tempo histórico" 3º botão - Menu "Anatomia" 4º botão - Menu "Jogo"
1º botão - Opção "Classificação científica" 2º botão - Opção "Bilhete de Identidade"
Elementos visuais
Sequência inicial do cenário principal
Cenário principal
Menu Principal (contém já elementos que substituem os criados inicialmente, nomeadamente os botões do menu)
"Bilhete de Identidade" (contém os elementos que substituem o bilhete de identidade inicial)
"Jogo"
O utilizador poderá escolher a peça que falta para completar o puzzle.
Caso acerte, deparar-se-á com este cenário.
Caso erre, deparar-se-á com este cenário.
"Anatomia"
Está área poderá estar sujeita a alterações.
As áreas "Tempo histórico" e "Classificação científica" contêm apenas elementos textuais, sendo apresentadas mais tarde.
Relatório
1. Apresentação do projecto
Perante os diversos temas apresentados, o grupo optou pelo “Museu da Ciência”, centrando-se na escolha de um dinossauro (velociraptor) que nos pareceu interessante pela sua história, fisionomia e aparência, elaborando um quiosque multimédia que potencie diferentes tipos de funcionalidades.
Como tal, ao tentarmos recriar o cenário onde habitava, será permitido ao utilizador explorar e descobrir diferentes aspectos particularizam a espécie animal em diferentes domínios – alimentação, habitat, características físicas, curiosidades, anatomia, origem, hábitos, etc. Ao iniciar a aplicação, o utilizador deparar-se-á com uma interacção do tipo ambiente, onde irá surgir uma sequência do cenário principal a “montar-se”, aparecendo depois um ovo de dinossauro que se irá partir. Posteriormente, este ovo partir-se-á, surgindo o dinossauro escolhido e, simultaneamente, os distintos menus (em todos existirá um botão que permitirá regressar conteúdo original) que especificarão alguns dos aspectos referidos anteriormente. Assim, o utilizador deterá o controlo do fluxo da informação, onde poderá clicar e aceder aos conteúdos inerentes a esse mesmo menu.
A título de exemplo, relativamente ao menu “jogo”, ofereceremos a possibilidade de se completarem diversos puzzles com a peça certa que falta, onde o utilizador se irá deparar com dois resultados possíveis (caso erre ou acerte). Além dos componentes descritos, a aplicação multimédia terá diversos elementos sonoros que aparecerão ao clicar-se num menu, que estarão relacionados com o cenário principal e, ainda, a ajuda na navegação através do uso das nossas vozes para facilitar a mesma, dando instruções e dicas que nos parecem ser determinantes para o utilizador se sentir confortável e satisfeito.
2. Análise e planeamento
Tendo em conta os objectivos definidos inicialmente, pesquisámos diferentes modelos de referência que se relacionassem ou abordassem o nosso tema, situando-se o nosso público-alvo (inicial) numa faixa etária a partir dos 15/16 anos, com uma determinada capacidade cognitiva e de percepção perante o mundo à sua volta. Como tal, estas mesmas referências possuem estratégias de estruturação visual previamente delineadas, onde se consegue facilmente identificar os conteúdos essenciais a explorar, utilizando diferentes tipologias de layouts e de grelhas objectivas, concisas e claras, traduzindo-se assim num resultado positivo e, consequentemente, inspirador para o caminho a seguir (consultar anexo 1).
Embora esta pesquisa tivesse um significado positivo e motivador, após alguma indecisão e dúvida perante o que seria efectivamente o que queríamos transmitir, acabámos por alterar o nosso público-alvo, dirigindo-se desta vez para um grupo mais jovem (entre os 8 e 10 anos). Sendo assim, tornou-se fulcral procurar outros modelos de referência, que testemunhassem aquilo que este novo “público” procura enquanto utilizador da nossa aplicação multimédia interactiva (no anexo 2 podemos presenciar estas características, que desde cedo suscitaram a nossa atenção: através das próprias cores mais vivas, mais fascinantes e mais “encantadoras”; através dos “bonecos animados”, pela sua vivacidade, animação, dinamismo e energia – transmitindo rapidamente a sensação dos nossos desafios com teríamos de lidar, com os conteúdos que teríamos de desenvolver).
3. Desenho funcional
3.1 Requisitos funcionais
3.2 Estrutura arborescente
Sendo esta uma estrutura arborescente hierárquica não linear, o utilizador tem a hipótese de navegar “entre os níveis da estrutura e entre itens do mesmo nível da estrutura, sem restrições”. Além disso, é uma tipologia relacionada com o paradigma de interacção índex (por exemplo, quando os menus e os submenus estão sempre presentes) e podemos denotar ainda uma determinada “liberdade de selecção de percursos”.
Através desta representação, verifica-se uma “estruturação da informação em blocos e definição das ligações entre eles, com base na metáfora da árvore (estruturas arborescentes)” e, simultaneamente, uma representação gráfica da “hierarquia dos conteúdos (níveis de conteúdo), de todos os pontos chave da estrutura (nós) e respectivas ramificações (outros nós e links) e das relações de direcionalidade (fluxo) entre nós e links.” É necessário referir que os nós são encarados comos os pontos-chave das estruturas arborescentes (no nosso caso, o ecrã principal e as características) e certifica a existência de ligações, ou seja, possui descendência e os links (“tempo histórico”, “classificação científica”, “anatomia”, “jogo”, “projecto”, “bilhete de identidade”) já não adquirem descendência.
3.3 Desenho de interação e usabilidade
Quando nos é proposto desenvolver e produzir uma aplicação multimédia com determinados objectivos, com um específico público-alvo, há que ter em conta certos princípios e normas a utilizar e a apresentar. É importante salientar a importância que os princípios básicos do desenho de interacção e interfaces assumem neste contínuo processo, devendo ser considerados como factores decisivos para a “promoção e avaliação da usabilidade”. Como tal, são elementos decisivos nas diversas fases que vamos encontrando – “concepção, desenho, implementação e avaliação da estrutura, percursos, formas e meios de navegação/interacção” -, avaliando conjuntamente “factores cognitivos, psicológicos, emocionais e comunicacionais”
Como tal, ao longo da produção do projecto final, houve princípios que nos pareceram ser totalmente correctos a abordar para que os resultados no futuro se relevassem positivos e satisfatórios. Comecemos então pelo princípio “estrutura e orientação”, de onde se destaca a importância de toda a estrutura “reflectir a organização lógica dos conteúdos”, sendo esse um dos nossos principais e essenciais objectivos, conduzindo-nos a apresentar a informação mais proeminente somente em três ou quatro cliques, tendo ainda em conta o público-alvo com que estamos a lidar, tornando os variados percursos flexíveis considerando os seus objectivos e, simultaneamente, o seu nível de experiência. Sendo uma aplicação multimédia assente no paradigma de interacção ambiente, a acessibilidade aos conteúdos efectua-se de uma forma rápida, directa e objectiva, dando informações impertinentes ao utilizador, transmitindo solidez e segurança, associando o paradigma índex através de um menu estruturado. Sendo assim, apresentámos alguns meios que suportassem e ajudassem a navegação e a orientação, através do uso de estratagemas claros como os mecanismo de retorno (backs, retorno ao menu principal), mecanismos de identificação do ponto da estrutura (voz que está presente a acompanhar os diferentes percursos durante a navegação elaborada pelo utilizador – “o utilizador deve saber sempre como e para onde pode navegar e em que ponto da estrutura se encontra”, destaque do item do menu). Além destas diversificadas estratégias, tentámos ainda organizar e demonstrar toda a interface “de forma útil e relevante para o utilizador, mediante metáforas e modelos claros e consistentes, que o utilizador seja capaz de reconhecer”, relacionando correctamente as informações que se corelacionassem, promovendo o “reconhecimento e compreensão facilitadas pela estruturação” desenvolvida.
Um outro princípio determinante é a simplicidade, que deve ser idealizada igualmente em todas as fases do processo de planeamento e construção de uma aplicação multimédia, evocando-se a objectividade, com a apresentação de informação relevante e adequada ao contexto com o qual se está a trabalhar, com ferramentas que se adequem aos resultados que se pretendem atingir. Neste caso, se pensarmos nos conteúdos apresentados sobre o tempo histórico e o bilhete de identidade, presenciamos uma linguagem clara perante o público-alvo, resumindo sinteticamente as ideias-chave que se querem transmitir e dar a conhecer. Aliando-se à simplicidade, surge a consistência enquanto ferramenta essencial, na medida em que “a aplicação ou sistema deve ser consistente com as expectativas do utilizador”, expressando-se tais características na “posição, aparência e comportamento dos elementos que integram” a mesma (esta consistência visualiza-se particularmente na similaridade o cenário principal e os botões interactivos apresentam, assegurando uma certa coerência entre com o que o utilizador se depara inicialmente e com as opções que mais tarde lhe são dadas, acabando também por anunciar conformidade visual).
Conhecer o utilizador, aquilo que espera observar, aquilo que pode e está disposto a aprender, os seus conhecimentos prévios tendo em conta experiências anteriores, o contexto em que está inserido levou-nos a criar um específico perfil, tentando, dessa forma, conciliar todos os aspectos já explicados também com o princípio do feedback (devendo a “linguagem deve ser clara, concisa, não ambígua e familiar aos utilizadores”) e o da tolerância (a “aplicação ou sistema deve ser flexível e tolerante, implementando estratégias de prevenção do erro” – “tornar as acções previsíveis”).
4. Desenho técnico
5. Produção do projeto
5.1 Estrutura e meios de navegação/interação
Ao longo de toda a aplicação, podemos encontrar botões de fácil identificação (com a ajuda da voz que ajudará o utilizador na sua navegação), utilização e compreensão, sendo possível aceder aos conteúdos relativos a esses mesmos botões. Além disso, o utilizador é capaz de voltar ao ecrã principal, de aceder, por exemplo, ao menu “anatomia” consegue explorar o seu conteúdo e voltar ao tal ecrã principal. Quando desejar poderá também sair da aplicação multimédia, através de um outro botão que se encontrará disponível no cenário principal.
5.2 Integração e controlo de som
Houve determinados procedimentos necessários para a integração e controlo de som através de actionscript 2.0, requerendo a sua implementação técnica enquanto estrutura e/ou elemento interactivo, nomeadamente a integração de som existentes na “library”, como a voz de um dos elementos de grupo através de um determinado software – audacity – que reunia as condições necessárias para tal se efectuar e também de outros elementos sonoros que se encontram disponíveis num site bastante popular para este tipo de pesquisa (http://www.soundsnap.com), que pressupõe a instalação de um programa específico para a sua (dos elementos sonoros) obtenção (disponível em http://www.orbitdownloader.com).
5.3 Animação
De acordo com o que assimilámos durante o semestre, relativamente a este tópico, podemos abordar diferentes dados relativos à animação, assinalando os seus aspectos conceptuais e técnicos da animação, quer enquanto conteúdo, quer associada aos processos de interação.
A nível conceptual, foram introduzidos diversos eventos e diversas soluções que representam e que simbolizam a animação associada aos processos de interacção que podemos encontrar, tal como a existência de transições, que “na sequência da seleção de um item” (por exemplo, a selecção de um dos diferentes menus disponíveis inicialmente dirige o utilizador a pontos específicos da aplicação, sendo-lhe dada também a oportunidade de regressar ao “menu” principal) assinalam “a “entrada” ou “saída” de pontos específicos da estrutura da informação”. A visualização dos diferentes menus decorre da sequência inicial do cenário principal, surgindo depois do ovo do dinossauro se partir, facultando a opção de uma navegação de acordo com a vontade do utilizador, sinalizando, informando e orientando o próprio.
Enquanto conteúdo, a animação evoca e transparece alguns pontos-chave, ambicionando possuir e adquirir as características necessárias para que o utilizador se sinta confortável no conteúdo em que está inserido, fundamentando-se na “ilustração de conceitos/ideias”, comunicando e reforçando determinadas ideias, como, por exemplo, a criação de um cenário que simultaneamente idealize e represente o ambiente adequado à época histórica em que o dinossauro habitou e ainda ao público-alvo escolhido, e que funcione como uma “demonstração de processos e procedimentos”, “contribuindo para a robustez da metáfora” (enquanto “componente da interface”). A tal “demonstração de processos e procedimentos manifesta-se de diferentes formas, na medida em que o utilizador, perante os botões interactivos, tem acesso a informações inerentes à espécie em questão, existindo um “controlo do ritmo de apresentação da mensagem”, salientando-se algumas das suas peculiaridades (peso, tamanho, etc.), com abordagens e técnicas específicas (o bilhete de identidade e o menu “anatomia”), associando-se a elementos sonoros que fortalecem o período Cretáceo, à voz que servirá de guia e” ajudante” durante a navegação, combinando-se ainda com o entretenimento relacionado com os puzzles que poderão ser explorados, apelando, mais uma vez, à ilustração e demonstração do velociraptor.
5.4 Soluções técnicas adoptadas para a resolução de problemas
6. Conclusões
6.1 Reflexão crítica
Desenvolver esta aplicação multimédia proporciou-nos alguns desafios, desde o saber e aprender a trabalhar em grupo a aplicar as ferramentas as aprendizagens que nos foram transmitidas, correspondendo aos objectivos que nos foram propostos e aos quais nós próprios nos sujeitámos.
Inicialmente, sentimos algumas dificuldades em relação ao tema definitivo que iríamos desenvolver e aprofundar, tendo em conta possuirmos algumas opiniões divergentes (não em relação ao tema mas ao subtema), suscitando algumas dúvidas e, consequentemente, inquietações e incertezas. Como tal, pedimos ajuda aos professores das duas unidades curriculares em questão, contribuindo de uma forma positiva para as nossas indecisões, dando ainda conselhos mais técnicos e aprofundados para termos em consideração.
Ultrapassando esta fase inicial, seguiu-se a idealização e a definição do conceito a abordar, mais do ponto vista funcional do que propriamente gráfico. Possuindo-se uma ideia base do que pretendíamos criar, seria mais fácil e exequível principiar a construção dos aspectos gráficos. Convém ainda referir o facto de termos optado por alterar o nosso público-alvo, passando de uma faixa etária a partir dos 15/16 anos para uma faixa etária entre os 8 e os 10 anos. Esta fase foi assim iniciada e gradualmente amplificada, sendo apresentada na unidade curricular de Imagem Digital – Estática, tendo sofrendo algumas alterações em alguns dos conteúdos, revelando ser imprescindível e fulcral para ser possível prosseguir à sua construção no Adobe Flash.
Na realização da aplicação no Adobe Flash, tornou-se possível conciliar e explorar os inúmeros conhecimentos que adquirimos na Unidade Curricular em questão, envolvendo ainda a pesquisa de certos códigos que não tinham sido apreendidos durante o semestre. Como um dos membros do nosso grupo (Marcelo Bettencourt) já revelava determinados conhecimentos sobre alguns conteúdos, revelou-se importante para ser possível a construção e finalização de certas funções na aplicação, como, por exemplo, os puzzles disponíveis no menu “jogo”. Assim, algumas das dificuldades técnicas conseguiram ser superadas, contribuindo decisivamente para a concretização final das ideias originais.
6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projeto
7. Referências Web e Bibliográficas
Referências Web
Nível gráfico
http://www.nationalgeographic.com/
http://www.guardian.co.uk/science/dinosaurs
http://www.guardian.co.uk/science/dinosaurs
http://www.nhm.ac.uk/nature-online/life/dinosaurs-other-extinct-creatures/dino-directory/
Nível sonoro
http://www.orbitdownloader.com
Aulas teóricas (T10, T13, T14, T16) da Unidade Curricular de Laboratório Multimédia 1
8. Anexos
Anexo 1
Anexo 2
Anexo 3
