Guida al T3 Framework per Joomla 3.xx - Antonio Mercurio

Guida al T3 Framework per Joomla 3.xx

              Antonio Mercurio

Copyright © 2014 Antonio Mercurio

       All rights reserved.

DEDICA

Dedico questo libro a tutti i liberi creatori di software.

RINGRAZIAMENTI

Ringrazio il sito Amazon ed il suo sito Createspace per aver reso
possibile la pubblicazione di questo libro.

INSTALLAZIONE

     Per installare il framework abbiamo bisogno di un server che ci
consenta di avere una copia perfettamente funzionante di Joomla. A tale
scopo dobbiamo avere già installato un server locale, in ambiente Mac
possiamo avvalerci di Mamp server, mentre in ambiente Windows
possiamo utilizzare Xampp che possiamo usare anche su Linux Ubuntu o
altra distribuzione linux. Apriamo la pagina iniziale del nostro server
Mamp ed avremo la figura seguente

Dalla finestra cliccate su Strumenti-PhpMyadmin e vi compare questa
finestra

    cliccate su database in alto a sinistra e nella casella Crea un nuovo
database inserite il nome del database per esempio T3 e cliccate sul
pulsante Crea e adesso selezionate il database appena creato dall'elenco
nel pannello di sinistra. Ora dovete cliccare in alto su Privilegi e cliccate
su Aggiungi nuovo utente. Nella casella user name inserite il nome
utente per esempio t3 e poi scegliete dalla casella server la voce locale ed
inserite una password cper esempio joomla poi in basso spuntate la voce
Garantisci tutti i privilegi al database t3 ed infine cliccate su Seleziona
tutti e sul pulsante in basso Crea privilegi. Ora andate sul seguente sito :
T3 e selezionate la voce Downloads. Abbiamo alcune scelte per poter
installare il framework e sono le seguenti:
     1. T3 framework package (ci permette di scaricare tutto il
         necessario formato dal framework, i templates di base e i
         plugins)
     2. T3 quickstart for joomla 2.5 e joomla 3.xx (ci permette di
         installare un pacchetto contenente Joomla, il framework T3 ed i
         suoi plugin ed anche degli articoli demo)
     3. T3 Bs3 blank template ( in pratica solo il template del
         framework ma in versione bootstrap 3)
     4. T3 blank template ( in pratica il template di default pulito ma in
         versione boostrap 2)

                                     7

5. T3 framework plugins (solo i plugin del framework utile se
       dobbiamo reinstallarli)

    Noi per il nostro scopo scegliamo il pacchetto T3 quickstart for
joomla 3 in modo da poter installare joomla 3 in inglese e l'intero
framework con tutti i plugin e demo già pronte. Dopo aver scaricato il
pacchetto scompattiamolo e rinominialo la cartella in t3 e spostiamola
nella cartella del nostro server locale che trattandosi di Mamp si chiama
htdocs. Adesso sul vostro browser digitate l'indirizzo localhost:8888/t3 e
partirà la solita finestra di installazione di joomla 3. Da notare che
abbiamo usato il numero 8888 che indica la porta in funzione del server,
ma se l'avete cambiata nelle impostazioni dovete digitare il vostro valore
al posto di quello nell'esempio. Ora riempite i campi a vostro piacimento,
possiamo usare in nome utente e password admin, come nome del sito
mettiamo t3 ed inseriamo la mail da usare come amministratori. Ora
clicchiamo sul prossimo passaggio e selezioniamo dalla casella tipo
database la voce mysqli, nella casella nome host inserite localhost perchè
siamo in locale, in nome utente dobbiamo inserire il nome dell'utente
database che nel nostro caso è t3 ed inseriamo la password che abbiamo
scelto per questo utente database e cioè joomla, e ricordiamo di inserire il
nome scelto per il database che è t3. Andiamo al prossimo passaggio e
selezioniamo la voce Dati di esempio inglesi e proseguiamo cliccando su
Installa. Ora cliccate sul pulsante Elimina la cartella installation e poi su
pannello amministrativo e sarete pronti per entrare nella nuova
installazione di joomla 3.

                                      8

