Edição actual desde as 23h43min de 13 de Janeiro de 2012

Elementos do grupo:

Artur Magalhães - 59409;
João Carvalho - 60458;
João Catarino - 65529;
Luís Brandão - 62029;
Sandra Costa - 62028;

Memória descritiva:

Aplicação interactiva do MoST (Museum of Science & Tecnology), polo Português, representativa da atividade cultural para o 1º trimestre de 2012.
Tem como principal objetivo, dar a conhecer a todos os utilizadores portugueses, o espaço de exposição, com uma galeria fotográfica e os temas expostos através de uma galeria videográfica, tendo em conta também uma pequena introdução ao Museu assim como a sua informação mais relevante.

Arborescência da aplicação:

Escolhemos a tipologia composta, visto ser aquela que mais se adapta aos conteúdos que temos para disponibilizar. Outro fator, que influênciou esta escolha relaciona-se com a abrangência da mesma.

Divisão de tarefas:

Artur Magalhães - Programação da galeria de vídeo
João Carvalho - Pesquisa e implementação de sons
João Catarino - Importação do layout para o Flash e programação da página de créditos
Miguel Brandão - Programação da galeria de fotos
Sandra Adegas - Programação da homepage

Todos os elementos do grupo participam na construção e implementação da aplicação, assim como na dinamização da página da wiki e elaboração do relatório.

Diário de bordo:

8 de Dezembro
Criação da página do projeto na wiki, publicação da constituição do grupo e memória descritiva.
Envio do endereço da página do projeto para os docentes responsáveis da disciplina.

12 de Dezembro
Desenvolvimento, durante o período da aula, da arborescência da aplicação. Divisão de tarefas entre os elementos do grupo e publicação na wiki.

27 de Dezembro
Importação dos layouts para o Flash e discução dos aspetos estéticos, assim como, das formas da implementação/ interação do nosso projeto.

28 de Dezembro
Deu-se inicio à programação em action script2, das diversas páginas que compõem o nosso projeto. Pesquisa de sons adequados à aplicação.

04 de Janeiro
Continuação na programação em action script2, das diversas páginas que compõem o nosso projeto. Tratamento dos sons escolhidos.
Início na elaboração do relatório.

10 de Janeiro
Apresentação e discução das propostas apresentadas para o funcionamento das galerias de fotos e vídeos. Continuação da elaboração do relatório e respetiva publicação na Wiki.

12 de Janeiro
Total integração e aferição das diversas páginas constituintes do projeto. Testar a interatividade em diferentes computadores.

13 de Janeiro
Gravação do Projeto em CD e entrega do mesmo no local estipulado (DeCA).

Relatório

Apresentação do projeto:

No âmbito da disciplina de Laboratório Multimédia 1, da Licenciatura em Novas Tecnologias da Informação (NTC) da Universidade de Aveiro foi-nos proposto a elaboração de um projeto, cujo produto final seria uma aplicação multimédia interativa. Desta forma, resolvemos desenvolver um artefato que pretende publicitar a filial portuguesa do Museu da Ciência e Tecnologia, com o intuito de oferecer aos seus utilizadores informações relativas à atividade do MoST (Museum of Science & Technology) no primeiro trimestre de 2012. Nele encontrar-se-ão três temas em destaque: luz, nanotecnologia e fluídos, que poderão ser acedidos a partir da homepage. Permite de igual forma o acesso à agenda cultural, à galeria fotográfica, galeria de vídeos e a informações relativas ao museu. As principais características desta aplicação prendem-se com a sua organização, sobriedade, de aspeto "clean" e minimalista, ou seja, embora contenha vários elementos, estes estão devidamente estruturados, de agradável apresentação, atrativa e intuitiva.

Análise e planeamento:

Durante o período dedicado à pesquisa de exemplos para definirmos o grafismo do nosso layout, encontrámos variadíssimas opções, algumas das quais nos influenciaram positivamente e por tal motivo passamos a destacar:

http://cvc.instituto-camoes.pt/conhecer/bases-tematicas/ciencia-em-portugal.html

Ao analisarmos este site aquilo que prendeu a nossa atenção foi o ambiente harmonioso entre todos os elementos constituintes da homepage. O aspeto “clean” e sóbrio transmite uma experiência agradável ao utilizador, dando a sensação de um espaço bem organizado e intuitivo. Um outro fator que nos agradou e que será implementado no nosso projeto, embora com algumas alterações, é a forma de navegação embutida no cenário.

http://portfolio.invoko.com/

Aqui está outro exemplo de um site que nos serviu de referência devido às tonalidades que permitem a sobreposição para qualquer elemento gráfico, quer seja texto ou imagem, mais claro ou mais escuro. Outro fator importante foi a esquematização e organização de conteúdos através das grelhas de estruturação visual.

Com esta aplicação pretendemos acima de tudo, estabelecer a ligação entre o edifício físico e a sua imagem difundida na web. O facto de conseguir transmitir informação relevante recorrendo a poucos elementos gráficos além de nos parecer ser um princípio fundamental de uma estética coerente, é um fato que agrada a um tipo de público que por norma procura este tipo de acontecimentos.

Este projeto foi idealizado para todos os cibernautas que procurem informação relevante nesta área, independentemente da faixa etária.

Estratégia de aplicação de cor:

Devido ao aspeto formal do site, optámos por uma paleta de cores mais sóbria.

Desenho funcional

Requisitos funcionais:

Quando se entra na aplicação somos confrontados com uma pequena animação que tem como foco principal a imagem presente no nosso layout. Temos a possibilidade de controlar os sons que pretendemos ouvir enquanto navegamos, através de um menu presente, em todas as páginas, na parte superior direita. O menu, sempre presente durante a navegação, permite em qualquer altura aceder à agenda, galeria de fotos e vídeo, assim como, a informações sobre o museu. Em qualquer das páginas podemos regressar à homepage através do logotipo ou no pequeno apontamento disposto na parte lateral esquerda, identificado pela palavra voltar.

Estrutura arborescente:

A estrutura arborescente escolhida pelo grupo foi a composta, pois O utilizador consegue navegar em profundidade entre os níveis da estrutura e entre itens do mesmo nível da estrutura, sem restrições. Temos menus que estão sempre presentes e desta forma existe total liberdade de seleção de percursos.

Desenho de interação e usabilidade:

Sendo que a usabilidade é um fator de qualidade que se relaciona com a facilidade de utilização da aplicação, este foi um ponto que dispensamos especial atenção, pois proporcionamos uma experiência confortável ao utilizador na medida em que nos highlights manifestam-se pequenas animações que convidam à interação, assim como, nos menus que com a passagem do rato alteram o seu estado inicial. Nas restantes páginas a continuidade dos menus facilitam a navegação e para além disso têm sempre a possibilidade de retornar à página inicial através de um botão criado para o efeito ou então usando o já conhecido logotipo.

Desenho técnico:

A parte gráfica deste projeto foi desenvolvida no Photoshop e a interatividade com recurso ao Flash e à linguagem de programação AS2.0. Desenvolvemos uma aplicação que permite uma interação agradável e intuitiva, em conjunto com a facilidade de atualização dos conteúdos. Na barra de som, o utilizador não só pode escolher se quer ouvir ou não o som de fundo, como também pode escolher a música e regular o volume da mesma. Temos quatro menus que estão sempre presentes no stage, na barra superior. Estes são para a agenda, galeria de fotos e vídeos e para informações do museu. Na galeria de imagens recorremos a um ficheiro com o formato xml, onde consta o nome da foto e respetiva descrição. Optámos por esta solução pois é muito prática e eficaz sempre que pretendermos atualizar o nosso site, acrescentar ou eliminar fotografias à nossa galeria.

Produção do projeto

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

O MoST é uma aplicação multimédia, cuja navegabilidade é facilitada pelos elementos representativos dos menus, da barra de controlo do som e do pequeno apontamento que permite voltar à homepage e que se encontra embutido na imagem situada na parte lateral esquerda da página. Tanto a galeria de fotos como a de vídeo têm disponíveis botões que permitem ao utilizador navegar, controlar e manipular os elementos que constituem estas galerias. Todos estes objetos foram programados em flash e convertidos em botões.

Integração e controlo de som:

Na nossa aplicação o som pode ser controlado por diversos botões. Play: que permite ao utilizador voltar a iniciar o som, depois de este ter sido desligado; Stop: silencia todos os sons; Next: reproduz um som diferente; Controlo de volume: onde o utilizador através de barras pode ajustar o volume desejado em intervalos de 10%.

Cada um dos botões de controlo de som, tem o código stopAllSounds() para evitar sobreposição, exceto as barras de controlo de volume.

Em cada uma das frames iniciais, colocámos o código para parar todos os sons existentes e a seguir, inicializámos o som da página correspondente.

Exemplo: stopAllSounds(); som_3.start();

Aquando da inicialização dos sons, também efectuamos um loop para que quando um dos sons finalizasse, o seguinte começasse.

som_1.onSoundComplete = function(){ som_2.start(); som_2.setVolume(40); }

som_2.onSoundComplete = function(){ som_3.start(); som_3.setVolume(40); }

som_3.onSoundComplete = function(){ som_4.start(); som_4.setVolume(40); }

som_4.onSoundComplete = function(){ som_1.start(); som_1.setVolume(40); }

Animação:

Neste capítulo é de salientar a harmonia e coerência entre páginas. As animações existentes primam pela subtileza e isto é conseguido logo na homepage onde o utilizador é presenteado por pequenos highlights que cativam o utilizador a explorar cada um dos tópicos presentes. Quando se navega para outra página, outra animação acontece, fazendo desvanecer a imagem principal, ao mesmo tempo que aparece parte dessa imagem arrumada na lateral esquerda do site. A galeria de fotos é uma outra página que mereceu especial atenção no que diz respeito a animações, pois optou-se por fazê-las avançar ou retroceder, opção esta que pode ser controlada e manipulada pelo utilizador. A utilização da linguagem XML(eXtensible Markup Language)além de servir de base de dados, neste caso, para imagens, permite uma fácil integração no Flash. Como este foi um dos conteúdos que não foi leccionado nas aulas, decidimos colocá-lo com a devida explicação, abaixo transcrita:

a variável que vai ler o XML
var nossoXML:XML = new XML()

carrega a galeria do XML
nossoXML.load ("galeria.xml")

ignorar os espaços em branco do XML
nossoXML.ignoreWhite = true

visualisa os acentos correctamente
System.useCodepage = true

o nosso ficheiro ao carregar vai chamar uma função que chama outra função:carrega
nossoXML.onLoad = function(){
carrega()
}

o que a função carrega vai fazer
function carrega(){
mc.loadMovie (nossoXML.firstChild.childNodes[i].attributes.local)
texto.text = nossoXML.firstChild.childNodes[i].attributes.legenda
}

ação do botao voltar
Como o Flash organiza as imagens a partir do zero(0), quando clicarmos e largarmos o botão voltar, se a imagem estiver na posição zero, ele apresenta a última, neste caso a seis, senão carrega aquela que vem imediatamente atrás.

tras.onRelease = function(){
if(i==0){
i=6
}else{
i--
}
carrega()

ação do botao avançar
quando clicarmos e largarmos o botão avançar, se a imagem estiver na última posição, neste caso, posição seis, ele apresenta a primeira, senão carrega aquela que vem imediatamente a seguir.

frente.onRelease = function(){
if(i==6){
i=0
}else{
i++
}
carrega()
}

Quanto à galeria de vídeo o processo é parecido com a galeria de fotos pois o utilizador poderá escolher qual o vídeo que pretende visualizar, sempre que disponíveis, além de o poder controlar através dos botões dispostos para esse efeito. O elemento video tem controlos de volume de som, pausa e reprodução (alternados) e voltar ao início do filme.

O som é controlado por uma slide bar colocada na vertical no canto inferior direito do video.

Barra de volume
var s:Sound = new Sound();
s.setVolume(70);
mc_soundLevel.mc_bar._yscale = 70;

mc_soundLevel.onPress = function(){
volumeTo = (this._ymouse / this._height)*100;
this.mc_bar._yscale = -volumeTo;
s.setVolume(volumeTo);
}

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

Na galeria fotográfica, inicialmente tínhamos pensado em apresentar uma sequência de imagens a deslizar sequencialmente da esquerda para a direita que parava quando se passava o rato por cima e abria uma imagem maior quando clicássemos. No entanto, pareceu-nos pouco funcional na medida em que tínhamos que adicionar as imagens no palco e não era muito prático quando as quiséssemos atualizar. Por isso, decidimos implementar a galeria através do XML.

Conclusões

Reflexão crítica:

A partir dos resultados descritos e das observações realizadas durante a elaboração deste trabalho, concluiu-se que: na nossa perspetiva este tipo de trabalho incentiva à autonomia e ajuda a desenvolver o espírito criativo que existe em cada um de nós. No cômputo geral, o balanço é bastante positivo visto que nos permitiu elevar os índices de confiança para desenvolvermos futuros projetos sempre com a consciência de os poder melhorar. Outra ilação retirada deste trabalho foi a confirmação das capacidades do programa Flash, sem dúvida alguma, uma ferramenta poderosíssima na construção de aplicações multimédia. Em relação à elaboração deste site, aquilo que no início nos pareceu complicado, rapidamente se tornou num trabalho motivante que nos proporcionou cimentar e aprofundar os conteúdos desenvolvidos ao longo desta disciplina. Em suma, julgamos ter correspondido ao solicitado e ter ido de encontro àquilo que nos propusemos no início deste projeto, realçando o quanto foi gratificante a elaboração deste trabalho.

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

Uma das funcionalidades a acrescentar em desenvolvimentos futuros seria uma area de utilizadores que permitisse aos visitantes do museu publicarem relatos da sua experiência, envio de fotografias/conteúdos multimédia relativos à visita ao museu, além de, propostas de melhorias.

A interacção entre o HTML e o flash poderia ser aumentada com a integração de objectos swf em ambiente Dreamweaver, evitando que aplicação seja implementa em Flash na sua totalidade. Desta forma, agilizava-se a integração de conteúdos em formato Web.

Referências Web e Bibliográficas:

Instituto Camões, disponível em: http://cvc.instituto-camoes.pt/conhecer/bases-tematicas/ciencia-em-portugal.html
Multimédia, disponível em: http://portfolio.invoko.com/ Museu da Ciência (Coimbra), disponível em : http://www.museudaciencia.org/index.php?iAction=Museu&iArea=3

Link para ficheiro do projecto:

http://www.joinrf.com/labmm1/projeto_final_most.html