Présentation du constructeur de pages NextGenEditor par son développeur Jean-Marc Bouillé.
NexGenEditor est une extension vous permettant de créer très simplement vos pages Joomla!, par drag & drop, directement depuis le Frontend de votre site web.

Jean-Marc, peux-tu te présenter ?


Bonjour, j’ai 49 ans, je vis dans la campagne Seine-et-Marnaise près de Provins. J’ai fait mes débuts il y a maintenant 15 ans avec PHPNuke puis Mambo et j’ai connu toutes les étapes de Joomla.


Je dirige une petite agence de création de sites web, Teatis, composée de quatre personnes.

Je ne suis pas de formation informatique, mais j’ai toujours été passionné. J’ai du coup une vision très pragmatique des choses et j’ai toujours eu le souci de me mettre à la place de mes clients utilisateurs qui sont souvent un peu perdus pour créer un site, y compris avec Joomla.


Pourquoi avoir créé NextGen Editor ?

Je crée des sites depuis 15 ans. Et j’ai constaté qu’il est toujours aussi difficile pour des utilisateurs non confirmés d’effectuer des opérations simples de mise en page. Par exemple, demandez à quelqu’un de mettre deux photos côte à côte et une légende sur le côté. Il sera vite perdu, à moins d’être féru d’astuces et de savoir créer un tableau caché et d’ajuster ses colonnes.

D’autre part, j’ai pu constater que les normes de présentation visuelle sont de plus en plus exigeantes. Il faut maintenant disposer de photos défilantes, de vidéos, de listes et onglets interactifs, de blocs alignés pour pouvoir prétendre être au goût du jour. Il devient pratiquement impossible aujourd’hui à un utilisateur de créer lui-même des pages au contenu un tant soit peu moderne. Le comble est que pour moi concepteur je dois désormais faire en permanence de la programmation en JavaScript et CSS. Je suis amené de plus en plus souvent à utiliser des composants extérieurs ou des petites librairies, à chaque fois différentes pour le moindre élément visuel. Cela devient à chaque fois une véritable épreuve pour découvrir l’organisation interne, la programmation de chacun de ces éléments.

J’ai donc cherché à proposer des composants visuels paramétrables facilement à l’écran, utilisables sans programmation JavaScript et CSS.

Comment s’est passé la réalisation du projet ?

La réalisation s’est plutôt bien passée, mais beaucoup plus longue qu’imaginée au départ. Nous avons été agréablement surpris au début de pouvoir aller si loin techniquement. C’est-à-dire de pouvoir proposer des modifications directes dans les pages : inline editing, petites barres d’outils, modification des tailles à la souris… La version 3, avec jQuery et Bootstrap nous facilitent les choses.

Par contre il y a eu beaucoup, beaucoup d’obstacles techniques à franchir. Globalement c’est un projet très pointu et très technologique. Il est en interaction étroite avec le cœur de Joomla. Il nous a fallu résoudre beaucoup d’obstacles et des limitations dans Joomla. Par exemple, nous avons maintenant tellement de paramètres qu’il a fallu créer des composants internes pour permettre aux formulaires Joomla! d’afficher ou non des zones, ce qui n’existe que de façon très partielle d’origine.

Au bout d’un an, nous étions satisfaits. Nous avions atteint notre objectif de proposer des widgets avec à l’écran les paramétrages les plus courants, environ 80% des paramètres généralement possibles. J’ai alors commencé à proposer l’extension à quelques-uns de mes clients. Là j’ai découvert une réalité toute autre. Ce qui me paraissait suffisant était loin de l’être.  Pas un seul utilisateur ne me demandait la même chose, avec des demandes qui leur paraissaient toutes bêtes et évidentes, pour lesquelles le composant était loin d’être suffisant. Pour pouvoir y répondre, je devais doubler le nombre de possibilités ! Par exemple, pouvoir afficher une légende dans les images défilantes, parfois à gauche, parfois à droite, parfois une légende différente par image, ou la même pour toutes. Il nous a fallu ainsi réorganiser complètement notre système de blocs, afin de généraliser les titres, contenus et légendes dans toutes les positions possibles et qui s’adaptent bien entendu en responsive.

Le projet actuellement

Version gratuite

{tweetme theme=cl_blue|mode=link}Après deux ans et 7000 heures de travail, NextGen Editor est disponible depuis 2 mois.{/tweetme} Une première version gratuite permet déjà de faire énormément de choses. Elle contient tous les widgets liés au texte (titres, boutons, etc.), aux images (slider, carrousel) et aux vidéos, et les fonctions principales d’inline editing.

En utilisant cette version, il est déjà possible de créer n’importe quelle page avec les widgets disponibles.

Versions commerciales

En complément de la version gratuite, il y a trois versions payantes, la première à 29 €. Les versions payantes contiennent à la fois des widgets supplémentaires et des fonctions d’édition plus évoluées.

Les widgets rajoutés dans ces versions sont des widgets qui sont plus ancrés dans le cœur de Joomla. On verra par exemple dans leur configuration les catégories, les modules ou les articles du site en lui-même. Il sera ainsi facile de rajouter en quelques clics la liste des articles d’une catégorie sous un format choisi (liste, thumbnails, dropdowns, etc).

La plupart des fonctionnalités rajoutées permettent de faire gagner du temps à l’utilisateur final.

L’une des fonctionnalités majeures des versions payantes est la possibilité de créer ses propres modèles de widgets. Ainsi, il suffira de choisir un modèle prédéfini pour un widget pour en créer un autre similaire ailleurs.

Nous avons aussi revu la gestion des menus Joomla! pour que l’on puisse les créer et les configurer directement en front-office.
Et pour les utilisateurs les plus avancés, nous avons rajouté le multilinguisme, la gestion des ACL ou encore l’apparence des widgets en fonction de la taille de l’écran.

Il y a tellement de choses dans ces versions payantes que nous vous recommandons d’aller sur notre site Web. Tout y est détaillé plus précisément : nextgeneditor.com.

Téléchargement et installation

Le téléchargement de la version gratuite se fait en allant sur la page Downloads de notre site Web.

Une fois l’archive téléchargée, l’installation se fait comme pour n’importe quelle extension Joomla. Il faut se connecter dans l’administration de Joomla, puis d’aller dans le Menu Extensions > Manage > Install et de sélectionner notre archive.

Vous pouvez alors utiliser NextGenEditor et créer vos pages en front office.

Le déverrouillage de la page

Le principe de fonctionnement de NextGen Editor est de permettre la modification directe de toutes les pages de votre site. Pour cela un bouton de déverrouillage est présent en permanence sur le côté de votre site.

NextGenEditor - Le déverrouillage de la page

Une fois actionné, ce bouton vous permet de disposer de plusieurs possibilités d’édition directe :

• Modifier l’article : vous pouvez modifier l’article en cours en cliquant à l’intérieur. Un éditeur apparaît et vous permet d’effectuer toutes les modifications souhaitées. Une fois fini, un simple clic en dehors et l’article est enregistré. Pas de rechargement de page. Gain de temps assuré!
• Editer les modules : c’est l’un des points les plus intéressants et prometteurs de NextGen Editor : la possibilité de créer et de modifier directement les modules partout dans la page. Les positions possibles des modules apparaissent en couleur et il est alors possible d’y dropper l’un de nos widgets.
• Ajouter des widgets : en les droppant depuis le menu de NextGenEditor directement dans la page : soit au milieu de l’article en cours, soit dans les positions de modules. C’était à la base le projet initial de NextGen Editor. Et puis nous sommes allés un peu plus loin !

La configuration d’un widget

Droppé dans la page

Une fois le widget ajouté à l’endroit voulu, une fenêtre de configuration apparaît au milieu de l’écran. Trois types de réglages sont proposés :

• Le contenu : par exemple pour des onglets les textes des onglets et leur contenu.
• Les options de fonctionnement : par exemple pour les onglets, ouverture par clic ou survol, style et forme des bordures, des fonds, du titre général…
• L’affichage : la largeur générale et le comportement en responsive sur les différents appareils.

Pour chaque widget, les réglages sont très nombreux. Il y a par exemple 130 zones de paramètres pour un écran moyen comme des onglets. Ils sont regroupés et organisés de la façon la plus claire possible.

Modale de création

Dans l’éditeur Joomla!

Nous avons aussi ajouté la possibilité de modifier les widgets dans les éditeurs de Joomla! (TinyMCE, JCE, JCK). Les widgets apparaissent sous forme d’icône dans les éditeurs et un double-clic dessus permet d’ouvrir la fenêtre de paramétrage de ce widget. Les widgets sont donc compatibles à 100% Joomla, et peuvent être créés ou modifiés à tout moment soit directement dans la page (par le bouton de déverrouillage), soit lors de la modification classique d’un article dans la partie administration ou la partie « front » avec l’éditeur Joomla! classique.

Qu’est-ce qui différencie NextGen Editor des solutions existantes ?

S’il y avait une chose à retenir, ce serait la création et l’édition directement en front-office ! On voit en direct les modifications réalisées, et c’est certainement la chose la plus novatrice dans le monde Joomla.

En effet, s’il existe de multiples composants par exemple pour créer des sliders, ceux-ci doivent être créés en back-office dans un menu spécifique. Ensuite leur intégration dans une page ou un module, se fait généralement en copiant un shortcode. Bref, ce sont des choses qui fonctionnent, mais le nombre de clics pour y arriver à tout pour faire peur et en terme d’ergonomie on est habitué maintenant à mieux. Avec NextGenEditor la création est simple, elle se fait là où on en a besoin.

Ce que j’ai en tête depuis le début du projet, c’est d’être réellement universel et d’aller loin. C’est pour cela par exemple que nous sommes à 100% Joomla. Nous n’obligeons pas à utiliser un fond de page spécial pour notre composant. Celui-ci fonctionne partout dans Joomla, dans tous les contenus de textes éditables : articles, modules, même dans les textes d’autres composants. Nous commençons à étendre l’édition à d’autres types de contenus, comme les composants externes comme K2 , Acymailing ou AllEvents par exemple !

Techniquement parlant, nous avons fait l’effort de créer quelque chose de robuste et évolutif. Nos widgets, par exemple, sont tous basés sur une API complète en PHP. Il est ainsi possible aux développeurs de créer des widgets directement dans tout fichier PHP en quelques lignes de code. Cela n’est pas encore documenté, mais déjà possible. Cela ouvre beaucoup de perspectives !

Le inline editing, pouvez-vous nous en dire un peu plus ?

L’inline editing d’un article permet de modifier directement depuis la page le contenu de l’article sans passer par le back office. Lorsque vous êtes dans une zone de texte, les options de style de votre éditeur apparaissent.

L’avantage de l’inline-editing est qu’il suffit de cliquer directement là où on a besoin. Vous voulez changer le titre de l’article, vous cliquez dessus et le modifiez directement, c’est tout. Vous voulez changer une image ou un glyphe, vous cliquez dessus, une fenêtre vous propose d’en choisir une autre. Vous cliquez dans un texte plus riche, un éditeur complet apparaît en survol.

Les modifications sont enregistrées immédiatement dès lors que vous sortez de la zone d’édition.

L’inline editing donne le sentiment de travailler avec un éditeur de texte comme Word. Niveau ergonomie, les utilisateurs ne sont plus perdus puisqu’ils iront de moins en moins dans l’interface d’administration de Joomla! pour créer leur contenu et auront l’impression de travailler avec l’un des logiciels les plus utilisés. Si tel est bien le cas, je crois que NextGenEditor aura atteint son but.

Apparence d'édition

Et pour la suite ?

Nous avons plein d’idées !... Le 1er mai dernier au JoomlaDay 2016, nous avons fait une présentation de NextGen Editor devant une soixantaine de personnes. Plus la présentation avançait, plus je voyais les yeux s’écarquiller et les coups de coude fuser. Les retours ont été plus qu’enthousiastes ! Nous avons été chaudement félicités pour la quantité de travail déjà réalisée, et pour ce projet « qui nous fait rêver » !

Vous pouvez voir cette présentation sur le lien suivant : http://77direct.com/hwdmedia/joomla-day-2016

Je suis persuadé qu’il y a une attente énorme dans Joomla! pour tout ce qui peut faciliter l’utilisation de façon générale, et surtout en « Front-end », directement dans les pages. Nous rêvons tous d’imaginer un jour la facilité de Wix ou 1&1 au sein de Joomla. C’est bien ce que nous cherchons à faire et sommes très motivés pour aller loin.

Allez, je vous fais rêver un peu ? Dans la version pro que nous prévoyons pour le mois de juin, il est ainsi possible par exemple de créer directement les listes et menus par simple clic sur un bouton « + ». Par exemple ici un menu, dans lequel je clique « Nouvel article ». On me demande simplement le titre, et l’article et son menu sont alors directement créés dans Joomla, et je peux continuer à travailler sans changer d’écran…

Création d'élément de menu avec la prochaine version commerciale de NextGen Editor

Pour la suite, nous pensons passer les prochains mois à conforter ce qui a été fait et à assurer un bon support. Nous verrons alors quel est le retour de nos utilisateurs et nous pourrons ajuster la suite au plus près de ce qu’ils attendent.

À propos de l'auteur

Jean-Marc Bouillé

Je connais bien Joomla pour avoir commencé il y a presque 15 ans (!...) avec Mambo, puis avoir connu toutes les étapes d'évolution de Joomla!