PageEar o Effetto Sfoglia Pagina per blog su Blogger.

L'Effetto PageEar altrimenti detto anche PagePeel o Magic Corner e tradotto credo proprio da me per la prima volta in italiano come Effetto Sfoglia Pagina, è stato creato da WebPicasso e può essere scaricato e installato seguendo le istruzioni del sito. Dal Marzo del 2008 gli sviluppatori di PageEar permettono di utilizzarlo con la sola restrizione di lasciare intatte le informazioni sul copyright presenti all'inizio dei javascript.

Nel Gennaio del 2010 avevo estrapolato dai file quelle parti di codice da personalizzare per rendere più facile l'installazione dell'effetto Sfoglia Pagina anche ai meno esperti. Sono stato avvertito però proprio ieri sera che il codice che avevo postato non funzionava più. Non sto a spiegare le ragioni tecniche per cui questo sia avvenuto ma sono subito corso ai ripari rigenerando il codice e rendendolo nuovamente installabile.

L'Effetto Sfoglia Pagina mostra in alto a destra, o in alto a sinistra, una pagina arricciata con una piccola immagine. Se ci si passa sopra con il mouse, la pagina si apre di più e mostra una seconda immagine con un collegamento a una pagina web. Può essere un modo originale per invitare i lettori ad abbonarsi ai feed oppure per pubblicizzare un sito, una pagina, un libro o un altro prodotto.

Come inserire l'Effetto Sfoglia Pagina in un blog su Blogger in modo semplice.

Mi sono già occupato dell'Effetto Sfoglia Pagina però mi sono reso conto che non ha avuto il riscontro che meritava forse perché nell'articolo precedente non avevo semplificato abbastanza la procedura di inserimento. Ho rimediato a questo problema ed ecco un nuovo metodo di installazione che prescinde dalla personalizzazione di file Javascript. Per prima cosa dovete procurarvi due immagini  di dimensioni rispettivamente di 500x500 pixel e di 100x100 pixel. Entrambe devono essere in formato JPG.


Queste immagini devono essere caricate su un vostro hosting tipo Skydrive o ImageShack, quindi ne deve essere acquisito l'indirizzo. Adesso andate su Layout > Modifica HTML e cercate la riga

</head> 

Immediatamente sopra di essa incollate il seguente codice

<!-- EFFETTO SFOGLIA PAGINA INIZIO -->
<script language='javascript' src='https://sites.google.com/site/scriptperilblog/javascript-2/AC_OETags.js'/>
<script type='text/javascript'>
//<![CDATA[ 
var pagearSmallSwf = ' .../pageear_s.swf'; 
var pagearBigSwf = '   ..../pageear_b.swf'; 
var pagearSmallImg = 'URL_IMMAGINE_100_PIXEL'; 
var pagearBigImg = 'URL_IMMAGINE_500_PIXEL'; 
var jumpTo = 'URL_PAGINA_DESTINAZIONE' 
var setDirection = 'rt'; 
var pageearColor = 'ffffff'; 
//]]> 
</script> 
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/pageear1.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/xYOad' target='_blank'><span style='font-size: x-small;'>Effetto Sfoglia Pagina</span></a></noscript>
<!-- EFFETTO SFOGLIA PAGINA FINE -->

come mostrato nello screenshot

Le personalizzazioni da fare riguardano le seguenti parti di codice

1. In var pagearSmallImg inserire al posto dell'URL evidenziato di rosso l'indirizzo dell'immagine di 100x100 pixel e che sarà visualizzata in alto
2. In var pagearBigImg sostituire l'URL evidenziato di rosso con quello della vostra immagine di 500x500 pixel e che sarà vista quando si sfoglierà la pagina
3. In var jumpTo al posto dell'URL di questo blog inserite l'indirizzo nel quale volete sia inviato chi clicca sopra all'immagine
4. In var setDirection se lasciate rt l'effetto si vedrà in alto sulla destra mentre se mettete lt si vedrà sempre in alto ma sulla sinistra
5. In var pageearColor si può inserire il colore di sfondo; se lasciate ffffff rimane il colore bianco.
6. In  ../pageear_s.swf e    ..../pageear_b.swf vanno inseriti i link diretti ai file scaricati da questo ZIP e successivamente caricati su DropBox.

