MCVS
Il Template

Nelle prime righe del file è presente questa riga

<!--SE VERSION 0.1-->

Il template creato per il progetto è molto semplice (si adatta a desktop, tablet e cellulari) ed è stata fatta una precisa scelta di mettere CSS e codice HTML nello stesso file per avere il minor numero possibile di file, nulla vieta di separarli e creare due file.

Vediamo una riga di codice dell'head,

<title>--TITLE--</title>

oltre i tag HTML di apertura/chiusura al posto del titolo è inserito il testo --TITLE-- che indica che questa parola è una variabile e sarà sostituita dal codice PHP con il valore elaborato. Oltre a questa variabile nel codice sono presenti molte altre variabili, tutte iniziano e terminano con --.

La cosa più semplice ed ovvia da cambiare nel codice sono i colori per cui nelle prime righe CSS c'è una definizione di tutti i colori utilizzati nel layout

:root {

--def-bg-color: #ffffff; /Colore di sfondo generale/

--def-bg-menu: #38424d; /Colore di sfondo del menu/

--def-bg-logo: #1694CA; /Colore di sfondo del logo/

--def-txt-logo: #ffffff; /Colore testo logo/

--def-txt-footer: #a2a2a2; /Colore testo footer/

--def-bg-color_li: #282f36; /Colore di sfondo voci menu/

--def-txt-color_li: #cfcfcf; /Colore testo voci menu/

--def-bg-color_li_active: #ffffff; /Colore di sfondo voci menu/

--def-txt-color_li_active: #000000; /Colore testo voci menu/

--def-txt-color_li_hover: #0099cc; /Colore testo voci menu hover/

--def-txt-color_li_dir_hover: #e04747; /Colore testo voci sottomenu hover/

--def-bg-blockquote: #0099cc; /Colore di sfondo blockquote/

--def-txt-blockquote: #ffffff; /Colore testo blockquote/

--def-border-table: #cacaca; /Colore bordo tabella/

--def-bg-table: #e04747; /Colore sfonto titoli tabella/

}

Il file è impostato con una griglia di 12 colonne simile a bootstrap senza però utilizzarlo direttamente

/* Per i tablet - larghezza superiore a 600px e inferiore a 768px */

@media only screen and (min-width: 600px) {

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

/* Per i monitor - larghezza superiore a 768px */

@media only screen and (min-width: 768px) {

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

.col-block-1 {width: 8.33%;}

.col-block-2 {width: 16.66%;}

.col-block-3 {width: 25%;}

.col-block-4 {width: 33.33%;}

.col-block-5 {width: 41.66%;}

.col-block-6 {width: 50%;}

.col-block-7 {width: 58.33%;}

.col-block-8 {width: 66.66%;}

.col-block-9 {width: 75%;}

.col-block-10 {width: 83.33%;}

.col-block-11 {width: 91.66%;}

.col-block-12 {width: 100%;}

Le colonne col-block-* mantengono la loro larghezza indipendentemente dal dispositivo utilizzato mentre le altre colonne col-* e col-s-* si adattano al dispositivo (nella versione originale hanno gli stessi valori). Nella sezione Parser verranno indicati degli esempi di come dividere un contenuto in 3 pagine.

La sezione più delicata del progetto è questa

<div class="menu">

--MENU_SX--

<!--MENU START--> <ul id="ul--PROGID--" class="--CLASS_SHOW_HIDE--">

<!--MENU CLASS_ACTIVE--> active

<!--MENU CLASS_INACTIVE--> inactive

<!--MENU CLASS_SHOW--> show

<!--MENU CLASS_HIDE--> hide

<!--MENU ELEMENT_LINK--> <li id="li--PROGID--"><div class="--CLASS_ACTIVE_INACTIVE--"><a href="--LINK_ELEMENT--" >--MENU_PAGE_NAME--</a></div>

<!--MENU ELEMENT_SUBMENU--> <li id="li--PROGID--"><div class="--CLASS_ACTIVE_INACTIVE--" ><a class="submenu" onclick="show_hide_ul_menu('ul--NEXTID--');">--MENU_PAGE_NAME--</a></div>

<!--MENU ELEMENT_SUBMENU_LINK--> <li id="li--PROGID--" ><div class="--CLASS_ACTIVE_INACTIVE--"><a class="submenu" onclick="show_hide_ul_menu('ul--NEXTID--');" href="--LINK_ELEMENT--">--MENU_PAGE_NAME--</a></div>

<!--MENU ELEMENT_STOP--> </li>

<!--MENU STOP--> </ul>

</div>

Dove in buona sostanza vengono definite le parti che costituiscono il menu, la variabile --MENU-- sarà sostituita con il menu generato dal software. Per capire come dev'essere il codice HTML del menu e non inserire nel file PHP del codice HTML ho scelto di inserirlo nel template in questo modo. Per cui se voglio che ad esempio tutti i <li> abbiano una classe aggiuntiva modifico la definizione di apertura del <li> all'interno del template.

Essendo la struttura dei file di contenuti organizzata in directory e sottodirectory il menu è ricorsivo per cui cui tra l'apertura e chiusura di un tag <li> è possibile trovare un <ul> con le sottopagine di quella particolare voce di menu.

Un ultima nota riguarda le le variabili PAGE_LINK e PAGE_E_LINK, sono due link alla pagina. Il primo è un link relativo ovvero se lo condividete ma successivamente aggiungete contenuti alla pagina o spostate il contenuto in una sottodirectory il link cambia. Il secondo link (quello con la E) permette di avere un link assoluto che non cambia nel tempo, quindi se il contenuto viene spostato quel link farà sempre riferimento a quel contenuto (a pato che sia l'unico file con quel nome e che non venga cambiato il nome del file).