Le site est essentiellement consitué de longforms (formes longues) pour les entrées principales, permettant de présenter les informations institutionnelles comme des pages longues, rythmées par de grandes images qui se fondent dans le texte, et avec des maquettes multiples (1 colonne, 1 colonne large, 2 colonnes, 3 ou 4…). Rythmer par la présence d’images de différents formats (prévisualisation de vidéos, visages dans des cercles, petits logos vectoriels animés…). Par exemple :
Nous avons créé une petite collection de « raccourcis » (des modèles SPIP) pour gérer certaines informations, dans ces longues pages, de manière semi-automatique : l’affichage de l’agenda, des liens vers des articles et des rubriques, des petits raccourcis « auteur » avec leur portrait, le dernier article de telle rubrique avec un visuel ou un PDF, un « témoignage » d’un ancien…
Il y a par ailleurs plusieurs pages ave des développements spécifiques, comme par exemple l’« annuaire des auditeurs » qui, outre un moteur de recherche, affiche les régions françaises avec, directement tiré de la base de données, le nombre d’anciens pour chaque région :
Et évidemment, des « articles » classiques au sens de SPIP (un article sur une page…), mais avec une maquette de texte un peu « moderne » (une seule colonne, « gros » texte, grandes images qui « sortent » de la colonne de texte, responsive…) :
La principale originalité du site est de gérer des publications publiques et à accès réservé, alors qu’auparavant c’était réalisé sur deux sites séparés (il existait le site public officiel, et un site dédié aux annonces protégées par mot de passe). De fait, il y a pas mal de subtilités pour gérer ça. Techniquement c’est amusant : ici on affiche par exemple les liens quand on n’est pas identifié, mais les liens ouvrent le formulaire d’identification. Au niveau du workflow, ça a demandé un peu de réflexion pour que ce soit facile à gérer et qu’on évite les erreurs « humaines » dans la gestion des documents publics/privés.
Une partie centrale, c’est la publication des programmes des « cycles annuels » :
Il y a là toute une gestion de ce qui est public et ce qui est privé (les visiteurs identifiés ont accès au détail de chaque session, avec éventuellement l’accès aux vidéos de chaque conférence). C’est l’aspect le plus complexe dans la réalisation de ce site.
Plus simple à gérer, mais avec des petites spécificités : la « médiathèque » présente les documents et les vidéos en accès libre
Travail un peu original sur les « pages des auteurs », où il faut gérer les accès publics et privés :
Non visible par le grand public, on a développé toute une gestion des promotions et des « auditeurs » :
- https://ihedate.org/toutes-les-promotions
- Chaque personne (ainsi que les administrateurs évidemment) peut modifier ses informations personnelles et décider de partager chaque information avec les autres auditeurs ou non (formulaires spécifiques donc pour gérer adresses et téléphones perso et professionnels).
Par ailleurs on a conçu un « espace collaboratif », sous forme de forums structurés (par cycles annuels et par thèmes) pour permettre les échanges d’information (tout à est privé). Les forums eux, sont des forums SPIP. L’originalité est de déterminer le forum principal de chaque personne (en fonction de son année de participation à un cycle), et de permettre la participation ou non à chaque thème (on peut voir tous les « thèmes », mais on ne peut participer qu’en « s’abonnant » à ce thème, auquel cas on verra dans son propre espace personnel les derniers messages qui s’y rattachent.
Un aspect technique intéressant, c’est qu’on a récupéré le contenu des deux sites précédents (public et privé), ainsi que leurs bases d’auteurs, de « visiteurs identifiés », de documents, de mots-clés, etc., et qu’il a fallu fusionner ces différentes sources. Ça a été assez coton à faire, avec différentes « moulinettes » pour tenter de recoller des sources hétérogènes. Mais du coup, on a tout récupéré, et ça fait énormément d’informations qu’il n’y a pas eu besoin de ressaisir.
Pour le détail : les vidéos sont intégrées dans les articles, depuis des années, directement en iframe en HTML, et évidemment ce n’est pas nativement responsive. Du coup j’ai développé des petits outils PHP pour transformer ces codes dans les articles en codes responsive. Et aussi pour « extraire » la vignette de la vidéo pourtant intégrée directement en HTML dans l’article, pour fabriquer les vignettes de navigation de ces articles (voir la médiathèque).