Supporto volontario e collaborativo per Joomla!® in italiano

Sviluppo siti in Joomla! con HELIX 3 Framework

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
HELIX 3
HELIX, per chi non lo conosce, non è un telefilm, ma un template framework creato dagli sviluppatori di Joomshaper, framework utilizzato per la creazione dei template per Joomla! Tra le alternative valide e più conosciute sono T3, Gantry, Gavern e Warp. Adesso, dopo 2 precedenti versioni ed esperienze acumulate, Joomshaper ha deciso di fare un altro passo in avanti rilasciando la versione 3 con delle funzionalità diverse rispetto alle versioni precedenti. Dalle prime informazioni prendiamo nota che la versione 3 di Helix è destinata nello sviluppo dei template per Joomla! dalla versione 3.3.6 in poi, ma si consiglia di utilizzare Joomla 3.4. Andiamo a scoprire come sfruttare al massimo questo interessante framework. Ho detto che è gratis ?


Tra le funzionalità in evidenza in HELIX 3 Framework possiamo notare:
  • Design Moderno
  • Template flessibile e responsive
  • Font Awesome 4.3
  • Bootstrap 3.2
  • Megamenu e Off-Canvas menu
  • Nuove opzioni per la gestione dei articoli
  • Opzioni per titolo pagina
  • Sticky header
  • Logo diverso per ogni dispositivo
  • Opzioni avanzate per font
  • Gestione delle posizioni migliorata
  • Campi personalizzati per CSS/JS
  • Integrazione commenti con i social network
  • Supporto multibrowser

   DOWNLOAD

Dalla pagina di download del prodotto abbiamo la possibilità di scaricare 2 pacchetti:
Non devi però farti spaventare dalla parola "Framework", questo HELIX 3 è anche e solo un semplice template ben strutturato. Come vedi nella figura qui a fianco ecco come si presenta il template standar di HELIX. Dopo aver installato il template ed averlo attivato come default potrai configurarlo dal suo pannello di controllo ed in modo semplice aggiungere o togliere posizioni modulo senza dover mettere mai mano al codice. SITO DIMOSTRATIVO

Quando utilizzare il "Quickstart Pack" ?

Credo che ormai molti utenti conoscono il significato delle parole "Quickstart Pack", ma per chi non le conosce un pacchetto Quickstart contiene una preinstallazione completa di Joomla! con dei dati di esempio come nella demo del sito ufficiale, per scoprire la potenza e le varie funzionalità di questo interessante framework. Questo pacchetto è addatto a chi vuole creare un sito da 0.

Quando utilizzare invece il "Template" ?

Questo pacchetto include solo il template vuoto "shaper_helix3". Il template può essere installato su qualunque sito Joomla! su cui gira come minimo la versione 3.3.6 di Joomla!.
Addatto a chi ha già un sito esistente e vuole cambiare l'aspetto grafico e magari implementare nuove funzionalità.

  Suggerisco in tutti e due casi, quindi anche per chi ha già un sito in piedi, di fare in parallelo un'installazione in un ambiente di test del pacchetto "Quickstart Pack" per farvi un'ideea delle posizioni e le varie impostazioni predefinite.

Il pacchetto Quickstart include oltre al template e i dati demo, anche alcune interessante estensioni : SP Page Builder Starter e SP Simple Portfolio.
Non è mia intenzione di approfondire quest'argomento ma voglio fare solo 2 precisazioni, SP Page Builder Starter e un CCK (Content Construction Kit) simile a K2, FLEXIcontent e Seblod, e SP Simple Portfolio è un estensione utilizzata per la creazione dei portfoli.

Il template preinstallato e predefinito è shaper_helix3.
NOTA: Per la personalizzazione del template si consiglia di utilizzare ISIS come template amministrativo di Joomla!
Andiamo adesso a vedere in dettaglio le opzioni di configurazione del template.
Extensions > Template Manager > shaper_helix3 - Default

Le varie opzioni si presentano raggrupate in sezioni (o schede) che sono:
  1. Basic
  2. Presets
  3. Layout
  4. Menu
  5. Typography
  6. Custom Code
  7. Advanced
  8. Blog
  9. Assignments

1. Opzioni scheda BASIC

  Sticky Header (Predefinito: No)
Opzione per abilitare che il contenuto della sezione header diventa sempre fisso e visibile nella parte superiore dello schermo mentre si scorre nella pagina corrente. Utile in quanto di solito la sezione header contiene la barra di navigazione.

  Favicon
Opzione per selezionare e caricare un immagine propria (16x16px) nel formato .png o gif per utilizzarla come favicon del sito.

  Boxed layout (Predefinito: No)
In pratica si tratta di impostare la larghezza del template. Impostazione predefinita significa utilizzare il template fluido.
Abilitando questa opzione si nota che il template si ristringe per non superare 1240px ma ad ogni modo si mantiene responsive.

  Logo
  Logo Type > Scegliere tra un immagine e un semplice testo. Se si sceglie "Text" per il tipo del logo, compariranno altri 2 campi "Text" e "Logo Slogan" che si devono compilare a piacere.
  Module Position > Selezionare la posizione del logo (predefinita è proprio la posizione "logo").
  Image > Selezionare l'immagine per il logo.
  Retina Logo > Questa è una funzionalità nuova e interessante che non ho mai vista nei altri framework. In pratica permette di caricare un'immagine di dimensione doppia del logo per una visualizzazione migliore sui display con risoluzione grande.
  Mobile Logo > Opzione di caricare un'altra immagine del logo per la visualizzazione sui dispositivi mobile.

  Body Background Image
  Select Image > Selezionare un immagine per utilizzarla come sfondo.
  Background Repeat > Opzioni disponibili sono: Inherit (predefinita), No Repeat, Repeat All, Repeat Horizontally, Repeat Vertically L'impostazione "Inherit" significa che l'immagine di sfondo, se selezionata, non si ripette e verrà posizionata nella parte superiore sinistra della pagina.
  Background Size > Opzioni disponibili sono: Inherit, Cover (predefinita), Contain. Impostazione per la dimensione dell'immagine dello sfondo. L'impostazione predefinita "Cover" significa che l'immagine dello sfondo viene ridimensionata (mantenendo le proporzioni) per coprire l'intero contenuto. "Contain" significa ridimensionare l'immagine dello sfondo sempre mantenendo le proporzioni affinche sia larghezza che altezza non superano le dimensioni del contenuto.
  Background Attachment > L'immagine dello sfondo scorre insieme al contenuto della pagina ("Scroll") o è fissa ("Fixed").
  Background Position > La posizione iniziale dell'immagine dello sfondo. Se non si specifica niente viene pressa in considerazione come predefinita la posizione in alto a sinistra della pagina.

  Footer
Un semplice modulo per mostrare le informazioni di copyright, informazioni che possiamo inserire nel campo "Copyright Notice" e assegnare la posizione desiderata, magari lasciare quella predefinita "footer1" che va più che bene.

  Social Icons
Icone social HELIX
Questa sezione raggruppa le icone con i relativi link ai profili personali sui vari social network. Il modulo può essere posizionato ovunque sul sito, ma credo che la posizione predefinita "top1" è azzecata e di conseguenza la lascerei così. Se non si desidera una certa icona basta lasciare il campo corrispondente vuoto. Per nascondere tutto il modulo basta selezionare "Hide".

  Contact Information
Un'altro moduletto molto utile che ragruppa 2 informazioni : telefono e l'indirizzo di email.
  Enable > Valore predefinito è "Yes" quindi il modulo è visibile sul sito, altrimenti selezionare "No".
  Module Position > Selezionare la posizione (predefinita "top2")
  Phone e Email > Campi dove inserire le informazioni relative al numero di telefono e l'indirizzo di email.

  Coming Soon
Questa è una delle funzionalità che mi è piaciuta molto. In pratica e una variazione della funzionalità del core di Joomla! che permette di mettere il sito offline ma questa ha in più un bel contatore alla rovescia che si può facilmente impostare con la data desiderata.

2. Opzioni scheda PRESETS

Da questa scheda si possono impostare al volo con un solo click uno dei 4 colori principali ed eventualmente anche personalizzarli modificando il colore del testo, dello sfondo e il colore principale del sito.

3. Opzioni scheda LAYOUT

Come si nota sul template predefinito ci sono predisposte delle posizioni su delle righe che si chiamano "Sezioni".
  Prima sezione "Top Bar" contiene 2 posizioni: top1 e top2
  Sezione "Header" con le posizioni: logo e menu
  Sezione "Page Title" con una posizione: title
  Sezione "Main Body" con 3 posizioni: left, component e right
  Sezione "Bottom" ha 4 posizioni: bottom1, bottom2, bottom3 e bottom 4
  Sezione "Footer" ha una sola posizione: footer.






