Il y a bien longtemps, non pas dans une galaxie lointain, Jérôme Ma-Tsi-Léong, homme-orchestre chez Canopé – la Réunion, m’a fourni un correctif de mon « pimpage » et ainsi apporté des solutions en termes d’affichage, d’accessibilité et de mobilité.
Voici donc venu le temps, non pas des rires et des chants, mais de Pimp My Esidoc v.2

Mon mur d’exploration n’étant plus, je vais utiliser celui de Stéphane Amélineau pour illustrer mon propos. J’espère qu’il ne m’en voudra pas.

1. Préparation

• Conception et mise en place des illustrations
  Des illustrations plus petites sont plus légères. Elles prennent moins de temps à s’afficher et utilisent moins de bande passante.
  Sur Esidoc, elles s’affichent au maximum en 675px. Il n’est donc pas utile de dépasser cette mesure. Ainsi, pour un mur d’exploration, une illustration en 675 x 675px est amplement suffisante.
  Vos illustrations conçues, il vous faut les importer une par une dans Esidoc (cf. fiche Canopé « ajout d’une image« ).

• Constitution des sélections thématiques ou des rubriques de destination
  Vos illustrations vont diriger vos usagers vers un contenu. Pour ce dernier, il convient : soit de réaliser des paniers de sélections sur Esidoc (option choisie par Stéphane Amélineau qui est moins chronophage) ; soit de créer des rubriques orphelines, c’est-à-dire non reliées à un espace ou une section Esidoc (v.1 de Pimp My Esidoc) ouvrant sur des contenus plus variés.

• Création de l’espace d’hébergement du « mur »
  Pour cela, se reporter à la fiche Canopé « Création d’un espace« .

N.B. : le temps de sa construction, si vous ne souhaitez pas que votre mur soit visible, cochez « administrateurs » dans le champ « Visible pour ». Une fois terminé, vous pourrez rendre cet espace « public » (visible par tous) ou « en accès restreint » pour le limiter aux utilisateurs authentifiés depuis votre ENT.

• Étape facultative
  Prenez une tasse de thé, fermez les yeux et inspirez profondément avant de passer aux choses sérieuses.
  

2. Construction

À partir de maintenant, il va falloir mettre les mains dans le code.

L’objectif de ce codage est d’assurer un affichage optimal du mur quel que soit le support de lecture (ordinateur, tablette ou smartphone). Avec ma méthode de « l’insertion d’un tableau », ceci n’est pas le cas.
Comme vous pouvez le voir dans l’exemple ci-dessous, l’affichage sur un smartphone génère de la perte d’information : au zoom 100%, le mur est tronqué ; et à 50%, le contenu est certes visible intégralement, mais il est aussi moins lisible. On dit alors que le site n’est pas réactif ou responsif.

Grâce au code de Jérôme Ma-Tsi-Léong, les illustrations du mur réagissent au support afin de garantir leur visibilité et leur lisibilité.
Comme montré ci-dessous, le code permet au mur de s’adapter : sur mon ordinateur avec écran 2880×1800, les icônes s’alignent pour prendre tout l’espace ; alors que sur mon smartphone, la disposition est différente, mais le confort visuel est bien assuré.

2.1. Gribouillage conceptuel

Armé d’une feuille de brouillon, d’un crayon de papier et d’une gomme, griffonnez l’apparence de votre mur. Celui-ci pouvant s’afficher sur des écrans à haute résolution, il est préférable de partir sur une base de quatre colonnes pour qu’il remplisse convenablement l’écran. Trop petit en colonnes, votre mur sera aligné vers la gauche et générera une marge plus grande à droite de l’écran (ce qui déséquilibrera visuellement votre page). Mieux vaut prévoir trop de colonnes que pas assez dans la mesure où la responsivité permet au mur de s’ajuster.

2.2. Mise en place des lignes et des cellules

Votre brouillon fait, rendez-vous sur l’administrateur Esidoc dans le mode éditeur de l’espace qui va héberger votre mur. Par défaut, l’éditeur est en mode « texte ». Basculez-le en « html » en cliquant sur « source » dans la barre d’outils.

N.B. : il n’est pas possible de sauvegarder votre travail en mode « html ». Vous devez retourner en « texte » pour pouvoir le faire.

En code, chaque ligne de votre mur se présente de la façon suivante :

<div class="row">


</div>

Suivant l’exemple du mur de huit lignes de Stéphane, il faudra coller 8x ce code.

Maintenant, au sein de chaque ligne, il va vous falloir créer les cellules. Plus haut, je vous ai recommandé de penser votre tableau en quatre colonnes. Il faudra donc insérer dans chaque ligne, quatre cellules.

<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>

<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>

Le code des cellules est à coller entre les balises <div class= »row »> et </div> de la façon suivante :

<div class="row">
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
</div>

2.2. Insertion des illustrations

• Récupérez l’adresse url de vos illustrations. Dans un nouvel onglet, ouvrez le gestionnaire d’images d’Esidoc (vos contenus > images > image). Passez la souris sur l’illustration voulue, puis cliquez sur le symbole « oeil » présent dans la barre d’outil pour obtenir un visuel de l’image. Il ne vous reste plus qu’à cliquer droit sur l’image pour copier son adresse.
• Collez l’adresse url dans le code de chaque cellule à la place de url_de_mon_image

<div class="row">
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
</div>

• Répétez l’action pour toutes les images composant votre mur.

N.B. : l’élément class= »img-responsive » permet à vos illustrations d’être réactive au changement de support (ordinateur, tablette ou smartphone).
Il est possible de doter toutes les images insérées dans vos textes de cette caractéristique à partir des paramètres avancés d’images (propriété image > avancés > classe de style > taper img-responsive). Cf. fiche Canopé « insertion dans le texte« 

2.3. Intégration des hyperliens

Les manipulations pour les hyperliens sont relativement similaires à celles pour les illustrations.

• Récupérez l’adresse url de destination de vos sélections ou de vos rubriques. Pour les rubriques, il faut demander à « voir » votre rubrique depuis le « menus et rubriques » ; pour les sélections, il faut les consulter afin d’obtenir l’url.
• Collez l’adresse url de destination dans le code de chaque cellule à la place de url_de_direction

<div class="row">
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
<div class="col-sm-3"><a href="url_de_direction" title="titre_de_ma_page"><img alt="nom_de_mon_image" class="img-responsive" src="url_de_mon_image" /></a></div>
</div>

• Répétez l’opération autant de fois que nécessaire.

Étape facultative

Comme vous pouvez le voir dans le code, l’élément title= »titre_de_ma_page » est par défaut tel quel. Vous pouvez le modifier ou non afin de le rendre cohérent avec les titres des url de destination.

N.B. : il se peut que pour la dernière ligne de votre, il y ait des cellules « vides », c’est-à-dire sans illustration et sans url. Il vous suffit de supprimer les lignes de code de ces cellules pour qu’elles n’apparaissent plus.

Il ne vous reste plus qu’à remettre l’éditeur en mode « texte » et à cliquer sur « fermer » pour que votre travail soit pris en compte.

Bravo !
Toutes ces étapes faites,
vous pouvez dire que votre Esidoc a été pimpé dans les règles de l’art
et que vous êtes un.e méta(prof)doc

Un immense merci à Jérôme Ma-Tsi-Léong d’avoir pris le temps de me faire un correctif très bien expliqué … il y a deux ans.
Merci à Stéphane Amélineau d’avoir été la victime non volontaire de « Pimp My Esidoc v.2 ». Pour me faire pardonner, je t’enverrai le code pour ton mur 😉