Epic Ads

From Labmm2

Latest revision as of 02:08, 22 June 2011

Grupo

Adriana Vaz nº60110

Daniel Rodrigues nº42093

Miguel Moreira nº 60108

Ricardo Carvalho nº59763

Apresentação e contextualização do tema

Ao deparar-nos com e escolha de um tema para o nosso projecto surgiu a ideia de fazer um site relacionado com publicidade, sendo algo invulgar na internet ao nível da abordagem que nos propusemos a fazer, aplicando o conceito de timeline e viagem no tempo.
Trata-se de um website sobre vídeos e cartazes de publicidade em que o conceito geral é uma viagem no tempo pelas diversas publicidades e campanhas levadas a cabo pelas grandes marcas, nomeadamente aquelas aquelas que mais se destacaram no mundo televisivo e restantes media.
Este site pode inserir-se na categoria de infotainment, já que pretendemos transmitir uma pequena dose de conteúdos numa base de entretenimento, cativando o interesse e curiosidade do utilizador em adquirir novos conhecimentos de uma forma dinâmica.
Desta forma, objectivo principal da página é relatar a evolução de uma área em constante evolução: publicidade, dando a conhecer e/ou a reviver os melhores, ou mais excêntricos, momentos publicitários de décadas passadas até actualidade, ou seja, desde a imagem a preto e branco até às tecnologias audiovisuais que conhecemos hoje em dia.

Fluxograma

Sendo um website que possibilita vários tipos de navegação, ou seja, tem uma interface ambiente misturada com índex (facilitando a navegação do utilizador), a estrutura arborescente do nosso site será do tipo composta, pois reunirá a possibilidade de o utilizador transitar entre nos e links livremente, mas tendo zonas onde será só possível regressar a página anterior. Quanto a ramificação será do tipo mista pois disponibiliza ligações entre ramos diferentes mesmo tendo ramificações simples. Por fim, a estrutura será larga pois permite o acesso rápido em poucos cliques à informação e o mesmo ramo terá vários links que se ligam a este.

Layouts

O nosso website terá cinco modelos de ecrãs destinados a inserção de diferentes conteúdos, havendo assim uma diferenciação de ecrã para ecrã para que o utilizador perceba a que conteúdo se refere. Assim sendo, os vários layouts para os cinco modelos de ecrãs que vamos ter são:

Main page

Nesta página encontra-se o logótipo do website que servirá de botão de home. Em baixo estará disponível um menu para que seja facilitada a navegação.

Main Page

Ecrã da timeline

Aqui será possível ver no centro do browser uma televisão, onde se irão encontrar os vídeos que colocaremos disponíveis na página e ao lado um poster relativo à publicidade observada na televisão, que servirá como botão de acesso para uma página de conteúdos relativos ao produto observado. Em baixo, a ocupar todo o espaço horizontal da página do browser, existirá uma timeline para que se possa percorrer as décadas e observar vários vídeos que foram marcantes na memória das pessoas na década referente. E tal como irá acontecer em todos os ecrãs do website terá no seu canto superior direito o logótipo e o menu.

Timeline

Ecrã de conteúdos

Esta página será dividida em dois planos, um de conteúdo gráfico e outro em que será disponibilizado informação acerca da marca a que se refere. Assim sendo, o primeiro plano terá uma faixa de uma determinada cor com o nome do produto e com o objecto que o caracteriza. Por exemplo na imagem da coca-cola, em baixo téra os vídeos e as imagens que são disponibilizados no ecrã que referimos anteriormente que são sobre a marca em questão. Na segunda parte do layout será então possível ler informações relativas ao produto. Relativamente à ordem de disposição dos conteúdos, uma vez que, de acordo com a semiótica estamos habituados a ler da esquerda para a direita, as nossas páginas terão as imagens posicionadas à esquerda e o texto à direita para manter a coerência do fluxo de informação. Tal como já foi referido anteriormente terá no canto superior direito o logótipo e o menu.

Conteúdo

Ecrã dos contactos

Esta página será destinada à partilha de comentários e críticas do utilizador para que possamos saber a sua opinião e que outras publicidades gostariam de ver adicionadas ao site. Será também possível partilhar o site no facebook através de um botão. O layout desta página será da mesma forma dividida como na parte dos conteúdos, porém do lado esquerdo terá uma espécie de formulário, tendo como campos o nome do utilizador, o e-mail e a mensagem que este nos quer enviar. No lado direito terá um texto explicativo sobre a funcionalidade deste formulário: comentários e pedidos de inserção de novas publicidades. Mais uma vez no canto superior da página terá o logótipo e o menu.

Contactos

Ecrã About us

Este ecrã será algo do género do layout dos conteúdos mas a faixa que referimos nesse ponto será algo diferente, pois terá pedaços de imagens que se complementam e ao clicar em cada pedaço aparecerá a imagem original referente a esse pedaço, funcionando como um botão, pois cada imagem será referente a cada um de nós, disponibilizando-se os nomes de cada um.

About Us

Estrutura XHTML implementada

A nossa estrtura HTML é essencialmente constituída por divs.

Folhas de estilo (CSS)

Utilizamos uma folha de estilos para cada página com os respectivos comentários em cada uma.

Main Page

Página conteúdos

Página da timeline

Página dos contactos

Página About Us

Principais scripts desenvolvidas (JavaScript)

Em Java Script implementamos os vídeos e imagens a aparecer no banner na página dos conteúdos.

Código:

Integração com outras tecnologias (frameworks, linguagens, etc...)

No desenvolvimento do site utilizamos também JQuery para fazer o menu e a transição entres as décadas da timeline e a animação na página About us. Usamos também um pacote de código css e JavaScript para implementar scroll sugerido pelo prof.Hélder Caixinha.

Código do menu:

Código animação da timeline:

Código animação da página About Us:

Soluções técnicas para problemas encontrados

Ao longo do desenvolvimento do site deparámo-nos com diversos problemas.
Em relação ao HTML não tivemos grandes dificuldades pelo que o site ficou bem estruturado e não apresentou problemas relacionados com isso. No que diz respeito a css deparámo-nos com alguns problemas. Não estávamos a conseguir colocar o texto em colunas na página dos conteúdos. Para a resolução do problema dividimos o texto em duas divs que colocámos dentro de outra div e implementámos um float para o lado esquerdo e direito respectivamente.
O link para fazer “gosto” do site no Facebook também nos deu alguns problemas na medida em que não obedecia às indicações de posicionamento e fluído de informação. A solução encontrada para este problema não foi muito viável uma vez que o posicionamento que conseguimos implementar não se encontra alinhado com o footer.
Ainda em css tivemos um outro problema que não conseguimos resolver relaccionado com a incompatibilidade entre ecrãs. Tentámos criar vários css’s no html criamos duas classes em que uma das classes estava inserida na div e outra era mandada por javascript. O javascript ao encontrar o ecrã com menos resolução mudava a página. No entanto, não conseguimos implementar esta função apesar de terem sido feitos testes anteriormente e estes terem sido bem sucedidos.
Tivemos também uma dificuldade na inserção de vídeo em HTML5 sendo as páginas animadas com JQuery. Na resolução deste problema decidimos implementar um tag de vídeo em HTML.
Também enquanto estávamos a implementar a timeline pelo jQuery aparecia um scroll. Para resolver este problema fizemos em css um overflow:hidden.
Relativamente ao JavaScript não tivemos problemas significativos ou relevantes.

Melhoramentos futuros

Em relação aos melhoramentos futuros e pressupondo uma melhor organização de tempo e método de trabalho, poderiam ser melhorados alguns aspectos do design de modo a tornar o layout das páginas mais tridimensional acrescentando algumas sombras, etc.
Gostaríamos também de implementar uma transição entre as páginas de forma a tornar o site mais dinâmico.
Em relação aos banners gostaríamos de implementar uma animação 3D dando, como já foi referido anteriormente, um aspecto mais tridimensional ao site.
Por último,seria também melhorada a compatibilidade com os browsers fazendo páginas mais compatíveis com todos os browsers, formatos e tamanhos de forma a possibilitar o acesso da maioria dos utilizadores sem que estes saiam prejudicados e/ou sem que não seja possível transmitir os objectivos que pretendemos no desenvolvimento do site.

Conclusões

Para concluir, este projecto foi muito proveitoso na medida em que testou as nossas capacidades e nos fez ter a noção da complexidade que é desenvolver um site.
Pretendemos implementar aquilo que foi leccionado tanto nas aulas teóricas como práticas bem como as sugestões dadas pelos colegas e pelos professores.
Este projecto ajudou-nos de certa forma a ser autodidactas uma vez que (e sem desvalorizar de todo aquilo que aprendemos ao longo do semestre) tivemos a necessidade de pesquisar por outros códigos ou técnicas inovadoras que desconhecíamos para implementar no site.
Contudo, houve também algumas dificuldades devido à falta de tempo, organização entre o grupo e o método de trabalho que adoptámos, o que fez com que alguns objectivos que nos propusemos a fazer inicialmente não fossem cumpridos. Apesar de alguns problemas que surgiram aquando a implementação do site conseguimos de uma maneira geral (com algumas excepções como as que foram referidas anteriormente) arranjar uma solução viável para cada um.

Referências bibliográficas

Nas referências bibliográficas temos alguns sites que utilizamos como consulta para resolver problemas e/ou pesquisar sobre novas técnicas de implementação:

http://www.w3schools.com
http://jquery.com

Tivemos também de recorrer a sites acerca das marcas que abordámos bem como imagens e vídeos das mesmas:

www.youtube.com
http://pt.wikipedia.org
http://www.couto.pt/pastamedcouto.html
http://webinsider.uol.com.br/2009/08/07/historia-das-marcas-como-surgiu-e-cresceu-a-coca-cola

Anexos

Em anexo enviamos alguns testes que efectuamos antes de começar a implementar o site.

Teste 1

Teste 2

Teste 2