16.3 Réalisation technique II

16.3.4 La boutique (shop)

Pour que les clients puissent commander et régler en ligne, il faut ajouter au site un système de prise de commande et de paiement. À l’heure où nous mettons sous presse, il n’existe aucun composant de e-commerce qui fonctionne de façon suffi samment stable avec la nouvelle version Joomla!1.5 (mais l’excellent VirtueMart en version 1.1 sera sans doute disponible quand vous lirez ceci). De plus, M. Bertrand aimerait ne pas installer trop de composants additionnels, pour limiter les efforts de maintenance et de mise à jour.
Son fils Didier a alors l’idée de mettre en place un panier de commande PayPal, le système de paiement Web le plus répandu au monde qui appartient à la société eBay. PayPal propose un grand nombre d’outils pour les vendeurs, et notamment un système de panier de commande. M. Bertrand décide donc de créer un compte PayPal associé à une carte bleue. Il existe des systèmes concurrents à PayPal, comme WorldPay, qui offrent à peu près les mêmes fonctions.

Pour l’instant, trois produits sont proposés à la vente :

• un blanc à 10 euros la bouteille ;
• un rosé à 10 euros la bouteille ;
• un rouge à 12 euros la bouteille.

PayPal permet de créer des boutons qui peuvent être associés aux articles décrivant ces produits. En cliquant sur le bouton, l’article est déposé dans le panier PayPal. Précisons que les frais d’expédition et les taxes sont gérés (voir Figure 16.28).

M. Bertrand décide d’ajouter des boutons pour PayPal dans l’affichage du texte des articles Blancs, Rouges et Rosés (pas dans les éléments de menu !). Il va créer un module à cet effet. Pour simplifier l’injection du code HTML, il choisit No Editor dans le paramètre Éditeur WYSIWYG par défaut accessible par la commande SITE > CONFIGURATION GLOBALE, page SITE. Par la commande EXTENSIONS> GESTION des modules, bouton NOUVEAU, il sélectionne le type de module Custom HTML. Il ne reste plus qu’à insérer le code HTML récupéré depuis la page adéquate du site PayPal dans la zone de texte de l’éditeur (s’il avait conservé un éditeur Wysiwig, il aurait fallu utiliser le bouton HTML pour insérer le bloc HTML). Le nouveau module sera placé dans la colonne gauche sous le menu général. Il reste à choisir les pages dans lesquelles le bouton doit apparaître au moyen de la liste en bas à gauche (voir Figure 16.29).

Figure 16.28 Définition des boutons du panier de commande.

Figure 16.29 Le nouveau module pour accéder à la boutique.

Dans cet exemple utilisant PayPal, l’adresse de messagerie de M. Bertrand est obligatoire dans le code source, mais le plugin Email Cloaking activé en standard masque l’adresse pour des raisons de sécurité. PayPal ne peut pas dans ce cas accéder correctement au panier de commande. Il faut donc désactiver le plugin par la commande EXTENSIONS > PLUGINS. Le site Web montre ensuite l’aspect de la Figure 16.30.

Figure 16.30 Un bouton de commande PayPal sur le site Web.

Lorsque le visiteur clique sur un tel bouton, il bascule dans l’affichage d’un panier de commande PayPal. Nous n’expliquons pas les détails de cette préparation ici, mais sachez que cela permet de choisir le nombre d’articles puis de passer au règlement (voir Figure 16.31).

Figure 16.31 Exemple de panier de commande sur PayPal.

Si le client possède un compte PayPal, il peut payer immédiatement. Les internautes qui achètent sur le Web disposent souvent d’un tel compte PayPal, et leur nombre ne fera qu’augmenter.

16.3.5 Les reportages

Pour offrir aux visiteurs de son site un aperçu de la région dans laquelle il est implanté, M. Bertrand décide de donner accès à des images et à des vidéos. Il installe d’abord le composant de galerie de photos Exposée (revoyez la section 12.3 du Chapitre 12). Il crée une collection Vendanges contenant un album 2007, une collection Fiesta vinicole avec un Album 2007 et une collection Production (voir Figure 16.27). Son fils Didier ajoutera d’autres documents ultérieurement.

Figure 16.32 Le gestionnaire d’album Exposé.

Il crée ensuite un élément de menu vers le nouveau composant par la commande MENUS > MAIN MENU, bouton NOUVEAU. Il donne au lien le titre Reportages. Une fois qu’il l’a sauvé, il peut définir exactement la position de l’élément au sein du menu. Les images sont ensuite disponibles à partir du nouveau lien REPORTAGES (voir Figure 16.33).

Figure 16.33 La section Reportages du site Web.

16.3.6 L’espace réservé aux membres

L’espace réservé aux visiteurs qui possèdent un compte d’utilisateur doit leur proposer des promotions, un plateau de téléchargement de documents au format PDF (certificats, analyses du sol, etc.) ainsi qu’un moyen de modifier les coordonnées du compte.

Le menu utilisateur

M. Bertrand crée un nouvel article non catégorisé portant le titre Promotions. Il vérifie que l’article est publié, qu’il n’apparaît pas sur la page d’accueil et qu’il n’est accessible qu’aux utilisateurs enregistrés (voir Figure 16.34).

Figure 16.34 Le nouvel article Promotions

Par la commande MENUS > GESTION DES MENUS, bouton NOUVEAU, il crée un nouveau menu qu’il appelle Menu utilisateur (voir Figure 16.35).

Figure 16.35 Création du troisième menu, Menu utilisateur.

Il place par la commande EXTENSIONS > GESTION des modules le nouveau menu dans la colonne gauche, il l’active et en limite l’accès aux utilisateurs enregistrés (voir Figure 16.36).

Figure 16.36 Le menu utilisateur dans la gestion des modules.

Il connecte ensuite l’article à son nouveau menu en réglant le niveau d’accès sur ENREGISTRÉ (voir Figure 16.37).

Figure 16.37 L’élément du menu utilisateur.

Il va alors vérifier le résultat sur son site Web. Il ouvre une session avec son compte d’administrateur pour constater l’apparition de son nouveau Menu utilisateur conditionnel. De plus, ayant ouvert la session en mode Administrateur, il dispose d’une icône de crayon permettant de modifier tous les contenus depuis la partie publique (voir Figure 16.38).

Figure 16.38 Le nouveau Menu utilisateur sur le site Web.

Il en profi te pour cliquer sur l’icône d’édition pour modifier le contenu d’un article. Il peut même accéder aux paramètres et aux métadonnées. Il se souvient tout à coup que le bouton DÉCONNEXION n’est peut être accessible que sur la page ACCUEIL DU SITE. Dans l’administration, il choisit la commande EXTENSIONS > GESTION DES MODULES et accède aux paramètres du module LOGIN (Accès membres) pour choisir l’option Tous dans la section Affectation de menu à gauche.

Le plateau de téléchargement

Il faut ensuite définir une section du site proposant des documents à télécharger. M. Bertrand voudrait permettre aux visiteurs d’obtenir les certificats, mais seulement après qu’ils se soient identifiés. Il va utiliser à cet effet le composant standard Lien Web de Joomla.

Par la commande COMPOSANTS > LIENS WEB, page CATÉGORIES, il commence par créer trois catégories :

• Communiqués ;
• Certificats ;
• Analyses du sol.

Il prévoit pour chaque catégorie une petite description et pourra ajouter plus tard une image. Les catégories ne doivent être accessibles qu’aux utilisateurs enregistrés (voir Figure 16.39).

Figure 16.39 Création d’une catégorie de liens Web.

Les fichiers PDF à télécharger doivent être stockés dans un sous-dossier spécial du dossier des médias (SITE > GESTION DES MÉDIAS). Il crée ce sous-dossier en saisissant dans le champ à côté du chemin d’accès le nom pdf puis en cliquant sur CRÉER UN DOSSIER (voir Figure 16.40).

Figure 16.40 Création du sous-dossier pdf.

Il ne reste plus qu’à transférer tous les documents PDF. Pour les tests en local, il suffit de copier les fichiers dans le sous-dossier de XAMPP lite [CheminJoomla]/bertrand/images/pdf. Ils pourront être transférés sur serveur via FTP plus tard (voir Figure 16.41). (Quelques fichiers sont fournis sur le CD-ROM.)

Figure 16.41 Les fichiers PDF accessibles depuis Joomla!

Il reste à créer les moyens d’accéder au moyen d’une adresse URL à ces documents PDF via la commande COMPOSANTS > LIENS WEB, bouton NOUVEAU. Le lien à indiquer doit effectivement permettre d’accéder aux documents (voir Figure 16.42). Il faut également choisir la catégorie de rattachement. Nous décidons de faire ouvrir le document dans une nouvelle fenêtre sans navigation. Rappelons qu’en local, l’adresse URL s’écrit http://localhost/bertrand/images/pdf. Lors du transfert vers le site Web public, il faudra mettre à jour ces adresses ou bien saisir directement le nom de domaine approprié.

Figure 16.42 Création d’un lien Web.

Après quelques opérations répétitives, M. Bertrand dispose de plusieurs liens menant à des documents PDF (voir Figure 16.43).

Figure 16.43 La série de liens de téléchargement.

Il reste à donner accès à cette série de liens par le Menu utilisateur. M. Bertrand utilise la commande MENUS > MENU UTILISATEUR, bouton NOUVEAU. Dans la fenêtre de choix du type, il sélectionne Liens Web puis le sous-type LISTE DES CHAMPS DES CATÉGORIES DE LIENS WEB (voir Figure 16.44).

Figure 16.44 Choix du type et du sous-type pour un lien Web.

Dans la fenêtre de définition de l’élément de menu, il choisit le titre Téléchargements. Seul les utilisateurs enregistrés doivent y accéder. Dès qu’il clique sur Sauver, il peut dans la liste positionner le nouveau lien sous le lien des promotions. Sur le site Web, le lien apparaît effectivement. Il donne accès aux trois catégories. En cliquant sur une catégorie, cela fait apparaître une liste de fichiers PDF avec un lien pour les afficher ou les transférer (voir Figure 16.45).

M. Bertrand est très satisfait. Il ne s’agit pas d’un véritable système de gestion documentaire mais il suffit amplement à ses besoins, d’autant plus qu’il peut tout de même suivre le nombre de clics pour chaque document. Les descriptions et le mode d’affichage du tableau peuvent être paramétrés par MENUS > MENU UTILISATEUR > TÉLÉCHARGEMENTS, bouton PARAMÈTRES.

16.3.7 Coordonnées de l’utilisateur

M. Bertrand se souvient que les données d’exemples de Joomla! possédaient un lien dans le Menu utilisateur. Il permettait au visiteur identifi é de modifier ses coordonnées (adresse de messagerie, mot de passe, etc.). Il veut qu’un tel lien soit disponible dans son propre menu utilisateur. Il crée donc un nouvel élément de menu et choisit comme type Utilisateur, puis encore Utilisateur, puis User form layout (Mise en page formulaire utilisateur). Son menu dispose ensuite d’un lien appelé Mes coordonnées accessible dès qu’une session nominative est ouverte (voir Figure 16.46).

Figure 16.45 Le plateau de téléchargement sur le site Web.

Figure 16.46 Accès aux coordonnées d’un utilisateur enregistré.

16.3.8 Conclusion d’étape

M. Bertrand est étonné de la vitesse à laquelle tout cela a progressé. Il contacte Ruth pour lui faire part de l’avancement des travaux. Mais Ruth est un peu décontenancée parce que les templates qu’elle avait conçus été destinés à la version Joomla!1.0.x. Or, elle vient de constater que bien des choses ont changé dans la version 1.5. Elle pense cependant mettre à jour ses templates pour le lendemain.

Elle transmet par messagerie deux captures d’écran des travaux en cours (voir Figure 16.47 et Figure 16.48).

Lorsqu’elle a essayé d’installer l’un de ses templates dans Joomla! 1.5, Ruth a très vite remarqué que de nombreuses classes CSS avaient changé de nom.

Pour mieux étudier les noms de ces classes et les autres paramètres, Ruth décide d’installer et de faire afficher la barre d’outils appelée Web Developer pour Firefox (voir Figure 16.49). Cette extension de Firefox est fournie sur le CD-ROM en français.

Figure 16.47 Le projet de templates du site Web public.

Figure 16.48 Le projet de templates de la partie boutique.

Figure 16.49 Affichage des noms des classes CSS grâce à l’extension Web Developer
de Firefox.

Ruth et M. Bertrand décident que M. Bertrand implantera son site Web sur le serveur public avec un template standard. Les templates spécifiques seront mis en place plus tard.

16.3.9 M. Bertrand découvre le langage CSS

M. Bertrand n’est plus un débutant en langage HTML. Il aimerait bien savoir plus précisément comment fonctionne son template.

S’en suit une longue discussion avec Ruth...

Ruth lui explique que l’aspect visuel du template est défini par deux fichiers CSS qui indiquent au navigateur du visiteur comment celui-ci doit présenter les données. Ce sont ces fichiers qui déterminent par exemple la couleur rouge ou brune de l’arrière-plan, l’ajout d’un graphique, et bien d’autres choses.

Le langage CSS se fonde sur un concept de feuilles de styles en cascade (une arborescence) et les deux fichiers CSS se nomment template.css et joomlastuff.css.

Ruth a optimisé ces deux fichiers pour les navigateurs les plus répandus, c’est-à-dire Internet Explorer 6.0 et Firefox 1.5 sous Windows d’une part, et Firefox 1.06 et Safari 2.03 sous Mac OS X 10.

Mais M. Bertrand aimerait apprendre le CSS pour créer lui-même des templates ou modifier ceux qui lui sont fournis.

Ruth lui explique alors le principe des feuilles de style en cascade (Cascading Stylesheets CSS) : le terme cascade signifi e que les formats sont lus de haut en bas, et que certains formats sont des sous-formats de formats précédents. En cas de redéfinition d’un style, la nouvelle définition remplace l’ancienne. Voici à quel endroit les définitions CSS peuvent être implantées :

• dans un fichier CSS externe indépendant ;
• dans la partie d'en-tête d’un fichier HTML ;
• directement imbriqués dans une balise HTML.

Les instructions CSS rencontrées dans les balises HTML ont priorité sur celles de même nom trouvées dans un fichier CSS externe. Cette remarque a son importance car Joomla! prédéfinit certains formats CSS et les injecte directement dans les balises HTML, remplaçant vos propres définitions.

Vous devez en être averti.

Pour que la feuille de styles du template de M. Bertrand reste simple, Ruth décide de bien utiliser la structure hiérarchique offerte par CSS.

Elle choisit de faire contrôler l’aspect des textes par les balises HTML classiques : body, table, div, p et form. Tous les contenus de ces éléments doivent apparaître avec la police Verdana dans un certain corps et une couleur grise.

