posts recentes

arquivos

tags

Sexta-feira, 30 de Março de 2012
#entrega_04 - especificação técnica

 

1. Arquitetura do sistema

Uma das componentes da especificação técnica diz respeito à arquitetura do sistema, onde são apresentadas as suas principais componentes, fundamentais para o seu bom funcionamento . A imagem seguinte representa gráficamente a arquitectura do sistema no projeto - UAW.

 arquitetura_sistema

Este projeto envolve, relativamente ao Hardware, um projetor, uma tela e o Kinect. A tela estará presente na reitoria, receberá a imagem enviada pelo projetor, sendo a partir deste suporte que o utilizador recebe o feedback da sua interação com a aplicação. O Kinect envia os dados que recolhe através dos gestos do utilizador para um computador, via USB. Este processa-os através da camada 1 e 2, representadas no esquema. Por fim, a aplicação representada na camada 3, em consonância com os dados obtidos, corre as funcionalidades implementadas. Esta está preparada para a gestão de conteúdos através da ligação a um servidor com uma base de dados.

Existem duas possibilidades para o desenvolvimento da aplicação: Flash ou WPF. Aproveitaremos a semana de interrupção letiva para experimentarmos as potencialidades de cada uma e então, decidirmos por qual optar para o desenvolvimento final do projeto.

Download da arquitetura do sistema - versão PDF

 

2. Mapa de navegação

Relativamente a esta componente, é necessário referir que a aplicação que pretendemos desenvolver não é de elevada complexidade/profundidade, uma vez que, por ser uma interface de interação natural, deverá ser simples e objetiva. Na maior parte das vezes, a primeira experência dos os utilizadores desta aplicação será, também, a única e por isso, a curva de aprendizagem de interação com a mesma deverá evoluir durante a sua primeira experência. Desta forma, o mapa de navegação que apresentamos reflete isso mesmo.

mapa navegação

Download do mapa de navegação - versão PDF

Enquanto inativa, a aplicação apresenta um screen saver. Assim que é detetado um utilizador e que este ativaatravés de um gesto pré-definido, é apresentado o ecrã principal, onde poderá optar pelas três grandes áreas: Aveiro, UA e UA antigamente. Relativamente às duas primeiras áreas, estas dão acesso a pontos de interessee e a jogos, sendo que nos pontos de interesse poderá aceder a uma galeria de fotografias, informações e "sabias que..." e nos jogos poderá jogar ou aceder às instruções.

No caso da UA Antigamente é apresentada uma timeline, onde está representada a história da universidade de aveiro por intervalos de 5 em 5 anos. Assim que o utilizador seleciona um destes anos, será mostrada informação relativa a esse periodo de tempo. Como é possível verificar, as setas apresentadas no esquema representam a possibilidade de avançar e retroceder nos diversos níveis. 

 

3. Principais gestos de interação

Pelos motivos que foram, anteriormente, referidos e de forma a simplificar a utilização deste novo paradigma, optamos por selecionar apenas dois tipos de interação: a navegação e a seleção. Sendo que a seleção é ativada após um determinado período de tempo, em que o utilizador fixa a mão.

 

4. Fluxogramas

Devido à natureza da nossa aplicação, os fluxogramas de maior importâcia que podemos apresentar inserem-se sobre a representação da lógica de funcionamento da seleção através do gesto. 

O primeiro fluxograma representa o ato de seleção - "point and wait"

fluxograma1

O segundo fluxograma desenvolvido é referente à navegação na galeira de fotografias e tem como total de fotografias, um número exemplificativo de 10. Neste caso, a lógica está preparada para a navegação esquerda mas facilmente, se transforma na navegação direita, alterando os valores.

fluxograma2

 

5. Base de dados

Incialmente, a aplicação não estava pensada para integrar um sistema de gestão de conteúdos. No entanto, pensou-se em implementar esta funcionalidade na mesma, construindo uma base de dados que permite adicionar e alterar conteúdo da aplicação, bem como recolher dados estatísticos da utilização da mesma, como por exemplo, número de visualizações de uma fotografia. 

BD_UAW

 

O estudo da especificação técnica permitiu-nos clarificar alguns dos conceitos até aqui pensados, assim como, estruturar técnicamente a forma como o projeto vai ser executado. Serve também para realizar a fundamentação teórica que é a espinha dorsal de todo o projeto.

 

6. Referências

http://cdn.oreilly.com/oreilly/booksamplers/9781449307073_sampler.pdf
http://instruse.sites.uol.com.br/automacao/figuras/fluxograma_2.jpg
http://www.youtube.com/watch?feature=player_embedded&v=RPbocvQ3Y9s

 Kean, S., J. Hall, et al. (2011). Meet the Kinect: An Introduction to Programming Natural User Interfaces, Apress




#entrega_04 - especificação gráfica

 

Para a realização da especificação gráfica e, em consequência do que foi referido no post anterior, foram realizados diversos estudos. Depois de definido o nome e de acordadas as linhas base, prosseguimos para a realização dos trabalhos que apresentamos em seguida.

Sendo que já tinhamos decidido que o nosso sistema cromático se iria aproximar ao da Universidade de Aveiro, surge então o primeiro desafio - a criação de uma marca para o projeto.

Para tal, foram realizados diversos estudos que passamos apresentar.

estudo_logo

A nossa escolha recai sobre o logotipo apresentado no canto superior esquerdo, por sermos adeptos da simplicidade e por acharmos que seria o que apresentava maior potencial. No manual de identidade encontram-se mais informações sobre o mesmo.

Depois de reunirmos algum material gráfico e antes de partirmos para a concretização do restante trabalho pedido para esta entrega, testámos esse mesmo material no formato em que este será, essencialmente, apresentado - projeção. Percebemos, assim, quais as limitações do mesmo, quer a nível cromático como a nível dimensional. 

Passamos apresentar o manual de identidade concebido para a nossa marca - UAW.

 


 

 

 Download Manual de identidade - versão PDF 


Outro aspeto que tivemos em conta, foram as dimensões e características do local onde vai ser efetuada a projeção. O seguinte esquema representa a "parede" que dará corpo à nossa aplicação.

dimensoes_parede

Tendo em conta as características da navegabilidade numa interface de interação natural, onde a sensibilidade do cursor controlado pelo gesto é, bastante, diferente do comum, foi necessário criar uma grelha que permitisse a inclusão de áreas de grande dimensão para a introdução das zonas interativas. Assim, depois de alguns testes chegámos à grelha representada no documento seguinte.

grelha

grelha2

 

Download da grelha - versão PDF


Como já foi referido anteriormente, o cursor passa a ter um papel fundamental neste tipo de aplicação, uma vez que é necessário dar ao utilizador um feedback bastante concreto e imediato relativamente às suas ações. Assim, nada mais obvio do que representar a mão do utilizador com um ícone de uma mão com uma cor e contorno que lhe conferem destaque para ser facilmente identificado.

cursor_mao

O cursor apresentado apenas terá dois estados: o normal e o de seleção, sendo que, encontramos duas soluções para a concretização do estado de seleção. 

Solução 1: A representação do tempo de seleção é representada por um circulo que se vai preenchendo com o passar do tempo.

cursor pensativo

 

Solução 2: Posteriormente, surgiu a ideia de aproveitar uma das áreas que compõe o layout que desenhamos como "barra de progresso" para ação seleção.

cursor_pensativo_2

 

Optaremos pela que se revelar mais eficiente aquando da realização dos primeiros testes da aplicação.

 

Relativamente ao layout dos ecrãs que compõe a aplicação, passamos a explicar, de forma sucinta, a funcionalidade dos principais componentes e a navegabilidade.

