Spezza la monotonia con spritely!
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:
- 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.
- 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 "<" e ">" con ">" all'interno del tag <pre>[...]</pre>.
Aggiungi un commento