Squelettes Framasoft (0) introduction

A partir d'aujourd'hui et jusqu'à la fin du mois, j'entame le travail de refonte des squelettes du site Framasoft.

Ce travail a commencé en juillet 2005 mais j'ai eu quelques difficultés à mener les tests en local. Pour faire simple : il avait été impossible d'installer une copie du site sur mon ordinateur. Depuis, beaucoup de choses ont changé : je suis passé sous Linux, où la mise en place d'un « Framasoft local » a été d'une lumineuse simplicité. Je reprend donc un travail déjà bien avancé, avec l'espoir de mettre en ligne la nouvelle formule des squelletes à la fin du mois, ou au début du mois de mars.

Cette brève entame une série qui servira de journal de bord à ce processus de réécriture, dont voici les principales lignes directrices.

Remarques générales :

  • Modifier uniquement le code des squelettes et ne pas toucher au code utile au moteur de rendu du CMS Spip. Cela pourrait poser des problèmes lors des mises à jour.
  • Développer en suivant tant que faire ce peu les recommandations W3C. Cela passe par une séparation claire entre stucture, présentation et contenu. La structure sémantique des documents sera gérée par les squelettes, la présentation par la feuille de styles css, le contenu par la base mysql. Le travail mené ici ne portera que sur les 2 premiers points.
  • Tester avec des navigateurs respectant le mieux ces recommandations (Firefox, Opera) puis adpater les modifications (si nécessaires) aux navigateurs moins respectueux (Internet Explorer).
  • Ecriture en HTML 4.0.1 strict.
  • Ecriture en CSS 2.1 avec quelques propriétés mozilla.

La simplification du code passe par :

  1. Supprimer la surabondance de blocs conteneurs (généralement des divs)
  2. Supprimer la surabondance d'attributs en exploitant la cascade de style.
  3. Gérer tous les graphismes d'illustration de la maquette par les CSS (background-image).

La correction du code consiste à :

  1. Mettre à profit la structure sémantique du langage HTML en remplaçant les conteneurs génériques (div, span) par des conteneurs fonctionnels dédiés (listes à puces, liste de définition, balises titre, etc.)
  2. Supprimer les tableaux là où ils sont utilisés pour mettre en forme la maquette.
  3. Supprimer dans le code HTML tous ce qui a un rapport avec la présentation. La présentation est gérée par les feuilles de styles en cascade.

Exemple de réécriture du code avec le menu de navigation :

<div class="menu_box">
  <BOUCLE_menu(RUBRIQUES){racine}{lang?}{0,1 }{par titre}>         
    <div>
      <a class="menu" href="#URL_SITE_SPIP/">[[(#NOM_SITE_SPIP|majuscules)&# 93;</a>
    </div>
    <BOUCLE_menu_rub(RUBRIQUES){id_parent}{p ar num titre}{0,4}>
      <div>
        <a class="menu" href="#URL_RUBRIQUE">[[(#TITRE|supprimer_numero)]]& lt;/a>
      </div>
    </BOUCLE_menu_rub>
  </BOUCLE_menu>
  <div>
    <a class="menu" href="http://forum.framasoft.org/"><:forum_name:&g t;</a>
  </div>
</div>
1. Code original du menu de navigation.
<ul id="nav">
  <BOUCLE_menu(RUBRIQUES){racine}{lang?}{0,1 }{par titre}>         
    <li><a href="#URL_SITE_SPIP/">[[(#NOM_SITE_SPIP|majuscules)&# 93;</a></li>
    <BOUCLE_menu_rub(RUBRIQUES){id_parent}{par num titre}{0,4}>
      <li><a href="#URL_RUBRIQUE">[[(#TITRE|supprimer_numero)]]& lt;/a></li>
    </BOUCLE_menu_rub>
  </BOUCLE_menu>
  <li><a href="http://forum.framasoft.org/"><:forum_name:&g t;</a></li>
</ul>
2. Code modifié du menu de navigation