From Labmm2

Revision as of 18:40, 20 June 2011 by FabioFerreira (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Jump to: navigation, search

"Este site é mais do que um projecto universitário, é um projecto de vida." (Fábio Ferreira)

webdesigner: Fábio Ferreira - 36118

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

Figura 1 - Layout 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

Figura 2 - Layout 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)

Figura 3 - Layout Music Player

Figura 4 - Layout Conteúdos

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: http://mootools.net

Última versão: MooTools 1.3.2 (Download)

Usei em Mootools em várias circunstâncias, mas apenas deixo aqui os scripts mais pequenos como exemplo. Nos ficheiros documentais estão presentes todos os scripts.

window.addEvent('domready', function(){
	$('logo').addEvents({
    mouseenter: function(){
      $('menu_logo').set('tween', {
        duration: 1000,
        transition: Fx.Transitions.easeOut
      }).tween('width', '253px');
    },
    mouseleave: function(){
      $('menu_logo').set('tween', {}).tween('width', '0px');
    }
  });
	
});

window.addEvent('domready', function(){
  var el = $('menu_logo'),
    color = el.getStyle('backgroundColor');
	
  $('logo').set('opacity', 1).addEvents({
    mouseenter: function(){
      $('menu_logo').morph({
        'opacity': 0.7,
      });
    },
    mouseleave: function(){
      $('menu_logo').morph({
        opacity: 0,
        backgroundColor: color
      });
    }
  });
});

Separador Acordion

Este separador está presente quando a página tem mais do que um conteúdo. Por exemplo na página dos contactos onde tenho a possibilidade de enviar uma mensagem, ver os contactos ou então subescrever o newslatter. O ID das DIVs que queremos que "abram" e "fechem" tem de ser o mesmo, no exemplo abaixo, (.content) é o conteúdo a esconder ou mostrar, (#contact h2) é onde clico para abrir, tudo isto tem de estar na DIV (#contact).

Para este script, tive de utilizar o Mootools v1.3.

window.addEvent('domready', function(){
	new Fx.Accordion($('contact'), '#contact h2', '#contact .content');
});

Validação de Formulário

Para validar o preenchimento do formulário também usei recurso ao Mootools.

window.addEvent('domready', function(){

  var myForm = document.id('myForm'),
    myResult = document.id('myResult');

  myForm.getElements('[type=text], textarea').each(function(el){
    new OverText(el);
  });

  new Form.Validator.Inline(myForm);

  new Form.Request(myForm, myResult, {
    requestOptions: {
      'spinnerTarget': myForm
    },
  });

});

JQuery

Site: http://mootools.net/

Última versão: JQuery 1.6.1 (Download)

Esta linguagem foi a mais usada em todo o site, como no Mootools, apenas deixo alguns exemplos.

INTRO

No INDEX há uma animação de imagem quando se clica no texto e na página HOME os elementos aparecem suavemente. Abaixo está o script para que isso aconteça.

INDEX

function fade(){$('#text_index').fadeTo(2000,1);$('#logo_index').fadeTo(4000,1)};

function redirectPage(){location.href = "transition.html";} 

$('#text_index').click(function() {$('#bg').fadeTo(2000,1, function(){});$('#text_index').fadeOut(1000, function() {});$('#text2_index').fadeTo(2000,1, 
function() {});$('#text2_index').removeClass('none').addClass('show');setTimeout($('#text_index').removeClass('show').addClass('none'),1000)});

$('#text2_index').click(function() {$('#bg').fadeOut(2000, function(){});$('#text2_index').fadeOut(2000, function(){});
$('#logo_index').fadeOut(1000, function(){},setTimeout("redirectPage()",3000))  // Após a animação a página é redireccionada.
});

HOME

function redirectPage(){location.href = "home.html";}
function fade(){$('#text_home').fadeTo(2000,1);$('#bg').fadeTo(1000,1);$('#menu').fadeTo(4000,1);setTimeout("redirectPage()",4000)};

Facebook

O que eu pretendia do Facebook era mostrar o wall na minha página, ora, o facebook não tem plug-in para isto. Com recurso ao JQuery e a uma outra biblioteca consegui. Apenas foi preciso o seguinte script para mostras o wall.

$('#wall').fbWall({ id:'ffphotos',accessToken:'206158599425293|1df31a8727c3377cea29f485.1-100000221135225|YRxEUQA5gDlA4yFvGCBI3IMYO8U', showGuestEntries:false, 
showComments:true, max:10, timeConversion:24});

Para saberem mais sobre esta implementação: http://www.neosmart.de/social-media/facebook-wall

Twitter Javascript

Source: http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js

Eu alterei o código para que podesse ver de 5 em 5 tweets. Para obter os tweets tenho:

var n_count = new Array;
n_count[0]=5;  // Obter 5 primeiros tweets
getTwitters('tweet', { 
  id: '__FabioFerreira', 
  count: n_count[0], 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '<img src="%user_profile_image_url%" /> Fábio Ferreira disse: <div class="twitterStatus">"%text%" <h4><span>%time%</span></h4></div>'
});

Para que, ao clicar na opção "Mostrar mais 5" inseri o seguinte código em Javascript:

function more5tweets() {
document.getElementById("carregar").innerHTML='<p><img src="../imagens/gif/preload.gif" />A carregar tweets</p>';
n_count[0] = n_count[0] + 5;
if (n_count[0] == 20) {document.getElementById("texto_more5").innerHTML='';}
else {document.getElementById("texto_more5").innerHTML='MOSTRAR MAIS 5';}
	getTwitters('tweet', { 
  id: '__FabioFerreira', 
  count: n_count[0], 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '<img src="%user_profile_image_url%" /> Fábio Ferreira disse: <div class="twitterStatus"> "%text%" <h4><span>%time%</span></h4></div>'
});
document.getElementById("carregar").innerHTML='';
return count;
}

FBML

Source: http://connect.facebook.net/en_US/all.js#xfbml=1

Esta é a bibliteca do Facebook para usar nos botões de gosto e outros plug-in.

Botão "Gosto"

<fb:like href="Http://facebook.com/ffphotos" send="false" width="450" show_faces="true" font=""></fb:like>

FABIO FERREIRA PHOTOS