3. La mise en page

Thank you for your contribution: 

Flexible Boxes – next-generation CSS designed to create layoutsEn design pour le web, lorsque l’on parle d’agencement ou de rendu, cela signifie généralement la mise en page. C’est en fait une part du travail graphique traitant de l’organisation et du traitement du style des éléments (le contenu) d’une page. Un système de gestion de contenu tel que Joomla! peut représenter des milliers de pages (voire plus) à traiter et il est très important de penser à une organisation dans la disposition des éléments de contenu qui soit lisible et ce, quelque soit le type d’écran.

L’agencement d’une page est facile à esquisser sur papier ou par l’utilisation d’un logiciel de mise en page.

La plus grosse difficulté réside dans la transformation de la mise en page planifiée en langage HTML/CSS et son intégration dans Joomla!.

Joomla! utilisait des mises en page basées sur des tableaux HTML. Ils sont simples à créer, ils fonctionnent correctement dans 80% des cas, mais d’un point de vue sémantique, il reste incorrecte d’utiliser des tableaux HTML pour la mise en forme d’une page. Les tableaux HTML ne devraient être utilisés que dans le cas de rendu de données nécessitant naturellement une grille, comme dans un tableur par exemple. Le tableau périodique est un bon exemple d'une utilisation correcte de tableaux HTML.

Il y a de cela quelques années maintenant, de nombreuses discussions ont été animées sur le thème : "Tableaux vs. Mises en forme CSS" (Tables: The Next Evolution in CSS Layout).

Par nature, la mise en page est une tâche compliquée, tout simplement parce que c’est du design !

L’utilisation de feuilles de styles en cascade (CSS pour Cascading Style Sheets) est plus difficile que celle de tableaux HTML simplement parce qu’elles offrent un très vaste panel de possibilités pour mettre en forme votre contenu. Pour avoir une idée du travail avec des CSS, je vous invite à consulter avec attention ce site : Apprendre les mises en page CSS.

Les Frameworks (cadriciels)

(NDT : le terme Framework est très largement utilisé dans l’univers du web, y compris en langue française. De nombreuses tentatives de traductions ont été réalisées pour aboutir à des termes tels que cadriciel, cadre, structure, patron, canevas et tant d’autres… Pour notre part, nous conserverons volontairement le terme de Framework, universellement usité et reconnu.)

Si une tâche est compliquée à réaliser, il y aura toujours quelqu’un pour créer un framework afin de la simplifier. Les sociétés qui fournissent des templates pour les différents systèmes de gestion de contenu s’appuient toujours sur des frameworks afin de simplifier et de gagner du temps dans leur travail de développement. Ainsi, dans l’univers Joomla!, différents frameworks sont apparus (Gantry, T3, Warp, Phoca) mais sont la plupart du temps étroitement liés aux produits spécifiques que proposent ces sociétés. Il existe cependant des frameworks indépendants mais qui restent tout de même liés à Joomla!. (Construct, Morph).

Indépendamment des systèmes de gestions de contenu, des frameworks encore plus généralistes sont apparus comme Foundation, Bootstrap, et Skeleton, pour ne citer qu’eux.

Bootstrap dans Joomla! 3

Depuis la version 3 de Joomla!, il a été décidé d’intégrer en natif, dans le noyau même de Joomla!, le framework Bootstrap (version 2.3.2 de Bootstrap). Bootstrap propose du code HTML et des styles CSS de base pour la mise en forme de la typographie, des formulaires, des boutons, des graphiques, de la navigation et d’autres composants, ainsi que des extensions JavaScript en option. Bootstrap a été initialement créé et utilisé par Twitter. Suite à la décision d’intégrer Bootstrap au noyau Joomla!, la plupart des frameworks précédemment cités ont eux aussi intégrés bootstrap à leur propre framework en y ajoutant des fonctionnalités supplémentaires et plus personnelles.

Dans certains cas, il peut s’avérer utile d’ajouter un framework supplémentaire à Joomla!3. Nous allons faire nos premiers pas en utilisant le framework Bootstrap.

La mise en page avec Bootstrap… rien de plus simple !

