layout

#aula11

patriciaana — Wed, 23 May 2012 16:16:24 GMT

Na aula de segunda-feira mostrámos aos professores o GPS a capturar as coordenadas, discutimos sobre a conclusão a que chegámos que é a aplicação usar apenas a rede GPS para saber a localização do utilizador uma vez que podia utilizar também rede GMS, GPRS e Wi-Fi para descobrir isso, porém as coordenadas iriam variar imenso consoante a rede a usar e isso iria trazer problemas para a implementação de código de modo a saber onde o utilizador está.

Foi discutida também a maneira de introduzir as coordenadas GPS na base de dados e que algoritmo se poderia usar para descobrir se o utilizador estava na nuvem ou não.

Tomou-se em consideração o conselho de agilizar o processo mencionado acima devido ao facto da aplicação ter de ir buscar de tempos a tempos a localização do utilizador (devido à sua movimentação) e ao delay do GPS.

Acerca da parte gráfica o professor Ivo sugeriu basearmo-nos em layouts já desenvolvidos e apenas adaptarmos ao nosso. Uma sugestão que poderá ser útil caso não se consiga a implementação gráfica a tempo.

Reunião com orientadores #8 - Dúvidas e problemas

nelsontaleite — Thu, 05 May 2011 13:44:37 GMT

Esta reunião foi deveras útil: para começar, resolvemos em três tempos o problema de enviar a base de dados para o servidor externo. Mas com meia dúzia de truques à volta do phpMyAdmin lá conseguimos.

Não sabíamos também como personalizar um input do tipo file (o que não é possível), portanto descobrimos uma batotazinha: sobrepor a um input text e personalizá-lo, desta maneira vai-se apenas ver o que personalizamos, mas na verdade o utilizador vai interagir com o input file (que vai estar escondido)

[algo deste género » http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html]

Tivemos também outras duvidas de menor, mas resolveram-se facilmente (a nível de layout essencialmente).

O único senão é que ainda não descobrimos o sítio ideal para o botão de logout, mas mais tarde ou mais cedo ele vai assentar :)

Bem, vamos trabalhando!

Aspectos gráficos

sofia-e — Fri, 15 Apr 2011 20:48:25 GMT

Devido à tentativa de manter a identidade tradicional do site da UA e seus departamentos mas tentando ao mesmo tempo algo inovador e com uma certa identidade própria, foi bastante difícil chegar a um consenso quanto ao aspecto gráfico, devendo salientar-se que este ainda pode vir a sofrer algumas alterações que visem o seu melhoramento.

Desde cedo se optou por usar as cores tradicionalmente associadas à UA e seu logo, ou seja verde e cinza, embora se tenha verificado uma estranha incongruência na sua definição no manual de normas, uma vez que os valores de CMYK e Pantone não coincidem e os de RGB nem sequer são mencionados. Optou-se, por nos parecerem mais vívidos e propícios à utilização num site, por seguir os valores Pantone. O fundo claro e simples é quase um imperativo para um site que viverá à base de imagens.

Podem ser observados aqui alguns exemplos de estudos de cor.

O layout passou tb por várias fases e tentativas e, embora se tenha chegado a um certo consenso quanto ao seu aspecto geral, ficou ainda algo em aberto.

Uma proposta de layout:

Uma outra proposta:

Tendo acabado por ficar de acordo com o seguinte:

Página de entrada:

Página de entrada comentada:

Aspecto de uma página de galeria:

Página de galeria com comentário de cor e font:

Página de Imagem:

Quanto à font a utilizar deparámo-nos também com um contratempo, tencionávamos usar Helvetica como base, uma vez que faz parte do logo da UA, mas depressa percebemos que não só não faz parte do pack que vem com os comuns PCs como, quando fomos para fazer o seu download, descobrimos que a original Helvetica não é gratuita. Por isso, acabámos por escolher a vulgar Verdana, comum a Macs e PCs e que não necessita, por isso, de ser carregada aquando do acesso ao site. Para títulos escolheu-se uma font ligeiramente mais redonda, a Franklin Gothic Heavy.

Embora nos inspirassemos nos icons existentes no site da UA, resolvemos criar alguns só nossos mas seguindo a mesma base e regras (apercebemo-nos tardiamente de que já existe algo semelhante em uso mas que não consta do manual). Exemplo:

Layout

fpais — Thu, 03 Mar 2011 11:30:41 GMT

Deixamos que o layout que pode ser usado na apresentação de amanhã.

CulturaDigital.ppt

(se houver amanhã :))

"Novo" Layout

alexandra-moedas — Sat, 12 Jun 2010 18:58:12 GMT

Login

Opções Aplicação

Opção Fotos

Visualização Imagem Tamanho "Large" (Após o clique em cima da imagem)

Opção Álbuns

Fotos Primeiro Álbum (após clique na imagem do álbum)

Layout

heldersantos — Fri, 14 May 2010 15:11:47 GMT

Entrega da Especificação Gráfica

dinisadriano — Mon, 19 Apr 2010 22:24:24 GMT

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]- Quando existir algum tipo de actividade por parte do utilizador, é-lhe pedido que desenhe um círculo de modo a entrar na plataforma

[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.

[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][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] - 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] - 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][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] - 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] - 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.

[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

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.

[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.

[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).

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.

Reunião com os orientadores 17 Março

ricardodcarvalho — Thu, 18 Mar 2010 17:41:37 GMT

Reunião com os orientadores do projecto YMT de 17 de Março de 2010

No início desta quarta reunião levantou-se a problemática da alteração da denominação da funcionalidade moods para a denominação Ambiances. Esta alteração foi proposta na reunião anterior com o objectivo de simplificar e baixar drasticamente a subjectividade que está envolvida num conteúdo tão específico como um estado de espírito. Sendo o tema ambience de carácter mais geral é-nos mais fácil abranger uma maior faixa de público, sem necessidade de recorrer a estudos relacionados com a psicologia. Assim, este tempo pode ser aproveitado na execução de tarefas prioritárias (desenvolvimento da aplicação e resolução de problemas técnicos). A questão dos moods, pode assim ser vista como um possível desenvolvimento futuro.

Discutiram-se também as prioridades para a concepção da aplicação e ficou acordado que o mecanismo de login poderia passar para um plano secundário ao desenvolvimento da aplicação. Sendo assim, vamos trabalhar com um utilizador geral, (ex: Família Durães) já registado e, posteriormente a esse login geral, teremos as contas pertencentes aos elementos da família.

Outro tema de enfoque foi o número de cliques desejado para navegar entre todos os níveis da nossa aplicação. Discutiu-se que a solução poderia passar por utilizar o código cromático do telecomando (azul, vermelho, amarelo e verde) em que, cada um destes botões, representa uma área de acção na aplicação, reduzindo para quatro o número de áreas de interacção (menu principal).

Resumindo, um clique vai ser suficiente para aceder à área do menu principal que se pretende, e um clique bastará para transitar de uma para outra independentemente do nível em que nos encontramos dentro da aplicação. Ainda dentro das funcionalidades e possibilidades do telecomando concordámos que as teclas de atalho Play e Stop seriam uma opção bastante viável para o controle da área de pré-visualização onde são carregados os conteúdos.

Posto isto, o grupo apresentou uma pequena proposta de uma possível interface de baixa fidelidade e essa proposta inicial era composta por 6 áreas: - Ambiances - SUB-Ambiances - PERSONALIZAÇÃO (OPÇÃO DE SOM, VIDEO, IMAGEM) - GALERIA DE Ambiances (LISTAGEM DE TODOS OS Ambiances) - A MINHA GALERIA e PRÉ-VISUALIZAÇÃO DOS CONTEÚDOS No final da reunião, e devido ao constrangimento das possibilidades de navegação e de adequar a funcionalidade das teclas cromáticas do telecomando, o número de áreas ficou simplificado em quatro:

1.Ambiances (pré-definidos)

2.SUB-Ambiances (pré-definidos/variantes dos Ambiances))

3.A MINHA GALERIA (podemos personalizar um possível ambience, seleccionando e adicionando vídeos que gosto, e fazendo a visualização do conjunto))

4.PRÉ-VISUALIZAÇÃO DOS CONTEÚDOS (janela de pré-visualização dos vídeos, fotos e músicas carregados)

Um outro ponto de debate foi o da dúvida subsistente quanto à escolha da resolução adequada para trabalhar. Ficou decidido que teríamos que fazer essa escolha com base na experimentação (na BOX). No que respeita ainda à BOX, os orientadores chamaram-nos a atenção sobre o facto de não nos termos referido às características dos vários modelos de boxes no nosso estudo de viabilidade técnica. Quanto ao design da interface não há muito a acrescentar visto que não nos encontramos nessa fase mas foi-nos aconselhada alguma bibliografia específica na área de design de interfaces para TV.

Levantou-se tambem a questão de como fazer o download dos conteudos, se directamente para a box ou fazer um preload. Chegou-se a conclusão que, devido às limitações do hadware que temos disponivel, iremos precisar de criar os conteudos a nivel de server-side, e posteriormente fazer o streaming dos mesmos para a box. Duma maneiria geral, o utilizador faz o pedido de um Ambiance ao servidor, o servidor cria uma playlist de conteudos, encapsulando os mesmos num formato de video wmv, procedendo depois ao seu streaming para a box.

Para finalizar, foram definidos objectivos a atingir e que devem ser apresentados na próxima reunião, passando eles por pequenas experiências ao nível da interacção e navegação dentro da aplicação no nosso simulador. Bom trabalho.