Français English DeutschOui, 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 :
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
true recompile toutfalse 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.
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:
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 :
La migration doit se faire en plusieurs étapes:
.css en .less pour que ça soit moins verbeux, plus lisible
Avec les normalisations de Boostrap, il est recommandé:
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:
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.
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 :
Pour les fichiers javascripts, il faut utiliser la directive jcmsContext.addJavaScript("path/to/file.js"); car elle permet :
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 :
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 :
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 :
