ItCMS: un Content Management system Open source.

Di Massimo Corti.

Tredicesima parte.

`*********`

Premessa: ho scritto questa parte, in seguito ad una richiesta di collaborazione da parte di Nunziante Esposito, che da alcuni mesi si sta occupando della stesura di un tutorial, per indirizzare anche i disabili visivi all'utilizzo di questo CMS. Tale richiesta, in seguito ad una mia critica costruttiva e dopo aver dato la mia disponibilit a collaborare.

Dato che io stesso sto realizzando il mio sito web personale  con l'utilizzo di questo valido strumento, e visto e considerato che nelle precedenti lezioni di questo tutorial si  dedicata ampia parte all'installazione e configurazione dei vari moduli del CMS, ho ritenuto utile redigere questa parte, per dare una mano a Nunziante che, per completezza di informazioni e per omogeneizzare la trattazione, lo ha completato nelle parti in cui ha ritenuto fosse necessario.

In questa parte si daranno indicazioni pratiche sull'inserimento dei moduli "Pagina Vuota" e "HTML". In entrambi i casi, si tratta di una pagina vuota, cio spoglia di qualunque carattere, che consente, la prima a chi  molto pratico di XHTML e PHP,  e la seconda anche a chi non conosce tali linguaggi e tramite l'editor di ItCMS, di formattare testo, inserire immagini ed oggetti multimediali sul sito, al fine di fornire una certa veste grafica personalizzata.

 Lo scopo  solo quello di anticiparne la trattazione che Nunziante non ha ancora affrontato, solo per la complessit stessa dell'argomento, ma che  di una certa importanza in questo tutorial e serve per completare ulteriormente le trattazioni precedenti, in modo da poter rendere pi belli i siti anche quando costruiti da un disabile visivo.

L'installazione di questi due moduli  uguale a quella vista per tutti gli altri moduli gi installati e descritta da Nunziante in precedenza. Si rimanda a quelle parti del tutorial per le procedure di installazione.

Il modulo "Pagina vuota", una volta installato, si pu richiamare dal menu nel quale  stato inserito e la cui etichetta  stata da noi scelta in fase di installazione. Una volta che si  aperta la pagina, ovviamente vuota,  dando invio  sul link "Admin modifica", presente ad inizio della pagina, si pu modificare la pagina come visto in precedenza per la home page. Quindi, conoscendo PHP e XHTML, si pu inserire codice PHP ad inizio e fine pagina, e codice XHTML tra i due blocchi di PHP. La pagina, come si pu vedere,  uguale alla home page. Generalmente si usa questo tipo di pagina quando si vuole costruire la pagina principale di una nuova sezione del sito, anche per poter inserire i blocchi, altre funzionalit per il sito che vedremo in seguito.

Il modulo "HTML", invece, installa una pagina vuota nella quale si pu inserire solo codice XHTML, per cui  sconsigliato installare questo modulo se si intende inserire anche codice PHP. Per, il vantaggio di questo tipo di modulo, sta nel fatto che ci consente di usare l'editor di ItCMS e quindi, consente anche a noi disabili visivi di poter formattare la pagina a nostro piacimento ed inserire anche oggetti multimediali. Si avverte per, che usare questo modulo per tutte le pagine del sito  come quando un sito lo si costruisce manualmente con qualsiasi altro sistema o software, perdendo la comoda funzione della dinamicit di un CMS. Questo modulo serve ad inserire pagine statiche che servono a completare un sito con cose che il CMS non consente di fare.

Anche il modulo "HTML" viene richiamato con il link apposito dal menu nel quale lo abbiamo inserito. Una volta che si  aperta la pagina vuota, sempre con il link "Admin modifica" presente ad inizio pagina, si modifica la pagina per la quale, ripeto, si pu usare solo codice XHTML.

Vediamo ora come poter inserire degli oggetti multimediali nelle pagine gi installate con il modulo "HTML" e che Nunziante, per non complicare la trattazione, intenzionalmente, non aveva spiegato nelle parti gi pubblicate su questo giornale. Si tralascia la fase di login, in quanto  logico che per eseguire modifiche al sito bisogna essere nel pannello di amministrazione.

INSERIMENTO DI IMMAGINI.
______________________________

Per prima cosa, portiamoci nella pagina dove vogliamo caricare un'immagine a corredo dei nostri testi.

Una volta all'interno, diamo invio sul link "Admin Modifica" presente accanto all'intestazione della pagina per accedere all'area di modifica della nostra pagina da modificare.

Si aprir la schermata di modifica della pagina corrente, infatti noteremo che  apparso un Titolo in grande dopo i soliti link, che riporta la scritta "Edita la pagina" e il nome della pagina. 

Immediatamente sotto questo titolo, raggruppati su alcune file disposte in orizzontale sullo schermo, sono apparsi dei link, nominati ognuno come i pi comuni tag dell'HTML e che possiamo selezionare con le frecce o con il tasto tab. Non sono altro che i comandi dell'editor e servono per formattare, quindi per attribuire uno stile personalizzato alle nostre pagine. Si possono usare questi link per   impostare tipo e dimensione del carattere, allineamento e altre formattazioni del testo, ma anche inserire oggetti grafici come immagini, presentazioni multimediali, suoni di sottofondo eccetera.

Nota bene: la funzione d'inserimento automatico dei tag, ovvero l'editor di tag HTML,  prevista anche nei pi comuni editor web. (Vedi Frontpage, di Microsoft, o DreamWeaver di Adobe). L'unica differenza  che in questo CMS, l'editor  accessibile anche ad un cieco assoluto.

Ecco un elenco dei tag presenti:

- "B" di BOLD.
- "U" di UNDERLINE.
- "I" di ITALIC.
- "L" di LEFT.
- "C" di CENTER.
- "J" di GIUSTIFY.
   
Con questi link si potranno ottenere molti effetti che arricchiranno le nostre pagine inserendo i tag adatti che daranno un migliore impatto visivo e rendendo pi piacevole la lettura del contenuto delle pagine.

L'uso  molto semplice, come spiegato anche in accenni precedenti, quindi, per l'uso dell'editor non abbiamo nessuna difficolt nemmeno come ciechi assoluti. Infatti, per formattare un testo con uno di questi comandi, basta che durante la digitazione o dopo la digitazione usiamo questi link. Faremo come segue:

1. Prima della digitazione di un testo che vogliamo formattare, mettiamo in elenco i link con insert pi F7, scegliamo uno dei link suddetti premendo la lettera corrispondente, e premiamo invio. Sul testo che stavamo scrivendo, appaiono i due tag per la formattazione. Basta scrivere il testo tra i due tag e tale testo sar formattato come da noi desiderato. Ripetiamo questa operazione mentre continuiamo a digitare testo sulla pagina.

2. Formattazione dopo aver digitato del testo. Se abbiamo gi digitato il testo e lo vogliamo formattare in un certo modo con i comandi suddetti, lo dobbiamo selezionare con i soliti comandi. Una volta selezionato il testo, mettiamo in elenco i link con insert pi F7, scegliamo il comando con la lettera corrispondente e  premiamo invio. Prima e dopo il testo da noi preventivamente selezionato, vengono inseriti i due tag per la formattazione, come si pu constatare rileggendo il testo.

Non ci soffermeremo molto sull'utilizzo di questi tag di formattazione, in quanto il loro utilizzo  molto intuitivo e se si sa come si deve formattare il testo per abbellire le pagine, si useranno facilmente i comandi per inserirli, quindi, di seguito ci soffermeremo un po' di pi sui tag relativi all'inserimento di immagini ed oggetti multimediali che sono:

- "IMG", inserimento di una immagine gi presente sul sito nella cartella delle immagini.
- "GEST_IMG", gestione dell'inserimento di una immagine, prelevandola dal computer, se il provider del sito lo consente, oppure inserire una immagine gi presente sul sito nella cartella delle immagini.
- "GEST_IMG", inserimento di presentazioni multimediali, file SWF.
- "GEST_IMG", inserimento di file musicali come gli MP3.
- "GEST_IMG", inserimento filmati compressi quali per esempio i DVX.
- "GEST_IMG", inserimento di file di testo compressi quali zip, rar, eccetera.

Con il link "Img",  possibile inserire un'immagine, sia essa JPG, JPEG o GIF. 

Attenzione: Utilizzando questo link si potranno caricare nella pagina solo le immagini gi presenti sul server. Ovvero le immagini che abbiamo gi copiato in precedenza nella cartella  "Img" nella rooth del sito quando l'abbiamo installato per la prima volta sia in locale, sia su uno spazio web. Infatti noteremo che appare il messaggio"Inserisci url immagine".

Possiamo verificare le immagini gi presenti nella cartella sul server, in quanto vengono visualizzate come link. Tali link, servono per inserire il codice corrispondente a quella immagine nella pagina che stiamo costruendo, semplificando moltissimo il nostro lavoro.
 
Se l'immagine non fosse presente nella cartella principale, e per accertarcene potremmo fare un'ulteriore verifica aprendo il sito web dall'indirizzo FTP, dovremo inserirla nella pagina caricandola direttamente dal nostro computer.

Per, utilizzando i tag successivi, ammesso che il provider di gestione dello spazio web ce lo consente, possiamo caricare direttamente le foto e altri elementi multimediali con i comandi che l'editor ci consente e che vediamo di seguito. Essi sono, come visto nella lista suddetta, cinque link  "GEST_IMG".

Il primo link fa aprire una finestra di dialogo "Inserisci immagine". Dando invio sul pulsante  "Sfoglia",  possibile selezionare il file immagine che si vuole inserire, cercandolo tra quelli presenti sull'hard-disk del nostro computer. Una volta identificato il file ed inserito il relativo percorso nell'apposito campo editazione, spostandoci con TAB, scorreremo gli altri comandi presenti che sono:

- "Testo alternativo",:  un campo editazione dove potremo inserire il testo descrittivo per la nostra immagine.
- "upload", casella di controllo sulla quale premeremo SPAZIO per attivarla.
- "sovrascrivi",  una casella di controllo che dovremo attivare solo se l'immagine da noi inserita dovr sostituire una immagine gi presente nella cartella immagini.
- "allinea immagine", la casella combinata con la quale possiamo scegliere l'allineamento dell'immagine. Le scelte disponibili sono: "NONE", "Left" e "Right".

Attenzione:

- Il parametro relativo alla posizione  ovviamente un attributo di stile che verr scritto sulla pagina, prelevandolo  dal nostro CSS. Pertanto, impostando LEFT, le foto si allineano a sinistra del testo e il testo scorre attorno alle foto, dando un buon impatto visivo. La stessa cosa avviene per l'allineamento a destra.
- Aver cura di inserire un doppio ritorno a capo ``"<br />"`` dopo il testo che precede l'immagine.
- Per fare una cosa perfetta, bisogna aggiungere al tag di style i margini, al fine di lasciare uno spazio tra il testo e l'immagine, per non creare problemi di lettura.
- Per una immagine allineata a sinistra, occorre inserire di seguito allo style "float:left;" i margini adatti, per cui il testo sar modificato in questo modo: "float: left; margin-right: 1em; margin-bottom: 1em;".
- Se l'allineamento  stato scelto a destra, "float: right;" la modifica sar: "float: right; margin-left: 1em; margin-bottom: 1em;".
- Nel caso si scegliesse none, lo stile non viene applicato e l'immagine viene impaginata secondo le impostazioni automatiche del CMS e secondo lo stile indicato per la pagina nel CSS.

Nel campo successivo "Seleziona directory", si possono scorrere i file gi presenti sul server nella cartella IMG prevista per il corretto funzionamento del sito stesso . Sempre con tab, scorriamo tutti i controlli restanti:

- "Uploada e carica immagine",  un pulsante sul quale premeremo INVIO per caricare l'immagine sul server.
- "seleziona directory",  una casella di controllo con la quale possiamo scegliere in quale cartella del server contenuta nella cartella "IMG" delle immagini, caricare il file. E' selezionata la cartella upload, quindi, non dobbiamo cambiare nulla in quanto  proprio quella la cartella nella quale il CMS colloca le immagini, una volta caricata sul server. Questo  anche l'ultimo controllo presente nella finestra. Infatti muovendoci sempre con TAB esploreremo le immagini gi presenti sullo spazio web, quindi quelle gi caricate nella cartella upload.

- Infine troveremo il link INSERISCI. Premendo invio su questo link, termina la procedura, l'immagine viene caricata nella cartella scelta e si chiude la finestra di dialogo, ritornando sulla pagina che stiamo costruendo.

Per essere certi che tutto sia stato eseguito correttamente, verifichiamo che, nella finestra dove stiamo scrivendo il codice della pagina, appare il tag  "<img" con tutta la stringa relativa allo style, al percorso del file immagine e l'attributo "Alt", all'interno del quale dovr apparire il testo alternativo da noi scritto.

La prima cosa, notiamo che qualora si voglia inserire un oggetto, esso viene collocato infondo alla pagina, precisamente subito dopo l'ultimo testo scritto.

Se volessimo, ad Esempio, spostare l'immagine in un altro punto della pagina, basta selezionare la stringa di codice relativa all'immagine, che in genere inizia con l'apertura del tag "<img" e si conclude con il nome del file tra virgolette ed il simbolo di maggiore, selezionare tale testo, tagliarlo ed incollarlo dove desideriamo, con i consueti comandi TAGLIA e INCOLLA.

Nota bene: prima del simbolo maggiore di chiusura del tag "IMG"  occorre inserire uno spazio e una barra, per completare e rendere conforme il tag per l'XHTML. La barra  quella che sta sul sette della tastiera estesa.

INSERIMENTO DI FILE AUDIO, PRESENTAZIONI E OGGETTI MULTIMEDIALI
________________________________________________________________

Procedendo nell'esplorazione dei tag, notiamo che il tag "GEST_IMG"  replicato per altre volte. Per i neofiti di questa avventura, vorrei segnalare che questi tag, legati all'inserimento di file audio, piuttosto che presentazioni o file compressi, sono una novit davvero innovativa, introdotta con la versione 1.9 di questo CMS.

Se premiamo invio sul secondo tag "GEST_IMG", appare una finestra di dialogo simile alla precedente, con la differenza che ora  relativa all'inserimento di presentazioni Flath. Infatti, il titolo della finestra riporta la dicitura "Inserisci presentazione SWF". Anche i pulsanti che incontriamo sono gli stessi della precedente schermata, quindi, inutile ripeterli. La procedura di inserimento dell'oggetto  analoga alla precedente.

Se premiamo invio sul terzo link "GEST_IMG", apparir la finestra con la dicitura "Inserisci file MP3". Con questo link  possibile inserire un file audio che verr mandato in esecuzione ogni volta che accederemo a questa pagina.

Come per le immagini e le presentazioni, anche per il file audio, per poterlo scegliere dal nostro hard disk e caricarlo sul server dovremo premere invio sul pulsante SFOGLIA ed attivare il pulsante "Upload" che aprir la solita finestra seleziona file". Una volta identificato il file sul nostro hard-disk ed aver inserito un testo alternativo nell'apposito campo che descriva il file multimediale inserito, premeremo come di consueto il pulsante "uploada e carica mp3".

Attenzione: prima di premere invio sul pulsante upload, come gi visto per l'immagine,  bene inserire un testo alternativo che riporti ad esempio il nome del file audio inserito.

Una volta conclusa l'operazione, possiamo verificare che tutto sia andato a buon fine verificando il codice della pagina come abbiamo gi fatto con l'immagine. Nella finestra di codice che appare, spostandoci come di consueto infondo al file, troviamo la stringa di codice con degli script che servono a lanciare in esecuzione il file audio.

Sembrerebbe tutto corretto, ma in realt, il lavoro non  concluso. Infatti, se proviamo ad accedere al link come se stessimo compiendo una normale navigazione all'interno del sito, notiamo che il file audio non parte come programmato. Questo perch dobbiamo modificare, facendo attenzione, il codice che l'editor di ItCMS ha inserito nella pagina.

La stringa di codice script, che  racchiusa in un contenitore tag "<div", deve essere modificata come segue:

nel mio caso la stringa riporta:

``<div align="center"``
 
``<embed type="application/x-mplayer2"``

``Pliginspage=http://www.microsoft.com/windows/MediaPlayer/``

``Name="mediaPlayer1" width="320" height="24" autostart="1"``

Ci sarebbero altre due righe relative all'impostazione volume e all'impostazione di alcuni controlli che per i nostri scopi non  indispensabile approfondire, comunque per far s che il file audio o lo sfondo musicale che abbiamo impostato parta all'apertura del link o del menu, dobbiamo controllare che nella quarta riga di codice, e precisamente nella riga dove  riportato il nome del programma player predefinito sul nostro PC, in questo caso Windows Media Player,  " dove  riportata la stringa:
Name="mediaPlayer1" width="320" height="24" autostart="1", nel parametro autostart vi sia un valore numerico, ad es. 1.

Infatti, di default  riportato il valore "0", che dobbiamo avere la cura di verificare e di cambiare. Con la modifica suddetta, lo sfondo musicale si ascolter ogni qualvolta accederemo alla pagina con il link apposito. Lo sfondo musicale si pu gestire anche con l'attributo "loop" che consente di gestirne le eventuali ripetizioni.

CARICAMENTO DI FILE COMPRESSI
______________________________

Dando invio sul quarto link "GEST_IMG",  possibile caricare documenti Word o PDF compressi. Leggendo attentamente la finestra di dialogo che appare, noteremo che sono riportati anche i tipi di formati di compressione supportati. Essi sono:

- "ZIP".
- "RAR".
- "TAR".
- "GIZ".

Anche in questa finestra, sono presenti gli stessi comandi presenti nelle altre che abbiamo descritto sin qui.

Notiamo il primo controllo, che  un campo editazione dove potremo inserire il nome che verr visualizzato per il nostro documento. C' il pulsante "Sfoglia" che utilizzeremo per indicare il file da caricare. La casella di controllo per eseguire l'upload, che  necessario attivare. Inoltre, ci sono i pulsanti "upload", "sovrascrivi", la casella "allinea immagine", per allineare nella pagina l'icona del file, ed infine il pulsante "Seleziona directory".

Sia i pulsanti suddetti, sia la procedura d'inserimento dell'oggetto, sono identici ai casi descritti in precedenza ed inoltre molto intuitivi.

INSERIMENTO DI OGGETTI VIDEO
______________________________

Dando invio sul quinto tag "GEST_IMG", noteremo dal titolo della finestra, che  relativo all'inserimento di oggetti video. I formati supportati sono:

- "VIDEO".
- "AVI".
- "DVX".

La procedura di inserimento dell'oggetto  identica ai precedenti. Infatti,  selezionando il file desiderato, attivando la casella di controllo "upload", inserendo una didascalia per l'oggetto multimediale inserito,  possibile, come per gli altri casi, impostare l'allineamento dell'oggetto che verr visualizzato nella pagina, grazie al testo alternativo inserito.

Abbiamo concluso l'esplorazione delle possibilit di gestione delle immagini e degli oggetti multimediali offerte da questo CMS, quindi, non ci resta che dire che se si vuole gestire al meglio questo tipo di pagine,  indispensabile conoscere almeno i rudimenti dell'HTML, per non commettere errori, soprattutto quando si spostano i codici che il CMS genera in automatico.

Avete sicuramente notato la maneggevolezza di questo strumento che consente di poter dare un certo style grafico e multimediale al sito, abbattendo il preconcetto errato che un sito, costruito da un disabile visivo, debba per forza essere scarno di contenuti multimediali.

Ringrazio Nunziante per tutte le integrazioni che ha giustamente inserito nel testo che ho scritto.

`**************`

Per eventuali chiarimenti, scrivere a: `Massimo Corti. geremy83@virgilio.it`_

