Especificação Técnica Website

Grupo storytelling | Projecto MiD
3º ano | LNTC

Resumo
Este documento, engloba diversos materiais importantes para a conceptualização de
toda a estrutura técnica tanto do website (arquitectura do sistema; fluxogramas;
mapa do site; etc) como da curta (guião e storyboard) a serem desenvolvidas para
este projecto.

Introdução
Ao construir uma aplicação Web, é sempre necessário efectuar primeiro todo um
processo de planeamento e implementação da mesma.

Neste caso, encontramo-nos na fase de decisão da estrutura do website e da sua

componente gráfica bem como, do planeamento e organização dos conteúdos da
mesma. A nível de conteúdos, este será essencialmente composto por vídeo e áudio
já que, são os meios de comunicação por excelência e que também hoje em dia
começam a ser bastante aliados ao elemento Web.

Assim, este documento pretende demonstrar de forma clara, uma análise do que se
pretende fazer a nível prático com este projecto, ou seja, a nível da sua concepção e
posterior implementação.

Especificação técnica
A especificação técnica encontra-se dividida nos seguintes elementos:

A. Arquitectura do Sistema

B. Mapa do Site

C. Fluxograma de decisões

Passamos agora, à sua exposição.

1  
  

A. Arquitectura do Sistema

A arquitectura do sistema, está divida por fases como se pode ver no seguinte
esquema:

figura 1 – Arquitectura do sistema

1. Captura:

Em primeiro lugar, após a elaboração do guião e storyboard, procede-se às

filmagens do que irá ser a curta a implementar na aplicação web.

2. Produção:

Em segundo lugar, procede-se à edição do vídeo e som através da utilização de

software próprio como o Adobe Premiere CS3 (para vídeo) e o Nuendo (para som).
Além da produção dos elementos vídeo, inicia-se a elaboração da aplicação Web
que, neste caso, será uma página Web construída utilizando a ferramenta Adobe
Flash CS3.

2  
  

3. Distribuição:

A distribuição do vídeo e áudio é efectuada apenas através da internet e, para isso,

é necessário o armazenamento dos vídeos e respectivo áudio num servidor Web
que em principio será o da universidade.

4. Implementação:

Após o armazenamento do vídeo e áudio no servidor, entra-se na fase de

implementação da aplicação Web. Esta implementação faz-se através do
armazenamento e gestão de todos os ficheiros flash que esta engloba, no servidor
Web da universidade para a sua posterior visualização online.

5. Visualização:

Para que os utilizadores possam visualizar o produto final precisam de:

- uma ligação à internet (cabo ou wireless);

- é necessário que o plug-in do Flash Player esteja instalado para que o

browser possa carregar os conteúdos do produto final;

B. Mapa do Site

Como aqui se pretende que a própria aplicação conte uma história, o website não
contém um mapa do site muito complexo. Basicamente, a aplicação Web tem três
menus principais e mais importantes sendo que, o restante serão pequenas
decisões que o utilizador terá que tomar.

figura 2 – Mapa do site

3  
  

C. Fluxograma de decisões

A aplicação Web deste projecto, é composta por duas decisões principais que o
utilizador pode tomar a nível de navegação na mesma. Assim, temos:

C.1 A visualização de uma curta do made in DeCA:

figura 3 – Fluxograma Menu Curtas

4  
  

C.2 A escolha de um final para a curta principal do website:

figura 4 – Fluxograma escolha de um final

5  
  

Especificação Gráfica Website

Grupo storytelling | Projecto MiD
3º ano | LNTC

A especificação gráfica encontra-se dividida nos seguintes elementos:

D. Estudo Grelha

E. Estudo Cor e Cursores

F. Estudo Logótipos

G. Estudo Fonte

Passamos agora, à sua exposição.

D. Estudo de Grelha

Para efectuar o estudo de grelha, procedeu-se à análise e compreensão da

construção da mesma consultando diversas fontes.
Assim, seguindo as regras explicadas num documento da SXSW Interactive, definiu-
se em primeiro duas características fundamentais do layout:

- Layout pensado para um ecrã 1024 x 768 px;

1
- Utilização da unidade Big Ad

Então, sabe-se que para um ecrã de 1024 x 768 px, as medidas do browser são
normalmente 960 x 650 px. Portanto, temos que:

1
- A Big Ad, tem o tamanho standard de 336 x 280 px;
- As unidades são blocos de uma grelha;
- As colunas da grelha são o agrupar das unidades;
- As unidades são por norma, múltiplos de 3 ou 4;

6  
  