Ci tengo a precisare che queste sono le posizioni predefinite nel template di base, ma queste posizioni possono essere ampliate a piacere in base alle proprie esigenze con nuove righe, e poi ogni riga si può dividere in più posizioni, in ogni posizione si può assegnare un contenuto o un modulo esistente.
Insomma ci sono tantissime possibilità per giocare con il layout. Adesso vediamo in pratica cosa sono e come modificare le impostazioni di ogni sezione e posizione.

3.1. Configurazione Sezione.

  Sulla sinistra si nota un'iconcina tipo crocetta che permette di spostare l'intera sezione in alto o in basso semplicemente cliccando con il mouse e trascinando.
  L'opzione "Add Columns" permettere di dividere la sezione in 1, 2, 3 o 4 colonne, posizionando il mouse sopra l'icona compare 10 opzioni di cui scegliere quella desidera per la sezione in questione.

Ad esempio in questo caso siccome la sezione "Top Bar" è divisa in due collonne con le posizioni top1 e top2, se non ci servono 2 posizioni posiamo spostarci con il mouse sopra e cliccare sulla prima opzione dalla parte sinistra così la posizione top2 sparisce e rimane solo top1. Semplice no?
Per chi vuole sapere che codice viene generato allego qui uno screenshot:

  L'opzione "Add Row" permette di inserire una sezione vuota sotto la sezione corrente.
Esempio: Supponiamo che vogliamo inserire una nuova sezione sotto il logo, dobbiamo cliccare sulla scritta "Add Row" della sezione "Header".

Invece per eliminarla bisogna cliccare sulla scritta "Remove" della sezione in questione.

  L'opzione "Settings" permette di accedere alla configurazione avansata della sezione.





Qui si possono configurare i seguenti parametri :
  Section Title > titolo della sezione
  Background Color > lo sfondo
  Text Color > colore del testo
  Background Image, Background Repeat, Background Size, Background Attachment e Background Position > Vedi la spiegazione scheda Basic.
  Link Color e Link Hover > Colore dei collegamenti
  Hide on Mobile > Selezionare questa casella se si desidera nascondere la sezione corrente quando si accede da smartphone.
  Hide on Tablet > Selezionare questa casella per nascondere la sezione corrente quando si accedde con tablet
  Hide on Desktop > Selezionare questa casella se si desidera nascondere la sezione corrente quando si accedde con i PC
  Padding e Margin > Spazio intorno al contenuto (per approfondimenti vedi le regole CSS)
  Fluid width > Selezionare questa casella se si desidera che il contenuto della sezione si addatta alla larghezza dello schermo.
  Custom CSS Class > Qui si può creare una classe CSS per avere un stile particolare.

Dopo aver configurato tutto nella sezione cliccare su "Apply" per salvare le modifiche o "Cancel" per annullare.

3.2. Configurazione Posizione

Ogni posizione a sua volta può essere configurata cliccando sull'iconcina che si trova nella parte destra.

Si apre una finestra pop-up con dei parametri da configurare.
  Make Component Area > Selezionare questa casella se si desidera che i contenuti compaiono qui.
  Module Position > Selezionare la posizione di un modulo.

In pratica questa funzionalità e quella che viene utilizzata prima di tutto nel caso in cui si installa solo il template su una versione esistente.
Di solito ogni template ha predisposte delle posizioni particolari.
Esempio pratico: Nel precedente (diciamo Protostar) abbiamo un modulo pubblicato nella posizione "position-8". Adesso, su shaper_helix3, quella posizione viene chiamata "left". Quindi cosa dobbiamo fare ? Andiamo sulla sezione "Main Body", sulla collona "left" clicchiamo sull'iconcina settings e alla voce "Module Position" selezioniamo "position-8" così il contenuto dovrebbe comparire sempre sul lato sinistro del nuovo template.
Questa procedura si deve ripetere per ogni modulo !

  Hide on Mobile, Hide on Tablet, Hide on Desktop > vedi la spiegazione della Sezione.
  Tablet Layout > Associare una determinata "classe" solo per le visualizzazioni da Tablet.
  Mobile Layout > Associare una determinata "classe" solo per le visualizzazioni da smartphone
  Custom CSS Class > Da assegnare uno stile particolare.
Alla fine cliccare sempre "Apply" o "Cancel". 

NOTA: Sulle sezioni dove ci sono più di una colonna, ho notato che cliccando nello spazio di quella colonna e tenendo premuto si può spostare quella colonna sinistra-destra, ma solo sulla stessa sezione !

4. Opzioni scheda Menu

Qui si possono configurare le opzioni base del menu di navigazione.
  Select Menu > Selezionare uno dei menu esistenti in "Menu Manager" per visualizzarlo come menu principale.
  Menu Type > Selezionare un tipo di menu o una combinazione di menu. Opzioni disponibili sono: "Mega Menu & Off Canvas", "Mega Menu", "Off Canvas". Se il "Mega Menu" non ha bisogno di spiegazioni, "Off Canvas" è quella specie di menu che sta sempre nascosto, utile specialmente nella visualizzazione dai dispositivi mobile. Quindi si può scegliere se vogliamo visualizzare solo un tipo di questi menu o tutti e due.
  Dropdown Width > Impostare la larghezza del sottomenu. Predefinito è 240 px.
  Dropdown Animation > Selezionare un tipo di animazione dall'elenco per la comparsa del sottomenu.

Una volta abilitato "Mega Menu", tra le opzioni delle singole voci di menu compare adesso una nuova scheda chiamata "Helix Megamenu Options".
Menus > Main Menu > Home

Questa scheda contiene delle opzioni per la gestione avanzata di ogni singola voce di menu. Si può inserire un modulo come sottovoce semplicemente trascinandolo dalla parte sinistra, dall'elenco dei moduli disponibili nella zona "Drop Module".
Sono disponibili opzioni per impostare una certa larghezza del menu dropdown, allineamento, il layout, icona da assegnare alla voce del menu, classe CSS personalizzata.


Un'altra funzionalità interessante adesso è quella di poter utilizzare un colore o immagine di sfondo per ogni voce di menu.



5. Opzioni scheda Typography

Questa sezione permette un controllo avanzato del font da utilizzare. Si può abilitare o disabilitare l'uso dei google font per body, per le intestazioni h1, h2,..., h6 , per la navigazione, oppure utilizzare un font personalizzato. In più con "One Click update" permette di verificare se ci sono nuovi font google e di aggiornare l'elenco.


6. Opzioni scheda Custom Code

La sezione "Custom Code" da la possibilità di inserire codice CSS, Javascript personalizzati nei vari posizioni sul template.
  Before </head> > Inserire codice nel header. Ad esempio links ai vari file CSS/JS personalizzati non compresi nel template.
  Before </body> >In questa sezione si può inserire codice personalizzato ad esempio per vari contatori pagine o per google analytics.
  Custom CSS >Inserire qui il codice CSS personalizzato. Si consiglia di utilizzare questo campo quando non ci sono molte personalizzazioni sul codice, al massimo 10 righe. Per personalizzazioni avanzate si consiglia di inserirle direttamente nel file custom.css.
  Custom Javascript >Inserire qui invece codice javascript da caricare alla fine di tutti gli script esistenti nella pagina.

7. Opzioni scheda Advanced

Qui possiamo abilitare o disabilitare la compressione dei file CSS/Javascript, escludere file javascript che non vogliamo comprimere, e compilare le istruzioni LESS in CSS. Nella modalità sviluppo si consiglia di selezionare "No" dapertutto.

8. Opzioni scheda Blog

  Post Format
Abilita la visualizzazione di un icona acanto al titolo del articolo, icona che la possiamo selezionare dalle opzioni avanzate dell'articolo stesso, scheda "Helix Blog Options".




  Comment Settings
Uno strumento per l'integrazione dei commenti di Facebook, Disqus o IntenseDebate senza l'installazione di un'estensione di terze parti. Per poter inserire commenti, gli utenti devono collegarsi con le proprie credenziali del social network desiderato.

  Comment Engine > Scegliere il social network
  Facebook Application ID > Inserire il Facebook Application ID (Se non si è in posseso basta andare su questa pagina https://developers.facebook.com/apps e richiedere uno.
  Comments Width > Larghezza in pixel del campo per commenti
  Comments Per Page > Numero di commenti da visualizzare per pagina
  Comments Count > Mostra/Nascondi numero dei commenti inseriti (nella visualizzazione tipo blog).

  Social Share
Abilita/Disabilità pulsanti per condividere l'articolo con i social network.

9. Opzioni scheda Assignment

Questa scheda non credo che ha bisogno di spiegazioni, la stessa funzionalità di "Assegnazione menu" del template protostar, quindi si può assegnare lo stile corrente alle voci di menu desiderate.

NOTA: Capisco che abbastanza lunga questa guida, ma tenete presente che è solo un assaggio di HELIX 3. Per approfondimenti e variazioni sul tema vi consiglio di giocarci in un ambiente di test. Magari di fare anche un confronto con altri framework.

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.7.5 Stabile Italiana
Data di rilascio: 17 Agosto 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: