Projecto da Disciplina de Projecto 3º Ano NTC
pesquisar neste blog
posts recentes

Entrega final, wooo-hooooo!

Testes de Interacção dos Docentes e Usabilidade da Mesa

Entrega Versão Beta

testes versao beta

Actualização das funcionalidades DeCATouch

Lista de bugs protótipo (código, funcionalidades, layout)

Módulos a desenvolver na versão beta

Testes de Interacção dos Docentes

Protótipo de Alta Fidelidade agora com lente

Entrega de Protótipo de Alta Fidelidade

arquivos

Julho 2010

Junho 2010

Maio 2010

Abril 2010

Março 2010

Fevereiro 2010

Segunda-feira, 19 de Abril de 2010
Entrega da Especificação Técnica

1. Arquitectura do sistema

O sistema baseia-se em duas plataformas, sendo que uma se enquadra no âmbito web e a outra se define numa plataforma multitoque contruida pelo grupo.

Do lado da primeira, temos o site decatouch, programado sobre as linguagens de PHP, Javascript e base-de-dados em MySQL. Do lado do cliente multitoque temos um pc, ao qual estão ligados uma câmera Sony PS3 EyeToy e um projector de vídeo. A primeira dá ao CCV/Tbeta as informações de que este necessita, para posteriormente, em conjunção com o Actionscript e a biblioteca GestureWorks, se possa devolver um interface gráfico ao segundo dispositivo ligado a este pc.

A mesa propriamente dita funciona num setup LLP, em que se usam lasers infra-vermelhos (visíveis pela câmera) para identificar os eventos de toque, bem como uma superfície de projecção assente num painel de acrílico.

arquitectura do sistema decatouch

 

2. Mapa de Navegação

