Introduo O presente documento serve como guia do prottipo de alta-fidelidade.

Aps o grupo ter procedido especificao grfica e tcnica, segue-se o momento de proceder fase de prototipagem. Deste modo, este documento encontra-se subdividido nas seguintes seces: Mapa de navegao e reas - alvo de prototipagem Profundidade de implementao o A implementar totalmente Pgina inicial Login Sobre Projecto Viso e Misso Equipa Campus Visita virtual Memrias Contactos

o A implementar parcialmente Ajuda Navegao Informao de edifcios Opes

o Por implementar Visita Guiada Galeria Mapa

Dificuldades de Implementao Concluso e Reflexes sobre a Prototipagem de referir que esta fase de implementao aumenta a sensao de realizao por parte da equipa, assumindo uma importncia crucial no desenvolvimento de vrios mdulos em paralelo, restrio da ocorrncia de erros de programao/ autoria a cada mdulo e a realizao de testes aplicao no incio do desenvolvimento e rentabilizao do cdigo.

Mapa de navegao e reas - alvo de prototipagem O presente prottipo retrata as diferentes reas / funcionalidades alvo de prototipagem:

Fig.1 Mapa de Navegao, enquadrado na prototipagem de sublinhar que a equipa preocupar-se- mais com a soluo tcnica em vrias instancias do que propriamente a grfica, dado a complexidade de algumas funcionalidades. O desafio primordial desta entrega passar pela ligao do programa Unity com a timeline interativa presente no website do projecto (como se processa a comunicao).

Profundidade de implementao No mapa de navegao apresentado, pode-se verificar a profundidade de implementao das reas alvo de prototipagem. O esquema cromtico assinala as diferentes profundidades de implementao do prottipo. Atente-se que as reas assinaladas a verde correspondem a estruturas que sero implementadas a nvel grfico e tcnico, estando bastante prximas do que ser apresentado do produto final. A cor azul corresponde a reas implementadas parcialmente com baixo detalhe grfico ou em profundidade completa a nvel de contedo. Por fim, a cor vermelha corresponde a reas no implementadas/prototipadas. A implementar totalmente Pgina inicial

Fig.1 - Homepage A pgina inicial mostra a informao que todas as outras pginas albergam. Esta apresenta o link que direciona para a visita virtual, todos os menus de navegao e a informao principal do que se poder encontrar nas restantes pginas.

 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 reforado atravs do contraste de cores (permite a mesma percepo a preto e branco). Ao nvel da implementao, procedeu-se ao alinhamento das diferentes informaes, tendo por base a diviso em trs colunas, a mudana de cores dos botes, comportamento da barra de navegao e insero da rea de login. de referir que se utilizou a verso mais recente de CSS (Cascading Style Sheet) CSS3, a fim de apresentar transies e efeitos de animao e facilitar quer a equipa quer os utilizadores face s transformaes na apresentao de um Website tendo presente os novos browsers como Google Chrome, IE9, Opera, Firefox e Mozillla. Login

Fig. 2 Login na aplicao O login na aplicao estabelecido com recurso a um plugin, designado por Janrai. Aps uma pesquisa intensiva sobre modos de login em websites ( ex.: OpenID) e o teste dos mesmos, consulta de fruns e outras ferramentas de comunicao (a)sncrona, chegou-se concluso 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 acepo/validao do projecto por parte da Universidade. O registo com a integrao das redes sociais faz com que se estabelea a facilidade de partilha e contribuio de informao. O ecr despoletado atravs de uma lightbox, dado no ser necessrio efetuar o carregamento da pgina.

Sobre Projecto A pgina Projecto contm toda a informao de contextualizao e mbito do projecto. As imagens nas diferentes pginas assumem a funo apelativa para chamar ateno e ilustrar a informao.

Fig. 3 Sobre Projecto

Viso e Misso Esta pgina segue a mesma estrutura da pgina Sobre - Projeto. Esta pgina no estava, inicialmente, contemplada na Especificao grfica. Porm, dada a importncia da quantidade de informao presente na pgina Sobre Projecto, estando presente no website do projecto, no intuito de oficializar / institucionalizar o mesmo, esta estaria sobrecarregada de contedos textuais, podendo provocar alguma fadiga na navegao do utilizador, atravs da presena de extenso scroll. Assim sendo, optou-se por criar uma nova pgina, estando disponibilizada num novo submenu, exclusivamente para a Misso, Viso e os valores do projecto.