Lorsqu’il est nécessaire de diverger de ce style de base à un certain endroit du site Web, il suffit de lier les balises HTML à une classe de style. Si nous partons par exemple de la classe nommée .tableaugris possédant la propriété suivante :

  { background-color: #333; }

Elle devient utilisable dans une balise HTML de la façon suivante :

<table class=“tableaugris“>

Il est donc possible de personnaliser des éléments individuels grâce aux classes CSS.
Joomla! propose un grand nombre de classes prédéfinies, ce qui permet de concevoir assez facilement ses propres templates. En guise d’exemple, étudions le code servant à la colonne gauche de navigation (voir Figure 16.50).

Cette colonne héberge trois modules Joomla! :

• Main Menu/Menu général ;
• User Menu/Menu utilisateur ;
• User Login/Accès membres.

L’aspect visuel de cette zone de navigation est contrôlé par les classes suivantes (voir Listing 16.1).

Figure 16.50 La colonne gauche de navigation sur le site.

...
<div class=”moduletable_menu”>
<h3>Menu général</h3>
<ul class=“menu“>
<li id=“current“ class=“active item1“>
<a href=”http://localhost/bertrand/”>Accueil du site</a>
</li>
<li class=“parent item4“>
<a href=“index.php?option=com_content...>Nos vins</a>
</li>
<li class=”parent item8”>
<a href=”index.php?option=com_content...”>Notre terroir</a>
</li>
...
</ul>
</div>
<div class=“moduletable“>
<h3>Connexion</h3>
<form action=“index.php“ method=“post“ name=“login“ id=“form-login“>
<fieldset class=“input“>
<p id=“form-login-username“>
<label for=“modlgn_username“>Identifiant</label><br>
<input id=“modlgn_username“ name=“username“ class=“inputbox“
alt=“username“ size=“18“ type=“text“>
</p>
...
</fieldset>
 <ul>
 <li>
 <a href=”index.php?option=com_user...”>Mot de passe oublié ?</a>
 </li>
 ...
 </ul>
 <input name=“option“ value=“com_user“ type=“hidden“>
 ...
 </form>
 </div>
 <div class=“clear“></div>
 ...

Listing 16.1 : Le code HTML de la colonne de navigation

Le formatage CSS pas à pas

Schéma

L’étude du code HTML laisse deviner une certaine systématique.

Pour atteindre son objectif de présentation, Ruth a décidé de demander dans le fichier index.php de générer les données du module sous l’effet de l’instruction style=“xhtml“.

Sous l’effet de cette demande, tous les modules utilisés dans le projet voient leurs données générées à l’intérieur de couples de balises <div> sous forme d’éléments list. Les containers <div> reçoivent des titres désignés par la balise HTML <h3> suivie de listes. Les listes contiennent les liens. Cette approche offre beaucoup de souplesse car toutes les balises HTML peuvent être contrôlées soit directement, soit via les classes prédéfinies dans Joomla!.

Les modules présentent une image de fond estompée définie dans une balise HTML globale pour s’appliquer à tous les modules. Les classes conçues pour l’ensemble HTML sont réunies dans le fichier nommé template.css, de même pour la couleur de fond de la colonne de navigation (voir Listing 16.2).

.naviside {
  /*Image de fond */

  background: url(../images/naviseite_oben.jpg) top left; 
  /* Largeur */

  width: 210px;
  /* Placement des contenus sur le bord supérieur */ 
  vertical-align: top;
  /* Bordure */ 
  border: 0px; 
  /* Marge interne*/
  padding: 0px; 
  /* Marge externe*/

  margin: 0px;
  /* Couleur de fond*/ 
  background-color: #fff; 

  /*Placement aligné à gauche*/
  text-align: left; 
  /* Position globale dans le bloc HTML */
  float: left; 
}

Listing 16.2: Code CSS de .naviside

Ruth décrit ensuite les différentes balises <div> qui sont exploitées par les classes moduletable_menu et moduletable (Login Form). Elles déclarent les propriétés applicables à tous les menus.

Il s’agit de la largeur, des marges et de la couleur. Il suffit pour cela de connaître les deux classes

 .moduletable et .moduletable_menu.

Ces deux classes sont prédéfinies dans Joomla!. Ruth a distribué logiquement ses propres classes et celles prédéfinies par Joomla! dans les deux fichiers CSS joomla_stuff.css et template.css.

.naviside .moduletable, .moduletable_menu {
  width: 210px; /* Largeur */
  background: none; /* Fond */
  margin-top: 18px; /* Ecart du module en haut */
  text-align: left; /* Aligné à gauche */
  padding: 0px; /* Pas de marge interne entre module et contenu */
}

Listing 16.3: Code CSS

Titres des modules

Pour obtenir un titre conservant le même aspect dans tous les modules (voir Figure 16.51) il suffit de faire référence au style de titre depuis le module via la balise <h3>.
Dans le fichier CSS, il faut d’abord rappeler la classe qui est ici .navioben. Tous les modules sont englobés dans cette division <div> via la classe .navioben. Cette manière de faire assure que seules les données des titres dans la région .navioben subissent un formatage avec ces styles CSS. Il ne reste plus qu’à stipuler l’indispensable balise <h3>. Ruth a prévu une image de fond pour les titres afin d’enrichir l’aspect des menus (Listing 16.4).

Figure 16.51 Exemple de titre de module.

/* Définition des titres du module lié */
   .navioben h3 {
   font: 18px/18px Times New Roman, serif; /* Corps/Police*/
   font-weight: normal; /* Variante de police */
   color: #A49A66; /* Couleur */
   background: url(../images/blatt.gif) top left; /* Image de fond */
   background-repeat: no-repeat; /* Répétition du fond */
   padding-left: 25px; /* Marge interne du bord gauche */
   height: 25px; /* Hauteur div */
   width: 185px; /* Largeur */
 }

Listing 16.4: Style de titre de module

Éléments des menus

Après le titre, il faut s’intéresser à la mise en forme des liens dans les listes HTML (voir Figure 16.52).

Figure 16.52 Exemples d’éléments de menu (sous-menu).

Ruth ne veut pas voir de puce à gauche des liens, ni de retrait vers la droite. Elle fait référence à une liste en exploitant les classes prédéfinies de Joomla! appelées .menu et .moduletable (Listing 16.5).

  ul.menu, .naviside .moduletable ul {
   list-style: none; /* Liste sans puces */
   display: block; /* Element de bloc, */
   /* formatable comme boîte */
   width: 210px; /* Largeur */
   margin: 0px; /* Marge externe */
   border: 0px; /* Bordure */
   padding: 0px; /* Marge interne */
 }

Listing 16.5: Formatage d’une liste de module

Filets séparateurs

Pour séparer visuellement les différents éléments de menu, Ruth utilise des balises <li> dans la liste :

ul.menu li {
  border-bottom: 1px dotted #ccc; /* Bordure inférieure */
}

Il est possible de faire référence aux sous-rubriques des liens, par exemple pour forcer un retrait sur la bordure gauche (Listing 16.6).

/* Format des listes des sous-rubriques */
ul.menu ul {
  /* Marge externe simulant un retrait du texte */
  margin-left: 10px;
  background-color: #EEE; /* Autre couleur de fond */
  width: 200px; /* Largeur réduite */
}

Listing 16.6: Exemple de sous-rubrique

La bordure inférieure des sous-rubriques est personnalisée en harmonie avec la couleur de fond :

ul.menu ul li {
  border-bottom: 1px solid #fff; /* Bordure inférieure */?
}

Il serait même possible de personnaliser l’aspect de chaque élément de la liste puisque chaque balise <li> possède sa propre classe :

level1 item1, .level1 item2 parent, .level1 item3 parent, .level1 item4

Liens vers les contenus

Nous en arrivons enfin aux liens. Le formatage concerne la balise <a> située dans la liste <ul> et se base sur la classe .menu.

Voici comment tous les liens doivent se présenter :

ul.menu a {?
  text-decoration: none; /* Lien sans soulignement */
  color: #6B5E588; /* Couleur de texte */
  font-size: 11px; /* Corps de texte */
  padding-left: 10px; /* Marge gauche de bordure */
}

L’effet visuel appelé hover (survol) permet de faire varier la couleur de fond ou de texte d’un lien lorsque le pointeur est amené au-dessus sans cliquer. Ruth a décidé de gérer ce cas de la manière suivante :

ul.menu a:hover {
  color: #CAC303;
  text-decoration: none;
}

Finalement, la classe suivante est utilisée pour mettre en valeur l’élément de menu de la page actuellement affichée :

.menu li#current a {
  color: #B22819; /* Couleur de texte */?
}

