Sexta-feira, 30 de Março de 2012
#entrega04

 De acordo com o plano curricular da disciplina de Projecto, o objectivo desta semana consiste na entrega das especificações gráfica e técnica. Assim sendo, seguem os ficheiros referentes a cada uma das especificações.

 

Especificação gráfica

Manual_Projecto

 

Referências das guidelines utilizadas no desenvolvimento da especificação gráfica:

 - Johansson, R. (2005). Accessibility and usability for interactive television | 456 Berea Street, a partir de http://www.456bereastreet.com/archive/200512/accessibility_and_usability_for_interactive_television/

- lasseklein. (2006). lasseklein.com >> Blog Archive >> Designing for television acedido a 19-03-2012, a partir de http://lasseklein.com/2006/09/designing-for-television/

- Google. Designing For TV - Google TV - Google Developers acedido a 20-03-2012, a partir de https://developers.google.com/tv/web/docs/design_for_tv

 

Especificação técnica

 

especificacao_tecnica

 

Download dos documentos:

Manual de identidade visual da marca e do sistema visual da aplicação

Documento de especificação técnica

Base de dados




#paraQuemNãoDorme

 Hoje foram feitos progressos. Não ao nível da entrega desta semana, mas em relação ao comando com receptor infra vermelho. Após quase duas semanas a tentar instalar drivers e fazer Macros, finalmente, com a ajuda do professor Telmo, conseguimos que o comando interagi-se com o computador. Para o teste, bastou criar uma macrou para escrever o número "0", abriu-se o bloco de notas, e pimba, tá a funcionar. Um problema resolvido de muitos.

Agora são os retoques para a entrega 04.

 

Bom trabalho!




Quarta-feira, 28 de Março de 2012
#paraQuemNãoDorme

 Hoje o grupo aproveitou e testou as interfaces desenvolvidas para a especificação gráfica num televisor HD. Foi feita a ligação do computador ao televisor por HDMI e tentámos perceber se as cores e o tipo de letra utilizados se enquadravam bem e qual o impacto que têm.

 

 

Actualização 28-03-2012 22:40:

Depois de analisada esta experiência verificámos que o texto das ofertas da zona "Ver mais tarde" possui um tipo de letra demasiado fino para ser bem visivel a uma distância considerada normal ao utilizar uma televisão. Como solução, optámos por mudar para Bold. Não alterámos o tamanho da letra, pois não temos controlo do número de caracteres do título da oferta que irá ser adicionada dinâmicamente.




Terça-feira, 27 de Março de 2012
#aula06

 Na aula do dia 26 de Março deu-se início a mais um módulo, nomeadamente a especificação técnica. O professor Helder Caixinha e Benjamim Junior explicaram qual o objectivo deste módulo e o que era pretendido para a entrega do mesmo.

De seguida, os professores acompanharam cada grupo para saber qual a situação actual da especificação gráfica e também para ajudar e esclarecer algumas dúvidas em relação à especificação técnica. O grupo WiP itv mostrou o trabalho elaborado ao longo da semana passada em relação a ambas as especificações e foram feitas recomendações por parte dos professores do que poderia ser melhorado. Ficou esclarecido e decidido que seria necessário tomar em atenção ao Server-side do modelo/arquitectura do sistema pois este teria que ser igual para os três grupos (web, mobile e tv), pois esta funciona da mesma forma para todos, sendo apenas distinta ao nível do Client-side.

Ao longo da restante aula, o grupo continuou a corrigir alguns pormenores da especificação gráfica e começou a elaborar a especificação técnica.




Quinta-feira, 22 de Março de 2012
#paraQuemNãoDorme

Um pouco daquilo que se faz neste momento, grelhas.

 

 

 

 




#orientação05

 A reunião do dia 21 de Fevereiro deu-se início com o orientador a dar o seu feedback em relação à entrega da demo gráfica e demo técnica. Depois foi-nos fornecido um comando com receptor infravermelhos e respectivo conversor para podermos começar a testar o mesmo no desenvolvimento da aplicação.

