14 febbraio 2011

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
piecemaker 2 demo

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
banner del tyag image con piecemaker
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
testo inserito in un banner di piecemaker
Ho pubblicato su Google Documenti un
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
notepad   file xml dropbox

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.


17 commenti:

  1. Molto bello. Grazie a te e a Soffio di Dea. Domanda: appesantisce il caricamento di una pagina?

    Una curiosità sui commenti: ho visto che diminuisce il numero dei contributi nei commenti in maniera strana (Marguerite ieri era a 39 ora è a 31). Come mai?

    RispondiElimina
  2. @Stefano
    E' evidente che un po' appesantisce il caricamento della pagina. Si può monitorare di quanto andando in Strumenti per Webmaster > Funzioni sperimentali > Prestazioni del sito

    I commenti presi in esame sono gli ultimi 2000. Quindi man mano che ne arrivano di nuovi escono quelli più vecchi. Ecco spiegato perché non figurano più alcuni fatti da Marguerite N. diversi mesi fa. Le dirò di commentare di nuovo :)

    RispondiElimina
  3. Si lo rende più lento... però solo nel caricamento iniziale... poi come ha detto Ernesto si può optare di metterlo solo in home page :) Ernesto ne approfitto... sai dove si possono prendere effetti flash su scritte o immagini? Vorrei inserire l'effetto flash delle scritte :) (grazie per avermi linkata)

    RispondiElimina
  4. @Soffio di Dea
    Fammi degli esempi concreti con dei link perché come sai di effetti ne è pieno il web

    RispondiElimina
  5. ok devo trovarli... ma anche l'effetto che c'è in piecemaker mi piacerebbe... (grazie)

    RispondiElimina
  6. alle foto si può allegare un linik di riferimento al post eseguito??

    RispondiElimina
  7. @BrilliDiLuce
    Sì certo. Nella riga di codice
    < Hyperlink URL="URL DEL COLLEGAMENTO" Target="_blank"/ >
    inserisci il link al post a cui si riferisce l'immagine. Poi si vede il cerchio con link se ci si passa sopra con il mouse.

    RispondiElimina
  8. @Ernesto T.

    e si puo mettere solo come banner grande sopra alla pagina..quindi in formato grande.
    O anche in formato piu piccolo..tipo come galleria fotografica??

    RispondiElimina
  9. @BrilliDiLuce
    Si possono mettere immagini di tutte le dimensioni. L'importante è che siano tutte uguali

    RispondiElimina
  10. davvero belloo..
    ho fatto tutto ma il problema che i link e quello cerchio non ce :(
    l'ho refatto due volte ma remane la stessa problema.

    perfavore un po di spiegazione su come si fa per avere i link delle immagine.

    grazie mille
    andati avanti

    RispondiElimina
  11. @Sarout La spiegazione c'è. Nel codice relativo all'immagine in cui vuoi inserire il link devi metterci il tag hyperlink, così
    < Hyperlink URL="URL DEL COLLEGAMENTO" Target="_blank"/ >
    dove devi inserire l'indirizzo del link.

    RispondiElimina
  12. Sei stato chiarissimo, ma c'è qualcosa in cui sto sbagliando. :(

    RispondiElimina
  13. @Viaggio
    E' un effetto molto complesso; anche io ho penato molto prima di riuscire a installarlo :(

    RispondiElimina
  14. Ciao e grazie per il suggerimento, mi è stato davvero utile. Si possono inserire anche effetti alle foto? e poi che significa "testo formattato" riportato a riguardo della sintassi per inserire una immagine? Grazie e complimenti.

    RispondiElimina
    Risposte
    1. @MiLLa
      Effetti alle foto li puoi sempre mettere ma prima di caricarle su Dropbox. Testo formattato significa aver inserito paragrafi, salti di riga, grassetto, corsivo e altro tramite tag quali < p > < b > < br/ > ecc.

      Elimina
    2. Come effetti intendevo magari cose tipo immagini che si zoommano o cose simili... insomma, ci devo studiare su! Quindi io tra < p > e < /p > posso inserire altri tag? MA anche cambiare font?

      Elimina
    3. @MiLLa
      Non ho testato se sono supportati anche i tag
      < font face="Nome del font" > ma puoi sempre provare

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.