Come creare in joomla un form di contatto con seblod

Ricevere feedback dai visitatori del nostro sito web è fondamentale, poiché permette di raccogliere informazioni da un potenziale cliente.

In JOOMLA il form per la gestione contatti è già integrato nell’installazione, ma non vi è la possibilità di:

  1. aggiungere una casella di controllo per accettare termini e condizioni sulla Privacy;
  2. inserire ulteriori campi;

Il modulo contatti che svilupperemo con SEBLOD, permetterà di personalizzare a nostro piacimento il form.

In questo articolo faccio riferimento alla nuova versione di SEBLOD 3.4.x compatibile sia con la versione 3.x che con la 2.x di JOOMLA.

Puoi vedere attraverso questo link la pagina della versione demo del form di contatto, sarai in grado di testare e renderti conto delle potenzialità di utilizzo di questa estensione..

Realizzare un modulo di contatto personalizzato

In questo articolo, vedremo un esempio completo di un form che consente d’inviare una email agli amministratori del sito, senza creare contenuti (articoli, categorie ecc.) caratteristica principale di SEBLOD.

La procedura per la creazione di un modulo, ne ho già parlato tempo fa in questo articolo Come creare un modulo personalizzato, consiglio di dare uno sguardo al tutorial, prima di continuare a leggere.

Dopo aver installato il componente SEBLOD, dall’area amministrativa:

  1. selezioniamo Componenti -> SEBLOD 3.x dal menu di navigazione principale;
  2. clicchiamo sul pulsante Form & Content Type Manager;
  3. facciamo click sul pulsante “nuovo” nella barra degli strumenti, e generiamo il nostro form;
Pulsante per creare il modulo contatti

Il nostro form, sarà formato da una sola vista il site(Front End), a differenza dei form creati negli articoli precedenti, con la gestione delle viste backend, intro, content.

Creare il Front End del form

Analizziamo la pagina che ci si mostra davanti, è la struttura del nostro form, non vado a spiegare tutte le varie aree presenti nella pagina, ne ho parlato nei tutorial di SEBLOD precedenti.

Selezioniamo il tab Site Form.
L’area si presenta con queste voci, nel primo riquadro troviamo i campi:

  1. Title: assegniamo il nome del modulo, nel nostro esempio “Form contatti“
  2. App Folder: scheda dove memorizzare il tipo di contenuto, lasciamolo con il valore di default.

Cliccando nella freccetta in basso, SEBLOD fa spuntare un secondo riquadro, con i seguenti elementi:

  1. Object: oggetto di JOOMLA, selezioniamo tipo Free. Dobbiamo selezionare questa voce, perchè il modulo richiesta informazioni che stiamo sviluppando, non deve creare contenuti(articoli, categorie, utenti), deve solamente inviare email, motivo per cui l’oggetto Free è più adatto al nostro form.
  2. Quick Menu: permette di rendere il modulo di contatto disponibile ai nostri utenti, associandolo ad una voce di menu. Nel nostro caso, lo collegheremo al menu principale, per far questo selezioniamo “Aggiungi a questo menu”.
freccetta per far apparire un ulteriore riquadro

Tutti gli altri elementi possono restare con i valori di default

Creare campi personalizzati

Il nostro modulo contatti sarà formato dai seguenti campi: Oggetto, Nominativo, Email, Messaggio, Codice Captcha, Checkbox Privacy.

La procedura per creare e posizionare un campo nel modulo è la stessa descritta nel tutorial Come creare form personalizzati, basta cliccare sull’icona con il simbolo del più nella colonna di destra.

Pulsante per creare un nuovo campo - joomla

Vediamo che ci sono diversi elementi: titolo, nome, tipo di campo, limiti di caratteri, valori predefiniti, formato dell’oggetto (Format / Object). I tipi di campo (type) a nostra disposizione, vanno dalle Checkboxe, radiobutton, text, editor, text area ecc.
Spiego meglio cosa serve l’opzione Format / Object, memorizza il valore del campo in una tabella del database di JOOMLA, l’esempio che stiamo sviluppando deve solamente inviare email, non deve creare nessun contenuto, quindi dobbiamo, selezionare il valore None nel campo Format / Object.

Tutti i nostri campi verranno creati con questo procedimento, cambierà soltanto il tipo di campo ed il titolo.
Per esempio, Oggetto sarà di tipo (text), Nominativo (text), Messaggio (Textarea), Codice Captcha (Math).

campo personalizzato - joomla

Creare altri campi – email di ricezione

Questo campo è più complesso.
Vediamo insieme le voci da impostare:

  1. Title: scriviamo “Email contatti”
  2. Label:digitiamo “Email”
  3. Type:scegliamo la voce email;
  4. Send E-mail: selezioniamo Submission, questo consentirà l’invio di una email alla creazione del messaggio;
  5. Form: impostiamo Field, spunta un seconda sezione From (E-mail / Field) dove inseriamo il nome del campo che contiene il valore dell’email del mittente, nel nostro caso il nome del campo è email_contatti
  6. Form Name: selezioniamo Field, fa spuntare la sezione From (Name / Field) inseriamo il nome del campo contenente il valore del nome del mittente, nel nostro caso è il campo nominativo;
  7. Subject: inseriamo l’oggetto dell’email, “Richiesta d’informazioni”;
  8. To: destinatari dell’email, per il nostro esempio non scriviamo nulla.
  9. To (Fields): nome del campo che contiene il valore dell’email del destinatario, per il nostro esempio lasciamolo vuoto;
  10. To (Administrators): scegliamo gli amministratori del sito a cui inviare l’email.
  11. Message: scriviamo il corpo del messaggio, il testo vero e proprio della nostra email (per inserire i valori dei campi all’interno del messaggio, dobbiamo scrivere il nome del campo seguito dal cancelletto(#) es: #nome_campo#)
  12. Message (Field): nome del campo che costituirà il testo del messaggio, per il nostro esempio non scriviamo nulla.
  13. Attachment: permette di allegare file all’email.
  14. CC: selezioniamo Field, spunta un seconda sezione CC (Email / Field) scriviamo “email_contatti” nome del campo che contiene l’email del mittente, in modo tale da inviare una copia dell’email a chi compila il form;

Infine selezioniamo la voce None nella sezioine Format / Object.

Campo Email

Al termine, dopo avere eseguito il salvataggio, il campo Email spunterà nell’area del nostro form.

Pannello elementi campo Email

Includere l’accettazione dell’informativa sulla privacy

Il box è formato da una casella di controllo (per rilasciare il consenso, per chi compila il modulo) e un link che rimanda alla pagina sulla Informativa della privacy.

Creiamo la casella di spunta:

  1. Title: scriviamo “Casella Privacy”
  2. Label: digitiamo il testo “Acconsento al trattamento dei miei dati personali”
  3. Type: scegliamo la voce Checkbox;
  4. Options: scriviamo il valore “Accetto le condizioni Privacy “
  5. Format / Object: selezioniamo il valore None.

Al termine non dimentichiamo di salvare le impostazioni appena eseguite.

Il nostro lavoro continua con la creazione del link al testo della privacy.

  1. Title: scriviamo “Link Articolo Privacy”
  2. Type: selezioniamo la voce Free Text;
  3. Label: digitiamo il testo “Cliccare qui, per l’informativa sulla privacy”
  4. Default Value: clicchiamo sull’editor, inseriamo il testo “Privacy Policy”, grazie alla barra dell’editor WYSIWYG del CMS, trasformiamo la frase in un link, collegandolo all’articolo privacy del sito.
  5. Format />Object: scegliamo il valore None.

Infine salviamo.

Nel nostro form ancora manca il pulsante per inviare l’email.

Creiamo un nuovo campo:

  1. type: selezioniamo submit;
  2. Label: scriviamo “Invio”

come al solito Salva e chiudi.

Rendere un campo obbligatorio

Il nostro modulo di contatto personalizzato è quasi terminato, manca solamente di definire i campi come obbligatori, in modo tale da avvertire l’utente con un messaggio di errore la mancata compilazione.
Per far ciò, selezioniamo il pulsante 3, posizionato nella colonna dei pulsanti, nel nostro ambiente di lavoro compare la colonna Required / Validation,

Rendere i campi obbligatori per la compilazione

clicchiamo sul pulsante optional relativo al campo;

  1. Required impostiamo il valore sul si;
  2. Alert scriviamo il testo per il messaggio di errore;

Infine salviamo.
Questa procedura verrà ripetuta sui campi Oggetto, Nominativo, Email, Messaggio, Casella di spunta per la privacy.

Abbiamo finito

Ancora no, dobbiamo salvare il nostro lavoro, forse può sembrare una banalità, ma a volte il lavoro che abbiamo fatto, viene perso solo perché non si è salvato. In alto a sinistra della nostra pagina c’è il pulsante Salva.

Salvare il form contatti

Test pratico della pagina contatti dal frontend

Ultimato il nostro modulo contatti, non c’è niente di meglio che testare, dal lato frontend, il nostro esempio. Quindi come se fossimo dei comuni utenti del sito, verifichiamo cosa succede quando selezioniamo la voce Form Contatti dal menù, compiliamo il modulo e selezioniamo il pulsante invia, un messaggio dell’avvenuta spedizione dei nostri dati ci appare.
Controlliamo se è arrivata l’email, contenente il messaggio che abbiamo inviato, devono arrivare due email una all’amministratore del sito, l’altra a l’utente che ha compilato il form.

Conclusione

Bene, se sei arrivato fino alla fine di questo articolo, sono sicuro che hai trovato informazioni e consigli utili per realizzare un form di contatto, rendendo più efficiente e professionale il sito web che stai creando con JOOMLA, grazie al componente SEBLOD 3.x.
Mi piacerebbe sapere anche cosa ne pensi, ricevere domande e feedbacks in generale.
Per ogni tua curiosità sono a tua disposizione, ci possiamo trovare nel box dei commenti.

Francesco Di Giovanni

7(+1) facili step per creare un template responsive Joomla 3.8 con Bootstrap 3

Se stai leggendo questo articolo, molto probabilmente perché sei stanco di template responsive gratuiti, pieni di bug, sviluppati con sintassi HTML e CSS poco pulita, pieni di errori del codice, e spesso con link degli sviluppatori nel footer, collegati a siti web di bassa reputazione difficili da rimuovere.

In questa guida cercherò di illustrarti in modo semplice ma al tempo stesso dettagliato, le tecniche e i passaggi fondamentali per creare un template responsive da zero per joomla 3.8 con del codice pulito e come installarlo nel CMS, ti spiegherò anche la struttura di base, i file che lo compongono e le righe di codice necessarie per le funzioni tipiche per un sito web con design responsivo.

Prima di iniziare, per comprendere meglio questo tutorial, dovresti conoscere, le basi dei principali linguaggi HTML, CSS e PHP.

Puoi vedere la demo del template responsive realizzato con il framework Bootstrap 3 al seguente link. Il sito web è in joomla 3.8, come puoi vedere ha una grafica minimale, uno stile essenziale, spogliato dal superfluo, per dare massimo spazio alla struttura degli elementi.

  1. A cosa serve il Framework Bootstrap 3
  2. Sviluppo rapido del layout con Bootstrap 3
  3. Convertire il layout in un template joomla 3.6
  4. Inserire le posizioni modulo nel template
  5. Abbellire l’aspetto estetico del sito web con i file CSS
  6. Risoluzione dei problemi che possono verificarsi con l’uso di Bootstrap 3
  7. Come installare il template nel CMS Joomla
  8. Tool per verificare se un sito è compatibile con i principali browser e dispositivi mobili

A cosa serve bootstrap 3

Bootstrap è un framework, contenente una serie di elementi e funzioni basati su HTML, CSS e JS per la creazione di interfacce Web dal design responsive e mobile-first. Bootstrap 3 rappresenta una delle soluzioni più utilizzate per creare layout che si adattano dinamicamente, in base al dispositivo utilizzato, sia esso desktop, tablet o smartphone.

In questo post non ti spiegherò le basi del framework Bootstrap 3, per un motivo molto semplice, è stato trattato innumerevoli volte, ma voglio consigliarti un tutorial sul sito w3schools.com/bootstrap, che può aiutarti a muovere i primi passi con il framework Bootstrap 3.

Sul sito web getbootstrap.com puoi trovare la documentazione e i link per il download dell’ultima release ufficiale.

Sviluppo rapido del layout bootstrap

Utilizzare Bootstrap in un layout non è molto complicato, ma richiede la conoscenza di regole e sintassi dei principali linguaggi HTML, CSS, esistono però degli editor online che permettono di generare tutta la struttura grafica, senza dover scrivere una riga di codice css e html, e integrarlo con Bootstrap in modo semplice, veloce e automatico.

Voglio consigliarti un editor chiamato Layoutit, uno strumento online utilizzabile gratuitamente, con cui è possibile realizzare in modo automatico, un layout basato su Bootstrap con estrema facilità.

Collegati al sito layoutit.com e clicca sul pulsante START NOW WITH BOOTSTRAP 3 per accedere ad un nuovo progetto, se vuoi creare una schermata nuova, clicca sul pulsante clear.

la gif animata mostra come creare un nuovo layout

L’interfaccia dell’editor layoutit si divide in due aree principali:

  • L’area di lavoro, che genera in tempo reale l’anteprima del layout, permettendo di selezionare, modificare, cancellare, ogni elemento, contenuto o struttura, presente nell’area di lavoro
  • La barra laterale sinistra, suddivisa in quattro tab principali: Grid system, Base CSS, Components, Javascript, dove vengono elencati griglie, immagini, form, pulsanti, Breadcrumb, Thumbnails, Carousel, che possono essere utilizzati nell’area di lavoro, semplicemente utilizzando l’interfaccia Drag And Drop.

Voglio soffermarmi sulla tab Grid system, perché è proprio quella che dovrai utilizzare per creare il layout web.

In questa sezione è possibile selezionare e trascinare le griglie all’interno dell’area contenuti, le griglie non sono altro che una suddivisione di righe e colonne collocate all’interno di un contenitore. L’utilizzo della griglia è dovuto al framework Bootstrap, che si basa su un sistema composto da 12 colonne con una larghezza espressa in percentuale.

Bene, ora che ho fatto un’introduzione e una panoramica sulle funzionalità dell’editor Layoutit, inizio ad elencare le principali sezioni del layout.

sezioni della struttura grafica del template

la struttura grafica ha bisogno di quattro righe principali:

Header sezione formata da due colonne: nella colonna di sinistra, verrà inserito un contenuto grafico o testuale, formato dal nome o dal logo del sito web. La colonna di destra, includerà la barra di navigazione, contenente link alle pagine principali del sito web.

Slideshow, area formata da una singola colonna, contenente il modulo per la sequenza di immagini che scorrono automaticamente.

Content, è la parte principale del layout, formata da due colonne, la prima è l’area contenuti, la seconda riservata alla barra laterale (sidebar).

Footer questa sezione è formata da una sola colonna, è conterrà le Informazioni del copyright, indirizzo e dati societari e posta elettronica.

È arrivato il momento di inserire le griglie che corrispondono agli elementi del nostro layout.

Ogni elemento viene inserito tramite Tab Grid System.

Il primo elemento è l’header, utilizzando l’interfaccia drag & drop, trascina dal grid system, una griglia 6/6, cioè formata da una riga e da due colonne, nel punto desiderato dell’area contenuti e precisamente all’interno del Container.

creare elemento header nel layout

Il secondo elemento è lo Slideshow, con la funzionalità del drag and drop sposta una griglia 12, formata da una riga e da una colonna sempre all’interno del contenitore.

Il terzo elemento è il Content, sempre con il drag & drop aggiungi una griglia 8/4, formata da una riga e da due colonne, con larghezza diversa, all’interno dell’area contenuti.

Il quarto e ultimo elemento è il Footer, inserisci una griglia 12 nel layout.

Il risultato sarà questo

area di lavoro con layout finale

Il layout è terminato, premendo il tasto Download comparirà un popup, con il codice sorgente, copialo e incollalo in un file nominato index.php.

<div class="container-fluid">
	<div class="row">
		<div class="col-md-6"></div>
		<div class="col-md-6"></div>
	</div>
	<div class="row">
		<div class="col-md-12"></div>
	</div>
	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-4"></div>
	</div>
	<div class="row">
		<div class="col-md-12"></div>
	</div>
</div>

Come trasformare il layout HTML in un template joomla 3.8

Creata la struttura grafica del sito web, bisogna apportare alcune modifiche e inserire il codice necessario per trasformarla in un markup joomla.

Con un editor di testo (Blocco note, Notepad++, ecc) apri il file index.php.

Inserisci la prima stringa , che verifica se il file viene richiamato all’interno del CMS Joomla, serve per aumentare la sicurezza del template.

<?php defined( '_JEXEC') or die('Restricted access');?>

Successivamente inserisci la stringa, che fornisce le informazioni sul tipo di documento, nel nostro caso HTML5.

<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Crea il <strong>tag html</strong>, i parametri all'interno del tag definiscono la lingua del sito.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Dopo la dichiarazione del tag html, devi creare la sezione head, al suo interno, inserisci la seguente stringa

<jdoc:include type="head"/>

che include nella pagina, il title, meta tag, e alcuni file javascript.

Sempre all’interno del tag head copia questa riga di codice

<meta name="viewport" content="width=device-width, initial-scale=1">

che consente alla pagina di adattarsi ai browser dei dispositivi mobili.

Le seguenti righe di codice collegano il layout ai fogli di stile.

Queste due stringhe sono i file css di sistema.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

Questa istruzione inserisce il file template.css, che raccoglie le regole che definiscono gli attributi di formattazione (colore, font, bordi etc etc) applicabili al template.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />

É arrivato il momento di integrare nel file index i fogli di stile di Bootstrap 3,

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.min.css" type="text/css" />

Esiste un’altra soluzione per utilizzare il framework Bootstrap in un sito web, ed è quella di includere i file richiamandoli da una CDN(Content Delivery Network), ovvero da un server che mette a disposizione questi file per il pubblico. Il vantaggio di utilizzare questa soluzione e la riduzione del tempo di caricamento delle pagine.

questa riga di codice permette di richiamare il file Bootstrap da CND

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Per sfruttare le novità introdotte da HTML5, e permettere una migliore resa dei vari elementi HTML nei diversi browser (cross-browser), ti suggerisco di includere un piccolo file CSS chiamato Normalize.css. Scarica l’ultima versione dal sito: necolas.github.io/normalize.css/, copialo in un file chiamato normalize.css e inseriscilo nella cartella CSS del template.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/normalize.css" type="text/css" />

anche questo file può essere richiamato da una CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css ">

Ora non ti resta che chiudere il tag head.

La sezione head verrà in questo modo.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
    <jdoc:include type="head"/>	
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/normalize.css" type="text/css" />
</head>

con istruzioni CDN

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
    <jdoc:include type="head"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css ">    
</head>

A questo punto non resta che impostare il body, per inserire i file javascript, consiglio sempre di metterli alla fine del tag.

il primo file è quello di bootstrap

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.min.js"></script>

per richiamarlo da una CDN

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

il secondo file è scripts.js

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

la sezione body verrà in questo modo.

<body>  
<div class="container-fluid">
	<div class="row">
		<div class="col-md-6"></div>
		<div class="col-md-6"></div>
	</div>
	<div class="row">
		<div class="col-md-12"></div>
	</div>
	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-4"></div>
	</div>
	<div class="row">
		<div class="col-md-12"></div>
	</div>
</div>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.min.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
</body>

con istruzioni CDN

<body>  
<div class="container-fluid">
	<div class="row">
		<div class="col-md-6"></div>
		<div class="col-md-6"></div>
	</div>
	<div class="row">
		<div class="col-md-12"></div>
	</div>
	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-4"></div>
	</div>
	<div class="row">
		<div class="col-md-12"></div>
	</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
</body>

Inserire le posizioni modulo nel template del CMS

Le posizioni, non sono altro che dei segnaposti che permettono di posizionare in determinate aree all’interno della pagina, i contenuti dinamici generati dai componenti o moduli installati del template.

Bene. Adesso vediamo come inserire queste speciali istruzioni.

Il codice che devi inserire è definito Jdoc statements,

<jdoc:include type="modules" name="mainmenu" style="none" />

Questo è un tipico jdoc statement che puoi trovare in un classico tema di joomla, i vari attributi presenti in questa riga di codice sono:

  1. L’attributo type specifica che tipo di oggetto deve essere inserito nella posizione, accetta i seguenti valori:
    1. module, utilizzato per creare una posizione, a cui verranno associati i moduli.
    2. component, adoperato per visualizzare i contenuti generati dai componenti installati in joomla, per citarne alcuni gli articoli, gallerie di foto.
    3. head, questo elemento è stato già trattato, permette di inserire nella pagina web, il title, e i meta tag.
    4. message usato per mostrare i messaggi di errore ed i rendering di sistema generati dal CMS.
  2. L’attributo style, modifica l’output HTML generato dal modulo, ammette i seguenti valori: rounded, none, horz, table, xhtml, outline e html5, per maggiori informazioni visita questa pagina web docs.joomla.org/Standard_Module_Chromes
  3. L’attributo name, identifica la posizione e serve da riferimento per la disposizione dei moduli, dal backend di Joomla.

Questo è l’html della sezione body, con i vari jdoc statements. Come puoi vedere nel markup HTML sono stati aggiunti alcuni attributi Id, che serviranno per gestire il file css.

<body>  
<div class="container-fluid">
        <div class="row" id="header">
            <div class="col-md-6" id="logo"><h1>Nome Sito Web</h1></div>
            <div class="col-md-6" id="headermenu"><jdoc:include type="modules" name="mainmenu" title="Main Menu" style="none"/></div>
        </div>
        <div class="row" id="slideshow">
			<div class="col-md-12"><jdoc:include type="modules" name="slideshow" title="slideshow" style="html5"/></div>
		</div>
        <div class="row" id="areacontent">
            <div class="col-md-8" id="content">
            <jdoc:include type="modules" name="breadcrumb" title="Percorso di navigazione" style="none"/>
            <jdoc:include type="message" />
            <jdoc:include type="component" />
            </div>
            <div class="col-md-4" id="sidebar_right"><jdoc:include type="modules" name="sidebar" title="Menu sidebar" style="html5"/></div>
        </div>
        <div class="row" id="footer">
            <div class="col-md-12"><jdoc:include type="modules" name="footer" title="Footer" style="html5"/></div>
        </div>
</div> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
</body>

Creare il file templateDetails.xml

Il templateDetails è un file XML che fornisce informazioni sul template, contiene al suo interno l’elenco delle posizioni dei moduli, le cartelle e i file necessari per il tema.

Un esempio completo di questo file è il seguente:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.6" type="template" client="site">
  <name>miotemplatebootstrap</name>
  <creationDate>07-27-2016</creationDate>
  <author>Francesco Di Giovanni</author>
  <authorEmail>francescodigiovanni@example.com</authorEmail>
  <authorUrl>http://www.fdigweb.it/</authorUrl>
  <copyright>Francesco Di Giovanni 2016</copyright>
  <license>GNU/GPL</license>
  <version>1.0.2</version>
  <description>Joomla Template bootstrap</description>
  <files>
	<filename>index.php</filename>
	<filename>templateDetails.xml</filename>
	<folder>images</folder>
	<folder>css</folder>
	<folder>js</folder>
	<folder>fonts</folder>
  </files>
  <positions>
	<position>breadcrumb</position>
	<position>slideshow</position>
	<position>mainmenu</position>
	<position>sidebar</position>
	<position>footer</position>
  </positions>
</extension>

il file templateDetails si divide in tre sezioni principali:

La prima sezione contiene le seguenti informazioni, nome del template, data di creazione, informazioni di contatto (nome, email, sito web dell’autore), numero di versione e una breve descrizione.

La seconda sezione include tutti i file e le cartelle presenti nella root principale della directory del template.

La terza sezione contiene l’elenco delle posizioni definite nel codice html della pagina index.php

Abbellire l’aspetto estetico del sito web con i file CSS

Quello che manca ora è il foglio di stile, ovvero il file CSS (Cascading Style Sheets), al cui interno sono elencate le regole che servono a migliorare l’aspetto della pagina web. Attraverso i CSS si possono definire colori, dimensioni, immagini di sfondo e tutto quello che concernere l’aspetto visuale degli elementi presenti nel sito web.

Ti segnalo una guida dedicata all’uso dei fogli di stile, che possono aiutare ad approfondire la tua conoscenza sull’argomento.

www.w3schools.com/css/default.asp

Crea il file template.css in una cartella chiamata CSS e aggiungi le seguenti classi e righe di codice all’interno del documento.

Le seguenti istruzioni CSS, puoi prenderle come punto di partenza e modificarli come meglio credi, adattandoli ai tuoi gusti.

#logo{
  padding:20px;
} 
 
#header {
  height: 90px;
  background-color:#000;
  color:#999;
  text-align:center;      
}
 