Une mise en page basique propose généralement une présentation du contenu en deux ou trois colonnes, avec un système de navigation en haut et un pied de page sur le bas.
Cette organisation est relativement traditionnelle et nous allons la créer dès à présent.

Le système de grille

Bootstrap propose un système de grille en 12 colonnes (documentation détaillée).

Une mise en page en deux colonnes ressemblera à ceci :

<div class="row">
  <div class="span12">navigation</div>
</div>
<div class="row">
  <div class="span4">first column</div>
  <div class="span8">second column</div>
</div>
<div class="row">
  <div class="span12">footer</div>
</div>

Et l’affichage en trois colonnes, à ceci :

<div class="row">
  <div class="span12">navigation</div>
</div>
<div class="row">
  <div class="span3">first column</div>
  <div class="span6">second column</div>
  <div class="span3">third column</div>
</div>
<div class="row">
  <div class="span12">footer</div>
</div>

Chaque colonne est commandée par une classe "span". "span4" signifie que quatre des douze colonnes disponibles seront occupées par l’élément. "span6", six colonnes occupées et ainsi de suite… Chaque zone de colonnes doit être définie dans un "row" (une ligne).

Un affichage en deux colonnes dans l’index.php

Je saisis l’occasion pour vous présenter le terme JFactory/getDocument. Une page complète Joomla! est en fait un objet ou une instance. Cet objet se compose de méthodes et d’attributs. Un exemple de méthode est la commande jdoc:include que nous avons précédemment utilisée. Un attribut est la valeur d'une variable, par exemple la valeur de la langue est "en-GB". Si la page est en espagnol, ce sera alors "es-ES". Pour être sûr d'avoir les bonnes valeurs de toutes les variables que vous utilisez dans le template, il est nécessaire d'intégrer ces trois lignes dans votre fichier index.php :

$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;

Lorsque nous combinons notre index.php du précédent chapitre avec la mise en page Bootstrap présentée plus haut, nous obtenons ce code (Listing 1) :

<?php defined( '_JEXEC' ) or die;
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="<?php echo $this->language; ?>"
      lang="<?php echo $this->language; ?>"
      dir="<?php echo $this->direction; ?>"><head>
   <jdoc:include type="head" />
   <!-- Stylesheets -->
   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/media/jui/css/bootstrap.css" type="text/css" />
</head>
<body>

<div class="row">
  <!-- navigation -->
  <div class="span12">
    <jdoc:include type="modules" name="position-1" style="none" />
  </div>
</div>

<div class="row">
  <!-- first column -->
  <div class="span4">
    <jdoc:include type="modules" name="position-2" style="none" />
    <jdoc:include type="modules" name="position-7" style="none" />
  </div>
  <!-- second column -->
  <div class="span8">
  <jdoc:include type="component" />
  </div>
</div>

<!-- second column -->
<div class="row">
  <div class="span12">
  <jdoc:include type="modules" name="footer" style="none" />    
  </div>
</div>     

</body>
</html>

Listing 1 : index.php avec un affichage en deux colonnes

Afin d’intégrer les fonctionnalités offertes par Bootstrap, il suffit d’appeler le fichier bootstrap.css dans la balise HTML head.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/media/jui/css/bootstrap.css" type="text/css" />

La variable PHP $this->baseurl contient le chemin de votre installation Joomla!.

Après avoir sauvegardé nos modifications, notre site web semble déjà très différent. Nous avons bien créé une mise en page à l'aide du framework Bootstrap (Figure 1).

FR-Chapter-3-figure-1FR-Chapter-3-figure-1

Figure 1 : un affichage en deux colonnes en utilisant Bootstrap

Conclusion

Comme vous avez pu le constater, il est très facile de créer un affichage avec Bootstrap. Amusez-vous avec les différentes colonnes et lignes afin de vous familiariser avec le système. Placez des modules dans différentes positions afin de découvrir les implications.


Dans le prochain chapitre qui sera publié le 4 septembre, nous allons créer un menu de navigation déroulant et quelques autres fonctionnalités…

Section: 
Freetags: 

Commentaires

Excellent article ..
Merci pour ce partage qui serait utile pour mon site Joomla :)