Sei sulla pagina 1di 23

Come adattare un template complesso a Jimdo Nella guida precedente (http://jimding3.jimdo.

com/2010/06/28/adattare-una-skin-del-web-a-jimdo/) abbiamo imparato come adattare un template scaricato dal web alla piattaforma di Jimdo. Il procedimento lo stesso per ogni template che si trova nel web, per non tutti sono uguali. Capita infatti di essere attirati da template che riportano uno scroller incorporato di immagini che a prima vista potrebbe attirarci proprio per questo, poi per materialmente, una volta adattato, ci ritroviamo ad incorrere in problematiche di varia tiplogia. Come, forse, saprete gli script non sono tutti compatibili tra loro. Pu accadere che una volta inseriti determinati script questi vadano in conflitto con quelli gi presenti nella piattaforma di Jimdo, oppure che vadano a influire negativamente su quelli gi presenti prelevati da altri siti. Ad esempio, alcune versioni dello script coin slider, del tipo che vedete nello slider posizionato nella home di Jimdo, possono andare ad influire sulla funzione dei commenti non facendoli visualizzare e poi aggiungerli. In questa guida quindi vedremo come adattare un template apparentemente complesso ed inserirvi uno slider pulito che non vada ad influire sulle funzioni di Jimdo. Per creare lo slider ci avvarremo del programma Sothink Javascript Web Scroller, gi visto nella guida creata da filmsdelover (http://www.filmsdelover.com/) che poi ho tradotto. Il programma disponibile nella versione Gratuita che vi permette di creare uno slider con 5 immagini e con un link al sito del programma, oppure nella versione a pagamento che offre pi funzionalit. A volte questo software reperibile gratuitamente in maniera legale sul sito Giveawayoftheday che regala giornalmente licenze per software minori (potrebbero passare mesi prima che venga riproposto per ). Dato che nella scorsa guida abbiamo visto FreeCssTemplate, in questa ci avvarremo del sito http://www.freewebtemplates.com/templates/xhtml-css/5 1) Per prima cosa colleghiamoci al sito http://www.freewebtemplates.com/templates/xhtml-css/5

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

2) Scegliamo il design che ci sembra pi adatto e scarichiamolo. Per il tutorial ho selezionato il template #10840 creato da joshsfs dato che riporta uno slider, che sostituiremo durante il tutorial anche se non del tipo Coin slider e quindi non dovrebbe creare comunque problemi

IMPORTANTE: Non fate gli sciacalli! Indipendentemente dal sito web che scegliete per scaricare il template, questi sono stati creati da soggetti pi o meno esperti. Non potete dire, l'ho adattato a Jimdo, quindi il template l'ho creato io. Ad adattare un template non ci vuole nulla, il discorso cambia per per la fase della creazione. Tutti i template sono sempre protetti da Copyright, infatti dovete mantenere, e mi sembra anche giusto, le righe relative all'autore nella zona del footer. Non le modificate in alcun modo, lasciatele intatte, perch per quella furbata potreste essere anche citati in giudizio dal legittimo autore. Solitamente per poter rimuovere quelle righe occorre fare una donazione al creatore del template stesso che in quel caso vi consentir di rimuovere i crediti. Diffidate dei siti che vi offrono template in cui il proprietario del sito non cita i rispettivi creatori o vi dice che non c' copyright, perch quelli sono siti di gente che ha semplicemente rippato il lavoro di altri attribuendosi il merito.

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

3) Scompattiamo quindi l'archivio che contiene il template

4) Apriamo quindi la cartella, clicchiamo con il tasto destro del mouse sul file index.html, selezioniamo Apri con e da l scegliamo il browser per internet che utilizziamo abitualmente, in questo modo, durante il lavoro, possiamo avere un riferimento visivo del template di base

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

5) Apriamo il software Sothink Javascript web scroller e componiamo lo slider con le varie immagini

6) Componiamo lo slider come meglio crediamo. E' fondamentale per che alla voce Taget impostiamo i parametri _top o _blank. In questo modo, se inseriamo dei link a cui collegare le immagini, le pagine relative si apriranno in una nuova finestra o in una nuova scheda. Se lasciaste _self, nelle versioni FREE di Jimdo rischiate di incorrere nel FrameBuster, in quanto la pagina di riferimento si aprirebbe all'interno dello scroller

Per maggiori informazioni http://jimding3.jimdo.com/2010/05/02/11-creare-un-lettore-news/

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

7) Andiamo nel sito Archive-host.com e carichiamo i files dello scroller. Come fare lo trovate spiegato in questa guida http://jimding3.jimdo.com/2011/10/05/come-utilizzare-archive-host-com/

8) Apriamo il nostro sito web ed accediamo al men layout andando alla voce proprio layout

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

9) Apriamo la cartella del nostro template salvato nel PC e da l, con il blocco note apriamo il file index.html

10) Andiamo nel men Modifica, selezioniamo Seleziona tutto. Fatto questo torniamo nel men Modifica e selezioniamo Copia

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

11) Incolliamo ora il codice all'interno della finestra HTML

12) Facciamo la stessa cosa con il file .css, nel mio caso chiamato stiles.css. La differenza che questa volta il codice va incollato nella finestra CSS

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

13) Carichiamo ora le immagini nel modulo dati. ATTENZIONE! Spesso e volentieri si trovano immagini con nomi separati divise da un trattino basso _. La piattaforma quando le caricate le modifica in automatico inserendoci un trattino alto -. Se avete un immagine che si chiama img_1.png nel vostro computer, nella piattaforma verr rinominata in img-1.png, quindi dovrete anche modificare i vari collegamenti nei codici HTML e CSS relativi a queste immagini

14) Come avete notato, le immagini nella cartella del templates scaricato vengono contenute nella cartella images (solitamente si chiama cos). Quello che dobbiamo fare ora modificare i percorsi delle immagini nei codici inseriti. Nulla di particolare. Iniziamo cliccando sul pulsante CSS. Ovviamente dovrete anche cambiare eventuali immagini scritte con i trattini bassi _ come detto sopra

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

15) Utilizziamo la funzione trova del browser per cercare tutte le immagini in cui appar ela voce images/, in questo modo le troveremo tutte una ad una

16) Di solito basta eliminare la parte images/ da ogni immagine, per pu accadere, come in questo caso che vengano aggiunti anche gli apici prima e dopo l'indirizzo. Se volete eliminate anche quelli

'

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

17) Facciamo la stessa cosa con le immagini presenti nella scheda HTML

Eliminazione delle parti inutili e superflue del codice Dopo aver letto la guida precedente, in molti mi hanno scritto perch non riescono ad identificare le parti inutili o anche perch eliminano troppo a livello di codice e ci si perdono. Di base, l'adattamento dei template non richiede alcuna conoscenza dei linguaggi HTML e CSS. Ovviamente se ne avete una di base torna tutto a vostro favore. Il consiglio che posso darvi di procedere lentamente aiutandovi anche con il template che avete aperto nel vostro browser. In questo modo potrete vedere in pratica quello che vi accingete ad eliminare a livello di codice. Per prima cosa quindi limitiamoci a guardare per 2 minuti come appare il template di base presente nel nostro computer

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

1) Ora possiamo iniziare ad eliminare le zone inutili. Per prima cosa inseriamo le aree fondamentali richieste da Jimdo. Ricordo che queste sono content, Navigation, Sidebar e Footer. La prima da inserire la zona del contenuto (content). Individuiamo quindi la zona prescelta ed eliminiamo per prima cosa i testi e le immagini inserite dall'autore in quella zona

2) Per sostituirlo clicchiamo semplicemente sul tasto Content, in questo modo la piattaforma in automatico piazzer il campo fondamentale del contenuto nel codice sostituendolo alla parte selezionata

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

20) Sostituiamo ora anche le altre 3 aree rimanenti

INSERIRE LO SLIDESHOW Come avrete notato, nella cartella che stata creata nel vostro PC quando avete scompattato l'archivio del template, tra gli altri, presente anche uno (o pi a seconda dei casi) file scritto in javascript. Dato che sostituiremo lo slideshow, quel file non ci serve. Se volessimo invece utilizzare lo slideshow predefinito allora avremmo dovuto caricare anche quello all'interno del modulo DATI del nostro sito web. Ci sono slideshow che non vengono accettati direttamente dalla piattaforma. In quel caso allora dobbiamo caricarne i files relativi su siti esterni come Archive-host, prelevarne i codici ed inserirli nel sito. 1) Per prima cosa identifichiamo la zona all'interno del codice HTML relativa allo slideshow

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

2) Andiamo su Archive-host ed apriamo la cartella in cui abbiamo caricato i files relativi allo slideshow creato con Sothink Javascript Web Scroller

3) Selezioniamo il file chiamato getcode.html, fatto questo clicchiamoci sopra. In alto a destra dell'icona comparir un quadratino con una freccia che punta verso il basso, clicchiamo su quella

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

4) Scegliamo l'opzione Consulter

5) Scegliamo e copiamo uno dei due codici proposti. Se avete la versione FREE di Jimdo vi consiglio lo script in versione Script, dato che i codici in iframe potrebbero darvi dei problemi

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

6) Incolliamo ora quel codice al posto dello slider predefinito nel codice HTML

7) Ora diamo uno sguardo al risultato fino ad ora ottenuto premendo su Salvare

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

8) In presenza di errori o di codici non accettati dalla piattaforma ci troveremo davanti un messaggio di errore. Di solito, per le modifiche minori vi suggerisco di premere Correggere automaticamente. Se il messaggio di errore riguarda invece cose del tipo discarding unespected </div> o simili allora revisionate il codice manualmente, perch il correttore automatico potrebbe piazzare quel DIV mancante al posto sbagliato sballandovi il risultato.

Tenete presente che nel codice HTML ogni elemento formato da un <div> iniziale e un </div> che lo chiude. Tutto quello che posizionate all'interno dei due marcatori viene visto come un singolo elemento. Il che vuol dire che se scrivete ad esempio <div id=prova>Lorem ipsum esta dolor...</div> Il periodo che abbiamo chiamato prova composto dalla frase Lorem ipsum esta dolor.... All'interno dei singoli <div> poi potete anche andarne a piazzare degli altri. Il che vuol dire che potreste avere situazioni del genere <div id=prova>Lorem ipsum esta dolor...<div id=casa>test</div></div> In questo caso il periodo prova composto sia dal testo Lorem ipsum esta dolor... che dal <div> che riporta la parola test. Se nell'eliminare qualche parte doveste cancellare ad esempio uno dei due </div> il codice verrebbe segnalato come errato, ad esempio il tipo di errore pi frequente questo <div id=prova>Lorem ipsum esta dolor...<div id=casa>test</div> Il correttore automatico di Jimdo di solito riesce ad interpretare bene gli errori, per in presenza di vari <div> potrebbe andare in palla e in presenza di codici complessi il risultato sarebbe sballato.

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

Prendiamo ora in esame un codice pi complesso del precedente <div id=prova>Lorem ipsum esta dolor...<div id=casa>test</div></div> <div id=albero>questa una prova</div> Come potete vedere ora nel codice sono presenti 2 periodi distinti, quello chiamato prova e l'altro chiamato albero. Come prima, all'interno del periodo prova presente il marcatore denominato casa. Se in fase di modifica noi omettessimo uno dei div, potremo avere questo tipo di risultato <div id=prova>Lorem ipsum esta dolor...<div id=casa>test</div> <div id=albero>questa una prova</div> In questo caso, la piattaforma non riesce a capire quando il periodo prova si chiude mancandogli il </div> conclusivo. Premendo il tasto Correzione automatica potreste incorrere in questo tipo di risultato <div id=prova>Lorem ipsum esta dolor...<div id=casa>test</div> <div id=albero>questa una prova</div></div> Che non quello che cercavamo, in quanto ora, dopo la correzione automatica, il periodo chiamato prova contiene sia il div casa che quello albero 9) Una volta salvato dovreste avere un risultato del genere. Nota: Lo slider da me incompleto in quanto era stato creato pi largo della zona che in questo template conteneva lo slideshow originale. Prima di crearlo con Javascript web scroller valutate bene nel reparto di codici CSS la larghezza (width) dello scroller gi presente in modo da rimpiazzarlo con uno delle giuste dimensioni

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

