1. Introduction

La valeur ajoutée de JCMS réside dans son framework car même les super héros ne peuvent pas savoir tout faire. L’intégration de Bootstrap dans JCMS va aussi dans ce sens. Qui sait écrire un simple <input type=”text” /> en HTML ?

<input type="<%= HttpUtil.encodeForHTMLAttribute(type) %>"
 class="form-control"
 value="<%= encodeForHTMLAttribute(widgetValue) %>"
 name="<%= encodeForHTMLAttribute(widgetName) %>"
 id="<%= encodeForHTMLAttribute(widgetId) %>"
 placeholder="<%= encodeForHTMLAttribute(glp(placeholder)) %>"
 lang="<%= cptLang %>"
 xml:lang="<%= cptLang %>"
 dir="<%= channel.getLanguageDirection(cptLang) %>"
 <%= required %>/>

Tout ça pour différentes contraintes :

• Sécurité, il faut nettoyer les attribut pour éviter le CSRF
• Multilinguisme, il faut des attributs de langue ET la direction de la langue
• Accessibilité, il faut un Id, indiquer les champs required, disabled, etc …
• Ergonomie, il faut un placeholder, un label, une description, etc …
• Responsive, il faut tenir compte du contexte d’affichage, formulaire horizontaux ou verticaux ?
• Performance, il faut que ça marche avec 500 champs dans la page (donc du JS optimisé, de l'Ajax)

Et ce n'est que l'Input ! Nous ne parlerons pas encore :

• des N inputs multivalués et/ou multilingues,
• des AddOn / Chooser avant ou après le champ
• du Label, de la Description, des Tooltips, etc ...

Depuis 12 ans le Web a évolué, les contraintes aussi, on ne peut plus réinventer la roue lors de chaque projet, même si la tentation est forte. Pour réussir, il faut donc se baser sur un produit (un framework) et une méthodologie. Dans ce billet, nous allons donc tenter de vous donner une vision sur la méthodologie d’intégration web design dans JCMS.

2. Méthodologie web design dans JCMS

2.1 La phase qui marche … mal

Démarche classique du montage HTML

Contexte et problème

L’évolution continue du web a fait naître une multitude de framework et a fait également basculer les bonnes pratiques d’intégration. Ci-dessus une méthode classique qui découpe un projet en phases. Dans cette méthode, le problème réside dans la phase montage HTML qui est séparée de celle d’intégration JCMS. Séparer les phases de montage statique et d'intégration a ses avantages et ses inconvénients.

Ses avantages :

• réaliser une démonstration rapide sur le navigateur
• être indépendant de la phase d’intégration
• obtenir une validation rapide du client et ne pas s'engager dans les problèmes d’intégration

Ses inconvénients :

• La maquette Photoshop vend du rêve au client et à travers le montage statique HTML, il s’aperçoit que son rêve n’était pas exactement le même. D’ailleurs, la maquette statique HTML ne tient pas compte de plusieurs aspects du web : la sécurité, la performance, l’ergonomie, le multi-linguisme…
• Par expérience, le code HTML statique subit toujours des remaniements lors de la phase d’intégration. Par exemple, la maquette est en anglais alors que le site est international. Une fois en allemand, le design est cassé car les libellés sont plus long que prévu. L’équipe d’intégration doit donc se débrouiller pour respecter les engagements. Cette action est donc une perte de temps qui entraîne des risques de retard du projet.

Et si l’on cherchait à améliorer cette phase … ou pas ?

Les défenseurs de la phase montage HTML statique défendront qu’ils ont bien étudié JCMS et que le code répondra aux contraintes d’intégration. Ils oublient que le web a évolué et plusieurs métiers ont émergé : Créatif / Designer, UX / Ergonome, Expert Accessibilité, Expert Webperfs, Expert SEO, Expert Multilinguisme, Expert Mobilité, ...
La nature du problème a donc changé et il est temps de revoir la méthode de résolution car sur le terrain, l’ancienne méthode n’éprouve que des frustrations. Au lieu de l’améliorer à tout prix, pourquoi ne pas tout simplement la … supprimer ? Nous allons développer cette démarche dans la suite.

2.2 Une nouvelle phase

Montage HTML directement dans JCMS

Dans ce schéma, nous allons réduire ou plutôt fusionner la phase de montage HTML avec celle d’intégration. Concrètement, nous sommes persuadés qu’il faut intégrer directement du HTML sur JCMS. Cette démarche permet de :

• paralléliser le montage HTML et l’intégration JCMS
• réduire les risques de surprises du comportement rendu par JCMS et donc accélérer l’intégration
• réduire le cycle d’échange entre l’équipe web designer et l’équipe d’intégrateur puisque les deux équipes travaillent ensemble sur la même phase. Elle permet également de fluidifier les échanges si le moindre problème survient.

Pour préserver les habitudes de montage HTML, l’équipe R&D de Jalios a conçu JCMS pour que les web designers puissent y monter directement du HTML à travers des "Portal JSP Collection". Et pour rendre l’expérience agréable et productive, nous fournissons également un environnement de développement "DevPack" prêt à utiliser.

Intégration HTML dans JCMS avec le DevPack

2.3 Et le responsive web design ?

Avant d’aborder la méthodogie sur le responsive web design (RWD), nous vous proposons de se mettre en accord sur ce nouveau terme. 

Aujourd’hui, l’objectif consiste à donner une expérience mobile agréable car le nombre d’utilisation des smartphones a explosé ces dernières années. Plusieurs techniques ont été avancées :

• construire des applications natives (iOS, Google Play, …)
• construire des sites web dédiés via des sites de type http://m.sitemobile.com
• construire un seul site qui répond à tout. Cette technique qualifiée responsive web design (RWD)

Donc le terme RWD est utilisé pour désigner une technique d’implémentation. Ces derniers temps, vu l’effort de marketing et publicité, les clients ont fini par exprimer le besoin d’avoir un site mobile via ce terme. Il faut donc rester attentif sur l’expression du besoin et le choix d’implémentation.
Concernant la méthodologie pour un projet RWD, celle préconisée précédemment restera valide car il s’agit tout simplement d’intégrer du HTML orienté mobile dans JCMS. Un des points sensibles consiste à impliquer le client dans les wireframing RWD afin de le "garder sur terre".

Techniquement, il faut savoir que JCMS intègre nativement Bootstrap depuis la version 7.1. Cela permet donc d’éviter de réinventer la roue pour traiter certains aspects du RWD : masquer des zones d’affichages de manière conditionelle avec les classes .hidden, etc...

A noter qu'à partir de JCMS 9, Boostrap 3 sera intégré et facilitera encore plus le développement mobile car le framework est pensé dans la démarche “mobile first”.

3. Conclusion

A travers ce billet, nous vous avons partagé notre vision sur la méthodologie d’intégration web design dans JCMS, et espérons que vous en tirerez le maximum d'avantages.
Si vous souhaitez approfondir les techniques d’intégration web design, nous vous invitons à participer à notre formation dédiée qui y consacre deux jours. En espérant vous croiser bientôt !