Configurazione
Andiamo su Extensions e su Template manager. Ora per usare
un template che utilizzi Bootstrap 3 dobbiamo selezionare il
template di default denominato t3_bs3_blank_default. Ed ecco
il pannello di controllo del framework.

Ora clicchiamo sulla scheda General ed impostiamo
globalmente il framework. Se siamo nella fase di sviluppo del
sito dobbiamo abilitare l'opzione Development mode (modalità
sviluppo) che comporta l'uso dei file Less in luogo dei files css.
Spuntiamo l'opzione Thememagic che ci sonsente di fare uso
del pannello di customizzazione del nostro template che poi
vedremo. L'opzione Legacy compatible ci assicura la
compatibilità con bootstrap 2 e la spuntiamo e spuntiamo
anche Responsive per adattarci a siti responsive. Quando
abilitiamo questa opzione ed anche l'opzione Development
mode dobbiamo ricordarci di cliccare in alto sul pulsante Less to
Css che ci consente di ricompilare i files da Less a Css. Se stiamo
costruendo siti con lingue che supportano la scrittura da destra
verso sinistra dobbiano abilitare l'opzione Build rtl Css. Quando
il framework esegue la ricompilazione dei file da Less a Css crea

                                     9

una copia compressa di ogni file nella cartella t3-assets che si
trova nella root di joomla. Infine se non volete mostrare il logo
del framework T3 in basso al sito potete mettere su off
l'opzione Show T3 logo. Le due opzioni in basso Optimize Css e
optimize Js dovete abilitarle solo quando avrete finito con lo
sviluppo del sito ed avrete disabilitato l'opzione in alto
development mode. Adesso terminiamo cliccando sul pulsante
Save in alto per salvare i cambiamenti. Ora clicchiamo su Close
per uscire da questa finestra e torniamo alla finestra dei
templates. Assicuriamoci di essere nella scheda Styles che
vedete selezionata in alto a sinistra, e spuntiamo lo stile attuale
di default che è quello con la stella gialla t3_bs3_blank_default
e clicchiamo in alto a sinistra su duplicate in modo da farne una
copia. Ora dovreste avere uno stile t3_bs3_blank_default(2),
spuntatelo e cliccare sull'icona in alto a sinistra default per
renderlo il nostro nuovo stile personale di default. Adesso
faremo le nostre modifiche su quest'ultimo senza intaccare
quello di default. Ora non ci resta che cliccare su questo nuovo
stile ed aprirlo. Proviamo adesso a visualizzare il sito e
dovremmo avere la seguente pagina di default.

                                    10

Impostazione tema
Adesso che abbiamo visto come creare un nostro stile personale
su cui lavorare possiamo anche dargli un nome diverso, lo
facciamo dal pannello di controllo del framework nella casella
Style name. Cancellate la scritta di default e cambiatela per
esempio in custom e cliccate su save in alto. Se per caso tornate
nella finestra degli stili dovreste vedere il nuovo nome. Come
avrete notato la home page è in stile bianco secondo il tema di
default ma che possiamo cambiare. Il template di default che
stiamo usando del framework prevede uno stile bianco, un dark
(scuro) e un red (rosso). Sono queste le tre combinazioni di
colori che possiamo avere. Andiamo nella scheda Theme del
pannello di controllo e dalla casella theme scegliamo red, poi
dalla casella logo type selezioniamo image per poter mostrare il
logo del nostro sito sotto forma di immagine e non di slogan.
Ovviamente andiamo a sostituire il logo del framework con il
nostro e come dimensioni prepariamoci un'immagine tipo 200 x
160 poi in basso su logo image clicchiamo su select. Ora
clicchiamo su upload e selezioniamo il logo da una nostra
cartella e clicchiamo su start upload. Una volta eseguito l'invio
selezioniamo il nuovo logo e clicchiamo su Insert. Ora se
vogliamo consentire la visualizzazione di un logo alternativo per
schermi piccoli possiamo abilitare l'opzione small logo image e
ripetiamo i passaggi di prima selezionando una immagine
diversa per schermi piccoli. Adesso dobbiamo assegnare il
nostro stile custom con la variante red a una o più pagine del
sito, per esempio lo assegniamo a tutte e quindi dal pannello di
controllo andiamo su Assignment e clicchiamo su Toggle
selection per spuntarle tutte poi clicchiamo su Save. Ora
visitiamo la nuova home page e notiamo la differenza.

                                   11

