60289 Relatório

__TOC__

= Apresentação e contextualização do tema do projecto =
[[File:Screen shot 2011-07-11 at 5.29.50 PM.png|right]]
Como parte da avaliação em época de recurso da disciplina de Laboratório Multimédia 2, teria de ser desenvolvido um projecto de tema aberto. Este projecto consiste no desenvolvimento de um site web de suporte a um portefólio pessoal de trabalhos gráficos.<br>
O site aloja fotografias, desenhos, pinturas, trabalhos digitais, vídeos, informação biográfica e social.<br>
O seu foco, no que toca a objectivos, está em mostrar trabalhos, capacidades, gostos e hobbies.
<br><br><br><br><br>

= Layouts =
[[File:LunAbout.png|400px|center|about me]] <center>'''about me''' page</center><br>
[[File:LunPhotos.png|400px|center|photos]] <center>'''photos''' page</center><br>
[[File:LunDrawings.png|400px|center|drawings]] <center>'''drawings''' page</center><br>
[[File:Paintings.png|400px|center|paintings]] <center>'''paintings''' page</center><br>
[[File:Design.png|400px|center|design]] <center>'''design''' page</center><br>
[[File:Webdesign.png|400px|center|web design]] <center>'''web design''' page</center><br>
[[File:Videos.png|400px|center|videos]] <center>'''videos''' page</center><br>
[[File:Contact.png|400px|center|contact me]] <center>'''contact''' page</center><br>

= ''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:
<pre>
<iframe src="http://player.vimeo.com/video/25372802?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0"></iframe>
</pre>


=== Atributo target em hiperlinks ===
Alguns links são redireccionados para uma nova janela do browser, utilizando-se o atribuito 'target:
<pre>
<a href="http://vimeo.com/25372802" target="_blank">view in HD</a>
</pre>


=== 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:
<pre>
<div class="content portfolio" id="zona_video">...</div>
</pre>

= ''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)<br>
<pre>
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);
</pre>

* são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)<br>
<pre>
<div id="submenu">
    <a href="contact.html" class="button">contacts</a>
</div>
</pre>

* são utilizados filtros em identificadores de elementos (ex: input[type=text])<br>
<pre>
form#contactme input[type=text],
form#contactme textarea {
	padding: 2px;
}
</pre>

* são utilizadas fontes externas (com @font-face)<br>
<pre>
@font-face {
    font-family:"Aaargh";
    src: url(stuff/Aaargh.ttf);
}
</pre>

= ''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.<br>
<pre>
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];
    	}
    }
}
</pre>

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.
<pre>
<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');">
</pre>


=== 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:
<pre>
<img src="drawings/thumbs/nate.png" onMouseOver="this.src='drawings/thumbs/nateh.png'" onMouseOut="this.src='drawings/thumbs/nate.png'">
</pre>


=== 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" à <div> do menu. Caso contrário a classe é removida.<br>
<pre>
function handleScroll(){
	if (window.XMLHttpRequest){
		var offset = (window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop);
		document.getElementById('head').className = (offset > (115) ? 'fixed' : '');
	}
}

</pre>
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.
<pre>
if (window.addEventListener) {
	window.addEventListener('scroll', handleScroll, false);
} else {
	window.attachEvent('onscroll', handleScroll);
}
</pre>

= 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".

<pre>
$(".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)");
});
</pre>

=== 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.
<pre>
$("#email").bind("mouseover", function() {
    $("#email_text").css("visibility", "visible");
}).bind("mouseout", function() {
    $("#email_text").css("visibility", "hidden");
});
</pre>

=== 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:
<pre>
$(".thumbnail").fancybox({'transitionIn':'fade',
                          'transitionOut':'elastic'});
</pre>

=== 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.
<pre>
<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>
</pre>

<pre>
$("#contactme").validate();
</pre>

= 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 =
JQUERY
	 .simplicidade, rapidez e eficiência

Concluído o trabalho, consigo aperceber-me de que aprendi/exercitei imensas coisas relativas a JavaScript, XHTML e CSS.<br>
Recorri à Web para poder implementar código desconhecido para conseguir concretizar objectivos definidos anteriormente (alguns mais facilmente interpretáveis do que outros).

= Referências Web =
[http://zootool.com/user/mpulido/ ZooTool]<br>
[http://fancybox.net/ FancyBox]<br>