HTML et CSS pour les CMS

Publier un site Web pour présenter son activité, écrire un blog, … est aujourd’hui très aisé grâce aux CMS (WordPress, Joomla, …) ou aux outils de publication en ligne (Weebly, 1and1, Facebook, …).

Ces solutions proposent de nombreuses mises en forme prédéfinies, des templates, des pluggins qui permettent de personnaliser très finement son site. Mais parfois, il faut modifier du code HTML ou des styles CSS pour obtenir exactement la présentation souhaitée ou pour améliorer le référencement. Et là, on se trouve confronté à des aspects techniques de compréhension de la syntaxe et de l’utilisation du HTML ou du CSS.

Une formation HTML et CSS classique n’est pas très bien adaptée pour maitriser ces aspects techniques. D’une part, certains sujets n’ont que peu d’intérêt dans le contexte d’un CMS, par exemple les formulaires ou les iframe, et d’autre part, l’accès au HTML et aux styles s’effectue au travers d’éditeurs dédiés.

Pour ces raisons, j’ai élaboré une formation HMTL/CSS spécifique pour les CMS, mettant l’accent sur la personnalisation de CMS et sur l’amélioration du référencement naturel. La première session aura lieu très bientôt à Grenoble.

Ecrire un plugin jQuery pour centrer des éléments

Lorsqu’on utilise jQuery, on peut écrire des fonctions javascript classiques qui font simplement appel à jQuery pour effectuer le traitement souhaité.

L’ennui avec ces fonctions est que leur utilisation est plus délicate que l’utilisation de jQuery.

Par exemple, prenons le cas d’une fonction qui permet de centrer un élément. Cette fonction peut s’écrire ainsi :

function centreElement(element) {
$(element).css({
'top': (($(window).height() - $(element).height()) / 2) + $(window).scrollTop(),
'left': (($(window).width() - $(element).width()) / 2) + $(window).scrollLeft()
});
}

Cette fonction peut être appelée sur n’importe quel élément, de cette façon centreElement('#image1'). Mais que se passe t-il si on veut centrer horizontalement plusieurs éléments images ?

Il suffit de modifier un peu cette fonction pour ne centrer qu’horizontalement. Par contre, il faut exécuter une boucle, par exemple avec la fonction each de jQuery, pour appeler autant de fois que nécessaire cette fonction. Une solution plus élégante peut être d’écrire son propre plugin jQuery, c’est à dire, tout simplement, une fonction personnelle qui se comporte comme une fonction intégrée de jQuery.

Voilà la façon dont on pourrait écrire un tel plugin :

(function($) {
$.fn.centreElement = function() {
this.each(function() {
var $e = $(this);
$e.css({
'left': (($(window).width() - $e.width()) / 2) + $(window).scrollLeft()
});
});
return this;
};
})(jQuery);

Un plugin jQuery nom est tout simplement une fonction définie avec $.fn.nom. Pour éviter tout télescopage avec d’autres bibliothèques installées, on utilise une fonction anonyme qui reçoit un paramètre $, et on appelle cette fonction avec jQuery :

(function($) {

// ici, $ représente jQuery sans aucun risque de télescopage avec une autre bibliothèque

})(jQuery);

Il suffit maintenant de définir une fonction anonyme pour $.fn.centreElement.
Cette fonction doit pouvoir être chainée avec d’autres appels de fonction jQuery et pour cela, elle doit renvoyer l’objet this fourni par jQuery.
Elle doit également exécuter son traitement sur chaque noeud référencé par jQuery, ce que l’on peut réaliser avec la fonction each().
Voilà donc la structure que doit avoir tout plugin jQuery :

$.fn.centreElement = function() {
this.each(function() { // boucle générique sur chacun de éléments avec la fonction each()
// code spécifique au plugin écrit
});
return this; // valeur de retour pour pouvoir effectuer le chainage
};

Et il ne reste plus, pour effectuer le centrage, qu’à reprendre ce que nous avions écrit dans la première fonction, en enlevant le top :

var $e = $(this);
$e.css({
'left': (($(window).width() - $e.width()) / 2) + $(window).scrollLeft()
});

Notre plugin permet maintenant d’écrire des instructions comme :

$('img').centreElement().show();

Cet exemple est parfois employé comme exercice de cours jQuery