alta fidelidade

#aula13

adelaidejsousa — Mon, 04 Jun 2012 11:41:03 GMT

Na aula de hoje contámos com a presença do professor Caixinha e do professor Ivo. A aula foi dedicada ao desenvolvimento das funcionalidades que faltam na aplicação, e a preparar a entrega da próxima sexta-feira.

Durante a aula, os professores passaram algum tempo com o nosso grupo. Aproveitamos para mostrar todas as funcionalidades já implementadas e mostrar todas as pequenas alterações que decorreram desde a última aula que tivemos com estes docentes.

Foi discutido também o assunto dos testes, de como os iremos realizar (em conjunto com Wip iTV), e quais as técnicas que serão utilizadas.

Fica aqui um vídeo da banda sonora que marcou esta aula (para ver se ajuda a subir a nota :D)

(não há melhor forma de começar a semana :D)

orientação#11 – Exposição do Protótipo de Alta Fidelidade

alexandra-fernandes — Thu, 10 May 2012 11:35:04 GMT

Hoje na orientação foi apresentado a evolução do projeto no aspeto gráfico e técnico.

No que concerne ao aspeto gráfico foram efetuados alguns avanços no design da aplicação, nomeadamente no login. Efetuou-se ainda o desenho de mais alguns elementos da plataforma.

No que respeita à componente técnica foi efetuada a inserção de fundos e objetos da aplicação na área de criação da história.

Em diálogo com a prof. Lídia e de acordo com o feedback dado pelos professores de projeto na última aula, chegou-se à conclusão que seria necessário repensar no design da aplicação, especialmente no posicionamento dos elementos na aplicação e a hierarquia visual. Desta forma, algumas componente da aplicação sofrerão alterações, nomeadamente o desaparecimento da área da “casa” e a reformulação dos menus para a parte superior da plataforma.

Objetivos a atingir:

Finalização do “Protótipo de Alta Fidelidade” com o caminho referente ao login do utilizador, criação da história e exportação do ficheiro externo.

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

Mód. TP5 – Prototipagem de alta fidelidade (2/2)

lilianavale — Fri, 20 May 2011 21:51:29 GMT

Open publication - Free publishing - More 3d

Protótipo de Alta Fidelidade :: Entrega Final

marianasantos — Fri, 14 May 2010 19:04:50 GMT

Pretende-se com este protótipo apresentar formalmente as principais especificações tanto a nível técnico como gráfico definidas inicialmente, justificando assim as opções que o grupo foi definindo ao longo do planeamento deste projecto.

Pretendemos dar uma noção ao utilizador da base deste projecto, sendo possível com este protótipo o teste das principais funcionalidades, e de certa forma, "previsão" do resultado final. Salvaguarda-se, no entanto, a necessidade de aprofundar as componentes desenvolvidas, bem como a implementação daquelas que se encontram em falta.

Inicialmente o grupo assinalou em mapa de navegação quais as áreas que se propôs prototipar no desenvolvimento do protótipo de alta-fidelidade.

Houve a preocupação de se conseguir compromisso na conjugação de uma abordagem horizontal completa com uma abordagem vertical que contempla as zonas que, de momento, oferecem maior complexidade face a desenvolvimentos futuros.

Mediante o tempo e a exigência que as mesmas apresentam, temos:

1. Áreas prototipadas previstas inicialmente

2. Áreas prototipadas não previstas inicialmente

3. Áreas por desenvolver

Abaixo é apresentada uma nova versão do mapa de navegação, com indicação das áreas assinaladas acima, e um documento auxiliar (guião do protótipo) com uma pequena descrição das funcionalidades que cada página oferece de momento, bem como referência ao ponto de situação das mesmas.

- Mapa de navegação actualizado - PDF

- Guião do protótipo de alta-fidelidade

Guião do Protótipo

Foi feito um apanhado dos módulos do CMS’s Drupal utilizados no desenvolvimento do projecto, sendo alguns deles internos e os restantes instalados pelo grupo. Para ter acesso a essa lista - Lista dos módulos instalados

Para aceder à página Web do protótipo desenvolvido, consultar o seguinte link:

http://mimar.peiproject.com

Acesso de utilizador registado:

Nome de utilizador: Utilizador

Password: gKwEnxqZJJ

Considerações finais

- Apesar das dificuldades, o grupo considera ter satisfeito a maioria dos objectivos a que se propôs inicialmente.

- Tempo agora para desenvolver as áreas em falta, assim como aprimorar pormenores tanto a nível técnico como a nível gráfico, e continuar a descobrir o potencial da tecnologia CMS Drupal.

O grupo,

Carla Duarte, Mariana Santos, Rúben Pio, Rui Estrelinha