INTRODUÇÃO

Relativamente à especificação gráfica, criámos um manual de identidade onde abordámos todas as criações e evoluções para a criação do logótipo do nosso projeto, escolha de cores, ou seja, toda a imagem visual da marca “binca”.

Quanto à especificação técnica, demonstramos a arquitetura e mapa de navegação do projeto “binca”, para além da base de dados e de alguns fluxogramas – das funcionalidades mais importantes.

CONCLUSÃO

Com a realização da especificação gráfica foi possível criarmos toda a imagem visual da marca, assim como o nome do projeto.

Sentimo-nos realizadas com o trabalho feito pois, na nossa perspectiva conseguimos criar um logótipo e um nome adequado ao projeto, que é facilmente compreendido e aceite pelo nosso público alvo, encontrar cores que representem os valores que queremos transmitir – segurança, confiança e diversão (principalmente) e criar interfaces simples e coerentes.

Quanto à especificação técnica, após a sua realização, que passou pela criação de fluxogramas, arquitetura de sistema, mapa de navegação e base de dados, consideramos que nos ajudou bastante ma definição de alguns aspetos do projeto: os fluxogramas permitiram-nos ter uma melhor noção dos algoritmos a implementar e assim ajudar-nos na sua realização futura; a arquitetura permitiu-nos  compreender melhor o projeto de uma forma global; a base de dados permitiu uma nova análise ao projeto, levando-nos a apercebermo-nos de problemáticas até então não descobertas; por fim, o mapa de navegação fez com que percebêssemos quais os ecrãs em questão e fez com que pudéssemos organizar melhor toda a informação a nível de interfaces.

Aqui estão então os ficheiros da entrega 4:

Especificação Técnica - especificacaoTecnica.pdf

Desenvolvido por: Ana Rita Neves, Ana Sofia Moutinho, Filipa Batista

Orientado por: Telmo Silva

Disciplina de Projeto

DeCA, Universidade de Aveiro

Especificação Gráfica parte 1 - Especificacao_Grafica_-_Parte_1.pdf

Especificação Gráfica parte 2 - Especificacao_Grafica_-_Parte2.pdf

Desenvolvido por: Ana Rita Neves, Ana Sofia Moutinho, Filipa Batista

Orientado por: Telmo Silva

Disciplina de Projeto

DeCA, Universidade de Aveiro

NOTA: Por motivos da dimensão do ficheiro da especificação gráfica, foi necessário dividir em duas partes

Durante esta reunião, os temas discutidos incidiram principalmente nos documentos a desenvolver para a próxima entrega: especificação gráfica e especificação técnica.

Começámos por analisar a arquitetura do sistema, principalmente a parte relativa ao sistema de SMS e ao streaming de vídeo, uma vez que nestas áreas ainda restavam algumas dúvidas do seu funcionamento concreto. De seguida analisámos o mapa de navegação, pois como a sua estrutura é muito simples (devido à natureza do nosso projeto) queríamos garantir que estava imaculado. Por fim, ainda relativamente à especificação técnica, discutimos quais os fluxogramas a desenvolver e optámos por especificar o funcionamento do sistema de login, do temporizador do jogo e da monitorização de Bluetooth em conjunto com o sistema SMS.

Continuando agora para os documentos de especificação gráfica, foi discutida a estrutura de algumas interfaces, face ao tipo de letra e ao alinhamento de alguns elementos principais, principalmente relativamente às interfaces para dispositivos móveis.

Por fim, como referido no post #investigação10, já conseguimos ultrapassar o obstáculo da incompatibilidade tecnológica e assim por uma aplicação flash a correr na mesa touch corretamente, permitindo assim a interação touch com a mesma.

Objectivos para a próxima reunião:

-     Continuar o desenvolvimento da aplicação para a mesa touch;

-   Começar a tentar compreender melhor o funcionamento do sistema SMS, de uma perspectiva mais prática;

-   Começar o design para a aplicação touch.

O nome que propusemos inicialmente para a nossa marca era PlaySafe. Sugeria segurança, divertimento e entretenimento.  Embora sejam estes os valores que queremos passar para o exterior, é um nome numa língua estrangeira e poderia não ser bem entendido tanto pelo publico alvo principal  - as crianças – com para os pais/responsáveis destas.

Assim, na tentativa de encontrar um  nome adequado para o projeto em português, depois de várias pesquisas e experiências, finalmente encontrámos um que achámos que se adequa ao projeto : binca – Segurança + Entretenimento.

Na nossa perspetiva, o nome escolhido resulta bem tanto foneticamente como graficamente. Inicialmente pensámos em colocar apenas a palavra brinca, mas sendo este um nome muito comum, optou-se por retirar o “r”, ficando apenas “binca”. A palavra sofreu esta mutação porque associámos que crianças de 4 a 5 anos têm alguma dificuldade em dizer a letra “r”, sendo então mais aconselhado retirar a letra “r” e tornar o nome do projeto mais familiar e mais fácil de pronunciar para crianças desta idade.

