Il Bootstrap Framework di Twitter su Joomla! 2.5

ResponsiveCome largamente anticipato, il Bootstrap Framework di Twitter sarà integrato nativamente nella release 3.0 di Joomla! ma nel frattempo impariamo come utilizzare questo potente strumento sulle versioni correnti di Joomla! (a partire dalla release 1.6) per creare template reattivi.
In questa guida, prendendo spunto dall’articolo di Hagen Graf pubblicato su Joomla!Magazine, andremo a vedere cosa c’è sotto il cofano dei template di Joomla! per capirne le basi. Creare un nuovo template per Joomla partendo da zero non è fantascienza. Se stiamo realizzando un sito web dobbiamo sempre prima scegliere se creare un template personalizzato o comprarne uno, oppure modificare uno già esistente, per essere in grado di fare la scelta giusta bisogna capire il processo di creazione di un template!

 

 

Joomla è costituito da un front-end (il sito web) e un back-end (l’interfaccia per l’amministrazione), entrambi hanno i loro template nelle cartelle:
/templates (per il front-end)

/administrator/templates (per il back-end)

 

Ogni template ovviamente ha la propria cartella. Su Joomla 2.5 sono preinstallati 3 temi per il sito (Atomic, Beez2 e Beez5) e 2 per l’amministrazione (Bluestork e Hathor).

 

Come creare un nuovo template

Vediamo subito come realizzare un nuovo tema dal nulla, per poi integrare il Bootstrap Framework di Twitter per rendere il nostro template completamente reattivo (vista l’esigenza di avere un sito visualizzabile correttamente da qualsiasi dispositivo, pc, tablet o smartphone). Cercheremo di iniziare il più semplicemente possibile dando una spiegazione basilare dei template in Joomla!

 

Nome del template

Il primo passo è dare un nome al nostro template. Il nome comparirà nel file XML, nel database, in alcune cache ecc ecc… L’unica raccomandazione è non lasciare spazi vuoti o mettere caratteri speciali nel nome. In questo esempio lo chiameremo bootstrapframework_theme

 

File e cartelle

Creiamo la prima cartella in root/templates/ dando il nome che abbiamo scelto: (es.) /root/templates/bootstrapframework_theme

In questa cartella dobbiamo creare la sotto-cartella css (/root/templates/bootstrapframework_theme/css) e inserire i primi due file, ovvero index.php e templateDetails.xml

 

index.php

Il file index.php è la pagina del nostro template che verrà visualizzata sul browser, in questo file verranno caricate tutte le altri parti (css, javascript, joomla content, ecc ecc). Per il nostro esempio caricheremo soltanto il comando jdoc:include che conterrà l’head i componenti e i moduli in base alla loro posizioni.

 
<?php 
defined('_JEXEC') or die; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > 
<head> 
<jdoc:include type="head" /> 
</head> 
<body > 
<jdoc:include type="modules" name="top" style="xhtml" />    
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" /> 
<jdoc:include type="modules" name="left" style="xhtml" /> 
<jdoc:include type="component" /> 
<jdoc:include type="modules" name="right" style="xhtml" /> 
<jdoc:include type="modules" name="footer" style="none" />    
</body> 
</html>
 

 

templateDetails.xml

Questo è il file più importante in un template! E’ una lista di tutti i file contenuti nella cartella del template, include inoltre informazioni come l’autore e il copyright. Senza questo file Joomla! non è in grado di trovare il nostro template. Le posizione sono le medesime posizioni dei moduli che abbiamo menzionato poco fa’ nella creazione del file index.php, possiamo creare quante più posizioni vogliamo, con i nomi che vogliamo, poiché, almeno finora, non c’è uno standard sui nomi delle posizioni in Joomla!

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<install version="2.5" type="template" method="upgrade">
    <name>bootstrapframework_theme</name>
        <creationDate>2012-08-05</creationDate>
    <author>Yourname</author>
    <authorEmail>Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.</authorEmail>
    <authorUrl>http://yourwebsite.com</authorUrl>
    <copyright>Copyright (C) 2012</copyright>
    <version>1.0</version>
    <description><![CDATA[
    <p>Creazione di un template per l'integrazione con il Bootstrap Framework<p>
    ]]></description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>css</folder>
    </files>
    <positions>
        <position>top</position>
        <position>breadcrumbs</position>
        <position>footer</position>
        <position>left</position>
        <position>right</position>
        <position>footer</position>
    </positions>
</install>
 

 

Esplorazione e installazione del template

Una volta create le cartelle e i due file principali, dobbiamo scoprire e installare il nostro template. A partire dalla versione 1.6 di Joomla! un template viene “registrato” nella tabella _extensions del database. Quindi andiamo su Estensioni -> Gestione estensioni e clicchiamo su Esplora poi di nuovo su Esplora (l’icona in alto a destra). Nell’elenco ora dovrebbe essere comparso il nostro template, selezioniamolo e installiamolo (pulsante Installa in alto a destra). Durante l’installazione verrà aggiornata la lista dei template in Estensioni -> Gestione template quindi possiamo selezionarlo e renderlo il tema predefinito per il nostro sito. A questo punto il nostro sito avrà un aspetto simile a quello nell’immagine sotto, certamente visualizzando ora il nostro sito su qualsiasi dispositivo sarà completamente “responsive” ma praticamente non ha ancora nessuna vera interfaccia grafica, non ci sono neanche immagini.

 


Integrazione del Bootstrap Framework

Siamo arrivati al punto di integrare il Bootstrap Framework nel nostro template, innanzitutto: cos’è il Bootstrap Framework di Twitter?!

 

“Bootstrap framework, realizzato dai creatori di Twitter, è un insieme di eccellenti convenzioni HTML, CSS, strumenti Javascript, forms, bottoni, tabelle, griglie, navigazione e molto altro, utilizzabili liberamente per lo sviluppo di applicazioni e pagine web. Si tratta in sintesi di un modo rapido e semplice per fornire una soluzione pulita ed uniforme nella realizzazione di interfacce user-friendly, vantando uno stile gradevole, ampiamente utilizzato del famoso social network Twitter”

(HTML.it qui l’articolo completo)

 

Ad oggi l’ultima versione del framework è la 2.0.4 ed è scaricabile liberamente dal sito web del progetto su GitHub - Twitter Bootstrap, scarichiamo la versione con i “docs” (Download with docs).

 

 

 

La cartella “assets” conterrà tutti i file necessari per il nostro template, sia CSS che Javascript, e include inoltre le immagini e icone predefinite del Bootstrap, iniziamo quindi col copiare questa cartella nella cartella principale del nostro tema (es. /root/templates/bootstrapframework_theme/assets).

Il Bootstrap di Twitter ha tre temi di esempio (hero, fluid e starter-template) che possiamo controllare nella cartella /docs/example del pacchetto che abbiamo scaricato. Il nostro obiettivo è quello di combinare i comandi di Joomla! con uno di questi esempi (in questo caso sceglieremo il tema “fluid”). Il nostro file index.php per ora contiene tutte le parti necessarie di Joomla! noi dobbiamo creare un mix iniziando con alcuni elementi chiave che dobbiamo inserire nel file:

 
<?php
defined('_JEXEC') or die;
// detecting site title
$app = JFactory::getApplication();
?>
 

Questo codice php è il tipico inizio di un template di Joomla, l’oggetto $app contiene dati utili riguardo il tuo sito (per esempio il nome del sito stesso) Sostituiamo anche il doctype, utilizzando la versione html5 che viene dagli esemi del Twitter Bootstrap:

 
<!DOCTYPE html>
<html lang="en">
 

Nel tag < head > ora dobbiamo inserire i metatag di Joomla! tramite il comando < jdoc > e integrare i file del bootstrap:

 
<head> 
    <meta charset="utf-8"> 
    <jdoc:include type="head" /> 
    <!-- i CSS --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/docs.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap-responsive.css" type="text/css" media="screen" /> 
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <!-- La fav e le touch icons --> 
    <link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/favicon.ico"> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-114-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-72-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-57-precomposed.png"> 
</head>
 

Nel tag < body > possiamo copiare sostanzialmente quello che c’è nell’omonimo tag del file di esempio fluid.html, l’importante è incorporare il comando < jdoc > nel posto giusto, inseriamo per esempio il top menu:

 
<div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container-fluid"> 
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
          </a> 
          <a class="brand" href="#"><?php echo $app->getCfg('sitename'); ?></a> 
          <div class="nav-collapse"> 
        <jdoc:include type="modules" name="top-menu" style="none" /> 
      </div> 
        </div> 
      </div> 
    </div>
 

Successivamente dovremmo mettere un modulo di menu nella posizione top-menu e potremo visualizzarvi anche il nome del sito prendendolo dall’oggetto $app

