DOCUMENTO  DE  ESPECIFICAÇÃO  DO  PROJECTO  DE  REDESIGN    

DO  WEBSITE  DA  PANTOPEIA  –  ASSOCIAÇÃO  CULTURAL  DE  
CRIAÇÃO  E  PROMOÇÃO  ARTÍSTICA  
 
 
GUIONISMO  

NOVAS  TECNOLOGIAS  DA  COMUNICAÇÃO  

UNIVERSIDADE  DE  AVEIRO  /  DeCA  

JUNHO  2013
  
1.  Definição  do  super-­‐conceito:  
 
Remake  de  um  website  de  uma  associação  cultural  que  utiliza  a  internet  como  meio  principal  de  
comunicação.  http://pantopeia.org/  
 

2.  Objectivos  gerais  específicos:  

 
Redesign  do  layout  -­‐  procurando  uma  nova  estética  que  esteja  mais  interligada  e  que  seja  o  espelho  da  
associação,  incorporando  as  características  da  mesma  (informalidade,  proximidade  pessoal,  globalidade,  
etc)  
 

3.  Público  alvo:  
 
Sociedade  em  geral,  pessoas  interessadas  em  desenvolver  e  explorar  o  seu  potencial  humano,  artístico  e  
cultural,  no  âmbito  da  fruição,  criação  e  formação.  

 
4.  Condições  de  utilização  do  produto  final:  
 
Aparelho  com  ligação  à  internet,  táctil  ou  não.  
 

5.  Análise  da  concorrência/referências:  

 
  .  concorrência  

http://www.dorfeu.pt  

Pontes  Fortes:  Simples  e  apelativo.  Grande  rigor  na  tipografia  utilizada.  Grelha  e  estrutura.  Coerência.  
 
Pontos  Fracos:  Não  fornece  ao  visitante  ligações  para  as  redes  sociais.  Os  contactos  poderiam  ter  mais  
destaque.  Colocar  o  nome  de  todos  os  sócios  era  evitável.  
 

http://www.acert.pt/  
 

Pontos  Fortes:  Estrutura,  organização    e  separação  das  varias  valências,  como  fossem  sub-­‐sites.  
 
Pontos  Fracos:  Não  recorre  a  qualquer  tipo  de  portfólio  fotográfico  ou  videografico.  Não  fornece  ao  
visitante  ligações  para  as  redes  sociais.  
 

http://www.fertilcultural.org/  
 
Pontos  Fortes:  Simples,  respeita  sempre  a  mesma  grelha,  a  mesma  estrutura.  A  agenda  acompanha  
todas  as  páginas  do  site.  
 
Pontos  Fracos:  Pouco  apelativo,  grafismo  demasiado  simplista.  Nao  dispõe  de  formulário  de  contacto.  
Não  passa  de  um  blog.  

  .  referências  

Quanto  às  referências  aqui  apresentadas,  não  são  de  carácter  idêntico  ao  website  da  Pantopeia,  mas  
sim  referências  inspiradoras  para  metáforas  de  interacção  e  funcionalidades  

http://themes.spiralpixelthemes.co.uk/?theme=Type+Anime  

Através  desta  demo,  o  grupo  decidiu  adoptar  a  técnica  de  fadein  e  de  fadeout  enquanto  o  utilizador  faz  
scroll,  fazendo  com  que  a  informação  central  (no  ecrã)  tenha  o  máximo  destaque.  

http://www.elpais.com.co/reportaje360/ediciones/oiga-­‐mire-­‐vea/#inicio  

Neste  menu  que  nos  é  apresentado,  gostámos  particularmente  da  dinâmica  que  os  ícones  centrais  no  
ecrã  ganham  com  o  efeito  de  flip  horizontal  ao  passar  com  o  pointer  por  cima,  revelando  informação  
adicional.    

http://docs.oracle.com/cd/E28280_01/web.1111/b31973/dv_timeline.htm  
http://graphictherapy.com/index2.html  

Estas  referências  servem  apenas  como  inspiração  para  a  forma  como  decidimos  apresentar  
graficamente  a  secção  Agenda  /  Actividades,  ou  seja,  na  primeira  página  encontramos  vários  exemplos  
de  timelines  horizontais,  na  segunda,  uma  implementação  gráfica  funcional.  A  nossa  ideia  cresceu  para  
uma  timeline  mais  orgânica  que  se  cruza  com  uma  imagem  de  marca  da  Casa  da  Pantopeia  –  as  
bandeirolas  distribuídas  pelos  tectos  e  portas.  Assim,  os  eventos  e  actividades  da  Pantopeia  estarão  
representados  numa  timeline,  pendurados.  _ver  balsamiq  mockup  “Pantopeia  Agenda”.  

http://www.puma.com/actvrcvr/#/athletes  

Nesta  referência  encontrámos  o  paradigma  que  queríamos  para  a  secção  “A  Pantopeia”  –  uma  forma  
pouco  entediante  de  apresentar  a  informação  mais  institucional.  Achamos  um  exemplo  excelente  e  que  
até  invejamos.  O  ecrã  é  dividido  ao  meio  por  duas  imagens  que,  com  o  scroll,  se  afastam  verticalmente  
uma  da  outra,  dando  espaço  a  outras  duas  que  lhes  seguem.  

 
6.  Identificação  da  informação  primária  e  secundária:  definição  do  alinhamento  de  conteúdos  
da  aplicação  

Primária:  Agenda  e  notícias  de  actividades,  Portfólio  das  actividades  já  realizadas,  valores/missão  
(diluídos),  caracterização  das  actividades  

Secundária:  Estrutura  funcional  (órgãos  sociais  e  estrutura  interna  -­‐  colectivos);  Meios  de  contacto  
(emails,  telefones,  etc.);  Links  para  redes  sociais  (blogger/wordpress,  facebook,  twitter)  e  parceiros.  

  .  ambiente  

Os  ambientes  a  criar  são  maioritariamente  dois:  

   -­‐  o  ambiente  de  início  de  página,  onde  o  utilizador  é  convidado  a  interagir  com  objectos  
tridimensionais  que  representam  ou  metaforizam  a  realidade  da  associação  -­‐  objectos  que  são  
facilmente  associados  à  actividade  da  Pantopeia;  

   -­‐  o  ambiente  da  informação  /  conteúdos  que  é  apresentado  como  uma  nova  camada,  também  
organicamente  construída  de  modo  a  não  esquecer  o  objectivo  de  manter  o  informalismo  e  a  dinâmica  
que  caracteriza  a  associação.  

.  elementos  metafóricos  

Dependendo  de  cada  área,  estes  elementos  vão  reflectir  o  conteúdo  ao  qual  dão  acesso.  No  caso  da  
área  de  agenda  /  actividades,  o  objecto  metafórico  será  um  calendário;  no  caso  do  portfolio,  uma  
máquina  fotográfica;  no  caso  do  formulário  de  contactos,  um  telefone.  
Serão  também  usados  botões,  tais  como  setas  direccionais,  setas  de  expansão  e  links  (imagem  e  texto).  

.  tipologia  de  interacção  na  navegação  

Arrastamento  dos  objectos  virtuais  já  mencionados,  point&click  em  áreas  específicas  (selecção).    
7.  Estrutura  arborescente  preliminar  

 
 

 
 

Esta  estrutura  composta,  permite  o  acesso  rápido  a  todas  as  secções  em  poucas  acções  (cliques  
e  hovers),  traduzindo  uma  navegação  sem  grande  profundidade.  A  ramificação  simples  disponibiliza  
ligação  /  acesso  aos  conteúdos  a  partir  da  Homepage  aos  diferentes  conteúdos,  e,  através  da  barra  de  
links,  o  utilizador  consegue  também  “saltar”  directamente  para  cada  secção  do  site.  

 
8.  Esquematização  da  aplicação  

I  –  Página  de  entrada  

• Website  (pantopeia.org/www)  

• Facebook  (facebook.com/pantopeia)  

• Blogger  (blog.pantopeia.org)  

II  –  Homepage  /  Website  /  “A  Mesa”  

• Agenda  /  Actividades  

o Pré-­‐informação  /  informação  

§ Lightbox  (fotografia)  /  Portfólio  

• A  Pantopeia  

o Historial  /  Missão  

o Valores  /  Organigrama  

o Contactos  

• Serviços  /  Valências  

o Educação  /  Formação  

o Criação  

o Promoção  /  Eventos  

o Técnica  

• Portfólio  

o Lightbox  (fotografia)  

• Formulário  de  Contacto  

  

9.  Fluxograma  

 
 

A  barra  de  links  superior  não  está  contemplada  no  fluxograma.  A  estrutura  não  é  alterada  e  deve  ser  
vista  como  um  “salto  rápido”  para  qualquer  uma  das  secções.  Traria  a  este  gráfico  mais  40  ligações  de  
um  sentido  para  as  5  secções  principais.
  

10.  Guião  técnico  de  conteúdos,  narrativa,  especificações  metafóricas  e  funcionais.  

 
.  caracterização  da  narrativa  
 
Para  caracterizarmos  a  narrativa  inerente  a  este  site,  será  apresentado  um  caminho  possível  de  
navegação:  Para  aceder  ao  website,  o  utilizador  começa  por  clicar  no  logotipo  da  Pantopeia.  É  
encaminhado  para  “A  Mesa”,  o  layout  principal  do  site.  Aqui,  “pega”  no  objecto  pretendido  e  coloca-­‐o  
na  “dropzone”,  que  transforma  o  objecto  tridimensional  num  ícone  2D  ao  mesmo  tempo  que  aparece  
uma  camada  semitransparente  com  o  conteúdo  escolhido.  Neste  caso,  foi  escolhida  a  Agenda.  Em  
seguida,  o  utilizador  “arrasta”  a  timeline  até  à  data  pretendida  e  passa  com  o  pointer  por  cima  do  
evento  que  quer  consultar.  Aqui,  a  pouca  informação  disponível  é  expandida  para  uma  sinopse,  outras  
informações  pertinentes  e  ligações  a  uma  lightbox  de  imagens,  a  vídeos  ou  documentos  externos.  O  
utilizador  pretende  ver  fotografias  e  clica  no  ícone  de  um  dos  thumbnails.  A  lightbox  do  evento  em  
questão  é  lançada  em  overlay,  ocupando  a  área  total  da  secção  agenda.  Agora  é  possível  avançar  ou  
recuar  no  slideshow  /  lightbox,  ou,  em  alternativa,  saltar  directamente  para  qualquer  fotografia  através  
das  thumbnails  no  rodapé  da  fotografia.  Após  esta  experiência,  pode  voltar  para  a  Homepage  com  um  
simples  clique  na  área  desfocada  ainda  visível  no  fundo.  Em  alternativa,  podia  ter  clicado  no  “X”  (botão)  
ou  num  dos  links  directos  da  barra  superior.  
 
.  especificação  funcional,  metafórica  e  de  conteúdos  
 
I  –  Página  de  entrada  (domínio  “pantopeia.org”)  –  logotipo  da  Pantopeia  com  três  imagens  que  são  
pseudo-­‐links  (pois  necessitam  de  interacção  de  clique)  para  os  3  destinos  possíveis.  
 
