CDI  –  COMUNIAÇÕES  DIGITAIS  E  INTERNET  

NOBEL  XXI  Relatório  final  Inês  Dias  Turma  4;Rui  Moreira  Turma  4  10-­12-­2012          

     

Universidade  do  Porto:  Licenciatura  em  Ciências  da  Comunicação;  

2    

NOBEL  XXI/INTRODUÇÃO         Nobel  XXI  é  o  nome  do  nosso  sítio  web  que  pretende  dar  a  conhecer  tudo  acerca  do  prémio  criado  por  Alfred  Nobel,  distribuído  anualmente  a  pessoas  que  fizeram   pesquisas   importantes,   criaram   técnicas   pioneiras   ou   deram  contribuições   influentes  na  sociedade.  O  utilizador  pode  conhecer  a  história  do  prémio,  todas  as  categorias  e  informações  relevantes.  O  nome  do  site  surge  pelo  facto   de   facultarmos   também   acesso   aos   vencedores   do   século   XXI   nas   6  categorias.  

Apesar   de   o   conteúdo   não   ser   parâmetro   de   avaliação,   gostaríamos   de  referir   que   optamos   por   colocar   no   nosso  website   um   elemento   de   distinção.  Afinal,   é   sem   dúvida   importante   ter   estes   aspetos   em   consideração   quando   se  realiza  um  site.  Temos  de  pensar  em  conquistar  visualizadores  e  essa  conquista  depende   da   diferença,   novidade   e   inovação.   Assim,   sendo   vários   os   sites   na  internet   que   partilham   as   componentes   anteriormente   referidas,   o   nosso  “ingrediente  surpresa”,  que  nos  distancia  da  restante  oferta,  é  a  presença  de  uma  análise  criativa  aos  dados  do  prémio.  O  utilizador  na  página  “Nobel  em  Números”  pode  visualizar  um  tratamento  de  dados  que  resulta  em  constatações  relevantes.  Nomeadamente,  fazemos  uma  comparação  entre  o  sexo  feminino  e  masculino  em  relação   ao   número   de   vitórias,   e   comparamos   a   quantidade   de   distinções   nos  diferentes   continentes.   Outros   tratamentos   de   dados   poderiam   ter   sido   feitos  mas  acreditamos  que  assim  já  fica  demonstrada  a  ideia  que  tínhamos  para  esta  secção  do  nosso  sítio  na  web.    

Mais  à  frente,  no  mapa  do  sítio,  serão  discriminados  os  conteúdos  de  cada  página.                                                

3    

MAPA  DO  SÍTIO    

        Como   é   visível   na   representação   vetorial   apresentada,   o   nosso   site   é  composto  por  15  páginas  (mais  um  botão  que  dá  para  a  Homepage).  Uma  outra  característica  importante  de  referir  é  a  não  linearidade  do  sítio  web.  O  utilizador  tem   liberdade   para   se   deslocar   pelos   conteúdos,   não   sendo   forçado   por   uma  linha   rígida   de   navegação.   Por   exemplo,   quando   está   num   terceiro   nível,   na  página   “Economia”,   o   utilizador   pode   apenas   com   um   clic   voltar   a   consultar   a  página  “O  Prémio”.  Este  fator  é  de  extrema  importância  e  deve  ser  sempre  tido  em  consideração.    

4    

• Começamos   por   falar   num   primeiro   nível:   A  Homepage.   No   nosso   caso   a  página   inicial   adquire   contornos  muito   específicos.   Funciona   como   uma  página  de   introdução  que   se  poderia  assemelhar  ao  estilo   comummente  adotado  nos  anos  90  em  web  design.  Porém,  o  que  por  vezes  acontece  é  que   este   tipo   de   design   é   utilizado   de   uma   forma   errada   onde   se  “bombardeia”  o  utilizador  com  informação  que  ele  não  solicitou.  Tivemos  esse  facto  em  consideração  e  a  nossa  página  de  entrada  não  corre  o  risco  de  cometer  esse  equívoco.  Ela  é  apenas  um  ponto  de  partida.  Não  fazemos  o   utilizador   perder   tempo   nem   obrigamos   a   observação   de   informação  não  solicitada.    A   homepage   contém   apenas   uma   breve   descrição   dos   conteúdos   que   o  utilizador  pode  encontrar  no  sítio,  facilitando  a  consulta.  Depois  de  ler  (ou  não)   a   breve   descrição   o   utilizador   pode   clicar   num   dos   4   links.   Sendo  conduzido  a  um  segundo  nível  de  páginas.    Por   opção,   existe   apenas   retorno   directo   à   homepage   no   footer,   não  obrigando   os   utilizadores   a   acederem   constantemente   à   mesma   para  acederem  a  outros  conteúdos.  Sendo  esta  página  num  estilo  introdutório,  a   informação   que   contém   não   é   essencial   para   resto   da   navegação.   Do  mesmo  modo,  a  não  linearidade  do  site  permite  que  exista  sempre  acesso  a   todos   os   conteúdos   sem   estar   constantemente   a   voltar   ao   início   ou   a  retroceder.    

