Come adattare un template complesso a Jimdo Nella guida

Transcript

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.
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
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/
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”
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”
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”
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
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
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
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
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
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
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
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”
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.
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=”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=”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
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
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
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
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>
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>
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

Come adattare un template complesso a Jimdo Nella guida

Transcript

Documenti analoghi

15 - Chatbox

10 - Rotazione di banner

schema coccinella uncinetto a filet

1 Tutorial: SCRUBS Tutorial creato da: marte9020 Tutorial creato

CMS svizzeri creazione di siti

alfabeto punto croce

Esperienzein...“cannadapesca”

7 - La musica nel sito web