Joomla Tutorial: inserimento articoli con foto, con Jce 24

Questo tutorial introduce alla principale funzione di Joomla: l’inserimento di articoli con foto. Si tratta poche nozioni basilari, per permettere a chiunque amministri un sito realizzato con Joomla di aggiornarlo senza avere particolari conoscenze di programmazione. Abbiamo preso in considerazione la versione di Joomla con JCE 24 come editor di articoli, in quanto ci sembra una delle soluzioni più complete e intuitive per gestire i contenuti.

La prima cosa da fare è selezionare Nuovo articolo dal menù principale di Joomla!

Clicca "Nuovo articolo"

Clicca "Nuovo articolo"

A questo punto vi comparirà la schermata standard di inserimento.

Schermata di inserimento

Schermata di inserimento

Facciamo una panoramica delle voci principali. In alto a sinistra identifichiamo la nostra posizione (Articolo, ovvero la sezione per l’inserimento degli articoli). In alto a destra si vedono cinque funzioni principali: Anteprima (che ci permette di vedere come apparirà l’articolo senza pubblicarlo); Salva (che permette di salvare l’articolo nel sito, ma esce dalla pagina di inserimento); Applica (che salva eventuali modifiche senza uscire dalla pagina); Annulla (che permette di uscire dalla pagina senza effettuare alcuna modifica); Aiuto (che fornisce una guida rapida ed essenziale).

Sottostanti si vedono i principali dati identificativi dell’articolo: Titolo (non ha bisogno di spiegazioni); l’Alias (è parte di ciò che verrà visualizzato nell’url della pagina, e viene ricavato in automatico dal titolo; è formattato minuscolo e al posto degli spazi ha l’underscore, “_”).

A fianco ci sono due indicatori di stato: Pubblicato (se l’articolo è effettivamente pubblicato, e quindi visibile dagli utenti del sito) e Prima pagina (se si vuole visualizzare l’articolo nella prima pagina del sito). Il settaggio di base di questi due valori è rispettivamente si e no. Se si ha necessità di lavorare su un post senza renderlo visibile nella pagina (perché si aspetta una correzione da parte degli amministratori, perché si vuole aggiungere qualcosa successivamente…) è necessario spuntare “no” nello stato di Pubblicato. Una volta che l’articolo sarà pronto si potrà cambiare questo stato in “si”.

Ancora sotto sono visibili i selettori di Sezione (raggruppamento tematico dei post) e Categoria (ulteriore raggruppamento, sottoinsieme di Sezione).

Procediamo ora all’inserimento dei testi. L’area del Body (corpo del testo) è sottostante a una serie di tasti di funzione che ricordano un po’ quelli di Word e Writer: hanno infatti lo stesso scopo (e in alcuni casi lo stesso aspetto ed effetto).

Tasti funzione (giallo); Corpo del testo (verde)

Tasti funzione (giallo); Corpo del testo (verde)

Si può ingrandire la finestra di scrittura cliccando e trascinando l’angolo in basso a destra della stessa:

Ridimensione l'area di inserimento del testo

Ridimensione l'area di inserimento del testo

A questo punto non ci resta che scrivere il testo dell’articolo nel relativo spazio di inserimento. Questa procedura è simile a quella di qualsiasi altro elaboratore di testi.

Il più delle volte l’articolo da inserire è già stato scritto con un altro programma: word, writer o pages (per esempio). Tutto ciò che si deve fare a questo punto è copiarlo e incollarlo nello spazio del corpo di testo. La difficoltà di questo passaggio sta nella formattazione (carattere, paragrafo…) che viene impartita dal programma usato.

È consigliabile mantenere tutti gli articoli del sito puliti e simili tra di loro, uniformando la tipografia e le impostazioni di carattere. Per fare questo bisogna annullare la formattazione originaria, o subordinarla a quella del sito. Si può fare in due modi:

Il primo sistema, infallibile, consiste nell’incollare il testo prima su un blocco note (o l’equivalente del vostro sistema operativo): la formattazione verrà completamente cancellata diventando solo caratteri e spazi (come ogni buon txt).

Il secondo sistema consiste nell’incollare il testo tramite la funzione Paste as plain text (vedi immagine a seguire): il testo sarà quindi incollato con lo stesso principio, annullando ogni parte della formattazione del programma da cui è stato copiato.

Funzione "paste as plain text"

Funzione "paste as plain text"

È anche possibile incollare il testo cercando di mantenere la formattazione originaria di Word. Per fare ciò bisogna usare un tasto di funzione creato appositamente: Paste from word (Word usa un codice di formattazione personale, particolarmente antipatico a tutti gli altri, in particolar modo quello usato in genere nel web).

Funzione "Paste from Word"

Funzione "Paste from Word"

In qualsiasi modo abbiamo deciso di procedere per inserire il testo avremo ora un corpo (body) dell’articolo, come si può vedere a seguito:

Testo inserito

Testo inserito

Gli articoli che contengono solo ed esclusivamente testo sono poco accattivanti, o magari avete necessità di postare un articolo composto soprattutto - o esclusivamente - da foto. Qualsiasi sia il motivo, la funzione di inserimento immagini nelle pagine web è di grande importanza; con Jce 24 diventa anche facile e intuitiva. Procediamo selezioniamo l’apposito tasto funzione (insert/edit image) dal menù:

Funzione "insert/edit image"

Funzione "insert/edit image"

A questo punto comparirà la finestra di inserimento immagini. Le cose che ci interessano di più in questa area sono: la colonna centrale (il database di immagini che sono già presenti nell’archivio del sito); il tasto di inserimento immagini da disco fisso (dove selezioneremo immagini nuove da implementare nell’archivio del sito).

Schermata inserimento immagini

Schermata inserimento immagini

Dopo aver selezionato il tasto di inserimento da HD comparirà una finestra più piccola con le relative funzionalità di inserimento. Procediamo cliccando sul tasto Add.

Cliccate "Add"

Cliccate "Add"

Si aprirà un’ulteriore finestra dove potremo selezionare e aprire i file da tutti volumi che sono montati sul nostro computer. Selezioniamo quindi il file dell’immagine e apriamolo.

Seleziona l'immagine

Seleziona l'immagine

Il file comparirà nell’elenco della finestra precedente. A questo punto dovremo cliccare su Upload per caricarlo nel archivio residente del sito su cui stiamo lavorando (e qui rimarrà finché non decideremo di cancellarlo).

Clicca "Upload"

Clicca "Upload" per carica l'immagine nel sito

Dopo aver atteso la fine del caricamento ci troveremo nella prima finestra, con il file di immagine appena selezionato. A questo punto procediamo cliccando sul tasto Insert, l’immagine sarà posizionata di seguito al testo (o comunque dove si trovava il cursore).

È possibile selezionare l’immagine anche dal database, cercandola tra le cartelle a disposizione, come su un normale hardisk. Anche in questo caso selezionare il file e cliccare il tasto Insert per consentire l’inserimento.

Lightbox. Se la funzione Lighbox è attivata nel modulo di Joomla che state usando è possibile modificare la grandezza dell’immagine visualizzata nell’articolo. Per fare ciò si riassegna il valore di altezza o larghezza in pixel negli appositi riquadri: il programma manterrà in automatico le proporzioni dei due valori. La foto visualizzata nella finestra di Lightbox (l’immagine che compare in sovrimpressione) proporrà l’immagine nelle sue dimensioni originali.

Consiglio. In ogni caso è consigliabile limitare la larghezza in pixel delle immagini originali inserite a 750 pixel. Questo per due motivi: esistono ancora monitor con risoluzione 800×600, ed è consigliabile strutturare un sito rispettando le esigenze del maggior numero di computer; inoltre, inserire immagini a risoluzione ridotta permette anche di tutelare il copyright della stessa foto (una larghezza di 750 è molto scarsa per le esigenze di stampa, per esempio).

Nella finestra di inserimento sono ancora visibili Url (titolo e percorso del file), Alternate text (il testo che compare nel box passando col cursore sopra all’immagine) oltre che le impostazioni di allineamento dell’immagine ed eventuali bordi.

Inserisci l'immagine (verde); Ridimensiona l'immagine (giallo)

Inserisci l'immagine (verde); Ridimensiona l'immagine (giallo)

Ecco l’immagine selezionata che ora è inserita all’interno dell’articolo!

A questo punto è ancora possibile modificare posizione, formattazione e grandezza dell’immagine, come visualizzata sulla pagina: si altera la grandezza cliccando e trascinando un angolo dell’immagine fino alla dimensione voluta (la proporzione è mantenuta di default). É inoltre possibile selezionare la foto e deciderne l’allineamento come se si trattasse di un paragrafo di testo: sinistra, centrale, destra.

Ridimensiona immagine (giallo); Allinea l'immagine (verde)

Ridimensiona immagine (giallo); Allinea l'immagine (verde)

In un sito in cui li aggiornamenti delle news sono parecchi, se vi vuole evitare di far vedere un lungo elenco di articoli interi - magari molto corposi - è possibile decidere di tagliare il pezzo e far visualizzare solo una breve anteprima (il lead). Per fare ciò è sufficiente inserire un punto di Leggi tutto all’interno del testo. Posizionate il cursore dove intendete tagliare l’articolo (da quella posizione in poi il pezzo sarà visibile solo selezionando Leggi tutto dalla pagina) e cliccate nell’apposito tasto nel menù delle funzioni (in inglese article.readmore“:

Funzione "Leggi tutto" (article.readmore)

Funzione "Leggi tutto" (article.readmore)

Impostazioni di default. Il webmaster del sito può comunque settare per ogni singolo utente alcune impostazioni standard, rendendo automatiche molte delle operazioni che abbiamo appena spiegato: inserimento automatico del Leggi tutto dopo una certa quantità di caratteri; formattazione dell’immagine che viene visualizzata nella pagina in base a un foglio di stile predefinito (esempio: larghezza 120 pixel, allineata a sinistra con margine a destra e in basso di 10 pixel). Questo facilita e rende più veloci e intuitive le operazioni, adattandosi alle esigenze di qualsiasi amministratore e utente attivo del sito.

Ricordate sempre di salvare il vostro lavoro in modo regolare, soprattutto se molto lungo: usate il tasto Applica per salvare le modifiche senza uscire dalla pagina, o Salva per conservare le modifiche e uscire dalla pagina. Una volta finito modificare lo stato di Pubblicato in “si” e salvate.

Curiosità. È possibile modificare gli stati di Pubblicato e Prima pagina anche dal menù generale di Gestione articoli (vedi prima immagine di questo tutorial). Dallo stesso menù è possibile accedere agli articoli salvati e modificarli.