21
Universidade de Aveiro Helder | Lorenzo | Sofia 1

Versao beta mvdp

Embed Size (px)

DESCRIPTION

Relatório da versão beta do projecto Museu Virtual de Design Português

Citation preview

Page 1: Versao beta mvdp

Universidade  de  Aveiro    

Helder  |  Lorenzo  |  Sofia                                                                

1  

 

Page 2: Versao beta mvdp

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  

 

                         

Page 3: Versao beta mvdp

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.  

 

Page 4: Versao beta mvdp

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.  

 

Page 5: Versao beta mvdp

Universidade  de  Aveiro    

Helder  |  Lorenzo  |  Sofia                                                                

5  

               Funcionalidades  em  falta  

Figura  1  –  Mapa  de  navegação  

                     

Page 6: Versao beta mvdp

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  

         

Page 7: Versao beta mvdp

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.  

     

Page 8: Versao beta mvdp

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”.  

 

Page 9: Versao beta mvdp

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.  

 

Page 10: Versao beta mvdp

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.  

   

Page 11: Versao beta mvdp

Universidade  de  Aveiro    

Helder  |  Lorenzo  |  Sofia                                                                

11  

       

                                                                                           Figura  8  –  Caixa  da  pesquisa  geral  

     

 Figura  9  –  Resultado  da  pesquisa  geral  

   

Page 12: Versao beta mvdp

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  

 

Page 13: Versao beta mvdp

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  

     

Page 14: Versao beta mvdp

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.  

Page 15: Versao beta mvdp

Universidade  de  Aveiro    

Helder  |  Lorenzo  |  Sofia                                                                

15  

 

 Figura  14  –  Página  obra  

   

                                                                                   Figura  15  –  Preview  das  imagens  

   

Page 16: Versao beta mvdp

Universidade  de  Aveiro    

Helder  |  Lorenzo  |  Sofia                                                                

16  

                                                                                                                                                               Figura  16  –  Slideshow                                                  

Page 17: Versao beta mvdp

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    

Page 18: Versao beta mvdp

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    

Page 19: Versao beta mvdp

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  

Page 20: Versao beta mvdp

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.    

 

 

 

                                                   

Page 21: Versao beta mvdp

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.