Encompass

Encompass è il motore grafico di Envolution 1. Esso è basato sul sistema Smarty Template. Encompass ti permette di controllare il look e il layout del sito usando semplici maschere chiamate file di tipo "tpl" con estensione ".tpl".

Per default Envolution parte con sette temi o skins. La parola tema e skin attualmente significano due cose differenti. Ma per lo scopo di questo manuale noi useremoi due termini come sinonimi.

Sei dei sette skins fan parte dell’installazione di Envolution e dipondono dal motore grafico Encompass. L'unico tema rimanente è un tema standard tipo i “vecchi” temi per Postnuke. Infatti il tema Extralite è ancora di serie con PostNuke.

Ma i benefici di Encompass non sono evidenti quando usiamo temitradizionali. Extralite è stato incluso semplicemente per mostrare che i temi base funzionano anche in Envolution senza essere costretti ad usare gli skins di Encompass.

Cominciamo a fare ancora una volta il login al nostro sito Envolution con l'accesso da amministratore. Per accedere alla configurazione e ai controlli di Encompass cliccare semplicemente su "Amministrazione” nel Menù Principale, entrando così nell’ormai noto Menù di Amministrazione che chiameremo semplicemente "Pannello di Amministrazione".

Cliccate su "Encompass” al centro della pagina. Si aprirà la pagina del Configuratore Temi. Selezionate sulla riga Envolved il link Modifica tema e sarete portati alla pagina raffigurata.

Si noterà la presenza di molte opzioni che non richiedono la scrittura manuale di codice. Dato che Envolution è tuttora in sviluppo, il nostro motore grafico subirà cambiamenti e miglioramenti, e speriamo di avere strumenti supplementari per la pubblicazione rapida delle maschere, facile ed efficiente da usare via web browser.

Segue la lista delle caratteristiche presentate in questa pagina con la spiegazione e la funzione delle varie voci.

Scelta skin

Nome Tema: come suggerisce il nome, questo è lo "skin" o tema con cui state lavorando. Ogni "skin" ha i suoi settaggi che permettono pieno controllo sullo stile e il layout del sito in base allo "skin". Si può selezionare lo "skin" da manipolare scegliendolo dal menù a discesa.

Zone

Cosa sono le zone? Bella domanda, è una cosa che molta gente ci chiede. Le zone sono spazi specifici della pagina web; locazioni che usano un certo modello per controllare il layout di una specifica parte della pagina. Una pagina web può avere molte zone o solo una secondo la vostra creatività. Segue una spiegazione visuale delle zone:

(i crediti per le immagini a riguardo vanno a Neo su http://www.samstech.net)

Si sente spesso dire che CMS come Envolution seguono "il layout tipico delle tre colonne": è quasi vero, ma fuorviante

Si può uscire facilmente da questo "layout tipico delle tre colonne" aggiungendo colonne addizionali. Si può anche non volere "un layout della colonna" old style della pagina da scorrere su e giù.

Non ci sono limitazioni nella disposizione di quel che viene chiamato "colonna". Si potrebbe disegnare una colonna con larghezza superiore all’altezza, trasformandola così in una riga invece della colonna. Potete disporre le "righe" e le "colonne" ovunque nella pagina semplicemente modificando le zone e i modelli (template o maschere).

Encompass è antecedente a Envolution per quasi un' anno se non più. E' un motore grafico per il CMS PostNuke e da allora molti progettisti di temi hanno realizzato e modificato i temi esistenti. Nessuno di loro aveva mai scelto di cambiare radicalmente il layout tradizionale delle pagine. C'è una buona ragione per questo: layout strani e estremamente differenti non sono generalmente apprezzati dai navigatori internet casuali e non tecnici.

Quando abbiamo pubblicato il tema LogicII per Encompass, esso aveva il layout molto tradizionale delle tre colonne (solo oggi ha quattro colonne per l’aggiunta del blocco di destra esclusivo di Encompass). Poi noi abbiamo modificato i file master1.tpl e master2.tpl e abbiamo semplicemente spostato il tradizionale "blocco di sinistra" affianco al "blocco di destra" (Guarda il grafico sottostante).

Questo genere di layout è stato considerato "radicale" da molti nostri iscritti e regolari visitatori del sito. Era soltanto un semplice cambiamento nel paradigma del "layout delle tre colonne". Si può solo immaginare a come la gente possa reagire a qualcosa di ancora più pronunciato o azzardato in termini di layout del sito. Naturalmente la scelta è sempre vostra per sperimentare e creare layout "atipici". Encompass vi permette di fare proprio questo!

Configurazione Zona (Aggiungi nuova zona): Questa caratteristica permette all'amministratore di aggiungere nuove zone nel tema selezionato. Ogni skin può avere zone differenti.

Nome Zona: Questo è il nome della zona. Non è altro che un modo per distinguere una zona dall'altra.

Etichetta zona: Ciò è in realtà la stessa cosa del nome di zona, con la differenza che essa identifica la zona in termini tecnici. Usare il nome di zona è il modo più facile per identificare e distinguere le zone.

Tipo zona: la zona è richiesta o addon? le zone richieste sono obbligatorie per la costruzione della pagina web . Le zone addon sono zone extra che estendono le funzionalità delle zone obbligatorie in termini di rendering della pagina web a livello di browser.

Attivo?: per sapere se una zona è attualmente applicata e funzionante. In caso contrario sarà impostata su NO

Modello: è il modello (.tpl file) che la zona sta usando per determinare il layout della pagina web. Adottando i modelli tipici puoi controllare dove sono situati gli oggetti sulla pagina web I modelli si trovano in /themes/XXX./templates e non sono altro che file di testo con HTML e smarty tags per controllare il layout della tua pagina (maggiori informazioni sui smarty tags in seguito).

Azioni: per attivare, disattivare, cancellare o configurare una zona. Configurare una zona vuol dire selezionare il modello per controllare quella zona particolare.

Configura colori

Questo settaggio vi permette di controllare lo schema di colori base del tema adottato mediante box di selezione a discesa. I colori sono indicati visualmente e anche tramite codice HEX. Molte tabelle sulla codifica HEX sono disponibili su internet per riferimenti. La configurazione per questa caratteristica è gestita cliccando su "configura" al lato destro della tabella dei colori.

: Allora si presenterà questa schermata:

Come potete vedere, cambiare lo schema dei colori base del tema è veramente facile. Potete fare questo per ciascun tema Encompass che avete installato.

Configurazione generale

E’ qui che sono specificate alcune configurazioni di base della pagina.

Larghezza totale pagina: pagewidth: Questo può essere una percentuale o un numero reale. Molti utilizzano 100% per massimizzare la larghezza della pagina sugli schermi degli utenti

Larghezza colonna sinistra: lcolwidth: Questa è la larghezza della colonna di sinistra, cioè la colonna che contiene il menù principale.

Larghezza colonna destra: rcolwidth: Questa è la larghezza della colonna di destra . Il vostro blocco del "Sondaggio” e di "Login utente" si trovano in questa colonna nella pagina principale.

Numero di Colonne News: indexcol: Questo è il numero di colonne usate nella pagina di default degli articoli. E’ reimpostata a 1, in modo che i nuovi articoli appaiano in testa ai vecchi articoli. Impostando a 2 avrete i primi due articoli in cima e poi man mano gli altri su una unica colonna o su due colonne a seconda che sia selezionato o meno il modello News su due colonne. . Dovete permettere un minimo di quattro articoli visualizzati sulla pagina principale (questa opzione è disponibile nel Pannello di amministrazione, Impostazioni e descritto nel capitolo cinque). Le scelte per questa caratteristica attualmente sono 1 o 2.

Blocchi di destra sempre attivi: righton: Questa opzione determina se i blocchi di destra devono essere sempre attivi anche negli altri moduli usati in Envolution. Settarlo a 1 significa "Yes" , "0" è il default e significa "No"(i blocchi di destra non sono sempre attivi).

Larghezza colonna blocchi interna: iblkwidth: Questa è una caratteristica per controllare la larghezza del blocco interno. Il blocco interno compare nella pagina principale delle news e nell'installazione di default contenente il "Reminder" (Ricorda) ed è situato appena sotto gli articoli che abbiamo pubblicato nel capitolo precedente.

Modelli

Mini-guida: Creare un modello per il Menu principale – by tekno

Si dirà in seguito cos'è un modello e come può essere modificato per creare uno stile unico per il sito.

In questa sezione si userà il file mainmenu.tpl che si trova in /themes/(nomedeltuoskin)/templates.

Modelli, cosa sono? I modelli usati in Envolution sono un modo per l’utente di avere un controllo maggiore sul lato estetico della pagina. Esaminiamo un paio di cose prima di iniziare.

Variabili.

Le variabili sono ciò che caratterizza la pagina, cioè impostazioni che rendono unico il tuo sito.

Segue una lista delle variabili che verranno usate nel modello del menu principale, con la definizione delle funzioni di ciascuna.

$TITLE

Questa variabile imposta il nome scelto per il blocco del menu.

$CONTENT

Definisce testo/link che appariranno nel corpo del blocco.

$IMAGEPATH

E' definitaall’interno del tema stesso, nel file funcs.php, ma esula dagli scopi di questa guida, accettatela come percorso delle immagini del vostro tema.

$BGCOLOR(1-6)

I colori definiti nella configurazione colori di Encompass.

$SEPCOLOR

Il colore definito nel configuratore colori di Encompass.

$LEFTWIDTH

E' la larghezza de la colonna di sinistra come definita nel pannello di configurazione di Encompass.

Ora che le variabili sono state spiegate, diamo uno sguardo ad alcuni altri fattori che svolgono un ruolo diverso nella visualizzazione del sito

Cascading Style Sheets (CSS)

Cascading Style Sheets, o meglio chiamati CSS, sono un'altro importante pezzo del puzzle per l'aspetto delle tue pagine.

Guardando il file CSS nella cartella "Style" vedrai due file differenti, style.css e styleNN.css (Nota: c'è anche un file index.html che serve solamente ad impedire che qualcuno cerchi di visualizzare la lista di tutti i file nella tua cartella).

Questi due file servono per capire quale sarà l'aspetto della tua pagina. La ragione della presenza di due file deriva dalle differenze di visualizzazione tra browser, in particolar modo tra Netscape 4.x e i più recenti browser (IE, Mozilla, etc..).

Creiamo un nuovo set di stili solo per il blocco menu. Nei file degli stili, poichè è necessaria la modifica di entrambi i file styleNN.css e style.css, a meno che noi non volessimo mostrare le speciali proprietà del menu solo ai browser più nuovi, aggiungiamo qualche linea per creare una classe chiamata menu-title, più in evidenza, perchè contiene tutte lettere maiuscole ed è un po' più larga rispetto ai contenuti del menu.

.menu-title {

color: #FF3300;

font-variant: small-caps;

font-size: 16px;

font-weight: bold;

font-family: Arial;

text-align: right;

text-decoration: none;

}

Ora per gli elementi stessi del menu che saranno in buona parte dei link, dobbiamo creare delle definizioni addizionali, la classe menu-items. Primo dobbiamo definire come deve apparire il testo.

.menu-items {

color: #FFFF00;

font-size: 10px;

font-family: Arial;

text-align: right;

text-decoration: none;

}

Ora dobbiamo aggiungere poche linee su come vogliamo gestire la visualizzazione dei link

.menu-items A:link {

color: #FF9900

text-align: right;

text-decoration: none;

}

.menu-items A:hover {

color: #FF6600;

font-size: 12px;

text-align: right;

text-decoration: underline;

}

.menu-items A:visited {

color: #FF3300;

text-align: right;

text-decoration: line-through;

}

Non dobbiamo definire troppe cose perchè le proprietà non definite verranno ereditate dalla classe menu-items. (Nota: le proprietà del testo le abbiamo dovute definire perchè non c'erano nelle classi superiori).

Una volta create le definizioni dello stile della pagina siamo pronti per creare il vero modello del menu. Definiamo l’aspetto della tabella. Diciamo che vogliamo avere una tabella con delle strisce sul lato destro della tabella stessa.

Per creare il file del modello è sufficiente creare la tabella in HTML con delle piccole eccezioni che abbiamo descritto prima. Tanto per iniziare, mettiamo un commento per la chiarezza del codice

Iniziare la definizione del blocco con un commento è un buon modo per tornare indietro ed individuare eventuali errori quando si visualizza la pagina finale. Ora vogliamo settare una tabella che ci darà i nostri parametri

Così facendo, sarà più facile definire la dimensione complessiva del blocco stesso, nota inoltre che abbiamo usato la variabile $LEFTWIDTH all'interno delle parentesi quadre ?-- in modo da permettere al processore dei modelli di riconoscere l'html ed inserirvi la variabile che è stata definita da qualche altra parte. Dopo aver definito i parametri, costruiamo il vero aspetto della tabella stessa. Questo ci dà la tabella iniziale usando la variabile $BGCOLOR1, definita nel pannello di controllo di Encompass come bordo della pagina. Ora creiamo l'intestazione della tabella. Usiamo il tag span per applicare la nostra classe menu-title che avevamo creato prima, in modo che risalti un po'. E poi completiamo la riga di intestazione. Ora iniziamo a creare la parte di contenuto del blocco stesso. Poichè vogliamo che il blocco abbia una striscia lungo il lato sinistro aprire una nuova tabella per meglio definirne l'aspetto Questo ci permette di usare lo stesso colore del bordo come colore di sfondo per la tabella stessa. Qui usiamo $TITLE per definire l'intestazione della tabella che va all'inizio del blocco del menu. [-$TITLE-] Usiamo un file che contiene un pixel trasparente 1x1 chiamato spacer.gif e usiamo i tag HTML per aumentarne la dimensione fino ad arrivare alla larghezza che noi vogliamo per la striscia, in questo caso larga 25 pixel. Una volta ottenuta la striscia, andiamo avanti e occupiamoci dell'inserimento dei contenuti. [-$CONTENT-] Qui abbiamo usato il tag div per applicare la classe menu-items a tutti gli elementi della variabile $CONTENT. Così tutti gli elementi che noi impostiamo useranno le varie classi che abbiamo aggiunto al foglio di stile css. Fatta questa parte dobbiamo chiudere tutte le tabelle che abbiamo aperto. Poichè abbiamo aperto tre tabelle per fare il blocco, per far funzionare l'HTML correttamente in tutti i browser, bisogna chiudere le tre tabelle. Tabella 1 chiusa. Check.