Fig. 4 Viso e Misso Equipa

Fig. 5 Equipa A pgina Sobre Equipa apresenta a ficha dos responsveis do projecto bem como o agradecimento a um conjunto de entidades.

Campus Visita virtual Timeline

Fig. 6 Timeline A evoluo do espao 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 segmentao do tempo em intervalos que dizem respeito s construes dos departamentos e espaos envolventes tendo por base a data inicial e final de funcionamento de cada departamento. Foi feita a diviso em cinco intervalos de tempo: 1976-1984, 1985-1993, 1994-2000, 2001 2007, 2008-2011. Esta diviso prende-se necessidade de criar uma estrutura dentro do website que possibilite o utilizador escolher o espao temporal. de referir que foram considerados alguns princpios: Limitao a 3 cliques (contribui para a maximizao da usabilidade e facilidade de acesso), possibilidade da pgina carregar o ficheiro s uma vez (a aplicao suportada em mquinas com diferentes caractersticas), escolha do espao temporal sem (re)carregar a pgina (reduo do carregamento das pginas) e compatibilidade com a maior parte dos browsers (compatvel com maior parte dos browsers). Ao nvel da implementao, o utilizador seleciona o espao temporal desejado, visualiza a fotografia que caracteriza a poca, representada no slider constituinte da timeline e esta apresenta o link para entrar nessa

navegao. Por sua vez, caso o utilizador queira navegar para outro espao temporal, este escolhe-o atravs dos botes disponibilizados. de salientar o facto do espao temporal ser selecionado e enviado atravs de javascript, representativo do dito intervalo. Desta forma, o Unity poder interpretar o intervalo de tempo que dever ler e executar. A implementao da timeline feita com base na biblioteca de javascript (Jquery) com a dupla vantagem de criar um ambiente de pura navegao e evoluo das datas e imagens. Mudana de nvel no Unity Interao com a Timeline

Fig. 7 Integrao do Unity com a Timeline O desafio primordial deste prottipo de alta-fidelidade diz respeito interao da timeline com o Unity. Atravs da funo external call e funes pr-criadas no javascript da pgina, estabelece-se a comunicao do Unity com a pgina Web. Na timeline, para garantir ao utilizador a possibilidade de escolher um novo perodo temporal, utilizou-se a funo Sendmessage ().

Fig. 8 Script para escolha do nvel (perodo temporal).

 de referir que para estabelecer a ligao do Unity e a sua comunicao com a Web, esta feita atravs da funo unityObject. Esta ltima funo estabelece a deteco e comunicao num nico ficheio javascript que permite embeber o cdigo nas pginas web. O grupo, ainda, implementou um sistema de cookies que armazena/guarda as coordenadas atuais do utilizador no espao Unity e que repe a sua localizao. Assim, na prxima navegao, sabe-se a posio em que o utilizador estava. Este sistema de cookies armazena tambm as opes de som e qualidade de grficos escolhidos pelo utilizador. As coordenadas da posio do utilizador so gravadas numa pasta temporria do Sistema Operativo e depois h a recuperao dessas coordenadas pelo sistema e a colocao do utilizador no Campus. Embora para melhor compreenso se utilize o termo cookies, na realidade no se trata realmente dessa funcionalidade. Como referido, todas as variveis so gravadas numa pasta criada propositadamente para o efeito, sendo acedida pela aplicao sempre que for estabelecida a comunicao, isto atravs de qualquer browser. Ou seja, qualquer que seja o browser a usar, o utilizador vai manter as suas preferncias e coordenadas espaciais da navegao no Campus.

Fig. 9 Gravao de coordenadas numa pasta temporria do SO

