Script e Markup HTML per un progetto "responsive"

Come base del progetto abbiamo utilizzato HTML5 Boilerplate. Possiamo così sfruttare senza problemi di supporto cross-browser i nuovi elementi strutturali HTML5 e contare su un foglio di stile che normalizza al meglio la presentazione dei vari elementi sui principali browser.

Gli script

Iniziamo ad analizzare il markup partendo dagli script.

Nella head della pagina carichiamo innanzitutto una serie di librerie:

<script type="text/javascript" src="assets/js/respond.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="assets/js/selectivizr-min.js"></script>
<![endif]-->
<!-- Flexlider -->
<script type="text/javascript" src="assets/js/jquery.flexslider-min.js"></script>

Con Respond.js (inclusa nell'HTML5 Boilerplate) estendiamo il supporto delle media queries su Internet Explorer 6-8.

Di Modernizr, anch'essa inclusa nel boilerplate, sfruttiamo di fatto solo una funzionalità: l'estensione del supporto su Internet Explorer 6-8 per i nuovi elementi strutturali di HTML5 (header, article, etc.).

L'ormai ubiqua jQuery ci serve come prerequisito per tre script e plugin che useremo sulla pagina, oltre che per la libreria successiva, Selectivizr, tramite la quale possiamo contare sul supporto di tutti i selettori CSS3 anche su Internet Explorer 6-8.

Inseriamo infine il richiamo a Flexslider.js, lo script con cui realizzeremo lo slideshow di immagini per i contenuti in evidenza.

Nel markup, dopo i riferimenti queste librerie, troviamo le poche righe di Javascript per inizializzare Flexslider e lo script per la creazione della navigazione sui dispositivi mobili (ci torneremo in seguito):

<!-- Flexlider -->
<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: 'fade',
    slideshow: true,
    controlNav: true,
    directionNav: false
  });
});
</script>
<script type="text/javascript">
var caricaFlexslider = function() {
  $(".flexslider").load("flexslider.html");
};
</script>
<!-- Fine Flexlider -->
<!-- Formattazione menu per il mobile -->
<script type="text/javascript">
$(function() {
 [...]
});
</script>
<!-- Fine formattazione menu per il mobile -->

Prima della chiusura del documento, in basso, altri tre blocchi di codice Javascript:

<!-- Carica lo slideshow se la finestra è larga più di 768px -->
<script type="text/javascript">
 if (document.documentElement.clientWidth >= 768) {
   caricaFlexslider();
 }
</script>
<!-- Fine caricamento slideshow -->
<!-- Inizializza lo script FitVids -->
<script src="assets/js/jquery.fitvids.js"></script>
<script>
  $("article.post").fitVids();
</script>
<!-- Fine FitVids -->
<!-- Script per la gelocalizzazione -->
<script type="text/javascript">
  var output = document.getElementById('luoghi');
  [...]
  }
</script>
<!-- Fine script per la geolocalizzazione -->

Con il primo carichiamo i contenuti dello slideshow solo quando la larghezza della finestra è superiore a 768px, evitando così di caricare risorse inutili per i dispositivi mobili (dal momento che abbiamo deciso, su questi ultimi, di non visualizzare lo slideshow).

Con il secondo inzializziamo Fitvids.js, un plugin per jQuery che consente di rendere 'fluidi' nelle dimensioni i video incorporati nella pagina.

Il terzo script è una variante di Look around you, la mini-applicazione creata da Christian Heilmann che useremo per implementare la funzione 'Around you'.

La struttura

Per quanto concerne la struttura della pagina, osserviamo solo poche cose:

• sono stati usati per definire le sezioni principali della pagina tag HTML5 come header, nav, article, aside e footer;
• è importante definire l'ordine degli elementi avendo già più o meno chiaro il modo in cui gli stessi saranno presentati a livello di layout con i CSS; sapere sin dall'inizio se un certo elemento sarà per esempio floattato o posizionato assolutamente è necessario.

Ecco comunque l'ossatura di base della nostra home page:

<body>
<div id="container">
  <! Inizio header -->
  <header>
    <!-- Inizio sezione logo -->
    <div id="logo">
      <img alt="logo" src="assets/img/global/logo.png">
    </div>
    <!-- Fine sezione logo -->
    <!-- Inizio navigazione principale -->
    <nav>
      <h2>Sezioni</h2>
      <ul class="menu" id="menu-principale">
        <li id="home"><a href="#">Home</a></li>
        [...]
      </ul>
    </nav>
    <!-- Fine navigazione principale -->
  </header>
  <! Fine header -->
  <!-- Inizio slideshow contenuti in evidenza -->
  <div id="inevidenza" class="flexslider">
  </div>
  <!-- Fine slideshow contenuti in evidenza -->
  <div id="content">
    <!-- Inizio #main (contenuti principali) -->
    <div id="main">
      <!-- Inizio sezione ultimi 5 articoli -->
      <article class="post" id="post-1">
        <time>22 Marzo 2012</time>
        <h2><a href="#">Gli eroi di New York</a></h2>
        <img alt="alt" src="http://src.sencha.io/http://html.it/esempi/ilviaggio/assets/img/articoli/pompieri.jpg">
        <p>Lorem ipsum dolor […]</p>
      </article>
      [...]
      <!-- Fine sezione ultimi 5 articoli -->
      <!-- Inizio sezione contenuti in evidenza per mobile -->
      <div id="around">
        <h2>Around you</h2>
        <ul id="luoghi">
        </ul>
      </div>
      <!-- Fine sezione contenuti in evidenza per mobile -->
    </div>
    <!-- Fine #main (contenuti principali) -->
    <!-- Inizio contenuti secondari -->
    <aside id="primaria">
      <!-- Inizio box di ricerca -->
      <div id="ricerca">
        <input id="search" name="search" placeholder="Cerca..." type="text">
        <input id="button" name="button" type="submit" value="Vai">
      </div>
      <!-- Fine box di ricerca -->
      <!-- Inizio link e icone social -->
      <div class="widget social-widget" id="social">
        <ul>
          <li><a href="#" id="twitter">Seguici su Twitter</a></li>
          [...]
        </ul>
      </div>
      <!-- Fine link e icone social -->
      <!-- Inizio sezione ultimi commenti -->
      <div class="widget ultimi-commenti-widget" id="ultimi-commenti">
        <h3>Ultimi commenti</h3>
        <div class="commenti">
          <ul class="lista-commenti">
            <li><span class="autore-commenti"><a href="#">Lucio
            Rossi</a></span>: <span class="testo-commenti">Lorem ipsum sit […]</span></li>
            [...]
          </ul>
        </div>
      </div>
      <!-- Fine sezione ultimi commenti -->
    </aside>
    <aside id="secondaria">
      <!-- Inizio sezione categorie e tag -->
      <div class="widget categorie-widget" id="categorie">
        <h3>Città</h3>
        <ul>
          <li><a href="#">New York</a></li>
          [...]
        </ul>
        <h3>Regioni</h3>
        <ul>
          <li><a href="#">Andalusia</a></li>
          [...]
        </ul>
      </div>
      <!-- Fine sezione categorie e tag -->
    </aside>
    <!-- Fine contenuti secondari -->
  </div>
  <! Inizio informazioni di supporto (footer) -->
  <footer>
    <ul id="legal">
      <li>© Il Viaggio: info@ilviaggio.it</li>
      <li>Tel/fax: +3906123456789</li>
      <li><a href="#">Info legali</a></li>
    </ul>
  </footer>
  <! Fine informazioni di supporto (footer) -->
</div>
<!--! Fine #container -->
</body>

In altro documento HTML, flexslider.html, inseriamo il codice per la struttura del nostro slideshow. Useremo questo documento a breve per sperimentare il caricamento condizionale dei contenuti:

<ul class="slides">
 <li>
   <a href="#"><img src="assets/img/flexslider/1.png" class="slide"></a>
   <p class="flex-caption"><a href="#">Lorem ipsum dolor sit</a></p>
 </li>
 [...]
</ul>

Rimane da analizzare solo una riga di codice a livello HTML, ma è molto importante e merita una trattazione approfondita. Lo faremo nella prossima lezione.