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
website: http://www.fabioferreiraphotos.com
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 acharmos 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 criando 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 prenda 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>');
Cookies Enable
Como uso recurso aos Cookies tenho de fazer um teste inicial e avisar o utilizador caso os Cookies não estiveram activos.
function GetCookie() {
var strName = "varCook";
if (document.cookie.indexOf(strName) == -1)
{
alert("Este site precisa que tenha os cookies activos. Por favor active para poder visualizar a página correctamente.");
return false;
}
else
{
cookieStart = document.cookie.indexOf(strName);
cookieValStart = (document.cookie.indexOf("=", cookieStart) + 1);
cookieValEnd = document.cookie.indexOf(";", cookieStart);
if (cookieValEnd == -1)
{
cookieValEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieValStart, cookieValEnd);
}
if (cookieValue = "True")
{
return ("True");
}
}
function SetCookie(name,value,expires,path,domain,secure)
{
var strDNS = GetDNS();
document.cookie = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires.toGMTString() + 1000*60*20 : "") +
( (path) ? ";path=" + path : "") +
//( (domain) ? ";domain=" + domain : "") +
( (domain) ? ";domain=" + strDNS : "") +
( (secure) ? ";secure" : "");
return true
}
function GetDNS()
{
cookieDomain = document.location.hostname;
}
function CheckCookiesEnabled()
{
SetCookie('varCook','True','','/','','');
if (GetCookie() == "False"){
alert('Este site precisa que tenha os cookies activos. Por favor active para poder visualizar a página.');
} else {
return false;
}
}
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.
Menu
Usei esta biblioteca para animar o menu que surge do lado esquerdo quando passamos o rato por cima do logo.
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://jquery.com
Ú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)};
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>
Comentário
<fb:comments href="http://fabioferreiraphotos.com" num_posts="2" width="500"></fb:comments>
Partilha
Não existe o botão de partilha propriamente dito. Na verdade, este botão é um "gosto" disfarçado. Que se consegui a partir de outra framework
Source: http://static.ak.fbcdn.net/connect.php/js/FB.Share
<div id="fb-share"><a name="fb_share" type="button_count" share_url="http://facebook.com/ffphotos"></a>
Galleria Twelve
Site: http://galleria.aino.se
Versão: Twelve - Galleria 1.2.3
Script: galleria-1.2.3.min.js CSS: galleria.twelve.css
Esta galeria não e gratuita. Mas com um pouco de paciência e esperteza conseguimos a obter. Eu descobri um site que a usava e depois foi só a recrear. Em HTML, só temos de a usar da seguinte maneira:
Galleria.loadTheme('galleria.twelve.min.js') // Carrega a script
$('#gallery').galleria(
{ width: 540,
height: 390
});
Google Analytics
Este script serve para obter estatísticas sobre as visitas ao site. É preciso um registo para poder usufruir.
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24061575-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Soluções técnicas para problemas encontrados
Internet Explorer
Este é um pequeno chato problema conhecido por toda a gente que trabalha com estas bibliotecas. Isto porque a codificação e descodificação da formatação CSS por parte do IE não é bem realizada. Por muito estranho que parece só uma ocasião em que o meu site não funciona correctamente no IE, o fadeIn, fadeOut e o fadeTo do JQuery na imagem. Ainda estou a tentar resolver e não desisto, mas para já, a solução encontrada foi simples, avisar o utilizador que o IE dá problemas na animação.
<!--[if IE]>
<script>
alert("Se está a utilizar o Internet Explorer poderá ter algumas dificuldades em visualizar este site");
</script>
<![endif]-->
Conflito Mootools/JQuery
Este conflicto, também ele muito conhecido, dá-se pelo facto das duas bibliotecas usarem o parâmetro $('DIV_NAME'), existe duas soluções. A primeira é muito simples, mas por vezes não funciona, como no caso de muito código em várias secções da página. A segunda resulta sempre, trata-se de isolar o código que usa JQuery.
1ª Solução
Basta colocar esta código no fim da script.
jQuery.noConflict();
2ª Solução
jQuery.noConflict();
jQuery(document).ready(function($){
/* CÓDIGO */
});
Fullscreen da Galeria
Quando fazia fullscreen na galeria, o menu (elemento 7 na figura 2 dos layouts) que está presente em todos os ecrãs ficava por cima, isto porque o seu z-indez entrar em conflito com os da galeria. É claro, que ocorreu-me a opção de reduzir o z-index, mas quando isto acontecia, depois o menu ficava por baixo de todos os elementos da página. A solução encontrada foi atribuir uma função ao botão de fullscreen que fizesse com que a barra de menu desaparece-se. Para tal, tive de estudar todo o código usado na galeria para saber onde colocar a seguinte função.
Em fullscreen
f.insertStyleTag("#menu{display:none;}");
</pre
Fora de fullscreen
<pre>
f.insertStyleTag("#menu{display:block;}");
Inclusão de Audio em todo o site
No uso do Flash, conseguimos facilmente incluir música em todo o site, mas em HTML é mais complicado do que isso. Como já referi ao usar uma página principal e colocar todo o site no iframe facilmente se resolve o problema.
Na página das galerias, antes de cada visualização, é possível escolher qual queremos ver. Na mesma página estão dois menus, o menu da galeria pública e o menu da galeria de produções. O uso em simultâneo destes dois menus, que recorrem a JQuery criava conflito. A solução adoptada foi criar cada menu numa página e colocar na página de escolha como iframe.
Segurança anti-cópia de imagem
É muito usual hoje em dia quem usa a internet copiar facilmente uma imagem e visto o site conter imagens com autoria tive que arranjar uma solução. Poderia desactivar o botão direito, mas isso poderia trazer incómodo, por isso, optei por criar, em algumas situações, uma layer de protecção da seguinte forma.
Em HTML
<body> <div id="layer_protector"></div> (...)
Em em CSS
<div id="layer_protector"></div>
Melhoramentos futuros
Já referi anteriormente o que podemos usar uma variável de sessão em substituição aos Cookies. O problema dos Cookies é que, por razões de segurança, podem estar desactivados pelo browser e consequentemente, o browser não irá mostra o background. Como solução o uso de uma variável de sessão é o mais indicado, mas para tal, a página terá de ser um PHP em vez de HTML, como este projecto trata-se de um projecto de HTML, não poderia, como é obvio criar em PHP, por isso , será um melhoramento a fazer após o projecto.
Extensão a outros dispositivos, nomeadamente, dispositivos móveis.
Conclusões
Concluí que tudo é possível fazer, ou quase tudo, em HTML5, CSS3 e Javascript, como se faz no flash, com a vantagem de ser legível em qualquer dispositivo com um browser, o que não acontece com o flash que é preciso software ou plug-in adicional, ou como no caso do iOS, nem funciona.
Referências bibliográficas
Mootools: http://mootools.net
JQuery: http://jquery.com
Galeria: http://galleria.aino.se
Facebook Wall: http://www.neosmart.de/social-media/facebook-wall
Facebook Plug-in: http://developers.facebook.com/?ref=pf
Twitter: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step
HTML/CSS/JS: http://www.w3schools.com
Cookies: http://www.quirksmode.org/js/cookies.html
Conflicto JQuery/Mootools: http://www.mixtotal.net/tutoriais/jquery-e-mootools-a-solucao-para-o-conflito | http://davidwalsh.name/jquery-mootools
Cookies Enable: http://www.tec-i.com/gEwCart/HowToEnableJavascriptAndCookies.htm#More
