function handleScroll(){
	if (window.XMLHttpRequest){
		var offset = (window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop);
		document.getElementById('head').className = (offset > (115) ? 'fixed' : '');
	}
}

Esta função é associada ao evento de scroll através do 'event listener' da janela do browser, com o apoio do código abaixo . Desta forma, sempre que é feito scroll, a função é executada.

if (window.addEventListener) {
	window.addEventListener('scroll', handleScroll, false);
} else {
	window.attachEvent('onscroll', handleScroll);
}

Integração com outras tecnologias (frameworks, linguagens, etc.)

Como apoio ao desenvolvimento em Javascript foi utilizada a Framework jQuery (http://jquery.com/). Com esta Framework torna-se muito mais simples desenvolver código Javascript, dado que muitas funções que envolveriam muito código encontram-se já desenvolvidas. Para além disso, torna o código muito mais limpo e legível. Evita, por exemplo, misturar código relativo a dentro de código HTML.

Feedback nas imagens dos contactos

Foi criada uma instrução jQuery para que, no menu de contactos, as imagens tenham feedback ao passar o rato. As imagens que pertencerem à classe 'jump' irão rodar ligeiramente (2º) quando o rato do utilizador passar por cima delas, criando uma sensação agradável e pouco intrusiva de feedback - função sem nome "1". Quando o rato sair de cima destas imagens, a sua posição voltará ao normal (0º) - função sem nome 2. Para que o efeito funcione completamente, a primeira função está associada (binded) ao evento "mouseover" e a segunda ao evento "mouseout".

$(".jump").bind("mouseover", function() {
    $(this).css("transform", "rotate(2deg)");
    $(this).css("-webkit-transform", "rotate(2deg)");
    $(this).css("-moz-transform", "rotate(2deg)");
}).bind("mouseout", function() {
    $(this).css("transform", "rotate(0deg)");
    $(this).css("-webkit-transform", "rotate(0deg)");
    $(this).css("-moz-transform", "rotate(0deg)");
});

Feedback no e-mail dos contactos

Foi criada uma instrução jquery para que, no menu de contactos, o endereço de e-mail apareça quando se passa por cima da imagem de carta de correio.

$("#email").bind("mouseover", function() {
    $("#email_text").css("visibility", "visible");
}).bind("mouseout", function() {
    $("#email_text").css("visibility", "hidden");
});

FancyBox (imagens do portefólio)

O efeito de zoom das imagens do portfolio é implementado com recurso ao plugin JQuery Fancybox. Este plugin permite não só ver a imagem numa janela agradável, como ainda navegar entre as várias imagens que pertençam á mesma relação (ex: rel="drawings"). O código Javscript que activa esta funcionalidade nas imagens que pertençam á classe 'thumbnail' é o seguinte:

$(".thumbnail").fancybox({'transitionIn':'fade',
                          'transitionOut':'elastic'});

Validação de formulários (contactos)

A validação do formulário de contactos é feita com recurso a um plugin de jQuery chamado 'jQuery Validation'. Com este plugin torna-se extremamente fácil implementar-se a validação dos campos, bastando indicar de que tipo de campo se trata cada um - associando-se cada campo à classe equivalente, ex: classe 'email' - tal como indicar quais deles são obrigatórios (classe 'required'). A função default do botão de 'submit' ficará descativada até que todos os campos sejam correctamente preenchidos. Assim que esta condição se verificar, a 'action' do formulário poderá ser executada.

<form id="contactme" action="http://blogs.ua.pt/heldercaixinha/form_result.php" method="post">
    if you want to contact me<br />
    feel free to leave a message :)
    <input type="text" name="name" placeholder="your name" class="required"/>
    <input type="text" name="email" placeholder="your email" class="required email"/>
    <textarea name="message" placeholder="the message" class="required"></textarea>
    <input type="submit" value="send" />
</form>

$("#contactme").validate();

Soluções técnicas para problemas encontrados

Funções que inicialmente estavam a ser implementadas com Javascript puro, foram entretanto adaptadas para que pudessem ser implementadas com o apoio da framework jQuery.

Melhoramentos futuros

Os rollovers utilizados nas imagens do portfolio estão criados como imagens, incluindo o texto. Será interessante, no futuro, que este texto seja automaticamente gerado, evitando que tenha de ser feita imagem a imagem. Também relativamente a estes rollovers, as funções Javascript estão a ser invocadas através dos atributos onMouseOver e onMouseOut. No futuro, por forma a simplificar-se o código, deverá ser utilizado jQuery.

Conclusões

A utilização da framework jQuery permitiu melhorar o resultado do site tanto em funcionalidade na escrita - por um lado permitiu implementar funcionalidades que em JavaScript puro seriam incomportáveis e de difícil desenvolvimento e por outro, permitir que o código se tornasse simples (tanto na escrita como na interpretação).

Referências Web

ZooTool