• Ao   abandonar   a   homepage   somos   conduzidos   para   uma   das   seguintes  páginas:   “O   Prémio”   (contém   informações   relativas   ao   prémio),  “Categorias”  (podemos  aceder  a  qualquer  uma  das  6  categorias  em  que  é  entregue  esta  distinção),  “Nobel  e  Números”(onde  podem  consultadas  as  duas   infografias   relativas   a   dados   recolhidos)   e   “Alfred   Nobel”(com  informações  do  criador  do  Prémio).  A  partir  daqui  as  opções  são  imensas.  Mais  à  frente  exploramos  o  conteúdo  e  o  código  destas  páginas.    

• Num   terceiro   nível   encontramos   as   6   categorias,   e   as   duas   páginas   das  infografias.   Ou   seja,   dados   e   tratamento   de   informação   relativa   aos  vencedores.    

• Finalmente   lembramos   que   a   qualquer   momento   o   utilizador   pode  encontrar   no   Footer   da   página   dois   Links   para,   respetivamente,   “Sobre  nós”(com  informações  sobre  os  criadores  do  site  e  o  objetivo  do  mesmo)  e   o   “Mapa   do   sítio”(representação   vetorial   das   possibilidades   de  navegação  para  consultar  dados)  E  ainda,  como  já  referido,  à  homepage.    

                       

5    

ELEMENTOS  DE  COESÃO  E  ORGANIZAÇÃO  NO  DESIGN  DO  SÍTIO  WEB    1.  A  COR       Tivemos  sempre  em  mente  que  a  palete  de  cores  escolhida  para  o  design  do  site   teria   de   ter   um   sentido   denotativo,   uma   expressividade   passível   de   ser  explicada.  A   cor   tem  de   funcionar   como  um  elemento   estético  de   coesão   entre  elementos  do  site.  O  conceito  por  trás  da  nossa  palete  de  cores  foi  o  prémio.                                       Como  se  pode  visualizar  na  imagem  este  tem  um  tom  de  dourado  com  um  toque   de   castanho.   O   conceito   de   Golden   e   Tons   Terra   passou   assim   a   ser   o  centro   da   nossa   atenção   na   nossa   busca   pelas   cores   do   site.   As   4   cores   do  logótipo   espelham   esta   ideia:   #c57d4b   (Alfred   Nobel),   #EEB422   (O   Prémio),  #511d07  (Categorias),  #e7c989  (Nobel  em  Números).  São   estas   as   cores   que   se   repetem   ao   longo   do   website   conforme   a   área   do  logótipo  em  que  o  utilizador  esta.  Assim  temos  coesão  lógica  de  tons  que  permite  corelacionar  o  site  de  forma  eficiente.    2.  TIPOGRAFIA  E  TAMANHOS       Para   o   nosso   site   optamos   pelo   tipo   de   letra   Geórgia   por   ser   uma   letra  muito  utilizado  em  blogs  e  nos  sites,  classificada  como  uma  das  melhores  letras  para   os   blogs.   Escolhemos   também   por   ser   uma   letra   não  muito   austera   nem  demasiado  informal.     Em   relação   ao   tamanho   da   letra,   nãodefinimos   deste   o   princípio   nem  decidimos   criao   um   padrão   para   todo   o   trabalho   porque   decidimos   adaptar   a  cada  conceito  e  a  cada  disposição  na  página.     Quanto   a   negritos   e   itálios   não   utilizamos   no   nosso   site   pois   o   que  queremos  evidencia  é  feito  através  de  cabeçalhos  e  tamanhos  de  letra.        

6    

3.  LOGÓTIPO                                     Como  é  facilmente  percetível  o   logótipo  do  site  é  desenhado  à   imagem  do  Prémio   que   é   oferecido   todos   os   anos.   Este   funciona   como   menu   principal  composto  por  4  Links.  Mantem-­‐se  sempre  no  canto  superior  esquerdo  de  todas  as  páginas.  Este  elemento  do  sítio  web  é,  para  além  de  mais  um  contributo  para  a  coesão   estética,   a   componente   que   melhor   contribui   para   contrariar   a  linearidade.  A  qualquer  momento  o  utilizador  “salta”  para  outros  conteúdos  sem  ter  de  voltar  á  página  inicial.      4.  A  BARRA  LATERAL  

      Seguindo   o   mesmo   raciocínio  anterior,   este   elemento   também   foi  desenhado   para   contribuir   na  organização   e   ligação.   A   barra   lateral  acompanha  um  modelo  de  página  que   se  repete   enumeras   vezes   mas   a   cor   da  mesma  vai   sofrendo  alterações   conforme  a   área   do   logótipo   em   que   o   utilizador  está.  Isto  ajuda  a  orientar  a  navegação  no  site.   Temos   aqui   o   exemplo   de  componentes   do   design   a   trabalharem  juntos:   Cor   +   Logótipo.   Relacionam-­‐se   as  componentes.       Em   duas   páginas,   nomeadamente  nas   duas   infografias,   esta   barra   deixa   de  existir.   Foi   uma   opção   tomada   para  diferenciar  o  tipo  de  conteúdos  que  estão  a   ser  observados.  Destacamos  as  páginas  sem  as  distanciar.      

7    

5.  MENU  

    Este   elemento   do   header   da   página   está   presente   em   “Categorias”   e   em  “Nobel  e  Números”.  Surge  contendo  os  links  que  dão  acesso  a  um  terceiro  nível  de  hierarquização  de  páginas.  Hierarquização  essa  que  muitas  vezes   se  dissipa  pela   dinâmica   de   ligações   e   navegabilidade.   Não   existem   níveis   totalmente  isolados.  Mantem  presente  o  conceito  de  coesão  na  cor:  a  cor  da  letra  do  menu,  a  cor  destacada  no  logótipo  e  a  cor  da  barra  lateral  coincidem.            ESQUEMAS  DE  PÁGINA    MODELO  HOMEPAGE    

   

Este  é  o  modelo  de  página  da  homepage.  Tem  presente  essencialmente  2  elementos.   Um   conjunto   de   quatro   imagens   que   funciona   como   “Menu”   e   nos  permite  aceder  a  um  segundo  nível.  E,  do  lado  direito,  um  “Texto  de  Introdução”  que   dá   a   conhecer   aos   utilizadores   quais   os   conteúdos   que   pode   encontrar   no  nosso  site.  Quanto  à  disposição,  optamos  por  colocar  o”  Texto  de  Introdução”  ao  lado   direito   do   “Menu”,   não   completamente   centrado,   como   podemos   verificar  pelo   “padding-­‐top”   de   100px.   Como   podemos   verificar,   esta   página   é   mais  pequena  em  “altura”,  tem  apenas  450px,  de  modo  aos  utilizadores  terem  apenas  a  página  necessária,  e  utilizada  para  navegar.  Por  questão  estética  também.  

8    

MODELO  DE  PÁGINA  2      

      Este   é   o   Segundo  modelo   de   página   (Alfred   Nobel,   O   Prémio,   Categorias,  Nobel   em   Números,   Paz,   Literatura,   Medicina,   Física,   Economia   e   Química).  Podemos   encontrar   duas   colunas.   Podemos   encontrar   do   lado   esquerdo   um  “header”   que   contém   sempre   dois   elementos.   Um   “Menu”   com   metade   do  tamanho   da   da   página   inicial   que   permite   aceder   aos  mesmo   conteúdos   do   já  referido,  com  a   fatia  com  a  cor  de  acordo  com  a  página  dos  conteúdos  que  nos  encontramos.   E   uma   barra   200x1100px   em   que   varia   a   cor   de   acordo   com   a  página  e  o  conteúdo  que  acedemos.  Temos  também  na  parte  superior  um  Menu  de  Navegação  (não  em  todos,  algumas  páginas  são  contituidas  da  mesma  forma  mas   sem  menu.   Por   esta   única   variante,   optamos   por   não   definir   como   outro  modelo  de  página)    que  no  caso  da  página  das  categorias,  tem  6  botões  que  nos  permite   aceder   aos   prémios   de   cada   uma   das   6   categorias   reconhecidas;   e   no  caso   do   Nobel   em   Números,   tem   2   botões   que   nos   permitem   aceder   às   2  

9    

infografias   relativamente   aos   vencedor   do   prémio.   Depois   podemos   encontrar  uma   secção,   abaixo   da   “nav”   com   conteúdo   que   varia   entre   Imagens   e   Texto,  Texto   e   Video,   Texto   e   Tabelas   ou   apenas   Texto.   De   acordo   com   a   página   que  acedemos.  No  fundo  da  “section”  podemos  encontrar  um  footer  com  3  ligações:  “Sobre  Nós”,  “Mapa  do  Sítio”,  e  “Homepage”.    As  dimensões  desta  página  modelo,  tal  como  a  do  nível  3,  é  de  1000x1340px  com  um  border  a  delimitar.  As  margens  em  torno  da  página  são  automáticas,  de  forma  a  não  existir  erro  de  dimensões,  isto  é  demonstrado  com  os  backgrounds  “lightgrey”.      MODELO  DE  PÁGINA  3    

   

10    

  Este  é  o  modelo  de  página  3  correspondente  às  páginas  Nobel  em  Números  –   Vencedores   por   Sexo,   Nobel   em   Números   –   Vencedores   no   Mapa,   e   com  algumas   variações     nas   páginas   Sobre   Nós   e  Mapa   do   Sítio.   No   caso   das   duas  primeiras   referidas,   encontramos   o   mesmo   menu   das   páginas   anteriores   mas  num   header   pequeno   no   topo,   ou   seja,   não   funciona   como   coluna   como   no  modelo   de   página   anterior.   Tem   também   uma   secção   mais   abrangente,   que  permite  a  disposição  maior  de  elementos  e  contém  a  mesma  “nav”  das  páginas  do  modelo  anterior  que  são  as  da  página  Nobel  em  Números.     Na  secção  encontramos  4  tipos  de  elementos:    duas  imagens,  uma  legenda  e  o  footer  igual  a  todas  as  outras  páginas.  Como  podemos  verificar,  o  footer  só  não  está   presente,   por   opção,   na   homepage.   Quanto   a   esta   “section”   encontramos  uma   imagem   relative   às   infografias   com   a   respetiva   legenda   e   depois   do   lado  direito   uma   barra,   dentro   da  mesma   “section”,   com   a   imagem  de  Alfred  Nobel  com   as   dimensões   de   200x1000px.   Quanto   às   dimensões   da   página,   são  semelhantes  às  do  modelo  de  página  anteriormente  referido.                                                                      

11    

ANÁLISE  HTML  E  CSS       Para   melhor   darmos   a   conhecer   o   nosso   site   e   informarmos   sobre   os  elementos  que  o  compõem,  decidimos  retirar   imagens  do  mesmo  e  descrever  a  forma  como  são  compostos.  Alguns  elementos  gerais  presentes  tanto  a  nível  de  HTML  como  de  CSS.    

    Esta  é  a  nossa  homepage  que  está  dividida  em  duas  secções,  a  “esquerda”,  e  a  “direita”.       Na   seccção   da   esquerda   podemos   verificar   a   presença   duas   divs   que  compõem  cada  parte  da   imagem  unida,   (div   “first”   e  div   “second”)   e   cada  uma  dessas  divs  contém  outras  duas  divs  com  imagens.  Se  passarmos  o  rato  por  cima  de   cada  uma  das  4  divs   (correspondentes   a   4   imagens)   elas  mudam  de   côr  de  acordo  com  o  conceito  da  página  que  são  direccionadas  (hover).       Na  secção    da  direita  verificamos  apenas  texto.  Um  h1  (cabeçalho  de  tipo  1)  e   um   h2   (cabeçalho   de   tipo   2)   .   Também   podemos   verificar   que,   tal   como   ao  longo  do  trabalho,  o  tipo  de  letra  adoptado  é  o  Georgia  e  as  cores  variam  sempre  de   acordo   com   os   conceitos   de   cada   página.   Através   da   imagem   podemos  também  verificar  os  tamanhos  de  letra  e  o  códigos  das  cores.    

12    

                                           

Nesta  imagem  podemos  ver  a  forma  como  foi  feito  o  nosso  footer.  O  footer  faz   parte   de   uma  div   e   cada   uma  das   palavras   presentes   funciona   como  botão  link   para   a   página   correspondente.   (   ex:   <a   href="sobrenos.html">Sobre  nós</a>).  Podemos  verificar  também  uma  imagem  no  quadrado  vermelho.                                                                  

13    

                                                             

Nesta  imagem  podemos  observar  a  constituição  de  vários  dos  elementos  HTML  e  CSS  da  página  modelo  2.  Do  lado  esquerdo  encontramos  um  header  com  2  elementos:  o  logótipo  que  nos  permite  aceder  a  qualquer  uma  das  páginas  que  poderiam  ser  escolhidas  na  homepage,  mantendo  a  não  linearidade  de  pesquisa;  e  uma  barra  com  a  cor  e  o  tamanho  (o  tamanho  é  igual  em  todas  as  páginas  que  está  presente)   correspondente   ao   conceito  de   cada  página.  O   código  da   cor  do  menu   de   navegação   é   correspondente   a   todas   as   cores   presentes   nas   páginas    (tanto   na   fatia   selecionada,   como   na   barra,   no   menu   e   no   texto).   A   fatia  selecionada  no  logótipo  –  O  Prémio  –  é  a  demonstração  da  passagem  do  rato  por  cima   em   que   acontece   a   mudança   de   cor   (de   imagem   –   um   hover).   Também  verificamos  a  existência  de  uma  nav  que  é  um  menu  de  navegação  em  que  cada  um  dos   botões   corresponde   a   um   link   como  podemos   verificar   na   imagem,   no  quadrado   azul.   Quanto   à   outra   parte   geral   da   página,   encontramos   a   section  “categoriassec”  em  que  os  conteúdos  dentro  variam  em  tabelas,  texto,  imagens  e  vídeo.  Neste  caso  encontramos  textos  em  que  cara  parágrafo  está  inserido  num  <p>.      

14    

                                                           

Nesta   imagem  podem  verificar  uma  das   tabelas  que  utilizamos.  A   tabela  completa  que  está  dentro  duma  div,  que  é  denominada  table  border  1  (de  tipo  1  –  isto  tem  a  ver  com  o  tipo  de  saliência  da  border  que  optamos).  Dentro  da  tabela  cada  coluna  horizontal  é  denominada  tr  e  cada  parcela  td.                                

15    

     

Nesta   imagem   que   corresponde   ao  modelo   de   página   3,   tem   o   logótipo  num  header  e  um  menu  de  navegação.  Depois  tem  uma  section  global,  neste  caso  denominada   “infos”,     em  que  estão  presentes   elementos   como   texto,   imagem  e  subtítulo     (imagens   e   subtítulos   é   o   caso   aqui   presente).     Aqui   é   importante  mostrar   a   presença   da   legenda   da   imagem   da   infografia,   que   é   feita   com  <br><span  style="font-­‐size:small">.                                    

16    

                                                 

Seleccionamos  esta  imagem  na  análise  para  mostrar  a  presença  de  vídeo  no  nosso  site.  O  site  foi  introduzido  na  secção  através  de  “<iframe  "”></iframe>”,  neste   caso,   “<iframe   width="560"   height="315"  src="http://www.youtube.com/embed/2dRr-­‐fnPCwM"   frameborder="0"  allowfullscreen></iframe>”.                                        

17    

CONCLUSÃO       Este  site  sobre  o  Prémio  Nobel  foi  um  projeto  que  nos  deu  muito  trabalho,  exigiu  muitas  reuniões,  muita  discussões  de  conceitos,  muitas  “dores  de  cabeça”  porque   não   estávamos   muito   à   vontade   no   HTML   e   no   CSS.   Era   assim   uma  experiência  nova  em  que  os  conhecimentos  nas  aulas,  as  constantes  questões  aos  professores  e  vasta  pesquisa,  são  prova  que  nem  sempre  são  suficientes  porque  como   afirmaram   os   professores   nas   aulas,   “aprende-­‐se   com   a   experiência,   a  trabalhar”.  Tal  como  diz  Picasso  “Que  a  inspiração  chegue  não  depende  de  mim.  A   única   coisa   que   posso   fazer   é   garantir   que   ela   me   encontre   a   trabalhar”.  Confessámos  que  nem  sempre  estávamos  a  conseguir  implementar  os  conceitos.       Mas  chegamos  ao  fim  com  a  plena  consciência  que  demos  o  nosso  melhor  para  o  projeto  e  que  conseguimos  implementar,  após  muito  esforço  e  dedicação,  o   conceito   elegante   e   pragmático   que   definidos,   de   forma   a   fugir   um  pouco   às  linhas   dos   sites   de   hoje   em   dia,   que   por   vezes   são   demasiado   complexos   e  lineares,   tal   como   o   da   Fundação   Gulbenkian   que   analisamos.   Tentamos   não  adoptar  desses  erros.     Apesar  de   já   constar  no  nosso   trabalho  esse  dado,  podemos   referir  que  é  um   orgulho   ter   feito   este   trabalho   numa   altura   em   que   um   português,   Durão  Barroso,  deu  a  cara  pelo  Prémio  Nobel  da  Paz  atribuído  à  União  Europeia.     Para   concluir,   podemos   ainda   dizer   que   estamos   satisfeitos   com   a   nossa  prestação  e   foi  um  trabalho  que  nos  deu  muito  prazer  de   fazer,  principalmente  pelo  resultado  final.