De seguida, deu-se início à tomada de decisões relevantes para o desenvolvimento do projecto bem como para o desenvolvimento da especificação gráfica. Decidiu-se também que o nosso grupo iria ser responsável pela alimentação da base de dados em relação à informação das empresas através da API do LinkedIn, enquanto o grupo mobile ficaria responsável pela API do Google Maps e o grupo web já não necessitava de outra tarefa pois já tinha conseguido alimentar o servidor através dos feeds RSS de websites com ofertas. 

No final, decidiu-se qual seria o nome após semanas de muita procura e esforço. Acabou por ser escolhido o WIP (Work in Perspective). Para além disso, cada grupo será responsável de criar um logótipo para a aplicação bem como a respectiva identidade gráfica para depois ser escolhido o melhor a adaptar.

 




Quarta-feira, 21 de Março de 2012
#paraQuemNãoDorme

A escolha do nome para o projecto está a tornar-se um verdadeiro desafio. Já foram apresentadas várias propostas, já foram feitos vários brainstormings e ainda não conseguimos chegar a nenhuma conclusão. 

Amanha iremos apresentar os nomes que temos em papel aos orientadores de forma a conseguirmos chegar a algum consenso.

 




Segunda-feira, 19 de Março de 2012
#aula05

Na aula de Projecto do dia de hoje, entrámos no Módulo de Especificação Gráfica, em que contamos com a contextualização dos professores Pedro Amado e Ivo Fonseca. 

Esta fase de desenvolvimento do projecto requer, então, um maior detalhe na criação no design gráfico, que vai para além da produção da interface da aplicação, havendo a necessidade de fazer um estudo aprofundado do logótipo, marca, sistema gráfico, cromático e tipográfico. 

No entanto, a criação de um nome para a aplicação que fosse transversal às três plataformas (web, mobile e iTV) mostrou ser mais complexo do que se pensava. Assim, e tendo em conta a opinião dos docentes, foi-nos aconselhado fazer um brainstorming mais individual para não ficarmos "presos" às sugestões dos outros membros.

Nessa medida, a decisão acerca do nome é algo fundamental e urgente. 

 

 


tags:


Sexta-feira, 16 de Março de 2012
#entrega03

Para o desenvolvimento deste projecto, foi-nos proposto a realização de uma demo gráfica e demo técnica, enquadrado na unidade curricular de Projecto. Enquanto a primeira sintetiza o conceito da aplicação tendo em conta o seu contexto de uso, recorrendo para isso à ilustração das principais funcionalidades, a segunda demonstra a viabilidade técnica das tecnologias escolhidas.

 

Para realização da demo gráfica recorremos, numa primeira fase, a uma ferramenta de Mockups - Balsamiq (http://www.balsamiq.com/)– para ilustrar graficamente os ecrãs da aplicação e a navegação das funcionalidades da mesma, embora de uma forma muito primitiva ainda. Numa segunda etapa, para obtermos uma demo mais dinâmica e criativa optámos, então, por usar esses mockups para o  vídeo, que integra a técnica de stopmotion, pois facilita a compreensão dos métodos de navegação e a organização dos diferentes componentes da aplicação.

É importante referir que não foram ilustradas todas as funcionalidades da aplicação, sendo que nos focámos especialmente na funcionalidade-chave: a pesquisa das ofertas. Assim, desta forma os passos desta demo gráfica seguem a seguinte ordem:

  

 Imagem 1 - Ordem dos passos da demo gráfica

  

 

 

 

A demo técnica tem o objectivo de apresentar o funcionamento da aplicação de uma forma geral, recorrendo às tecnologias escolhidas pelo grupo. Neste caso, a demo encontra-se já implementada em Adobe Flash, através da linguagem ActionScript 3.0, e ao abrigo de uma base de dados, desenvolvida em MySQL. De realçar que foi necessário utilizar um web service em PHP para comunicar com a base de dados. A transferência de dados entre o PHP e o AS3 é efectuada através de JSON, pois esta está mais direcionada para a transferência de dados, uma vez que o XML apenas se foca na criação de documentos. Com a ligação entre o PHP e o AS3 através de JSON faz com que seja possível haver um processamento do lado do servidor em que são feitos pedidos de dados ao mesmo e depois os resultados desses pedidos serem reencaminhados para o AS3. Para além disso, permite a utilização de variáveis de sessão que nos possibilitam a aquisição de informação relacionada exclusivamente com o utilizador que está na sessão, como por exemplo o seu nome ou os seus interesses, dados importantes para o bom funcionamento da aplicação.

Para o armazenamento de dados que consideramos essenciais para o bom funcionamento da aplicação, criámos uma base de dados exclusivamente para esta demo:

   Imagem 2 - Base de dados utilizada

 

Mais uma vez, apenas demonstramos algumas das ações que o utilizador poderá realizar futuramente, e que se encontram assinaladas na demo através do fundo branco e feedback visual em azul. Para além disso, o grupo percebe que tomou a decisão correta de escolher o Adobe Flash para o desenvolvimento da aplicação, pois o facto de já ser do conhecimento dos elementos do grupo fez com que se consiga compreender melhor todo o processo de transferência e processamento de dados através da integração de várias tecnologias.

Para entender melhor qual o mapa de navegação da demo técnica, apresentamos também a seguinte imagem. É de realçar que estão representados alguns ecrãs, uma vez que só foram desenvolvidas as funcionalidades mais importantes para o funcionamento da aplicação.

 

  Imagem 3 - Mapa de navegação da demo técnica

 

O seguinte vídeo permite perceber melhor como a demo técnica funciona, demonstrando quais as funcionalidades que foram implementadas e como estas funcionam. No momento inicial da utilização da aplicação é necessário efectuar o login com os seguintes dados:

- Nome de utilizador: jobfinderitv

- Pin: 1234

 

 

 

A aplicação encontra-se disponível em formato .swf, existindo algumas recomendações a nível de hardware e software.

Hardware:

- Computador com ecrã, rato e teclado;

- Ligação à internet;

Software:

- Adobe Flash Player;

- Recomendado o sistema operativo Windows.

 

 Ficheiro para download: demoTecnica_jobfinderitv.rar

 

 

Notas a considerar aquando a exploração da demo técnica:

- Por medidas de segurança da Adobe, e tendo em conta que se está a fazer uma ligação a uma base de dados de um servidor online, é necessário atribuir permissões num website específico da Adobe: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html. Esta ação deve ser efetuada pela pessoa que executa a demo. O respectivo tutorial explica todos os passos a seguir: http://www.gryphonmountain.net/2008/05/flashhelp-tech-tip-fixing-the-flash-player-has-stopped-a-potentially-unsafe-operation-problem/. É importante reiniciar a aplicação Flash depois de dadas as permissões.

- O grupo pretendia apresentar a demo em Fullscreen, no entanto, devido a restrições de segurança por parte da Adobe, este objectivo impossibilitaria a ação de input através de teclado como é explicado pela Adobe. (link explicativo: http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html)

A demo técnica, sendo executada num sistema operativo MacOSX, impossibilita a transferência de variáveis de sessão entre os ficheiros PHP. A razão desta disfunção é desconhecida por parte do grupo, sendo que se recomenda a execução num sistema operativo Windows. 

 

 

 




Quarta-feira, 14 de Março de 2012
#orientação04

 Nesta reunião de orientação o grupo pode mostrar o estado actual das demos gráfica e técnica ao orientador, Professor Jorge Ferraz. Considerando a opinião deste, foi possível perceber que é necessário fazer algumas alterações, sem esqueçer a ideia original. Estas melhorias estão a ser realizadas neste preciso momento, com o intuito de aperfeiçoar a usabilidade da aplicação. 

 




.Copyright

Creative Commons License

Blog JobFinder iTV is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Portugal License
.Colaboradores
.mais sobre mim
.pesquisar neste blog
 
.Junho 2012
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2

3
4
5
6
7
8
9

10
11
13
14
15
16

17
19
20
21
23

24
25
26
27
28
29
30


.posts recentes

. #oFim

. #paraQuemNãoDorme

. #orientação14

. #entrega06_testes

. #entrega06_beta

. #testes

. #aula13

. #orientação13

. #paraQuemNãoDorme

. #aula12

.tags

. todas as tags

.arquivos

. Junho 2012

. Maio 2012

. Abril 2012

. Março 2012

. Fevereiro 2012

blogs SAPO
.subscrever feeds