From Labmm2

Revision as of 16:21, 20 June 2011 (view source) FabioFerreira (Talk | contribs) ← Older edit		Revision as of 16:33, 20 June 2011 (view source) FabioFerreira (Talk | contribs) Newer edit →
Line 184:		Line 184:
	display:block;		display:block;
	}		}
		+	</pre>
		+
		+
		+
		+
		+	= Scripts desenvolvidas =
		+
		+	O site é quase todo ele recursivo a scripts. A começar pela página INDEX que contem a frame onde o site está implementado.
		+
		+	== Index (iFrame) ==
		+
		+	Esta script redimensiona o iFrame com a janela do broswer. Sem este script o Iframe tinha uma altura fixa.
		+
		+	<pre>
		+	<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>
	</pre>		</pre>

---

Revision as of 16:33, 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 1 Apresentação e contextualização do tema do projecto 1.1 Conceito 1.2 Público Alvo 1.3 Análise de concorrência 2 Concepção Visual 2.1 Layouts 2.1.1 Intro 2.1.2 Home/Site 3 Estrutura XHTML 3.1 Index 3.2 Geral 4 Folhas de estilos (CSS) 4.1 Exemplo 5 Scripts desenvolvidas 5.1 Index (iFrame)

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

O site é quase todo ele recursivo a scripts. A começar pela página INDEX que contem a frame onde o site está implementado.

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>