Design HTML

De OpenESubWiki.

Sommaire

Introduction

Si vous avez bien approfondi le document développeur, vous avez noté que la grosse majorité du code HTML est située dans des templates. L'objectif de ce document est d'harmoniser les différents templates autour d'une norme commune.

Normes générales

Dans le but de séparer au maximum la présentation et le contenu, le code HTML fait un usage massif des feuilles de style (CSS). Cependant, concernant le positionnement, les tableaux restent autorisés. Le but n'étant pas de verser dans l'extrémisme CSS. Le projet n'impose rien à ce niveau. Chacun est libre...

openESub, même si ce n'est pas une priorité absolue, vise la certification XHTML strict de l'ensemble de son code HTML et la certification CSS 2 pour les feuilles de style. En respectant exclusivement les normes officielles du W3C, on se prémunit contre des problèmes d'affichage dans tel ou tel navigateur. Les normes étant assez récentes, on veillera cependant à maintenir une compatibilité avec :

  • Internet Explorer 5 ou +
  • Netscape 6 ou +
  • Mozilla 1 ou +

Pour la validation du code XHTML ou CSS, on utilisera les services du W3C : validateur XHTML et validateur CSS.

Organisation des templates

L'interface est décrite dans des templates spécifiques si bien qu'il n'est pas nécessaire de la répéter sur chaque page. Ces templates sont situés dans le répertoire templates/interface et ne doivent (en principe) pas être retouchés. Une feuille de style est associée à cette interface : templates/css/interface.css et ne doit (en principe) pas être modifiée non plus.

Le design d'une page classique consiste donc en un fichier .html situé dans le répertoire templates/pages. Ce fichier ne sera pas un vrai fichier .html. Entrez le texte non formaté ici dans la mesure où il ne contient que la partie manquante (vis à vis de l'interface). Il n'y a donc pas d'en-têtes HTML... Dans le cas où vous auriez besoin d'une feuille de style spécifique, vous pouvez la placer dans le répertoire templates/css. Elle sera chargée (si vous en faites la demande au niveau du code PHP) en plus de la classique templates/css/interface.css.

Ecriture d'un template

Dans la mesure où le code doit être XHTML strict avec une séparation forte contenu / mise en forme, il paraît clair que le code HTML devra être écrit directement dans un éditeur de texte (et pas au travers d'un éditeur graphique).

A des fins de lisibilité, vous veillerez à marquer l'indentation de chaque balise. L'indentation retenue est exactement de 4 espaces. A des fins d'uniformisation et de compatibilité, aucune tabulation ne doit être présente dans les fichiers. Il est fortement conseillé de paramétrer son éditeur de texte favori pour qu'il remplace automatiquement les tabulations par 4 espaces.

Dans l'écriture du template, il faut veiller à respecter l'unité graphique du site. Pour ce faire, il est bon de diviser sa page en plusieurs sections séparées par :

<h2>titre de la section</h2>

Les paragraphes seront placés entre :

<p>(...)</p>

Le premier caractère du paragraphe sera {$puce} qui sera remplacé automatiquement par le code PHP par une puce rouge du meilleur effet ! Enfin, les sous-paragraphes seront marqués par une liste HTML classique :

<ul>(...)</ul>

et

<li>(...)</li>

Afin de simplifier le travail du designeur HTML, il existe un certain nombre de variables prédéfinies et qui seront remplacées automatiquement par le code HTML :

  • {$puce}, remplacée par une puce pour marquer le début d'un paragraphe ;
  • {$adresse_templates}, remplacée par l'adresse complète du répertoire templates dans l'arborescence ;
  • {$adresse_images}, remplacée par l'adresse complète du répertoire images dans l'arborescence ;
  • {$adresse_pages}, remplacée par l'adresse complète du répertoire pages dans l'arborescence (très utile pour les liens) ;
  • {$adresse_uploads}, remplacée par l'adresse complète du répertoire upload dans l'arborescence.
Outils personnels