Oui, nous dispensons deux jours de formation où nous abordons comment réussir l'intégration web design dans JCMS. C'est également l'occasion pour échanger sur les retours d'expériences de réalisation. Pour plus d'information, contacter nous par email formation@jalios.com.

Vous êtes webdesigner et vous travaillez sous Mac ? Oui, c'est possible d'y installer JCMS. Pour cela, il faudrait installer JDK, Tomcat, Eclipse puis suivre ce guide (section 3.1.5.3) sur la partie projet web dynamique

A partir de JCMS 7.1.1, le framework Bootstrap est intégré.
Depuis 10 ans, la conception web s'est normalisée ; Bootstrap met ainsi en place un ensemble de bonnes pratiques pour réaliser un site web.

Désormais, le web designer :

• Ne fait plus de hack CSS
• Ne s'inquiète plus de la typographie
• Peut utiliser un Framework de grille
• Peut utiliser des composants normalisés

Ce framework s'appuie sur la technologie LESS en standard dans JCMS. Pour plus d'informations sur la version Bootstrap utilisée, consulter la documentation dans l'espace d'administration de JCMS (Documentations > Documentations techniques > API CSS (Bootstrap))

LESS est un préprocesseur CSS qui permet d'enrichir le langage de variables, de mixins (fonctions), de règles imbriquées et d'opérateurs.

Les fichiers .less sont compilés en .css au démarrage de JCMS. Ce comportement est débrayable via la propriété channel.less-compile.startup: false.

Les fichiers .less doivent être déclarés dans les propriétés (cf. plugin.prop) pour être compilés: channel.less.plugins/{Name}/css/plugin.css: plugins/{Name}/css/plugin.less

En mode développement (propriété channel.dev-mode.enabled: true ), il est possible d'utiliser d'une variable less-compile dans l'URL

• Avec la valeur true recompile tout
• Avec la valeur false recompile les fichiers qui ont changés

Les WebFont existent depuis CSS2 pour utiliser une police de caractère spécifique dans une page web.
La police est téléchargée comme les autres ressources JavaScript, CSS, ...

Cependant, les navigateurs ne se sont pas mis d'accord : il existe quatre formats de WebFont, et les rendus ne sont pas identiques entre navigateur et entre OS.

Les WebFont se sont démocratisées il y a quelques années avec l'arrivée de TypeKit et Google qui proposent des Font à la manière d'un CDN.

• Dans le cas des intranets, il est préconisé de télécharger la police sur le serveur
• Une WebFont s'utilise pour un gros titre de page, pas pour être fidèle à une maquette Photoshop

Elles sont utilisées par exemple dans le Module Marque pages social (JMag). Consultez également un retour d'expérience ParisWeb 2011 de Jérémie Patonnier

Depuis JCMS 7.1.x, les CSS et JavaScript sont déclarés via des propriétés dans jcms.prop

# CSS Properties
channel.css.all.010:    js/lib/jscal2/css/jscal2.css
channel.css.all.011:    js/lib/jscal2/css/border-radius.css
channel.css.all.012:    js/lib/jscal2/css/steel/steel.css
channel.css.all.013:    js/lib/jscal2/css/reduce-spacing.css

channel.css.all.025:    css/jalios/core/core.css
channel.css.all.027:    css/jalios/core/responsive.css
channel.css.all.030:    css/fff-sprite.css
channel.css.all.040:    css/jalios/core/lang.css
channel.css.all.050:    css/jalios/core/channel.css
channel.css.all.060.bo: css/jalios/core/admin.css

# Custom
channel.css.all.075:    css/custom.css 
channel.css.all.080.fo: css/custom_fo.css
channel.css.all.085.bo: css/custom_bo.css

Il est possible:

• D'ajouter des feuilles de styles
• De supprimer des feuilles de styles (risque élevé d'effets de bords)
• De surcharger des feuilles de styles

Les options .fo et .bo indiquent s'il faut ajouter la feuille que dans le front ou le back office.

Le ficher core.css contient le code standard Bootstrap et les composants JCMS.

JCMS fournit un framework pour simplifier la conception de site web dans JCMS. Plus le design est pensé pour JCMS plus l'intégration sera simple. Nous vous recommandons de consulter notre billet de blog sur comment réussir l'intégration web design dans JCMS

Voici quelques consignes :

• Faire un design en page (taille fixe) si possible
  • Penser au responsive-design (s'étire en largeur)
  • C'est un site web qui s'étire aussi en hauteur
• Faire un design composé de 12 colonnes
  • Bootstrap se base sur 12 colonnes
• La typographie est gérée par Bootstrap
  • Interlignage 18px et Font 13px
  • Utiliser des multiples de ces valeurs
• C'est un CMS !
  • Le texte des contenus évolue
  • La place occupée change
  • L'emplacement des contenus change
  • Les visuels ne sont pas forcément taillés à la hauteur/largeur de la colonne
• C'est un Portail !
  • Les portlets sont des DIV (boites carrés)
  • Les contenus peuvent s'afficher
    • En pleine page
    • Dans une portlet
    • Dans un moteur de recherche
  • Demander à l'expert JCMS si le composant existe déjà en standard
• Tenir compte de la plateforme cible !
  • IE est très mauvais pour présenter des coin arrondis
  • Les dégradés doivent être utilisé avec parcimonie
    • IE gère mal les dégradés
    • Le rendu des dégradé est coûteux soit en calcul, soit en bande passante.
• Limiter l'usage des polices non standard
  • Doit être téléchargé par le navigateur
  • Réservé pour des titres / de la charte de marque
• Penser accessibilité !
  • Certaines couleurs, sur des actions ne sont pas lisible par les personnes ayant un handicap visuel.
• Penser SEO multilinguisme
  • Les libellés doivent être traduits (on ne découpe pas l'image)
• Penser aux règles d'ergonomie !
  • Un lien HTML doit changer de couleur/souligné pour indiquer que c'est un lien
  • Etre homogène entre les IHM

La migration doit se faire en plusieurs étapes:

• Migration du coeur de JCMS
• Migration des modules
• Injection de la charte graphique
  • Si possible, transformer les .css en .less pour que ça soit moins verbeux, plus lisible

Avec les normalisations de Boostrap, il est recommandé:

• De ne plus faire de reset.css
• De ne plus faire de hack
• De ne plus modifier la typographie du site (qui est calibré pour un confort de lecture optimal)
• D'exploiter les variables et mixins Bootstrap
• D'utiliser les grilles, composants et bonnes pratiques Bootstrap

Depuis JCMS 7.1, jQuery est intégré par défaut. Il est préférable donc de baser sur cette version pour développer vos composants Javascripts. Attention, consultez dans un premier temps les composants JCMS et Bootstrap avant d'entamer cette tâche.

channel.js.002.fo:      js/lib/jquery/jquery-x.y.z.js

En standard JCMS propose un portail composé de lignes et de colonnes. Ce portail est très puissant mais aussi très versatile car il impose la manipulation de nombreux objets.

C'est la raison pour laquelle il est recommandé d'utiliser le type Portail JSP Collection dans lequel il est possible:

• d'injecter tout le design fournit par un créatif et et maîtriser le code produit
• de définir des zones de drag and drop
• d'inclure les portlets définis dans le portail

Pour la mutualisation de composant (header/footer), nous recommandons d'inclure un fragment .jspf dans le gabarit. L'usage d'une PortletJspCollection ou PortletColonne complexifie la compréhension.

JCMS n'exploite pas encore toutes les fonctionnalités de Bootstrap.

Les fonctionnalités qui ne sont pas utilisées ont été désactivées.

• Il est possible de réactiver certaines fonctions en éditant le fichier bootstrap.less
  • ou en faisant un import dans un fichier less de plugin
• Il est possible de déclarer un plugin jQuery (comme tout autre javascript). C'est l'approche pour utiliser le carousel de Bootstrap :

jcmsContext.addJavaScript("js/lib/bootstrap/bootstrap-carousel.js");

Dans l'état de l'art du web design, il est conseillé d'externaliser tous les styles dans un fichier .css et positioner ensuite les class CSS au niveau HTML.
Pour inclure cette feuille de style externe, il est recommandé d'utiliser la directive jcmsContext.addCSSHeader("path/to/style.css") car elle permet :

• de positionner le CSS au niveau de meta head qui est une bonne pratique de performance du web
• d'indiquer à JCMS de compresser, donc la performance lors du transfert de la page via le réseau

Pour les fichiers javascripts, il faut utiliser la directive jcmsContext.addJavaScript("path/to/file.js"); car elle permet :

• de charger les JS à la fin de la page qui est une bonne pratique de performance du web
• d'indiquer à JCMS de compresser

Nous vous recommandons cette fiche qui aborde le sujet dans sa totalité.

Avec Firebug ou Chrome, si vous voyez csspacker.jsp?..., cela veut dire que la propriété de compression CSS est activée. En production, il est indispensable de le faire pour assurer une performance optimale. Cependant, il est généralement plus utile en développement de voir chaque CSS pour identifier les problèmes de styles. Pour cela, il faut aller dans Espace administration > Exploitation > Propriétés > Avancé > Performance > Fusionner les fichiers

Vous pouvez aussi utiliser le paramètre no-css-pack dans l'URL pour désactiver le packer juste pour cette requête. (ex: http://mon.url.tld/jcms/j_300/Accueil?no-css-pack )

Dans votre module, positionner la propriété suivante dans le fichier plugin.prop

channel.topbar.enabled: false

Vous pouvez également masquer dynamiquement l'affichage en utilisant l'attribut de requête:

jcms.topbar.display

Il y a trois types de topbar dans JCMS :

• espace administration
• espace de travail
• site

La topbar de l'espace d'administration et de l'espace de travail peut être personnalisée via les targets. Consulter le développement de modules pour manipuler les targets.

La topbar du site peut être personnalisée :

• via les targets
• via la ressource jcms.resource.topbar.site en utilisant une autre topbar. Pour ce faire, dans votre module au niveau plugin.prop, déclarer comme suit :

jcms.resource.topbar.site : plugins/MyPlugin/jsp/mytopbar.jsp

Vous pouvez vous inspirer de custom/jcms/doSiteTopbar.jsp pour développer plugins/MyPlugin/jsp/mytopbar.jsp

Dans JCMS, aller dans l'espace administration et consulter la partie Documentation technique avec notamment l'API CSS (Bootstrap). La distribution de JCMS nommée "Dev Pack" permet d'installer et de démarrer un serveur JCMS très rapidement depuis un environnement Windows.

Vous déclarez la target EMPTY_HEADER_START dans votre plugin.xml :

<file path="jsp/test.jsp" include="EMPTY_HEADER_START" />

Dans la target test.jsp, vous définissez les attributs à mettre dans le tag HTML en utilisant la classe Browser pour affiner vos attributs. Ci-dessous un exemple pour ajouter dans l'attribut class les valeurs ie ie7 no-js s'il s'agit de IE7 :

<%@ page contentType="text/html; charset=UTF-8" %><%-- 
 --%><%@ include file="/jcore/doInitPage.jsp" %><%-- 
 --%><% 
 Browser browser = jcmsContext.getBrowser();
 
 String htmlClassAttr = "no-js ";
 if (browser.isIE7()) {
 htmlClassAttr += "ie ie7";
 } else if (browser.isIE8()){
 htmlClassAttr += "ie ie8";
 } else {
 htmlClassAttr += "test";
 }
 
 Map<String,String> htmlTagMap = Util.getHashMap("class",htmlClassAttr);
 
 request.setAttribute("channel.html.attributes",htmlTagMap);
%>

Il s'agit du medium css (en l’occurrence avec "all" : tous les media).

Quand vous incluez un fichier CSS dans une page HTML, vous avez la possibilité de préciser un ou plusieurs media, pour indiquer que les styles doivent être pris en compte uniquement :

• screen : lors d'un affichage graphique
• print : lors d'une impression
• braille : pour les lecteurs braille
• speech : pour les lecteurs d'écran (vocal)
• ... voir liste des media