Museu Virtual de Design PortuguĂŞs

Universidade de Aveiro

1

Museu Virtual de Design Português

Universidade de Aveiro

Ìndice

Introdução ................................................................................................................................................. 3 Mapa de navegação ............................................................................................................................... 4 Fases de prototipagem......................................................................................................................... 5 Dificuldades............................................................................................................................................... 8 Funcionalidades não implementadas ........................................................................................... 9

2

Museu Virtual de Design Português

Universidade de Aveiro

Introdução A fase de prototipagem tem como objectivo testar/experimentar as principais funcionalidades definidas e a interface do projecto. Com isto, realiza-se testes atempados de forma a perceber se as decisões tomadas anteriormente foram a melhor escolha ou não, tanto a nível de específicação técnica como gráfica. Esta fase não implica o desenvolvimento de todos os detalhes operativos das aplicações, mas sim dos mais importantes e complexos. Sendo assim, neste relatório são apresentados os passos dados para o desenvolvimento do prototipo de alta fidelidade do website Museu Virtual de Design Português. O protótipo encontra-se disponível no servidor http://mvdp.web.ua.pt.

3

Museu Virtual de Design Português

Universidade de Aveiro

Mapa de navegação Durante as aulas de Projecto, o mapa de navegação sofreu algumas alterações, tornando-se mais simples e eficaz. Inicialmente apresentava-se dividido em três mapas, o dos utilizadores não registados que só tem acesso ao frontoffice do website; dos utilizadores registados que tem acesso ao frontoffice e alguma parte do backoffice (edição de perfil, adição de obra e autor); e por fim, o administrador do website (que tem acesso a tudo). Sendo assim, construíu-se um novo mapa de navegação com a junção destes três tipos de utilizadores e ao quais definiu-se as funcionalidades que fazem parte do frontoffice e backoffice, como podemos analisar na figura apresentada em baixo.

4

Museu Virtual de Design Português

Universidade de Aveiro

Fases de prototipagem Após algumas reuniões com os orientadores do projecto ficou decidido que iriam ser implementadas as funcionalidades mais complexas em primeiro lugar, de forma a conseguir a resolução dos maiores problemas já nesta fase. A página inicial é o ponto de partida para a inicialização da prototipagem, visto que é apartir desta que é conseguida a possível navegação pela plataforma. De seguida, optou-se pela realização da timeline, das páginas das obras e autores, dos resultados de pesquisa e da página de moderação do administrador. Na figura a baixo são apresentadas as páginas desenvolvidas a cor verde.

5

Museu Virtual de Design Português

Universidade de Aveiro

Nível técnico Na página principal são apresentadas obras aleatórias através de thumbnails, de forma a dar um grande destaque visual. Sempre que é feito o refresh da página, as obras vão actualizando e aparecendo nas divs respectivas. O utilizador pode passar o cursor por cima da obra e obter o seu título e autor, através do efeito mouseover. Sempre que clicar em cima das imagens, este é direccionado para a página da respectiva obra. Nesta página, o utilizador consegue ter acesso à timeline,

obras,

autores

e

resultados

de

pesquisa.

A página da timeline é bastante parecida com a página principal, tendo a possibilidade de conseguir navegar pelas obras através de uma barra cronológica. Sempre que o utilizador clicar numa das datas, irão aparecer todas as obras que foram realizadas nesse ano. Neste momento, só aparecem as datas das obras que estão activas na base de dados. A pesquisa é uma funcionalidade que opera através da inserção de palavras numa caixa de texto e sempre que é feito enter, irá aceder a base de dados e procurar tudo o que tem haver com a palavra pesquisada, apresentando-os numa página específica. Na página da obra são apresentados todos os dados que foram inseridos na base de dados, como o nome, imagens, descrição, ano, autor, entre outros. As imagens apresentam-se numa versão maior em relação à da página principal e timeline. Como forma de interacção com os utilizadores, nas páginas das obras encontrase disponível um plugin do facebook que dá a possibilidade de através da conta do utilizador comentar a obra respectiva. Nesta página, o utilizador também pode ter acesso à página do autor da obra, que tem toda a informação inserida sobre este. Em todas as páginas há a possibilidade de voltar para a página principal clicando no logótipo da marca.

Nível gráfico A primeira etapa realizada para o arranque do protótipo foi a construção do layout através de HTML5 e CSS3. Este usa o mesmo header e footer em todas as páginas, mudando só a estrutura do corpo do website. Por exemplo, na página 6

Museu Virtual de Design Português

Universidade de Aveiro

principal, na timeline e nos resultados de pesquisa é usada uma estrutura em forma de mosaico para a apresentação dos thumbnails das obras, nas páginas da obra e autor, já há uma conjugação entre a apresentação das imagens, dos textos, dos comentários, visto que as imagens aparecem à esquerda, os textos à direita, os comentários em baixo, etc. Estas estruturas são todas realizadas através de divs, de forma a que consigamos obter uma boa organização visual.

Página Inicial

7

Museu Virtual de Design Português

Universidade de Aveiro

Página da obra

Dificuldades A nível técnico, a base de dados foi uma das que causou alguns problemas. Sendo esta já existente do projecto anterior, teve que ser efectuada uma analise sobre a forma como estava construída e como iria ser feita importação para o novo servidor da Universidade de Aveiro. Esta causou alguns conflitos devido aos nomes do servidor antigo e do recente, mas com a ajuda dos docentes este problema foi imediatamente resolvido. A implementação da timeline causou algumas dificuldades, visto ser uma das funcionalidade que ainda era desconhecida por parte do grupo, mas com a dedicação e paciência foi conseguida. A nível gráfico sentiu-se grandes dificuldades na compatibilidade entre browsers e o CSS3, como é o caso do drop down usado na página inicial, que em certos browsers aparece com brilho e noutros não. O posicionamento das divs também criaram alguns conflitos, principalmente quando estava a ser construída a página inicial. Durante a construção do layout, o grupo deparou-se com um problema no tipo de letra, ou seja, sendo a fonte tipográfica Exo muito presente visualmente quando é 8

Museu Virtual de Design Português

Universidade de Aveiro

usada em texto corrido perde bastante leitura por parte do utilizador. Para resolver este problema foi usada uma tipografia diferente para o website, o PT Sans, ficando mais coerente visualmente e de fácil leitura. O logótipo e os elementos de identidade da marca irão continuar com o tipo de letra original, a Exo.

Funcionalidades não implementadas Neste protótipo não foram implementadas algumas funcionalidades que tinham sido inicialmente definidas. A página de moderação foi uma delas, visto que só pode ser vísivel quando o administrador faz login, decidiu-se implementar só na a próxima fase. Na página da obra, não foi implementada a visualização de mais de uma imagem por obra por falta de tempo.

9