How To: arricciare una pagina web “Page peel”
Ξ settembre 26th, 2008 | → 19 commenti | ∇ How to, Software e Web, chicche, wordpress |
Come avrete notato, ho inserito da qualche giorno il famoso “orecchio” alla pagina principlae del mio blog.
Ho pensato quindi di spiegarvi in pochi semplici passi come fare ad arricciare una pagina web o ad inserire l’effetto in un blog wordpress.
Per inserire l’effetto dovrete scaricare Pagepeel, da questo il link (La password è adivorblog), una volta scaricato e scompattato vi basterà aprire il file PagePeel,js, alla riga 5 trovate
pagepeel.js e sostituire ad _url = escape(’http://www.miosito.it’); // Link Address when ad is clicked on
l’ indirizzo a cui volete far linkare la pagina sottostante.
A questo punto, modificate le immagini che trovate nella cartella images a vostro piacimento e caricate tutta la cartella pagepeel nelle directory principale del vostro blog (Attenzione in Wordpress: non nella cartella del template). Il percorso della cartella sarà quindi http://www.miosito.it/pagepeel/
Doveret ora inserire nella vostra pagina il comando di caricamento dello script:
<script src=”./pagepeel/PagePeel.js” type=”text/javascript”></script>
Nel caso di una smeplice pagina html vi basterà inserirlo subito dopo il tag body, mentre nel caso di Wordpress vi consiglio di inserirlo nel file header.php del vostro tema dopo il tag body.
Se avete modificato la posizione della cartela, o se avete problemi provate a modificare il tag src=”…..” inserndo il percorso esatto dello script.
E questo è il risultato:
Fatemi sapere se funziona.
Dai un voto a questo articolo
(No Ratings Yet)
Loading ...19 commenti a “How To: arricciare una pagina web “Page peel””
Trackback e pingback
- Nessun trackback o pingback disponibile per questo articolo
10 novembre 2008 alle 21:35
Ciao e complimenti per il blog, passo spesso da te:).
Allora ho provato “page peel” su WP 2.3 in locale, ho fatto varie prove (con le immagini default, provando anche con i percorsi completi c/wamp/www/sito/pagepeel o localhost/sito/pagepeel , dopo il tag body nel file header.php del tema……Ma niente! uffi!
Proverò su WP 2.5, ma quae sarà il problema..?!
grazie
11 novembre 2008 alle 13:16
Allora, vediamo di capirci qualcosa.
Innanzi tutto ti consiglio di creare una pagina html semplice con una riga di testo e provare se il page peel funziona su questa pagina.
In questo modo vai a verificare il discorso dei percorsi e della applet java.
Se su una pagina statica funziona, allora controlla bene dove hai messo il codice di richiamo del page peel. Ti posto parte del mio header.php nella zona dove ho inserito il codice.
-/head>
-body>
-script src=”./pagepeel/PagePeel.js” type=”text/javascript”>
-div id="header">
-div id="topmenu">
-ul>
(ho dovuto sostituire il < con un - per permettervi di vedere il codice nei commenti)
Fammi sapere
11 novembre 2008 alle 15:30
Ok grazie.
Cmq ho provato e niente!
Mi spiego ho creato una pagina html denominata -prova- con questo codice:
-html-
-body-
-script src=”localhost/pagepeel/PagePeel.js” type=”text/javascript”–/script-
-p-prova-/p
-/body-
-/html-
E ho inserito questa pagina html, nel template (in WP,dove risiede header.php del tema), ci clicco, ma niente..!
Oppure : http://localhost/test/wpcontent/themes/classic/prova.html
E ancora niente!
grazie.
Uffi
11 novembre 2008 alle 15:44
Se metti la pagina in …/tua cartella webserver/prova.html
e ti assicuri che il file pagepeel.js pagepeel sia in ……/tua cartella webserver/pagepeel/pagepeel.js
Funziona?
Se si…..il problema è dovuto a percorsi errati, se no…….Mi risulta veramente difficile aiutarti con così poche informazioni.
Mi raccomando: fai le prove su una pagina html senza preoccuparti del template wordpress etc.
11 novembre 2008 alle 16:07
Ciao uffi:(
Nemmeno funziona!
Ricapitolando:
creata pagina html denominata “prova.html” (con il codice prima descritto) e messa nel web server ( C/wamp/www , o meglio localhost).
PagePeel con tutti i suoi file (pagepeel.js; image..) sta sempre quì cioè nel web-server (C/wamp/www , o meglio localhost).
da questa posizione clicco su “prova.html” e niente esce solo la scritta “prova”.!! dove sbaglio..?!?
uffi Help me!?
11 novembre 2008 alle 16:15
Se non funziona così non ha senso provare con wordpress. Ricontrolla bene il tutto, scommetto che il problema è in un riferimento sbagliato o qualcosa del genere.
D’altronde il sistema funziona, come puoi vedere è in uso su questo blog e su altre migliaia di pagine web.
Stai attento anche alla posizione delle immagini etc.
12 novembre 2008 alle 13:23
Ciao adesso FUNZIONA
Allora in Wordpress:
creata pagina statica con il codice sottostante, inserita nel web server ( C/wamp/ww)
-html-
-body-
-script src=”./pagepeel/PagePeel.js” type=”text/javascript”></script-
-p-prova-/p-
-/body-
-/html-
Modificatola righa di PagePeel.js con questo codice:
pagepeel.ad_url = escape(‘http://localhost’); //
Provare nel browser e tutto OK!
Vi farò sapere poi invece nel sito, e non in locale ma penso che dovrò solo cambiare localhost (con indirizzo o IP del sito), e mettere il codice (script src) nel file haeder.php del template in uso con wordpress.. giustooo!!??
12 novembre 2008 alle 14:53
Bene! quindi era sicuramente un problema di riferimenti.
Ora inserisci tutto nell’header di wordpress stando attento a rispettare i riferimenti, usa il pezzo di codice tratto dal mio header che ti ho mostarto per capire come impostare il percorso.
28 dicembre 2008 alle 09:16
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
bnvqgdgtnierucbdnzpeqouqfpbzmdwwgwhhello
23 marzo 2009 alle 21:04
Scusate ma posso chiedere aiuto ? a me non funziona..ho creato la pagina ho richiamato lo script , ho caricato la cartella ma una volta che lancio la pagina questa si visualizza senza il famoso angolo..ripeto sto provando in una semplice pagina html..idee ???
24 marzo 2009 alle 10:32
Ciao controlla bene, anche “/”.. e quindi non và!
leggi bene il mio ultimo intervento,anch’io provato varie volte con tanti problemi! vedi sopratutto il percorso..!
PS: ma con quale web server..?! poi con WP?
24 marzo 2009 alle 13:25
io lo provo direttamente in remoto..caricando subito sul mio dominio..ma scusa : il path che mi dici di controllare serve solo per il link o anche per farlo funzionare ? la pagina html che ho creato richiama lo script.js
-script src=”./pagepeel/PagePeel.js” type=”text/javascript”>
usa questa sintassi perchè tutto si trova nel dir pagepeel nella root del sito.Non trovo nessun errore . e tu? grazie Ivo
24 marzo 2009 alle 14:02
fai delle prove in locale!
devi metterlo nella cartella root ( es: c/wamp/www).
ma stai usando wordpress?
24 marzo 2009 alle 14:43
no negativo non sono ancora al punto di inserirlo in un blog..vorrei solo vederlo funzionare su una pagina semplice..in locale uso WMServer
24 marzo 2009 alle 15:25
Ciao, purtroppo anche io ho avuto qualche problema all’inizio, ma sono sempre stati problemi relativi ai path. Per aiutarti ti consiglio di guardare l’html di questa pagina http:\\www.appartamentilacasina.it
In questa pagina ho usato il page peel su html statico e pulito direttamente sul web. proprio come vuoi fare tu.
Il problema non è legato assolutamente al webserver, e io ho sempre fatto prove direttamente sul dominio proprio come te, senza mai provare in locale.
Facci sapere
24 marzo 2009 alle 16:25
Ok grazie Floyd di preoccuparti per me !!!!
Ragioniamo: io prendo il tuo zip lo scompatto e non tocco nulla (le immagini le cambierò dopo) unica cosa che devo fare è creare una pagina che chiamo a.html dove dopo l’apertura del body inserisco la sintassi per richiamare il .js
(la sintassi per non sbagliare l’ho copiata dalla tua pagina casina,ma è identica alla mia)
Salvo la pagina e la inserisco all’interno della cartella pagepeel
L’indirizzo alla riga 5 del js devo cambiarlo ? se non lo tocco al massimo ho un link sbagliato in caso di click..dico bene?
A questo punto carico la cartella pagepeel (così come esce dallo zip+ la mia pagina a.html) nella root del mio dominio.
Per finire punto miodominio/pagepeel/a.html e mi aspetto di vedere la mia pagina bianca ma con il benedetto corner pieghevole .invece niente.pagina bianca immobile
dove sbaglio ?
Se è tutto giusto unica spiegazione :lo script PagePeel.js non funziona.saresti così gentile di girarmi il tuo funzionante ? Grazie tante ciao ivo
25 marzo 2009 alle 19:36
Ciao Ido, il problema è semplicissimo:
La pagina a.html deve essere ad un livello superiore rispetto alla cartella pagepeel.
Quindi:
Root
| a.html
| PAGEPEEL
| tutti i file della cartella
Prova e vedrai che funziona
P.S: Controlla la posta
25 marzo 2009 alle 20:32
Ebbene si ! hai ragione problema risolto. Grazie a Floyd per la sua disponibilità..Spiego brevemente che la pagina a.html , menzionata nel post precente , è la pagina che contiene il codice per il richiamo dello script PagePeel.js
Il problema stava nel fatto che questa pagina deve trovarsi un livello superiore rispetto alla cartella pagelpeel (quella che esce dallo zip)
Ovviamente ricordo che nel mio caso ho messo l’effetto su una pagina statica semplicissima
Grazie ancora Ciao
11 aprile 2009 alle 15:54
grazie.
Funziona.
Nel mio caso l’errore stava nel fatto che avevo cancellato – inavvertitamente – le virgolette nello scrivere il link nello script dopo body nella pagina in cui voglio far comparire l’angolo.