Twitter Bootstrap è un progetto molto interessante per chi deve sviluppare siti o applicazioni web. Fa parte della famiglia dei cosiddetti toolkit o CSS framework, il cui scopo è fornire degli strumenti per partire molto velocemente (ecco perché ha preso il nome bootstrap) con un nuovo progetto senza dover ripensare ogni volta da capo tutto quanto.
Uno standard di riferimento
L’obiettivo, piuttosto ambizioso, è di riuscire a standardizzare la realizzazione dell’interfaccia utente, lasciando però massima libertà nella personalizzare sia lo stile che l’interazione con l’utente. Per ottenere ciò sono stati raggruppate in un unico strumento diverse best practices del web design e librerie Javascript basate su jQuery.
Realizziamo una homepage
Vediamo quindi come realizzare una homepage da zero. Per prima cosa vi mostriamo il mockup che abbiamo preparato insieme al (ipotetico) cliente; si tratta di una nota azienda di hosting che ha deciso di lanciarsi nel mondo del Cloud Computing, vuole così realizzare un portale tutto dedicato a queste offerte. Il design della homepage sarà dunque così:
Questo tipo di design moderno ormai è molto comune, così l’utente potrà sentirsi “a casa propria” e sarà invogliato ad acquistare (si spera!) motissimi servizi di cloud hosting. Vediamo come abbiamo tradotto questi schizzi in una pagina vera e propria:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Esempio Bootstrap #1: cloud provider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SuperMegaCloud">
<meta name="author" content="Dimitri De Franciscis per www.internetpost.it">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Hosting</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Assistenza</a></li>
<li class="divider-vertical"></li>
<li><a href="#">FAQ</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Chi siamo</a></li>
</ul>
<a class="btn pull-right"><i class="icon-user"></i>Registrazione / login</a>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>SuperMegaCloud</h1>
<p>Il servizio cloud che bla bla bla e che è davvero incredibile perché
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="btn btn-primary btn-large">Scopri perché</a></p>
</div>
<div class="row">
<div class="span4">
<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="span4">
<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 class="span4">
<h5>Promozione backup</h5>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<a href="#">leggi</a>
</div>
</div>
<div class="page-header">
<h1>Piani di hosting <small>Scegli il tuo modo di essere cloud</small></h1>
</div>
<div class="row">
<div class="span6">
<h2>Cloud Facile <small>Per chi non sa nemmeno cosa sia un server</small></h2>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipiscing</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique
scelerisque massa, quis aliquam sapien pharetra id. Proin aliquet vulputate
elit, eget feugiat enim pretium ac. Aenean ullamcorper justo nec magna ultrices
ut mollis tortor accumsan. Etiam sed pretium enim. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin condimentum, turpis non tristique accumsan,
lacus arcu iaculis diam, id laoreet eros magna quis augue. Vivamus quis sem
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper
malesuada neque, sit amet porttitor sapien sagittis ut. Aliquam erat volutpat.
Vivamus mi dui, mollis sit amet placerat eget, tristique in ligula.
</p>
</div>
<div class="span6">
<h2>Cloud Faidate <small>Per i veri nerd</small></h2>
<ul>
<li>Pellentesque lectus</li>
<li>Curabitur diam enim</li>
<li>Fusce malesuada dictum</li>
</ul>
<p>
Pellentesque lectus arcu, tincidunt sed rutrum sit amet, cursus in arcu. Fusce
viverra ligula quis nisl commodo consequat. Aliquam sed ligula at nisi ornare
suscipit. Phasellus ut risus vitae velit pellentesque ullamcorper eget vitae
lorem. Duis nec justo eu lorem posuere pulvinar eget quis elit. Nam massa lacus,
vehicula nec congue sit amet, rutrum id enim. Donec lectus arcu, volutpat at
aliquet a, pretium nec tortor. Maecenas in neque diam, ac placerat quam. Aenean
non sapien eros. Quisque purus purus, posuere imperdiet mattis ut, mollis a
odio. Vivamus ornare aliquam luctus.
</p>
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
Alcuni elementi importanti da notare:
- abbiamo realizzato questo template a partire dall’esempio hero.html presente nella cartella docs/examples di Twitter Bootstrap;
- l’utilizzo dei cosiddetti componenti, ad esempio navbar (barra di navigazione) e la hero-unit, ovvero il grosso titolo della homepage;
- la larghezza dei <div> viene impostata tramite la classe CSS span1 (larghezza 1), span2 eccetera;
- ogni riga del layou è racchiusa in un elemento <div class=”row”>
Ecco quindi uno screenshot della pagina:
Come potete notare anche non abbiamo personalizzato i fogli di stile il design è già molto gradevole! La potenza di questi toolkit è tutta qui: in pochi minuti è possibile realizzare layout convincenti ed efficaci, da presentare al cliente in un batter d’occhio e ottenere più facilmente l’approvazione del progetto.