Adesso andate alla fine del modello e immediatamente prima di </body>, incollate questo blocco di codice

<!-- EFFETTO SFOGLIA PAGINA INIZIO -->
<script type="text/javascript"> writeObjects(); </script>
<!-- EFFETTO SFOGLIA PAGINA FINE -->

come mostrato nello screenshot


Salvate il modello.
Per vedere questo effetto all'opera andate nel blog di demo che ho creato appositamente: Effetto Sfoglia Pagina. Se avvicinate il mouse all'immagine in alto a destra, la pagina si aprirà, cliccando sull'immagine visualizzata si andrà in una pagina di questo blog.


Aggiornamento: consultate anche il post aggiornato sull'Effetto Sfoglia Pagina o PageEar.

Ripristinato l'effetto Sfoglia Pagina con un codice nuovamente funzionante.

Da qualche giorno l'Effetto Sfoglia Pagina non era più funzionante perché il sito Hotlinkfiles su cui erano caricati gli script è andato in sovraccarico, inoltre anche Skydrive su cui avevo caricato le immagini dà segni di malfunzionamento. Ho quindi caricato gli script su DropBox di cui parlerò in futuro e che offre un'alternativa gratuita per caricare file di tutti i generi.
La demo dell'effetto la potete vedere nel Blog Effetto Sfoglia Pagina e per poterlo inserire nel vostro sito dovete seguire le indicazioni del precedente post che adesso riassumo.
Primo passo - Procurarsi due immagini quadrate rispettivamente di 100x100 pixel e di 500x500 pixel. Caricarle su un hosting in cui sia possibile ottenere il link diretto come per esempio ImageShack o Fileden.
Secondo passo - Scaricare il seguente file pageear.txt e personalizzatelo inserendo

// URL zum kleinen Bild / URL to small image
var pagearSmallImg = 'URL immagine 100 pixel.jpg';
// URL zu pageear_s.swf / URL to small pageear swf
var pagearSmallSwf = 'http://www.fileden.com/files/2009/5/6/2432567/pageear_s.swf';

l'URL dell'immagine da 100 pixel

// URL zum großen Bild / URL to big image
var pagearBigImg = 'URL immagine 500 pixel.jpg';
// URL zu pageear_b.swf / URL to big pageear swf
var pagearBigSwf = 'http://www.fileden.com/files/2009/5/6/2432567/pageear_b.swf';

l'URL dell'immagine da 500 pixel

// Zu öffnende URL bei klick auf die geöffnete Ecke
// URL to open on pageear click
var jumpTo = 'URL del collegamento'
// Öffnet den link im neuen Fenster (new) oder im selben (self)
// Browser target  (new) or self (self)
var openLink = 'new';

L'URL del collegamento a cui volete che vada chi clicca sull'immagine sfogliata e inserire new perché si apra in un'altra scheda oppure self affinché si apra in quella corrente.

Se volete che l'Effetto Sfoglia Pagina funzioni sulla sinistra invece che sulla destra inserite lt invece di rt nella seguente porzione di codice

// Ecke in der das Pagepeel erscheinen soll (lt: linke obere Ecke | rt: rechte obere Ecke )
// Set direction of pageear in left or right top browser corner (lt: left | rt: right )
var setDirection = 'rt';

Il file così personalizzato, rinominatelo da pageear.txt in pageear.js con il destro del mouse e caricatelo su un servizio che supporta gli script come DropBox, Google Sites o MyDataNest e acquisitene l'URL.
Adesso andate su Layout > Modifica HTML e, dopo aver salvato il modello, cercate la riga </head>, quindi, immediatamente sopra incollate questo codice

<script language='javascript' src='https://dl.getdropbox.com/u/2574553/AC_OETags.js'/>
<script src='URL di pageear.js' type='text/javascript'/>

dove avrete incollato l'URL del file che avete appena caricato. Adesso cercate la riga </body> proprio in fondo al modello e, immediatamente prima inserite questo ultimo codice

