60289 Relatório
From Labmm2
(→Feedback no e-mail dos contactos) |
(→FancyZoom (imagens do portefólio)) |
||
| Line 150: | Line 150: | ||
</pre> | </pre> | ||
| - | === | + | === FancyBox (imagens do portefólio) === |
<pre> | <pre> | ||
| - | + | $(".thumbnail").fancybox({'transitionIn':'fade', | |
| + | 'transitionOut':'elastic'}); | ||
</pre> | </pre> | ||
| - | |||
=== setas do teclado (imagens do portefólio) === | === setas do teclado (imagens do portefólio) === | ||
Revision as of 19:20, 11 July 2011
Apresentação e contextualização do tema do projecto
O projecto desenvolvido é um portefólio. É um site que aloja informação biográfica e trabalhos da autora, que permite também a comunicação do utilizador com a pessoa em causa.
Layouts
about me page
photos page
drawings page
paintings page
design page
web design page
videos page
contact page
XHTML - estrutura implementada
- iframe para embeber um vídeo
CODE HERE! :3
- target para abrir vídeos numa nova janela do browser
CODE HERE! :3
- são utilizados IDs e Classes, conforme apropriado
CODE HERE! :3
CSS - Folhas de Estilos
- atributos avançados CSS3 (ex: box-shadow, transform)
CODE HERE! :3
- são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)
CODE HERE! :3
- são utilizados filtros em identificadores de elementos (ex: input[type=text])
CODE HERE! :3
- são utilizadas fontes externas (com @font-face)
CODE HERE! :3
JavaScript - principais scripts desenvolvidas
Função de 'preload' de imagens
Esta função recebe uma lista de URLs de imagens, passadas quando o <body> é carregado. Cada URL passado como argumento é inserido num array de URLs. Por cada imagem indicada deste array é instanciado um objecto do tipo Image(), obrigando a imagem a ser carregada. Desta forma, já estará descarregada quando for utilizada, melhorando substancialmente o feedback com o utilizador.
function MM_preloadImages() { //v3.0
var d=document;
if(d.images){
if(!d.MM_p) d.MM_p = new Array();
var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
}
}
}
A função acima é chamada quando o <body> é carregado. Desta forma, as imagens passadas como parâmetro serão imediatamente carregadas e ficarão em cache, para que possam ser instantaneamente visualizadas quando for feito um roll over, por exemplo.
<body onLoad="MM_preloadImages('drawings/thumbs/nateh.png',
'drawings/thumbs/002h.png',
'drawings/thumbs/025h.png',
'drawings/thumbs/022h.png',
'drawings/thumbs/023h.png',
'drawings/thumbs/055h.png',
'drawings/thumbs/056h.png',
'drawings/thumbs/066h.png',
'drawings/thumbs/059h.png');">
onMouseOver e onMouseOut (feedback das imagens do portefólio)
As imagens das grelhas do portefólio estão configuradas de forma a executar duas funções javascript: quando o rato do utilizador passa por cima delas e quando sai. A primeira modifica o atributo 'src' da própria imagem (this.src) para um URL igual, mas com a letra "h" (de hover) no fim. A segunda função, retira o "h", voltando ao URL inicial. Exemplo:
<img src="drawings/thumbs/nate.png" onMouseOver="this.src='drawings/thumbs/nateh.png'" onMouseOut="this.src='drawings/thumbs/nate.png'">
JQuery
Menu fixo
O menu do site está sempre visível, mesmo quando é feito scroll na página. Esta funcionalidade foi implementada da seguinte forma:
Foi criada uma função handleScroll() que verifica se o número de píxeis escondidos pelo scroll (em cima) é maior do que 115 (distância do topo da página ao topo do menu). Se for verdade, é adicionada a classe "fixed" à
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);
}
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)
$(".thumbnail").fancybox({'transitionIn':'fade',
'transitionOut':'elastic'});
setas do teclado (imagens do portefólio)
CODE HERE! :3
validação de formulários (contactos)
CODE HERE! :3
Integração com outras tecnologias (frameworks, linguagens, etc.)
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
