PocketUA

Edição actual desde as 20h19min de 15 de Janeiro de 2013

Elementos do grupo

Filipe Costa - 69348

João Batista - 68632

João Leal Vaz - 69314

Luís Fardilha - 68855

Sara Eusébio - 65048

Projecto

Descrição da aplicação

No âmbito do projeto final da disciplina de Labmm1, iremos desenvolver um web site com a demonstração de uma possível aplicação para multi-plataforma. Esta aplicação tem como tema a Universidade de Aveiro, e pretende compilar as diferentes ferramentas web existentes ja na UA ( paco; moodle; email; etc. ). Esta aplicação destina-se a todos os utilizadores universais da UA. A Aplicação funciona também como rede social, criando uma nova plataforma onde a grande interface mostra a localização dos utilizadores no campus da UA.

O web site que iremos desenvolver irá servir como forma de divulgação e informação do projeto, incluindo a demonstração do mesmo em forma de animação interactiva. Ainda será disponibilizada uma versão mobile de um protótipo da aplicação da pretendida ( esta versão apenas ira conter as ligações para as diferentes ferramentas da UA).

Conceptualização visual

Queremos adoptar um estilo simples, intuitivo e acessível a todos os utilizadores. Utilizámos portanto imagem vectorial e traços simples para que os utilizadores tenham uma fácil interpretação da aplicação.

Estado de Arte

Quando efectuamos as nossas pesquisas, concluímos que são raras as aplicações aplicações semelhantes há que ideializá-mos. Esta aplicação está direccionada para os docentes e alunos da UA, a nossa pesquisa incidiu sobre aplicações multimédia compiladoras e agregadores.

Identidade visual

Palete de cores

No nosso projecto decidimos utilizar cores que estivessem ligadas à Universidade de Aveiro, como por exemplo as cores utilizadas no site da UA, moodle, mail, etc. Decidimo-nos basear nessas cores, não só por estarem relacionadas com o nosso projecto, mas também por serem cores limpas e combinarem todas entre si.

Tipografia utilizada

Como tipo de letra, decidimos que era necessário utilizar um tipo de letra que fosse simples, sem muitos pormenores e que fosse fácil de ler e perceber. Como tal, após uma breve pesquisa, optámos pelo tipo de letra Helvetica.

Distribuição de tarefas

Filipe Costa:

elaboração de logotipos, layouts e design geral (ID-E);

desenvolvimento do texto da voz off;

realização da animação da aplicação;

produção do site;

relatório do projeto

João Batista:

elaboração de logotipos, layouts e design geral (ID-E);

responsável pela wiki;

realização da animação da aplicação;

produção do site;

relatório do projeto;

João Leal Vaz:

elaboração de logotipos, layouts e design geral (ID-E);

desenvolvimento do texto da voz off;

realização da animação da aplicação;

produção do site;

relatório do projeto;

Luís Fardilha:

elaboração de logotipos, layouts e design geral (ID-E);

desenvolvimento do texto da voz off;

realização da animação da aplicação;

produção do site;

relatório do projeto;

Sara Eusébio:

incorporação da voz off;

responsável pela wiki;

realização da animação da aplicação;

produção do site;

relatório do projeto;

Arborescência

A nossa estrutura arborescente é não-linear e foi construída para podermos navegar entre vários nós e links sem qualquer restrição. O utilizador tem liberdade total para navegar na aplicação. Foi desenhada a pensar numa estrutura simplificada e sempre com o objectivo de não ser confusa, para que o utilizador não se perca e navegue facilmente por onde quer. A página principal e a demonstração da aplicação correspondem aos nós e os diferentes menus são os links, possuindo ainda pequenas definições dentro de cada um destes links para serem alteradas como o utilizador preferir.

Arborescência do site:

Arborescência da aplicação:

Ecrãs modelo

Ecrã de Login:

Ecrã de Definições:

Ecrã Mapa:

Ecrã Mail:

Ecrã Paco:

Ecrã Arca

Ecrã Moodle

Diário de bordo

6 de Dezembro

-Discussão de ideias relativas ao projeto;

-Criação da página do projeto na wiki;

-Publicação da constituição do grupo;

-Elaboração da respectiva memória descritiva;

-Envio do endereço da página do projeto.

10 de Dezembro

-Recolha de informação relativa ao tema escolhido;

-Investigação e análise de outras aplicações na mesma área de conteúdos ou em áreas semelhantes;

-Divisão de tarefas entre os elementos do grupo.

13 de Dezembro

