Nouvelle référence pour le Publishr : le pôle de compétitivité Cancer-Bio-Santé

Pour sa refonte, le site du pôle de compétitivité « Cancer-Bio-Santé » de Toulouse abandonne SPIP au profit du Publishr.

reference-cbs

Le nouveau site tire parti de deux caractéristiques très particulières du CMS : les contenus hérités et les éditeurs personnalisés.

Contenus hérités

Sur le site cancerbiosante.fr, l'image de fond de la bannière est différente pour chacune des rubriques principales. Pour autant, on ne va pas s'amuser à définir l'image à utiliser pour chacune des pages des rubriques, ce serait fastidieux. Au contraire, les pages des rubriques vont simplement utiliser l'image définie par leur rubrique. C'est ce que l'on considère comme du contenu hérité.

Lorsqu'il est défini comme pouvant être hérité, le contenu d'une page parente est utilisé par une page enfant, si celle-ce ne le définit pas. C'est ce qui se passe pour les pages des rubriques : chaque rubrique définit une image de fond qui est ensuite réutilisée par ses pages enfants. C'est très simple à mettre en œuvre puisqu'il suffit d'ajouter l'attribut « inherit » à la balise « wdp:page:content », comme ceci :

@html html@

L'éditeur pour la zone de contenu apparait comme d'habitude dans la section « Contenu » du formulaire d'édition de la page, avec un texte de description indiquant que le contenu peut être hérité.

reference-cbs-editor

Si le contenu est effectivement hérité, un lien avec le nom de la page définissant le contenu apparait, comme le montre l'illustration suivante :

reference-cbs-inherited

Ce même principe est à l'œuvre pour l'encart « Médiathèque » de la bannière, qui peut être défini indépendamment pour chacune des pages du site.

Maintenant que nous en savons un peu plus sur les contenus, intéressons-nous aux types de contenus qui peuvent apparaitre sur les pages. En effet, toutes les pages ne sont pas simplement composées de blocs de texte que l'on peut facilement éditer en utilisant un éditeur RTE, parfois le contenu de certaines pages est complexe et nécessite des connaissances en HTML, ce que la majorité des utilisateurs ne possèdent pas. Alors, plutôt que présenter du code HTML complexe à éditer dans un éditeur RTE, en espérant qu'aucune balise invisible ne saute, ou d'exposer ce code brut dans un champ texte, on préférera concevoir un éditeur personnalisé.

Éditeurs personnalisés pour contenus complexes

Parce que les éditeurs utilisés pour éditer les contenus des pages sont des instances de la classe WdEditorElement, il est très simple pour un développeur de concevoir un éditeur personnalisé pour répondre à des besoins particuliers. Considérons le schéma suivant, disponible sur la page « Prochaine labellisation » :

reference-cbs-custom-editor-render

Onze zones de ce schéma sont contribuables. Il y a 4 dates (qui sont optionnelles, et n'apparaissent pas sur le schéma au moment de la capture) accompagnées de 4 étiquettes et 3 titres pour les flèches. On pourrait présenter au contributeur onze éditeurs de type « chaine de caractères », mais ce serait un désastre ergonomique. À la place, on préfèrera concevoir un éditeur personnalisé qui se chargera de recueillir les données des différents champs, comme celui illustré ci-dessous :

reference-cbs-custom-editor

Un gabarit pour la mise en forme des données

Bien que l'éditeur puisse transformer ses données en éléments HTML lors de la phase de rendu, on préfèrera utiliser un gabarit pour plus de souplesse dans leur mise en forme. Voici celui utilisé pour notre schéma :

@html

#{@date_1}

#{@date_label_1}

<div id="schema-date-label-2" class="label right">
    <h3>#{@date_2}</h3>
    <p>#{@date_label_2}</p>
</div>

<div id="schema-date-label-3" class="label bottom">
    <h3>#{@date_3}</h3>
    <p>#{@date_label_3}</p>
</div>
<div id="schema-date-label-4" class="label bottom right">
    <h3>#{@date_2}</h3>
    <p>#{@date_label_4}</p>
</div>

<ol>
    <li>#{@arrow_1}</li>
    <li>#{@arrow_2}</li>
    <li>#{@arrow_3}</li>
</ol>

html@

Afin de permettre au webdesigner de cibler simplement les contenus rendus par les éditeurs, chacun d'eux est automatiquement enveloppé dans un élément DIV ayant pour identifiant « content-<content_id> » et pour classe « editor-<editor_id> ». On notera que l'enveloppe n'est ajoutée que dans les gabarits HTML, et que l'on peut l'éviter en définissant l'attribut « no-wrap ».

À découvrir

Le site possède également une médiathèque, un espace réservé où les adhérents peuvent contribuer au site ou simplement modifier leur fiche, ainsi qu'un espace presse très fourni.

Je vous laisse découvrir le site réalisé par l'agence Hima360. Bonne visite.

Laisser un commentaire

Pas de commentaire