virtUA - especificaçao técnica e gráfica by Paulo Alexandre Dias

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

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.

1 Consultar Anexo2: Nomes para o Projecto

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.

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

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.

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

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

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

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 (CampusMamó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 (CampusVisita Guiada)

Metonímia

Avançar do video (Campus – Visita Guiada)

Metonímia

Erros do sistema, servidor

Lítotes

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:

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

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), tevese 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

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.

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

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

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);

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.

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

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

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

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

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

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

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

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

4 Dado 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.

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

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

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

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

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

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.

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.

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)

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

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

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

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

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.

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

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.

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

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.

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.

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

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.



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.



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.



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.



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.

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.

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.

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á ligarse à base de dados e recolher todas essas imagens. Esse dinamismo também permite a correcção de erros, bugs e imprecisões.

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



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,

plugin

NextGen

Gallery

vai

redimensionar para 800x600 e reduzir a qualidade em 70% (caso seja necessário).

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.

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

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.

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.

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.

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.

Qual a razão de usar um plugin externo e não o sistema de utilizadores do wordpress?



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.

E é seguro? 

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

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.

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.

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.

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.

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.

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.

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. Ă&#x2030; de referir que alguns destes conceitos auxiliaram a construĂ§ĂŁo da identidade do projecto, valores da equipa e a envolvente contextual.

Anexo 2: Nomes para o Projecto5 Nome UARhere

VirtUA (Virtual+UA)

Evolua (Evolução +UA)

Campus Navigation

Vantagens Portador de significado (UA+Augmented Reality+ here)

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

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

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

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

Não satisfaz o fenómeno de brevidade

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

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

Campus Virtual

Susceptível de representação gráfica

CampusTech

Junção das vocábulos Campus + Technologies

Não é associável

NavegUA

Diferenciação Susceptível de representação gráfica Portador de significado: Evolução Temporal da UA Facilmente pronunciável Brevidade Valor da atenção Representativo do projecto Apropriado

Dificuldade de associação ao projecto

ETUA

Nav3D Campus3D

Go.UA

Brevidade

Não satisfaz o requisito de empatia (proximidade) Presença do número Dificuldade de retenção Presença do número A existência de vários projectos na Universidade com a designação campus Dificilmente se associa ao âmbito/objectivo do

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

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

UA.visit

Brevidade

microUA

Brevidade

inCampus

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

InterUA/InterCampus

Associação do projecto à Universidade de Aveiro

verUA

Brevidade

VirtualC

Brevidade Susceptível de representação gráfica Portador de significado Representativo da data de criação do Campus de Santiago Portador de significado Alude a um projecto de (Architecture/Archive+U arquitectura; A) Não transmite a imagem de modernidade; Preenche o requisito de Não apresenta brevidade consistência Ritmo dado que a informação se apresenta em português

Galeria76/Campus76

ArcUA

on.UA/in.UA/at.UA

Ambiguidade do nome na representação da aplicação A existência de vários projectos na Universidade com a designação campus 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 Não satisfaz o requisito de empatia (proximidade) Difícil associar-se ao projecto Dificuldade de associar C a Campus, pode gerar ambiguidades Não se associa facilmente a numeração à criação do Campus

Anexo 3: APIâ&#x20AC;&#x2122;s de Facebook e Twitter

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

retirado de W3Schools (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%).