1

Introdução

A elaboração da especificação gráfica e técnica do projecto assume uma

importância crucial no momento de afunilamento de decisões do grupo

multimédia.

No que diz respeito à especificação gráfica, esta permite a criação da identidade

do projecto e o conhecimento do significado dos registos visuais, tendo por base

a visualização de informação e os diferentes contextos. Há que determinar,

então, a razão para cada decisão e os propósitos dos diferentes elementos

visuais.

A especificação técnica permite saber que características e funcionalidades do

sistema multimédia são implementadas.

Assim, este documento subdivide-se nos seguintes tópicos:

Especificação gráfica

Estudo gráfico

Estudo tipográfico

Estudo cromático

Composição de ecrãs únicos e Estudo de interfaces

Estudo de interacção

Especificação técnica

Mapa de Navegação

Fluxograma detalhado

Justificação do CMS

Modelo/Arquitectura do Sistema

2

O conceito do projecto através do nome

O nome escolhido para o projecto é virtUA (conceito de virtual + identificação

institucional -UA) pois preenche todos os requisitos do nome, segundo

Neumier, 2003. Nesta designação, encontram-se presentes os conceitos de

diferenciação (unicidade da marca, principalmente no universo concorrencial) e

brevidade (próprio para endereços de internet). É também facilmente

pronunciável, podendo ser lido na língua inglesa ou portuguesa, tendo sempre o

mesmo significado, sendo decente e apropriado1.

Acresce-se o facto que o nome comunica o propósito do projecto (criação do

modelo de navegação virtual da Universidade de Aveiro), imprimindo algum

ritmo e apresentando uma conotação positiva e criatividade.

O processo de escolha no nome atravessou as seguintes etapas: avaliação dos

nomes existentes de projectos inseridos no estudo de arte, elaboração de um

brainstorming de conceitos, testes de escrita e de pronúncia e inspiração nos

diferentes elementos do Campus de Santiago da Universidade de Aveiro.

1ConsultarAnexo2:NomesparaoProjecto

3

Estudos gráficos

Logomarca + lettering = Logotipo

O logotipo da marca virtUA assenta na representação dos tijolos, que se

encontram presentes nos diversos edifícios do Campus de Santiago (ao estilo

anglo-saxónico), e igualmente na representação volumétrica patente na maior

parte dos departamentos.

Fig.1 – Inspiração que serviu de base à construção do logótipo

A evolução do logotipo respeita a relação entre a virtualidade e memória,

conseguida através da simplificação e da perspectiva de visualização icónica.

Pensou-se na utilização de diferentes perspectivas, porém, nem todas

transmitiam a imagem de continuidade e série, sendo necessário a sua

simplificação.

A continuidade e série de blocos transmitida pelo ícone nasce das diferentes

perspectivas de visualização e simplificação do mesmo. A equipa procedeu à

simplificação da forma do logótipo, não assumindo tanto como contorno.

4

O lettering é constituído por virtUA e culmina

no destaque da Universidade de Aveiro - UA.

Este será sempre utilizado isoladamente,

aquando a dimensão do logo for inferior às

dimensões mínimas estabelecidas.

Fig.2- Logótipo virtua

É de referir que o logo foi sofrendo variações à

medida que foi implementado, com o objectivo

de, por um lado, transmitir a mensagem

desejada - os valores e objectivos da marca - e,

por outro lado estar visualmente atraente,

cumprindo certas regras elementares de

design e criação de imagem de marca.

Fig.3 – Constituição do logótipo

5

Escala do Logótipo O logotipo deverá respeitar a dimensão mínima da marca e o nome do projecto,

de modo a não comprometer a sua legibilidade. Caso não seja possível a

dimensão mínima, dever-se-á utilizar, apenas, o lettering.

O favicon apresenta uma dimensão de 16x16 pixéis e é representado por três

blocos na vertical.

Fig.4 – Versões mínimas de 16mm e de 13mm

Fig.5 – Favicon Zonas de Segurança

Com vista a preservar a boa leitura do logótipo foi definida uma área de

segurança à sua volta.

Fig.6-Zona de segurança do logótipo Esta área tem como referência a medida “r” que corresponde à letra mais

próxima do rectângulo.

6

Todas as versões da marca devem conservar o espaço livre mínimo, de forma a

proteger o logótipo de qualquer outro elemento que esteja próximo e possa

impedir ou influenciar a sua leitura e visibilidade.

Estudos tipográfico

A fonte utilizada na marca virtUA, e

em toda a extensão do projecto, é a

fonte Lato. A Lato é um tipo de letra

não serifado, humanista, open-source

e que faz parte do directório das

fontes da google. Foi criada pelo

designer Lukasz Dziedzic e significa

Verão em polaco. No que concerne as

características do tipo de letra – as proporções clássicas (particularmente

visíveis em letra maiúscula), a harmonia e elegância, a originalidade e desenho

recente, a transmissão de sensações quentes e a estrutura forte, reforçam a

estabilidade e seriedade que a marca virtUA deseja imprimir.

Hierarquia Tipográfica Online

Atendendo a informação que as audiências precisam de ver/reter num período

de tempo curto e a antevisão de acções, surge a necessidade de a equipa se

preocupar com a hierarquia visual e mancha textual do website.

Títulos

Os títulos são a negrito e no tamanho 28, espaçamento duplo.

Sub-Títulos

Os sub-títulos têm tamanho 16 e, também, são a negrito, espaçamento duplo

7

Texto

Os texto tem o tamanho 12, espaçamento 1,5pt.

É de referir que quer os títulos, subtítulos e corpo do texto apresentam-se a

preto. Os links são a laranja no estado normal e preto no estado de hover. Os

botões da aplicação apresentam o mesmo tons de laranja com letras brancas e à

passagem do rato, as cores invertem-se.

Fig. 7 – Exemplos de botões no seu estado actual e no estado hover

(Link no estado normal)

(Link no estado hover)

Fig. 8 – Exemplos comportamento de links

8

Estudo de ícones e controlos

Ao longo do website e da aplicação Unity, o utilizador poderá encontrar

diferentes ícones que representam acções e aos quais são esperados resultados

finais.

Assim, a equipa pensou em diferentes ícones para ilustrar as diferentes acções

do utilizador 2. Foi realizado um estudo dos vários ícones tanto para a aplicação

como para o Web site. Assim sendo, foram apresentados os três estados: o

estado actual que será a preto, estado hover em que a cor que representativa é

o laranja e por fim o pós-clique a cinzento.

Dada a focagem do projecto na aplicação Unity, é essencial verificar a aplicação

dos diferentes ícones embutidos, nomeadamente, o ícone Mapa (que contém os

diferentes pontos de entrada no Campus, o ícone de volume, Opções – o

utilizador pode alterar algumas das definições da aplicação e o ícone de Ajuda

em que o utilizador tem acesso a todas as indicações para a navegação

2 Metonímia (utilização de um contentor para representar o que contém); sinédoque (atribuição da parte pelo todo, ou do todo pela parte), lítotes (forma suavizada ou negativa para expressar uma afirmação), Metáfora (comparação forte que se estabelece entre o ícone e o que significa.

Estado Actual

Estado Hover Pós-clique Acções Ícones como figuras

do discurso

Sistema de pesquisa do website por palavras-chave (Elemento comum em todas

as páginas)

Metáfora

Inserir link no blog (Campus- Mamórias Metonímia

Enviar mensagem à equipa (Página contactos) Metonímia

Botões de ajuda, auxiliares em todos os ecrãs Metonímia

Editar/ Escrever post (menu Campus – Memórias) Metonímia

Inserção de fotografias por parte do utilizador (menu

Campus – Memórias)Metonímia

Aprovar/Reforçar a satisfação do utilizador por algum

post/comentário no blog (Campus – Memórias)

Metonímia

Partilha/Share da informação Metonímia

Fechar janelas com informação Lítotes

Inserção de comentários por parte do utilizador no blog

(Campus – Memórias)Metonímia

Reprodução do video de visita na aplicação (Campus-Visita

Guiada)Metonímia

Pausa do video (Campus-Visita Guiada) Metonímia

Avançar do video (Campus – Visita Guiada) Metonímia

Erros do sistema, servidor Lítotes

10

Fig.9 – Aplicação dos diferentes ícones na aplicação Unity

O estudo de ícones incide apenas nas hipóteses necessárias para aplicação e

para o Web site, no entanto poderá existir a necessidade de usar mais ícones do

que aqueles apresentados, mas de relevância inferior aos que são apresentados.

Em alguns contextos como por exemplo fundos pretos terá ser de ser usado a

versão com o fundo branco. Nas imagens que se seguem os ícones com fundo

branco.

Todos os ícones serão representados com um círculo para que se destaquem e

se mantenha uma linha coerente de todos os ícones. No entanto existem

algumas excepções a regra por decisão do grupo e pela razão de facilitar o

entendimento do utilizador face ao contexto que é o caso dos POIs e da mira.

Por exemplo:

11

Estudo cromático

Estudo cromático do logotipo As cores utilizadas no logótipo são o laranja, branco e cinzento. O laranja

apresenta-se como uma cor quente, saturada que enfatiza informação, melhora

a rapidez do olhar e é a segunda cor que os estudantes mais associam à UA (cor

dos tijolos dos edifícios).

A cor laranja é vibrante, forte, lúdica, jovem e amigável. Esta é associada aos

conceitos de coragem, modernismo, sofisticação e riqueza. É difícil de ignorar.

O branco é uma cor limpa, pura, moderna e minimalista. Pelo que juntamente

com o laranja, associa-se à vivacidade. O cinzento confere destaque e

diferenciação do sufixo UA do lettering.

Fig.10 – Estudo cromático do logótipo

12

Estudo cromático de interfaces

Ao longo da aplicação, optar-se-á pela repetição da forma e cor. Através deste

processo, conseguir-se-á a unidade no design singular. A utilização de cores ao

longo do website e aplicação de navegação virtual servirá para reforçar a

identidade da marca, evocar emoções, captar a atenção e destacar a informação

mais relevante.

Atendendo às diferentes características das cores- hue (cor), intensidade da cor

(saturação, valor (lightness/darkness) e temperatura (cor quente: laranja), teve-

se em conta a percepção da cor nos diferentes dispositivos e as questões de

usabilidade e acessibilidade3, optou-se pela utilização de cores contrastantes

(branco e laranja) para reduzir o esforço visual, cognitivo e em termos de

memória.

Fig.11 – Página principal do website virtUA em tons de cinzento para verificar a

3 Aproximadamente 8% dos homens e 0.5% das mulheres não conseguem distinguir as cores, segundo os dados do National Institutes of Health (NIH), pelo que não optará tanto pela cor para comunicar e estabelecer diferenças em termos de tamanho e contraste. Assim, será fundamental verificar o funcionamento do website e aplicação em preto e branco.

13

sinalização de áreas e contraste dos diferentes elementos.

Fig.12 – Página inicío do website virtUA com a representação das diferentes áreas de usabilidade

Fig.13- Página principal do website virtUA a cores

14

Directrizes de tratamento fotográfico, conteúdo e discurso

O Website do projecto virtUA tem uma forte componente fotográfica para

ilustrar as memórias do Campus de Santiago – Universidade de Aveiro.

Deste modo, as fotografias publicadas pelo administrador do website e

expostas na página principal, deverão cumprir os seguintes requisitos:

As fotografias deverão ter o formato mínimo 800x600 e o máximo de

1024x768;

Qualidade mínima: 72 DPIs;

As fotografias deverão reportar como tema a memoria colectiva do

campus de Santiago da Universidade de Aveiro;

As fotografias inseridas pelo utilizador registado no menu Campus, submenu

memórias, deverão obedecer aos seguintes critérios :

As fotografias deverão ter o formato mínimo 800x600 e o máximo de

1024x768;

Redimensionar das fotografias;

Qualidade mínima: 72 DPIs;

As fotografias deverão reportar como tema a memoria colectiva do

campus de Santiago da Universidade de Aveiro;

Cada fotografia deve ser acompanhada por uma descrição onde conste o

título da fotografia, ano, breve descrição do local e do tempo e motivo

fotografado

No que diz respeito ao cenário gerado para a navegação de ambiente virtual, os

objectos 3d deverão comportar um nível de detalhe identificativo de cada

departamento mas que não afecte a performance da engine do Unity. A

iluminação dos departamentos provém sobretudo da luz natural e dos objectos

luminosos criados para o efeito. As câmaras deverão apenas aproximar-se de

15

objectos modelados, mantendo-se afastadas dos limites do campus, repostos

por fotografias.

O discurso utilizado no Website deverá respeitar as seguintes normas:

Utilização da voz activa em vez da voz passiva;

Evitar repetição de palavras (com excepção de dar ênfase ou destaque);

Discurso semi-formal;

Utilização de blocos com uma média de 10 a 13 palavras (65 a 70

caracteres) em textos descritivos/explicativos;

Utilização de blocos com uma média de 8-12 palavras em textos de

destaque e de promoção;

Espaçamento 1,5 entre titulo e texto e espaçamento simples entre

linhas;

Utilização da 2ª pessoa do singular (discurso semi-formal);

16

Estudo de interfaces

Estudo da grelha (atomic grid units)

O estudo de grelha apresenta um determinado contexto. É necessário efectuar

a divisão em áreas, estabelecer a dimensão mínima e máxima de resolução,

aquando o desenvolvimento do estudo.

O layout de interface utilizado pela equipa baseia-se no atomic base units (em

que há a divisão em quadrados de 4 pixeis). É de referir que o website está

pensado para a resolução mínima de 1024x640 e resolução máxima de

1280x800.

Página genérica:

No intuito de transmitir ao utilizador a sensação de coerência e familiaridade

entre as diferentes páginas Web, presentes no site, o grupo de trabalho decidiu

criar uma página “base”, podendo também ser intitulada como página “mãe” de

todas as outras páginas presentes ao longo da plataforma. Desta forma, a

estrutura base é constituída por menu e footer (que estarão com as mesmas

dimensões em todas as páginas), slider/Imagem de fundo (que possui variância

ao nível da sua altura). O conteúdo diverso de cada página está presente nas 3

colunas representadas, podendo estas unirem-se ou subdivirem-se, ao longo de

cada página, justificando desta forma a necessidade organizacional de

disponibilização de um dado conteúdo, quer seja do tipo textual ou imagético.

17

Fig.14-Representação do ecrã genérico

Os ecrãs essenciais para o estudo de grelha que apresentam qualidade

emblemática e interacção completa, são:

Página inicio:

O ecrã inicio abrange a área de conteúdo que corresponde à divisão em três

colunas. Esta é constituída pelo cabeçalho que abrange a área de login/registo,

área de navegação, área de conteúdo e rodapé. É de referir, que as alterações

efectuadas em relação à página base do website, verificam-se no tamanho da

altura do slider, tendo como consequência directa, a redução de altura das 3

colunas base de inserção de conteúdos.

Fig.15. Representação das diferentes áreas do ecrã inicial

18

Fig.16 - Representação das diferentes áreas do ecrã inicial com medidas

Fig.17. Representação dos diferentes ecrãs com guias e medidas

19

Fig.18- Representação final do ecrã inicial

20

Página Memorias:

A página blog subdivide-se nas seguintes áreas: Cabeçalho (presença do botão

de registo/login), área de navegação, área de conteúdo e rodapé.

A área de conteúdo baseia-se numa subdivisão em duas colunas (a primeira

respeita os diferentes posts e comentários e a segunda é relativa à organização

e filtragem de posts em termos de datas, tags ou títulos). O rodapé subdivide-se

em três colunas.

Há que salientar a radicalidade criada, ao nível da mudança de organização da

página, comparativamente com a página genérica criada. Numa tentativa de

criar uma página “típica de blog”, houve a necessidade de subdividir em algumas

caixas, as 3 colunas base. Para o conteúdo de titulo, data, imagem e texto de um

dado post, uniram 2 colunas, com o objectivo de verificar uma largura suficiente

para a inserção do referido conteúdo. Ao invés, subdividiu-se a coluna da

direita, possibilitando assim a visualização dos últimos posts submetidos, sendo

estes links para os mesmos. Por fim, há que salientar o cuidado que a equipa de

trabalho teve, pois não alterou o menu e o footer, sendo estes sempre

constantes, ao nível das dimensões nas suas páginas, pois são elementos visuais

essenciais, no âmbito da identificação do site, e preponderantes para

estabelecer uma relação “familiar” entre as diversas páginas, caso não sofram

qualquer tipo de alteração.

Fig.19- Representação das diferentes áreas do ecrã inicial

21

Fig.20- Representação das diferentes áreas do ecrã inicial com as respectivas guias

Fig.21. Representação dos diferentes ecrãs com guias e medidas

22

Fig.22- Representação final do ecrã inicial

23

Página que integra a aplicação Unity4

A área do Unity subdivide-se em três colunas horizontais e verticais. É de referir

que o ponto de horizonte é centrado (onde aparece a mira) e a área útil

corresponde a 940px por 480px. O mapa apresenta-se como sendo um

elemento fixo no canto inferior direito, os menus no canto superior direito e o

ecrã contentor da informação abrangem o lado esquerdo.

No que diz respeito aos diferentes ecrãs despoletados pelos diferentes menus e

ecrã inicial, a divisão da grelha é feita com base em três colunas e respectiva

margem.

Fig. 23 – Estudo da Grelha da Aplicação Unity

4Dado que estas medidas terão sidas em conta na prototipagem, não se representou o ecrã final da aplicação. Porém, aconselha-se a consulta da DEMO gráfica e técnica como contextualização.

24

Fig. 24 – Estudo da Grelha da Escolha de Pontos de Interesse (POIs) do menu da Aplicação Unity

Fig. 25 – Estudo da Grelha do ecrã de Loading e processo de informação

Fig. 26– Estudo da Grelha do ecrã de Áudio e Gráficos

25

Página galerias

A área de conteúdos da página galerias subdivide-se em quatro colunas que

correspondem ao alinhamento das diferentes fotografias navegáveis.

Fig.27- Representação das diferentes áreas do ecrã inicial

Fig.28- Representação das diferentes áreas do ecrã inicial com as respectivas guias

26

Fig.29- Representação dos diferentes ecrãs com guias e medidas

Fig.30- Representação final do ecrã inicial

27

Estudo de interacção

Ao nível da interacção com o utilizador, esta é feita através da utilização de

lightboxes para despoletar os diferentes serviços de login, para o upload de

fotografias bem como o respectivo feedback.

Em termos de interacção no Unity, o utilizador ao clicar sobre determinado

edifício, aparece um elemento GUI (Graphical User Interface) com informação.

Este ecrã desliza da esquerda para a direita, permanecendo do lado esquerdo.

Fig. 31: Exemplo da utilização da lightbox no openid

Fig. 31 – Exemplo da utilização dos contentores com informação

28

Mapa de Navegação

Fig. 32 – Mapa de navegação do website e aplicação

A página principal abarca diferentes menus: Sobre (submenus Projecto e

Equipa), Campus (submenus Visita Virtual, Visita Guiada, Memórias e Galeria),

Ajuda e Contactos. Na página Inicial, o utilizador tem ainda acesso às áreas de

login e de pesquisa (despoletam diferentes ecrãs).

A área Memórias abrange ainda os ecrãs de Inserir conteúdos e inserir

comentários. É de referir, ainda, que há uma relação horizontal entre diferentes

ecrãs, harmonizada através de links.

A visita Virtual é o ecrã que respeita a aplicação. Nesta procede-se a mesma

relação horizontal entre os diferentes menus e embutido na própria aplicação

estão os diferentes edifícios que dão acesso a informação e galerias do edifício

bem como o ecrã de acesso ao mapa.

29

Modelo/Arquitectura do Sistema

Fig. 32– Tabela de linguagens (simples) e a gestão Wordpress quer front e back office

Fig. 33 – Arquitectura de Sistemas (por utilizadores e linguagem)

O projecto virtUA está pensado para diferentes contextos e o acesso de

diferentes utilizadores (não registado, registado e admin). Todos acedem ao

projecto através da inserção do url no browser e acedem ao servidor mediante

o login (caso do utilizador registado e administrador – envio de posts e

imagens). Quando procede-se à inserção do URL na página, há o http request da

página por parte do utilizador e é-lhe devolvido a página estruturada em html

com o respectivo css e javascript.

30

Do servidor ao wordpress, há o envio de diferentes posts por parte do utilizador

e consequencialmente para a base de dados em que é feita a gestão de

informação para aparecer quer na aplicação de navegação virtual quer nas

galerias.

Fig. 34 – As diferentes layers da arquitectura de sistemas (retirado do website da Janrain Engage)

Fig. 34.1 – arquitectura de sistemas (por módulos)

31

Fig. 34.2 – Arquitectura de sistemas – detalhe módulo login

Fig. 34.3 – Arquitectura de sistemas – detalhe módulo Unity

32

1.Em que é que se baseia o sistema?

O sistema subdivide-se em duas áreas completamente distintas (client side –

visível para o utilizador final e server side – respeitante ao servidor e não visível

ao utilizador final).

O utilizador accede ao sistema através do browser, inserindo o URL, fazendo

uma requisição da página via HTTP(S) ao servidor, à qual é devolvida a página.

O website é constituído por várias páginas em que uma destas contém a

aplicação de navegação virtual (Unity) que comunica com a base de dados.

Trata-se de um content management service (CMS) – wordpress, gerido por

quarto administradores e em que há utilizadores não autenticados (visualizam a

informação) e autenticados (contribuem com posts e comentários no blog) com

a ligação das suas contas a outros serviços, nomeadamente facebook, twitter,

google, openID, wordpress e linkedin).

No que diz respeito à aplicação Unity, esta irá recolher as fotografias inseridas

no website através de javascript. Caso não seja possível recolher esse conteúdo,

este já existe por defeito na aplicação (no entanto, pode estar desactualizado).

2. Como é que é feita a divisão entre zonas públicas e zonas privadas?

Para esta divisão, existe uma área de login onde qualquer utilizador pode

registar-se através de uma conta que tenha nos serviços supra-citados. O

website, em geral, é acessível publicamente e as zonas de inserção de posts,

comentários, mecanismos de share e like só são possíveis através do

registo/login do utilizador.

3. Como é que o utilizador visualiza a informação?

Basta ao utilizador ter instalado no seu computador um browser, com pelo

33

menos 2 anos, e aceder ao URL do projecto. Este não precisa de estar registado

e autenticado para visualizar toda a informação presente no website e aplicação

de navegação virtual. Poderá apenas ter de instalar um plugin da aplicação

unity3D, cuja instalação é idêntica à do Adobe Flash.

4. Quais são as funcionalidades do administrador?

O administrador tem a seu cargo a gestão de conteúdos inseridos pelos

utilizadores registados. Faz também a gestão de utilizadores, tendo a seu cargo

as funções de criação, leitura, actualização e eliminação de conteúdo (CRUD).

5. Como é feita a gestão de conteúdos?

Toda a gestão de conteúdos é feita através do CMS Wordpress, que tem

ferramentas próprias para essa gestão, incluindo algumas com controlo

automático. Essa gestão será descrita ao longo deste documento.

6. Como é que se estabelece o controlo de interface?

Para controlar a interface web e de aplicação virtual utiliza-se o teclado e rato

do computador.

9. Como é que é feita a validação da informação?

A validação da informação é feita automaticamente através de ferramentas

incorporadas na CMS wordpress, através da implementações em PHP e

Javascript, bem como manualmente pelos administradores que gerem a

aplicação.

11. Como é feita a gestão de sessão?

O plugin instalado no wordpress, Janrain Engage, vai fazer a ponte entre o

gestor incorporado no Wordpress e as APIs dos ID providers. Após

34

autenticação toda a gestão de sessão é executada pelo Wordpress.

12. Como é feito o backup da Base de Dados?

O backup da Base de Dados é feito através de um plugin da WP-DB-Backup.

13. Que tipo de informação é armazenado na Base de Dados?

A base de dados é completamente gerida pelo Wordpress, pelo que a

informação lá colocada é feita de forma automática. Pode-se no entanto referir

que a base de dados vai armazenar os dados (nomes e emails) dos utilizadores,

os seus posts e comentários, bem como os caminhos para as fotografias

inseridas.

14. Como é feita a ligação à base de dados?

A ligação à base de dados é feita através do servidor web, gerido pelo

Wordpress, utilizando as linguagens PHP e MySQL.

15. Como é que são enviados os dados para o Unity?

O Unity3D vai fazer uma ligação ao servidor web, comunicando por javascript

para um contentor específico nesse servidor contendo a informação que se

pretende. Esses dados são transmitidos para o computador cliente, e é colocado

em pastas temporárias.

35

Fluxograma

A fim de ilustrar as diferentes interacções com a aplicação e ilustrar todo esse

processo, servem os seguintes fluxogramas para representar o módulo post,

comentários, timeline, aplicação de navegação virtual e loader.

Fig.35- Módulo de inserção de post no Website

Neste módulo, é necessário efectuar login para inserir um novo post. O

utilizador terá que inserir o título, corpo do texto, categoria e imagens. Todos os

campos terão que ser validados e proceder-se à ligação à Base de Dados –

servidor. Se o post incluir imagem, o sistema armazena a fotografia original e a

36

com menor qualidade. Posteriormente é enviado feedback - Post enviado. A

segunda situação contempla o conceito de sessão (utilizador logado/não

logado).

Fig.37- Fluxograma do login/registo do utilizador

Neste fluxograma, é muito importante o conceito de sessão em que há o login/registo.

O sistema verifica se o utilizador tem conta no virtUA, se este é incorrecto ou se é

reconhecido. O mesmo escolhe o ID provider e à posteriori, procede-se à ligação/

confirmação da criação da conta e à inserção e validação de dados de login.

3 4 5

37

Fig.36- Fluxograma do arranque (loading) da aplicação embebida no website

O projecto subdivide-se em duas vertentes: página web e a aplicação embebida. No

website, há a timeline principal e a selecção do espaço temporal de navegação virtual.

A aplicação embebida corresponde ao Unity 3d em que se procede à instalação do

plugin, loading e o acesso às preferências da aplicação e respectivo menu.

Fig.38- Fluxograma do menu durante a interacção com aplicação de navegação virtual

38

O controlo de navegação é feito através dos menus mapa, ajuda e volume. Em

volume, o utilizador poderá controlar o volume e a ausência de som. No mapa da

aplicação, o utilizador pode controlar e verificar a sua posição na aplicação.

Fig.39- Fluxograma do menu de opções da aplicação de navegação virtual

O fluxograma parcial de interacção com a navegação virtual corresponde a uma

escolha múltipla de várias opções (alteração da qualidade de gráficos e do

volume de som), ajuda e saída da aplicação.

39

Fig.40- Fluxograma da navegação na aplicação de navegação virtual

Fig.41- Fluxograma da escolha de nova interacção durante a aplicação de navegação virtual

Os presentes fluxogramas mostram como é feita a interacção com a aplicação

de navegação virtual e o fluxo que existe quando o utilizador já está a interagir

com a aplicação.

40

Fig. A – Fluxograma geral da aplicação embebida de navegação virtual

41

Componentes Wordpress

Plugins CMS adoptados

OptionTree

o OptionTree tenta fazer a ponte entre os developers, designers e

utilizadores finais, resolvendo o administrador questões User

Interface que poderão surgir quando se criar um tema

personalizado.

42

Janrain Engage

o Janrain Engage aumenta registos no site e gera tráfego de

referência para o seu site, permitindo aos utilizadores um registo

fácil e login através do Facebook, Google, Twitter, Yahoo,

LinkedIn e outras redes sociais.

HTML Javascript Adder

o Plugin para adicionar javascript, código HTML, publicidade e até

mesmo textos simples próprios de contentores com

funcionalidades avançadas que direccionam para posts e páginas

web

Wordpress Facebook Like Plugin

o O plugin Wordpress Facebook Like permite aos visitantes do

website colocar "Like" nos posts publicados e automaticamente,

promove-los, pois esta acção será mencionada no Mural de cada

utilizador que colocar o referidp 'Like' no post. Este plugin

também é caracterizado por possuir opções de administração e

limitação de quais os posts que poderão ter esta funcionalidade.

Também possui uma contagem de pessoas que partilharam uma

dada publicação.

43

NextGEN Gallery

o NextGEN Gallery é um plugin que contém uma galeria de

imagens, tendo a opção de visualização do tipo slideshow. A dupla

vantagem de utilizar este plugin é a sua facilidade de uso e

manutenção que o plugin permite ao administrador, e

simultaneamente, a simplicidade de visualização para o utilizador

comum.

WP Google Fonts

o O plugin para wordpress da Google fonts é extramamente

vantagoso para a criação e manutenção do website, pois possui

uma abrangente e diversificada natureza de tipos de letra,

possibilitando muitas fontes serem do tipo "WebSaver".

Counterize II

o É um plugin de Simples contagem de visitantes de cada página do

website, da forma como o utilizador encontrou o website (por

exemplo: palvras que escreveram no motor de pesquisa até

chegar ao site). Também indica a percentagem de visitas, tendo

como referência o browser utilizado para visitar o site.

44

Fast Secure Contact Form

o Este plugin permite a integração de formulários para o utilizador

comunicar com a administração do site, enviando uma mensagem,

por exemplo. Possui validação de campos de formulários,

dificultando assim a existência de "Spam", ao usar o referido

plugin. Inclui um suporte CAPTCHA e Akismet, nunca

necessitando de JavaScript.

Favicons

o Possibilita a escolha a integração do favicon pretendido, afim de

facilitar o reconhecimento do website, por parte dos utilizadores.

User Resolution Logger

o O plugin User Resolution Logger Plugin permite verificar as

estatísticas de visitantes do website, tendo como critério base a

resolução de ecrã de cada visitante.

WPtouch

o Tem a vantagem de formatar o website com um tema (escolhido

pela administração) especificos para mobile, possibilitando assim

aos visitantes com iPhone / iPod touch, Google Android ou

windows phone visitarem o website, noutro dispositivo

tecnológico

WP Maintenance Mode

o "Este plugin permite adicionar uma página inicial no website,

dando a conhecer aos utilizadores o facto de este estar em

manutenção, num dado momento.

Exec-PHP

o Executa o código PHP em partes especficas dos posts e do blogs,

podendo-se configurar os referido código em widgets de texto.

45

Akismet

o Sendo um plugin bastante utilizado e conhecido no "mundo"

wordpress, o Akisnet protege de forma eficaz, o website de Spam

em comentários.

WP Super Cache

o Este plugin gera arquivos HTML estáticos a partir dowebsite.

Depois de um arquivo HTML ser gerado no servidor web, este

será utilizado, evitando assim a possibilidade de tornar o website

mais lento e complexo.

Google Analytics

o Google Analytics é um serviço gratuito oferecido pela Google,

sendo conhecido por ser o melhor motor de tracking. Foi criado

principalmente como um auxilio aos administratores de websites,

no intuito de optimiza ras plataformas web, ao nível de conceitos

de marketing.

Robots Meta

o O plugin facilita a inserção de tags, apropriadas a cada página,

desativando também arquivos não utilzados durante bastante

tempo (tempo este definido pela administração do site)

WP-DB-Backup

o Permite uma fácil gestão de backups das bases de dados do

website.Permite guardar outras tabelas e integrá-las na mesma

base de dados.

All in One SEO Pack

o Optimiza o website produzido em wordpress para os motores de

busca mais utilizados.

46

Q&A (perguntas e respostas)

Aplicação de navegação virtual no Campus de Santiago

A aplicação vai tentar recolher as fotos mais recentes, enviadas pelos

utilizadores e administradores da plataforma.

o Como se coloca a aplicação gerada pelo unity3D a funcionar no

website?

Após a criação da aplicação, esta é exportada (encapsulada) e

colocada na página para ser lida, assim como um ficheiro flash

(SWF). Após a instalação do player unity3D, ele irá reconhecer

todo o conteúdo.

Embora a aplicação esteja preparada para receber conteúdo

externo, sempre que forem necessárias alterações de fundo na

aplicação (alteração de objecto, menus, etc) é necessário novo

encapsulamento e troca do ficheiro gerado, no servidor. Esta

troca apenas é disponível a administradores.

o Qual a relevância de fazer uma ligação à Base de dados para recolher

nova informação e fotos se a aplicação já tem por defeito?

Porque um dos objectivos da aplicação passa por partilhar

memórias e histórias que aconteceram no campus. A integração

do blog servirá mesmo nesse propósito e, se tudo correr como

planeado, originará muitas imagens (fotos e documentos) sobre

o campus. Para evitar estar constantemente a actualizar o

ficheiro encapsulado criado no unity, resolveu-se fazer essa

actualização de forma dinâmica. Dessa forma aplicação irá ligar-

se à base de dados e recolher todas essas imagens. Esse

dinamismo também permite a correcção de erros, bugs e

imprecisões.

o Porque motivo a aplicação redimensiona as fotos enviadas pelos

utilizadores?

47

Porque as fotos enviadas podem ter até 4Mb de tamanho

máximo, e além disso, podem ter uma resolução muito alta, não

necessário para a visualização dentro da aplicação. Caso

houvessem muitas fotos com um tamanho muito elevado,

poderia gerar graves problemas de navegação e streaming de

dados. Dessa forma, o plugin NextGen Gallery vai

redimensionar para 800x600 e reduzir a qualidade em 70%

(caso seja necessário).

o Porque razão a aplicação não faz essa recolha enquanto está a fazer o

loading da aplicaçao?

Por motivos de rapidez e eficiência. No caso de haver muitas

imagens para download, corria-se o risco da aplicação demorar

muito tempo a fazer o loading no arranque da mesma. Além

disso, não seria eficiente porque a aplicação poderia

eventualmente estar a recolher imagens que o utilizador não iria

ver. Assim sendo o download das fotos apenas acontecerá

quando o utilizador escolher ver a galeria de fotos de dado

edifício, fazendo a recolha apenas relativa ao mesmo.

o A aplicação apresenta-se num formato widescreen (estilo 16:9). O

que motivou isso?

Verificou-se que o uso de um formato menos largo (como

apresentado nas demos técnica/gráfica, poderia prejudicar a

visualização do campus, quando a interface apresenta informação

contextual (do lado esquerdo), juntamente com o mapa no canto

inferior direito.Ao “alargar” área do ecrã, aumenta-se bastante a

área útil de observação do campus 3D. Outro motivo para a

alteração do formato foi a melhor adaptação à largura do

template, ajustando-se também às regras (guidelines) que foram

sendo criadas para o mesmo. Também se verificou que é cada vez

48

maior o número de monitores que usam formatos wide, como se

pode verificar pela tabela em anexo 4.

Timeline

A timeline de visualização da história do Campus da Universidade de

aveiro situa-se externa à aplicação de navegação, estando apenas incluída

na página do website. A timeline, em alguns dos períodos temporais

retratados, terá links de acesso ao campus virtual, dependente da escolha.

o Como será concretizada a timeline?

Ao invés do que tinha sido pensado inicialmente, a timeline não

será implementada através de um plugin do wordpress, dado

serem bastante redutores relativamente ao que o grupo

pretende. Dada essa limitação, a timeline será criada através de

jQuery (JavaScript) que posteriormente será integrada na

página respectiva.

o De que forma a existe essa interacção entre a timeline e a aplicação?

A aplicação aceita variáveis de entrada (em JavaScript) que

serão diferentes conforme a opção escolhida. Cada uma dessas

opções remete a aplicação para um nível diferente, que terá

conteúdo diferente (mais ou menos edifícios, terrenos

modificados, entre outros) conforme a época.

o Porque motivo não se incluiu uma timeline na própria aplicação?

Considerou-se que seria redundante incluir na aplicação outra

timeline, dado que já existe uma na página web e o Unity

permitir esse tipo de dinamismo com entidades externas.

Sistema Login

Implementado através de um plugin que permite interligação com API's

externos. Esses têm base de dados de milhões de utilizadores, sendo

credíveis e fidedignos.

o Qual a razão de usar um plugin externo e não o sistema de

utilizadores do wordpress?

49

Pela extrema facilidade de registo na aplicação virtUA que este

tipo de implementação permite. O utilizador não necessita de

responder a mais um questionário de registo numa nova

aplicação, ajudando desta forma a usar eficientemente o seu

tempo, poupando recursos.

o E é seguro?

Sim, as API's escolhidas são conhecidas por apresentar sistemas

fidedignos.

o Mas não era para se usar o sistema de Utilizador Universal (UU)

utilizado na U.A.?

A utilização do UU representava despender algum tempo na sua

implementação, além de obrigar a conversações com diversas

entidades, o que poderia, muito facilmente, demorar mais tempo

do que o previsto para produção do projecto. O sistema

adoptado, conceptualmente, apresenta-se idêntico ao uso do

UU (utilizadores já existem, partilha-se alguma info para criação

dos utilizadores) pelo que no futuro, com menor esforço, é

possível a integração do UU, com um sistema idêntico ao usado

no paco ou sapo campus.

o Os utilizadores ficam automaticamente registados no site virtUA,

após confirmação de ligação ao provider ID? (ex. ligação ao facebook)

Sim, ao fazer a ligação com a aplicação externa e concordar com

a partilha de informação entre os mesmos (ex. virtUa <->

facebook), o wordpress cria automaticamente um utilizador

novo na sua base de dados (com alguns dados partilhados pela

API externa), com permissões de "autor", que permite apenas

criar posts novos (com ou sem imagens) e alterar os seus dados.

o Mas não é inseguro criar automaticamente utilizadores novos, que

podem inserir conteúdos impróprios?

O facto do utilizador usar um login próprio, já com histórico

próprio (ou rasto) e reconhecido por colegas e amigos, já instiga

o utilizador a fazer uma interacção com o mínimo de cuidado.

50

Outras questões

o Porque é que é necessária a ligação à BD (Base de Dados) para obter

informação/fotografias sobre o edifício escolhido?

É necessária a ligação à Base de Dados para ter acesso a

informações actualizadas/corrigidas e a novas fotografias

partilhadas pelos utilizadores.

o Porque não recolher informação/fotografias no momento de loading

da aplicação?

O loading poderia ficar extremamente lento e comprometer a

eficiência da aplicação e daí diminuir a satisfação do utilizador

final. Alem disso, o utilizador poderia estar à espera de

informação que não pretendia visualizar.

o Qual a cor principal em termos de identidade do projecto? Porquê?

A cor principal em termos de identidade do projecto é o laranja,

dado ser a segunda cor que a comunidade académica associa à

Universidade de Aveiro ser representativa dos tijolos dos

departamentos. Facilmente se associa o projecto à UA,

transmitindo vivacidade e dinamismo.

51

Anexo 1: Brainstorming de valores e conceitos do projecto

Este esquema ilustra alguns dos conceitos do projecto que ajudaram no

processo de escolha do nome do projecto. É de referir que alguns destes

conceitos auxiliaram a construção da identidade do projecto, valores da equipa

e a envolvente contextual.

52

Anexo 2: Nomes para o Projecto5 Nome Vantagens Desvantagens UARhere Portador de significado

(UA+Augmented Reality+ here)

Não satisfaz os requisitos de pronúncia e extensão

VirtUA (Virtual+UA) Apropriado Brevidade Diferenciação Susceptível de representação gráfica

Algumas diferenças na pronúncia de a por ã

Evolua (Evolução +UA) Apropriado Brevidade Diferenciação

Não satisfaz de forma directa o requisito de empatia (proximidade)

Campus Navigation Apropriado Susceptível de representação gráfica

Não satisfaz o fenómeno de brevidade Não apresenta consistência dado que a informação se apresenta em português

Campus Virtual Susceptível de representação gráfica

Composto por 2 palavras

CampusTech Junção das vocábulos Campus + Technologies

Não é associável

NavegUA Diferenciação Susceptível de representação gráfica

Dificuldade de associação ao projecto

ETUA Portador de significado: Evolução Temporal da UA Facilmente pronunciável

Não satisfaz o requisito de empatia (proximidade)

Nav3D Brevidade Valor da atenção

Presença do número Dificuldade de retenção

Campus3D Representativo do projecto Apropriado

Presença do número A existência de vários projectos na Universidade com a designação campus

Go.UA Brevidade Dificilmente se associa ao âmbito/objectivo do

5Este é um processo que provém da selecção de 89 nomes de brainstorming

53

projecto UA.visit Brevidade

Separação do nome por um . (não muito próprio para inserir no url)

microUA Brevidade

Ambiguidade do nome na representação da aplicação

inCampus Brevidade A ideia de estar dentro do campus é reforçada

A existência de vários projectos na Universidade com a designação campus

InterUA/InterCampus Associação do projecto à Universidade de Aveiro

A existência de vários projectos na Universidade com a designação campus A imagem que o projecto apenas inclui a comunidade académica e não se extende a outro público-alvo

verUA Brevidade Não satisfaz o requisito de empatia (proximidade) Difícil associar-se ao projecto

VirtualC Brevidade Susceptível de representação gráfica

Dificuldade de associar C a Campus, pode gerar ambiguidades

Galeria76/Campus76 Portador de significado Representativo da data de criação do Campus de Santiago

Não se associa facilmente a numeração à criação do Campus

ArcUA Portador de significado (Architecture/Archive+UA)

Alude a um projecto de arquitectura; Não transmite a imagem de modernidade;

on.UA/in.UA/at.UA Preenche o requisito de brevidade Ritmo

Não apresenta consistência dado que a informação se apresenta em português

54

Anexo 3: API’s de Facebook e Twitter

55

Anexo 4: tabela de resoluções de ecrã

retiradodeW3Schools

(http://www.w3schools.com/browsers/browsers_resolution_higher.asp)

nota: apesar da resolução mais usada não ser widescreen (1280x1024), a soma de todas as outras que o são (praticamente todas as outras), representa uma enorme maioria (> 50%).