prototipo

Uma bela tarde de sol.

sofia-cruz — Wed, 23 May 2012 17:24:42 GMT

O grupo do projecto Museu Virtual de Design Português foi á praia...ou então não!
Mais uma tarde de trabalho árduo :)

#entrega_05-Protótipo de Alta Fidelidade

joao-amorim — Fri, 11 May 2012 18:46:21 GMT

Ao longo destas três semanas que corresponderam ao tempo de realização desta entrega, a principal questão pode expressar-se por: "-Será que é desta?" .. "-Não!".

É verdade, não foi fácil encontrar o caminho para chegar até aqui, pelo que nos vimos obrigados a experimentar tudo aquilo a que o google associava à palavra "Kinect".

Felizmente, no dia 4 de maio tivemos a oportunidade de assistir a um "workshop" sobre Kinect, leccionado por Tiago Serra, que nos deu a pista que nos veio ajudar para a concretização deste protótipo. Fomos então apresentados ao Osceleton, um osc ao qual o é possivel ligar Flash Builder e fazer assim a transferência dos dados da kinect. Este ficheiro tem a particularidade de já incorporar um sistema de reconhecimento e calibração do utilizador, o que é um aspeto muito positivo, uma vez que facilita a sua implementação, evitando que a mesma tivesse de ser feita por nós.

Posto isto, começamos então a programar a aplicação em as3 a partir de classes. Como foi uma novidade para nós, sentimos a necessidade de recorrer ao Professor Nuno Ribeiro para nos dar umas dicas e auxiliar no esclarecimento de duvidas, a quem agradecemos.

Em suma, os passos necessários para correr a aplicação que desenvolvemos, depois de instaladas as drivers do Kinect (aconselhamos o pacote Zigfu), são:

Ligar o Kinect ao computador e a uma fonte de alimentação;
Correr o ficheiro do Osceleton (PC/MAC);
Executar a aplicação AIR de desktop -UAW;

O video que apresentamos em seguida, mostra o resultado da implementação do protótipo de alta fidelidade e respeita o "contrato" efectuado na pré-entrega desta etapa, concretizamos ainda a galeria de POI's de Aveiro.

Referências:

http://rhuno.com/flashblog/2012/02/19/finally-no-betas-flash-and-kinect-using-the-version-1-sdk/

http://rhuno.com/flashblog/2011/07/01/flash-kinect-success/

http://rhuno.com/flashblog/2011/07/02/tutorial-kinect-to-flash/

http://blog.aboutme.be/2011/03/07/as3osceleton-using-kinect-as-a-multitouch-device-in-adobe-air/

http://blog.aboutme.be/2011/07/07/linking-microsoft-kinect-sdk-to-adobe-air-tuio-multitouch/

http://odopod.com/blog/using-kinect-within-flash-applications/

http://tuio.org/?software

http://active.tutsplus.com/tutorials/games/using-the-kinect-to-control-flash-an-introduction-active-premium/

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html

#aula8

adelaidejsousa — Wed, 02 May 2012 14:31:34 GMT

Na aula de segunda feira continuamos o trabalho depois da semana (de semi-descanço) académica. :D

Uma vez que já todos os grupos começaram a implementar os projectos, foi tempo de o professor Caixinha estar junto de cada um deles para verificar em que ponto de situação se encontravam.

Assim, quando o professor esteve conosco, mostrámos todo o trabalho que desenvolvemos até à data, e expusemos algumas dúvidas que nos surgiram no ponto de vista técnico.

No que diz respeito à vertente gráfica apenas no inicio desta semana, se começou a construir o HTML, uma vez que foi dificil encontrar uma solução final para o grafismo.

Depois da aprovação do Prof Amado, de ambos orientadores e do Prof Caixinha, estamos finalmente a implementar as páginas html. A sugestão do professor Caixinha vamos tratar de fazer um post no blog, com a versão actualizada e final das grelhas da aplicação.

Durante o tempo que restou de aula, o grupo continuou a trabalhar em questões importantes, nomeadamente a implementação gráfica e na resolução de alguns problemas na base de dados.

tp5 - protótipo de alta fidelidade

pedrovitoria — Fri, 20 May 2011 23:53:43 GMT

Os protótipos desenvolvidos são reutilizéis na medida em que os componentes/módulos implementados são utilizados na produção do produto final.

Tal como haviamos proposto na entrega do dia 27 de Abril, desenvolvemos duas áreas principais da plataforma e finalizamos a produção dos dois primeiros trechos do documentário (em ambos os casos, as secções desenvolvidas dizem respeito às temáticas da Web e dos Media e Bens Culturais).