-Discussão e desenvolvimento da arborescência da aplicação;

-Troca de ideias relativas ao layout final da aplicação;

-Continuação da divisão de tarefas entre os elementos do grupo.

17 de Dezembro

-Conclusão da divisão de tarefas entre os elementos do grupo;

-Discussão de ideias relativas ao layout final da aplicação;

-Publicação na wiki.

3 de Janeiro

-Aperfeiçoamento dos cenários, botões de navegação, menus e outros elementos que constituem toda a aplicação;

-Começo da elaboração do relatório final.

7 de Janeiro

-Conclusão dos cenários, botões de navegação, menus e outros elementos que constituem toda a aplicação;

-Início da implementação de animação em AS2 no Flash;

-Continuação da elaboração do relatório final.

10/11/12 de Janeiro

-Continuação e conclusão da implementação de animação em AS2 no Flash;

-Começo da implementação de interactividade em AS2 no Flash;

-Realização do texto para a Voz Off da Intro e gravação da mesma;

-Continuação da elaboração do relatório final.

13/14/15 de Janeiro

-Conclusão da implementação de interactividade em AS2 no Flash;

-Revisão de todo o projecto para encontrar/evitar bugs ou outras falhas que poderão ter surgido;

-Conclusão do Relatório Final.

Anexos/Rascunhos

Fontes usadas

Multimédia:Fontes do projeto.zip

Relatório

Introdução

Em conjunto com a disciplina de Imagem Digital Estática, Laboratório Multimédia 1, foi proposta a elaboração de um projecto em grupo, no qual tínhamos total liberdade para escolher o tema que pretendíamos trabalhar, com o objectivo de conceber uma aplicação multimédia interactiva. Optámos por escolher a área das aplicações móveis, com o intuito de criar uma aplicação que funciona como compilador com uma vertente de rede social. Esta aplicação, para a qual escolhemos o nome de pocket UA, engloba todas as plataformas/ferramentas que nos são utéis da Universidade de Aveiro e, para além disso, possui uma ferramenta de geolocalização. Para este projecto, para além da realização de uma interface interactiva e agradavém a vista do utilizador (que foi preparada na disciplina de Imagem Digital Estática) tivemos de aplicar todos os conhecimentos adquiridos nos foram leccionados ao longo do semestre na disciplina de Laboratório Multimédia I e aplicá-lo no projecto, de modo a que a aplicação fosse o mais prático possível para o utilizador e o mais simplificada de maneira a que o utilizador pudesse perceber facilmente o funcionamento da aplicação e que acedesse facilmente as ferramentas e plataformas deste modo a navegação pela aplicação seria intuitiva. Assim, foi- nos exigido não só uma revisão teórica das temáticas exploradas, mas ainda uma reflexão para que as possamos aplicar na prática e nos locais adequados. O maior obstáculo que o nosso grupo se deparou foi, sem dúvida, a aprendizagem auto- didata de códigos e de funções que ainda não tínhamos leccionado na disciplina para aplicar no nosso projecto, visto que queríamos tornar a aplicação o mais funcional possível mas sem esquecer as limitações do action script 2. Para pormos em prática o projecto, tivemos de fazer um esforço conjunto e fazer enumeras pesquisas até chegarmos concretamente a um consenso daquilo que cada um de nós idealizava para a aplicação. Este passo foi bastante importante para a aplicação e para o desenvolvimento do trabalho.

Análise e planeamento

Definição do Conceito