Fig. 10 e 11 Obteno das coordenadas pelo sistema e colocao do utilizador no Campus Menu Escolha do Ponto de Entrada, Opes, Ajuda e Sada Para implementar estes menus foi necessrio a criao de um Objecto de Interface Grfica do Utilizador (TestGUIObj) em que se associou o Script para se associar o Menu e GUISkins coleces de estilos GUI aplicados a cada elemento da interface. Assim, criaram-se os botes aos quais se associaram texturas para criar os pontos de referncia nas respectivas coordenadas x,y bem como a altura e largura. udio Na aplicao de navegao virtual, possvel ao utilizador ligar e desligar o som (clique na tecla V) e controlar nvel do som, atravs do menu opes e controlando a slider do volume do som. Qualidade dos grficos Na aplicao de navegao virtual, possvel ao utilizador controlar a qualidade dos grficos da aplicao. Este poder controlar a qualidade dos grficos e balancear com a rapidez atravs do menu opes e controlando a slider da qualidade de grficos.

Opo fullscreen O utilizador pode ainda potencializar a sua experincia atravs da opo fullscreen atalho f. Construo do Cenrio e toda a envolvente O cenrio e toda a envolvente foi construda no Unity, tendo por base a utilizao da Skybox (cu: alterao dos materiais), a integrao de fontes luminosas (Raios solares), a concretizao da vegetao (relvado), passeio e texturizao, criao do material da gua das salinas e a criao dos edficios 3D e sua importao para o Unity. Quanto modelao dos edifcios em 3ds Max, recorreu-se extruso de plantas, a ferramentas de boolean, sua converso em mesh, edio e criao de polgonos e tratamento de textos em Photoshop e sua aplicao. Terreno

Fig. 12 Terreno A elaborao do terreno passa por diferentes processos desde a recolha de fotografias (areas), plantas, objetos existentes, identificao do tipo de vegetao existente e mapas topogrficos bem como a sua anlise. posteriori, procedeu-se a uma composio/edio de um conjunto de fotografias tiradas sequencialmente que o grupo teve acesso e que retrata a imagem do terreno na altura. posteriori, procedeu-se criao de um heightmap e aplicao das texturas (cgtextures).

cones Interface de Navegao

Fig. cones de interface presentes na navegao virtual

Uma das componentes de apoio interaco do utilizador com a aplicao a presena de cones representativos de algumas funcionalidades disponveis para um dado utilizador. Tal como foi mencionado na especificao grfica, os cones esto 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 tambm a necessidade que surgiu, ao nvel da alterao do cone de som, quando o utilizador interage com este. Verificou-se que ao clicar na tecla v, o utilizador poderia no percepcionar a alterao do cone unicamente com o trao sobre a coluna representativa do som (como foi estabelecido na especificao grfica). Assim sendo, de forma a fornecer uma maior eficcia de feedback ao utilizador, e, sendo cognitivamente mais fcil de percepcionar, procedeu-se alterao de cor do cone em questo, sendo o cinzento (cor com menos vida) representativa do estado off. Mira Para a criao do dinamismo da Mira utilizou-se a funo raycast: cria uma linha imaginria na frente da cmara, com o comprimento que se pretende (no nosso caso: 200px), que permite interagir com a envolvente. Na aplicao ajuda a identificar os departamentos, para se poder mudar a mira (info) e poder ver a informao do mesmo.

Fig. 13 Mudana de mira quando o utilizador navega pelo Campus

Fig. 14 Utilizao de raycast para identificar edifcios Memrias O espao memrias funciona como um lugar de partilha e contribuio de fotografias, vdeos e outras informaes relativas evoluo da Universidade de Aveiro. Esta pgina segue uma diviso de colunas em dois, em que a primeira diz respeito informao a integrar (post do blog, ficheiros enviados, espao de comentrios, share/like) e a segunda coluna integra o arquivo, comentrios recentes, tags e a ligao ao Facebook. Esta ligao ao Facebook estabelece-se atravs da API. Qualquer utilizador logado ter permisso para inserir posts/comentrio. de referir que editou-se o CSS para que os links assumissem a cor laranja do website. Contacto A pgina Contactos segue a estrutura de preenchimento de formulrio, contacto com a equipa e a pgina de interligao com o facebook como se sucede com as restantes pginas. A elaborao do formulario feito com recurso ao plugin Contact Form 7 e o ajuste ao website virtUA.

API Facebook Fan Like Box

Fig. 15 Presena da API da Pgina do Projecto