<!-- PageEar function call -->
<script type="text/javascript"> writeObjects(); </script>

Salvate il modello e dovreste vedere un effetto identico a quello del blog che ho usato come demo.

Come inserire l’effetto Sfoglia-Pagina in un blog su Blogger.

Questo effetto è stato messo a punto dal sito tedesco www.webpicasso.de e l’ho scoperto attraverso il blog di Iole che ha scritto anche un eccellente post. Per iniziare date uno sguardo al blog dell’effetto sfoglia-pagina che ho creato per testare  il funzionamento.
Se andate con il mouse nella parte alta destra, la pagina si sfoglierà mostrando un’altra immagine. Avete quindi bisogno di due immagini, una più piccola da vedere in una posizione normale e una più grande quando la pagina viene sfogliata. 
Ho usato due immagini: la miniatura deve essere di 100x100 pixel e l’immagine che si vede quando si sfoglia la pagina deve avere le dimensioni di 500x500 pixel. Io non l’ho fatto per questioni di tempo ma si potrebbero inserire delle scritte per invitare a cliccare sulla pagina o sulla miniatura. Un’altra considerazione è che si vede di entrambe solo la parte che sta sopra alla diagonale quindi occorre considerare questo fatto quando si inserisce del testo.

Dopo che vi siete procurate le due immagini delle dimensioni appena citate, caricatele nel web, per esempio su SkyDrive e passate alla personalizzazione del file pageear.txt che potete scaricare dal collegamento. Inserite i seguenti dati evidenziati di rosso

/*
*  Konfiguration / Configuration
*/
// URL zum kleinen Bild / URL to small image
var pagearSmallImg = 'URL_Immagine_100pixel';
// URL zu pageear_s.swf / URL to small pageear swf
var pagearSmallSwf = 'http://www.hotlinkfiles.com/files/2780723_eogbc/pageear_s_1.swf';

cioè l’URL della miniatura.

// URL zum großen Bild / URL to big image
var pagearBigImg = 'URL_Immagine_500pixel';
// URL zu pageear_b.swf / URL to big pageear swf
var pagearBigSwf = 'http://www.hotlinkfiles.com/files/2780721_sj4yd/pageear_b_1.swf';

vale a dire l’URL dell’immagine grande

// URL to open on pageear click
var jumpTo = 'URL_Pagina_Collegamento'
// Öffnet den link im neuen Fenster (new) oder im selben (self)
// Browser target  (new) or self (self)
var openLink = 'new';

bisogna cioè inserire l’URL della pagina che si vuole che si apra quando il visitatore clicca sull’immagine sfogliata. Si può anche sostituire new con self se si vuole che il collegamento non si apra in una nuova scheda

// Ecke in der das Pagepeel erscheinen soll (lt: linke obere Ecke | rt: rechte obere Ecke )
// Set direction of pageear in left or right top browser corner (lt: left | rt: right )
var setDirection = 'rt';

sostituire rt con lt se si vuole che la pagina si sfogli sulla sinistra invece che sulla destra. Salviamo questo file di testo nel nostro computer. Rinominiamolo da pageear.txt in pageear.js con il destro del mouse. Carichiamolo sul servizio Hotlink Files che dà i link diretti ai file Javascript. Acquisiamone quindi l’indirizzo.
Adesso andiamo su Layout > Modifica HTML e cerchiamo il tag </head>. Immediatamente sopra incolliamoci il seguente codice

<script language='javascript' src='http://www.hotlinkfiles.com/files/2780722_zhzcz/AC_OETags.js'/>
<script src='URL del file pageear.js' type='text/javascript'/>

dove al posto di URL del file pageear.js inserite l’indirizzo acquisito da Hotlink Files. Adesso cercate il tag </body> e immediatamente prima inserite il seguente codice

<!-- PageEar function call -->
<script type="text/javascript"> writeObjects(); </script>

Salvate il modello e guardate la vostra realizzazione.
Aggiornamento: Il sito HotlinkFiles è andato in tilt quindi ho caricato lo script su un altro hosting, DropBox. Nel caso in cui non funzionasse il codice di questo articolo consultate quest'altro post.