Contao e Foundation Zurb: esempio realizzazione versione mobile sul sito di Chiavette Usb

22/10/2014 23:17 a cura di Paolo B.

La realizzazione di un sito web responsive, che possa essere utilizzabile e fruibile da ogni dispositivo, mobile e non, è imprescindibile oggi come oggi.

Per la realizzazione del sito di Penne Personalizzate Bologna, è stato integrato Foundation Zurb a Contao.

 

 

Il sito è stato realizzato realizzato nel 2012 con l'utilizzo di Contao 2.11.10.

 

La funzione principale del sito è quella di Cataloghi per i Gadget personalizzati e Chiavi usb.

 

Pennepersonalizzatebologna.it

Per la prima tipologia di prodotti, ogni elemento ha come caratteristica, oltre ad un titolo, anche un'immagine rappresentativa del gadget ed un link.

Per le singole chiavette invece sono stati previsti numerosi campi, tra cui anche descrizioni e titoli specifici per favorire l'indicizzazione.

In aggiunta, questi prodotti possono essere associati a tre categorie di prodotto diverse, in modo da poter mostrare tali articoli nelle rispettive sezioni

Un esempio di una scheda prodotto

 

 

file/news/2014/scheda-prodotto-penne-personalizzata.jpg

 

Il sito viene completato da una gestione dimamica del modulo contatto. I vari articoli personalizzabili possono essere ordinati con un quantitativo minimo diverso per cui si è adottato la soluzione di creare 3 tipi di modulo contatto, che poi sono collegati in modo dinamico alla scheda prodotto.

 

 

Fino a questo punto, nulla di particolarmente difficoltoso, utilizzando Contao.

Recentemente il cliente ha manifestato l'esigenza di rendere accessibile il sito di Penne Usb anche da dispositivi mobile, Smartphone e Tablet.

Personalmente avevo già iniziato uno studio su quale responsive framework utilizzare.

Ne ho presi in esame diversi, da Boostrap Twiter a Skeleton, passando per Amazium, ma la mia scelta finale è stata Foundation Zurb.

 

file/news/2014/foundation-zurb.jpg

 

 

Questo interessante frameworks mette a disposizione diversi strumenti per la realizzazione di un sito web pienamente responsive.

L'elemento di base è la griglia che suddivisa in dodici colonne.

A questa si può aggiungere anche stili di tipografica, link, moduli, pulsanti, tabelle, fino ad arrivare a gestione di miniature/immagini o top bar menu totalmente utilizzabili con dispositivi mobile dallo schermo ridotto.

La comunity di questo framework è ampia e garantisce un ottimo supporto.

Oltre alla documentazione ufficiale, che ritengo ben fatta, in rete sono disponibili diversi esempi e tutorial per poter acquisire le nozioni di questo strumento.

 

Come è avvenuta l'integrazione su sito delle penne usb

L'inserimento del framework all'interno di Contao, non è complicato.

Una volta scaricato il pacchetto da questa pagina, che è possibile personalzzare escludendo gli elementi che non si desiderano e modificando anche alcuni parametri, ho salvato il tutto all'interno della cartella dedicata ai plugins.

Successivamente ho creato un template personalizzato dove inserire gli script da aggiungere.

L'ho denominato moo_foundation.html5 ed ha questo contenuto:

<?php
//Aggiungo Modernize

$GLOBALS['TL_JAVASCRIPT'][] = '/plugins/foundation/js/vendor/modernizr.js';
?>

<script src="<?php echo TL_PLUGINS_URL; ?>plugins/foundation/js/foundation.min.js"></script>

<script>$(document).foundation();</script>

 


Per l'utilizzo è necessario anche installare ed allegare jquery, essenziale per il suo funzionamento.

Successivamente ho fatto alcune modifiche al template fe_page, per aggiungere i fogli di stile di base ed uno personalizzato.

Sempre all'interno del template di frontend, ho aggiunto agli elementi header, container e footer la struttura della griglia di Foundation.

 

Questo è un esempio della mia fe_page.html5

Utilizzando in modo opportuno i css e le media query, il risultato ottenuto è un sito semplice da utilizzare, facile da consultare e che è perfettamente visibile sui vari dispositivi mobile e non.

 

Il risultato è Penne Personalizzate Bologna

 

 

Aggiornamento Google Aprile 2015:
in seguito alla revisione dell'algoritmo di Google,
il cliente ha manifestato l'esigenza di rendere responsive in brevissimo tempo anche un altro sito; l'implementazione è stata così facilmente replicata anche su Collis.it, sito dedicato a gadget personalizzati.

Torna indietro

I vostri commenti

24/10/2014 10:46
Andrea Bizioli

Molto interessante, non conoscevo questo framework.
Ottimo risultato.

Aggiungi un commento