back to top

Lo scheletro HTML del nostro m-site

Come abbiamo già vsto alla lezione .5 di questa guida, il layout di base di un m-site è piuttosto semplice con i diversi elementi della pagina incolonnati uno sotto all’altro.

Al fine di proseguire nel nostro percorso didattico immaginiamo di voler realizzare un semplice m-site di un fiorista che ha deciso di creare una piccola enciclopedia di fiori fruibile attraverso smartphone. Questo il risultato:

Sito mobile d'esempio

Nello specifico, come potete vedere dall’immagine, abbiamo la pagina per quattro fasce orizzontali:

  • Header
  • Menu
  • Area di contenuto
  • Footer

Questo, pertanto, sarà lo scheletro HTML della nostra pagina web:

<!DOCTYPE html>
<html> 
<head>
  <title>Il mio sito mobile!</title>
  
  <!-- META SPECIFICI PER DISPOSITIVI MOBILI -->
  <meta name="HandheldFriendly" content="true" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  
  <!-- ICONE ANDROID -->
  <link rel="icon" sizes="192x192" href="/icona-android-hires.png" />
  <link rel="icon" sizes="128x128" href="/icona-android.png" />

  <!-- ICONE IOS -->
  <link rel="apple-touch-icon" size="57x57" href="/icona_57x57.png" />
  <link rel="apple-touch-icon" size="72x72" href="/icona_72x72.png" />
  <link rel="apple-touch-icon" size="76x76" href="/icona_76x76.png" />
  <link rel="apple-touch-icon" size="114x114" href="/icona_114x114.png" />
  <link rel="apple-touch-icon" size="120x120" href="/icona_120x120.png" />
  <link rel="apple-touch-icon" size="144x144" href="/icona_144x144.png" />
  <link rel="apple-touch-icon" size="152x152" href="/icona_152x152.png" />

  <!-- CSS -->
  <link rel="stylesheet" href="/foglio-di-stile.css" type="text/css" />
  
  <!-- JQUERY -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   

  <!-- NOSTRI SCRIPT -->
  <script src="/clientscript.js"></script>
  
</head>
<body>

  <div id="header">
    <img src="/img/logo.png" alt="Fiorista Virtuale"/>
  </div>
  
  <div id="menu">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/fiori.html">Fiori</a></li>
    </ul>
  </div>
  
  <div id="contenuto">
    <div class="inner">
      <p>...</p>
      <p>...</p>
      <p>...</p>
    </div>
  </div>
  
  <div id="footer">
    © 2014 - Il fiorista virtuale
  </div>
    
</body>
</html>

Essendo inutile soffermarsi sui meta-tag (di cui si è ampiamente discusso nelle lezioni precedenti), non resta che evidenziare come nella sezione <head> della nostra pagina abbiamo provveduto ad includere un file di stile (che vedremo nella prossima lezione), la libreria jQuery (che utilizzeremo per gestire alcuni aspetti "dinamici" del nostro m-site) ed un generico file .js nel quale andremo ad inserire le nostre istruzioni Javascript.

Per quanto riguarda il <body>,invece, potete notare la presenza di quattro div contraddistinti da degli ID piuttosto esplicativi. Vediamo nel dettaglio cosa abbiamo fatto:

  • all’interno del div con id="header" abbiamo scelto di inserire, semplicemente, l’imagine del nostro logo;
  • il div con id="menu" contiene un semplice elenco puntato che trasformeremo, grazie ai CSS, nel macro-menu del nostro m-site;
  • il div con id="contenuto" conterrà, come è facile intuire, il contenuto della pagina web;
  • mentre, per finire, il div con id="footer" sarà posizionato a fondo pagina è conterrà, nel nostro esempio, l’indicazione del copyright del nostro sito web.

Nella prossima lezione vedremo come compilare il nostro foglio di stile per "vestire" lo scheletro che abbiamo definito.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).