GuiaCaloiro

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
(→2.Dezembro.2010)
(→Anexo 1. Botões da Aplicação)
 
(91 intermediate revisions not shown)
Line 1: Line 1:
 +
[[File:Logo_Final.jpg|right]]
= Projecto Final =
= Projecto Final =
Projecto elaborado no âmbito das disciplinas de: '''Laboratório Multimédia 1''' e '''Imagem Digital Estática'''.
Projecto elaborado no âmbito das disciplinas de: '''Laboratório Multimédia 1''' e '''Imagem Digital Estática'''.
Line 12: Line 13:
[http://wikis.ua.pt/lab1ide/index.php/User:Deixamerir Daniela Lapa 60625]
[http://wikis.ua.pt/lab1ide/index.php/User:Deixamerir Daniela Lapa 60625]
-
[http://wikis.ua.pt/lab1ide/index.php/User:Dimitar.kokov Dimitar Kokov 42641]
+
[http://wikis.ua.pt/lab1ide/index.php/User:Dimitar Dimitar Kokov 42641]
[http://wikis.ua.pt/lab1ide/index.php/User:RicardoPeralta Ricardo Marques 44417]
[http://wikis.ua.pt/lab1ide/index.php/User:RicardoPeralta Ricardo Marques 44417]
Line 31: Line 32:
----
----
-
 
====== '''25.Novembro.2010''' ======
====== '''25.Novembro.2010''' ======
Line 40: Line 40:
<br>
<br>
-
 
-
----
 
====== '''26.Novembro.2010''' ======
====== '''26.Novembro.2010''' ======
-
 
Conclusão da Memória Descritiva e elaboração da Página da Wiki do Projecto Final.
Conclusão da Memória Descritiva e elaboração da Página da Wiki do Projecto Final.
<br>
<br>
-
 
-
----
 
====== '''29.Novembro.2010''' ======
====== '''29.Novembro.2010''' ======
-
Hoje começamos por definir as cores que vamos usar na aplicação: '''Verde'''; '''Castanho'''; '''Laranja''' e '''Branco'''.
+
Hoje começamos por definir as cores que vamos usar na aplicação: '''Cinza Claro'''; '''Azul Claro'''; '''Azul Escuro''' e '''Cinza Escuro'''.
Demos início à construção do logotipo.
Demos início à construção do logotipo.
<br>
<br>
-
 
-
 
'''Cores'''
'''Cores'''
 +
[[File:Cores_GuiaCaloiro.jpg]]
-
[[File:Cores.jpg]]
+
<br>
====== '''30.Novembro.2010''' ======
====== '''30.Novembro.2010''' ======
Line 69: Line 63:
Pesquisa de algumas Aplicações Multimédia com objectivos e funcionalidades semelhates ao nosso Projecto.
Pesquisa de algumas Aplicações Multimédia com objectivos e funcionalidades semelhates ao nosso Projecto.
Conseguimos encontrar três Aplicações Multimédia com objectivos semelhantes, no entanto ainda estamos a pesquisar aplicações com funcionalidades semelhantes às que tencionamos utilizar, porque até agora não encontramos nada do género.
Conseguimos encontrar três Aplicações Multimédia com objectivos semelhantes, no entanto ainda estamos a pesquisar aplicações com funcionalidades semelhantes às que tencionamos utilizar, porque até agora não encontramos nada do género.
-
 
<br>
<br>
-
----
+
'''Estado de Arte'''
-
 
+
Aplicações Multimédia com objectivos semelhantes ao nosso Projecto:
-
=== '''Estado de Arte''' ===
+
-
 
+
-
 
+
-
====== Aplicações Multimédia com objectivos semelhantes ao nosso Projecto: ======
+
[http://caloiro.forum.pt/ser-caloiro/somos-caloiros]
[http://caloiro.forum.pt/ser-caloiro/somos-caloiros]
Line 85: Line 74:
[http://aeiou.guiadoestudante.pt/default.asp]
[http://aeiou.guiadoestudante.pt/default.asp]
-
====== Aplicações Multimédia com funcionalidades semelhantes ao nosso Projecto: ======
+
<br> Aplicações Multimédia com funcionalidades semelhantes ao nosso Projecto:
Ainda em pesquisa.
Ainda em pesquisa.
-
 
+
<br>
-
----
+
-
 
+
====== '''1.Dezembro.2010''' ======
====== '''1.Dezembro.2010''' ======
Continuação da elaboração do Logotipo.
Continuação da elaboração do Logotipo.
-
 
'''Primeira Fase do Logotipo'''
'''Primeira Fase do Logotipo'''
-
 
+
<gallery widts=200px heights=100px perrow=1>
-
[[File:Foto_Burro.jpg]]
+
File:Foto_Burro.jpg
 +
</gallery>
<br>
<br>
Line 117: Line 104:
Ínicio da vectorização de algumas imagens que vão ser necessárias para o nosso Projecto.
Ínicio da vectorização de algumas imagens que vão ser necessárias para o nosso Projecto.
Criação de novos logotipos, porque desistimos da ideia do nosso primeiro logotipo.
Criação de novos logotipos, porque desistimos da ideia do nosso primeiro logotipo.
 +
 +
<gallery widts=80px heights=100px perrow=1>
 +
File:Universidade_Aveiro.jpg|Vectorização UA
 +
</gallery>
 +
 +
<br>
 +
 +
====== '''8.Dezembro.2010''' ======
 +
Vectorização do '''Mapa da Universidade de Aveiro''' e de uma pequena parte do '''Mapa da Cidade de Aveiro'''.
 +
Recolha de mais informção sobre o nosso projecto.
 +
 +
<gallery widts=80px heights=100px perrow=2>
 +
File:Mapa ua.jpg|Mapa UA
 +
File:Cidade_Aveiro.jpg|Mapa Aveiro
 +
</gallery>
 +
 +
<br>
 +
 +
====== '''9.Dezembro.2010''' ======
 +
Criação da Arborescência do Projecto.
 +
 +
Continuação do desenvolvimento da identidade visual da aplicação.
 +
 +
[[Media:Arborescencia_guiacaloiro.pdf]]
 +
 +
 +
----
 +
:Com o desenvolvimento do projecto foi necessário alterar a arborescência.
 +
:[[Media:Arborescencia copy 2.pdf]]
 +
----
 +
<br>
 +
 +
====== '''10.Dezembro.2010''' ======
 +
Continuação do desenvolvimento da identidade visual da aplicação.
 +
 +
Estudo de Layout.
 +
 +
Finalização do logótipo.
 +
 +
Criação da página inicial "Loading"
 +
 +
<gallery widts=80px heights=100px perrow=2>
 +
File:LOGOgc.jpg|Logótipo
 +
File:LOADINGgc.jpg|Loading
 +
</gallery>
 +
 +
<br>
 +
 +
====== '''11.Dezembro.2010''' ======
 +
Continuação do desenvolvimento da identidade visual da aplicação.
 +
 +
Estudo de Layout. Criação de botões.
 +
 +
<gallery widts=80px heights=100px perrow=2>
 +
File:Ecra - Universidade.jpg| Ecrã tipo 1
 +
File:Botões gradient.jpg|Botões
 +
</gallery>
 +
 +
<br>
 +
 +
====== '''12.Dezembro.2010''' ======
 +
Continuação do desenvolvimento da identidade visual da aplicação.
 +
 +
Estudo de cores.
 +
 +
<gallery widts=80px heights=100px perrow=2>
 +
File:6ecra.jpg|Ecrã tipo 2
 +
File:12ecra.jpg| Ecrã tipo 3
 +
</gallery>
 +
 +
<br>
 +
 +
====== '''13.Dezembro.2010''' ======
 +
 +
Apresentação do Projecto na disciplina de Imagem Digital Estática.
 +
 +
Início da concretização em Flash do Projecto.
 +
 +
Algumas modificações no ecrã-tipo.
 +
 +
<br>
 +
 +
====== '''16.Dezembro.2010''' ======
 +
 +
Pequenas alterações no Logótipo.
 +
 +
Conclusão em Flash da página de entrada da nossa aplicação multimédia ('''Loading''').
 +
 +
 +
<gallery widts=80px heights=100px perrow=2>
 +
File:Logo_Final.jpg|Logótipo
 +
</gallery>
 +
 +
<br>
 +
 +
====== '''17.Dezembro.2010''' ======
 +
 +
 +
Continuação da elaboração dos Ecrãs Tipo.
 +
 +
 +
====== '''23.Dezembro.2010''' ======
 +
 +
 +
Conclusão da elaboração dos Ecrãs Tipo
 +
 +
 +
====== '''26.Dezembro.2010 a 9.Janeiro.2011 ''' ======
 +
 +
 +
Concretização do Projecto em Flash.
 +
 +
 +
 +
====== '''12.Janeiro.2011 ''' ======
 +
 +
 +
Entrega do Projecto Final a Imagem Digital Estática.
 +
 +
 +
====== '''13.Janeiro.2011 ''' ======
 +
 +
 +
Realização do Relatório Final do Projecto (a publicar na wiki dia 14.Janeiro.2011), da Unidade Curricular Laboratório Multimédia 1.
 +
 +
 +
====== '''14.Janeiro.2011 ''' ======
 +
 +
 +
Entrega na Wiki do Relatório Final do Projecto.
 +
Entrega do Projecto Final para Laboratório Multimédia 1.
 +
 +
 +
 +
 +
 +
=== Relatório Final ===
 +
 +
===== 1. Apresentação do Projecto =====
 +
 +
No âmbito da cadeira de Laboratório Multimédia I, foi-nos proposto desenvolver uma aplicação multimédia interactiva.
 +
O nosso grupo optou pela elaboração de uma aplicação multimédia interactiva, On-Line, “Guia do Caloiro”.
 +
Para a execução desta aplicação tiveram-se em conta factores como público-alvo ao qual se destinava e qual o contributo que esta aplicação podia dar ao mesmo.
 +
 +
O Projecto “Guia do Caloiro” foi criado para facilitar a todos os novos estudantes da Universidade de Aveiro o acesso a informação essencial para a sua integração no ambiente universitário e para que os mesmos possam encontrar com maior facilidade os departamentos e saber onde os mesmos se situam, os horários dos refeitórios, saber como usar os transportes públicos de Aveiro e onde ficam os locais com mais interesse na Cidade. Esta aplicação apresenta dois mapas, um de Aveiro e um da Universidade de Aveiro, nos quais se encontram destacados os espaços referidos complementados com a informação de horários, cursos leccionados, ementas, preços, websites, contactos e imagens para uma melhor identificação desses espaços.
 +
Este Projecto tem como objectivo principal facilitar a integração dos estudantes na Universidade de Aveiro, uma vez que nós caloiros, quando chegamos pela primeira vez à Universidade sentimos alguma dificuldade em nos localizar, sendo necessário, em casa, pesquisar sítios na Internet com informação do Campus Universitário e da Cidade.
 +
 +
 +
===== 2. Análise e Planeamento =====
 +
 +
Para o desenvolvimento da mesma, procederam-se a algumas etapas projectuais, tais como, uma sessão de brainstorming da qual resultou uma posterior análise e discussão inter-grupal. Desta surgiram duas ideias cruciais, sendo estas, uma aplicação multimédia interactiva com ênfase no ramo da música (baseada na já existente MTV) e um Guia de orientação para futuros alunos da Universidade de Aveiro. A proposta final realça a segunda ideia anteriormente apresentada. Esta ideia foi escolhida derivado ao facto de “nós” membros do grupo, termos sentido algumas dificuldades de integração e adaptação ao meio universitário.
 +
Com esta aplicação, pretende-se facilitar a todos novos alunos que ingressem futuramente no Campus de Santiago, o acesso a informações consideradas de extrema importância para a sua mobilidade dentro da Universidade e da Cidade de Aveiro.
 +
Relativamente, à Universidade existirão informações referentes aos Departamentos; Reitoria; Refeitórios; Casa do Estudante e Transportes. Em relação à Cidade em si, apresentamos informação como: Fórum de Aveiro; Praça do Peixe; Teatro Aveirense e Transportes.
 +
 +
 +
===== 3. Desenho funcional =====
 +
 +
 +
====== 3.1 Requisitos Funcionais ======
 +
 +
A navegação pela aplicação será feita através de botões de navegação. Estes foram desenvolvidos com o intuito de serem simples, ergonómicos e funcionais. Toda a execução dos layout’s teve em conta requisitos de funcionalidade e simplicidade, uma vez que, a aplicação pode vir a ser utilizada por pessoas com pouco literacia informática e/ou poucos conhecidos de navegação pela Web.
 +
 +
(Ver Anexo 1.)
 +
 +
====== 3.2 Estrutura Arborescente ======
 +
 +
 +
A nossa Aplicação Multimédia Interactiva, consiste num paradigma de interacção Índex, onde os botões estão organizados em Menus e Sub-menus.
 +
A aplicação assenta na tipologia de Estrutura Arborescente Hierárquica não linear, ou seja, o utilizador pode navegar entre os níveis de estrutura e entre itens do mesmo nível da estrutura, sem restrições, onde os Menus e Sub-menus estão sempre presentes. O utilizador tem total liberdade de selecção de percursos.
 +
 +
No caso da nossa arborescência podemos verificar que existe um Loading inicial, que depois de carregado vai ao encontro de uma página inicial, onde podemos seleccionar entre dois menus, o menu da Universidade de Aveiro e o menu da Cidade de Aveiro. No primeiro menu, podemos encontrar os seguintes botões: Universidade de Aveiro; Fórum Aveiro; Praça do Peixe; Teatro Aveirense e Tranpostes.
 +
No segundo menu, podemos encontrar os seguintes botões: Aveiro; Departamentos; Reitoria; Refeitórios; Casa do Estudante e Transportes. No entanto, nos botões Departamentos; Refeitórios, encontramos sub-menus, onde aparece um botão para cada departamento e dois botões no sub-menu dos refeitórios.
 +
O utilizador ao carregar em cada um destes botões, encontrará informação relativa a cada um dos temas.
 +
Nesta aplicação são também apresentados dois mapas, um da Universidade de Aveiro e outro da Cidade de Aveiro, estes alteram consoante o menu que o utilizador escolher, ou Universidade de Aveiro ou Aveiro.
 +
 +
 +
====== 3.3 Desenho de interacção e usabilidade ======
 +
 +
O desenho da aplicação foi executado tendo em conta, uma pesquisa essencial desenvolvida pelos membro do grupo. Esta pesquisa prendeu-se sobretudo com as “Heurística de Usabilidade”, esta está assente em dez princípios, tais como:
 +
1. Feedback
 +
2. Falar a linguagem do usuário.
 +
3. Saídas claramente demarcadas, isto é, o usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.
 +
4. Consistência, ou seja, a mesma operação é apresentada na mesma localização e é formatada/apresentada da mesma maneira para facilitar o reconhecimento.
 +
5. Prevenir erros, conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram.
 +
6. Minimizar a sobrecarga de memória do usuário, ou seja o sistema mostra os elementos de diálogo e permiti que o usuário faça as suas escolhas, sem a necessidade de lembrar um comando específico.
 +
7. Atalhos, para que os usuários mais experientes executarem as operações mais rapidamente.
 +
8. Diálogos simples e naturais, isto é, apresentar a informação que o usuário precisa no momento, nem a mais nem a menos.
 +
9. Boas mensagens de erro, onde a linguagem deve ser clara e sem códigos.
 +
10. Ajuda e documentação. O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda.
 +
 +
 +
===== 4. Desenho Técnico =====
 +
 +
 +
Em termos do desenho técnicos a aplicação foi toda desenvolvida tendo em vista requisitos de simplicidade em paralelo com usabilidade. Assim temos botões de fácil identificação, utilização e compreensão, o texto referente à informação à qual este dá acesso e a respectiva área activa do botão.
 +
Os nossos layouts são de estrutura bastante simples, para que a aplicação não se torne confusa e de difícil compreensão. O design do layout apresenta formas básicas.
 +
 +
 +
===== 5. Produção do Projecto =====
 +
 +
====== 5.1 Estrutura e meios de navegação/interacção ======
 +
 +
 +
Em relação aos meios de navegação temos durante toda a aplicação acesso a menu’s com botões que fazem ligação com todas as secções da mesma. A escolha de apresentar menu’s diferentes foi para organizar melhor a informação e assim temos um menu para o mapa da cidade de Aveiro e um para a Universidade, nos quais, dependendo da secção, temos sub-menus que fazem a ligação às restantes informações. Também para melhorar a organização e apresentação de informação apresentamos ao utilizador botões de scroll. Estes mostram ao utilizador que há mais informação além da que visível e dão uma noção da quantidade da mesma.
 +
 +
 +
 +
'''Código do Scroll'''
 +
 +
 +
var scrollUpper:Number = 160;
 +
 +
var scrollLower:Number = 272;
 +
 +
 +
var textLower:Number = 597.0;
 +
 +
var textUpper:Number = 450.0;
 +
 +
 +
var scrollRange:Number = scrollLower - scrollUpper;
 +
var textRange:Number = textLower - textUpper;
 +
 +
 +
 +
function scroll () {
 +
 +
 +
 +
var moved:Number = scroller_mc._y - scrollUpper;
 +
 +
var pctMoved:Number = moved/scrollRange;
 +
 +
var textMove:Number = pctMoved*textRange;
 +
 +
text_ua._y = textLower - textMove;
 +
}
 +
 +
 +
 +
scroller_mc.onPress = function () {
 +
 +
this.startDrag(false, this._x, scrollUpper, this._x, scrollLower);
 +
 +
this.onMouseMove = scroll;
 +
}
 +
 +
 +
 +
scroller_mc.onRelease =  scroller_mc.onReleaseOutside = function () {
 +
 +
this.stopDrag();
 +
 +
this.onMouseMove = null;
 +
}
 +
 +
 +
 +
 +
====== 5.2 Integração e Controlo de som ======
 +
 +
 +
Ao navegar pela aplicação, o utilizador tem a possibilidade de ouvir música, caso queira, através de uma pequena “Rádio” criada.
 +
Relativamente, a este item de integração e controlo do som, que é um dos componentes mais importantes na avaliação do Projecto Final, é visível durante toda a parte da aplicação, um reprodutor de música, que contém as opções de pausa e Play da música, bem como a opção de avançar ou retroceder para a música anterior ou seguinte. O reprodutor de música encontra-se situado na parte superior direita da nossa aplicação. O utilizador também poderá ver qual o nome da música que está a passar naquele momento. Existe outro botão, botão este que consiste no controlo do volume. Neste botão o utilizador pode escolher entre ter o som mais alto ou mais baixo. O botão encontra-se ao lado do reprodutor de música, no canto superior direito.
 +
 +
 +
 +
'''Código de Integração e Controlo de Som'''
 +
 +
 +
Músicas:
 +
 +
 +
musicas = Array ("Lenny Kravitz - Are You Gonna Go My Way.mp3", "ATB - Some Things Just Are The Way They Are.mp3", "Artic Monkeys - Fake Tales Of San Francisco.mp3");
 +
 +
aler=0;
 +
 +
som= new Sound ();
 +
 +
 +
 +
som.loadSound(musicas[aler],true);
 +
 +
som.stop();
 +
 +
nomemusica=musicas[aler];
 +
 +
_root.som.loadSound(_root.musicas[aler],true);
 +
 +
 +
 +
 +
Botão Play:
 +
 +
 +
on (release) {
 +
 +
_root.som.loadSound(_root.musicas[aler],true);
 +
 +
}
 +
 +
 +
 +
Botão Stop:
 +
 +
 +
 +
on (release) {
 +
 +
_root.som.stop();
 +
 +
}
 +
 +
 +
 +
Botão ffwrd:
 +
 +
 +
on (release) {
 +
 +
if (_root.aler<_root.musicas.length-1) {
 +
 +
_root.aler+=1;
 +
 +
_root.som.loadSound(_root.musicas[aler],true);
 +
 +
_root.nomemusica=_root.musicas[aler];
 +
 +
}
 +
 +
else {
 +
 +
_root.aler=0
 +
 +
_root.nomemusica=_root.musicas[aler];
 +
 +
_root.som.loadSound(_root.musicas[aler],true); }
 +
 +
}
 +
 +
 +
 +
Botão f.rev:
 +
 +
 +
on (release) {
 +
 +
if (_root.aler>_root.musicas.length-3) {
 +
 +
_root.aler-=1;
 +
 +
_root.som.loadSound(_root.musicas[aler],true);
 +
 +
_root.nomemusica=_root.musicas[aler];
 +
 +
}
 +
 +
else {
 +
_root.aler=2
 +
 +
_root.nomemusica=_root.musicas[aler];
 +
 +
_root.som.loadSound(_root.musicas[aler],true); }
 +
 +
}
 +
 +
 +
 +
====== 5.3 Animação ======
 +
 +
 +
No início deparamo-nos com a primeira animação, o Loading. Tem como principal objectivo mostrar ao utilizador que a aplicação está a funcionar e informar do progresso do carregamento desta. Optou-se por fazer uma animação simples para condizer com a linguagem estética da página e do próprio conteúdo.
 +
Com o Loading completo surge a página inicial e nesta temos animação na entrada do menu, e mais tarde do submenu. Mais uma vez são animações simples para não abandonar o estilo e não tirar atenção ao conteúdo da aplicação.
 +
 +
 +
 +
====== 5.4 Soluções técnicas adoptadas para a resolução de problemas ======
 +
 +
 +
Durante as aulas de Laboratório Multimédia 1, não foram adquiridos todos os conhecimentos necessários para a realização da nossa aplicação multimédia, para isso, foi necessário pesquisar Código de Action Script 2.0. Pesquisamos este, recorrendo à Internet.
 +
Enquanto desenvolvíamos a nossa aplicação, surgiram-nos alguns problemas, problemas estes, que conseguiram ser ultrapassados, com mais pesquisa sobre os códigos e com ajuda de alguns alunos do mesmo curso – Novas Tecnologias da Comunicação, do 3ºano.
 +
 +
 +
 +
===== 6. Conclusões =====
 +
 +
 +
 +
====== 6.1 Reflexão crítica ======
 +
 +
 +
O desenvolvimento deste Projecto Final, possibilitou ao grupo entender melhor e aprender novas coisas no que diz respeito ao Adobe Flash CS3. Uma vez que, para além de aplicar novamente os conhecimentos que adquirimos durante as aulas da Unidade Curricular de Laboratório Multimédia I, também foi necessário adquirir conhecimentos extra-aulas, ou seja, foi necessária a pesquisa de tutoriais para ajudar na execução do projecto.
 +
 +
O principal objectivo deste Projecto era a criação de uma aplicação multimédia interactiva, On-Line sobre o “Guia do Caloiro”, e de como facilitar a entrada dos novos alunos na Universidade de Aveiro. Penso que alcançamos este objectivo, porque de uma forma simples e clara, conseguimos esclarecer algumas dúvidas que certamente os novos alunos inicialmente se deparam na entrada para um novo mundo, o mundo universitário.
 +
 +
Apesar, das dificuldades que surgiram ao longo da execução do Projecto foi-nos possível superá-las com sucesso.
 +
 +
Este Projecto contribui para o facto de podermos assimilar os conhecimentos adquiridos nas Unidades Curriculares de Laboratório Multimédia I e Imagem Digital Estática. Contribui ainda para aumentar os nossos conhecimentos relativamente à Universidade que frequentamos. Uma vez que, antes da realização do Projecto, não conhecíamos muito bem o Campus Universitário.
 +
 +
 +
 +
====== 6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto ======
 +
 +
Depois da produção deste Projecto, reconhecemos que poderia existir alguns pontos de aperfeiçoamento. Um dos que consideramos mais importantes é sem dúvida a elaboração de mais elementos animados na nossa aplicação.
 +
De um modo geral, achamos que respeitamos os parâmetros estabelecidos e desenvolvidos na Unidade Curricular.
 +
 +
===== 7. Referências Web e Bibliográficas =====
 +
 +
 +
 +
Referências Web
 +
 +
 +
• http://caloiro.forum.pt/ser-caloiro/somos-caloiros
 +
 +
• http://aeiou.guiadoestudante.pt/default.asp
 +
 +
• http://www.flashwebtraining.com/tutoriais/actionscript/captions/01.php
 +
 +
• http://www.flashwebtraining.com/tutoriais/actionscript/preloader/01.php
 +
 +
• http://www.flashwebtraining.com/tutoriais/actionscript/captions/01.php
 +
 +
 +
 +
===== Agradecimentos =====
 +
 +
Agradecimentos aos docentes da Unidade Curricular de Laboratório Multimédia I, Professora Ana Carla Amaro e Professor Hélder Caixinha, por todo o apoio que nos deram.
 +
 +
 +
===== 8. Anexos =====
 +
 +
 +
====== Anexo 1. Botões da Aplicação ======
 +
 +
 +
<gallery widts=80px heights=100px perrow=2>
 +
File:Botoesss.jpg|Botões
 +
File:Scroll_11.jpg|Scroll
 +
</gallery>
 +
 +
<br>
 +
 +
 +
 +
====== Anexo 2. Template elaborado para a Unidade Curricular de Imagem Digital Estática ======
 +
 +
 +
<gallery widts=80px heights=100px perrow=2>
 +
File:TEMPLATE 5.jpg|Template
 +
</gallery>
 +
 +
<br>

Latest revision as of 04:08, 15 January 2011

Logo Final.jpg

Contents

Projecto Final

Projecto elaborado no âmbito das disciplinas de: Laboratório Multimédia 1 e Imagem Digital Estática.


Elementos do Grupo

Andreia Couto 51539

Daniela Lapa 60625

Dimitar Kokov 42641

Ricardo Marques 44417

Memória Descritiva

O nosso Projecto de Autoria Multimédia tem por objectivo geral o desenvolvimento de uma aplicação multimédia interactiva, On-line, "O Guia do Caloiro".

Optamos por criar um “Guia do Caloiro”. O objectivo deste projecto é facilitar a todos os novos estudantes da Universidade de Aveiro, o acesso a informação essencial para a sua integração no ambiente universitário. Informação como os horários de atendimento na Reitoria, horários dos transportes, locais onde comer, locais onde dormir, onde fazer compras e, claro, onde sair à noite. Para tal, pretendemos apresentar a aplicação com uma divisão inicial Dia/Noite. Graficamente, a ideia era a de aproveitar um mapa de Aveiro, vectorizar de forma simples, e nos lugares marcados criar gráficos que identifiquem o local em questão. Este Projecto tem como objectivo principal facilitar a integração dos estudantes na Universidade de Aveiro, uma vez que nós caloiros, quando chegamos pela primeira vez à Universidade sentimos alguma dificuldade em nos localizar, sendo necessário, em casa, pesquisar sítios na Internet com informação do Campus Universitário.

Diário de Bordo

25.Novembro.2010

Demos início ao nosso Projecto Final!

Foram escolhidos os elementos que constituem o grupo e ficou decidido qual o tema do Projecto a desenvolver. Começamos por escrever a nossa Memória Descritiva, de acordo com o trabalho a ser realizado.


26.Novembro.2010

Conclusão da Memória Descritiva e elaboração da Página da Wiki do Projecto Final.


29.Novembro.2010

Hoje começamos por definir as cores que vamos usar na aplicação: Cinza Claro; Azul Claro; Azul Escuro e Cinza Escuro.

Demos início à construção do logotipo.


Cores

Cores GuiaCaloiro.jpg


30.Novembro.2010

Pesquisa de algumas Aplicações Multimédia com objectivos e funcionalidades semelhates ao nosso Projecto. Conseguimos encontrar três Aplicações Multimédia com objectivos semelhantes, no entanto ainda estamos a pesquisar aplicações com funcionalidades semelhantes às que tencionamos utilizar, porque até agora não encontramos nada do género.

Estado de Arte Aplicações Multimédia com objectivos semelhantes ao nosso Projecto:

[1]

[2]

[3]


Aplicações Multimédia com funcionalidades semelhantes ao nosso Projecto:

Ainda em pesquisa.


1.Dezembro.2010

Continuação da elaboração do Logotipo.


Primeira Fase do Logotipo

Foto Burro.jpg


2.Dezembro.2010

Definição da informação que estará disponível na nossa aplicação multimédia e definição da estrutura visual da mesma.


6.Dezembro.2010

Ínicio da vectorização de algumas imagens que vão ser necessárias para o nosso Projecto. Criação de novos logotipos, porque desistimos da ideia do nosso primeiro logotipo.

Vectorização UA


8.Dezembro.2010

Vectorização do Mapa da Universidade de Aveiro e de uma pequena parte do Mapa da Cidade de Aveiro. Recolha de mais informção sobre o nosso projecto.

Mapa UA

Mapa Aveiro


9.Dezembro.2010

Criação da Arborescência do Projecto.

Continuação do desenvolvimento da identidade visual da aplicação.

Media:Arborescencia_guiacaloiro.pdf


Com o desenvolvimento do projecto foi necessário alterar a arborescência.
Media:Arborescencia copy 2.pdf


10.Dezembro.2010

Continuação do desenvolvimento da identidade visual da aplicação.

Estudo de Layout.

Finalização do logótipo.

Criação da página inicial "Loading"

Logótipo

Loading


11.Dezembro.2010

Continuação do desenvolvimento da identidade visual da aplicação.

Estudo de Layout. Criação de botões.

Ecrã tipo 1

Botões


12.Dezembro.2010

Continuação do desenvolvimento da identidade visual da aplicação.

Estudo de cores.

Ecrã tipo 2

Ecrã tipo 3


13.Dezembro.2010

Apresentação do Projecto na disciplina de Imagem Digital Estática.

Início da concretização em Flash do Projecto.

Algumas modificações no ecrã-tipo.


16.Dezembro.2010

Pequenas alterações no Logótipo.

Conclusão em Flash da página de entrada da nossa aplicação multimédia (Loading).


Logótipo


17.Dezembro.2010

Continuação da elaboração dos Ecrãs Tipo.


23.Dezembro.2010

Conclusão da elaboração dos Ecrãs Tipo


26.Dezembro.2010 a 9.Janeiro.2011

Concretização do Projecto em Flash.


12.Janeiro.2011

Entrega do Projecto Final a Imagem Digital Estática.


13.Janeiro.2011

Realização do Relatório Final do Projecto (a publicar na wiki dia 14.Janeiro.2011), da Unidade Curricular Laboratório Multimédia 1.


14.Janeiro.2011

Entrega na Wiki do Relatório Final do Projecto. Entrega do Projecto Final para Laboratório Multimédia 1.



Relatório Final

1. Apresentação do Projecto

No âmbito da cadeira de Laboratório Multimédia I, foi-nos proposto desenvolver uma aplicação multimédia interactiva. O nosso grupo optou pela elaboração de uma aplicação multimédia interactiva, On-Line, “Guia do Caloiro”. Para a execução desta aplicação tiveram-se em conta factores como público-alvo ao qual se destinava e qual o contributo que esta aplicação podia dar ao mesmo.

O Projecto “Guia do Caloiro” foi criado para facilitar a todos os novos estudantes da Universidade de Aveiro o acesso a informação essencial para a sua integração no ambiente universitário e para que os mesmos possam encontrar com maior facilidade os departamentos e saber onde os mesmos se situam, os horários dos refeitórios, saber como usar os transportes públicos de Aveiro e onde ficam os locais com mais interesse na Cidade. Esta aplicação apresenta dois mapas, um de Aveiro e um da Universidade de Aveiro, nos quais se encontram destacados os espaços referidos complementados com a informação de horários, cursos leccionados, ementas, preços, websites, contactos e imagens para uma melhor identificação desses espaços. Este Projecto tem como objectivo principal facilitar a integração dos estudantes na Universidade de Aveiro, uma vez que nós caloiros, quando chegamos pela primeira vez à Universidade sentimos alguma dificuldade em nos localizar, sendo necessário, em casa, pesquisar sítios na Internet com informação do Campus Universitário e da Cidade.


2. Análise e Planeamento

Para o desenvolvimento da mesma, procederam-se a algumas etapas projectuais, tais como, uma sessão de brainstorming da qual resultou uma posterior análise e discussão inter-grupal. Desta surgiram duas ideias cruciais, sendo estas, uma aplicação multimédia interactiva com ênfase no ramo da música (baseada na já existente MTV) e um Guia de orientação para futuros alunos da Universidade de Aveiro. A proposta final realça a segunda ideia anteriormente apresentada. Esta ideia foi escolhida derivado ao facto de “nós” membros do grupo, termos sentido algumas dificuldades de integração e adaptação ao meio universitário. Com esta aplicação, pretende-se facilitar a todos novos alunos que ingressem futuramente no Campus de Santiago, o acesso a informações consideradas de extrema importância para a sua mobilidade dentro da Universidade e da Cidade de Aveiro. Relativamente, à Universidade existirão informações referentes aos Departamentos; Reitoria; Refeitórios; Casa do Estudante e Transportes. Em relação à Cidade em si, apresentamos informação como: Fórum de Aveiro; Praça do Peixe; Teatro Aveirense e Transportes.


3. Desenho funcional
3.1 Requisitos Funcionais

A navegação pela aplicação será feita através de botões de navegação. Estes foram desenvolvidos com o intuito de serem simples, ergonómicos e funcionais. Toda a execução dos layout’s teve em conta requisitos de funcionalidade e simplicidade, uma vez que, a aplicação pode vir a ser utilizada por pessoas com pouco literacia informática e/ou poucos conhecidos de navegação pela Web.

(Ver Anexo 1.)

3.2 Estrutura Arborescente

A nossa Aplicação Multimédia Interactiva, consiste num paradigma de interacção Índex, onde os botões estão organizados em Menus e Sub-menus. A aplicação assenta na tipologia de Estrutura Arborescente Hierárquica não linear, ou seja, o utilizador pode navegar entre os níveis de estrutura e entre itens do mesmo nível da estrutura, sem restrições, onde os Menus e Sub-menus estão sempre presentes. O utilizador tem total liberdade de selecção de percursos.

No caso da nossa arborescência podemos verificar que existe um Loading inicial, que depois de carregado vai ao encontro de uma página inicial, onde podemos seleccionar entre dois menus, o menu da Universidade de Aveiro e o menu da Cidade de Aveiro. No primeiro menu, podemos encontrar os seguintes botões: Universidade de Aveiro; Fórum Aveiro; Praça do Peixe; Teatro Aveirense e Tranpostes. No segundo menu, podemos encontrar os seguintes botões: Aveiro; Departamentos; Reitoria; Refeitórios; Casa do Estudante e Transportes. No entanto, nos botões Departamentos; Refeitórios, encontramos sub-menus, onde aparece um botão para cada departamento e dois botões no sub-menu dos refeitórios. O utilizador ao carregar em cada um destes botões, encontrará informação relativa a cada um dos temas. Nesta aplicação são também apresentados dois mapas, um da Universidade de Aveiro e outro da Cidade de Aveiro, estes alteram consoante o menu que o utilizador escolher, ou Universidade de Aveiro ou Aveiro.


3.3 Desenho de interacção e usabilidade

O desenho da aplicação foi executado tendo em conta, uma pesquisa essencial desenvolvida pelos membro do grupo. Esta pesquisa prendeu-se sobretudo com as “Heurística de Usabilidade”, esta está assente em dez princípios, tais como: 1. Feedback 2. Falar a linguagem do usuário. 3. Saídas claramente demarcadas, isto é, o usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior. 4. Consistência, ou seja, a mesma operação é apresentada na mesma localização e é formatada/apresentada da mesma maneira para facilitar o reconhecimento. 5. Prevenir erros, conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram. 6. Minimizar a sobrecarga de memória do usuário, ou seja o sistema mostra os elementos de diálogo e permiti que o usuário faça as suas escolhas, sem a necessidade de lembrar um comando específico. 7. Atalhos, para que os usuários mais experientes executarem as operações mais rapidamente. 8. Diálogos simples e naturais, isto é, apresentar a informação que o usuário precisa no momento, nem a mais nem a menos. 9. Boas mensagens de erro, onde a linguagem deve ser clara e sem códigos. 10. Ajuda e documentação. O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda.


4. Desenho Técnico

Em termos do desenho técnicos a aplicação foi toda desenvolvida tendo em vista requisitos de simplicidade em paralelo com usabilidade. Assim temos botões de fácil identificação, utilização e compreensão, o texto referente à informação à qual este dá acesso e a respectiva área activa do botão. Os nossos layouts são de estrutura bastante simples, para que a aplicação não se torne confusa e de difícil compreensão. O design do layout apresenta formas básicas.


5. Produção do Projecto
5.1 Estrutura e meios de navegação/interacção

Em relação aos meios de navegação temos durante toda a aplicação acesso a menu’s com botões que fazem ligação com todas as secções da mesma. A escolha de apresentar menu’s diferentes foi para organizar melhor a informação e assim temos um menu para o mapa da cidade de Aveiro e um para a Universidade, nos quais, dependendo da secção, temos sub-menus que fazem a ligação às restantes informações. Também para melhorar a organização e apresentação de informação apresentamos ao utilizador botões de scroll. Estes mostram ao utilizador que há mais informação além da que visível e dão uma noção da quantidade da mesma.


Código do Scroll


var scrollUpper:Number = 160;

var scrollLower:Number = 272;


var textLower:Number = 597.0;

var textUpper:Number = 450.0;


var scrollRange:Number = scrollLower - scrollUpper; var textRange:Number = textLower - textUpper;


function scroll () {


var moved:Number = scroller_mc._y - scrollUpper;

var pctMoved:Number = moved/scrollRange;

var textMove:Number = pctMoved*textRange;

text_ua._y = textLower - textMove; }


scroller_mc.onPress = function () {

this.startDrag(false, this._x, scrollUpper, this._x, scrollLower);

this.onMouseMove = scroll; }


scroller_mc.onRelease = scroller_mc.onReleaseOutside = function () {

this.stopDrag();

this.onMouseMove = null; }



5.2 Integração e Controlo de som

Ao navegar pela aplicação, o utilizador tem a possibilidade de ouvir música, caso queira, através de uma pequena “Rádio” criada. Relativamente, a este item de integração e controlo do som, que é um dos componentes mais importantes na avaliação do Projecto Final, é visível durante toda a parte da aplicação, um reprodutor de música, que contém as opções de pausa e Play da música, bem como a opção de avançar ou retroceder para a música anterior ou seguinte. O reprodutor de música encontra-se situado na parte superior direita da nossa aplicação. O utilizador também poderá ver qual o nome da música que está a passar naquele momento. Existe outro botão, botão este que consiste no controlo do volume. Neste botão o utilizador pode escolher entre ter o som mais alto ou mais baixo. O botão encontra-se ao lado do reprodutor de música, no canto superior direito.


Código de Integração e Controlo de Som


Músicas:


musicas = Array ("Lenny Kravitz - Are You Gonna Go My Way.mp3", "ATB - Some Things Just Are The Way They Are.mp3", "Artic Monkeys - Fake Tales Of San Francisco.mp3");

aler=0;

som= new Sound ();


som.loadSound(musicas[aler],true);

som.stop();

nomemusica=musicas[aler];

_root.som.loadSound(_root.musicas[aler],true);



Botão Play:


on (release) {

_root.som.loadSound(_root.musicas[aler],true);

}


Botão Stop:


on (release) {

_root.som.stop();

}


Botão ffwrd:


on (release) {

if (_root.aler<_root.musicas.length-1) {

_root.aler+=1;

_root.som.loadSound(_root.musicas[aler],true);

_root.nomemusica=_root.musicas[aler];

}

else {

_root.aler=0

_root.nomemusica=_root.musicas[aler];

_root.som.loadSound(_root.musicas[aler],true); }

}


Botão f.rev:


on (release) {

if (_root.aler>_root.musicas.length-3) {

_root.aler-=1;

_root.som.loadSound(_root.musicas[aler],true);

_root.nomemusica=_root.musicas[aler];

}

else { _root.aler=2

_root.nomemusica=_root.musicas[aler];

_root.som.loadSound(_root.musicas[aler],true); }

}


5.3 Animação

No início deparamo-nos com a primeira animação, o Loading. Tem como principal objectivo mostrar ao utilizador que a aplicação está a funcionar e informar do progresso do carregamento desta. Optou-se por fazer uma animação simples para condizer com a linguagem estética da página e do próprio conteúdo. Com o Loading completo surge a página inicial e nesta temos animação na entrada do menu, e mais tarde do submenu. Mais uma vez são animações simples para não abandonar o estilo e não tirar atenção ao conteúdo da aplicação.


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

Durante as aulas de Laboratório Multimédia 1, não foram adquiridos todos os conhecimentos necessários para a realização da nossa aplicação multimédia, para isso, foi necessário pesquisar Código de Action Script 2.0. Pesquisamos este, recorrendo à Internet. Enquanto desenvolvíamos a nossa aplicação, surgiram-nos alguns problemas, problemas estes, que conseguiram ser ultrapassados, com mais pesquisa sobre os códigos e com ajuda de alguns alunos do mesmo curso – Novas Tecnologias da Comunicação, do 3ºano.


6. Conclusões
6.1 Reflexão crítica

O desenvolvimento deste Projecto Final, possibilitou ao grupo entender melhor e aprender novas coisas no que diz respeito ao Adobe Flash CS3. Uma vez que, para além de aplicar novamente os conhecimentos que adquirimos durante as aulas da Unidade Curricular de Laboratório Multimédia I, também foi necessário adquirir conhecimentos extra-aulas, ou seja, foi necessária a pesquisa de tutoriais para ajudar na execução do projecto.

O principal objectivo deste Projecto era a criação de uma aplicação multimédia interactiva, On-Line sobre o “Guia do Caloiro”, e de como facilitar a entrada dos novos alunos na Universidade de Aveiro. Penso que alcançamos este objectivo, porque de uma forma simples e clara, conseguimos esclarecer algumas dúvidas que certamente os novos alunos inicialmente se deparam na entrada para um novo mundo, o mundo universitário.

Apesar, das dificuldades que surgiram ao longo da execução do Projecto foi-nos possível superá-las com sucesso.

Este Projecto contribui para o facto de podermos assimilar os conhecimentos adquiridos nas Unidades Curriculares de Laboratório Multimédia I e Imagem Digital Estática. Contribui ainda para aumentar os nossos conhecimentos relativamente à Universidade que frequentamos. Uma vez que, antes da realização do Projecto, não conhecíamos muito bem o Campus Universitário.


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

Depois da produção deste Projecto, reconhecemos que poderia existir alguns pontos de aperfeiçoamento. Um dos que consideramos mais importantes é sem dúvida a elaboração de mais elementos animados na nossa aplicação. De um modo geral, achamos que respeitamos os parâmetros estabelecidos e desenvolvidos na Unidade Curricular.

7. Referências Web e Bibliográficas

Referências Web


• http://caloiro.forum.pt/ser-caloiro/somos-caloiros

• http://aeiou.guiadoestudante.pt/default.asp

• http://www.flashwebtraining.com/tutoriais/actionscript/captions/01.php

• http://www.flashwebtraining.com/tutoriais/actionscript/preloader/01.php

• http://www.flashwebtraining.com/tutoriais/actionscript/captions/01.php


Agradecimentos

Agradecimentos aos docentes da Unidade Curricular de Laboratório Multimédia I, Professora Ana Carla Amaro e Professor Hélder Caixinha, por todo o apoio que nos deram.


8. Anexos
Anexo 1. Botões da Aplicação

Botões

Scroll



Anexo 2. Template elaborado para a Unidade Curricular de Imagem Digital Estática

Template


Retrieved from "http://wikis.ua.pt/lab1ide/index.php?title=GuiaCaloiro"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox