60289 Relatório
From Labmm2
Apresentação e contextualização do tema do projecto
Este projecto consiste no desenvolvimento de um site web de suporte a um portefólio pessoal de trabalhos gráficos. Reúne informação biográfica e trabalhos da autora.
Layouts
xHTML - estrutura implementada
De entre as várias características xHTML implementadas, enunciam-se abaixo algumas que podem ser relevantes.
Vídeos embebidos
Na zona de vídeos do portfolio são embebidos dois vídeos, de um servidor externo (vimeo.com). O código externo é incluído dentro do site através de um iframe, como mostra o exemplo abaixo:
<iframe src="http://player.vimeo.com/video/25372802?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0"></iframe>
Atributo target em hiperlinks
Alguns links são redireccionados para uma nova janela do browser, utilizando-se o atribuito 'target:
<a href="http://vimeo.com/25372802" target="_blank">view in HD</a>
IDs e classes
São utilizados tanto IDs como classes (por vezes, múltiplas classes) para referencias elementos do código, de acordo com cada situação. Por vezes, a conjugação dos dois tornou-se essencial:
<div class="content portfolio" id="zona_video">...</div>
CSS - Folhas de Estilos
Na formatação do site são utilizadas várias capacidades de CSS, tais como:
- atributos avançados CSS3 (ex: box-shadow, transform)
box-shadow: 0px 4px 12px #4d9da4; -webkit-box-shadow: 0px 4px 12px #4d9da4; -moz-box-shadow: 0px 4px 12px #4d transform: rotate(2deg); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg);
- são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)
<div id="submenu">
<a href="contact.html" class="button">contacts</a>
</div>
- são utilizados filtros em identificadores de elementos (ex: input[type=text])
form#contactme input[type=text],
form#contactme textarea {
padding: 2px;
}
- são utilizadas fontes externas (com @font-face)
@font-face {
font-family:"Aaargh";
src: url(stuff/Aaargh.ttf);
}
JavaScript - principais scripts desenvolvidas
Por forma a melhorar o feedback de utilização do site foram implementadas algumas funcionalidades visuais com recurso a JavaScript. Cada uma destas funcionalidades é descrita nesta secção.
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'">
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);
}
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
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 onMouseUp. No futuro, por forma a simplificar-se o código, deverá ser utilizado jQuery.
Conclusões
Concluído o trabalho, consigo aperceber-me de que aprendi/exercitei imensas coisas na área