O logotipo inserido no canto superior esquerdo estará presente em todos os ecrãs, excepto no ecrã de galeria de fotografias e jogos, e possibilitará ao utilizador regressar para o ecra inicial, apresentado em seguida. O mesmo acontece com a barra de menu que contém as três áreas principais da aplicação: a cidade de aveiro, o campus universitário e a ua antigamente cronologia. Assim que o utilizador seleciona ou activa uma destas áreas, esta altera o seu aspeto, cobrindo-se de uma textura de linhas diagonais que serve para indicar ao utilizador em que área se encontra.

 

 

menu_logo

 

 

Assim que o utlizador avança um nível na aplicação, terá sempre a opção de "voltar" ao ponto anterior, através do botão voltar. Este botão quando selecionado altera a sua cor para verde, sendo assim o seu estado hover

 

botao_voltar

 

Na zona inferior à área de conteúdos, situa-se a feedbox, onde será apresentado o caminho que o utilizador está a percorrer na aplicação. A área que se encontra ativa está destacada do restante caminho pela cor branca.

 

feed_box

 

Com o intuito de simplificar a aprendizagem dos movimentos-chave da navegação da aplicação, optámos por manter sempre presente uma legenda/descrição dos gestos a utilizar. O gesto em execução aparece selecionado como ilustra a seguinte figura.

 

sistema_ajuda

 

Este ecrã é demonstrado assim que o utilizador ativa a aplicação, através de um gesto pré-definido. A frase apresentada será de incentivo ao uso deste tipo de aplicação. 

 

Este ecrã representa a forma como serão apresentados os diferentes pontos de interesse, neste caso relativamene ao campus. Cada fotografia funciona como botão de acesso à consola de opções para apresentação do respetivo conteúdo. Ao ser selecionada, a fotografia aparece focada e o nome do POI aparece na feedbox, tal como ilustra a figura.

ecra2

 

A imagem seguinte apresenta a consola referida anteriormente que tem as seguintes opções: galeria de fotografias, info, sabias que e permite regressar ao ecrã anterior.

consola_opçoes

 

Semelhante ao ecrã anterior, no entanto, a consola é relativa às opções dos jogos.

consola jogos

 

 

Em todos os ecrãs informativos será apresentado uma breve descrição, bem como contactos e outras informações mais relevantes.

info

 

Como já foi explicado na grelha, o ecrã da galeria de fotografias sofrerá de uma animação que possibilitará a expansão da área de conteúdos, com o objetivo de aumentar o tamanho da fotografia apresentada. As duas setas em cada uma das laterais - esquerda e direita - funcionam como botões de acesso à fotografia anterior/seguinte, respetivamente.

galeria_fotos

 

Recorreu-se à utilização de uma cronologia para elaborar o ecrã relativo à "ua antigamente", dividida por décadas que se desdobram em anos e que dão acesso aos conteúdos mais relevantes desse período.

timeline

 

 Download do layout - versão PDF

 

Ao realizar este estudo, percebemos a complexidade que envolve o desenho do layout para uma aplicação de interação natural, não só pelo paradigma de interação mas também, pelo formato de grande escala e neste caso, por se tratar de uma projeção. Estamos conscientes de que poderá surgir a necessidade de alterar algumas das componentes que aqui apresentamos mas vamos aguardar pelos testes de usabilidade para ver se existirá áreas criticas no que diz respeito à interação. 

Por fim, tivemos a oportunidade de experimentar a projeção de todo o material que aqui apresentamos e o resultado superou as expectativas.

 

Referências

http://abduzeedo.com/logo-design-feathers

http://abduzeedo.com/design-process-starting-design-project

http://www.logodesignlove.com/best-logo-design-resources

http://identitydesigned.com/odooproject/

http://www.thinkingwithtype.com/

http://hellohappy.org/beautiful-web-type/

http://webdesignledger.com/

http://www.google.com/webfonts

https://typekit.com/

http://kuler.adobe.com/



publicado por carlota-silva às 19:49
editado por joao-amorim em 12/04/2012 às 17:11
link do post | comentar | adicionar aos favoritos |

Quinta-feira, 29 de Março de 2012
#orientação_06

 

Como já tínhamos referido, realizou-se ontem dia 28 de março, a reunião semanal com o docente, onde contamos com a presença virtual do professor Raposo.

Apresentámos todo a material que tínhamos reunido para a próxima entrega e discutimos o mesmo. Corrigimos alguns erros e anotamos possíveis alterações a que devíamos submeter o nosso trabalho para o aumentar a sua qualidade.

É de referir as alterações relativas à base de dados, onde se  optimizou a sua prestação  e se aproveitou para explorar a possibilidade de recolher dados estatísticos da utilização da aplicação.

Também se realizaram algumas alterações na construção do manual de identidade gráfica, aumentando a sua coerencia com o projeto em desenvolvimento.




Terça-feira, 27 de Março de 2012
#118_07 - mudança de planos

 

"Mais vale tarde que nunca!"

Foi baseado neste lema que ganhamos coragem para alterar a metáfora gráfica e a estrutura base de toda a aplicação. Depois de muitas tentativas falhadas, chegamos à conclusão que o grafismo pensado não resultava e muito menos transparêcia o conceito que queriamos transmitir no nosso projeto.

Respiramos fundo, fechamos os portáteis e recomeçamos do zero. Em pouco tempo, surgiu um novo grafismo muito mais agradável e mais coerente com o que pretendiamos. Devido à motivação causada pelo impacto visual que este nos transmitia, os ecras foram-se formando com rapidez.

Apresentámos então, esta nossa nova ideia aos professores presentes na aula de projeto e mais tarde, ao orientador que se mostraram entuasiasmados.

Hoje, na aula de publicidade e marketing, obtivemos também a aprovação da professora Olinda, que nos deu umas dicas relativamente à construção do logo. 

Por motivos de logística, alterámos a reunião de segunda-feira para quarta-feira para que possamos apresentar o desenvolvimento da entrega de sexta-feira ao orientador e depois, proceder apenas às alterações que sejam necessárias.

Fiquem à espera!

 

 


tags: | |

publicado por carlota-silva às 23:56
editado por joao-amorim em 16/04/2012 às 09:16
link do post | comentar | adicionar aos favoritos |

#aula_06

 

No inicio da aula, foram-nos apresentados os objetivos inerentes à realização da especificação técnica. Enquanto os professores se encontravam a orientar o trabalho dos outros grupos, aproveitamos para finalizar a especificação gráfica.

Quando fomos auxiliados pelos docentes, apresentámos o trabalho desenvolvido até então e recebemos um feedback positivo. Seguimos algumas sugestões dadas pelo Professor Benjamin que já tinha trabalhado com a Kinect e por isso, conhecia algumas falhas do ambiente gráfico, relativamente à interação entre utilizador e sensor.

Analisamos o nosso projeto e percebemos quais as componentes a incluir na especificação técnica do mesmo. Começando, desde logo, a traçar o mapa de navegação e a esboçar a arquitectura do sistema. 


tags: | |

publicado por carlota-silva às 23:41
editado por filiperoque em 14/05/2012 às 11:30
link do post | comentar | adicionar aos favoritos |

Segunda-feira, 26 de Março de 2012
#118_06 - workshop Kinect

Na passada sexta-feira, dia 23, tivemos oportunidade de comparecer na aula dos alunos de Mestrado, onde decorreu um workshop orientado por Ivan Terra. Na parte da manhã, foi feita uma exposição teórica sobre a evolução e desempenho da Kinect e da sua aplicação em interfaces de interação natural. Esclareceu-nos algumas informações, com as quais já tinhamos tido contacto, quando realizámos o estado da arte.

No período da tarde, foi-nos lançado o desafio de adaptar um jogo simples ao uso da Kinect, o que foi bem sucedido :) lidámos com novos conceitos como Processing e a interface FAAST.