De referir que para o desenvolvimento dos protótipos foram utilizadas todas as tecnologias que serão aplicadas nos produtos finais por forma a que estes sejam o mais aproximados possível.

Abaixo publicamos o mapa de navegação da plataforma com as áreas desenvolvidas no protótipo.

Documentário

Como já referido, o grupo decidiu realizar o protótipo de alta fidelidade referente às áreas Media e Cultura e Web de entre os 5 temas que englobam o projecto.

Nota: durante a produção deste tp, têm sido publicados posts acerca do mesmo, de forma a facilitar a compreensão do mesmo, e as etapas do seu desenvolvimento, quer por problemas encontradas, soluções implementadas ou conhecimento adquiridos.

No documentário podem-se encontrar 3 grandes secções:

Infografias
Clips de vídeo institucionais (fornecidos pelo STIC)
Clips de vídeo referentes às sessões de focus group realizadas durante os últimos 2 meses

Infografias

As infografias possuem sempre o mesmo fundo, e as animações presentes são maioritariamente de opacidade, blur, deslocamento, escala e rotação.

Para os mais atentos, o família de letra utilizada (relativamente à demo de baixa fidelidade, trailer) foi substituída em consequência de conselhos do professor Pedro Amado, responsável, em grande parte, pela análise gráfica dos projetos da disciplina. Passou do tipo Dekar para o tipo Bebas Neue.

Dekar – caracterizada pelo aspecto slim, inadequado à simbologia/iconografia utilizada – contraste elevado, levando a que o texto tomasse pouca relevância.

Bebas Neue – tipo de letra mais corpóreo, normalmente usado para headings sendo visualmente mais uniforme que o tipo de letra anterior.

O objectivo das infografias presentes são informar com dados textuais/gráficos dinâmicos e fazer perguntas directas ao visualizador cativando a sua atenção, que são posteriormente alvo de resposta com opiniões dos participantes das sessões de focus group.

Clips STIC

Como já referido num post anterior, os vídeos do STIC encontram-se em formato SD (720px por 576px), o que levou a uma pequena restruturação da dinâmica visual do documentário, que acabou por enaltecer o propósito do grupo quanto à apresentação dos mesmos.

Os vídeos surgem em combinações de 2 ou 3, conjugando-se clips relativos às temáticas a abordar, funcionando assim como uma introdução às temáticas. É importante ter em conta que foram utilizadas letterboxes de forma a dotar os clips de mais impacto no visualizador.

A duração curta de cada um dos clips (2 a 3 segundos) tem por objectivo tornar o documentário mais dinâmico e interessante. Cada uma das sequências de clips é relativa às temáticas tratadas:

1ª - Relativa à temática Media e Cultura: os clips existentes focam os Media, na sua materialização através da música, pintura, dispositivos móveis, entre outros.

2ª - Relativa à temática Web: para introdução desta temática foram conjugados clips que refletem a utilização de redes wireless, e as ligações de rede que induzem o consumidor directamente para a Internet e o estado “online”.

Clips Focus Group

Os clips de focus group são opiniões dos participantes que não tencionam demonstrar vericidade. O objectivo é incentivar à discussão posterior na plataforma de partilha desenvolvida pelo grupo.

Os depoimentos são acompanhados da identificação do participante da reunião que se encontra a expressar a sua opinião, através de oráculos onde pode ser visivel o seu nome.

Legendagem

É importante referir a sua existêcia de forma a facilitar a compreensão dos conteúdos por parte de visualizadores de outras nacionalidades ou possuidores de algum tipo de deficiência auditiva.

Foram produzidas legendas em duas línguas: português e inglês.

A legendagem feita em inglês torna-se útil para a futura utilização da ferramenta de legendagem automática da plataforma Youtube, onde vai ser alojado o nosso documentário para indexação do mesmo na plataforma. Assim, qualquer utilizador poderá compreender os conteúdos presentes no documentário independentemente da sua língua mãe.

Produção documentário

A produção deste protótipo foi feita através da utilização destes 3 principais programas de edição audiovisual: Adobe Premier Pro CS5 (cortes de vídeo, calibração de imagem e assemblagem final), After Effects CS5 (infográficos) e Nuendo4 (edição sonora).

Em seguida seguem algumas imagens relativas aos ficheiros utilizados.

Sem correcção de cores

Com correcção de cores

Plataforma

Neste protótipo de alta fidelidade as áreas prototipadas são:

As áreas de conteúdos “media e cultura” e “web”. Nestas secções da plataforma é possível responder ao tópico da temática em questão bem como responder aos comentários dos outros utilizadores. Nestes comentários é possível fazer o upload de ficheiros bem como de embeber ficheiros de sites como o vimeo, tedtalks ou youtube para isso bastanto colocar o URL do video, com a especial atenção que devido ao plugin das ferramentas de personalização do post é necessário "deslinkar" o URL antes de o submeter.

No futuro implementar-se-ão as restantes áreas de conteúdos:”mobilidade”,”mobilidade estudantil” e “migração” em que as acções desempenhadas serão as mesmas que nas áreas prototipadas agora. No futuro também as páginas sobre o projecto, a equipa, o making of de todo o projecto, o mapa do site e as FAQ estarão disponíveis a ser visualizadas.

Não esquecendo ainda que na versão final a página home além do login terá uma secção para inserir comentários ao vídeo.

HTML e CSS

Devido à complexidade do nosso design face ao original do template base escolhido foi necessário construir de raiz tanto o header com o menu e os respectivos teasers de cada área da plataforma bem como o footer. Estas duas áreas foram contruídas com HTML e CSS, testadas localmente e posteriormente implementadas online, substituindo o código do header/footer respectivamente.

CSS3

Neste protótipo de alta fidelidade foram utilizadas tags de estilo CSS3 que permitiram executar alguns efeitos gráficos sem o recurso a imagens, tornando assim a página mais bonita e mais leve. Concretamente foram usadas tags para arredondamento dos cantos de botões e de inputs e também foram usados códigos para animar transições nos botões entre o estado activo e o estado hover, nomeadamente no menu e nas submissões de formulários.

Exemplo de código de animação:

-moz-transition: all 0.3s ease-in;

-o-transition: all 0.3s ease-in;

-webkit-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;

PHP

Sendo a base desta plataforma o CMS Wordpress todo o código PHP necessário para ligação à BD é desenvolvido pela plataforma, mas para uma maior personalização das páginas foi necessário implementar um sistema de condições para alterar os banners das áreas da plataforma. Também foi desenvolvido um código que permite enviar um email directamente da plataforma, em que todo o processo é efectuado na página índex sem o recurso a páginas externas de PHP.

Como foi referido no post no blog, as áreas que seriam prototipadas seriam a área de conteúdos tanto do “media e cultura” como da “web”. Estes requisitos foram cumpridos, estando estas 2 áreas perfeitamente operacionais. Além destas áreas também a pesquisa, o login com o Facebook e o registo na plataforma tanto com conta do facebook como com conta directamente na plataforma(registo do wordpress) estão operacionais. Afim de testar a integração de código PHP na plataforma está também protótipado o envio de emails no formulário do footer.

Exemplo do código de envio de email:

$body = "From: $name_field \n E-Mail: $email_field \n Message:\n $message";

mail($to, $subject, $body);

echo "E-mail enviado com sucesso!";

Protótipos:

URL da protótipo de alta fidelidade da plataforma: http://blogs.ua.pt/Euragora;

Documentário: versão1

Protótipo de Alta Fidelidade agora com lente

dinisadriano — Thu, 20 May 2010 22:00:42 GMT

As lentes necessárias para que se possa interagir directamente com a mesa tirando partido da projecção na superfície, continuam, supostamente, retidas na alfândega ou, como mais recentemente tivemos conhecimento, a encomenda veio trocada, nada mais nada menos que boquilhas para cigarros eléctricos...no comments....

No entanto, com recurso a uma câmara (adaptada com uma lente) que se conseguiu por empréstimo para esta fase de testes, foi possível verificar que, de facto, a lente faz toda a diferença. Assim, foi possível efectuar testes tanto com as componentes já desenvolvidas pelo grupo (tanto as imagens que surgem no início do vídeo disponibilizado como a própria aplicação que se encontra a ser desenvolvida no âmbito do projecto DecaTouch - que se encontra no final do vídeo) como com outras aplicações facultadas no site da TUIO.

Desta forma, tornou-se viável efectuar algumas experiências onde chegaram a estar 5 mãos em contacto em simultâneo com a mesa, montar puzzles e... testar os dotes musicais de alguns elementos do grupo.

Os membros do grupo:

Dinis Simões

Francisco Baião

Rui Silva

Samuel Traquina

Protótipo de Alta Fidelidade

renato-costa — Fri, 14 May 2010 22:41:22 GMT

Boa noite! Os ficheiros relativos à aplicação e ao documento escrito estão disponíveis para download nos links abaixo: