CDI – COMUNIAÇÕES DIGITAIS E INTERNET
NOBEL XXI
Relatório final
Inês Dias Turma 4;Rui Moreira Turma 4 10-12-2012
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.
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.
• 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.
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.
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.
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.
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
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
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.
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.
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.
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>.
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.
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">.
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>”.
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.