10) Ad esempio, nel mio template la larghezza prefissata era di 960 pixel

Ovviamente potete anche mettervi a giocare con i codici allargando la zona relativa, per poi dovreste allargare anche le altre larghezze delle altre zone, perch il tutto viene creato per funzionare a quelle dimensioni, logicamente variandone una occorre variarne poi le altre. Il codice HTML determina la posizione dei vari elementi. Il codice CSS ne regola lo stile. Paradossalmente il nostro sito web potrebbe funzionare anche senza codice CSS, ovviamente per non conterrebbe elementi grafici, ecc... Ogni elemento che inserite nel codice HTML poi pu essere modificato in vari aspetti tramite il linguaggio CSS. Per poter fare questo genere di modifiche il codice i base da utilizzare di questo tipo #nomediv {codice;} Al posto di nomediv dovete inserire il nome che affibbiate al marcatore. Ad esempio, riproponendo l'esempio sopra dei codici HTML per il marcatore prova il codice CSS sar cos #prova {codice;} Al posto di codice potete inserire i campi che vi interessano, ad esempio per la larghezza width, mentre per l'altezza height, per farlo sar in questo modo #prova {width:500px; height:300px;} Dopo ogni codice ricordatevi di inserire il punto e virgola ; altrimenti il codice non verr riconosciuto
Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

ALTRI ASPETTI DI PERSONALIZZAZIONE

Ora abbiamo inserito lo slider e tutti i campi fondamentali di Jimdo, per rimangono ancora delle zone inutili. In molti mi scrivono ad esempio perch non riescono ad integrare in orizzontale il men di Jimdo per sostituirlo a quello gi presente. Personalmente vi sconsiglio caldamente di andare a modificare il men di base di Jimdo dato che il cuore del vostro sito web, sballando quello vi giocate il sito. Se, come nel mio caso, il template scelto presenta un men in orizzontale mantenetelo magari modificandolo con le sezioni principali del vostro sito web, ma non pensate di sostituirlo a quello di base. Il mio consiglio di mantenere il men in orizzontale con le sezioni principali, mentre di inserire lateralmente il men di base di Jimdo, in modo da poter sempre effettuare tutte le operazioni necessarie. In questo modo il vostro visitatore in alto avr le sezioni principali, mentre a lato potr sempre accedere a quelle e al resto del sito. Tenete presente che in genere da ricerche effettuate sul lungo periodo in vari siti web di grande successo, emerso che i visitatori non amano particolarmente i siti in cui i men sono chilometrici. Cercate di limitare le voci principali ad un massimo di 7, ovviamente questo vale per il men in orizzontale situato in alto.

Nell'immagine vedete in azzurro il men di base del template, mentre in rosso notate dove ho inserito il men di base creato con Jimdo. Il men in orizzontale integrato nel template ovviamente non prende in automatico le sezioni che sono presenti nel vostro sito web, questo perch altro non che un insieme di collegamenti. Quello che
Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

dobbiamo fare sostituire i collegamenti presenti con quelli che ci interessano. Nei passaggi successivi vedremo come modificare il primo collegamento. Per le altre sezioni il lavoro lo stesso

1) Per prima cosa apriamo il foglio HTML

2) Individuiamo la zona del codice che parla del men, ci basta cercare ad esempio la parola home o il nome di una delle altre sezioni che vediamo nel men di base

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

Come avrete notato il codice del men diverso da quello classico in HTML. Qui oltre ai <div> compaiono anche i marcatori <ul> e <li>. Per quello che dovete fare vi basti sapere che il codice <ul> determina ogni livello del men, mentre il codice <li> ne stabilisce le varie voci. Ad esempio un codice di questo tipo <ul> <li><a href=#>home</a></li> <li><a href=#>news</a></li> </ul> E' composto da due voci principali, una home e l'altra news. Un men che contiene delle sottocategorie composto in questo modo <ul> <li><a href=#>home</a></li> <li><a href=#>news</a> <ul><li><a href=#>sottosezione1</a></li> <li><a href=#>sottosezione2</a></li> </ul></li> </ul> In questo caso come potete vedere il men principale composto da due voci. Abbiamo la voce home e la voce news. La voce News a sua volta si compone di due sezioni chiamate sottosezione1 e sottosezione2. Probabilmente i colori vi possono aiutare meglio in questo per capire il concetto. 3) Quello che dobbiamo fare quindi andare a modificare il codice delle singole sezioni. Ad esempio nel caso del mio template la sezione home ha il codice composto in questo modo: <li class=selected> <a href="index.html">Home</a> </li> Intanto modifichiamo subito la voce selected che va a segnalare che la sezione home sempre quella attiva e riporta uno stile differente dalle altre. Dobbiamo far quindi diventare il codice cos <li> <a href="index.html">Home</a> </li>

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

4) Ora il codice quello di un normale collegamento. Ed questo: <a href=index.html>HOME</a> Come potete vedere si compone di una parte che compone il collegamento, mentre l'altra quella che viene mostrata nel pulsante

<li>

5) Solitamente al posto di index.html potete anche trovare il simbolo #. In questo caso il collegamento non punta verso una pagina differente ma verso l'inizio della stessa pagina. Il procedimento identico, dobbiamo rimuovere la voce index.html o il simbolo # sostituendolo invece con il collegamento diretto alla pagina di riferimento, ad esempio <a href="http://dozy3skin.jimdo.com">Home</a> </li>

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata

Ora non ci resta che sostituire le altre voci ed eliminare o sostituire eventuali altre zone inutili.

ULTIME RACCOMANDAZIONI

Torno a ribadire un concetto fondamentale. NON RIMUOVETE MAI O SOSTITUITE I CREDITI POSTI IN FONDO AL TEMPLATE. A meno che non prendiate accordi personalmente con l'autore del template stesso non siete neanche autorizzati a modificarli, il che vuol, dire che e ad esempio i crediti di base sono: YourSite 2010. Website design by <a href="http://www.spyka.net">Free CSS Templates</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a> Voi non potete scrivere ad esempio: Per il template si ringrazia TizioCaioSempronio del sito blabla Dovete lasciarli inalterati Prima di scaricare dei template da un sito cercate di verificare se riporta delle licenze. Nel caso non venisse detto niente non siete comunque autorizzati a rimuovere quelle righe o a sostituirle. Portate sempre rispetto a chi ha creato quel template, in quanto vi ha risparmiato tempo, fatica e denaro. Segnalate sempre i siti web che a vostro parere offrono template copiati senza attribuzione. Non penso serva ribadire che in rete trovate dei furboni che per farsi belli agli occhi degli altri prelevano da un sito un determinato numero di template, in barba agli autori ne rimuovono i crediti e li spacciano poi come loro creazioni. I siti web seri che offrono template gratuiti da scaricare, vanno avanti perch sono gli stessi autori di template a postarceli all'interno e non perch il proprietario del sito si fa un giro nei siti pi famosi, si scarica i template e poi li ricarica come suoi.

Spero che questa guida vi sia stata utile. Per eventuali domande non esitate a contattarmi. Tenete presente che non essendo un professionista vi risponder in base alle mie capacit, quindi le cose che vi dir potrebbero anche essere non del tutto esatte. Per ulteriori guide e/o consigli per il vostro sito web continuate a seguirmi tramite il sito http://jimding3.jimdo.com Per tutorial per Photoshop/GIMP seguitemi invece su http://dozy3.com

Tutorial creato per http://jimding3.jimdo.com e il forum di Jimdo. Vietata la riproduzione, anche parziale, non autorizzata