... et ce sera tout !
Après toutes ces explications, M. Bertrand se réjouit de constater que le formatage CSS n’est pas aussi complexe qu’il l’avait craint. Il a encore la tête qui bourdonne, mais Ruth lui conseille quelques sites pour parfaire ses connaissances. Les styles CSS ont fait l’objet de nombreux tutoriaux sur le Web.

16.3.10 Prise en compte de nouveautés de la version 1.5

Si vous avez déjà conçu ou pris une certaine habitude d’utiliser des templates Joomla! 1.0.x, vous apprendrez avec joie que Joomla! 1.5 permet de continuer à les exploiter si vous les basculez dans le mode compatibilité Legacy (voyez aussi le Chapitre 12)!
Il y a quelques précautions à prendre lorsque l’on est concepteur de templates. Les anciennes instructions mosload() du code PHP ainsi que les anciennes classes CSS situées dans le fichier index.php du template ne fonctionnent parfois plus dans certains contextes car le formatage a évolué.

Évolutions au niveau du menu

Les possibilités de mise en forme des modules et des composants ont énormément augmenté par rapport à Joomla!1.0. Il était possible auparavant de les personnaliser en faisant référence à des extensions de classes CSS définies par le programmeur. Dorénavant, vos données HTML générées peuvent être contrôlées au niveau du format au moyen des instructions suivantes placées dans le fichier index.php du template.

Voici les options disponibles :

• table (par défaut). Les données du module sont présentées dans une colonne de tableau.
• horz. Le module est présenté horizontalement dans la cellule du tableau environnant.
• xhtml. Le module est présenté dans un élément div simple.
• rounded. La sortie utilise un format permettant d'afficher des coins arrondis. Le nom de l'élément
<div> passe de moduletable à module.
• none. Les données du modules s’affichent sans aucune mise en forme.
Cette évolution est fantastique ! Il devient possible de produire tout un site Joomla! sans utiliser aucune balise de tableau. Cela permet de garantir un contenu présenté de façon logique et qui peut atteindre ses objectifs d’accessibilité.

Par ailleurs, en adoptant le principe des balises <div>, on dispose d’une bien plus grande liberté qu’avec les tableaux HTML, qui n’avaient à l’origine pas été conçus pour une si lourde tâche.