60289 Relatório

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Layouts)
(→JavaScript - principais scripts desenvolvidas)
Line 61: Line 61:
= ''JavaScript'' - principais scripts desenvolvidas =
= ''JavaScript'' - principais scripts desenvolvidas =
-
== JavaScript puro ==
+
=== 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>
-
* onMouseOver (feedback das imagens do portfolio)<br>
+
<pre>
<pre>
-
CODE HERE! :3
+
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>
</pre>
-
<br>
+
 
-
* onMouseOut (feedback das imagens do portfolio)<br>
+
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>
<pre>
-
CODE HERE! :3
+
<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>
</pre>
-
<br>
+
 
-
* onLoad (utilizado no <body> para a funçaõ de preload seja chamada)<br>
+
 
 +
=== 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>
<pre>
-
CODE HERE! :3
+
<img src="drawings/thumbs/nate.png" onMouseOver="this.src='drawings/thumbs/nateh.png'" onMouseOut="this.src='drawings/thumbs/nate.png'">
</pre>
</pre>
-
<br>
 
-
<br>
+
 
== JQuery ==
== JQuery ==
-
* função de preload de imagens
+
=== Menu fixo ===
-
Recebe um array de URLs de imagens, passado quando o <body> é carregado. Por imagem indicada no array é instanciada um objecto do tipo Image(), obrigando a imagem a ser carregada.<br>
+
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>
<pre>
-
CODE HERE! :3
+
function handleScroll(){
 +
if (window.XMLHttpRequest){
 +
var offset = (window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop);
 +
document.getElementById('head').className = (offset > (115) ? 'fixed' : '');
 +
}
 +
}
 +
 
</pre>
</pre>
-
<br>
+
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.
-
* função que mantém o menu sempre visível, mesmo quando é feito scroll vertical
+
-
. sempre que é feito scroll é verificado 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>
<pre>
-
CODE HERE! :3
+
if (window.addEventListener) {
 +
window.addEventListener('scroll', handleScroll, false);
 +
} else {
 +
window.attachEvent('onscroll', handleScroll);
 +
}
</pre>
</pre>
-
<br>
+
 
-
* foi criada uma instrução jquery para que, no menu de contactos, as imagens tenham feedback ao passar o rato<br>
+
 
 +
=== 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>
<pre>
-
CODE HERE! :3
+
$(".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>
</pre>
-
<br>
+
 
-
* 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<br>
+
=== 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>
<pre>
CODE HERE! :3
CODE HERE! :3
</pre>
</pre>
-
<br>
+
 
-
* FancyZoom (imagens do portfolio)<br>
+
 
 +
=== FancyZoom (imagens do portefólio) ===
<pre>
<pre>
CODE HERE! :3
CODE HERE! :3
</pre>
</pre>
-
<br>
+
 
-
* setas do teclado (imagens do portfolio)<br>
+
 
 +
=== setas do teclado (imagens do portefólio) ===
<pre>
<pre>
CODE HERE! :3
CODE HERE! :3
</pre>
</pre>
-
<br>
+
 
-
* validação de formulários (contactos)<br>
+
 
 +
=== validação de formulários (contactos) ===
<pre>
<pre>
CODE HERE! :3
CODE HERE! :3
</pre>
</pre>
-
<br><br>
+
 
=Integração com outras tecnologias (frameworks, linguagens, etc.) =
=Integração com outras tecnologias (frameworks, linguagens, etc.) =

Revision as of 19:06, 11 July 2011

Contents


Apresentação e contextualização do tema do projecto

Screen shot 2011-07-11 at 5.29.50 PM.png

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 about me page
photos photos page
drawings drawings page
paintings paintings page
design design page
web design web design page
videos videos page
contact me 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" à
do menu. Caso contrário a classe é removida.
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. 

CODE HERE! :3


FancyZoom (imagens do portefólio) 

CODE HERE! :3


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

ZooTool
FancyBox



Anexos


Retrieved from "http://wikis.ua.pt/labmm2/index.php?title=60289_Relat%C3%B3rio"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox