Effetto Piecemaker 2 da inserire in Blogger.

Piecemaker 2 è la seconda versione di un effetto che ha avuto un certo successo e che consente di visualizzare dei banner personalizzati con effetti di transizione veramente particolari. Il progetto è open source e può essere scaricato gratuitamente dalla pagina di download di Piecemaker 2. Chi ha Wordpress può inserirlo nel blog attraverso appositi plugin e tutorial creati dalla community di Wordpress. Vediamo come fare per installarlo su Blogger in modo relativamente semplice. Prima di passare alla trattazione è utile che diate uno sguardo al blog di prova che ho messo in rete

• Demo dell'effetto Piecemaker 2 -

Si può navigare tra i banner mediante gli appositi pulsanti di navigazione posti in basso. Ce ne sarà uno per ogni immagine inserita. Gli effetti di transizione possono essere configurati a piacere e si possono inserire anche video, oggetti in flash e audio. Senza nessuna interazione da parte del navigatore, i banner inseriti verranno visualizzati uno dopo l'altro a rotazione.

L'installazione di questo effetto è possibile solo attraverso il caricamento dei file su DropBox; tutte le alternative che ho provato non hanno funzionato. Nel caso in cui non siate ancora iscritti ecco il modulo di registrazione a DropBox.

L'effetto Piecemaker 2 può essere installato in semplice elemento HTML senza modificare il modello di Blogger. Andate su Design > Aggiungi un gadget > HTML/Javascript, incollate il seguente codice quindi cliccate su Salva e posizionatelo con il drag & drop del mouse

<!--PIECEMAKER 2 INIZIO-->
<script src="....swfobject.js" type="text/javascript">
</script>
<center>
<div id="piecemaker">
Inserire alternative non in Flash in questa zona.
</div>
</center>
<script type="text/javascript">
      var flashvars = {};
      flashvars.cssSource = "  ....piecemaker.css";
      flashvars.xmlSource = "  ....piecemaker.xml"; 
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";
      swfobject.embedSWF('http://dl.dropbox.com/u/13256471/piecemaker_2/piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,   
      params, null);    
</script>
<!--PIECEMAKER 2 FINE - www.ideepercomputeredinternet.com-->

Adesso passiamo alla personalizzazione del codice facendo alcune premesse. Dobbiamo scaricare questo file ZIP e caricare i file su DropBox. L'unico file che è necessario configurare è quello in formato XML che è evidenziato di rosso. Dobbiamo incollare gli URL acquisiti da Dropbox al posto di quelli colorati che iniziano con i puntini.

Ci sono istruzioni particolareggiate di come editare questo file nella documentazione di Piecemaker 2. Ricordo che l'XML è un metalinguaggio che serve per creare nuovi linguaggi con dei tag personalizzati. Vengono creati dei nodi madre e dei nodi children, va mantenuto l'ordine di annidamento e l'XML è anche case sensitive nel senso che le maiuscole vengono interpretate diversamente dalle minuscole. Ecco la sintassi per inserire una immagine

<Image Source="URL DELLA IMMAGINE" Title="Titolo della immagine">
          <Text><h1>Titolo del testo</h1><p>Paragrafo formattato</p> </Text>  
          <Hyperlink URL="URL DEL COLLEGAMENTO" Target="_blank"/>
</Image>

Le immagini dovranno essere tutte caricate su DropBox e se ne deve acquisire l'URL con il metodo descritto nell'articolo linkato. Visto che dobbiamo caricare diverse cose e che queste debbono andare tutte nella cartella Public, è opportuno creare una sottocartella in cui inserire tutti i file relativi a Piecemaker 2 per non fare confusione con il resto del nostro account. Se vogliamo inserire un oggetto in flash dobbiamo utilizzare questo codice

<Flash Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/flash.swf" Title="Loaded SWF File">
           <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/flash-preview.png" />
    </Flash>