Come si nota compare il nostro logo personalizzato e i colori
vertono sul rosso ed inoltre lo stile red che abbiamo scelto
prevede nuove posizioni del layout che sono diverse dal tema
bianco di prima, tra non molto vedremo come personalizzare il
layout. Avvertiamo che se non vogliamo mostrare il logo come
immagine ma uno slogan, dobbiamo scegliere dalla casella logo
type la voce text e in site name scriviamo il nome del nostro sito
ed in slogan inseriamo uno slogan che vogliamo mostrare.

                                    12

Impostare il layout
Andiamo nella scheda Layout all'interno del pannello del
framework. Ci ritroviamo con la seguente finestra

come vedete accanto alla scritta Positions & Responsive
configuration c'è una casella di selezione la quale ci offre la
possibilità di scegliere un modello di layout per la nostra home
page. Scegliamo il modello home-1 e clicchiamo sul pulsante
Save as copy e nella finestra che compare scegliamo per
esempio il nome custom e clicchiamo su Clone it. Da questo
momento quindi abbiamo creato uno stile personale che in
precedenza abbiamo chiamato custom e un layout personale
che abbiamo appena chiamato custom. Il framework fa uso di

                                   13

un sistema a griglia che mostra una serie di posizioni in cui
pubblicare i nostri moduli o componenti. Ovviamente ogni
modello di layout prevede una serie di posizioni e nomi delle
stesse. Nel modello appena scelto da noi abbiamo cinque
posizioni del tipo home-1, home-2, home-3 fino a cinque.
Queste posizioni se notate sono sviluppate in verticale una sotto
l'altra e ci permettono di mostrare dei moduli per esempio
moduli che mostrano articoli o banner uno sotto l'altro. Ora
immaginiamo di avere cinque moduli ma ne vogliamo mostrare
solo tre in home page quindi possiamo sfruttare solo le posizioni
che vanno da home-1 a home-3 e le altre due non ci servono.
Per non mostrarle ci basta posizionarci sulla home-4 e compare
una icona a forma di ingranaggio, clicchiamoci sopra e
selezioniamo la voce none e stessa cosa facciamo per la voce
home-5. Adesso provate a visualizzare il sito e noterete che i
moduli pubblicati in quelle due posizioni sono spariti
(ricordatevi di salvare i cambiamenti). Oltre a nascondere delle
posizioni possiamo anche scambiarle di posto, per esempio
cliccate sulla home-1 e sull'icona ad ingranaggio poi vi vengono
mostrate delle posizioni da cui scegliere ed andate su
t3_bs3_blank_template che è quello che state usando e
scegliete la posizione home-2. Ora andate su home-2 e ripetete
i passaggi ma scegliete la posizione home-1 in modo da
scambiare le due posizioni. Adesso salvate e visualizzate il sito e
dovreste vedere i moduli pubblicati con posizioni invertite.
Questo modello di layout prevede anche 6 posizioni nel piè di
pagina chiamate footer-1 etc...Andiamo su footer-5 e footer-6 e
le disabilitiamo come già sappiamo fare in modo da non
mostrarle e clicchiamo sul numero 3 nella barra numerata in
basso così nella nostra interfaccia non ci daranno fastidio.
Sappiate che se per caso volete ritornare sui vostri passi vi basta
cliccare sul pulsante in alto a destra reset positions per
resettare le posizioni come erano in precedenza mentre per
resettare tutto e non solo le posizioni cliccate su reset all.

                                    14