La pagina principale si trova in un certo “Fluid Container”, ovvero un sistema di griglie con 12 righe di default, noi ne useremo 9 per visualizzare i componenti di joomla e 3 per creare una sidebar sulla destra, che sarà la posizione right, ovviamente il lato destro sarà visualizzato soltanto se qualche modulo avrà la suddetta posizione:

 
<div class="container-fluid"> 
      <div class="row-fluid"> 
        <div class="span9"> 
          <div class="hero-unit"> 
              <jdoc:include type="component" /> 
          </div> 
          <div class="row-fluid"> 
 
          </div><!--/row--> 
        </div><!--/span--> 
        <div class="span3"> 
      <?php if($this->countModules('right')) : ?> 
        <div class="well sidebar-nav"> 
          <jdoc:include type="modules" name="right" style="none" /> 
        </div><!--/.well --> 
      <?php endif; ?> 
        </div><!--/span--> 
      </div><!--/row--> 
      <hr> 
      <footer> 
        <p>&copy; Blackeclipse 2012</p> 
      </footer> 
    </div><!--/.fluid-container-->
 

Le utlime parti da integrare sono i Javascript che inseriremo alla fine per renderne il caricamento più veloce, caricheremo quindi sia le librerie jQuery ma anche la versione minima del bootstrap (bootstrap.min.js):

 
<!-- Javascript --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/jquery.js"></script> 
    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
      jQuery.noConflict(); 
    </script>
 

 

Ora il nostro tema non è certo perfetto, ma almeno sembra un sito web e soprattutto è reattivo, possiamo già iniziare a testarlo modificando le dimensioni della finestra del nostro browser (qui la versione testuale del file index.php utilizzato nella demo).

 

 

Joomla Overrides

Bene, è stato tutto facile fin qui, abbiamo seguito pochi semplici passi e abbiamo una buona base dalla quale partire per personalizzare il nostro template secondo le nostre preferenze. Per avere i massimi vantaggi dal Bootstrap Framework, dobbiamo sostituire l’output html predefinito di Joomla! qui il procedimento inizia a diventare più difficile e impegnativo e le difficoltà aumentano in base ai risultati che vogliamo raggiungere. Per prendere una scorciatoia possiamo utilizzare il lavoro di Gary Gisclair, scaricando il template “Strapped” e usando i suoi overrides, basta copiare l’intera cartella /html nella cartella principale del nostro template. La utilizzeremo per inserire come esempio il menu a discesa, che non è un’opzione predefinita in Joomla! ma il Bootstrap Framework la supporta perciò vogliamo questa funzione nel nostro template. Sempre a titolo esemplificativo, mettiamo il modulo Menu Principale in posizione top-menu (la posizione che abbiamo dichiarato nel file index.php lo visualizzerà “fixed” in testa alla pagina web), quindi per abbinarlo alla corretta classe CSS, sempre da Estensioni -> Gestione moduli -> Menu Principale in Suffisso Classe Menu (un suffisso da applicare alla classe CSS delle voci di menu) andiamo a scrivere “ nav-dropdown” (n.b. il primo carattere è uno spazio vuoto).

 

 

Funziona!

La comunicazione tra Joomla! e il Bootstrap Framework di Twitter è stata realizzata, possiamo apprezzarla dal frontend del nostro sito, il Menu a discesa è reattivo come del resto tutti gli altri elementi della pagina web, immagini comprese (automaticamente ridimensionate)

 

 

Conclusioni

Abbiamo capito, per grandi linee, come funzionano i template in Joomla! e soprattutto come avviare una collaborazione tra il Bootstrap e Joomla! da ora in poi tutto sta alla nostra fantasia e capacità di personalizzare come meglio crediamo. Possiamo giocare sui fogli di stile piuttosto che sul php, dare un’occhiata alla documentazione ufficiale del Bootstrap Framework, oppure utilizzare i parametri di Joomla! per personalizzare il template, insomma ora possiamo realizzare pressoché ogni cosa ci passa per la testa e avremo sempre un template dallo stile gradevole e soprattutto “responsive”!

Basta scendere sempre più a fondo nella comprensione dei template in Joomla! e del Bootstrap Framework.

 

Buon lavoro!

 

Ringraziamo gli amici di professionevf.com che ospitano temporaneamente una demo del nostro template reattivo!

CommentaCommenta questo articolo sul forum