1
Big Ad: medida standard definida pelo Internet Advertising Bureau

No entanto, neste caso, para que as grelhas pudessem ser transportas para este
documento, as medidas utilizadas foram:

- Browser: 688 x 487 px;

- Unidade mínima da grelha: 107 px largura;
- Unidade média da grelha: 164 px largura;
- Unidade máxima grelha: 221px;

Como representado na imagem seguinte:

figura 5 – medidas básicas da grelha

Se agruparmos temos 3 colunas de 221 px de largura cada. Além disso, para uma
maior exactidão no alinhamento de conteúdos, optou-se por utilizar também colunas
horizontais de 31 px de altura.

7  
  

Como representado na seguinte imagem:

figura 6 – colunas horizontais da grelha

Depois das medidas definidas para um browser de 688 x 487 px, passou-se então à
escolha de três ecrãs que achamos serem os principais deste projecto e, procedeu-
se à elaboração das grelhas dos mesmos.

De seguida, apresentam-se esses mesmos ecrãs.

8  
  

1º ecrã – Escolha de Curtas MiD.

figura 7 – 1º ecrã

Breve explicação:

- Background: curta inicial;

- canto superior esq terá o logo do projecto;

- canto superior direito: pequeno menu e controlo áudio;

- ao centro: a palavra “resume”;

- de seguida aparece a barra e menu de selecção de curtas do MiD;

- rodapé: timeline do utilizador;

9  
  

2º ecrã – Menu (ajuda; mapa site)

figura 8 – menu (ajuda; mapa site)

Breve explicação:

- Background: curta inicial (podia também ser uma curta MiD escolhida);

- canto superior esq terá o logo do projecto;

- canto superior direito: o pequeno menu expande-se;

- ao centro: o conteúdo do menu;

- de seguida aparece o menu de selecção de curtas do MiD retraído no canto

esquerdo;

- rodapé: timeline do utilizador;

10  
  

3º ecrã – Informação Curta

figura 9 – menu info curta MiD

Breve explicação:

- Background: uma curta MiD escolhida a ser visualizada;

- canto superior esq terá o logo do projecto;

- canto superior direito: o pequeno menu expande-se;

- de seguida aparece o menu de selecção de curtas do MiD retraído no canto

esquerdo e também surge um menu (cor branca) que se expande e dá
informação sobre a curta a ser visualizada (figura 10);

- surge também o controlo vídeo para o utilizador (barra a preto);

- rodapé: timeline do utilizador;

11  
  

4º ecrã – Informação Curta (menu expandido)

figura 10 – menu info curta MiD expandido

E. Estudo de Cor e Cursores

Como o layout incide a nível de cor, sobre a escala de cinzentos indo do branco ao
preto, decidiu-se escolher uma cor dentro dos tons das cores primárias para criar um
impacto visual. Após algumas tentativas de cor, acabou por se decidir que seria o
azul que melhor se iria adequar.

12  
  

No que diz respeito a cursores de rato, este projecto apenas utiliza dois. São eles o
pointer tradicional e o cursor de selecção também, tradicional.

F. Estudo de Logótipos

Sendo a temática do nosso projecto o MiD, decidiu-se que o logótipo seria em

formato textual uma vez que, consoante a edição do MiD, existe um tema diferente e
portanto, um logo diferente. Assim, quisemos manter o logótipo o mais standard
possível apenas recorrendo a diferentes tipo de fontes textuais.

Seguem-se alguns exemplos de estudo de logos:

13  
  

14  
  

Assim, o logo a ser definido será o seguinte:

fonte: Impacted

G. Estudo de Fonte

Também neste campo, optou-se por utilizar os tipos de fonte que são standard para
Web como por exemplo a Arial, Verdana e Helvética. O motivo desta escolha,
prende-se com o facto de estas serem de fácil leitura e também, porque o nosso
projecto tem por base o vídeo e portanto, quanto mais simples são os elementos
que compõe o layout, menos é a probabilidade de o utilizador se perder.

Seguem exemplos das fontes:

Arial | Bold
abcdefghijklmnopqrstuvwxyz
áéíóúàèìòù
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!?*&%$#”€

Helvética | Bold
abcdefghijklmnopqrstuvwxyz
áéíóúàèìòù
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!?*&%$#”€

15  
  

Verdana | Bold
abcdefghijklmnopqrstuvwxyz
áéíóúàèìòù
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!?*&%$#”€

Assim a fonte escolhida é a verdana por ser a de mais simples leitura das três
fontes analisadas e além disso, é a que melhor se adequa a todo o conceito da
aplicação Web que pretendemos construir.

16