Aggiungere interattività alle pagine realizzate con Twitter Bootstrap

In un precedente introduttivo a Twitter Bootstrap abbiamo visto come sia molto semplice utilizzare questo toolkit; basta infatti includere i CSS e i Javascript necessari e seguire alcune semplici (e poco intrusive) convenzioni per l’HTML per avere risultati immediati e molto gratificanti. In questa puntata mostreremo come sia altrettanto facile aggiungere alcune funzionalità avanzate che possono rendere ricca ed efficace l’interazione dell’utente con il nostro sito o web application.

Ridefinire il news ticker

L’oggetto del primo articolo era la homepage di una fantomatica azienda di hosting, la SuperMegaCloud; in quel frangente abbiamo cercato di riassumere in un layout il più possibile accattivante e sintetico i servizi offerti. Oggi ci spingeremo oltre, rendendo più interattiva e stimolante questa pagina che al momento è decisamente statica.

Il primo elemento che modificheremo sarà il riquadro delle news posto appena sotto l’intestazione, comunemente chiamato news ticker perché la sua posizione e funzionalità ricorda quello dei pannelli luminosi che mostrano in tempo reale le ultime notizie in borsa o nei centri commerciali. Questo elemento dovrà incuriosire il visitatore mostrando notizie aggiornate riguardo le attività e i servizi dell’azienda: nuove offerte, aggiornamento dei sistemi, risoluzione di problemi, consigli, eccetera.

Per renderlo più interattivo utilizzeremo un componente chiamato carousel, già presente nella distribuzione standard di Twitter Bootstrap. Nel carousel quindi mostreremo due riquadri alla volta, in modo da trovare un compromesso ottimale fra proporzioni visuali e quantità di informazioni visibili.

Ecco quindi il codice che andremo a inserire al posto del riquadro delle news:

<div id="myCarousel" class="carousel">
  <div class="carousel-inner">
    <div class="active item">
      <div class="row">
        <div class="span5">
          <h5>Promozione domini</h5>
          <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
          <a href="#">leggi</a>
        </div>
        <div class="span5">
          <h5>Nuova versione Debian</h5>
          <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
          <a href="#">leggi</a>
        </div>
      </div><!-- row -->
    </div><!-- item -->
    <div class="item">
      <div class="row">
        <div class="span5">
          <h5>Nuova funzione di backup</h5>
          <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
          <a href="#">leggi</a>
        </div>
        <div class="span5">
          <h5>Risolto problema invio email</h5>
          <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
          <a href="#">leggi</a>
        </div>
      </div><!-- row -->
    </div><!-- item -->
    <div class="item">
      <div class="row">
        <div class="span5">
          <h5>Nuovi domini .bau .miao</h5>
          <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
          <a href="#">leggi</a>
        </div>
        <div class="span5">
          <h5>Maggiore spazio disco</h5>
          <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
          <a href="#">leggi</a>
        </div>
      </div><!-- row -->
    </div><!-- item -->
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div><!-- #myCarousel -->

Per “attivare” il movimento automatico fra un riquadro e l’altro bisogna inoltre aggiungere questa istruzione javascript alla fine della pagina, prima del tag di chiusura </body>:

<script>
$('#myCarousel').carousel();
</script>

Infine, per lasciare adeguato spazio fra i contenuti e i controlli del carousel, aggiungiamo questa regola CSS nella sezione <style> già presente nella <head> della pagina:

.carousel-inner .item { margin: 10px 80px; }

Gli elmenti basilari per costruire un carousel sono i seguenti:

il <div> più esterno deve avere la classe carousel;
le pagine del carousel vanno inserite in <div class=”carousel-inner”> … </div>
i contenuti delle singole pagine vanno inseriti in elementi <div class=”item”> … </div>

Come potete notare, all’interno dei singoli item è possibile inserire del normale HTML; noi ad esempio abbiamo inserito un mini-layout a due colonne, ognuna larga come cinque colonne-base (classe span5).

Sviluppi

Carousel non è l’unico plugin disponibile per Twitter Bootstrap, ce ne sono molti altri e sono in continua evoluzione, senza contare che, utilizzando jQuery, è possibile sfruttare facilmente molti altri plugin disponibili per questa libreria.

Ridefinire il news ticker

Sviluppi

Links