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
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.