Composição  –  três  imagens  centradas  que  simbolizam  o  destino  a  escolher:  
1  –  website  (o  site  que  está  a  ser  apresentado  neste  documento)  
2  –  blog  (uma  extensão  mais  social  do  site  e  actividade  da  Pantopeia).  Mais  informal  e  com  
maior  volume  de  media,  tem  um  função  de  promoção  de  actividades.  
3  –  página  do  facebook  (mais  uma  presença  na  maior  rede  social,  one  se  divulgam  links  de  
interesse  bem  como  actividades  da  Pantopeia  (com  origem  no  blog  ou  website).  É  uma  ferramenta  de  
divulgação,  promoção  e  comunicação.  
 
Interacção  -­‐  O  tipo  de  interacção  é  o  clique  no  destino  pretendido.  Fadeout  para  a  nova  página.  Caso  a  
selecção  seja  o  website  da  Pantopeia,  é  dado  um  feedback  gráfico,  na  forma  de  “dialog  box”,  com  uma  
mensagem  de  boas  vindas.  
 
II  –  Website  da  Pantopeia  /  “A  MESA”  –  GUI  principal  
 
Composição  –  O  interface  principal  é  composto  por  uma  camada  gráfica  que  servirá  de  base  a  toda  a  
experiência  de  selecção.  A  metáfora  é  uma  mesa  de  trabalho  com  diferentes  objectos  que  podem  ser  
manipulados,  uns  levam  o  utilizador  a  uma  secção  do  site,  outros  têm  uma  função  meramente  lúdica  e  
de  entertenimento  (embora  sejam  em  menos  número).  Os  objectos  disponíveis  deverão  reflectir  cada  
secção  do  site,  de  modo  a  que  o  utilizador  não  tenha  dúvidas  relativamente  à  associação  mental  
(embora  também  possua  uma  legenda).  Existe  também  um  pequeno  plugin  (ou  mesmo  da  Pantopeia)  
de  leitor  de  música,  que  permitirá  as  funções  de  mute,  play,  pause,  skip  next,  skip  previous.  Este  leitor  
estará  “ligado”  a  um  serviço  de  webradio  e  estará  localizado  ao  lado  dos  links  presentes  na  homepage  
(www.pantopeia.org)  -­‐  para  www.facebook.com/pantopeia  e  blog.pantopeia.org,  com  os  logotipos  do  
respectivo  serviço.  Por  último,  para  utilizadores  mais  avançados  ou  utilizadores  que  necessitam  de  
maior  rapidez  e  fluidez  na  navegação,  existe  também  uma  barra  de  topo  com  os  links  rápidos  para  as  5  
secções.  
  
Interacção  -­‐  Este  tipo  de  interacção  remete  à  organicidade  e  informalidade  da  associação,  sem  esquecer  
o  “toque  especial”  que  tem  com  as  pessoas.  E  daí  o  agarrar  (click,hold&drag),  pois  a  Pantopeia  também  
quer  “agarrar”  pessoas,  exponenciando-­‐as  e  desafiando-­‐as  com  as  suas  actividades,  surpreendendo  com  
os  resultados.  O  website  deverá  também  “respirar”  estes  sentimentos,  tentando  fugir  do  convencional,  
mas  sem  entrar  no  experimental,  pois  o  público-­‐alvo  é  bastante  lato  (podemos  afirmar  seguramente  
que  vai  desde  o  sénior  aposentado,  à  criança  de  3  anos,  passando  por  um  CEO,  ou  empresa  que  
representa),  devido  aos  serviços  variados  que  fornece  /  disponibiliza.    
O  utilizador  é  assim  levado  a  interagir  com  os  objectos  e  colocá-­‐los  num  local  central  (o  “magic  point”,  
simbolizado  por  um  )identificado  que,  “magicamente”,  diminui  o  tamanho  do  objecto  ao  mesmo  tempo  
que  cria  um  morph  para  o  mesmo  objecto  mas  a  duas  dimensões  (3D  para  2D),  podendo  ser  usado  
como  ícone  na  secção  que  abrirá  de  seguida.  O  novo  conteúdo  só  é  aberto  se  o  objecto  permanecer  1  
segundo  em  cima  da  área  pré-­‐definida,  tornando  um  desafio  para  o  utilizador.  É  também  criado  um  
efeito  de  desfocagem  (progressiva)  à  “MESA”  enquanto  é  apresentada  uma  nova  camada  gráfica  e  de  
informação  dessa  secção  específica,  cujo  layout  depende  em  muito  dos  conteúdos.  Os  objectos  
restantes  auto-­‐organizam-­‐se  (em  pilha)  do  lado  direito  do  layout,  enquanto  o  utilizador  está  a  navegar  
na  secção  escolhida.  Voltam  ao  local  original,  logo  que  essa  secção  é  abandonada  /  fechada.  
 
Conteúdos  -­‐  As  secções  são  5  e  estão  representadas  pelos  objectos  metafóricos.  Segue  a  sua  lista,  com  
descrição  dos  conteúdos  e  interacção  /  funcionalidades:  
 

• A  –  Agenda  e  Actividades  (representada  pelo  objecto  calendário,  esta  secção  compreende  uma  
timeline  extensa  que  espelha  toda  a  actividade  passada  e  futura,  na  forma  de  uma  linha  ou  
cilindro  horizontal).  _ver  balsamiq  mockup  “Pantopeia  Agenda”.  

Ao  utilizador  é  apresentado,  em  primeiro  lugar  (principal  foco,  central),  o  mês  em  que  se  
encontra,    tendo  em  conta  o  dia  presente.  Poderá  então  andar  para  a  frente  ou  para  trás  no  
tempo  (direita  e  esquerda,  respectivamente)  através  do  arrastamento  (dragging)  da  própria  
timeline  (ver  ponto  5,  Referências,  Graphictherapy).  Desta  linha  (ou  cilindro)  principal  onde  
estão  representados  os  meses  do  ano,  surgem  linhas  que  terminam  numa  fotografia  /  imagem  
com  alguma  informação  (título,  tipo  de  evento  e  data,  denominada  de  “zona  de  pré-­‐
informação”).  Cada  linha  representa  uma  semana,  sendo  que  se  coexistirem  eventos  na  mesma  
semana,  vão  sendo  empilhados  na  linha.  Quando  os  eventos  ultrapassam  o  limite  da  camada  
desta  secção,  aparece  em  overlay  um  botão  /  seta,  que  permitirá  o  acesso  a  zonas  não  visíveis.  
Em  alternativa,  o  utilizador  pode  manipular  a  visão  da  sua  área  de  trabalho,  clicando  e  
arrastando  (em  zonas  que  não  têm  objectos).  
Ao  passar  por  cima  desta  zona  com  o  ponteiro,  é  revelada  uma  camada  informativa  da  
mesma  dimensão  (a  “zona  de  informação”,  com  efeito  de  expansão,  sobreposta,  se  necessário,  
a  outros  eventos)  que  desaparece  quando  o  ponteiro  abandona  essa  mesma  zona  (com  um  
delay  de  0.5seg).  Nesta  camada  é  onde  pode  ser  encontrada  toda  a  informação  da  actividade,  
links  para  media,  documentos  e  eventuais  links  externos  (ficheiros  ou  outros  URLs).    
Quando  uma  das  fotografias  é  clicada,  é  apresentada  uma  lightbox  (em  overlay,  do  
tamanho  exacto  do  conteúdo  “A  –  Agenda  e  Actividades”),  que  servirá  como  slideshow  de  todas  
as  imagens  relativas  a  esse  evento,  seja  futuro  ou  passado,  e  não  só  as  que  estão  em  thumbnail  
na  camada  informativa.  Se,  por  acaso,  se  tratar  de  um  evento  passado  e  importante,  há  grande  
hipótese  de  o  utilizador  estar  a  aceder,  neste  preciso  momento,  a  uma  área  comum  às  duas  
secções:  as  fotografias  do  portfólio  (que  poderão  ser  às  dezenas).  Existe  um  botão  de  fechar  “X”,  
que  faz  o  mesmo  que  clicar  fora  deste  camada  –  remete  o  utilizador  ao  layout  inicial  desta  
secção:  a  timeline  da  “Agenda  e  Actividades”.  
 Quando  um  vídeo,  um  ficheiro,  ou  um  link  externo  são  clicados,  é  sempre  aberta  uma  
nova  janela  /  tab  em  background,  permitindo  ao  utilizador  continuar  a  sua  experiência  de  
navegação  no  website.  
O  utilizador  tem  também  a  possibilidade  de  arrastar  a  “zona  de  informação”  de  cada  
evento  para  uma  área  denominada  de  “a  não  esquecer”,  onde  os  eventos  perdem  a  ligação  com  
a  timeline  e  ficam  “presos”  nessa  área  (metaforicamente,  com  velcro,  fita-­‐gaffa  ou  mesmo  um  
pionés).  Esta  é  uma  área  de  destaque  que  o  utilizador  pode  assim  ir  moldando  ao  longo  do  
tempo,    mediante  as  suas  preferências  (seria  possível  guardar  as  definições  através  de  cookies,  
ou,  numa  versão  do  site  mais  avançada,  através  do  login).  Quando  retira  o  evento  da  área  “a  
não  esquecer”,  a  ligação  com  a  timeline  é  restabelecida.  Os  eventos  preferidos  mantêm  as  
interacções  referidas  acima.  
  Como  elemento  lúdico  (e  até  estético-­‐organizativo),  o  utilizador  pode  também  apenas  
mudá-­‐los  de  sítio  e  recolocá-­‐los  (através  de  click,  hold,  drag,  release),  pois  os  mesmos  estão  
sempre  “ancorados”  à  sua  linha  através  de  uma  outra  linha  retráctil.  Quando  tocam/chocam  
com  outro  evento,  ambos  os  elementos  reagem  como  se  fossem  de  borracha  (ou  outro  material  
interessante  para  o  objectivo),  dando  a  ideia  dinâmica  de  movimento  (o  movimento  do  objecto  
deverá  mimar  uma  superfície  de  gelo,  permitindo  uma  grande  deslocação,  sempre  com  efeito  
de  “ease-­‐out”).  O  objecto  está,  neste  caso,  sempre  “ancorado”  à  sua  linha  principal.  
 
• B  –  A  Pantopeia  (secção  que  contempla  a  história,  valores,  missão,  organigrama  e  contactos  da  
Pantopeia.  É  representada  pelo  logotipo  da  Pantopeia,  num  cubo  tridimensional).    
 
Revela-­‐se  uma  camada  informativa  bastante  simples  maioritariamente  com  texto  em  que  a  
navegação  é  feita  verticalmente.  A  camada  é  dividida  em  duas  zonas  verticais,  duas  imagens  
com  texto  (excepto  nos  contactos,  que  ocupará  o  dobro  da  dimensão).  Cada  zona  vertical  é  
referente  a  um  conteúdo  diferente.  Com  recurso  à  tecnologia  HTML5,  seria  implementado  um  
efeito  de  troca  de  imagens,  através  do  scrolling  do  utilizador,  uma  para  baixo,  outra  para  cima,  
revelando  duas  novas  zonas.  Este  efeito  funcionaria  nas  duas  direcções  verticais  (  ver  ponto  5,  
Referências,  Spiral  Pixel  Design  e  Puma).  Existe  um  botão  de  fechar  “X”,  que  faz  o  mesmo  que  
clicar  fora  desta  camada  –  remete  o  utilizador  ao  layout  inicial  d’  “A  MESA”.  
 
• C  –  Serviços  /  Valências  (secção  que  pretende  listar  e  descrever  os  serviços  que  a  associação  
presta  quer  aos  sócios,  quer  aos  não-­‐sócios  ou  mesmo  a  entidades  externas  e  também  as  suas  
valências).  
 
Apresenta-­‐se  como  uma  camada  em  overlay  semitransparente  onde  figuram  4  imagens  
representativas  das  áreas  de  intervenção  da  associação.  Existe  um  botão  “X”  no  canto  superior,  
que  faz  o  mesmo  que  clicar  fora  desta  camada  –  remete  o  utilizador  ao  layout  inicial  da  secção  
“Agenda  e  Actividades”.  
Quando  o  ponteiro  passa  por  cima  de  cada  imagem,  esta  faz  um  efeito  de  flip  horizontal,  
revelando  o  texto  descritivo  (ver  ponto  5,  Referências,  Oiga-­‐Mira-­‐Vea  /  El  Pais).  Ao  ser  clicada  é  
aberta  uma  camada  rectangular  com  informação  sobre  o  serviço  /  valência  (maioritariamente  
textual  e  com  uns  exemplos  fotográficos)  sobre  essa  área  de  intervenção.  Essas  áreas  são:  
1. Formação  /  Educação  (no  domínio  da  cultura,  da  arte-­‐educação,  educação  
artística,  formação  artística  especializada  formação  técnica  especializada  e  
outros  projectos  que  se  relacionem  com  a  comunidade  educativa,  desde  o  apoio  
ao  estudo  às  explicações)  
2. Criação  (todas  as  criações  artísticas  nas  mais  variadas  vertentes:  teatro,  dança,  
música,  pintura,  ilustração,  fotografia,  vídeo,  pluridisciplinares  ou  cruzamentos  
disciplinares,  etc.)  
 3. Promoção  /  Eventos  (tais  como  exposições,  mostras,  festivais,  concursos,  
conferências,  palestras,  acolhimento  de  espectáculos  artísticos,  festas  
temáticas,  lançamentos  de  livros  ou  outros  objectos  artísticos,  etc.)  
4. Técnica  (serviços  técnicos  especializados  nas  áreas  de  iluminação  –  desenho,  
implementação,  montagem  e  operação  –  maquinaria  de  cena,  audio  –  
sonoplastia,  desenho  de  som  e  operação,  cenografia,  aderecismo,  figurinismo  e  
confecção,  interpretação,  locução,  dobragem)  
 
Nesta  secção,  o  objectivo  é  meramente  informativo.  É  uma  forma  rápida  do  visitante  
perceber  o  meio  em  que  a  Pantopeia  se  insere,  o  que  faz  e  com  quem  trabalha.  É,  de  todas  as  
secções  do  website,  a  mais  dirigida  ao  exterior.  Se  quisermos,  podemos  mesmo  assumi-­‐la  como  
a  propaganda  profissional  da  associação  e  seus  colaboradores.  O  mote,  neste  caso,  é  “Conte  
com  a  Pantopeia  para...”.  O  que  é  pretendido  é  que  o  utilizador  contacte  a  Pantopeia  ou  
frequente  uma  das  acções  promovidas  pela  mesma.  O  desejo  no  utilizador  é  expresso  pela  frase  
“Eu  quero  a  Pantopeia  para...”.  O  utilizador  é  também  motivado  a  visitar  o  portfólio  (através  do  
texto  “Veja  o  nosso  portfólio”),  onde  poderá  ter  uma  ideia  mais  consistente  dos  trabalhos  
realizados  pela  Pantopeia.  
 
 
• D  –  Portfólio  (secção  onde  figuram  as  lightboxes  de  fotografia,  bem  como  outros  tipos  de  media  
e  documentos  referentes  a  toda  a  actividade  da  Pantopeia)  
 
Nesta  última  secção  temos,  basicamente,  uma  camada  de  um  ecrã  onde  figura  uma  lista  (em  texto)  
de  todas  as  actividades  e  eventos  que  a  Pantopeia  realizou  ou  esteve  envolvida,  com  acesso  directo  
a  lightboxes  de  fotografia  e  a  links  externos  de  vídeos,  documentos,  clippings,  ou  mesmo  sites  
dedicados.  Essa  lista  textual  permitirá  a  funcionalidade  de  copy-­‐paste  e  estará  organizada  
cronologicamente.  O  comportamento,  a  nível  de  interacção,  da  lightbox  /  slideshow  é  o  já  referido  
anteriormente,  pois  partilha  a  mesma  tecnologia  das  fotografias  da  secção  “Agenda  e  Actividades”.  
Esta  é  a  zona  onde  o  trabalho  da  Pantopeia  poderá  ser  visto  graficamente  e  exigirá  uma  actualização  
quase  constante  dos  conteúdos.  Fechando  esta  lista  (clicando  no  “X”  ou  clicando  fora  da  camada),  o  
utilizador  é  levado  para  o  GUI  principal  de  selecção,  “A  Mesa”.  
 
 
• E  –  Formulário  de  Contacto  
 
Como  o  próprio  nome  indica,  é  um  simples  form  de  contacto  HTML,  ligado  a  um  cgi-­‐bin,  que  envia  um  
email  para  geral@pantopeia.org,  com  4  campos  de  texto:  email  de  contacto,  telefone  de  contacto,  
assunto  e  corpo  da  mensagem.  Uma  forma  simples  do  utilizador  se  expressar  ou  comunicar  com  a  
Pantopeia.  
 
  
11  –  Guião  Literário  
 
 
  
  
  

 
  
  
  

 
  

Ivo  Prata  18258  

Manuel  Avila  69190    
Nuno  Trindade  69594  
Guionismo  /  Novas  Tecnologias  da  Comunicação  
Universidade  de  Aveiro  .  junho  2013