Introdução O presente documento serve como guia do protótipo de alta-fidelidade. Após o grupo ter procedido à especificação gráfica e técnica, segue-se o momento de proceder à fase de prototipagem. Deste modo, este documento encontra-se subdividido nas seguintes secções: Mapa de navegação e áreas - alvo de prototipagem Profundidade de implementação o A implementar totalmente
Página inicial Login Sobre • Projecto • Visão e Missão • Equipa Campus • Visita virtual • Memórias Contactos
o A implementar parcialmente
Ajuda Navegação Informação de edifícios Ajuda Opções
o Por implementar
Visita Guiada Galeria Mapa
Dificuldades Conclusão e Reflexões sobre a Prototipagem É de referir que esta fase de implementação aumenta a sensação de realização por parte da equipa, assumindo uma importância crucial no desenvolvimento de vários módulos em paralelo, restrição da ocorrência de erros de programação/ autoria a cada módulo e a realização de testes à aplicação no início do desenvolvimento e rentabilização do código.
Mapa de navegação e áreas - alvo de prototipagem O presente protótipo retrata as diferentes áreas / funcionalidades com as funcionalidades alvo de prototipagem:
Fig.1 – Mapa de Navegação, enquadrado na prototipagem É de sublinhar que a equipa preocupar-se-á mais com a solução técnica em várias instancias do que propriamente a gráfica, dado a complexidade de algumas funcionalidades. O desafio primordial desta entrega passará pela ligação do programa Unity com a timeline interativa presente no website do projecto (como se processa a comunicação).
Profundidade de implementação No mapa de navegação apresentado, pode-se verificar a profundidade de implementação das áreas alvo de prototipagem. O esquema cromático assinala as diferentes profundidades de implementação do protótipo. Atente-se que as áreas assinaladas a verde correspondem a estruturas que serão implementadas a nível gráfico e técnico, estando bastante próximas do que será apresentado do produto final. A cor azul corresponde a áreas implementadas parcialmente com baixo detalhe gráfico ou em profundidade completa a nível de conteúdo. Por fim, a cor vermelha corresponde a áreas não implementadas/prototipadas. A implementar totalmente Página inicial
Fig.1 - Homepage A página inicial mostra a informação que todas as outras páginas albergam. Esta apresenta o link que direciona para a visita virtual, todos os menus de navegação e a informação principal do que se poderá encontrar nas restantes páginas.
É de referir que esta integra uma slider que recorda e transmite o âmbito do projeto. Adoptou-se uma estrutura dropmenu e o feedback do submenu selecionado é reforçado através do contraste de cores (permite a mesma percepção a preto e branco). Ao nível da implementação, procedeu-se ao alinhamento das diferentes informações, tendo por base a divisão em três colunas, a mudança de cores dos botões, comportamento da barra de navegação e inserção da área de login. É de referir que se utilizou a versão mais recente de CSS (Cascading Style Sheet) – CSS3, a fim de apresentar transições e efeitos de animação e facilitar quer a equipa quer os utilizadores face às transformações na apresentação de um Website tendo presente os novos browsers como Google Chrome, IE9, Opera, Firefox e Mozillla. Login
Fig. 2 – Login na aplicação O login na aplicação é estabelecido com recurso a um plugin, designado por Janrai. Após uma pesquisa intensiva sobre modos de login em websites ( ex.: OpenID) e o teste dos mesmos, consulta de fóruns e outras ferramentas de comunicação (a)síncrona, chegou-se à conclusão que o melhor plugin a integrar era o Janrai , dado que seria o melhor que simulava o utilizador universal. Este login é implementado deste modo, dado o intuito de integrar o utilizador Universal perante a acepção/validação do projecto por parte da Universidade. O registo com a integração das redes sociais faz com que se estabeleça a facilidade de partilha e contribuição de informação. O ecrã despoleta através de uma lightbox, dado não ser necessário efetuar o carregamento da página.
Sobre Projecto A página Projecto contém toda a informação de contextualização e âmbito do projecto. As imagens nas diferentes páginas assumem a função apelativa para chamar atenção e ilustrar a informação.
Fig. 3 – Sobre Projecto Visão e Missão Esta página segue a mesma estrutura da página Sobre - Projeto. Esta página não estava, inicialmente, contemplada na Especificação gráfica. Porém, dada a importância da quantidade de informação presente na página “Sobre Projecto”, estando presente no website do projecto, no intuito de oficializar / institucionalizar o mesmo, esta estaria sobrecarregada de conteúdos textuais, podendo provocar alguma “fadiga” na navegação do utilizador, através da presença de extenso scroll. Assim sendo, optou-se por criar uma nova página, estando disponibilizada num novo submenu, exclusivamente para a Missão, Visão e os valores do projecto.
Fig. 4 – Visão e Missão Equipa
Fig. 5– Equipa A página Sobre Equipa apresenta a ficha dos responsáveis do projecto bem como o agradecimento a um conjunto de entidades. Campus Visita virtual Timeline
Fig. 6– Timeline A evolução do espaço temporal do Campus de Santiago é um dos conceitos-chave do projecto virtUA. Deste modo, o grupo do projecto virtUA decidiu criar uma timeline com a finalidade de proceder a uma segmentação do tempo em intervalos que dizem respeito às construções dos departamentos e espaços envolventes – tendo por base a data inicial e final de funcionamento de cada departamento. Foi feita a divisão em cinco intervalos de tempo: 1976-1984, 1985-1993, 1994-2000, 2001 – 2007, 2008-2011. Esta divisão prende-se à necessidade de criar uma estrutura dentro do website que possibilite o utilizador escolher o espaço temporal. É de referir que foram considerados alguns princípios: Limitação a 3 cliques (contribui para a maximização da usabilidade e facilidade de acesso), possibilidade da página carregar o ficheiro só uma vez (a aplicação é suportada em máquinas com diferentes características), escolha do espaço temporal sem (re)carregar a página (redução do carregamento das páginas) e compatibilidade com a maior parte dos browsers (compatível com maior parte dos browsers). Ao nível da implementação, o utilizador seleciona o espaço temporal desejado, visualiza a fotografia que caracteriza a época, representada no “slider” constituinte da timeline e esta apresenta o link para entrar nessa navegação. Por sua vez, caso o utilizador queira navegar para outro espaço temporal, este escolhe-o através dos botões disponibilizados. É de salientar o facto do espaço temporal ser selecionado e enviado através de javascript, representativo do dito intervalo. Desta forma, o Unity poderá interpretar o intervalo de tempo que deverá ler e executar. A implementação da timeline é feita com base na biblioteca de javascript
(Jquery) com a dupla vantagem de criar um ambiente de pura navegação e evolução das datas e imagens. Mudança de nível no Unity – Interação com a Timeline
Fig. 7– Integração do Unity com a Timeline O desafio primordial deste protótipo de alta-fidelidade diz respeito à interação da timeline com o Unity. Através da função external call e funções pré-criadas no javascript da página, estabelece-se a comunicação do Unity com a página Web. Na timeline, para garantir ao utilizador a possibilidade de escolher um novo período temporal, utilizou-se a função Sendmessage ().
Fig. 8– Script para escolha do nível (período temporal).
É de referir que para estabelecer a ligação do Unity e a sua comunicação com a Web, esta é feita através da função unityObject. Esta última função estabelece a detecção e comunicação num único ficheio javascript que permite embeber o código nas páginas web. O grupo, ainda, implementou um sistema de cookies que armazena/guarda as coordenadas atuais do utilizador no espaço Unity e que repõe a sua localização. Assim, na próxima navegação, sabe-se a posição em que o utilizador estava. Este sistema de cookies armazena também as opções de som e qualidade de gráficos escolhidos pelo utilizador. As coordenadas da posição do utilizador são gravadas numa pasta temporária do Sistema Operativo e depois há a recuperação dessas coordenadas pelo sistema e a colocação do utilizador no Campus. Embora para melhor compreensão se utilize o termo cookies, na realidade não se trata realmente dessa funcionalidade. Como referido, todas as variáveis são gravadas numa pasta criada propositadamente para o efeito, sendo acedida pela aplicação sempre que for estabelecida a comunicação, isto através de qualquer browser. Ou seja, qualquer que seja o browser a usar, o utilizador vai manter as suas preferências e coordenadas espaciais da navegação no Campus.
Fig. 9– Gravação de coordenadas numa pasta temporária do SO
Fig. 10 e 11– Obtenção das coordenadas pelo sistema e colocação do utilizador no Campus
Loading da Aplicação Unity Menu Escolha do Ponto de Entrada, Opções, Ajuda e Saída Para implementar estes menus foi necessário a criação de um Objecto de Interface Gráfica do Utilizador (TestGUIObj) em que se associou o Script para se associar o Menu e GUISkins – colecções de estilos GUI aplicados a cada elemento da interface. Assim, criaram-se os botões aos quais se associaram texturas para criar os pontos de referência nas respectivas coordenadas x,y bem como a altura e largura.
Áudio Na aplicação de navegação virtual, é possível ao utilizador ligar e desligar o som (clique na tecla V) e controlar nível do som, através do menu opções e controlando a slider do volume do som. Qualidade dos gráficos Na aplicação de navegação virtual, é possível ao utilizador controlar a qualidade dos gráficos da aplicação. Este poderá controlar a qualidade dos gráficos e balancear com a rapidez através do menu opções e controlando a slider da qualidade de gráficos. Opção fullscreen O utilizador pode ainda potencializar a sua experiência através da opção fullscreen – atalho f. Construção do Cenário e toda a envolvente O cenário e toda a envolvente foi construída no Unity, tendo por base a utilização da
Skybox Sol (Quantas fontes luminosas) Vegetação Passeio Água das salinas Edifícios 3D
Terreno A elaboração do terreno passa por diferentes processos desde a recolha de fotografias (aéreas), plantas, objetos existentes, identificação do tipo de vegetação existente e mapas topográficos bem como a sua análise. À posteriori, procedeu-se a uma composição/edição de um conjunto de fotografias tiradas sequencialmente que o grupo teve acesso e que retrata a imagem do terreno na
Ícones Interface de Navegação
Fig. –Ícones de interface presentes na navegação virtual Uma das componentes de apoio à interacção do utilizador com a aplicação é a presença de ícones representativos de algumas funcionalidades disponíveis para um dado utilizador. Tal como foi mencionado na especificação gráfica, os ícones estão situados no canto superior direito, sendo o comprimento da sua área ocupacional igual ao comprimento do mapa, situado no canto inferior direito, criando assim uma estrutura visual organizada e segmentada. É de referir também a necessidade que surgiu, ao nível da alteração do ícone de som, quando o utilizador interage com este. Verificou-se que ao clicar na tecla ‘’v’’, o utilizador poderia não percepcionar a alteração do ícone unicamente com o traço sobre a coluna representativa do som (como foi estabelecido na especificação grãfica). Assim sendo, de forma a fornecer uma maior eficácia de feedback ao utilzador, e, sendo cognitivamente mais fácil de percepcionar, procedeu-se à alteração de cor do ícone em questão, sendo o cinzento (cor com “menos vida”) representativa do estado off. Navegação Limites de navegação Mira Para a criação do dinamismo da Mira utilizou-se a função raycast: cria uma linha imaginária na frente da camara, com o comprimento que se pretende (no nosso caso: 200px), que permite interagir com a envolvente. Na aplicação ajuda a identificar os departamentos, para se poder mudar a mira (info) e poder ver a informação do mesmo.
Fig. 12 – Mudança de mira quando o utilizador navega pelo Campus
Memórias
Fig. 12 – utilização de raycast para identificar edificios
O espaço memórias funciona como um lugar de partilha e contribuição de fotografias, vídeos e outras informações relativas à evolução da Universidade de Aveiro. Esta página segue uma divisão de colunas em dois, em que a primeira diz respeito à informação a integrar (post do blog, ficheiros enviados, espaço de comentários, share/like) e a segunda coluna integra o arquivo, comentários recentes, tags e a ligação ao Facebook. Esta ligação ao Facebook estabelece-se através da API. Qualquer utilizador logado ter permissão para inserir posts/comentário. É de referir que editou-se o CSS para que os links assumissem a cor laranja do website. Contacto A página Contactos segue a estrutura de preenchimento de formulário, contacto com a equipa e a página de interligação com o facebook como se sucede com as restantes páginas. A elaboração do formulario é feito com recurso ao plugin Contact Form 7 e o ajuste ao website virtUA. API Facebook Fan Like Box
Fig. 13 – Presença da API da Página do Projecto do Facebook, em várias páginas do website
Uma particularidade que está presente em várias páginas do website do projecto, é a utilização da API da página do projecto do Facebook. Optou-se por implementar uma estrutura desta natureza devido ao facto da partilha de informação através desta rede social ser um excelente meio de divulgação do projecto. Um utilizador ao verificar a presença da API do Facebook no website, poderá estabelecer uma “ligação fixa” ao projecto, através da referida API,
podendo assim seguir os passos e novidades do projecto, através da página da Rede Social. Outro factor que deve ser salientado, é o facto do login do website ser efectuado através de contas de redes sociais, sendo o Facebook uma das opções disponíveis. Desta forma, a atmosfera e envolvência de partilha de informação e integração com as Redes Sociais está bastante presente no website, nunca podendo “chocar” ou confundir um dado utilizador. Por fim, é de referir que não foi utilizado o plugin do wordpress para implementar esta API. Surgiram problemas através da implementação do plugin em algumas páginas do website, o que levou ao grupo de trabalho proceder à implementação da api por iframe , em cada página. Por implementar Visita Guiada O submenu Visita Guiada reporta a página que à posteriori irá armazenar um vídeo sobre a aplicação. Esta página encontra-se em desenvolvimento. Ainda não foi desenvolvida dado que o vídeo assume uma função secundária e promocional que contemplará algumas das respostas a dificuldades de interacção com a aplicação, verificadas em testes de usabilidade. Galeria As galerias albergam as diferentes fotografias das memórias do Campus de Santiago. Estas encontram-se divididas em álbuns. O grupo multimédia activou o plugin NextGEN Gallery e procedeu o redimensionamento das fotografias mediante o seu tamanho e a utilização da lighbox. Esta página ainda se encontra em desenvolvimento, em que é necessário prosseguir quanto ao sair da lightbox e a inserção de legendas. Mapa Ao longo da aplicação, o utilizador pode verificar a sua posição espacial no Mapa no canto direito inferior. Porém, quando este clica no atalho M ou sobre o Mapa, poderá verificar a ampliação do mesmo, indicando a distância entre este os pontos de referência.
Dificuldades de Implementação Ao longo da implementação do protótipo, a equipa deparou-se com algumas dificuldades que teve que arrecadar solução para apresentar o produto. Nomeadamente, no que diz respeito a: Integração do Unity na Timeline ( Desafio da prototipagem de alta-fidelidade): Integração do Plugin do wordpress, referente à API do facebook nas diferentes páginas Recriação do terreno segundo o passado
Conclusão e Reflexões sobre a Prototipagem Com a conclusão do protótipo de alta – fidelidade, a equipa verificou que conseguiu resolver algumas incertezas técnicas, nomeadamente à ligação do website com a aplicação Unity, o armazenar e envio de variáveis externas, questões de buscar o conteúdo do Unity a Base de Dados, importação de texturas para o Unity, problemas de escalas, etc. Contrariamente ao que se poderia pensar que há uma diminuição de tarefas, a equipa sentiu que, pelo contrario, estava a verificar um aumento ao longo do tempo. Só então é que depois se apercebeu que, afinal, as tarefas eram as mesmas que planeadas no GANTT, porém agora, subdividiram-se os problemas gerais em outros problemas específicos a resolver mediante a sua dimensão. Este protótipo de alta-fidelidade requereu quer trabalho ao nível da gestão de conteúdos, modelação 3D, design e implementação do website e programação do Unity. Nos scripts do projecto virtUA, constam cerca de 800 linhas de código.
Fig. g- Principais Scripts do Projecto Assim, neste protótipo é possível verificar a modelação do primeiro edifício com algum detalhe e os outros dois em desenvolvimento, o terreno terminado, susceptível a alguns ajustes, informação do edifício, integração do Unity e Timeline. Todo este processo agora assume-se como contínuo até se proceder a uma avaliação com clientes finais do produto.