in cui ho lasciato gli URL dei file caricati su DropBox. Per i video si utilizza una sintassi simile
<Video Source="http://dl.dropbox.com/u/2574553/piecemaker%202/piecemaker-video.mp4" Title="Esempio di un video" Width="910" Height="365" Autoplay="true">
      <Image Source="http://dl.dropbox.com/u/2574553/piecemaker%202/pmaker6900.jpg" />       
  </Video>

Le immagini supportate sono quelle in JPG, PNG e GIF. Il tag Title sarà quello che si visualizza nel tooltip del navigatore. Nel primo esempio il tag Image è il nodo madre mentre Text e Hyperlink sono i nodi figli. Se si hanno dei nodi madri con i tag Flash e Video dobbiamo inserire il nodo figlio Image per mostrare ad esempio il fotogramma iniziale dell'oggetto animato. Ecco come apparirà un banner inserito con il primo codice

Quando si passa con il mouse sopra all'immagine, si visualizzeranno tre pulsanti

1. Stop: serve per interrompere la riproduzione dell'effetto
2. Link: rimanderà al collegamento inserito tramite Hyperlink
3. Info: quando ci si clicca sopra mostrerà il testo che abbiamo formattato all'interno del tag Text e dividerà il banner in tre porzioni

Ho pubblicato su Google Documenti un

• Esempio di file XML per PieceMaker 2 -

da inserire in DropBox. Il codice inizia con la dichiarazione che si tratta di un file XML e di che tipo sia. Il nodo madre è <Piecemaker> che sarà chiuso alla fine del documento. Le immagini e i video sono stati inseriti all'interno dei nodi <Contents> e </Contents> e seguono la sintassi illustrata sopra. Nella seconda parte sono presenti le configurazioni. Ricordo solo quella fondamentale della dimensione delle immagini e dei video. Nell'esempio sono  ImageWidth="900" ImageHeight="360" ma si possono sceglierne di diverse per adattarle al nostro layout. Tutte le immagini caricate dovranno però avere le dimensioni che sono state prescelte.

La parte finale è dedicata alle Transitions dei vari banner. Le transizioni previste sono tre: easeInOutBack, easeInOutElastic,easeInOutCubic. Gli altri parametri hanno altre funzioni. Per esempio la riga

<Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"></Transition>

si riferisce al primo banner e ne determinerà lo spezzettamento in 9 pezzi che faranno un intero giro in 1 secondo e 2 decimi, sarà una transizione del tipo easeinOutBack, l'intervallo di moto sarà di un decimo di secondo tra un cubo e l'altro, lo sfasamento rispetto all'asse z sarà di 300 pixel e la distanza tra i cubi durante la transizione sarà di 30 pixel. Ciascuna transizione potrà essere personalizzata e resa diversa dalla precedente. Il valore di DepthOffset è consigliato tra 100 e 1000 ma si possono sperimentare anche valori diversi.

Volendo potrà anche essere inserito dell'audio in un banner o anche in più di uno. Nell'esempio che ho pubblicato, è l'ultimo della serie e potrà essere ascoltato cliccando nel pulsante più a destra. Bisogna semplicemente convertire un file musicale o una semplice registrazione vocale in un filmato MP4. Questo può essere fatto mediante il programma gratuito Format Factory. In questo caso non occorre neppure preoccuparci delle dimensioni del player. Dopo averlo caricato su DropBox e averne acquisito l'URL si inserisce come un video seguendo la sintassi illustrata precedentemente.

Osservazioni Conclusive

E' molto utile usare, per la configurazione del file XML, l'editor Notepad++ in quanto consente di visualizzare il file nella sua corretta struttura e non come un semplice file di testo

Inoltre con questo tool si può aprire in ogni momento il file già caricato su DropBox, effettuare delle modifiche e salvarle senza provocare delle interruzioni dell'effetto o essere costretti a scaricare il file e a ricaricarlo.

Questo effetto può anche essere usato come sostituto dell'header. Basta seguire le istruzioni su come inserire un widget HTML al posto dell'header. Volendo si può scegliere di visualizzarlo solo in Homepage o solo in una pagina statica. Per concludere ricordo che PieceMaker 2 mi è stato segnalato da Soffio di Dea Nail Art - Il Colore dei Sogni.