2.1. Área de backoffice
Uma vez que o projecto DecaTouch pressupõe o desenvolvimento de uma componente de backoffice e uma de front-end, torna-se necessário proceder à elaboração de dois mapas de navegação que permitam explicitar quais os "caminhos" que os diversos tipos de utilizador podem percorrer quer numa quer na outra componente.
Assim, e uma vez que na componente de backoffice existe a possibilidade de se registarem acessos de três tipos de utilizadores distintos, sentiu-se a necessidade de distinguir (através, na imagem apresentada, da cor) quatro conjunto de operações (sendo que três delas corresponderão aos três utilizadores já referidos - aluno, professor e administrador - correspondendo o quarto conjunto de operações, àquelas que são comuns a estes mesmos utilizadores.
Desta forma, as três funcionalidades identificadas com a cor vermelha (página inicial, log in e registo), que têm associadas outras tantas páginas, são aquelas que são comuns a todos os utilizadores que terão acesso à área de backoffice, uma vez que todos eles terão que efectuar um registo e, posteriormente, o log in.
Já a área identificada com a cor amarela (cujas funcionalidades são comuns aos utilizadores aluno e professor) tem, na sua origem, a possibilidade de interagir com os trabalhos da sua autoria (podendo, em relação a estes, introduzir, editar e activar/desactivar) e, caso tenha comentários por aprovar, surgirá também a opção de os aprovar ou reprovar.
Por outro lado, as funcionalidades identificadas com a cor azul (validar trabalhos dos seus alunos e activar/desactivar trabalhos) são especificamente dirigidas para o utilizador professor.
Por fim, com acesso a todos os trabalhos e com a possibilidade de os remover, há, identificadas a verde, as operações próprias do utilizador administrador.

mapa de navegação da backoffice
2.2 Front-End

No que diz respeito a esta área de front-end, e uma vez que só haverá um tipo de utilizador, o mapa de navegação apresentado é aquele com o qual o utilizador comum (ou utilizadores, uma vez que existe a possibilidade de ser multi-utilizador) se irá deparar. Assim, a área inicial contendo informação relevante do campus, estará disponível  sempre que a mesa esteja inactiva por um determinado tempo. Daí e, após o utilizador ter efectuado o gesto circular que permita o avanço da aplicação, o utilizador terá duas opções disponíveis: filtrar os trabalhos por curso ou aceder ao mapa do campus, sendo que nesta última opção, o utilizador ficará limitado à interacção com o mapa (acções de alterar a escala, a rotação e local).
Se optar pela visualização de trabalhos (através do filtro) o utilizador poderá optar pela sua disposição de em modo scroll (trabalhos em fila) ou em modo shuffle (trabalhos espalhados).
Em qualquer um destes modo é permitido ao utilizador (ou utilizadores) interagir com o(s) trabalho(s) procedendo à sua rotação, escalonamento e posicionamento. Uma vez que a imagem atinja uma certa dimensão, continua a ser possível efectuar essas operações (até um certo limite), surgindo os botões do menu que permite, numa primeira fase, "fechar" ou "virar" a imagem. Caso o utilizador opte por "virar" a imagem, torna-se possível efectuar quatro operações: voltar a "virar" a imagem, visualizar os comentários já efectuados ao trabalho, enviar o presente trabalho para o mail e comentar o trabalho.

mapa de navegação do front-end decatouch

3. Fluxogramas de funcionalidades relevantes

3.1 Backoffice

Foram efectuados fluxogramas para explicitar as principais funcionalidades dos dois diferentes componentes: assim, para o backoffice, há uma verificação sobre o facto do utilizador se tratar de um administrador ou não. Caso seja, surgirá um link que lhe possibilite a eliminação de trabalhos. Por outro lado, caso não se esteja perante um administrador, surge a possibilidade de inserção de trabalhos e de aprovação de comentários. Finalmente, e caso o utilizador seja um professor, surge o link para a validação de trabalhos. 

fluxograma 01 decatouch

O fluxograma seguinte representa as diferentes possibilidades que se apresentam ao utilizador (aluno ou professor) perante a intenção de colocar um trabalho na base de dados: desta forma, dependendo da escolha de uma das diferentes opções (trabalho interactivo,música, imagem, web, escrito ou vídeo), surgirá um formulário adaptado com áreas adaptadas para o efeito.  

tipos de trabalhos decatouch


3.2 Front-end

No que diz respeito aos fluxogramas referentes ao front-end, optou-se por apresentar o fluxograma da interacção inicial. A um eventual toque na superfície da mesa, importa distinguir o facto de, esse toque, constituir,ou não, um círculo (uma vez que a entrada do menu de boas-vindas está dependende da realização desse mesmo círculo por parte dos utilizadores). Deste modo, e caso não se esteja perante o referido círculo, é mostrada a informação de ajuda que informa o utilizador da necessidade de efectuar o gesto correcto para que surja o menu.

interacção inicial decatouch fluxograma

Também aquando da visualização e perante o escalamento de um trabalho importa saber se a dimensão do mesmo já ultrapassou um valor previamente estipulado. Caso ainda não tenha atingido esse valor, o trabalho passa a apresentar-se com a dimensão a que o utilizador o colocou sendo que, caso o valor pré-definido seja atingido, o trabalho entra na sua fase pormenorizada, mostrando as etiquetas reperentes aos mais conteúdos referentes a este mesmo trabalho.

fluxo resize decatouch

 

A partir do menu principal, o utilizador tem três áreas disponíveis: caso escolha a área home,a aplicação retornará ao menu principal, caso opte pela área campus ser-lhe-á mostrado o campus da UA e caso se decida pela área de trabalhos, surgirá, posteriormente, a opção de escolher um filtro. Conforme o filtro escolhido, representando os cursos de Design, Música, NTC e outros (Mestrado e Doutoramentos) serão, por defeito, apresentados os trabalhos organizados no modo scroll (em fila). Caso o utilizador opte por alterar a forma de apresentação dos trabalhos, estes passarão a dispor-se no modo shuffle (desorganizados), área na qual o utilizador pode optar por voltar a mudar a organização dos trabalhos, retornando ao modo scroll.

fluxo de filtros e disposição de trabalhos decatouch


4. Base de dados
O ponto de ligação entre a componente de backoffice e a área de front-end do projecto DecaTouch será o conjunto de trabalhos que serão colocados, através do upload de ficheiros efectuado no backoffice, pelos utilizadores identificados no ponto anterior e acedidos por um utilizador de tipologia única na área de front-end, a mesa multitoque. Essa base de dados terá como elemento central a entidade "trabalhos" pois tudo girará em torno desta quer numa componente quer na outra. Uma vez que, uma base de dados, pressupõe, por norma, que os dados que a compõem estejam agrupados de forma lógica, é a partir das várias possibilidades de agrupamento de dados,que se formam as restantes tabelas da mesma.
Assim, a possibilidade de os trabalhos se agruparem através do seu tipo (imagem, texto, vídeo, por exemplo) dá origem à tabela "tipostrabalho", da mesma forma que a tabela "curso", responde à possibilidade dos trabalhos se poderem agrupar pelos diferentes cursos do Departamento (Design, Música e NTC), havendo, igualmente, uma tabela destinada a organizar os comentários que sejam efectuados aos diferentes trabalhos.
Uma vez que cada curso tem diferentes unidades curriculares e que,cada uma delas pode ser responsável pela publicação de vários trabalhos, houve a necessidade de se criar uma tabela para as diferentes unidades curriculares e uma outra, de relação entre essas mesmas unidades curriculares e os trabalhos, que contenha a especificação de cada um dos trabalhos.
Por fim, no que diz respeito aos utilizadores, e uma vez existem os diferentes tipos já identificados, foi necessário criar uma tabela especificamente para o tipo de utilizador, uma para todas os utilizadores e uma outra que relacione as unidades curriculares e os utilizadores, identificando unívocamente cada um deles.

modelo base de dados decatouch


tags:

publicado por samueltraquina às 23:37
1

Entrega da Especificação Gráfica

Apresenta-se, em seguida, a proposta gráfica para o projecto DeCATouch:


Interface da Aplicação

[Home] - Este será o ecrã inicial (home) que serve de entrada na plataforma e para o qual a aplicação será enviada depois de algum tempo de inactividade. Neste, podemos visualizar informações referentes a actividades do Campus da UA (ex: almoço da cantina, senha actual dos SAC...)

Home

[Home]- Quando existir algum tipo de actividade por parte do utilizador, é-lhe pedido que desenhe um círculo de modo a entrar na plataforma
Entrada Info

[Home] - Uma vez desenhado o círculo, o utilizador é presenteado com um ecrã de boas-vindas e um menu geral da plataforma com as áreas de interacção disponíveis (Home, Portefólios, Mapa do Campus).

Este menu, depois de recolhido, pode, a qualquer momento, ser chamado através do gesto circular ou através da técnica de arrasto sobre o mesmo.

 Bem Vindo

[Portefólios] - Quando o utilizador entra na área de Portefólios é-lhe dada a opção de filtrar os conteúdos respectivos (NTC, Design, Música, Outros)

Portefólios - Filtros

[Portefólios][Scroll]- Uma vez na área de Portefólios, é possível ao utilizador alternar entre dois modos de visualização, scroll e shuffle, podendo o utilizador alternar entre estes a qualquer momento através do ícone no canto inferior esquerdo. Começando por explicar o modo scroll: aqui ao utilizador é apresentado, ao longo de uma linha temporal, os vários trabalhos disponíveis para visualização, podendo este arrastar a linha temporal para a esquerda ou para a direita.

Portefólios - Scroll

[Portefólios][Scroll] - Ao executar um double tab numa das pré-visualizações acima mencionadas, é mostrado ao utilizador o trabalho com mais detalhe (podendo estar no máximo 2 trabalhos a serem visualizados ao mesmo tempo) e o scroll que contém as pré-visualizações passa para segundo plano. O recipiente que contém o projecto tem 2 estados, um primeiro onde é possível ver as informações relativas ao mesmo, onde são disponibilizadas 2 acções (através do uso dos botões e/ou gestos que activem o mesmo evento) a de fechar o projecto e a de "virar" o projecto.

Caso o utilizador "vire" o projecto são-lhe mostrados os comentários efectuados ao mesmo e ficam disponíveis mais 2 acções, a de inserir um comentário no projecto e a de enviar o projecto para um e-mail.

[Portefólios][Scroll]- View

[Portefólios][Scroll] - Caso o utilizador decida comentar ou enviar o projecto é-lhe disponibilizado um teclado virtual acompanhado de um formulário para a acção pretendida.[Portefólios][Scroll] - Form

[Portefólios][Shuffle] - O modo Shuffle tem as mesmas acções base para cada trabalho, sendo que, no entanto, os projectos se apresentam misturados e independentes uns dos outros, sendo a cada um destes permitido alterar a escala, posição e rotação dos mesmos.

[Portefólios][Shuffle]

[Portefólios][Shuffle] - Neste modo, quando um trabalho atinge uma certa escala, são apresentadas ao utilizador as mesmas acções disponíveis no modo Scroll

[Portefólios][Shuffle] - View

[Portefólios][Shuffle] - Tal como acontece no modo Scroll, quando o utilizador decide comentar ou enviar um projecto por e-mail é-lhe apresentado um teclado virtual acompanhado de um formulário para executar a acção pretendida.

[Portefólios][Shuffle] - Form

[Mapa Campus Ua] - Na área do mapa do Campus é permitido ao utilizador navegar na mesma usando gestos que permitem a rotação, escala, ou arrasto
[Mapa Campus] 

 

Biblioteca de ícones e controlos:

Relativamente à biblioteca de ícones tentámos dar forma gráfica às diversas acções que podem ser efectuadas na aplicação. Temos a destacar o menu principal onde foram usados 3 ícones associados à navegação principal, que são respectivamente o "home" que está associado ao estado inicial da aplicação, o segundo é o icone de projectos que está associado ao logo da UA, pois corresponde à área onde se encontram os projectos do departamento e o último icone é onde se encontra o mapa do campus.

Quanto às acções disponíveis na visualização dos projectos, temos pela seguinte ordem os ícones, de fechar projecto, o "virar" projecto, inserir comentário e enviar o projecto.

Há ainda a referir que temos dois estados de ícone que que se encontram presentes no canto inferior esquerdo, que correspondem ao modo de organização dos projectos na área de portefolio.

Opções Tipográficas:

Optou-se por escolher uma fonte não serifada pois estas encaixam esteticamente no layout do projecto, por serem mais modernas e uma vez que também não temos grandes manchas de texto que obriguem o utilizador  a uma grande capacidade de concentração. Depois de algumas pesquisas e testes efectuados com fontes não serifadas, escolhemos a font DIN no seu formato regular e medium.

Estudos de cor:

Quanto às cores escolhidas, optámos por nos basear no verde da UA, tanto para a aplicação como para o backoffice. No entanto, usámos um tom mais jovial e moderno. Optámos também por usar cores escuras como base da aplicação, de modo a que haja grande contraste entre os conteúdos. Escolhemos também os tons escuros para que a imagem projectada funcione melhor sobre o rosco (tela de projecção). 

 

Estudos de lógotipo:

No que diz respeito aos estudos de lógotipo optamos por associar o nosso produto à imagem da UA e não optar por nenhum logotipo, apesar disso fizemos alguns estudos que se encontram ilustrados na figura em baixo.

Backoffice

 

[Main] - O layout do backoffice segue uma estrutura geral de Header e Footer com duas colunas de tamanho fixo. Optou-se por esta disposição por ser simples e intuitiva permitindo aos utilizadores prestarem mais atenção à área de notificações quando entram na aplicação. O Login, LogOut e Registo estarão ao topo direito alinhados com o extremo das restantes áreas, de largura total de 960 pixeis. As colunas medem 250 e 690 pixeis sendo a mais pequena a da esquerda, já referida anteriormente como contendo as notificações. A área de maiores dimensões será, no fundo, onde toda a exibição de conteúdo aparecerá, ao longo de todas as áreas do backoffice, sendo que, na página principal tem os trabalhos publicados pelo utilizador, seguindo o mesmo esquema como outras listas de trabalhos. O Header contém, ao fundo, o menu principal que irá variar consoante o tipo de utilizador, representou-se, aqui o do professor por ser aquele que mais opções terá neste aspecto. No footer teremos links para áreas úteis para os utilizadores da plataforma web do decatouch, ou seja, outros serviços da UA.

 

Backoffice - Main

[Inserir] - No layout seguinte que pode representar a área de edição e inserção dos trabalhos, pode verificar-se, mais uma vez, a mesma estrutura referida anteriormente, sendo que o footer se ajusta à altura do site ficando sempre a uma distância mínima de 20 pixeis do topo da área anterior.

Backoffice Inserir Projecto

[Validar] - No écran de visualização do trabalho para validação pode dizer-se que a descrição do mesmo, bem como o seu autor, as unidades curriculares que o publicador preencheu e links para download do ficheiro do trabalho se encontram no espaço restante a 400 pixeis (definidos como a largura máxima da imagem).

Backoffice Validar Trabalho

 

Biblioteca de ícones e controlos:

Na imagem podem ver-se os diversos tipos de links e ícones presentes no backoffice decatouch tanto no seu estado inicial como em hover (nos que são passíveis de ser clicados), bem como uma breve descrição das características gerais de alguns pormenores do layout. Neste aspecto podemos referir ainda a tentativa de identificação da função dos ícones com os desenhos neles contidos, sendo que o mais complexo neste aspecto foram os ícones de identificação dos tipos de trabalho, da esquerda para a direita, respectivamente: interactivo, música, vídeo, escrito, imagem e web. 

Backoffice Biblioteca de Icons

 


tags: , , ,

publicado por dinisadriano às 23:24
4

Oitava reunião de orientação

Aos doze dias do mês de Abril de dois mil e dez, pelas catorze horas e trinta minutos, realizou-se na Universidade de Aveiro, no Departamento de Comunicação e Arte, mais precisamente na sala dos laboratórios, “21.2.1”, a reunião de orientação semanal do projecto Decatouch, em sessão ordinária, presidida pelo professor Nuno Ribeiro (Professor proponente e orientador do projecto) e secretariada pelos Capitães Mhytra, com a seguinte Ordem de Trabalhos:

1º. - Verificação do trabalho realizado, respectivo à quarta entrega, especificação gráfica;

No início da sessão, antes do ponto único da ordem de trabalhos, foi lida e aprovada por unanimidade a acta resultante da reunião anterior.

Relativamente ao ponto único da reunião, foram analisadas as duas propostas apresentadas pelo grupo para a componente de front-end, sendo que, numa delas, sobressaía uma apresentação gráfica mais rígida em que os conteúdos estariam sempre em posições da mesa pré-definidas e, uma outra em que, pelo contrário, predominava uma exposição desorganizada dos trabalhos, em que, num primeiro momento, esses mesmos trabalhos se encontrariam sobrepostos de forma aleatória e numa determinada localização, podendo, posteriormente e conforme a interacção por parte do utilizador, ser colocados numa qualquer posição da mesa.   

Após alguma ponderação, optou-se por uma solução que conjugasse essas duas vertentes cabendo ao utilizador optar, a cada momento da interacção, pela solução que mais lhe agradar.

Ainda no que concerne à especificação gráfica, foram reforçadas as ideias, que já haviam sido avançadas nas aulas destinadas a esta componente, da importância que os ícones teriam nesta aplicação, no que diz respeito ao seu tamanho, posição e intuitividade que garantam, por um lado, uma coerência visual à aplicação e, por outro lado, um uso o mais correcto possivel por parte dos futuros utilizadores.

Sem mais nada a tratar foi dada por terminada a sessão.

Os elementos do grupo:
Dinis Simões
Francisco Baião
Rui Silva
Samuel Traquina


tags: , , ,

publicado por fjsbaiao às 18:30

Sétima reunião de orientação

Aos nove dias do mês de Abril de dois mil e dez, pelas catorze horas e trinta minutos, realizou-se na Universidade de Aveiro, no Departamento de Comunicação e Arte, mais precisamente na sala dos laboratórios, “21.2.1”, a reunião de orientação semanal do projecto Decatouch, em sessão ordinária, que esta semana, em virtude de não ter havido aulas na segunda-feira 5 de Abril, foi transferida para a sexta-feira, presidida pelo professor Nuno Ribeiro (Professor proponente e orientador do projecto) e secretariada pelos Capitães Mhytra, com a seguinte Ordem de Trabalhos:

1º. - Verificação do trabalho realizado, respectivo à quarta entrega, especificação funcional e técnica;

2º. - Considerações sobre a nova biblioteca GestureWorks;

3º. - Novas orientações sobre a interacção entre ipod e Flosc usando a biblioteca GestrureWorks;

No início da sessão, antes do primeiro ponto da ordem de trabalhos, foi lida e aprovada por unanimidade a acta resultante da reunião anterior e foi analisada a avaliação relativa à terceira entrega.

Relativamente ao primeiro ponto, foi analisado o trabalho já efectuado até à data, nomeadamente no que diz respeito ao desenvolvimento do modelo/arquitectura do sistema, ao mapa de navegação, aos fluxogramas detalhados das funções principais e ao modelo da base de dados.Verificado o trabalho já efectuado, procedeu-se a uma primeira perspectiva da especificação gráfica do projecto.

Tomando em conta essas informações e passando para o segundo ponto da ordem de trabalhos, o coordenador informou o grupo sobre a nova biblioteca GestureWorks e ficou-se com a expectativa que o breve lançamento do pacote CS5, com a consequente disponibilização do FlashPlayer 10.1 traga a integração com a referida GestureWorks.

No que diz respeito ao terceiro ponto, e uma vez que no dia 12 de Abril o grupo de alunos apresentou o Plano de Marketing do projecto na disciplina de Publicidade e Marketing, procederam-se a novas investigações e testes que resultaram numa melhor interacção entre o ipod e o Flosc, usando a biblioteca GestureWorks, com o intuito de, na referida apresentação do trabalho, se recorrer a essa interacção permitindo, por um lado, simular algumas das funcionalidades que o projecto vai apresentar e, por outro lado, facultar aos elementos que assistiram à apresentação uma experiência com algumas semelhanças com aquelas que a plataforma DecaTouch lhes irá proporcionar.

Para finalizar a sessão foram dadas mais algumas luzes, para a racionalização de recursos de programação em Flex com Actionscript 3.

Sem mais nada a tratar foi dada por terminada a sessão.

Os elementos do grupo:

Dinis Simões

Francisco Baião

Rui Silva

Samuel Traquina


tags:

publicado por samueltraquina às 16:37

Terça-feira, 13 de Abril de 2010
Experência Multitouch na apresentação do trabalho de marketing

Na segunda feira, dia 12 de Abril, o grupo utilizou alguns dos conhecimentos já adquiridos até ao momento para a apresentação de um trabalho para a unidade curricular de Publicidade e Marketing.

O trabalho consistia na apresentação de um plano estratégico de marketing para o projecto Decatouch, tendo-se pensado, inicialmente, em utilizar o iPod para exemplicar a aplicação de interfaces multitoque, com base nos testes e experiências efectuados anteriormente.


Essa apresentação foi efectuada com recurso à biblioteca do GestureWorks criando um exemplo de uma aplicação que incluia algumas funcionalidades multitoque com imagens e o software Flosc para fazer a comunicação com o iPod. 

 

Posteriormente, surgiu também a ideia de fazer a apresentação utilizando o iPod para interagir com cada um dos slides do conteúdo da mesma. Esta aplicação com os slides foi também desenvolvida em Flash com interface multitouch, em que o iPod, conectado através de uma rede wireless ao pc onde se encontrava a aplicação, interagia com a mesma. Desta forma, permitiu que alguns dos presentes pudessem visualizar algum do trabalho desenvolvido pelo grupo, assim como interagir com a apresentação preparada para o efeito, efectuando, nomeadamente, alguns movimentos de rotação, escalamento e movimentação das imagens que se encontravam disponíveis.

Pode se concluir que foi uma experiência positiva.

 

 

Os elementos do grupo:
Dinis Simões
Francisco Baião
Rui Silva
Samuel Traquina


tags:

publicado por rui-miguel às 16:07

mais sobre mim
Julho 2010
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2
3

4
5
6
7
8
9
10

11
13
14
15
16
17

18
19
20
21
22
23
24

25
26
27
28
29
30
31


tags

todas as tags

subscrever feeds

RSSPosts

RSSComentários