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;
}
