Upload
sofia-cruz
View
249
Download
2
Embed Size (px)
DESCRIPTION
Relatório da versão beta do projecto Museu Virtual de Design Português
Citation preview
Universidade de Aveiro
Helder | Lorenzo | Sofia
1
Universidade de Aveiro
Helder | Lorenzo | Sofia
2
Índice 1. Mapa de navegação ....................................................................................................... 4
2. Versão beta ...................................................................................................................... 6
2.1. Página inicial ........................................................................................................................ 6 2.2. Registo .................................................................................................................................... 7 2.3. Login ....................................................................................................................................... 7 2.4. Perfil ........................................................................................................................................ 8 2.5. Timeline ................................................................................................................................. 9 2.6. Pesquisa / Recentes / Mais Vistas / Mais Votadas ............................................... 10 2.7. Autores ................................................................................................................................ 12 2.8. Inserção de autor e obra ............................................................................................... 13 2.9. Página do Autor ................................................................................................................ 14 2.10. Página da Obra ............................................................................................................... 14
3. Versão Mobile .............................................................................................................. 17
4. Problemas ..................................................................................................................... 19
Conclusão .......................................................................................................................... 21
Universidade de Aveiro
Helder | Lorenzo | Sofia
3
Introdução
Este documento serve de guia para o desenvolvimento da versão beta do
projecto Museu Virtual de Design Português. Neste são apresentadas as
funcionalidades implementadas e corrigidas após a fase do protótipo de alta
fidelidade.
Sendo assim, o documento encontra-‐se subdividido pelos seguintes temas:
• Mapa de navegação
• Versão Beta
o Página inicial
o Registo
o Login
o Perfil
o Timeline
o Pesquisa / Recentes / Mais vistos / Mais votadas
o Autores
o Inserção de autor e obra
o Página do autor
o Página da obra
• Versão mobile
• Conclusão
Um dos pontos mais importantes nesta fase é o facto de o grupo de trabalho
conseguir desenvolver quase toda a sua plataforma e através da ajuda de
terceiros perceber quais os erros que se encontram no projecto. Ou seja, todos
eles tem que ser corrigidos a tempo, tornando a plataforma mais completa.
Universidade de Aveiro
Helder | Lorenzo | Sofia
4
1. Mapa de navegação
Como já tinha sido apresentado, o mapa de navegação da plataforma apresenta-‐
se subdividido em frontoffice e backoffice, devido aos três tipos de utilizadores,
os registados, os não registados e o administrador do website. Os primeiros só
tem acesso ao frontoffice, conseguindo visualizar toda a informação que nele é
apresentado, como autores, obras, perfis dos utilizadores e ainda pode usufruir
de pesquisas através de filtros (mais vistas, mais votadas, recentes, autores). Os
utilizadores registados tem acesso ao frontoffice, mas fica com o previlégio de
inserir informação (autor/obra) e ter um perfil de utilizador. O administrador é o
que gere a informação que é divulgada publicamente.
De acordo com a versão beta, o objectivo do grupo é a realização de todas as
funcionalidades presentes no mapa, mas devido a alguma perca de tempo em
funcionalidades mais complexas (como por exemplo, a timeline), só as
funcionalidades de editar perfil (utilizador registado) e a moderação
(administrador) é que não serão implementada nesta fase.
Podemos analisar o mapa de navegação na figura 1.
Universidade de Aveiro
Helder | Lorenzo | Sofia
5
Funcionalidades em falta
Figura 1 – Mapa de navegação
Universidade de Aveiro
Helder | Lorenzo | Sofia
6
2. Versão beta Na fase da versão beta, o grupo decidiu implementar quase todas das
funcionalidades do website, visto que não são muito extensas.
2.1. Página inicial O utilizador quando entra na página inicial, encontra um mosaico composto por
um conjunto de obras que são apresentadas aleatóriamente. Este tem a
possibilidade de escolher qualquer uma das obras que são apresentadas, mas
também pode navegar pelo menu e pela pesquisa que se encontra no header, ou
então através do filtro das categorias (drop-‐drown). Se o utilizador for registado
no website pode fazer login, caso contrário pode-‐se registar.
O header e o footer encontram-‐se sempre presentes ao longo de todas as páginas
do website. O footer tem a opção de ver a ficha técnica, o mapa do site e o sobre o
museu.
Figura 2 – Página inicial
Universidade de Aveiro
Helder | Lorenzo | Sofia
7
2.2. Registo Após o utilizador clicar no botão “Registo” é direccionado para uma nova página.
Esta é composta por um formulário, onde o utilizador é obrigado a preencher
todos os campos, excepto o “avatar”. Como forma de activação da conta, o grupo
usou o sistema “captcha”, que representa um teste de desafio cognitivo utilizado
como ferramenta anti-‐spam. Ou seja, o utilizador só consegue o seu registo se
preencher correctamente este sistema.
Figura 3 – Formulário de registo
2.3. Login Após o registo, o utilizador pode fazer o login na sua conta. Este é apresentado
com um sistema parecido com a rede social Twitter, aparecendo em versão pop-‐
up e contendo os campos de Email e Password. Se o utilizador inserir bem os seus
dados, entra na sua conta sem qualquer problema, caso contrário é impedido de
o fazer.
Universidade de Aveiro
Helder | Lorenzo | Sofia
8
Figura 4 – Formulário de Login
Figura 5 – Botão logout 2.4. Perfil Tanto o utilizador registado como o administrador do website têm certos
privilégios, como o caso de poder inserir autores/obras e ter uma página de
perfil. Ao analisarmos a página apresentada em baixo, esta é constituída pelos
campos que foram preenchidos na página do registo, como o nome, o email e o
avatar. Tem também a informação sobre o tipo de conta e ainda a possibilidade
de escrever um pouco sobre a sua pessoa no “Sobre Mim”.
Universidade de Aveiro
Helder | Lorenzo | Sofia
9
Nesta página também há a possibilidade de ver os autores e as obras que foram
inseridas pelo utilizador registado.
Figura 6 – Página de perfil
2.5. Timeline A página Timeline é estruturalmente parecida com a página inicial, mas contém
uma barra cronológica, onde o utilizador pode navegar pelas obras. Ao clicar em
cima de uma data, esta destaca-‐se e aparecem as respectivas obras. Tem também
a possibilidade de através de um slider navegar pelas datas.
Nesta barra cronologica, só aparecem as datas que foram inseridas na base de
dados, ou seja, todas as que aparecem têm pelo menos uma obra relacionada.
Universidade de Aveiro
Helder | Lorenzo | Sofia
10
Figura 7 – Página da timeline
2.6. Pesquisa / Recentes / Mais Vistas / Mais Votadas Visto que o objectivo do website é a partilha de informação sobre Design
Português, o grupo reforçou os filtros de pesquisa. A funcionalidade de Pesquisa,
que se encontra no header em forma de caixa de texto é a pesquisa geral que é
limitada no mínimo a três caracteres. Na página inicial, o utilizador pode ainda
filtrar as obras de acordo com as categorias que se encontram na drop down
apresentada.
Na página Recentes, o sistema de filtragem é simples, visto só aparecem as
últimas obras que foram adicionadas na plataforma.
Sempre que o utilizador abre a página de uma obra é activado um contador que
faz com que as mais visualizadas apareçam em destaque na página Mais Vistas.
Em cada obra aparece o número total de visualizações.
A página das Mais Votadas funciona através de um sistema de ranking, onde o
utilizador pode atribuir uma votação nas obras que mais gosta. As mais votadas
aparecem em destaque.
Universidade de Aveiro
Helder | Lorenzo | Sofia
11
Figura 8 – Caixa da pesquisa geral
Figura 9 – Resultado da pesquisa geral
Universidade de Aveiro
Helder | Lorenzo | Sofia
12
Figura 10 – Página recentes
2.7. Autores O utilizador ao clicar na tab dos Autores vai ter acesso a uma lista de autores que
se organizam alfabeticamente na página. Todos os que são adicionados à base de
dados ficam disponíveis nesta lista. Cada nome direcciona o utilizador para a
página do respectivo autor.
Figura 11 – Página autores
Universidade de Aveiro
Helder | Lorenzo | Sofia
13
2.8. Inserção de autor e obra Tanto o utilizador registado como o administrador tem acesso a esta
funcionalidade, ou seja, à inserção de informação. Este formulário encontra-‐se
dividido em duas partes, a de adicionar um autor e a de adicionar uma obra. Se o
utilizador quiser inserir uma obra e o seu autor ainda não estiver na base de
dados do website, este é obrigado a completar o primeiro passo (adicionar autor)
e só depois é que pode adicionar a obra. Caso este queira inserir uma obra sem
autor não irá conseguir.
Todo o formulário é composto por inputs, textareas, drop downs e upload de
imagens. Cumpre também o sistema de validação dos campos, ou seja, todos eles
tem que ser preenchidos obrigatóriamente para que não haja falta de
informação.
As imagens que são inseridas têm que ter tamanho mínimo de 455x455 píxels e
máximo de 1100x700 píxels, para que a apresentação da plataforma não fique
desformatada.
Figura 12 – Página de inserção de autor/obra
Universidade de Aveiro
Helder | Lorenzo | Sofia
14
2.9. Página do Autor Quando o utilizador clica no nome de um autor, tanto nas próprias obras como
na listagem dos Autores, este é direccionado para uma página como a que se
apresenta em baixo. Esta é constituída pelo nome, fotografia, biografia e obras
relacionadas com o autor, neste caso aparece uma obra da própria Fátima Lopes.
Todos estes campos encontram-‐se no formulário adicionar autor.
Figura 13 – Página autor
2.10. Página da Obra A página da obra tem uma estrutura parecida com a do autor, contendo mais
informação. Esta é composta pelo nome da obra, imagens, cliente, características
técnicas, autor, ano, utilizador que a adicionou e visualizações. Relativamente às
imagens, se esta tiver mais que uma tem a possibilidade de as visualizar através
de um slideshow (Figura 15 e 16). Como forma de interação com o utilizador, este
tem a possibilidade de comentar, através da sua conta do facebook a obra
repectiva, aparecendo depois no seu mural. Este plugin faz com que haja uma
boa divulgação do website através da rede social, despertando a curiosidade de
alguns dos utilizadores desta.
Universidade de Aveiro
Helder | Lorenzo | Sofia
15
Figura 14 – Página obra
Figura 15 – Preview das imagens
Universidade de Aveiro
Helder | Lorenzo | Sofia
16
Figura 16 – Slideshow
Universidade de Aveiro
Helder | Lorenzo | Sofia
17
3. Versão Mobile O projecto Museu Virtual de Design Português desde a fase do planeamento que
foi pensada para ser usada em vários dispositivos, principalmente o mobile.
Sendo assim, a equipa de trabalho fez uma adaptação na folha de estilos de forma
a que o utilizador consiga interagir com as funcionalidades disponíveis.
Nesta versão, algumas das funcionalidades que estão disponíveis na plataforma
web e iPad/tablets vão ficar em estado inactivo na mobile. Ou seja, uma vez que
esta é uma plataforma que tem como objectivo principal a partilha/pesquisa de
informação sobre o Design Português, não é uma prioridade (para já) ter o
acesso ao backoffice na versão mobile.
Como se pode analisar, aqui estão apresentados exemplos de estruturas das
páginas:
Figura 17 – Página inicial mobile Figura 18 – Página recentes mobile
Universidade de Aveiro
Helder | Lorenzo | Sofia
18
Figura 18 – Página timeline mobile Figura 18 – Página autores mobile
Figura 19 – Página obra mobile Figura 20 – Página autor mobile
Universidade de Aveiro
Helder | Lorenzo | Sofia
19
Figura 21 – Página ficha técnica mobile 4. Problemas Durante a implementação das funcionalidades definidas para esta versão beta
foram encontrados alguns problemas que ainda nao obtiveram resolução.
A timeline é um dos problemas mais graves que o grupo teve até agora, devido à
compatibilidade entre browsers e dispositivos. Esta ainda não funciona por
completo no IE e no iPad, visto que o utilizador não consegue arrastar o slider de
forma a escolher a respectiva data.
No login do utilizador, o grupo ainda não conseguiu fazer com que a password
ficasse guardada no IP do utilizador. Se este a esquecer, também ainda não há o
sistema de recuperação.
No registo, já existe um sistema de validação directa e anti-‐spam (CAPTCHA),
mas a aquipa decidiu reforçar ainda mais a segurança. Ou seja, o utilizador ao
Universidade de Aveiro
Helder | Lorenzo | Sofia
20
registar-‐se só poderá fazer login se receber no seu email o código de activação.
Isto faz com que a validação do email também seja reforçada, obrigando os
utilizadores a usarem um verdadeiro. O problema é que esta funcionalidade
ainda não foi conseguida.
Universidade de Aveiro
Helder | Lorenzo | Sofia
21
Conclusão Sendo a versão beta uma versão de um produto que ainda se encontra em fase de
desenvolvimento e testes, pode-‐se concluir que em relação à útima entrega
(protótipo de alta fidelidade) o grupo conseguiu adiantar bastantes
funcionalidades, apesar de ainda haver alguns erros que estão ainda a ser
resolvidos.