Em conversa com o Ivan, percebemos que utilizar o browser como motor da aplicação não será a melhor opção, uma vez que, o browser encrava com tanta troca de informação.




Segunda-feira, 19 de Março de 2012
#118_05 - estudo do nome do projeto

  

Inicialmente, concordámos em manter a proposta sugerida pelo orientador - UaWall - sendo este um nome com bastante potencial pois combina duas palavras que caraterizam bem este projecto.

Após a aula de hoje, onde nos foi lançado o desafio de repensar sobre o nome do nosso projeto, achamos por bem fazer um estudo sobre outras possibilidades de escolha.

Surgiram, assim, estas opções: 

A nossa decisão incide mais no nome UAW que é uma abreviatura de UaWall. Trata-se de uma opção simples e memorizável que, acima de tudo, suscita interesse e surpresa, será?

Gostaríamos de recolher algumas opiniões e por isso, não iremos explicar o porquê de "descartar" as outras opções, podendo assim, recolher uma apreciação imparcial.

 


tags: | |


#orientação_05

  

E aqui vai mais um sumário das reuniões de orientação...

Hoje começamos a reunião esclarecendo dúvidas relativas à avaliação, pois achamos relevante perceber quais os aspetos que deveriamos ter aprofundado de forma a conseguirmos realizar um melhor trabalho. Percebemos assim, que deveriamos ter feito um levantamento mais preciso em relação aos requisitos não funcionais, trabalho que será brevemente disponibilizado aqui no blog.

Numa segunda fase da reunião, abordamos conceitos relativos à aula de hoje - especificação gráfica.

Debatemos a possibilidade de mudança ou não, de nome. Optámos por lançar, aqui no blog, as ideias que temos e fazer a  recolha de algumas sugestões.
Falamos também, sobre algumas implicações a ter em conta no desenvolvimento de uma aplicação deste formato (projeção), nomeadamente, tamanhos,  proporções e cores.
Estando a aplicação a ser desenvolvida para a Universidade de Aveiro, achamos pertinente não nos afastarmos muito do que é a linguagem gráfica da mesma.




#aula_05

 

A aula de hoje esteve ao encargo dos docentes Ivo Fonseca e Pedro Amado. O professor Pedro Amado começou por apresentar as várias etapas que a especificação gráfica requer: estudos das soluções criativas-chave e estudos gráfico, cromático, tipográfico, de interfaces e de interação. Depois disso apresentou alguns exemplos de manuais de identidade gráfica de empresas conhecidas e forneceu uma série de hiperligações relativamente a cada uma das etapas anteriormente referenciadas. 

Quando o nosso grupo foi ter com os docentes, ainda não tínhamos material novo para apresentar, por isso estes sugeriram-nos que fizemos um brainstorming de forma a escolhermos conscientemente a melhor identidade para o nosso projecto. 




Sexta-feira, 16 de Março de 2012
#entrega_03 - demonstrador gráfico

 

A realização do demonstrador gráfico iniciou-se na aula quando apresentamos aos docentes um mockup exemplificativo das linhas base da aplicação. Seguimos depois com a realização e recolha dos materiais necessários para a montagem final do demo gráfico que se constitui pela junção de um stopmotion com um video. Estes ilustram as principais áreas de interação e os gestos a utilizar.
É de referir que o repotório videográfico relativo à apresentação da universidade de aveiro foi retirado do vídeo - 
campus4us.

 


Referências 

www.vimeo.com/25527359

Saffer, D. (2008). Designing Gestural Interfaces, O'REILLY



publicado por joao-amorim às 19:38
editado por carlota-silva em 19/03/2012 às 17:34
link do post | comentar | adicionar aos favoritos |

mais sobre nós

 

Junho 2012
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2

3
4
5
6
7
8
9

10
11
12
14
15
16

17
18
19
20
21
22
23

24
25
26
27
28
29
30