FABIO FERREIRA PHOTOS
From Labmm2
"Este site é mais do que um projecto universitário, é um projecto de vida." (Fábio Ferreira)
webdesigner: Fábio Ferreira - 36118
Contents |
Apresentação e contextualização do tema do projecto
A fotografia. Todos sabemos que a fotografia faz parte do dia-a-dia de todos, actualmente todos temos uma máquina ou equipamento que nos permite tirar uma fotografia e se o fazemos foi por achamos que aquela era o momento certo para isso, porque queremos recordar, queremos sentir sempre aquele momento, isto porque a fotografia permite isso, para além de gravar uma imagem, a fotografia grava um sentimento.
Conceito
Decidi tirar partido deste sentimento que a fotografia tem e criar uma narrativa toda ela inspirada nesses sentimentos e baseada no dia-a-dia, debates e pensamentos que surgem no quotidiano.
Público Alvo
Sendo a fotografia um gosto e paixão sem idades o público alvo poderia ser considerado todas as faixas etárias, mas não generalizando, o público alvo principal é a população jovem, dos 15 aos 25 anos, que utiliza as redes sociais e partilha tudo que gosta, isto porque, são estas pessoas que vão mostrar o meu trabalho mesmo não sendo amantes da fotografia.
Análise de concorrência
Uma forte concorrência são os sites olhares.com, flickr e outros sites onde há uma grande divulgação de fotografia. Mas como fraqueza não têm nada que "agarre" o utilizador á foto.
Concepção Visual
Quando alguém procura sites de fotografia procura ver grandes fotografias. Decidi encher o background com uma fotografia, sem padrões, sem cores sólidas, somente a fotografia que funcionará como metáfora ao texto da narrativa.
Layouts
Intro
Legenda
- 1: Área de texto aleatório. Click para entrar.
- 2: Logo
- 3: Área do player de música. (ver Figura 3)
- 4: Área sobre o criador do site.
Home/Site
Legenda
- 5: Background
- 6: Logo sensível à passagem do rato. Abre o menu lateral.
- 7: Menu da narrativa.
- 8: Área de conteúdos. (ver Figura 5)
Estrutura XHTML
O site foi todo ele implementado para HTML5, mas com compatibilidade para versões anteriores.
Index
Esta é a página onde tudo acontece. Nesta página foi inserida uma frame com o site completo. A razão de o ser é, principalmente, para conseguir ter o player de música sempre activo e funcional, se assim não fosse a música mudava de página para página. Outra razão é do ponto de vista estético, o endereço da página será sempre o mesmo, como se fosse um site em flash.
Para conseguir a fluidez total do site, tive de acrescentar código para que o redimensionamento da página alterasse também o frame. Na secção de Scripts está o código usado.
<iframe name="ifr" id="frame" width="100%" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" src="site.html"></iframe>
Geral
<body>
<div id="conteudo"></div>
<div id="menu">
<div id="logo">
<div id="menu_logo">
<ul>
<li><a href="menu/galeria.html">GALERIA DE IMAGENS</a></li>
<li><a href="menu/blog.html">BLOG</a></li>
<li><a href="menu/facebook.html">FACEBOOK</a></li>
<li><a href="menu/twitter.html">TWITTER</a></li>
<li><a href="menu/contacto.html">CONTACTO</a></li>
</ul>
</div>
<a href="#"><img src="imagens/logo/ffphotos_logo.gif"/></a> </div>
<div id="links">
<ul>
<li><a href="conteudo/1985.html">EM 1985</a></li>
<li><a href="conteudo/viajar.html">SONHEI VIAJAR</a></li>
<li><a href="conteudo/era_uma_vez.html">ERA UMA VEZ</a></li>
<li><a href="conteudo/se_um_dia.html">SE UM DIA</a></li>
</ul>
</div>
</div>
</body>
</html>
Esta foi a estrutura implementada da maioria das páginas.
Folhas de estilos (CSS)
Foi implementado uma folha de estilos CSS3, para poder usufruir de opacidade, sombras e outros filtros.
Exemplo
@charset "UTF-8";
/*
CSS Style for Media Screen
Author: Fábio Ferreira
*/
body {
background-color: #FFF;
font-family: "Century Gothic", "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 10px;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
* {
border: 0px solid #EEE;
margin: 0;
padding: 0;
list-style: none;
}
#text_home {
cursor:default;
}
#text_index, #text_home {
color: #EEE;
text-shadow: 1px 3px 5px #555;
position: absolute;
top: 100px;
left: 50px;
font-size: 60px;
opacity: 0;
z-index:10;
display: inline-block;
}
#text2_index {
color: #EEE;
text-shadow: 1px 3px 5px #555;
position: absolute;
bottom: 100px;
right: 50px;
font-size: 60px;
opacity: 0;
z-index:10;
}
#text_index a {
color: #EEE;
}
#text_index a:hover {
color: #FFF;
}
#text2_index a {
color: #EEE;
}
#logo_index {
position: absolute;
bottom: 20px;
left: 0px;
opacity: 0;
display: inline-block;
}
.none {
display:none
}
.show {
display:block;
}
Scripts desenvolvidas (Javascript)
O site é quase todo ele recursivo a scripts. A maior parte delas são com recurso a outras bibliotecas e frameworks. Aqui deixo apenas exemplos de Scripts nativas. Outros exemplos de scripts com outras linguagens estão no separador a seguir.
Index (iFrame)
Esta script redimensiona o iFrame com a janela do broswer. Sem este script o Iframe tinha uma altura fixa.
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight; // Informação da altura da janela do broswer
height -= document.getElementById('frame').offsetTop;
height -= 0; // Margem Inferior
document.getElementById('frame').style.height = height +"px"; // Atribuição da altura á frame
};
document.getElementById('frame').onload = resizeIframe; // Quando a frame é carregada é atribuida a altura
window.onresize = resizeIframe; // Quando a janela redimensionada é também atribuida uma altura
</script>
Background
O background é alterado todos os dias e sempre aleatório. Com ele muda também as frases. Estes dois elementos estão presentes em mais do que uma página, logo têm de ser passados de página para página, assim sendo, tive de criar uma forma para que isso aconteça. O recurso, em HTML, são os Cookies. Em PHP, poderia usar uma variável de sessão.
Vamos então primeiro seleccionar uma imagem e uma frase. Devida á grande extensão de código, partes que são repetidas substitui por (...)
var d = new Date();
var dia = d.getDay(); // Dia da semana
var homeEl = new Array
var fotos_actividade,fotos_alegria,fotos_amor,fotos_coragemr,fotos_forte,fotos_liberdade,fotos_precaucao,fotos_solidao,fotos_trabalho,fotos_transportes,fotos_destinos = new Array();
/* ARRAY IMAGENS */
fotos_actividade=["imagens/bg/actividade/LONDON.jpg","imagens/bg/actividade/TENIS.jpg","imagens/bg/actividade/WINTER.jpg","imagens/bg/actividade/NIKE_TENIS.jpg",
"imagens/bg/actividade/RED_GUITAR.jpg","imagens/bg/trabalho/BUS.jpg"];
fotos_alegria=["imagens/bg/alegria/ALEXANDRA.jpg","imagens/bg/alegria/COLORS.jpg","imagens/bg/alegria/MIMO.jpg",
"imagens/bg/alegria/SPECIAL_DAY.jpg","imagens/bg/coragem/FUNNY_DUCK.jpg"];
fotos_amor=["imagens/bg/amor/HUG.jpg","imagens/bg/amor/LOVE_IN_SUNSET.jpg"];
(...)
/* FUNÇÃO PARA ESCOLHER ALEATORIAMENTE UMA IMAGEM */
function sortNumero(lista){return lista[Math.floor(Math.random()*lista.length)];}
/* ATRIBUIÇÃO SEGUNDO O DIA */
switch (dia) {
case 0:
frase_index = '<a id="txt" href="#">Achas que o Domingo<br/>é para descansar?</a>';
resp = '<a id="resp" href="#">Há quem pense que sim.</a>';
frase_home = 'Não pares';
img_index = sortNumero(fotos_actividade);
img_home = sortNumero(fotos_solidao);
break; case 1:
frase_index = '<a id="txt" href="#">E se nesta Segunda-feira<br/>não fosse trabalhar?</a>';
resp = '<a id="resp" href="#">Até onde ias com isto?</a>';
frase_home ='Achas que sim?';
img_index = sortNumero(fotos_transportes);
img_home = sortNumero(fotos_destinos);
break; case 2:
(...)
Para que consiga guardar então os elementos, tenho d activar os Cookies, para tal, estas funções ajuda-me a aceder aos Cookies, de forma a poder escrever(creatCookie) ou ler(readCookie).
function createCookie(name,value) {
var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
Depois podemos usar o script da forma como quiser. Eu usei o script abaixo para criar á página HTML.
createCookie('indice',dia); // Criei a variável dia
createCookie('img',img_home); // Criei a variável com a string do endereço da imagem
document.write('<div id="text_index" class="show">'+frase_index+'</div>');
document.write('<div id="bg"><div id="background"><img src="'+img_index+'"/></div></div>');
document.write('<div id="text2_index" class="none">'+resp+'</div>');
Na outra página, neste exemplo na página HOME uso os Cookies.
frase_home = ['Não pares','Achas que sim?','<p style="color:#FFF;">Sê forte</p>','<p style="color:#FFF;">Não fiques sozinho',
'Sorri e dá cor à tua vida','Tem cuidado com o teu caminho','Voa por ai'];
i = readCookie('indice');
img_home = readCookie('img');
document.write('<div id="text_home" class="show">'+frase_home[i]+'</div>');
document.write('<div id="#bg_noFade"><div id="background"><img src="'+img_home+'"/></div></div>');
Integração com outras tecnologias
Mootools
Site: [1] Última versão: MooTools 1.3.2 ([Download|http://mootools.net/download])
