Installiamolo come ogni estensione (Gestione estesioni --> Carica il file del pacchetto compresso --> sfoglia --> carica e installa)
Adesso accediamo a CB (componenti --> CB --> Data Storage)
Costruiamo il nostro form di registrazione: diamogli un titolo e cominciamo a creare i campi per la registrazione. Alcuni sono obbligatori (name, username, email, ripeti email, password, ripeti password), aldilà di questi possiamo sbizzarrirci: io nell'esempio ho inserito città, avatar, telefono.
Nella schermata iniziale inseriamo il nome del nostro form (per me è"iscrizione") e il title e procediamo nella sezione "New field" con la costruzione dei campi
Per inserire i campi non dobbiamo far altro che inserire il "title" (il name si compilerà automaticamente) e clicchiamo ogni volta su salva. Se il campo inserito è un selectlist ricordiamo di selezionare sotto il campo "name" "Group" su "Yes" e successivamente compiliamo "Group Definition" secondo la sintassi: "nome_campo;valore_campo" (se pensiamo ad un elenco di città avremo ogni riga composta da ad esempio Roma;Roma)
Per ogni campo inserito clicchiamo in alto a destra "salva" e procediamo con il campo successivo.
Nel form di esempio abbiamo: nome, nome utente, email, ripeti email, password, ripeti password, telefono, città e avatar.
Terminata la compilazione dei campi, salviamo e chiudiamo.
Pubblichiamo il nostro data storage (clicchiamo sul button rosso a destra)
Quello che dobbiamo fare adesso è creare una "view" del nostro storage e renderla compilabile al posto del form base di registrazione.
procediamo per passi:
1) Andiamo in gestioni utenti --> opzioni e disabilitiamo la registrazione. 2) Torniamo in Componenti --> CB --> Views e clicchiamo su nuovo. Inseriamo il nome della view e selezioniamo nel menu "type": contentbuilder 3) Clicchiamo su salva e la pagina verrà ricaricata: adesso scegliamo il "data storage" che vorremmo usare (sarà l'unico immagino) e clicchiamo nuovamente sul salva. 4) Rendiamo tutti i campi che adesso sono comparsi "include in list" e successivamente "editable". Una volta fatto vedremo che nella colonna "Editable" potremo gestire ogni singolo campo come crediamo (clicchiamo su "Edit" e settiamo il campo a nostro piacimento). Nel nostro esempio potremmo per esempio editare il campo "telefono" dicendo che deve essere al massimo di 10 cifre, o che le estensioni permesse per l'avatar sono solo "jpg, png, gif")
5) clicchiamo il tab "Content template"
"Create": mettiamo il flag su "Sample". (nell'immagine trovate anche il flag su "Articles"; al momento non serve)
"Auto Publish": check
Clicchiamo su salva. Al ricarico della pagina troveremo una tabella costruita con i campi di compilazione del form: nella prima colonna avremo i "titoli" nella seconda i "valori"
6) clicchiamo il tab "Editable template": mettiamo un check su "create sample" e salviamo. Comparirà anche questa volta una una tabella (avremo ancora nella prima colonna i nomi e nella seconda questa volta gli item)
7) Configuriamo adesso il processo di registrazione: clicchiamo sul tab "permission": avremo tre sezioni
- Backend: lasciamo stare per adesso
- Frontend: check su "public" alle voci "new" e "edit"
- Users: qui la cosa diventa importante:
1) spuntiamo "act as profile"
2) inseriamo nei menu a tendina i valori necessari così come li abbiamo inseriti quando abbiamo costruito il nostro Data Storage (nome, nome utente, email, ripeti email, password e ripeti password)
3) spuntiamo "force login after submission" in modo che una volta iscritto il nostro utente si debba loggare
4) "
5) Plugin Parameters: inseriamo "return-site:index.php;" (senza le virgolette)
Salviamo e chiudiamo.
Da ultimo creiamo una nuova voce di menu del tipo: "ContentBuilder"-->"Create" e selezioniamo la nostra View
Se tutto è andato a buon fine avremo il nuovo form di registrazione.
Compilato il form riceveremo una email di conferma (ovviamente dipende dal setting in "Utenti -->Gestione utenti-->Opzioni"). Cliccando sul link attiveremo il nostro account e potremo procedere al login. Se abbiamo settato "Attivazione nuovi utenti" su "nessuno" l'utente potrà accedere direttamente al login.
Personalizzare l'aspetto delle pagine di Joomla! con i Parametri dei Suffissi di Classe
Le pagine di Joomla! possono avere un determinato aspetto, mediante l'uso dei Cascading Style Sheets (CSS). Ciò comprende elementi quali: font, colori del testo, margini, background ecc... Il file CSS, solitamente denominato template.css, è parte integrante del template, all' interno del quale si trovano tutte le "informazioni" per la presentazione del sito.
Possiamo affermare che quando Joomla! crea una pagina, crea diverse classi CSS, le quali vengono applicate agli elementi HTML. Tutti i nomi delle classi sono già stati "pre-impostati" nel core di Joomla! Nonostante questo, il CMS permette di modificarle o, addirittura, di aggiungerne delle altre mediante i parametri dei suffissi di classe. Potrebbe sembrare di poco conto ma in questo modo è possibile personalizzare determinate pagine senza nessuna conoscenza particolare di programmazione e con pochissimo lavoro. Il miglior modo per capire di cosa si sta trattando, è quello di vedere degli esempi specifici.
Quando utilizzare i Suffissi Classe CSS
Poniamo il caso che il nostro sito web contenga un determinato numero di Layout Blog Categoria, ognuno per ogni Categoria, appunto. Se si desidera avere tutte queste pagine con la stessa visualizzazione, allora non è il caso di utilizzare i Suffissi di Classe CSS per la pagina. Ma ammettiamo che si desidera avere ciascuna Categoria con uno stile diverso rispetto alle altre; ad esempio un colore o una immagine di sfondo. Ancora, potremmo desiderare che il colore del titolo della pagina sia differente da quello delle altre.
In entrambi i casi, se si modificasse lo stile nel file template.css, tale formattazione interesserebbe tutte le pagine che hanno l'aspetto Layout Blog Categoria; un esempio potrebbe essere la classe "componentheading", comune alla maggior parte delle pagine.
Tuttavia, se si aggiunge un Suffisso di Classe CSS alla pagina, mediante la voce di menu, Joomla! creerà nuove classi CSS per ogni singola voce, in modo da avere, per ciascuna di essa, uno stile diverso.
Page Class Suffix
Prima di cominciare a vedere gli esempi, accertarsi che si disponga di un sito web con Joomla! installato e che il template di default sia il rhuk_milkyway. Se così non fosse, lo si potrebbe fare dal pannello di amministrazione, portandosi sulla voce di menu Estensioni → Gestione Templates ed impostarlo come predefinito. Ovviamente possiamo utilizzare qualsiasi template ma, per trovare una corrispondenza tra l'articolo e gli esempi, sarebbe bene avere lo stesso template.
Visualizzare una pagina senza il Page Class Suffix
Prima di aggiungere un Suffisso di Classe per la pagina, vediamo quale è la visualizzazione standard.
Nel front-end del sito scegliere dal menu "Pagine di esempio" la voce "Blog Categoria". Si apra la pagina in vista codice. Con il comando "Cerca", immettere nel campo di testo la parola "componentheading". Dovremmo trovare un codice simile al seguente:
<div class="componentheading">
Andando ancora in basso, sempre nel codice, dovrebbero esserci i seguenti tag:
La screen di seguito riporta formattazione del div componentheading. Esso racchiude il titolo della pagina, prima dell' articolo:
<div class="componentheading"> Esempio aspetto di una categoria blog (Categoria FAQ/Generale) </div>
L'immagine successiva, invece, mostra la tabella alla quale è stata assegnata la classe "blog" ed all'interno della quale si trovano tutti gli articoli:
Come si può notare dalle 2 immagini, è molto semplice individuare sia gli elementi nel codice sorgente della pagina che nel file CSS. Per l'esempio in oggetto è stato sufficente assegnare un bordo al <div class="componentheading"> ed un altro bordo, più colore di background, alla <table class="blog">.
La prossima screen mostra la tabella con la classe "contentpaneopen" per il titolo dell'articolo. Essa comprende il titolo dell'articolo più i pulsanti PDF, Stampa ed Email:
L'immagine seguente mostra la classe "contentpaneopen" che contiene il nome dell'autore, la data, il corpo dell'articolo e, in basso, l'ultimo aggiornamento apportato all'articolo:
Questa breve panoramica ci permette di comprendere come Joomla! presenta gli elementi di un Layout Categoria Blog , formattato attraverso il codice contenuto nel file "template.css".
Utilizzare Page Class Suffix
Adesso che abbiamo visto la pagina senza la Page Class Suffix, proviamo ad implementarne una. Nel backend di Joomla, portarsi alla voce "Menu → Pagine di Esempio → Blog categoria. Nella parte destra della pagina, Parametri, selezionare "Parametri - Sistema". Nel campo di testo, accanto alla label "Suffisso class CSS pagina" inserire il valore: "-mySuffix" e salvare dal pulsante in alto a destra.
Si torni nel frontend del sito e si aggiorni la pagina; selezionare la voce del menu "Pagine di esempio → Blog categoria". Si noterà immediatamente che è stato perso lo stile dato precedentemente alla pagina ed ora vedremo il motivo. Si apra la pagina in vista codice e con il comando "Cerca" si trovino le occorrenze del suffisso inserito precedentemente: "mySuffix"; avremo il codice come quello riportato di seguito:
<div class="componentheading-mySuffix">
Esempio aspetto di una categoria blog (Categoria FAQ/Generale)
</div>
Se si guarda il codice sorgente, dovremmo avere anche le seguenti classi:
Cosa è successo alla pagina? Con l'aggiunta del Page Class Suffix, sono stati cambiati tutti i nomi delle classi. Questo significa che lo stile CSS iniziale, il quale si riferiva a tutti gli elementi di "base" (come componentheading, blog ecc..), non verrà più applicato perchè non esiste più.
Il problema lo si risolve editando, o modificando, il codice CSS contenuto nel file "template.css", aggiungendo lo stile per la nuova classe:
div.componentheading-mySuffix;
table.blog-mySuffix;
table.contentpaneopen-mySuffix;
td.contentheading-mySuffix
Esiste anche un modo più semplice per avere la classe personalizzata su un elemento; basta aggiungere uno spazio prima del parametro:
Salvare e tornare nel frontend. Aggiornare la pagina e lo stile iniziale è riapparso. Vediamo nel codice sorgente cosa è successo. Con il comando "Cerca", troviamo la prima occorrenza del suffisso inserito: "mySuffix". Adesso abbia
div.componentheading mySuffix;
table.blog mySuffix;
table.contentpaneopen mySuffix;
td.contentheading mySuffix
Poichè abbiamo messo uno spazio nel Page Class Suffix, è come se avessimo creato una seconda classe anzichè cambiare il nome della prima (questo è accettato da tutti i browser moderni). Quindi non abbiamo alcuna interruzione degli attuali stili CSS per questa pagina. L'unica cosa della quale ci si deve accertare è che il nuovo nome della classe sia diverso rispetto a qualsiasi altra classe utilizzata nella pagina; ciò potrebbe causare una "stilizzazione" non desiderata.
La nuova classe creata, anteponendo uno spazio alla Suffisso Classe CSS Pagina, prende il nome di "mySuffix"; se volessimo, per puro esempio, un titolo pagina con colore di background celeste, bordo rosso e scritta di colore bianco, possiamo scrivere:
La classe associata funziona bene per il nostro esempio in quanto le altre classi sono assegnate all'elemento "table" e non al tag "div". Sarebbe bene essere più specifici con il codice CSS per il selettore, nel foglio di stile, formattando gli elementi che contengono sia la classe di base che la nuova classe. Per esempio, se volessimo formattare la tabella che contiene tutti gli articoli, dovremmo scrivere:
.blog.mySuffix {background-color: #FAFAD2;}
Specifichiamo, in questo modo, che il nuovo stile verrà applicato agli elementi che hanno contemporaneamente la classe "blog" e "mySuffix". Avremo un colore di background per tutto il "blog" come mostrato nella successiva immagine:
Il motivo che rende molto potente la creazione della classe con il trucco dello spazio, è che non si devono copiare - e doppiare - tutti gli stili delle classi di base. Possiamo individuare soltanto lo stile che vogliamo e scrivere il codice CSS per esso.
In questo esempio abbiamo trattato la visualizzazione Blog - Categoria. I nomi delle classi per i diversi componenti possono essere differenti, ma il processo sarà lo stesso. La tabella seguente mostra alcuni layout comuni di Joomla! ed un elenco di classi che possono avere un Page Class Suffix aggiuntivo:
anteporre lo spazio per creare una nuova classe CSS;
cercare nel codice della pagina dove si trovano le nuove classi e le classi di base;
per semplificare il tutto, avvalersi di Firebug per individuare gli elementi corrispondenti a determinate zone della pagina;
aggiungere il codice css personalizzato in un punto preciso del file "template.css", specificando sia il nuovo nome della classe che il quello di base evitando, in questo modo, conflitti apparentemente irrisolvibili nel frontend.
Module Class Suffix
Il parametro Module Class Suffix funziona nello stesso ed identico modo del Page Class Suffix. Vediamo subito un esempio con un modulo presente di default: Ultime Notizie. Portarsi nell'area di amministrazione di Joomla! e dal menu superiore orizzontale selezionare: Estensioni → Gestione Moduli → Ultime Notizie. Entrare nella modalità editing del Modulo per apportare modifiche; inserire il nome di una classe nel campo di testo contrassegnato dalla label: Suffisso classe CSS modulo, come nell'immagine seguente:
Per l'esempio ho aggiunto il Suffisso "LatestClass"; da notare che il suffisso è preceduto da uno spazio. Si torni nel frontend del sito e si visualizzi il codice sorgente della pagina. Con il comando "Cerca" inserire l'occorrenza "LatestNews". Avremo il codice simile a quello seguente:
<div class="moduletable LatestClass">
per quanto riguarda il <div>; per l'elemento <ul>, invece:
<ul class="latestnews LatestClass">
Le classi "moduletable" e "LatestClass" sono create automaticamente. La nuova classe "LatestClass" è stata creata in quanto il Suffisso classe CSS modulo comincia con uno spazio. Adesso proviamo ad usare la nuova classe ed aggiungere qualche stile personalizzato. Nel file template.css aggiungere:
div.LatestClass {background-color:#FFFFD2;}
div.LatestClass h3,
ul.LatestClass,
ul.LatestClass a
{color:#8B4513;}
Salvare il file ed aggiornare la pagina. Dovremmo avere un risultato simile al seguente:
Il selettore div.LatestClass imposta il colore di sfondo dell'area intera del <div>. I 3 selettori: div.LatestClass h3, ul.LatestClass, ul.LatestClass a impostano il colore del testo per il titolo h3, i punti elenco del tag ul e del tag "a".
Non interferire con le classi CSS esistenti
Nei menu si deve fare attenzione a non creare conflitti con le classi già esistenti. Vediamo come funziona. Nell'amministrazione di Joomla! portarsi su Estensioni → Gestione Moduli ed entrare nel "Menu Principale". Espandere il tab: Parametri Avanzati. Notare che il Suffisso classe CSS modulo è impostato su "_menu", senza spazio iniziale. Portarsi nella home page del sito e vedere il codice della pagina:
<div class="module_menu">
Si noti che alla classe è stato dato il nome "module_menu" come impostato nel Suffisso CSS del modulo. Il codice CSS per tale classe la troviamo nel file "blue.css". Al menu viene assegnata una immagine di sfondo con bordi di colore blue intorno al menu. Proviamo ad eliminare il suffisso CSS per il modulo; ritorniamo nella home page del sito ed aggiorniamo la pagina. Nessuna stilizzazione apparirà attorno al menu. Questo sta a dimostrare un punto molto importante: tutti i moduli esistenti, in particolare i menu, dipendono dalle classi assegnate e dai suffissi impostati. Questo per dire che si deve fare molta attenzione quando andiamo a modificare qualcosa di già pre-formattato.
Cosa accadrebbe se si volesse aggiungere una seconda classe al menu principale? Proviamo a scrivere, dopo il Suffisso esistente, un altro che possiamo chiamare myMenuStyle, lasciando uno spazio tra i nomi delle due classi. Possiamo salvare ed aggiornare il frontend. Non viene ancora modificato nulla, a livello di visualizzazione, in quanto non esiste nessun codice CSS per tale classe. Nel foglio di stile scriviamo:
div.myMenuStyle{font-size:14px;}
Portare in remoto il file .css ed aggiornare il sito. Il testo del Menu Principale adesso ha una dimensione differente, per il font, rispetto agli altri menu. Molto comodo per personalizzare un solo menu e lasciare intatti tutti gli altri.
ID Tag Menu e Suffisso classe CSS menu
Tutti i moduli di base permettono di inserire, per quanto visto sino ad ora, un suffisso per creare una nuova classe. I Moduli Menu hanno due parametri aggiuntivi:
ID tag menu
Suffisso classe CSS menu
Vediamo come possiamo sfruttare questi altri due parametri.
ID Tag Menu
Portiamoci nell'area di amministrazione ed entriamo nell' editing del modulo "Menu Principale". In corrispondenza della label "ID tag Menu" scriviamo nel campo di testo: myID. Parallelamente dovremmo inserire il codice CSS nel relativo file template.css:
#myID{list-style-type: square;}
Salvare il file e trasferirlo in remoto. Aggiornare la pagina ed ecco che solo il menu principale ha, al posto dei bullets di default, il quadratino, come appena stabilito da codice.
Suffisso classe CSS Menu
Il Suffisso classe CSS Menu aggiunge una classe extra per le liste non ordinate. Se viene lasciato così com'è, il suffisso è, di default, "menu". Se aggiungiamo un suffisso tipo "_myClass" nel tab dei Parametri Avanzati → Suffisso classe CSS Menu, avremo: "menu_myClass".
Se andiamo nel frontend e cerchiamo "Menu principale", troveremo i seguenti tag:
Da questo si evince come è possibile creare classi al volo con Joomla! e personalizzare ulteriormente un elemento rispetto a tutti gli altri.
Conclusioni
I parametri Class Suffix e ID Tag Menu consentono di avere una migliore stilizzazione del proprio sito web. Con l'introduzione dello spazio, dopo il suffisso esistente, si possono creare delle nuove classi. Questo, normalmente, è il metodo preferito in quanto il nuovo nome della classe non entra in conflitto con una pre-esistente lasciando intatta tutta la presentazione del sito.
Come aggiornare Joomla in automatico e manualmente
Joomla possiede una funzione integrata chiamata “Aggiornamento di Joomla!” che si trova nel backend cliccando su Componenti\Aggiornamento di Joomla!
Il primo passo è quello di eseguire un Backup dell’attuale installazione, se non sai come fare, leggi l’articolo come fare un backup di un sito Joomla.
Metodo 1 – Joomla Update
Effettuando l’accesso al backend di Joomla ci viene segnalato che è presente un aggiornamento tipo “ Joomla! 2.5.19 Aggiorna adesso!”
Cliccando sull’icona si viene reindirizzati al componente Joomla Update che si occuperà di effettuare l’aggiornamento.
Come metodo di installazione selezionare “Scrivi direttamente file” e successivamente premere “Installa l’aggiornamento” ; partirà il download del pacchetto di aggiornamento, verrà automaticamente scompattato ed installato.
Al termine dell’installazione disconnettersi e riconnettersi dal backend.
Metodo 2 – Come eseguire un aggiornamento manuale di un sito Joomla
Il metodo alternativo è quello di eseguire l’aggiornamento manualmente sovrascrivendo i file via FTP; diciamo che questo metodo consiglio di utilizzarlo sono in caso in cui il metodo 1 non dovesse andare a buon fine.
In questo caso la procedura è più complessa e richiede un minimo di dimestichezza con l’ftp, potete utilizzare FileZilla che è un client gratuito disponibile per Mac Os, Linux e Windows.
A questo punto è necessario scaricare la patch di aggiornamento del core da qui http://www.joomla.it/download, scompattando il pacchetto zip ed aprendo la cartella troverete la lista dei file aggiornati e da caricare in ftp.
Ora è necessario collegarsi in ftp al sito internet e portarti nella cartella dove è stato installato Joomla.
Ora selezionare tutti i file dalla cartella contenente l’aggiornamento Joomla e trascinarli all’interno dell’area ftp,un messaggio avviserà che i file sono già presenti e se si desidera sovrascriverli, premere si ed attendere la fine della copia.
Ora il core è aggiornato, ma se vi collegate al backend è probabile che alcune parti siano tradotte in inglese, questo perché la patch non contiene il file di lingua italiana, quindi per aggiornare anche i file di lingua procedere come segue.
Scaricare il file di lingua da qui http://www.joomla.it/download/ , scompattare il file zip, selezionare tutti i file e trascinarli all’interno dell’area ftp sovrascrivendo quelli esistenti.
Una delle proprietà più interessanti introdotte con i CSS3 è sicuramente il border-radius. Ci consente di arrotondare i bordi della maggior parte degli elementi di una pagina, permettendoci quindi di evitare l’utilizzo di immagini di background per tale effetto.
L’utilizzo della regola è davvero molto semplice. La sua sintassi è la seguente:
Rispettivamente, da sinistra verso destra, i valori si riferiscono a:
angolo superiore sinistro;
angolo superiore destro;
angolo inferiore sinistro;
angolo inferiore destro;
come possiamo vedere nell’immagine di Figura 1.
Figura 1 – Bordi
Quando i valori sono tutti uguali possiamo usare la notazione breve come per i valori dei margini, dei padding o dei bordi.
Assegnando un solo valore alla proprietà, tutti i bordi assumeranno quel valore. Quindi una regola come la seguente:
.border-radius { border-radius: 10px; }
è del tutto equivalente alla prima regola vista nella lezione.
Compatibilità con i browser
La regola che abbiamo appena vista, allo stato attuale e nella sintassi specifica, è compatibile solo con Opera e Internet Explorer 9. Tutti gli altri browser non la interpretano ma, ad eccezione ovviamente di Internet Explorer nelle versioni precedenti alla 9, altri forniscono un’alternativa proprietaria.
Ci occuperemo di Internet Explorer al termine della lezione, vediamo ora il codice necessario a rendere compatibile i bordi arrotondati con tutti gli altri browser:
.border-radius {
border-radius: 10px;
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
}
Internet Explorer ed i bordi arrotondati
Per Internet Explorer nelle versioni precdenti alla 9 non esistono soluzioni proprietarie ma in rete è possibile trovare una miriade di tecniche, pulite o meno, per evitare l’utilizzo di immagini per tale browser.
Tra le tante a disposizione abbiamo scelto una tecnica che fa uso di Javascript poiché la maggior parte delle tecniche che fanno uso del solo CSS sporcano il codice con codice aggiuntivo e/o richiedono almeno un’immagine per funzionare. La tecnica è stata implementata da Cameron Cooke ed è disponibile un’ampia documentazione sul sito ufficiale.
Lo script è molto semplice da utilizzare e ha moltissime impostazioni avanzate degne di nota. Ne è stato implementato anche un porting in jQuery ma, per non dipendere da alcuna libreria, in questa lezione useremo lo script originale.
Vediamo all’opera il suo funzionamento:
addEvent(window, 'load', initCorners);
functioninitCorners() {
varsettings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(settings, "#round"); //#round corrisponde all'id del div
}
Per evitarne il funzionamento anche per i browser che supportano i bordi arrotondati, è consigliabile includere il codice Javascript all’interno di un commento condizionale. Il codice finale, quindi, è il seguente:
