Spezza la monotonia con spritely!

Pubblicato da Nicola Rainiero il 07-06-2012 (aggiornato il 25-04-2015)

Con jQuery abilitato di default in Drupal 7 e il plugin spritely installato come modulo o aggiunto manualmente come plugin è possibile animare la grafica che compone lo sfondo del proprio sito e aggiungere così vitalità al layout html. Vediamo in dettaglio quali sono le operazioni per installarlo e quali file editare in Drupal.

In principio fu il GIF animato, poi venne il tempo del Flash di FutureSlash prima, poi Macromedia e oggi di Adobe (quanto si impara leggendo Wikipedia) e fu un grande salto in avanti con l'introduzione della multimedialità, ultimamente per compatibilità e leggerezza sta prendendo piede jQuery e l'html5 che offre molte opportunità per movimentare il proprio spazio web. Spritely come cita il sito del progetto è un plugin di jQuery creato da Artlogic e licenziato Mit e GPL, per creare protagonisti dinamici e animazione dello sfondo in puro HTML e Javascript.

Mi ha permesso con poca fatica e direi con buoni risultati, per uno che di fantasia ne ha davvero poca, di abbellire la testata del sito della pagina in modo originale (vabbè 6 estremità di nuvole non sono il massimo ma simulano un 3D casareccio!), senza pensare a texture complicate o artefatti inguardabili.

Per ottenere buoni risultati bisogna però:

  • conoscere qualche rudimento dei fogli di stile css, per quanto riguarda le proprietà da assegnare agli oggetti, la loro posizione all'interno della pagina e l'interazione con le altre parti che compongono lo sfondo (non vorrete nascondere il logo o bloccare il funzionamento dei link?);
  • capire quale codice javascript e funzionalità abilitare, ma gli esempi forniti nel sito aiutano parecchio;
  • saper creare disegni vettoriali con trasparenze e misure precise al pixel, allo scopo consiglio Inkscape, software libero multipiattaforma.

Installazione

JQuery è già caricato di default in Drupal 7, mentre spritely deve essere installato e per farlo si possono seguire due differenti strade:

  1. Si scarica l'omonimo modulo da qui e lo si copia nell'indirizzo FTP del proprio dominio (punto 2 e 6 della guida precedente), avendo poi cura di prelevare l'ultima release di spritely da qui e copiare il contenuto dell'archivio in "sites/all/libraries/spritely/" da non tralasciare questo file: jquery.spritely.js. A questo punto si può abilitare il modulo dal pannello Moduli di Drupal.
  2. Si ottiene l'ultima release di spritely dal sito del progetto e si copia il file jquery.spritely-0.6.js in "sites/all/themes/sottotema_abilitato/js/" ovvero nella cartella del sotto tema usato in Drupal, poi si dovrà aggiungere nel file di testo sottotema_abilitato.info in "sites/all/themes/sottotema_abilitato/" la seguente stringa: scripts[] = js/jquery.spritely-0.6.js. Consiglio di dare un'occhiata a questa guida in italiano e quest'altra disponibile tra la documentazione di Drupal, per capire come funzionano i temi e la loro creazione. 

A questo punto il plugin funziona: in ogni tema di Drupal (caso A) o per il solo tema abilitato (caso B); adesso si tratta solo di capire come usarlo e cominciano i dolori!

File da modificare per usare spritely

Le possibilità per impiegarlo e i file da modificare possono essere molteplici (questo grazie anche a Drupal e all'HTML), ognuna con i propri pro e contro. Esporrò brevemente le operazioni che ho svolto per il mio sito, anche se sono sicuro che non sia la procedura migliore... Ma visto che funziona in modo fluido con tutti i browser e rispecchia grossomodo il risultato che mi prefissavo, non ho voluto cambiarla e rivederla.

Nella cartella del sotto tema abilitato (il mio tema di riferimento è Bartik), ma dovrebbe essere lo stesso grossomodo anche per gli altri, ho modificato opportunamente due file:

  • il foglio di stile css "sites/all/themes/sottotema_abilitato/css/style.css"; 
  • il template della pagina "sites/all/themes/sottotema_abilitato/templates/page.tpl.php".

E' sempre bene modificare i file copiati in questa cartella e non quelli originali forniti con l'installazione di Drupal (che si trovano nella cartella della root "themes/").

Nel foglio di stile ho definito la posizione, l'interazione, la profondità degli oggetti mobili e di quelli fissi interessati. Per esempio all'interno della sezione commentata con:

 /* ------------------ Header ------------------ */

Ho inserito per il primo oggetto composto da un contenitore stage e da un altro definito cloud, questo codice:

/* Mio codice per la testata */
        #stage1 {
            top: -50px;
            left: -50px;
        }
        .stage1 {
            position: absolute;
            top: 0;
            left: 0px;
            width: 600px;
            min-width: 600px;
            height: 120px;
            overflow: hidden;
        }
        #cloud1 {
            position: absolute;
            top: 0;
            left: 0px;                     
			width: 600px;
			height: 95px;
            background: transparent url(../images/clouds_animation3.png) 0 0 no-repeat;
        }
        
        [...Idem per gli altri 5, variando chiaramente la posizione e l'immagine...]

Ho dovuto però forzare la posizione e la profondità (con z-index) di molti altri oggetti che venivano coperti e bloccati dalla sovrapposizione delle nuvole.

Nel template della pagina è bastato capire come variano le chiamate che definiscono il flusso della pagina e visto che volevo gli effetti nella parte alta mi sono posizionato a riga 90 e ho inserito questo testo in javascript:

<!-- Code to animate background: START -->

 <script type="text/javascript">
        <!-- javascript code for the first cloud -->
        (function($) {
            $(document).ready(function() {
                $('#cloud1').delay(0).sprite({fps: 0.5, no_of_frames: 3}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 500, pause: 0}); 
            });
                })(jQuery);
	<!-- similar text for the others -->
</script>

<!-- html code for the first cloud -->
<div id="stage1" class="stage1">
       <div id="cloud1" class="stage1"></div>
</div>
<!-- similar text for the others -->

<!-- Code to animate background: END -->

Dopo la chiusura dello script ho messo i contenitori delle nuvole, variando il numero da 1 a 6.

Ho fatto molti tentantivi e avrei potuto creare un ciclo for in php per semplificarmi la vita e migliorare la lettura del codice ma ho preferito ricorrerre al caro vecchio copia & incolla! Anche per lo stile, sono rimasto sul rozzo e non ho inserito alcun commento a spiegazione di quanto aggiunto.

Cercherò di farmi perdonare in un prossimo articolo, dove spiegherò passo passo come aggiungere un oggetto animato con spritely.

P.S. Se qualcuno ha qualche idea e soluzione per inserire il codice javascript, PHP e HTML senza che venga interpretato mi fa un gran piacere, perché il tag pre, code e il modulo codefilter non risolvono il problema! Problema risolto sostituendo i caratteri "<" con "&lt;" e ">" con "&gt" all'interno del tag <pre>[...]</pre>.




Potrebbero interessarti anche:

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.