Descrição demo técnica

Na demo técnica, mostramos os vários tipos de interações feitas pelo utilizador. Criámos interfaces da aplicação para três dispositivos móveis diferentes: iPhone, Blackberry e Nokia 6086, com as resoluções 960x640px, 480x360px e 128x160px, respetivamente.  Optámos por diferenciar resoluções para que um público mais abrangente tenha acesso à aplicação. Na interface inicial, a de login (com respetivas validações se é um utilizador registado e se não deixou os campos em branco), está presente um campo para introduzir o número de telefone do utilizador, para que este possa entrar na aplicação .

Para além da interface de login da aplicação para dispositivos móveis, fizemos a página Web para o login do monitor presente no espaço PlaySafe, responsável pelas crianças. Nesta página, poderão ser executadas três ações diferentes: o login e logout, o registo de uma criança, a procura de um registo e o checkout de uma criança. Para que estas ações sejam efetuadas com sucesso e para que os dados sejam guardados, criámos uma base de dados no MySQL Workbench.

A base de dados criada é sintética, possuindo apenas cinco tabelas. As tabelas são as seguintes:

·       “CRIANCA”, referente à informação das crianças, que guarda informação sobre o nome da criança e o parente responsável pela mesma;

·       “RESPONSAVEL”, referente à informação do pai/responsável da criança, possui tanto o nome como o seu número de telefone. Esta tabela é bastante importante por causa do contacto, no caso da ocorrência de alguma anomalia com a criança e para poder fazer login na aplicação web para mobile;

·       “MONITOR”, guarda os dados do monitor responsável pelo espaço (login e password) para efectuar o login de forma a ter controlo sobre o registo dos pais/responsáveis;

·       “PULSEIRA”, guarda o número da pulseira, o id Bluetooth, bem como o estado da pulseira. O estado da pulseira é fundamental pois permite que se possa saber se está a ser utilizada ou não. Quanto ao id Bluetooth, é essencial para saber a localização da criança correspondente;

·       “UTILIZACAO”, é fundamental pois relaciona a criança com a pulseira correspondente e armazena ainda a data de início e de fim de cada utilização. Este último campo é muito importante pois a partir do momento em que se inserir a data de fim coloca-se tanto o estado da criança como o da pulseira, como o do pai/responsável, inativo.

Realizámos ainda uma pequena aplicação Flash para testar na mesa touch. Programámos o gesto drag para o objeto interativo criado por nós. Apesar de toda a programação para a interação gestual estar correta, apenas conseguimos demonstrar na mesa utilizando o rato. Pensamos que o problema está em ter que declarar o objeto criado como elemento touch passível de ser movido.

Demo Técnica:

Em baixo estão apresentados alguns dos ecrãs construídos e testes realizados.

Ecrã de Login na página do monitor do espaço PlaySafe:

Área PlaySafe desktop:

Área PlaySafe mobile (Parte1):

Área PlaySafe mobile (Parte2):

Hello World - Gesture Works:

Base de dados: 

 A fim de cumprir com os objetivos da terceira entrega, disponibilizamos a demo gráfica e a demo técnica, respetivamente, cada  um deles com um texto descritivo sobre as mesmas.

Descrição demo gráfica

Inicialmente é mostrada a chegada de uma criança à superfície touch, com a pulseira bluetooth no pulso ( pulseira PlaySafe). A interação com a aplicação começa.

Quando o utilizador clica em “jogar” e após esta ação, são disponibilizadas três opções de jogos, das quais o utilizador terá de escolher uma. Ao escolher o jogo, e antes de o iniciar, é mostrada uma demo que funciona com sistema de ajuda para que o utilizador entenda qual o objetivo do jogo e como deve interagir enquanto joga.

O sistema de ajuda mostra ao utilizador que este é uma personagem principal - um gato. Mostra também que o jogo tem dois elementos importantes a que o utilizador deve ter em atenção: as vidas e os pontos, inicialmente com zero pontos e três vidas.  O sistema de ajuda exemplifica novamente  que para ganhar pontos, o utilizador – gato – terá de apanhar o maior número de peixes que vão aparecendo no ecrã e terá de se afastar dos tubarões – personagens que retiram vidas à personagem principal. Depois de visualizar todas as ações mostradas pelo sistema de ajuda, o utilizador inicia o jogo.  

Numa segunda parte, é mostrada a ação do login num dispositivo móvel, efetuado pelos pais/responsáveis pelas crianças, situados dentro do centro comercial. O login consiste em introduzir o número de telefone do pai/responsável num campo reservado para esse efeito. É colocado o número e efetuado o login. Após esta ação, o utilizador interage com a aplicação para dispositivos móveis e controla/visualiza  todo o espaço envolvente do PlaySafe. Ao ter acesso à aplicação, visualiza os vídeos que são transmitidos em live streaming do espaço e também as fotografias do mesmo.

O utilizador muda o ângulo de visualização do espaço, através de três opções disponibilizadas no canto superior direito da aplicação, que representam os diferentes ângulos de transmissão de vídeo. Esses vídeos são visualizados num espaço reservado para a sua visualização. Este espaço também é utilizado para a visualização das fotografias. O utilizador pode colocar em pausa a transmissão de vídeo da aplicação. As fotografias são atualizadas de x em x tempo e o utilizador, ao visualiza-las, para automaticamente o vídeo. Após esta interação, é mostrada a saída da criança do espaço de cobertura bluetooth do PlaySafe  e, após a sua saída, é automaticamente recebido um alerta via SMS no dispositivo móvel do responsável, alertando-o do surgimento de uma anomalia com a criança.