3 risorse per aiutarti a scrivere e formattare un articolo nel modo giusto

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.

[Fare clic qui per aggiungere una didascalia]

http://www.cmsacademy.it/

www.cmsacademy.it


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.


www.cmsacademy.it


Ecco come si presentano i paragrafi iniziali di questo capitolo con il codice di Word:

<h1>Testo articoli</h1>

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?

E come invece in una corretta formazione HTML:

<h1>Testo articoli</h1>

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?di codifica della formattazione usata sul web) mal digerisce il codice di

Word.

Come potete notare nel codice HTML il testo è più pulito essendo stata rimossa le parti di codice:

 e . 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).

www.cmsacademy.it


ECCO COME SI PRESENTA L’EDITOR STANDARD DI JOOMLA!.

Personalmente uso un altro editor (JCE), molto simile ma con una barra strumenti più avanzata.


www.cmsacademy.it


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?


www.cmsacademy.it


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.


www.cmsacademy.it


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:


www.cmsacademy.it


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.


www.cmsacademy.it


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.


www.cmsacademy.it


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.


www.cmsacademy.it


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.


www.cmsacademy.it


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


www.cmsacademy.it


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).


www.cmsacademy.it


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!”


3 risorse per aiutarti a scrivere e formattare un articolo nel modo giusto

Internet