No início deste projecto, tínhamos já uma ideia do que pretendíamos idealizar. Sabíamos, desde o início, que queríamos fazer um compilador de plataformas que permitisse ao utilizador uma melhor navegação entre as várias plataformas da UA e que pudesse localizar, por exemplo, amigos que estivessem dentro do campus universitário. Com o tema bem-definido, já sabíamos também qual seria o meio de distribuição que iríamos utilizar. Sendo esta uma aplicação móvel optámos então por escolher os tablets e smartphones como meio de divulgação da nossa aplicação. Depois de reunirmos, surgiu a necessidade de limitar a informação para que o trabalho não se estendesse demasiado, e, portanto, não nos perdesse-mos na organização dos principais focos. Decidimos então, que deveríamos agrupar as diversas plataformas por grupos, para que fosse mais simples aceder a cada plataforma. Esta aplicação destina-se, exclusivamente, a todos os alunos e ao corpo docente da UA, visto que para que o utilizador consiga utilizar esta aplicação necessita de ter uma conta na UA. O nível de interactividade é simples, permitindo o controlo do fluxo da informação ou navegação. Para o utilizador aceder às diversas ferramentas, apenas precisa de clicar sobre a plataforma que deseja aceder e é directamente redireccionado para a respectiva plataforma. Esta interacção irá ser feita através de botões embutidos na janela principal, onde o utilizador apenas precisa de clicar sobre o botão que desejar e será automaticamente direccionado para uma janela com a plataforma respectiva. Esta decisão que tomámos, facilita a interacção entre o utilizador e aplicação, visto que toda a informação está bem estipulada e organizada. Pocket UA é uma aplicação que funciona como um agregador de várias plataformas já existentes na universidade de Aveiro. Com esta aplicação temos um uso muito mais eficaz e rápido de qualquer das plataformas que nos são cedidas pela Universidade de Aveiro, não necessitando de ter uma nova janela para aceder às várias plataformas e não necessitando de voltar a colocar os dados para se conseguir entrar na plataforma. Esta aplicação, para além de possuir as várias plataformas, possui também um geolocalizador que permite que o utilizador seja identificado no mapa, caso este queira ou não. Permite também que o utilizador adicione amigos, que crie grupos, e que os possa identificar no mapa do campus da UA. O utilizador pode interagir com esta ferramenta, alterando o seu perfil, as definições da conta, eliminando ou adicionando os seus amigos, criando grupos, tornando-se visível ou invisível no mapa, deixando “gostos” nos vários departamentos ou locais que frequentou e pode também partilhar aquilo que desejar no Facebook e no Twitter.

Investigação temática

Para a realização deste projecto, fizemos uma pesquisa que abrangiu programas que são semelhantes à aplicação que queríamos desenvolver, tais como o Layar e o Skype. Esta pesquisa foi importante na medida em que conseguimos obter uma ideia do design que ambas utilizam e na simplicidade que ambos os programas possuem. Pesquisámos também sobre programas semelhantes ao geolocalizador, para podermos ver e ter uma ideia daquilo que iríamos fazer, do tipo de layout que utilizam e naquilo que se baseiam. Como tal, baseámo-nos no foursquare, por ser um programa simples e por se adequar ao tipo de aplicação que queríamos desenvolver. Relativamente à disposição dos menus e ao layout da nossa aplicação, pesquisámos na internet sobre aplicações utilizadas em iphones, que, de certa forma, também se enquadravam no género de aplicação que queríamos criar. Decidimos que queríamos criar algo simples, que não tivesse muita informação e que fosse fácil de entender.

Caracterização da aplicação

Área de conteúdos

Complilador

Plataforma de suporte

Serviços móveis

Forma de distribuição

On-line

Paradigma de interação

Index, visto que várias áreas do menu terão recurso a ícones e formas que funcionam como botões; Ambiente, uma vez que na aplicação existe a exploração dos botões.

Filiação'

Alunos e corpo de docentes da UA

Autoria

Filipe Costa

João Batista

João Leal Vaz

Luís Fardilha

Sara Eusébio

Caraterísticas técnicas necessárias para aceder à aplicação

Para utilizar esta aplicação é necessário um sistema operativo iOS ou Android. Caso contrário não será possível aceder à mesma. Como referido anteriormente, é necessário também possuir uma conta na Universidade de Aveiro.

Desenho de Interação e Usabilidade

O nosso projecto divide-se em dois layouts, o layout do website e o layout da aplicação. Para o website, adoptámos um layout simples e dinâmico de forma a que o utilizador fique familiarizado e consiga aceder facilmente aos vários menus disponíveis. A aplicação foi onde concentrámos mais a nossa atenção pois é um grande desafio adaptar todas estas funcionalidades a uma gama de produtos tão diversificados como as plataformas mobile. A nossa preocupação é que o utilizador entenda todo o seu percurso na aplicação sem se perder, para tal optamos por um menu horizontal superior sempre visível. Utilizámos um nível de interactividade básico, para assim o utilizador ter o controlo total do fluxo de informação e da navegação. Para isso tivemos de fazer vários estudos e tentativas sobre o layout. Inicialmente pensámos em utilizar cores escuras por economizar a bateria dos dispositivos móveis, no entanto verificámos que não iria ser relevante e que a longo prazo iria cansar o utilizador. Desta forma decidimos utilizar um meio-termo, o cinza. Para além desta cor não cansar, torna de forma clara a informação relevante mais nítida. Na estruturação do nosso painel de definições optámos por dar ao utilizador a opção de escolher o seu idioma, para facilitar a utilização a docentes/alunos que não falem fluentemente a língua portuguesa. Damos também a oportunidade ao utilizador de escolher o seu estado, ou seja, de optar por estar visível ou invisível, sendo que por defeito cada utilizador aparece invisível, para que desta forma possamos proteger a privacidade do mesmo.

