Rebelia.it

Dal template al CMS

Notizia del 30/06/2007

Come nasce un sito? Già ne avevo parlato in altre occasioni:

• si pianifica la distribuzione dei contenuti
• si studia la grafica
• si prepara il codice, simulando una pagina
• la si decora con il foglio di stile

E poi?

Poi ci sono due strade: una è la creazione di un sito statico: ogni pagina è preparata in locale con tutti gli elementi necessari, partendo dal template, rimuovendo le parti in più e sostituendole con i contenuti della pagina vera e propria; questo sistema è adatto per siti di dimensione contenuta che non richiedono grandi aggiornamenti né grande manutenzione.

La seconda è la creazione di un sito dinamico: le pagine dei siti dinamici non sono già presenti nel server che ospita il sito stesso, ma sono create al volo nel momento in cui il visitatore le richiede prendendo i contenuti presenti in un database e preparandoli da servire al navigatore attraverso l'aggiunta del codice html necessario.

I contenuti infatti si inseriscono in un database attraverso un'interfaccia, quella del CMS (content management system), un sistema che permette di gestire un sito senza conoscere linguaggi tipo ASP o PHP, dove c'è per esempio un campo per la data, uno per il titolo, un altro per il contenuto... un po' come nei programmi di posta elettronica.

Salvando, questi dati sono registrati nel database: la data nella colonna delle date, il titolo nella colonna dei titoli etc. Qui sotto l'interfaccia del Webasic - il CMS che uso - con cui sto scrivendo questo post:

Per quanto riguarda il codice html necessario per la presentazione di tali contenuti, si procede come segue:

• si parte dal template e si rimuovono tutte le parti che normalmente cambiano: menu, data, titolo, contenuto etc (naturalmente queste parti cambiano da pagina a pagina e da sito a sito)
• si sostituiscono queste parti con dei comandi che sono diversi da CMS a CMS ma che hanno più o meno tutti la medesima funzione: prendere i contenuti dal database e inserirli nel punto scelto da noi.

Questi comandi sono normalmente qualcosa tipo [title] – [content] oppure {inserisci_menu} – {inserisci_titolo} o similari e sono un meccanismo messo a punto da chi ha materialmente progettato e creato il CMS per inserire gli elementi desiderati (es. il titolo) aggiungendo il codice html necessario.

Provo a spiegarmi con un esempio pratico.

Creo un template:

Avrò delle immagini o meno, ma sicuramente un foglio di stile per la formattazione:

A questo punto prendo il template in html, rimuovo le parti non più necessarie (necessarie solo per avere un'idea del risultato finale in fase di creazione del template stesso, ma superflue in seguito) e le sostituisco con i comandi del CMS, ottenendo una pagina tipo questa:

Sono rimasti invariati il titolo e il paragrafo in calce, perché sono uguali in tutte le pagine del sito, mentre ho rimosso il menu, il titolo e il contenuto posticci, sostituendoli con i comandi (fittizi, in questo caso) del mio ipotetico CMS.

Un CMS oltre alla sezione che permette di caricare i contenuti sicuramente mette a disposizione una sezione dove incollare il codice misto (html + comandi), un'altra dove caricare le eventuali immagini (sia quelle della grafica che foto etc. relative ai contenuti) e un'altra ancora dove inserire il foglio di stile, perciò basta inserire le varie parti nelle sezioni giuste e salvare.

Nel momento in cui il navigatore sceglierà la pagina, il CMS si premurerà di sostituire i vari comandi col relativo contenuto; per esempio [inserisci_titolo] diventerà <h2>News del giorno</h2>, cioè il tag previsto per quel campo (<h2></h2>) più il contenuto del campo "Titolo" nel database nel punto in cui è registrata quella particolare notizia (in questo caso News del giorno); il titolo al navigatore risulterà di colore verde, perché così è previsto nel foglio di stile per l'h2 e questo per tutti i punti in cui è prevista una sostituzione del genere.

I campi con * sono obbligatori.