#areacontent {
  max-width:1200px;
  margin:20px auto;
}
#sidebar_right {
  text-align: center;      
  min-height: 400px;
}
 
#footer {
  min-height: 200px;
  background-color:#000;
  color:#999;
  text-align:center;
  padding-top:20px;
}
@media only screen and (min-width: 768px) {
  #header #menuprincipale>ul > li{
	  display: inline;		
  }	  
  #header #menuprincipale>ul>li>a{
	  display: inline;		
  }	 
  #header #menuprincipale.collapse {
	  display: inline;
  } 
  #headermenu{
	  margin-top: 35px;
  }
  #content {
	  text-align: left;
	  min-height: 400px;
	  border-right: 2px solid #999999;
  } 
 
/* §§§§§§§§§§§§§§§§§§§§§§§§ - Form Contatti - §§§§§§§§§§§§§§§§§§§§§§§§ */			
  #areacontent .form-horizontal .control-label {
	  text-align: left; 
  }
/* §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */			
}
 
@media only screen and (max-width: 767px) {
  #titleicon{
	  display: block;
  }
  #header {
	  height: 140px;	      
  }
  #logo{
	  padding:10px;
  }
  #headermenu .navbar-toggle{
	  border: 2px solid #fff;
	  margin:0;
	  float:none;
  }
  #headermenu{
	  z-index: 6;
	  padding:0;
  }
  #txtnavbartoggle{
	  width:90px;
	  float:right;
	  margin-top: -4px;
  }
  #txtnavbartoggle p{
	  margin:0 0 0 30px;
	  font-size:18px;
  }
}