do Facebook, em vrias pginas do website Uma particularidade que est presente em vrias pginas do website do projecto, a utilizao da API da pgina do projecto do Facebook. Optou-se por implementar uma estrutura desta natureza devido ao facto da partilha de informao atravs desta rede social ser um excelente meio de divulgao do projecto. Um utilizador ao verificar a presena da API do Facebook no website, poder estabelecer uma ligao fixa ao projecto, atravs da referida API, podendo assim seguir os passos e novidades do projecto, atravs da pgina da Rede Social. Outro factor que deve ser salientado, o facto do login do website ser efectuado atravs de contas de redes sociais, sendo o Facebook uma das opes disponveis. Desta forma, a atmosfera e envolvncia de partilha de informao e integrao com as Redes Sociais est bastante presente no website, nunca podendo chocar ou confundir um dado utilizador. Por fim, de referir que no foi utilizado o plugin do wordpress para implementar esta API. Surgiram problemas atravs da implementao do plugin em algumas pginas do website, o que levou ao grupo de trabalho proceder implementao da API por iframe , em cada pgina.

Por implementar Visita Guiada O submenu Visita Guiada reporta a pgina que posteriori ir armazenar um vdeo sobre a aplicao. Esta pgina encontra-se em desenvolvimento. Ainda no foi desenvolvida dado que o vdeo assume uma funo secundria e promocional que contemplar algumas das respostas a dificuldades de interaco com a aplicao, verificadas em testes de usabilidade. Galeria As galerias albergam as diferentes fotografias das memrias do Campus de Santiago. Estas encontram-se divididas em lbuns. O grupo multimdia activou o plugin NextGEN Gallery e procedeu o redimensionamento das fotografias mediante o seu tamanho e a utilizao da lighbox. Esta pgina ainda se encontra em desenvolvimento, em que necessrio prosseguir quanto ao sair da lightbox e a insero de legendas. Mapa Ao longo da aplicao, o utilizador pode verificar a sua posio espacial no Mapa no canto direito inferior. Porm, quando este clica no atalho M ou sobre o Mapa, poder verificar a ampliao do mesmo, indicando a distncia entre este os pontos de referncia.

Dificuldades de Implementao Ao longo da implementao do prottipo, a equipa deparou-se com algumas dificuldades que teve que arrecadar soluo para apresentar o produto. Nomeadamente, no que diz respeito a: Integrao do Unity na Timeline ( Desafio da prototipagem de altafidelidade); Integrao do Plugin do wordpress, referente API do facebook nas diferentes pginas; Recriao do terreno segundo o passado; Passagem entre menus e navegao, preservando as preferncias dos utilizadores; A implementao do cursor encontra-se bloqueado. Acabou-se por deixar o cursor activo at mesmo para se poder interagir com a timeline.

 de referir que todas estas dificuldades foram superadas, apesar de terem ocupado muito do tempo ocupado pela equipa. Porm, eram essenciais para minimizar as dificuldades de implementao na verso BETA. Concluso e Reflexes sobre a Prototipagem Com a concluso do prottipo de alta fidelidade, a equipa verificou que conseguiu resolver algumas incertezas tcnicas, nomeadamente a ligao do website com a aplicao Unity, armazenar e envio de variveis externas, questes de arrecadar o contedo do Unity Base de Dados, importao de texturas para o Unity, problemas de escalas, etc. Contrariamente ao que se poderia pensar que h uma diminuio de tarefas, a equipa sentiu que, pelo contrario, estava a verificar um aumento ao longo do tempo. S ento que depois se apercebeu que, afinal, as tarefas eram as mesmas que planeadas no GANTT, porm agora, subdividiram-se os problemas gerais em outros problemas especficos a resolver mediante a sua dimenso. Este prottipo de alta-fidelidade requereu quer trabalho ao nvel da gesto de contedos, modelao 3D, design e implementao do website e programao do Unity. Nos scripts do projecto virtUA, constam cerca de 800 linhas de cdigo.

Fig. g- Principais Scripts do Projecto Assim, neste prottipo possvel verificar a modelao do primeiro edifcio com algum detalhe e os outros dois em desenvolvimento, o terreno terminado, susceptvel a alguns ajustes, informao do edifcio e integrao do Unity com a Timeline. Todo este processo agora assume-se como contnuo at se proceder a uma avaliao com clientes finais do produto.