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)

utiliza setas dos teclado

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

validação de formulários (contactos)

<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

Melhoramentos futuros

Conclusões

Concluído o trabalho, consigo aperceber-me de que aprendi/exercitei imensas coisas na área

Referências Web

ZooTool
FancyBox