Personalizzare il menu principale

Creata la veste grafica del template, bisogna affrontare più nello specifico il menù principale, il classico menu orizzontale, generalmente posizionato nelle vicinanze dell’header.

Per la barra di navigazione bisogna creare gli stili css e gli scripts js, che permettono di modificare l’aspetto ma soprattutto renderlo cross-device.

Nel file index.php bisogna modificare l’html della sezione body.

<body>
    <div class="container-fluid">
        <div class="row" id="header">
            <div class="col-md-6" id="logo"><h1>Nome Sito Web</h1></div>
            <div class="col-md-6" id="headermenu">
            	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menuprincipale"> 
                	<div id="txtnavbartoggle"><p>MENU</p></div>
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span>
                </button>
				<div id="menuprincipale" class="collapse">
            		<jdoc:include type="modules" name="mainmenu" title="Main Menu" style="none"/>
                </div>              
            </div>
        </div>
        <div class="row" id="slideshow">
            <div class="col-md-12"><jdoc:include type="modules" name="slideshow" title="Slideshow" style="html5"/></div>
        </div>
        <div class="row" id="areacontent">
            <div class="col-md-8" id="content">
            <jdoc:include type="modules" name="breadcrumb" title="Percorso di navigazione" style="none"/>
            <jdoc:include type="message" />
            <jdoc:include type="component" />
            </div>
            <div class="col-md-4" id="sidebar_right"><jdoc:include type="modules" name="sidebar" title="Menu sidebar" style="html5"/></div>
        </div>
        <div class="row" id="footer">
            <div class="col-md-12"><jdoc:include type="modules" name="footer" title="Footer" style="html5"/></div>
        </div>
	</div>
 
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
  </body>