Quanto às cores utilizadas, com o estudo que foi feito anteriormente sobre os valores que estão associados às cores, concluímos que as cores adequadas para o projeto seria o verde, roxo, amarelo e salmão, pois transmitiam principalmente entusiasmo, felicidade e segurança. Após o início do esboço gráfico do logótipo, embora as cores que transmitiam os valores que pretendíamos  - felicidade, entusiasmo e segurança – optámos por escolher três cores principais - azul, salmão e amarelo.  Estas cores não se afastam significativamente das cores escolhidas inicialmente – verde, roxo, amarelo e salmão – nem do valores que pretendemos transmitir com estas . Optámos por substituir o roxo pelo azul, pois no gráfico do post de #investigação09, o azul demonstra níveis de entusiasmo mais elevados do que o roxo. Assim, restou-nos o salmão, amarelo, verde e azul. Mesmo assim, achámos que utilizar quatro cores iria ser uma elevada gama de cores para um logótipo e então, optámos por substituir o verde pelo azul, pois segundo o significado das cores, o azul é uma cor de bem estar e de confiança. Também simboliza calma, ternura, sonho, tranquilidade, raciocínio lógico, paz de espirito e segurança [1]. Ainda, segundo o livro “Psicologia das Cores” [2], o azul é considerado a cor preferida da maior parte dos indivíduos (sendo que, do estudo efetuado pela autora, apenas 1% dos homens e 2% das mulheres afirmam ser esta a cor que menos preferem), a cor da harmonia, da fidelidade, da amizade, da confiança e da simpatia, sendo ainda associado à fantasia (na Alemanha, as histórias inventadas eram denominadas “contos azuis”).

Logo + cores utilizadas

[1] SignificadoDasCores.com.br (2012). "Significado do Azul." Retrieved 28.03.2012, from http://www.significadodascores.com.br/significado-do-azul.php.

[2] Heller, E. (2009). A psicologia das cores. Barcelona, Editorial Gustavo gili.

 Aleluia! A mesa já funciona! Vem bincar connosco :)

Após muito esforço conseguimos colocar a aplicação flash adaptada por nós a funcionar. O problema, como referido anteriormente como possível causa, era uma falha de comunicação entre o CCV (Community Core Vision), o tuio e a aplicação Flash. A última versão do gestureworks, gestureworks 3 não tem compatibilidade com o CCV, pelo que, em vez de utilizarmos a biblioteca de gestos do gestureworks e de enviarmos os dados do CCV através de tuio para flash, temos que utilizar uma biblioteca open source de tuio para flash e de colocar no CCV ativa a opção “send tuio by OSC”. Para além deste percalço, estávamos também a exportar erradamente a aplicação como .swf e não como .air.

Como resultado do nosso sucesso, temos então dois pequenos vídeos da nossa interação com a aplicação na mesa.

Durante a aula de hoje continuámos o desenvolvimento da nossa marca a fim de cumprir com o esperado na próxima entrega de sexta-feira.

Começámos por escolher definitivamente o nome do nosso projeto e optámos por “binca – entretenimento + segurança”. Achamos ser um nome que resulta bem pois é um nome que reflete a maneira como as crianças falam (binca em vez de brinca) e remete para o seu objetivo: entretenimento e segurança das crianças.

De seguida continuámos o desenvolvimento do logo, agora com a introdução do novo nome, e começámos a construir a mascote que irá acompanhar o logo. Todo este processo de desenvolvimento da mascote e do logo vai ser mais detalhadamente explicado num seguinte post de investigação.

Continuámos também o desenvolvimento das grelhas de interface para a aplicação web para dispositivos móveis, tendo concluído a interface para telemóveis com dimensões semelhantes ao iPhone  e começado a interface para telemóveis com dimensões semelhantes ao Blackberry.

Por fim começámos o desenvolvimento da arquitetura do sistema como atualização do nosso prévio esquema, incluindo agora o tipo de dados a transmitir em cada ligação e o software utilizado em cada dispositivo e operação.

Post atualizado em 26-03-2012

A fim de escolher quais as cores adequadas para a palete de cores do nosso projeto, fizemos uma pequena pesquisa relativamente ao significado atribuído a algumas cores, a alguns conjuntos de cores e ainda à relação das cores com os sentimentos de crianças.

Segundo o livro A Psicologia das cores [1], resultante de um inquérito a mais de 2000 indivíduos alemães, podemos observar que conjuntos de cores são atribuídos a várias sensações, desde alegria e originalidade até juventude e segurança. Em baixo estão então representados os conjuntos que pensamos que representem os valores a transmitir.

Como tal, as cores predominantes dos conjuntos relativos aos valores que pretendemos passar na nossa marca são: laranja, amarelo, roxo e verde.

Após esta análise, encontramos um artigo muito interessante Children’s Emotional Associations With Colors [2] que foi feito com base num inquérito realizado a 60 crianças (30 rapazes e 30 raparigas) com idades divididas em dois grupos: 4 a 5 anos e 6 a 7 anos. Os resultados mostram que: relativamente ao sentimento de felicidade 44% das crianças associam ao cor-de-rosa, 39% ao roxo e 35% ao azul e ao vermelho; relativamente à excitação/entusiasmo (do inglês excited) 26% das crianças associam ao amarelo, 25% ao vermelho e 23% ao verde.