Desenho Técnico

Do ponto de vista do desenho técnico adoptamos um estilo gráfico, de linhas direitas, sendo que este estilo foi baseado num tipo de imagem limpa, geométrica, com tons claros, ícones sintéticos, simples e simétricos, compondo assim um tipo de janelas simples e interessante. O layout da aplicação e respectivos menus foram feitos no programa Illustrator, que desta forma nos permitiu exportar todos esses elementos para o Flash e podermos assim anima-los.

Produção do Projecto

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

Esta aplicação mobile tem como principais paradigmas de interacção o Índex e o Ambiente. Relativamente ao paradigma de interacção índex, adequa-se ao nosso projecto no sentido em que temos uma grande quantidade de informação agrupada por por menus explícitos, como por exemplo, na parte referente às definições. Quanto ao paradigma de interacção Ambiente, o nosso trabalho integra-se nesse paradigma, pois contém metáforas gráficas imersivas e botões e ícones embebidos/escondidos na interface. Integração e controlo de som A implementação do som nesta aplicação surge no momento da abertura da mesma. O som estará também presente na passagem de um menu para o outro no instante em que se carrega em cada botão. Os sons utilizados para esta aplicação foram retirados através de download gratuito do SoundSnap e importados para o flash. E por fim teremos a participação de uma voz off que dá inicio a esta plataforma no momento da sua observação inicial.

Animação

As animações existentes na nossa aplicação multimédia são: a animação da introdução com classic e shape tween, criação de botões imersivos e respectiva animação com efeito roll over e roll out. 

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

Durante o projecto surgiram alguns bugs e problemas como por exemplo a inserção de iframes ou wrappers no nosso projecto fla, este foi um enorme problema com que nos encontramos e fez com que tivéssemos de alterar bastante a nossa ideia inicial, visto este ser um processo bastante complexo e a falta de tempo suficiente para o executar. Também surgiram alguns devido ao desaparecimento de elementos na library, mas foi facilmente resolvido, o problema estava em que estávamos todos a trabalhar no mesmo ficheiro da forma errada o que para além desse causou outros problemas. Deparámos-nos também com o problema na elaboração dos layouts pois chegamos a conclusão que necessitávamos de mais elementos do que aqueles que tínhamos criado para IDE para as animações e para novas estruturas, tudo isto devido a não termos conseguido também introduzir as iframes. Outro problema que tivemos foi a selecção de sons para a aplicação, não queríamos tornar a app demasiado pesada e ter o cuidado de não ter sons em demasia para uma app mobile, sempre quisemos a aplicação o mais simples possível.

Conclusão

Com a concepção deste projecto chegamos a conclusão de que realmente esta é uma aplicação essencial e na nossa opinião já devia ter sido concebida pela Universidade de Aveiro uma aplicação do género para facilitar o acesso aos docentes/alunos às ferramentas e plataformas disponibilizadas pela UA. Quanto a pesquisa e esquematização das ideias, foi bastante árduo, visto que era essencial criarmos uma aplicação simples, intuitiva e que funcionasse. Na idealização e concepção deste projecto, podemos dizer que nos fez desenvolver e por em prática os conhecimentos que aprendemos durante as aulas e fez com que fossemos para além do nosso aprendizado deste semestre. Esta foi uma parte bastante importante e crucial do nosso trabalho, pois fez com que utilizássemos diversas funcionalidades na nossa aplicação. Para a realização deste projecto foi necessária uma pesquisa fora do contexto de aula e/ou de avaliação em aula, o que nos permitiu pôr em prática todos os conhecimentos que fomos adquirindo ao longo do semestre. É graças a estes aspectos que conseguimos evoluir enquanto alunos e grupo, pois podemos verificar quais são os nossos limites e quais as falhas técnicas que tivémos, para que assim no próximo trabalho as possamos evitar. Com este trabalho, para além daquilo que aprendemos nas aulas, tivemos a oportunidade de explorar um pouco mais os programas que necessitámos de utilizar para realizar este projecto.

Bibliografia

Editora : taschen

Título : web design flash sites

Autor : Taschen Icon

Webgrafia

http://www.behance.net/gallery/Device-Scout-for-iPad/2873183

http://www.mono-1.com/monoface/main.html https://kuler.adobe.com/