La modifica ha interessato il div con l’id headermenu che costituisce la barra di navigazione, formata da due sezioni:
La prima sezione contiene il pulsante con la classica icona ad hamburger, che permette l’attivazione del menu sui dispositivi mobili, mentre su desktop rimane invisibile, come puoi notare ho inserito varie classi e attributi che permettono al pulsante di interagire con i file css e js di bootstrap, per esempio class=”navbar-toggle” data-toggle=”collapse” e data-target=”#menuprincipale” il valore di quest’ultimo attributo deve corrispondere all’ID del menu.
La seconda sezione, quella con l’id “menuprincipale” gestisce il menu vero e proprio.

Se vuoi approfondire le classi di bootstrap ti linko una risorsa interessante http://getbootstrap.com/javascript/

Questo è il codice CSS del menu, da inserire nel file template.css

/* §§§§§§§§§§§§§§§§§§§§§§§§ - MENU PRINCIPALE - §§§§§§§§§§§§§§§§§§§§§§§§ */	
#menuprincipale a:link, #menuprincipale a:visited, #menuprincipale a:hover{
	font-size:20px;
}
.icon-bar{
	background-color: #fff;		
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
}
#menuprincipale .nav>li>a:focus, #menuprincipale .nav>li>a:hover{
	text-decoration: none;
	background-color: #000;
	padding-bottom:30px;
	padding-top:30px;
	color:#fff;
}
#menuprincipale .nav>li.active>a{
	text-decoration: none;
	color:#fff;
}
#menuprincipale .nav-child>li>a:focus, #menuprincipale .nav-child>li>a:hover, #menuprincipale .nav-child>li>a:active {
	background-color: #fff;
	text-decoration: none;
}
#menuprincipale .nav-child {
	display:none;
	background-color:#fff;
	position: absolute;
	left: 0px;
	padding: 0;
	list-style: none;
	z-index:20;
	top: 47px;
	width: 100%;			
}
#menuprincipale .nav-child>li {
	padding:10px;
}
@media only screen and (min-width: 768px) {
  #menuprincipale .nav-child {			
	  border-right: 2px solid #000;
	  border-bottom: 2px solid #000;
	  border-left: 2px solid #000;	
	  border-bottom-left-radius: 10px;
	  border-bottom-right-radius:10px;			
	  -webkit-border-bottom-left-radius: 10px;
	  -moz-border-bottom-right-radius: 10px;
  }
}
@media only screen and (max-width: 767px) {
  #menuprincipale .nav>li>a:focus, #menuprincipale .nav>li>a:hover, #menuprincipale .nav>li>a:active {
	  background-color: #eee;
  }
  #menuprincipale .nav-child>li>a:focus, #menuprincipale .nav-child>li>a:hover, #menuprincipale .nav-child>li>a:active {
	  background-color: #eee;
  }
  #menuprincipale .nav-child {
	  width:100%;
          top:80px;
  }		 	
  #menuprincipale{	           
	  background-color: #AAADAC;
	  margin-top:9px;
  }
}
/* §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */

Il menu non è ancora terminato, spesso nella barra di navigazione sono presenti elementi più complessi, come i menu a tendina. Per gestire questi menu multi-livello, ho inserito del codice jQuery in un file chiamato scripts.js, crealo in una cartella chiamata js e inserisci le seguenti linee di codice.

jQuery(document).ready(function () {
      jQuery('.parent').hover(function() {
            jQuery('ul', this).stop(true, true).delay(100).slideToggle(500);
        }, function() {
            jQuery('ul', this).stop(true, true).slideUp(400);        
        }
    );
});

le classi che si richiama lo script sono quelle di default di joomla.

Risoluzione dei problemi che possono verificarsi con l’uso di Bootstrap 3

Un problema che si verifica, quando si utilizza un template con Bootstrap 3, è il duplice caricamento del file bootstrap.min.js. Il Jdoc statements

<jdoc:include type="head"/>

inserisce nella pagina oltre al tag title ed alcuni meta tag, anche il file javascript di Bootstrap 2 che va in conflitto con il bootstrap.min.js 3.

Per evitare questo conflitto, bisogna inserire nel file index del template, alcune righe di codice php, che impediscono il caricamento del file js di Bootstrap caricato da joomla.

Il codice deve essere posizionato all’inizio del file.

<?php
$doc= JFactory::getDocument();
 unset($doc->_scripts[JURI::root(true).'/media/jui/js/bootstrap.min.js']); 
?>

Come installare il template nel CMS Joomla

Il tema di joomla 3.8 è quasi terminato, come puoi vedere dallo screenshot qui in basso, il template è composto da due file index.php e templateDetails.xml e da quattro cartelle CSS, JS, fonts, images, quest’ultime fonts, images sono vuote, è consigliabile inserire al loro interno un file index.html contenente il seguente codice

<html><body></body></html>
comprimere i file nel formato .targ.gz o .zip

in modo tale che le cartelle vuote non siano navigabili dal web,

non resta ora che comprimere i file nel formato .targ.gz o .zip, con un software per la gestione degli archivi compressi (Winzip, 7zip ecc), e selezionare i file da zippare.

digita il nome che intendi attribuire all’archivio nel campo di testo, per esempio miotemplatebootstrap.

digita il nome che intendi attribuire all’archivio nel campo di testo, per esempio miotemplatebootstrap.

Il file zippato, è pronto per l’installazione, la procedura per caricarlo nel CMS è simile a come installare qualsiasi altra estensione, quindi accedi al pannello di amministrazione di joomla, attraverso il menu Estensioni clicca sulla voce Gestione carica il template, e procedi all’installazione, successivamente dalla pagina ESTENSIONItemplate impostalo come predefinito.

Tool per verificare se un sito è compatibile con i principali browser e dispositivi mobili

Quando si installa un template è fondamentale, specialmente nella fase iniziale, collaudare tutto il sito web in modo da rilevare bugs o conflitti con altre estensioni presenti nel CMS, ma sopratutto rendere le pagine del sito web realmente cross browsing e cross-device.

Per verificare la corretta compatibilità delle pagine del sito web con i browser più usati (Chrome, Firefox, Internet Explorer, Safari, Opera), voglio consigliarti BrowserShots un tool online che ti permette di effettuare dei test cross browser. Questo servizio consente di generare svariate screenshot del tuo sito web, effettuate con differenti browser e diversi sistemi operativi.