Uma vez que a informação do artigo estava apenas representada em tabela, decidimos criar um gráfico apenas com os dois sentimentos mais relevantes: felicidade e entusiasmo.

Gráfico 1 - Relação entre as cores e os sentimentos das crianças Felicidade e Entusiasmo [2]

Como se pode observar no gráfico, as cores que melhor relação têm com os dois sentimentos escolhidos são: o vermelho, o amarelo e o verde.

Concluindo, com base nas duas fontes de informação referidas, as cores que escolhemos como mais adequadas para a nossa marca são: salmão, amarelo, verde e roxo.

Referências:

[1] Heller, E. (2009). A psicologia das cores. Barcelona, Editorial Gustavo gili.

[2] Boyatzis, C. J. and R. Varchese (1994). "Children's Emotional Associtations With Colors." The Journal of Genetic Psychology 155(1): 77-85.

Durante esta reunião discutimos alguns aspectos relevantes para a próxima entrega como o nome e as cores do logo.

Relativamente ao nome do projeto, optámos por escolher um nome português, uma vez que visto que um dos pontos chave do nosso projeto é a confiança dos pais/responsáveis, sentimos que é mais fácil de aceitar se o nome for português.

Pensámos em alguns nomes, desde “Brincar 2.0”, “Brinca e toca”, “Brinca Tec”, “BDS – Brincadeira e Diversão Seguras”, sendo que optámos pelo último devido à sua simplicidade, devido à sigla, e ao fácil entendimento do propósito do projeto: entretenimento seguro.

Discutimos também, relativamente ao logo, as cores a utilizar. Tal como vai ser explicado no próximo post de investigação, optámos por cores com que as crianças se sentissem à vontade, seguras, alegres e entusiasmadas: roxo, amarelo e salmão.

À parte dos assuntos relativamente à próxima entrega, a reunião foi bastante prática, pois ainda estamos com alguma dificuldade em conseguir que a nossa aplicação reaja a eventos touch. Durante a tarde estivemos com o professor Nuno Ribeiro a tentar ver qual era o problema, mas sem sucesso. Na reunião, juntamente com o orientador continuámos o processo de investigação, com base nas pesquisas por nós efectuadas durante a tarde e o dia anterior sobre ligações entre o tuio e o flash [1] [2], qual o funcionamento do tuio server [3]. O problema está na comunicação entre o servidor tuio e o .swf e já fizemos alguns avanços, mas ainda não conseguimos concluir o que pretendíamos.

Como objetivos para a próxima reunião temos:

-       Conseguir interagir corretamente com a mesa touch

-       Adiantar significativamente a construção do logo

-       Decidir o nome final do projeto

Referências:

[1] cyancdesign LLC (2012). "AS3 Tuio - A Starting Poin." Retrieved 21.03.2012, 2012, from http://www.cyancdesign.com/2010/09/as3-tuio-a-starting-point/.

[2] georg kaindl (2006). "gkaindl.com -> software -> udp-flashlc-bridge." Retrieved 21.03.2012, 2012, from http://gkaindl.com/software/udp-flashlc-bridge.

[3] Tuio Flash Blog (2012). "Tuio as3 library << Tuio Flash Blog." Retrieved 21.03.2012, from http://bubblebird.at/tuioflash/tuio-as3-library/.

O trabalho realizado nesta aula foi maioritariamente de pesquisa, desde a pesquisa do nome até ao logo.

Primeiro começámos por dividir tarefas: pesquisa do nome e de marcas semelhantes; pesquisa de tipografia; pesquisa de simbologia para um possível ícone.

Em relação à pesquisa do nome e marcas semelhantes, procurámos no website do Instituto Nacional da Propriedade Industrial marcas existentes com as palavras “play”, “safe” e “playsafe” a fim de compreender os vários contextos de utilização do nome que pretendemos implementar, bem como que marcas já existem no mercado, semelhantes ao que pretendemos desenvolver. Procurámos ainda no Google pelas palavras “playsafe” a fim de observar em que contextos este nome era utilizado e em que tipos de produtos. Apesar de existir um resultado com conotação negativa, preservativos da Malásia e alguns websites de casinos, todos os outros resultados estavam relacionados maioritariamente com produtos de entretenimento e de espaços para crianças, sendo que ainda uma parte significativa estava relacionado com sistemas de segurança.

Realizámos também um mapa conceptual (a preto e a cores) a fim de reunir os conceitos que mais associamos ao nosso projeto.

Mapa Conceptual - Preto

Mapa Conceptual - Cor

Quanto a ideias possíveis para a composição da marca, pensámos em dar tanto ênfase ao logo do ponto de vista tipográfico como à criação de um ícone/mascote/logomarca. Discutimos a possibilidade de criar o logótipo através da junção de dois tipos de letra distintos (um para cada palavra: play e safe) de forma a ter um maior e mais interessante impacto visual.

Surgiu ainda a possibilidade de colocar, junto do logo, um símbolo que pudesse representar os valores da marca a criar, como por exemplo um robot, um urso de peluche, ou seja, algo que relacionasse o mundo infantil com a tecnologia.

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.