Per ulteriori informazioni contattami, sarà un piacere rispondere alle tue domande. Risorse che aiutano su: www.cmsacademy.it

2. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
COME SCRIVERE E FORMATTARE UN ARTICOLO PER IL
TUO SITO IN 10 MINUTI O MENO
Parte 1 / Anno 2015
PERCHÉ QUESTO REPORT?
L’idea di questo Report parte dalle esigenze dei miei clienti.
Molto spesso sento dire da loro frasi tipo: “E’ troppo
complicato”, “Non ho tempo”, “Non capisco come utilizzarlo”
e altre frasi simili, compreso quella che stai pensando tu
adesso come: “La fai facile tu, fai siti da sempre”.
Quindi lo scopo finale di questo Report vuole essere una
semplice guida su come gestire il contenuto di un articolo,
senza conoscere elementi di programmazione (altrimenti il
titolo sarebbe stato: “Come programmare un sito….” ecc.)
Veniamo al sodo e iniziamo subito.
D: E’ troppo complicato, non capisco come utilizzarlo.
R: Se avrete ha disposizione 10 minuti (o meno) per leggere
fino in fondo questo Report vi renderete conto che in realtà è
molto semplice poter gestire i contenuti.
D: Non ho tempo
R: Scrivere un articolo per il vostro sito web non è mai una
perdita di tempo.
“La gestione dei contenuti di un articolo
in un sistema CMS è molto semplice
QUESTO QUI SOPRA
SONO IO
Mi chiamo Gioacchino Cipriano e
dal 1996 mi occupo di siti web.
Ho implementato siti web
conformi alla Legge Stanca
(4/2004) per la Pubblica
Amministrazione
Dal 2005 utilizzo per i siti dei
miei clienti principalmente due
CMS molto conosciuti come
Joomla! e WordPress.

3. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
TESTO ARTICOLI
Prima di proseguire è opportuno da parte mia fare una breve premessa.
Molti preferiscono scrivere i loro articoli in Word (o altro elaboratore di testi) prima di pubblicarlo
sul loro sito.
È bene sapere che questa prassi è da sconsigliare per un semplice motivo: perché devo fare un
doppio lavoro?
La tendenza è quella di rendere l’aspetto grafico direttamente in Word formattando ad esempio i
titoli, l’allineamento i grassetti ecc. e in un secondo tempo fare un copia e incolla da Word sul
proprio sito e accorgersi in quel momento che tutto il lavoro fatto in Word è stato inutile. Perché?
Il motivo principale è che l’HTML (HyperText Markup Language, letteralmente: linguaggio a
marcatori per ipertesti) è lo standard di codifica della formattazione usata sul web che mal
digerisce il codice di Word.

4. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Ecco come si presentano i paragrafi iniziali di questo capitolo con il codice di Word:
<h1><span style="color: #e76a1d;">Testo articoli</span></h1>
<p><span style="color: #404040;">Prima di proseguire è opportuno da parte mia fare una breve
premessa</span></p>
<p><span style="color: #404040;">Molti preferiscono scrivere i loro articoli in Word (o altro
elaboratore di testi) prima di pubblicarlo sul loro sito.</span></p>
<p><span style="color: #404040;">È bene sapere che questa prassi è da sconsigliare per un semplice
motivo: perché devo fare un doppio lavoro?</span></p>
E come invece in una corretta formazione HTML:
<h1>Testo articoli</h1>
<p>Prima di proseguire è opportuno da parte mia fare una breve premessa</p>
<p>Molti preferiscono scrivere i loro articoli in Word (o altro elaboratore di testi) prima di
pubblicarlo sul loro sito.</p>
<p>È bene sapere che questa prassi è da sconsigliare per un semplice motivo: perché devo fare un
doppio lavoro?</p>di codifica della formattazione usata sul web) mal digerisce il codice di
Word.</p>
Come potete notare nel codice HTML il testo è più pulito essendo stata rimossa le parti di codice:
<span style="color: #XXXXXX;"> e </span>. Immaginate un testo più lungo e quanto codice superfluo
viene rimosso, traducendosi una maggiore velocità di caricamento della pagina web.
PASSIAMO ALL’AZIONE
I più diffusi CMS per la pubblicazione di contenuti sono Joomla! e WordPress.
Normalmente gli editor si presentano con una barra degli strumenti e una serie di pulsanti di
formattazione del tutto simili a quelli che siamo abituati con il nostro editor di testi abituale che
sia esso Word, OpenOffice (ora LibreOffice) o altro.
Quindi il consiglio che do è quello di scrivere i propri articoli direttamente all’interno del proprio
CMS, eventualmente disabilitando la pubblicazione sino a quando non si abbia completato la
stesura dell’articolo
Vediamo quindi il comportamento dell’editor di Joomla! (non è un errore si scrive con il punto
esclamativo) che a differenza di quello di WordPress, è un po’ più avanzato, do per scontato che si
sappia come aprire l’editor del CMS (argomento che sarà oggetto di approfondimento in un altro
Report).

5. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
ECCO COME SI PRESENTA L’EDITOR STANDARD DI JOOMLA!.
Personalmente uso un altro editor (JCE), molto simile ma con una barra strumenti più avanzata.

6. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Utilizzerò ai fini delle spiegazioni in questo Report l’editor standard, che viene installato
automaticamente da Joomla!
L’Editor standard di Joomla! (TinyMCE) è lo stesso di quello utilizzato da WordPress, ma presenta
una barra degli strumenti con alcuni pulsanti di formattazione in più. L’editor è abbastanza
intuitivo, esso mostra infatti una barra degli strumenti del tutto simile a quella che siamo abituati
a vedere in Word o altro.
Qualche differenza possiamo riscontrarla ad esempio nella voce di menu “Inserire” che oltre a
permetterci di inserire immagini, ci consente di sfruttare altri formati (video, audio, collegamenti
ad altre pagine web ecc.).
Per i contenuti è sbalorditiva la semplicità, nella barra in alto dove viene indicato Titolo* (cosa mai
potremmo inserire?), si può sbagliare? Direi proprio di no.
Nell’area di testo (lo spazio bianco) inserirò il mio testo che sarà l’argomento principale della
trattazione in questo Report. Come lo gestisco?

7. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Prendiamo come testo d’esempio, quello riportato nelle righe della pagina precedente.
Per metterlo in evidenza ho visto alcuni scrivere tutto il testo in maiuscolo, in questo modo:
Come potete notare è piuttosto faticosa la lettura, non ci permette di distinguere le parole
fondamentali, la punteggiatura ecc. che ci faccia interpretare meglio la lettura.
Un altro errore abbastanza frequente è quello di non far “respirare” l’articolo:
Mettetevi nei panni di chi legge i vostri articoli, non avrà fiato abbastanza per arrivare alla fine
dell’articolo.

8. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Una buona prassi è quindi di interrompere l’articolo, formando dei paragrafi (andando a capo ogni
4/5 righe), in questo modo chi legge individua meglio i vari paragrafi consentendogli di assimilare
meglio il contenuto del vostro articolo, come potete ben vedere nell’esempio successivo.
L’immagine qui sopra mostra il nostro testo come lo vediamo nel backend del nostro sito mentre lo
stiamo scrivendo.
Nella pagina successiva, invece come viene visto dagli utenti del sito:

9. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
PERCHÉ VIENE VISTO IN MODO DIVERSO?
Quando si scrive un articolo per il Web, occorre tener presente che lo stile generale deve avere una
certa uniformità con tutte le sezioni del sito, pertanto l’aspetto finale che devono avere gli articoli
è già prefissato a monte.
Ciò significa che ogni autore di articoli non deve preoccuparsi ad esempio di dare una spaziatura
tra un paragrafo e l’altro, di fornire un colore ai titoli ecc.
Nell’esempio vediamo che il titolo: “Lorem ipsum dolor sit amet” ha già le sue caratteristiche di
formattazione H1 (o Intestazione 1), senza necessità di essere specificato da parte nostra:
dimensione, colore e tipo di carattere ecc. sono predefiniti (nel cosiddetto foglio di stile) dal web
designer, mentre per “Sed fringilla mauris” ad esempio è stato impostato dall’autore dell’articolo
la formattazione H2 (o Intestazione 2), tramite il menu a tendina dell’editor.

10. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
I vantaggi che si ottengono con l’adozione dei fogli di stile sono
diversi.
Ridurre al minimo la formattazione da parte degli autori
 Grassetto
 Corsivo
 Titoli (da Intestazione 1 a Intestazione 6)
Se un giorno volessi cambiare aspetto al sito non avrei necessità
di modificare tutti gli articoli presenti, ma è sufficiente cambiare
le impostazioni del foglio di stile e in un attimo tutti gli articoli
ereditano la nuova formattazione.
Non sono io che definisco l’aspetto del sito, ma il web designer
Mi concentro solo sul testo e non sui colori o la grandezza del
carattere ecc.
 A quale parola dare un po’ di enfasi (grassetto, corsivo).
 Inserimento media (Immagini, video ecc.)
Nell’esempio successivo, cambiando il foglio di stile generale del sito,
i contenuti non hanno subito modifiche, ma l’aspetto assume le
impostazioni che sono state definite nei fogli di stile.

11. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Se un giorno volessi cambiare aspetto al sito non avrei necessità di
modificare tutti gli articoli presenti, ma è sufficiente cambiare le
impostazioni del foglio di stile e in un attimo tutti gli articoli
ereditano la nuova formattazione.
Per finire una piccola informazione, per chi proprio non può fare a meno di fare copia e incolla da
Word. L’editor standard di Joomla! è in grado automaticamente di rimuovere la formattazione di
Word, lasciando inalterata la spaziatura dei paragrafi e i titoli (anche altri editor hanno questa
funzione, ma spesso richiedo un passaggio in più).
È bene sapere che i titoli (ad eccezione del titolo dell’articolo) vanno specificati dall’autore,
utilizzando il menu a tendina (ad eccezione di Intestazione 1, utilizzato dal titolo dell’articolo)
seguendo uno schema simile:
Intestazione 2
Testo……….
Intestazione 3
Testo……….
Intestazione 4
Testo……….
Non è necessario utilizzare tutte le Intestazioni, ma usare una sequenza logica di importanza dei
titoli (Intestazioni).
ULTIMA COSA CHE VORREI TRATTARE IN QUESTO REPORT RIGUARDA LE IMMAGINI, COME SI
INSERISCONO E COME FORMATTARLE?
Inserire un’immagine in un articolo è un operazione alquanto semplice che si esegue in semplici
pochi passaggi.

12. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Innanzitutto l’immagine non deve avere un peso in Kb molto elevato (vedremo in un altro Report
come ottimizzarle), questo per non incidere sul tempo di caricamento della pagina.
Per inserire un immagine nell’editor di Joomla! è presente, alla sua base, il pulsante Immagine.
Alla pressione del pulsante Immagine si aprirà la finestra seguente:
La finestra apre di default la cartella predefinita delle immagini, dove saranno presenti anche le
sottocartelle che abbiamo creato per catalogare e gestire meglio le immagini.

13. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Qui è possibile scegliere un’immagine già caricata (dalla cartella principale o da una sottocartella)
oppure caricare un nuovo file immagine tramite la voce in basso a sinistra Carica file, scegliendo
eventualmente prima in quale cartella effettuare l’upload.
Nel nostro caso scegliamo una immagine già caricata, appena selezioniamo l’immagine vedremo
che si compilerà automaticamente il campo URL immagine. Non ci resterà, infine, che compilare
alcune opzioni che consiglio.
I campi che consiglio di compilare sono:
 L’URL è automatica
 Titolo immagine
 Descrizione
immagine (testo alternativo
che viene visualizzato
quando per qualche motivo
l’immagine non viene
mostrata).
 L’allineamento

14. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Per rendere graficamente più carina la visualizzazione dell’articolo con l’immagine, potrebbe
essere necessario apportare alcune modifiche nel seguente modo:
Cliccare sull’icona modifica immagine che troviamo sulla barra degli strumenti appena sotto a
sinistra la voce paragrafo
Cliccando sull’icona verrà aperta una finestra di modifica:
Nelle impostazioni generali
delle immagini è importante
definire la dimensione
nell’esempio 300 e spuntare
la voce Mantieni Proporzioni
Nella modifica avanzata, per evitare che l’immagine rimanga attaccata al testo del nostro
articolo, è opportuno impostare lo Spazio Verticale (nell’esempio 2) e lo Spazio Orizzontale
(nell’esempio 10).
Il campo Stile visualizza
automaticamente il codice che
verrà applicato all’immagine
(spazio verticale e
orizzontale).

15. www.cmsacademy.it
[Come scrivere e formattare un articolo per il tuo sito in 10 minuti o meno]
Con le modifiche apportate all’immagine la visualizzazione agli utenti del vostro sito sarà simile a
quella che vediamo qui sotto, tenendo conto che l’aspetto finale potrà essere diverso in funzione
anche dei fogli di stili applicati al sito
A conclusione di questa prima parte, ricordo che nelle prossime settimane verrà pubblicato un
nuovo Report di approfondimento sul CMS Joomla! sulla ottimizzazione delle immagini.
Questo Report è un estratto del corso completo (Webinar):
“Come creare la tua attività realizzando siti web per i tuoi clienti con 50 minuti al giorno!”