Per verificare la compatibilità delle pagine web con il maggior numero possibile di dispositivi (smartphone ,tablet, laptop, desktop), voglio segnalarti alcune delle migliori risorse online per effettuare il test cross-device:

  1. ipadpeek.com Servizio online, grazie al quale è possibile verificare la compatibilità con i dispositivi targati Apple.
  2. ready.mobi Si tratta di un tool online, tra le sue funzioni principali oltre a testare le pagine del sito web su smartphone e tablet, permette di controllare le immagini da ottimizzare, la cache per velocizzare il caricamento della pagina e molte altre cose.
  3. quirktools.com/screenfly è un altra applicazione online che consente di simulare e personalizzare il layout delle pagine web su diversi dispositivi PC, tablet, smartphone o TV.

Creare un template joomla: La tua opinione

In questo tutorial, ti ho fatto scoprire come si sviluppa un template joomla con il framework Bootstrap 3, rendendo il tuo sito internet responsive, cioè con la capacità di adattarsi alle caratteristiche, alle dimensioni, del dispositivo adoperato dall’utente che naviga il sito web, migliorando l’accessibilità e la visualizzazione dei contenuti.

Aspetto la tua opinione nei commenti, come sempre.

Grazie per l’attenzione e Buon Lavoro!

Joomla Realizzare un modulo per la ricerca avanzata con seblod

In questo tutorial illustrerò come creare un form per la ricerca avanzata per il tuo sito web in JOOMLA utilizzando il componente SEBLOD 3.x.Pochi mesi fa, colsi l’occasione per scrivere una guida Come creare form personalizzati, nell’articolo spiegavo come creare un “form per annunci immobiliari“.

Nell’articolo di oggi, voglio continuare l’argomento, spiegando come ricercare gli annunci immobiliari creati dal form, creando un modulo di ricerca, che consenta di immettere testo da ricercare, filtrando gli annunci immobiliari.

In questo articolo faccio riferimento alla nuova versione di SEBLOD 3.x compatibile sia con la versione 3.x che con la 2.x di Joomla.Possiamo vedere da questo link una demo del motore di ricerca interno, rendendoci conto delle potenzialità di questo componente.

Creiamo il motore di ricerca interno per i nostri annunci immobiliari

pannello di controllo seblod - joomla

Accediamo al backend del sito, nel menù di joomla selezioniamo Componenti e clicchiamo su Seblod 3.x, si apre la finestra del pannello di controllo per la gestione del componente, clicchiamo su List & Search Type Manager.

creare un form di ricerca con seblod

Per creare un nuovo form di ricerca, andiamo nella barra degli strumenti in alto a destra, in questo menù possiamo creare, modificare, eliminare, pubblicare, tutti i nostri Search form, clicchiamo sul pulsante “Nuovo”.

modulo ricerca avanzata creazione - seblod

Nella schermata che si apre, selezioniamo nel menù Form & Content Type il form da associare alla nostra ricerca, nel nostro caso annuncio immobiliare, subito dopo clicchiamo su Create List & Search Type.

Search Form lato back-end di joomla

Si apre un’interfaccia che rappresenta la struttura del nostro modulo di ricerca, nella parte superiore, inseriamo di dati principali del form, nel campo title, scriviamo “Ricerca annuncio immobiliare“, nel campo App Folder selezioniamo “article“, successivamente selezioniamo il tab “Search Form” visto che stiamo creando un form di ricerca, in seguito, nel campo Object selezioniamo “article“, e infine nel campo Quick Menu possiamo associare il form di ricerca ad un menù, selezioniamo la voce “Aggiungi a questo menu” riferita al Menù principale, e verrà creato automaticamente un link nel front end di joomla al nostro motore di ricerca.

I campi che ci servono per il nostro motore di ricerca

Passiamo ad inserire i campi (comunemente chiamati Field) per la ricerca.
Nella colonna di destra ritroviamo tutti i campi che abbiamo creato per il form degli annunci immobiliari, basta trascinare gli elementi che ci servono, e inserirli nelle posizioni appropriate.

I field che utilizziamo sono:
Tipologia immobile (Article Category Id),
Tipo Offerta,
Condizioni Immobile,
Regione,
Provincia,
Comune,
Prezzo,
quest’ultimo lo rinominiamo in Prezzo Max, e infine inseriamo il pulsante per la ricerca.

Prezzo massimo

Definiamo meglio il Prezzo Max, il valore inserito nel field, deve filtrare gli annunci immobiliari, che hanno il prezzo uguale o inferiore al valore inserito, per permettere al campo di fare questo, lo dobbiamo modificare.

Per modificare un field, basta cliccare sull’icona della matitina.

Modificare il campo prezzo

Si apre una finestra e nella sezione Storage selezioniamo il campo Alter, comparirà un menù a tendina e selezioniamo il valore int, successivamente salva e chiudi, abbiamo trasformato il Prezzo in un campo numerico.

valore Lower (< or =)

La seconda modifica da fare è applicare una regola al campo prezzo, selezioniamo dal menù verticale di destra, il pulsante con il numero 3, nel field prezzo compare un menù a tendina e selezioniamo il valore Lower (< or =), questa regola permette al campo di filtrare tutti gli annunci immobiliari che hanno un valore uguale o inferiore al valore immesso.

Il motore di ricerca interno per il nostro CMS è terminato, clicchiamo su salva e chiudi

Testiamo il form della ricerca avanzata per gli annunci immobiliari

verificare il form ricerca annunci immobiliari

Adesso siamo pronti a provare e verificare il nostro modulo di ricerca annunci.

Nel menù del nostro sito web, clicchiamo sul link “Ricerca annuncio immobiliare” e iniziamo la nostra prima ricerca, per esempio cerchiamo tutti gli immobili con tipologia “appartamento”, comune “Palermo”, e prezzo max 150.000 e clicchiamo il pulsante cerca, vediamo subito che la nostra ricerca restituisce una serie di annunci immobiliari, con il solo titolo dell’annuncio, se vogliamo che i risultati prodotti dalla ricerca, mostrino più valori, come la foto, il prezzo, il comune ecc, dobbiamo creare una Intro nel Form Agenzia Immobiliare.

