ItCMS: un Content Management System Open source.

Di Nunziante Esposito.

Quinta parte.

`*********`

Dopo aver impostato il layout generale del nostro sito, in questa quinta parte vedremo come modificare direttamente dal pannello di amministrazione il corpo della home page del sito, quella sorta di presentazione che hanno tutti i siti e che, per la versione di default di questo CMS, giustamente non  altro che la presentazione di ItCms stesso.

Una volta che ci siamo collegati al sito ed inseriti i dati per farci riconoscere (nome utente e password), anche se abbiamo reso visibile a tutti il sito, si presenta la solita home page del pannello di amministrazione.

Appena Jaws inizia a parlare, cosa che ci indica che la pagina  stata caricata completamente, lo fermiamo premendo control e con freccia gi o con il tasto tab, ci portiamo sul link ``"[*] Admin Modifica"`` e premiamo invio.

Questo link apre la pagina che consente di modificare il contenuto della home page del sito, quella sorta di presentazione che tutti i siti mostrano per spiegare a grosse linee lo scopo del sito e la presentazione dei contenuti. Attualmente questa pagina contiene quello che l'autore ha inserito e che per chi conosce i linguaggi PHP e XHTML, potr modificare molto facilmente.

Questa modifica la si pu eseguire anche modificando direttamente il file php della home page, ma avendo l'autore previsto che possiamo modificare anche da form questa pagina, vediamo come fare.

Nota bene:

la modifica del codice di una pagina, indispensabile in fase di impostazione del sito, comporta la conoscenza del PHP e dell'XHTML, quel minimo che consente di creare degli oggetti di programmazione quali:

- I link.

- Un indirizzo di posta.

- Un paragrafo.

- Un ritorno a capo.

- Una linea di separazione dei contenuti.

- Titoli da h1 ad h6, Eccetera.

Ovviamente  meglio se conosciamo questi linguaggi completamente, perch possiamo fare da soli e senza avvalerci di altri per impostare il sito ed i suoi contenuti.

Dopo che il sito  stato impostato, non avremo pi bisogno di conoscere comandi HTML, se non per fare cose particolari.
 
Durante questa esposizione per imparare ad utilizzare questo CMS, dar dei riferimenti a qualcuno di questi comandi, ma non essendo contemplato un corso HTML, mi limiter al minimo indispensabile per chiarire meglio come procedere con ItCms nella configurazione del nostro sito.

Una volta che abbiamo a video la pagina aperta, se scorriamo il testo con le frecce, oltre ai link e agli altri comandi che possiamo usare in questa pagina del pannello di amministrazione,  possiamo leggere tutto il testo che contiene e ci possiamo rendere conto che intercalate al testo ed ai comandi PHP e XHTML, ci sono delle righe di commento che spiegano le varie sezioni a cosa servono.

Consiglio di fare una bella lettura con calma, perch cos facendo, si pu prendere confidenza con il testo presente e poter seguire meglio quello che indicher di seguito.

Perch dobbiamo leggere il contenuto originale?

Per due motivi:

1. L'autore ha inserito un testo che fornisce alcune informazioni su quello che ItCms consente di fare. Queste informazioni sono intercalate da codice XHTML e codice PHP, cosa che pu risultare utile anche dal punto di vista della conoscenza pratica di questi comandi XHTML e PHP. Sembra difficile, ma in realt non lo , perch  pi difficile a spiegare che a fare e ve ne renderete conto ben presto. Consiglio di salvare da qualche parte questo testo che in seguito cancelleremo per mettere al suo posto il testo che intendiamo far leggere sulla nostra home page.

2. Nello scritto ci sono i riferimenti alla posizione dove possiamo inserire il testo, formattato in HTML o PHP,  che vogliamo usare per il contenuto della home page del nostro sito.

La parte che ci interessa, questa grossa area di editazione che inizia subito dopo la riga "Puoi modificare la pagina.Home.01",  composta da tre aree:

1. La parte iniziale fino alle tre righe di testo che seguono non possono e non devono essere modificate:

- ``<!-- NOTE: da questo punto puoi scrivere codice xHTML-->``

- ``<!-- NOTE: Attenzione alcune variabili derivano dal php e sono necessarie-->``

- ``<!-- NOTE: quindi trovi alcuni tag di php per richiamare le variabili-->``

Nota bene:

queste tre righe iniziano con un segno di minore seguito da un punto esclamativo e due trattini e terminano con due trattini e un segno di maggiore, comandi che in HTML sono quelli che racchiudono un commento, cio quel testo che serve alle spiegazioni per chi legge il codice e non viene preso in considerazione dai browser come  Internet Explorer e Mozilla Firefox.

2. Alle tre righe di commento segue tutto il testo che Antonio Artiaco ha inserito per spiegare brevemente cosa pu fare ItCms, formattato in modo che il testo appare a schermo come l'autore lo ha previsto con i ritorni a capo, i link e le variabili PHP, per consentire a ItCms di formattare la pagina in modo confacente alle esigenze che aveva.

Tale testo di spiegazioni, termina alla riga di commento: ``<!-- NOTE: fino a questo punto codice XHTML-->``

3. Subito dopo, inizia la terza parte della pagina che inizia per la riga: ``<?php //da questo punto in poi solo Php``

Nota bene:

il comando ``<?php`` indica al browser che da quel punto in poi inizia il codice PHP e il comando ``//`` non  altro che l'inizio di una riga di commento.

Per poter modificare il contenuto di default della home page e inserire al suo posto il testo da noi desiderato, la prima cosa che dobbiamo fare  l'attivazione delle maschere, modalit scrittura. Appena ci siamo posizionati sulla parte editazione, premiamo invio e da quel momento possiamo fare le modifiche al contenuto della pagina.

Portiamoci sulla riga subito dopo le tre righe di commento indicate sopra e che inizia per ``<div class="txt" style="font-size:large;">`` 

Questo comando segnala ad ItCms, come deve creare la pagina in modo che i browser potranno visualizzarla con la formattazione indicata nel foglio di stile (CSS), come impostato dall'autore.

In sostanza, l'area editabile inizia con un oggetto di programmazione il DIV, che  un contenitore nel quale tutto quello che inseriremo sar formattato come indicato in questo comando.

Come quasi tutti i comandi di XHTML, questo comando ha un comando di chiusura, ``</div>``, che serve a dire al browser dove termina l'area interessata da questo contenitore.

Posizioniamoci sul segno di maggiore alla fine del comando  iniziale del DIV e premiamo invio.

Il testo che si trovava subito di seguito andr a capo.

Come in un qualsiasi editor di testi, premiamo shift e con freccia gi, selezioniamo il testo fino a quando non sentiremo Jaws che ci legge la riga di commento: ``<!-- NOTE: fino a questo punto codice XHTML-->``.

Premendo freccia su, deselezioniamo tale riga di commento che  preferibile non cancellare, e premiamo canc.

Nota bene:

Questa operazione  meglio farla direttamente all'accesso di tale pagina, altrimenti supereremo i tempi di sicurezza settati da Antonio Artiaco e quando andremo a salvare le modifiche con l'apposito pulsante, avremo la spiacente sorpresa di ritrovarci sulla home page di log-in iniziale dove saremo costretti a rimettere le credenziali e rientrare nel pannello di amministrazione.

Una volta cancellato il testo presente in questa pagina tra i punti indicati, consiglio di andare con tab sul pulsante modifica e premere invio.

Si apre di nuovo la home page del pannello di amministrazione e per riaprire la pagina cercheremo il link: "Modifica il codice della pagina".

Dando invio si riapre la stessa pagina e a partire dalla riga successiva al comando iniziale del DIV, con codice XHTML, possiamo scrivere il testo e tutto quanto desideriamo inserire nel corpo della home page del nostro sito.

Subito dopo il comando DIV iniziale, possiamo inserire qualsiasi testo in codice XHTML che vogliamo, ma consiglio di cominciare con comandi semplici. Per esempio, io ho iniziato con una riga di titolo 1 per il titolo del testo che ho inserito sul sito che sto costruendo mentre scrivo questi articoli, che pu essere visualizzato all'indirizzo: http://www.nunziantesposito.altervista.org.

In sostanza, i titoli delle sezioni, per chi non se li ricordasse, sono quelli indicati con comandi formati con la lettera H, come H1, H2, H3 e fino ad H6. 

Nota che tutti i comandi dell'XHTML si scrivono in minuscolo e quasi tutti hanno la chiusura che si scrive anteponendo una barra, quella sul sette per intenderci, al comando iniziale.

Per i comandi che non contemplano un comando di chiusura, bisogna aggiungere al tag uno spazio e una barra, quella che si trova sul numero 7 della tastiera estesa.


Nel mio caso, ho messo il titolo del contenuto della pagina tra ``<h1>`` e ``</h1>``. Ho anteposto a tale comando il comando ``<br />``, comando che mette il mio titolo una riga pi sotto della scritta precedente.

Se si vuole inserire del testo, senza lasciare nessuna riga vuota, scrivere alla riga successiva un paragrafo che si forma con la lettera p. Un paragrafo pu essere anche tutto il testo che vogliamo e inizia con il comando ``<p>``, mentre termina con il comando ``</p>``.

Possiamo anche inserire tutto il testo i link e quant'altro in un solo paragrafo e possiamo usare i ritorni a capo, comando visto sopra per andare a capo di una determinata riga ed anche creare pi righe vuote con questo comando.

