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 :
Et ce n'est que l'Input ! Nous ne parlerons pas encore :
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.
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 :
Ses inconvénients :
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.
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 :
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
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 :
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”.
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 !