Issuu on Google+

Universidade  de  Aveiro  

   

Helder  |  Lorenzo  |  Sofia                                                              

 

1  


Universidade  de  Aveiro  

 

Í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  

                            Helder  |  Lorenzo  |  Sofia                                                              

 

2  


Universidade  de  Aveiro  

 

      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.     Helder  |  Lorenzo  |  Sofia                                                              

 

3  


Universidade  de  Aveiro  

       

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.    

Helder  |  Lorenzo  |  Sofia                                                              

 

4  


Universidade  de  Aveiro  

 

 

             Funcionalidades  em  falta  

                     

Figura  1  –  Mapa  de  navegação  

Helder  |  Lorenzo  |  Sofia                                                              

 

5  


Universidade  de  Aveiro  

 

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  

 

   

      Helder  |  Lorenzo  |  Sofia                                                              

 

6  


Universidade  de  Aveiro  

 

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.    

  2.3.  Login    

Figura  3  –  Formulário  de  registo  

 

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.  

     

Helder  |  Lorenzo  |  Sofia                                                              

 

7  


Universidade  de  Aveiro  

 

                                 

 

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

Helder  |  Lorenzo  |  Sofia                                                              

 

8  


Universidade  de  Aveiro  

  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.  

 

Helder  |  Lorenzo  |  Sofia                                                              

 

9  


Universidade  de  Aveiro  

 

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.       Helder  |  Lorenzo  |  Sofia                                                              

 

10  


Universidade  de  Aveiro  

         

                                                                                               

   

Figura  8  –  Caixa  da  pesquisa  geral  

Figura  9  –  Resultado  da  pesquisa  geral  

Helder  |  Lorenzo  |  Sofia                                                              

 

 

 

11  


Universidade  de  Aveiro  

 

 

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  

Helder  |  Lorenzo  |  Sofia                                                              

 

 

12  


Universidade  de  Aveiro  

 

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  

Helder  |  Lorenzo  |  Sofia                                                              

 

 

13  


Universidade  de  Aveiro  

 

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.    

    2.10.  Página  da  Obra    

Figura  13  –  Página  autor  

 

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.   Helder  |  Lorenzo  |  Sofia                                                              

 

14  


Universidade  de  Aveiro  

   

   

                                                                                     

Figura  15  –  Preview  das  imagens  

Helder  |  Lorenzo  |  Sofia                                                              

 

 

Figura  14  –  Página  obra  

 

15  


Universidade  de  Aveiro  

 

                       

                                                                                                                                     Figura  16  –  Slideshow  

 

     

                                          Helder  |  Lorenzo  |  Sofia                                                              

 

16  


Universidade  de  Aveiro  

 

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    

                         

 

Helder  |  Lorenzo  |  Sofia                                                              

 

 

Figura  18  –  Página  recentes  mobile  

17  


Universidade  de  Aveiro  

 

                     

Figura  18  –  Página  timeline  mobile                                                            Figura  18  –  Página  autores  mobile  

 

 

               

Figura  19  –  Página  obra  mobile                                                                          Figura  20  –  Página  autor  mobile  

 

 

Helder  |  Lorenzo  |  Sofia                                                              

 

18  


Universidade  de  Aveiro  

 

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   Helder  |  Lorenzo  |  Sofia                                                              

 

19  


Universidade  de  Aveiro  

  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.          

                                                    Helder  |  Lorenzo  |  Sofia                                                              

 

20  


Universidade  de  Aveiro  

 

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.  

   

Helder  |  Lorenzo  |  Sofia                                                              

 

21  


Versao beta mvdp