Se una delle scritte del testo la si vuole inserire come link, si deve scrivere come il comando che segue e che indirizzerebbe al sito dell'osservatorio siti Internet:

``<a href="http://www.uiciechi.it/osi">Osservatorio Siti Internet</a>``
 
E' ovvio che i comandi dell'XHTML che da questo punto in poi li chiamer con il loro vero nome usuale, TAG, possono essere semplici come li sto mostrando io, ma anche complessi con la possibilit di mettere tag all'interno di altri tag e di impostare anche localmente sulle pagine certi valori di formattazione con appositi attributi. Quest'ultima cosa non  proprio ortodossa, ma capita che per esigenze, si fa anche questo.

Un altro tag che potremmo avere esigenza di usare,  un tag per poter permettere a chi viene sul nostro sito di scriverci. Insomma, un indirizzo di posta nascosto che diventer un link da cliccare sul nostro sito . Per esempio potremmo mettere sulla home page una scritta "Per contattarmi, scrivimi", dove scrivimi sarebbe il link che apre direttamente il browser di posta e consente di mandarci un messaggio.

Questo tipo di tag,  uguale al link visto sopra, con la differenza che, tra le virgolette, metteremo non pi un indirizzo di una pagina, ma l'indirizzo di posta.

Ecco come verrebbe impostato il nostro indirizzo di posta, con la scritta vista sopra:

``<p>``Per contattarmi, ``<a href="mailto:nunziante.esposito@uiciechi.it">Scrivimi</a></p>``

Se vogliamo che questo testo con il link sia preceduto e seguito da una riga in pi a quella che lascia un normale paragrafo, basta aggiungere prima e dopo un tag di ritorno a capo: ``<br />``.

Questi tag di ritorno a capo, li possiamo anche mettere su una riga che precede e su una riga che segue il link per l'indirizzo di posta.

Ecco come verrebbe impostato il nostro indirizzo di posta, con il ritorno a capo che precede e segue la scritta con il link di posta:

``<br />``

``<p>``Per contattarmi, ``<a href="mailto:nunziante.esposito@uiciechi.it">Scrivimi</a></p>``

``<br />``


Se al posto dei ritorni a capo in pi, volessimo inserire una riga orizzontale che evidenzia un poco la scritta con l'indirizzo di posta visto sopra, sostituiremo al tag ``<br />`` il tag ``<hr />``.

Ecco come verrebbe impostato il nostro indirizzo di posta, con la scritta vista sopra:

``<hr />``

``<p>``Per contattarmi, ``<a href="mailto:nunziante.esposito@uiciechi.it">Scrivimi</a></p>``

``<hr />``

Per tutte le altre parti di testo che vorremo inserire nella home page, nel corpo della pagina, basta inserirlo in paragrafi che, come visto sopra,  non sono altro che il nostro testo preceduto dal tag ``<p>`` e seguito dal tag ``</p>``.

Attenzione ai segni di punteggiatura e ai caratteri barra, maggiore e minore che servono a definire i tag.

Poich la sicurezza non  mai troppa, Antonio Artiaco ha previsto, come dicevo sopra, un tempo non molto lungo per poter lavorare, per cui, se non volete avere sorprese e perdere il lavoro fatto per scrivere la home page, dovete salvare spesso, dando invio sul pulsante modifica, oppure vi potete scrivere il vostro testo nel blocco note o in Word e poi fate un copia ed incolla nello spazio visto sopra appena avrete attivato la modalit scrittura, le maschere per Jaws.

Per vedere l'effetto che produce il testo inserito nella home page, basta rendere il sito visibile a tutti, anche se dalla home page del pannello di amministrazione si ha una buona percezione di quello che abbiamo inserito.

Per mettere il sito visibile a tutti, dobbiamo usare il link "PORTALE IN MANUTENZIONE". Dando invio su questo link, si apre un form che tra le tante cose, ha due pulsanti radio che ci consentono di mettere il sito visibile a tutti.

Una volta modificato questa impostazione, per rendere attiva la modifica, raggiungiamo con tab il pulsante modifica e premiamo invio.

Non ci resta che eseguire la disconnessione sicura dal pannello di amministrazione, cosa che faremo usando il link log-out. Per fare pi presto, basta mettere in elenco i link con insert pi F7 e premere la lettera L. Una volta sul link log-out, dando invio si chiude il pannello di amministrazione e si apre la home page del nostro sito che questa volta mostra anche il contenuto nel corpo della pagina, oltre al testo che ci informa che il log-out  avvenuto con successo.

Nel caso volessimo rientrare, bisogna rifare la procedura di log-in, inserendo nome utente e password.

Vi rimando alla prossima per continuare questo discorso che sta cominciando a diventare concreto.






Per ulteriori spiegazioni, scrivere a: `Nunziante Esposito. <nunziante.esposito@uiciechi.it>`_