Form Agenzia Immobiliare

Ritorniamo nel backend di Joomla, selezioniamo il componente SEBLOD 3.x, apriamo il Form Agenzia Immobiliare, selezioniamo il Tab Intro, nella colonna di destra trasciniamo i campi che devono essere visualizzati nei risultati di ricerca inserendoli nelle posizioni più appropriate, salviamo e chiudiamo.

Ritestiamo il nostro form ricerca annunci immobiliari, vediamo che i risultati vengono visualizzati in una maniera più ordinata e gradevole con più informazioni.

Conclusione

Bene, in questo articolo, ti ho fatto vedere come si crea un modulo di ricerca avanzata per il tuo sito web, utilizzando il componente Seblod per Joomla.

Per ogni tua domanda e curiosità sono a tua disposizione, ci possiamo trovare nel box dei commenti!

Grazie per l’attenzione e in bocca al lupo, per i tuoi progetti!

Francesco Di Giovanni

Creare form personalizzati in joomla con seblod

Questo articolo nasce con l’intento di mostrare come creare form personalizzati, e come implementarli nel nostro CMS.

Il componente che utilizzo nella guida è Seblod estensione per joomla, che consente di creare nuovi tipi di contenuto o ampliare quelli esistenti con campi personalizzati, facilitando la creazione di siti web, rendendoli più professionali.

In questo articolo faccio riferimento alla nuova versione di SEBLOD 3.x che non è solo un aggiornamento, ma comprende anche nuove e interessanti funzionalità, ed è pienamente compatibile sia con l’ultima versione di Joomla 3.x che con la 2.5

Obiettivo della guida è sviluppare un sito web per la gestione di annunci immobiliari, creando un modulo per inserire nuovi immobili.   Curioso, vedi la demo del form personalizzato

Dopo questa premessa, iniziamo subito.

Creare un form personalizzato per annunci immobiliari

pannello di controllo seblod - joomla

Accediamo al backend del nostro sito web, nel menù di joomla selezioniamo Componenti e clicchiamo su SEBLOD 3.x, si apre il pannello di controllo per la gestione del componente, clicchiamo sul pulsante Form & Content Type Manager.

Form & Content Type Manager - seblod

Si apre una pagina, contenente alcuni form già realizzati, che possiamo eventualmente personalizzare, o prendere in riferimento duplicandoli.

Per creare un form, selezioniamo nuovo dal top menù di Seblod,

form lato back-end

si apre la pagina con la struttura del nostro from, suddivisa in tre blocchi, la prima quella superiore, utilizzata per l’inserimento di dati principali del form, nell’area di sinistra, vengono disposti i campi, nell’area di destra, ci sono i campi da utilizzare.

Per il nostro form, abbiamo bisogno di creare due viste una per l’admin(back end) gestibile solo dall’amministratore del sito e un’altra per il site(Front End) utilizzabile sia per utenti registrati che ai non registrati.

Creare il form lato back end

Form Content Type

Andiamo adesso a sviluppare il modulo per il backend.
Nella pagina Form & Content Type creata precedentemente, troviamo nella prima riga il campo title, e scriviamo il nome del modulo “Annuncio immobiliare“, nel campo App Folder selezioniamo in quale cartella di seblod memorizzare il tipo di contenuto (nel nostro caso article), nella seconda riga selezioniamo il tab Admin Form (visto che stiamo creando il form lato backend), nella terza riga nel campo Object selezioniamo l’oggetto di Joomla, che nel nostro caso è article (il form che stiamo sviluppando crea articoli),

Come creare contenuti personalizzati con joomla

Mi capita spesso di leggere, nei forum, delle richieste in cui si parla su come creare form particolari, che generano articoli contenenti immagini, gallerie, video, allegati ecc, per risolvere queste problematiche, ci sono centinaia di plugin o componenti, che puoi installare nel tuo cms.

Ho pensato che poteva essere utile ed interessate, scrivere una serie di articoli su un componente, utilizzato per personalizzare gli articoli e le categorie classiche di Joomla, dandoti la possibilità di creare form personalizzati utilizzabili sia da back-end e front-end, aggiungere nuovi campi nei form di joomla, ricercare articoli presenti nel sito, grazie allo sviluppo di un motore di ricerca interno, personalizzare graficamente i layout dei form e degli articoli consentendo un miglior posizionamento dei campi, inviare i dati da un form via email a più utenti o agli amministratori del sito, personalizzare la scheda di registrazione utente di joomla aggiungendo nuovi campi come avatar, numeri di telefono o altri tipi di campi particolari come menù a tendina, checkbox, ecc.

Questo componente ti consentirà di creare siti web di news, anagrafiche, cataloghi, blog, portfolio, siti di annunci immobiliari, rendendo il tuo sito più adatto agli scopi più svariati.

Vuoi sapere il nome di questo componente?

SEBLOD è completamente gratuito, una delle estensioni più popolari per Joomla, fornisce una soluzione completa e facile da usare per creare nuovi tipi di contenuti.
Il progetto originale si chiamava Jseblod CCK, ma poi si è evoluto con il nome Seblod, CCK sta per (Content Costruction Kit) ossia moduli e/o componenti che permettono di personalizzare qualsiasi tipo di contenuto.

Seblod è gratuitamente scaricabile, l’ultima versione la trovi dal sito http://www.seblod.com/download.html

È disponibile il file in lingua italiana per la traduzione sia per il front end che per il back end. Lo puoi scaricare http://www.joomla.it/download-della-community/item/6019-italian-language-pack-seblod-20.html.

Conclusione
Bene, in questo primo capitolo introduttivo, ti ho fatto conoscere il componente Seblod per joomla.
Nel prossimo articolo, ti mostrerò come puoi creare e personalizzare i tuoi form.
Per qualsiasi informazione ci possiamo trovare nel box dei commenti!