pedrovitoria @ 00:53

Sab, 21/05/11

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 plataformahttp://blogs.ua.pt/Euragora;

Documentário: versão1

 



Blog do projecto do 3º ano de NTC no âmbito da UC de Projecto.
Pesquisar
 
Ligações
diigo library
Arquivos
blogs SAPO