Scarichiamo la libreria Mootools dal sito ufficiale. Copiamo il file mootools.js in una directory js e creiamo tre cartelle di nome js, css, e images. Inseriamo un file di nome little_pills.html e nella cartella js creiamo un file di nome pills.js. Nella directory css andremo a creare un documento chiamato pills.css e, giunti a questo punto, apriamo i nostri file con un editor di testo dove scriveremo il codice di una pagina che ci mostrerà con effetti speciali la differenza tra la messaggistica del web 2.0 e cio' che eisteva prima.
Il file little_pills.html è molto semplice. Per farlo funzionare è necessario inserire fin da subito un'intestazione che ci permette di validare il contenuto dinamico della nostra pagina.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Inoltre è necessario includere subito la nostra libreria mootools.js che si trova nella directory js.
<script src="js/mootools.js" ></script>
Una volta fatto questo, dobbiamo pensare alla struttura che vogliamo dare alla nostra pagina. Nel nostro caso abbiamo pensato ad un blocco div che contiene due aree: una per il lato destro del volto che vogliamo mostrare e l'altra per il sinistro.
Con poche istruzioni è semplice creare pagine che vadano bene nonostante non si sappia la risoluzione con cui verranno viste. Tutto questo grazie alle direttive di stile che impartiamo ai nostri div negli attributi che si chiamano class o id o style.
<div id="menuContainer">
<div id="container" >
<div id="right" >
<div id="right_zone" class="zone"> </div>
<div id="right_zone_on" class="zone_on"> </div>
</div>
<div id="left">
<div id="left_zone" class="zone"> </div>
<div id="left_zone_on" class="zone_on"> </div>
</div>
Il nostro codice non mostrerà righe che fanno riferimento a eventi onClick o onMouseOver, come si era soliti vedere prima dell'avvento del Web 2.0, ma saranno scritte in puro html. Sarà il javascripting, in modalità non-obtrusive (non intrusivo) a conferire un'intelligenza alla nostra pagina.
Il file di foglio di stile prende l'estensione css. In questo foglio andiamo a descrivere come si devono distribuire lungo la pagina i nostri blocchi di codice. Inoltre descriviamo la pagina in tutte le sue particolarità, dalla grandezza e il carattere del font che andremo ad utilizzare, alla posizione del testo contenuto in un particolare layer, al colore o l'immagine di sfondo che deve prendere la pagina o un link al passaggio del mouse.
Nelle ultime righe del nostro codice HTML abbiamo segnalato al browser di leggere il codice javascript che si trova nella pagina pills.js. utilizziamo la consueta istruzione 'domready', che ci aiuta a istruire il browser di iniziare a interpretare il nostro codice javascript solo dopo che avrà caricato il documento dom.
window.addEvent('domready', …]
E' cosi' che in poche righe andremo a creare i nostri primi effetti e li assoceremo ai nostri messaggi. Quando si utilizzava javascript qualche anno fa vedevamo il ripetersi di istruzioni quali alert, confirm o prompt e non avevamo nessuna possibilità di personalizzarli. Inoltre queste istruzioni bloccavano il flusso di interpretazione della pagina fino a che non si premeva il tasto ok o cancel del messaggio e questo spesso comportava problemi nell'architettura dei nostri software.
Ora, grazie al web 2.0 e a framework come MooTools, è facile creare effetti che lampeggiano e si trasformano nella pagina in poche istruzioni.
var highlight = new Fx.Morph(log, {
duration: 8500,
transition: 'quad:out'
});
In particolare possiamo utilizzare l'effetto Morph e personalizzarlo. Questo effetto ci permette di trasformare un div di una classe di stile in un altro, o di cambiare le proprietà della nostra pagina dinamicamente, in modo che ad esempio si rimpicciolisca seguendo un'animazione mentre svanisce.
$$('div.zone').addEvents({
'click': function() {
$(this.id+'_on').fade(1);
$(this.id+'_el').fade(1);
$(this.id).fade(0.4);
//applico l'effetto che
//nasconde in mezzo secondo
msg_zone_elOff.start({
opacity: [1, 0]
});
}
});
Utilizzando l'effetto fade, invece possiamo rapidamente far sparire o apparire i nostri elementi con delle fluide dissolvenze incrociate. In questo modo, ad esempio abbiamo ottenuto che al click del mouse l'immagine con la lente dell'occhiale che mostra la pillola rossa si dissolve e si trasformi nell'immagine con la lente rossa.
[$('showMsgMatrix').addEvents({
'click': function() {
$('left_zone_on').fade(0);
$('left_zone_el').fade(0);
$('left_zone').fade(1);
// then we start the highlight morphing
highlight.start({
backgroundColor: ['#ccffcc', '#00000'],
color:['black', 'white'],
height:['100px','0px'],
opacity: [1, 0]
});
msg_zone_elOn.start({
opacity: [0, 1]
});
}
});
Infine abbiamo utilizzato l'effetto di dissolvenza per far apparire la nostra pagina all'inizio in maniera più incisiva. Abbiamo infatti messo un elemento nero su tutta la pagina, che abbiamo chiamato sipario e lo abbiamo fatto sparire quando siamo sicuri che tutti gli effetti e i dinamismi della pagina sono stati creati.
var leave_sipario = function() {
$('sipario').fade(0);
$('sipario').setStyle('display','none');
$('container').setStyle('display','block');
$('container').fade(1);
};
La possibilità che ci offrono i framework javascript di ultima generazione di rendere dinamici e mobili i nostri messaggi era una fantasia lontana per gli sviluppatori. Ora invece possiamo scegliere tra messaggi consueti di alert e customizzazioni accattivanti che conferiscono un'identità tutta personale ai nostri siti.
E ora non rimane che scegliere: pillola blu o pillola rossa?!
