Wai
From Labmm2
Grupo
Daniela Lapa 60625 | Marcelo Bettencourt 60869
Apresentação e contextualização do tema do projecto
O nosso projecto tem o nome de WAI: We're Advertising It. Escolhemos este nome, pois o tema escolhido por nós é a publicidade fotográfica, e por isso mesmo achámos que fazer um trocadilho com o slogan de uma marca bastante conhecida pode cativar a curiosidade do utilizador. A publicidade fotográfica é um tema muito amplo, já existindo há bastantes décadas, e por isso mesmo resolvemos abordar a fotografia desde a década de 50 até aos dias de hoje. Vamos seleccionar as fotografias mais icónicas de cada época, pois é virtualmente impossível tratar todas as fotografias existentes até à data. Escolhemos criar um web site destinado a um publico interessado no tema, mas como queremos ter um tema mais formal, com um aspecto mais apelativo para um público mais culto e dedicado, decidimos que o público-alvo situa-se entre os 16 e os 40 anos.
Fluxograma
Logótipo
Logótipo do site |
 Ícone de página |
Layouts
 Década de 50 |
 Década de 60 |
 Década de 70 |
 Década de 80 |
 Década de 90 |
 Década de 00 do Século XXI |
Estrutura XHTML implementada
<link href="css/decade.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/jslider.js"></script>
<script type="text/javascript">
$(function() {
$(".slider").jslider({
btnNext: ".next",
btnPrev: ".prev"
})
})
</script>
<script type="text/javascript">
$(function() {
$("#gallery").lightBox();
});
</script>
<style type="text/css">
body {
background-image:url(ADS/50/back2.png);
}
</style>
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="icon" href="IMGS/wai.gif" />
<link rel="shortcut icon" href="IMGS/wai.gif" />
</head>
Esta é a estrutura base de cada página, com as invocações às folhas de estilos e JavaScript na tag head.
Nesta mesma tag existem funções para criar os ambientes necessários do website.
<body> <div class="logo"> <a href="wai.html"><img id="logo" src="IMGS/logo(3).png" border="0" /></a> </div> <div class="elevator"><a href="gallery_.html"></a></div> <div class="frames"> <div id="container"> <img id="prev" class="prev" src="IMGS/prev.png" /><img id="next" class="next" src="IMGS/next.png" /> <div class="slider"> <ul> <li><img class="slider" src="ADS/50/texto.png" alt="text"/></li> <li><img src="ADS/50/50-frames.png" alt="frames" border="0" usemap="#Map" class="slider"/> <map name="Map" id="Map"><area shape="rect" coords="205,6,305,150" href="ADS/50/1953.png" alt="1" /> <area shape="rect" coords="344,3,449,153" href="ADS/50/1952.png" alt="2" /> <area shape="rect" coords="486,4,589,151" href="ADS/50/1950.jpg" alt="3" /> <area shape="rect" coords="217,167,325,314" href="ADS/50/1957.jpg" alt="4" /> <area shape="rect" coords="358,168,465,315" href="ADS/50/1959.jpg" alt="5" /> <area shape="rect" coords="497,168,602,315" href="ADS/50/1950coke.jpg" alt="6" /> <area shape="rect" coords="215,332,321,479" href="ADS/50/1957coty.jpg" alt="7" /> <area shape="rect" coords="346,330,469,479" href="ADS/50/1950marlboro.jpg" alt="8" /> <area shape="rect" coords="496,331,610,477" href="ADS/50/1959vw.jpg" alt="9" /> </map></li> <li><img class="slider" src="ADS/50/50-1.png" alt="aluminum"/></li> <li><img class="slider" src="ADS/50/50-2.png" alt="baton"/></li> <li><img class="slider" src="ADS/50/50-3.png" alt="baton2" /></li> <li><img class="slider" src="ADS/50/50-4.png" alt="catalina" /></li> <li><img class="slider" src="ADS/50/50-5.png" alt="channel" /></li> <li><img class="slider" src="ADS/50/50-6.png" alt="coke" /></li> <li><img class="slider" src="ADS/50/50-7.png" alt="coty" /></li> <li><img class="slider" src="ADS/50/50-8.png" alt="marlboro" /></li> <li><img class="slider" src="ADS/50/50-9.png" alt="volkswagen" /></li> </ul> </div> </div> </div> <div class="copyright">All rights reserved © Made in DeCA 2011</div> </body>
Na tag body começamos por trazer o logótipo do site, para depois colocar o símbolo de retroceder na página. As divs seguintes, servem para criar um slideshow (sendo este código o de uma página com slideshow).
Folhas de estilos (CSS)
As nossas páginas estão associadas a uma folha CSS: "decade.css"
Esta folha de estilos desenvolve maior parte dos aspectos estéticos do site.
Na tag body decidimos colocar uma argem de 50px, e usar a família de fontes "Arial, Helvetica, sans-serif". A partir do css criámos dois botões, um na home e outro nas décadas. O da home é uma informação para o utilizador, e o na página das décadas serve para voltar ao elevador, a página mãe. Nas divs do logo e das molduras, colocámos opções que embelezam esteticamente e que tornam o site mais funcional. Nas tags de slider colocámos medidas para conter o slideshow a uma certa estrutura. No id container colocámos informação para restringir o espaço dos botões, para eles ficarem nas posições correctas. Para os botões previous e next nas galerias usámos posição absoluta no browser, para delimitar o comportamento do slider.
Principais scripts desenvolvidas (JavaScript)
Neste website desenvolvemos duas scripts:
<script type="text/javascript">
$(function() {
$(".slider").jslider({
btnNext: ".next",
btnPrev: ".prev"
})
})
</script>
<script type="text/javascript">
$(function() {
$("#gallery").lightBox();
});
</script>
Estas duas funções servem para invocar terceiras funções, sendo estas LightBox e JSlider, para criar os efeitos visuais pretendidos. Nestas funções o código invoca um id especial, aplicado depois no HTML.
Integração com outras tecnologias
Neste websute integrámos os plugins JQuery, LightBox e JSlider para criar respectivamente, uma base para colocar as outras folhas JavaScript, e criar um efeito de slideshow num grupo de fotografias.
O JQuery é uma livraria de código que dinamiza e simplifica a escrita de código HTML. Com a ajuda deste plugin, conseguimos invocar funções que antes não conseguíamos, como a do JSlider.
O LightBox é um pequeno código que faz com que as fotografias obtenham uma transição desejada. Em conjunto com o JSlider, conseguímos criar um slideshow controlável pelo clique em setas colocadas para o efeito.
Dificuldades encontradas (e método de resolução)
Home Page
Não nos deparámos com problemas na homepage.
Gallery
Problema: Image Map fora do sítio.
Solução: Criámos uma única div para o image Map, e fizemos um wrap para que estas ficassem nas posições desejadas.
DarkRoom
Problema: Tentativa de implementação de uma função onClick para aparecer uma div nova e mudar o fundo do web site.
Solução: Após várias horas de tentativas frustradas, decidimos desistir da ideia.
Décadas
Problema: LightBox não estava a funcionar devidamente.
Solução: Não conseguimos encontrar solução para este problema.
Slider com problemas: tamanho, distorção da imagem, movimento.
Solução: Após alguns ajustes, conseguimos finalmente ajustar todas as imagens ao slider, e fazer com que o efeito corre-se com fluidez.
Conclusão
Hoje em dia todos nós somos bombardeados sistematicamente com publicidade. Quer seja em casa, na rua, no autocarro, na escola, até na igreja, somos todos os dias confrontados com algum tipo de publicidade. Quer seja na televisão, rádio, internet, até a etiqueta da roupa é uma forma de vender o produto. Todas as campanhas publicitárias tem um único objectivo:manipular a mente humana para os seus fins. Por estarmos cientes disto, resolvemos apostar numa abordagem histórica acerca dum tema bastante específico dentro da publicidade: publicidade fotográfica.
A publicidade fotográfica não é fácil de engendrar, e não é facil de concretizar. Isto acontece porque é uma mera imagem estática, não há dinamismo, movimento, som que possa chamar à atenção, e por isso, os criadores da publicidade tem de se focar na imagem. E é com esta imagem que essas pessoas nos apelam aos mais básicos dos sentimentos, como raiva, amor, desejo, entre muitos outros.
Com o decorrer deste trabalho houve um sentimento geral de espetacularidade, pois achamos que este tipo de publicidade é o mais complicado e espetacultar de se fazer. Foi com muito agrado que pesquisámos a fundo publicidades marcantes para cada década e que as analisámos e escolhemos as mais apelativas. Com esta triagem nós próprios aprendemos algumas manhas dos génios criadores destas obras de arte tentadoras, e tentámos pô-las em prática nesta mesma página.
"We're Advertising It" foi um projecto ambicioso, especialmente para apenas duas pessoas, mas pensamos que trabalhar sobre tal pressão e conseguir chegar bastante perto da ideia inicial só nos trará benefícios a curto, médio e até longo prazo. Tendo efectuado uma pesquisa ao longo da web acerca de sites sobre o nosso tema com uma ideia e/ou estrutura semelhantes, chegámos também a conclusão que conseguimos criar uma ideia original, o que poderá ser a prova que somos capazes de reflectir e criar conceitos e conteúdos originais e inovadores, algo bastante necessário no mercado de trabalho.
Referências bibliográficas
Usámos este tutorial e os seus links na descrição para criar o nosso slide de imagens.
O plugin JQuery, usado em todo o website, foi baixado deste site.
Site bastante consultado para tirar dúvidas acerca de cada década.
