FABIO FERREIRA PHOTOS
From Labmm2
| Line 67: | Line 67: | ||
O site foi todo ele implementado para HTML5, mas com compatibilidade para versões anteriores. | 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. | 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. | ||
| Line 77: | Line 77: | ||
</pre> | </pre> | ||
| - | == | + | == Geral == |
<pre> | <pre> | ||
<body> | <body> | ||
| Line 106: | Line 106: | ||
</pre> | </pre> | ||
Esta foi a estrutura implementada da maioria das páginas. | 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 == | ||
| + | |||
| + | <pre> | ||
| + | @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; | ||
| + | } | ||
| + | </pre> | ||
Revision as of 16:21, 20 June 2011
"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;
}
