Drupal 6 navigazione veloce.
menu principale | colonna di navigazione a sinistra | contenuto principale | colonna di navigazione a destra | piè di pagina

menu principale

contenuto principale

Modificare il layout

Questa è il layout di base di genesis_miotema.

layout

Ho apportato diverse modifiche lavorando sul file page.tpl.php che trovi in genesis_miotema/templates/page.

Il salta menù

Appena sotto a

<body id="genesis-1b" <?php print $section_class; ?>>

ho aggiunto un "salta menù" per facilitare la navigazione da parte di chi usa screen readers e di chi fruisce della pagina senza i Fogli di Stile.
Nel primo caso si tratterà di inserire dei collegamenti interni alla pagina (nascosti a video con un'apposita proprietà dei css) che permettano al navigatore di saltare alcune parti del documento, senza dovere necessariamente leggerle, per potersi posizionare con la sintesi vocale in particolari zone di interesse.
La navigazione senza Fogli di Stile sarà invece favorita con l'inserimento di alcune parole di presentazione e di alcuni elementi grafici, tipo linee di separazione, prima delle diverse sezioni del documento, in modo da migliorare la formattazione del documento anche quando non possa essere vista quella progettata nel foglio di stile. Anche in questo caso, il tutto sarà nascosto con il Foglio di Stile, in modo da non modificare il layout grafico per coloro che navigano con browser che, invece, supportano la funzione dei css.
In genesis_miotema è già presente skip-nav che permette di saltare direttamente al contenuto principale, ma ho ritenuto più funzionale commentarlo e sostituirlo.

  • Commentare skip-nav

<!--<div id="skip-nav">
<a href="#main-content"><?php print t('Skip to main content'); ?></a>
</div>-->

  • Inserire il "salta menù 

 <body id="genesis-1b" <?php print $section_class; ?>>
<!--inizio salta menu-->
<div class="nascosto">
<strong>Drupal 6 navigazione veloce</strong>. <br />
<a href="#menu1">menu principale</a> |
<a href="#colsinistra">colonna di navigazione a sinistra</a> |
<a href="#contenuto1" >contenuto principale</a> |
<a href="#coldx">colonna di navigazione a destra</a> |
<a href="#sotto">pi&egrave; di pagina</a>
 <hr />
</div>
<!-- fine salta menu -->

  •  Aggiungere il collegamento alla navigazione orizzontale appena sotto la chiusura dell'header e prima della navigazione orizzontale

    </div> <!-- /header -->
<!--inizio menu1 nascosto--> 
<div class="nascosto">
  <hr />
  <strong><a name="menu1" id="menu1"></a>menu principale</strong>
  <hr />
  </div>
 <!-- fine menu1 nascosto -->
    <?php if ($primary_menu or $secondary_menu): ?>
      <div id="nav" class="clear-block">

  •  Aggiungere il collegamento al contenuto principale

      </div> <!-- /nav -->
    <?php endif; ?>
 <!-- contenuto nascosto-->
  <div class="nascosto">
  <hr />
  <strong><a name="contenuto1" id="contenuto1"></a>contenuto principale</strong>
  <hr />
  </div>
 <!-- fine contenuto nascosto -->
    <?php if ($secondary_content): ?>

  • Aggiungere il collegamento alla colonna di sinistra

     </div></div> <!-- /content-column -->
<!-- colonna sinistra nascosta -->
  <div class="nascosto">
  <hr />
  <strong><a name="colsinistra" id="colsinistra"></a>colonna sinistra</strong>
  <hr />
  </div>
 <!-- fine colonna sinistra nascosta -->
      <?php if ($left): ?>

  • Aggiungere il collegamento alla colonna di destra

        </div></div> <!-- /sidebar-left -->
      <?php endif; ?>
<!-- colonna destra nascosta -->
  <div class="nascosto">
  <hr />
  <strong><a name="coldx" id="coldx"></a>colonna destra</strong>
  <hr />
  </div>
 <!-- fine colonna destra nascosta -->
      <?php if ($right): ?>

  • Aggiungere il collegamento al piè di pagina

<!--  pie di pagina nascosto -->
  <div class="nascosto">
  <hr />
  <strong><a name="sotto" id="sotto"></a>pi&egrave; di pagina</strong>
  <hr />
  </div>
 <!-- fine pie di pagina nascosto -->
    <?php if ($footer or $footer_message): ?>

Cambiare la posizione di leaderboard

  • Evidenziare

  <div id="container" class="<?php print $classes; ?>">

  • spostarlo sopra l'inizio di header in modo che leaderboard resti fuori da container

    <?php if ($leaderboard): ?>
      <div id="leaderboard" class="section region"><div class="region-inner">
        <?php print $leaderboard; ?>
      </div></div> <!-- /leaderboard -->
    <?php endif; ?> 
  <div id="container" class="<?php print $classes; ?>">
    <div id="header" class="clear-block">

Correzione di site-name

In quasi tutti i temi di Drupal 6.x è previsto che in Home page il nome del sito abbia per default il Titolo 1 (h1) e che i titoli dei nodi abbiano il tag h2. Nelle altre pagine il nome del sito non ha il tag h1 e quindi è previsto che lo abbia  il titolo del nodo.
Questo penso sia stato pensato per favorire l'indicizzazione nei motori di ricerca e dal punto di vista della correttezza codice è OK.
Un problema però c'è! Può essere necessario inserire nel nodo un sottotitolo, quindi poichè il titolo del nodo ha tag h1 il sottotitolo deve avere h2.
Questo va bene nel nodo, ma se decidiamo di pubblicare il nodo in Home page la gerarchia dei titoli non è più corretta perchè il nome sito ha h1, il titolo del nodo ha h2 e il sottotitolo pure.

Ho preferito modificare in modo che il nome sito abbia h1 in tutte le pagine.

      <?php if ($site_logo or $site_name or $site_slogan): ?>
        <div id="branding">
          <?php if ($site_logo or $site_name): ?>
            <?php if ($title): ?>
              <div class="logo-site-name"><strong>
                <?php if ($site_logo): ?><span id="logo"><?php print $site_logo; ?></span><?php endif; ?>
                <?php if ($site_name): ?><span id="site-name"><?php print $site_name; ?></span><?php endif; ?>
              </strong></div>          
            <?php else: /* Use h1 when the content title is empty */ ?>    
              <h1 class="logo-site-name">
                <?php if ($site_logo): ?><span id="logo"><?php print $site_logo; ?></span><?php endif; ?>
                <?php if ($site_name): ?><span id="site-name"><?php print $site_name; ?></span><?php endif; ?>
             </h1>
            <?php endif; ?>
          <?php endif; ?>

  • corretto con

     <?php if ($site_logo or $site_name or $site_slogan): ?>
        <div id="branding">
           <?php if ($site_logo): ?>
                <div id="logo"><?php print $site_logo; ?></div>
              <?php endif; ?>
              <?php if ($site_name): ?>
                <?php if ($title): ?>
                  <h1 id="site-name"><strong><?php print $site_name; ?></strong></h1>
                <?php else: /* Use h1 when the page title is empty */ ?>
                  <h1 id="site-name"><?php print $site_name; ?></h1>
                <?php endif; ?>
              <?php endif; ?>

Indirizzo

Per indirizzo scuola, numeri di telefono, indirizzo e-mail ho previsto un contenitore che ho chiamato "indirizzo" e l'ho posizionato sotto site.name e prima di site-slogan

                <h1 id="site-name"><?php print $site_name; ?></h1>
                <?php endif; ?>
              <?php endif; ?>
<div id="indirizzo">Via Xxxxxx, xx - xxxxx Xxxxxxx (MI)<br />
    tel. 02 XX XX XXX - fax 02 XX XX XX XX<br />
    e-mail xxxxxxx@xxxxxxxxx.xx</div>   
          <?php if ($site_slogan): ?>
            <div id="site-slogan"><?php print $site_slogan; ?></div>
          <?php endif; ?>

 Breadcrumb - Navigazione a briciole di pane

La navigazione "'a briciole di pane", attraverso la quale si ottiene un'importante indicazione circa la posizione della pagina all'interno della struttura gerarchica del sito, l'ho posizionata appena sopra al contenuto principale.

  • Evidenzia

    <?php if ($breadcrumb): ?>
      <div id="breadcrumb" class="nav"><?php print $breadcrumb; ?></div> <!-- /breadcrumb -->
    <?php endif; ?>

  • sposta sotto "mission" e sopra "top-content"

        <?php if ($mission): ?>
          <div id="mission"><?php print $mission; ?></div> <!-- /mission -->
        <?php endif; ?>
    <?php if ($breadcrumb): ?>
      <div id="breadcrumb" class="nav"><?php print $breadcrumb; ?></div> <!-- /breadcrumb -->
    <?php endif; ?>
        <?php if ($content_top): ?>
          <div id="content-top" class="section region"><?php print $content_top; ?></div> <!-- /content-top -->
        <?php endif; ?>

Licenza

Alla fine di "container" e prima dell'indicazione di chiusura ho posto il riferimento alla Creative Commons License.
Il riferimento non è obbligatorio, ma le licenze Creative Commons offrono sei diverse articolazioni dei diritti d'autore per artisti, giornalisti, docenti, istituzioni e, in genere, creatori che desiderino condividere in maniera ampia le proprie opere secondo il modello "alcuni diritti riservati".

</div> <!-- /container -->
<div id="licenza">
<span class="nascosto">[</span><a href="http://creativecommons.org/licenses/by-nc-sa/2.0/"
rel="license"><img alt="Creative Commons License" src="http://creativecommons.org/images/public/somerights20.gif" /></a><span class="nascosto">]</span><br />
I contenuti di questo sito, salvo diversa indicazione, sono rilasciati sotto una licenza <span class="nascosto">[</span><a href="http://creativecommons.org/licenses/by-nc-sa/2.0/"
rel="license">Creative Commons License</a><span class="nascosto">]</span>.<br />
Tutti i marchi sono propriet&agrave; dei rispettivi proprietari.
</div>
<?php print $closure ?>

In allegato trovi il file page.tpl.zip che contiene page.tpl.php con tutte le correzioni.
Priva di inviare pare.tpl.php via ftp in sites/all/themes/genesis_miotema/templates/page ricorda di correggere  "indirizzo" inserendo l'indirizzo della tua scuola.

Purtroppo il risultato è davvero sconfortante: provare per credere!
Le barre laterali sono sparite. Per aggiustare il tutto dobbiamo lavorare sui fogli di stile. 

AllegatoDimensione
page.tpl_20_08_09.zip3.54 KB

colonna sinistra

colonna destra