ARNO*

L’un des aspects importants du nouveau site est la possibilité de créer des longforms, c’est-à-dire des pages longues regroupant beaucoup d’information (dans SPIP : les articles d’une même rubrique) dans une même longue page scrollable. Par exemple :
►http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/actualites/actuellement/exposition/le-centenaire-de-l-hotel-camondo

Une des nouveautés (dans mes scripts) par rapport à mes habitudes précédentes, c’est que j’ai systématisé la possibilité, pour le webmestre, de choisir des maquettes très différentes pour le texte d’un article, via le #plugin Compositions :
▻http://contrib.spip.net/Compositions-2-et-3

Sur mes sites habituels, la maquette standard est :
– une colonne principe (large, gros texte) à gauche, et une petite colonne d’annexes (droite, petit texte) à droite :
▻http://www.lesartsdecoratifs.fr/francais/bibliotheque/expositions/les-livres-pour-enfants-pendant-la
▻http://www.lesartsdecoratifs.fr/francais/ateliers-du-carrousel/les-ateliers/pendant-les-vacances-scolaires

Désormais, pour chaque article, le webmestre peut choisir :
– une seule colonne de texte (c’est la nouvelle présentation préférée)
▻http://www.lesartsdecoratifs.fr/francais/ateliers-du-carrousel/presentation/reperes-chronologiques
– deux colonnes égales (pour textes courts uniquement, genre deux paragraphes l’un à côté de l’autre)
– trois colonnes égales
▻http://www.lesartsdecoratifs.fr/francais/qui-sommes-nous/pratique/3-sites-a-paris
– une seule colonne alignée à gauche
– une seule colonne alignée à droite

À la base, il s’agit de répondre au besoin de rythmer les longforms, en adoptant des présentations différentes dans les différentes parties du texte. Malheureusement, au lancement du site, on n’a pas de « grande » exposition avec des tonnes de contenu, exploitant cette possibilité. Mais ça va venir… :-)

J’ai développé pour le site de subtiles modifications #responsive des raccourcis d’images de SPIP (les très classiques <img>, <doc>, <emb>), utilisés dans les quelques milliers de pages de l’ancienne version du site.

Voir par exemple les images insérées ici :
►http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/actualites/actuellement/exposition/le-centenaire-de-l-hotel-camondo
et jouer avec la largeur de la fenêtre sur une grande amplitude.

– Les images sont insérées dans une <figure>.

– D’abord, le positionnement des légendes des images change radicalement en fonction de la largeur de l’écran : quand j’ai assez de place (écran large), les légendes « sortent » de la colonne de texte. Le boulot, ici, est que ça fonctionne correctement selon les différentes maquettes (par exemple, la légende d’une image insérée à gauche dans une colonne de gauche pourra sortir de la colonne, mais pas dans une colonne de droite – puisque la légende irait s’afficher sur le texte de la colonne de gauche). Bref, il y a une petite foule de cas en fonction de la composition choisir et de la largeur de l’écran.

– Si cette histoire de légende est une utilisation « jolie » du responsive, mais n’apporte pas grand chose réellement en lisibilité, il y a un problème pénible avec le responsive et les images alignées à droite ou à gauche : lorsque la largeur de la colonne de texte rétrécit (smartphone), le texte qui habille l’image se comporte de manière totalement farfelue (parce que les « lignes » de texte à côté de l’image deviennent vraiment trop courtes). J’ai donc ajouté un petit javascript qui calcule la largeur occupée par l’image par rapport à sa colonne de texte et, si le pourcentrage est trop élevé, décide de modifier l’affichage de l’image (on passe en afficher centré et on rejette le texte à la suite, comme un <img|center>).

– Il y aussi des modèles d’insertion <video> qui fonctionnent en responsive :
▻http://www.lesartsdecoratifs.fr/francais/ecole-camondo/debouches/conversations

– Introduction d’une option <|large> dans les raccourcis, pour indiquer qu’on veut présenter les images de manière plus large que la colonne de texte. (Ça fonctionne aussi avec mes raccourcis d’intégration de vidéos.) Par exemple :
▻http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/l-hotel-et-les-collections

Un détail intéressant : les menus de navigation en haut d’écran changent de présentation en fonction de la largeur de l’écran d’une manière un peu originale. Quand on passe de large à étroit :

– d’abord, la taille du texte diminue (de manière un peu trop importante à mon goût, mais il était vital pour l’institution que toutes les entrées principales tiennent sur un écran d’iPad) ;
– puis, si on n’arrive pas à faire tenir toutes les entrées des menus horizontaux dans la ligne, ceux qui « dépassent » sont affichées dans un entrée « ••• ».

L’originalité, c’est que ce n’est pas du CSS responsive, mais un Javascript qui va calculer la situation.

Un aspect plus technique : certaines informations sont automatiquement rapatriées du système de billetterie (qui n’est pas de notre ressort). Par exemple :
▻http://www.lesartsdecoratifs.fr/francais/activites/visites-guidees-parcours

C’est donc un longform constitué de plusieurs articles. Chaque article contient des listes d’activités à venir, avec un titre, une description et une image, avec chacune une liste de dates et d’horaires dans le futur, avec un lien « Réserver ».

Le webmestre dispose d’un raccourci avec plusieurs variables (le type d’événement, la tranche d’âge, le lien…), et la présentation est fabriquée automatiquement en SPIP, dans une #boucle_DATA qui tourne sur des appels de fichiers JSON fournis par le serveur de la billetterie.

Très intéressant comme toujours, merci pour ces détails.

Pour l’accueil, le carrousel… ben. Carrousel quoi. Mais même quand on est obligé, ya quand même des « améliorations » possibles. Là déjà le constat :
1) le carrousel se lance automatiquement = bad, bon, ok.
2) mais il n’y a aucun contrôle pour l’arrêter.
3) même quand la souris est dessus, ça ne s’arrête pas !
4) et en plus le temps de rotation est trop court pour me permettre de lire tout le texte quand le titre est long (et cela sans handicap particulier, alors j’imagine pour PLEIN d’autres…)

À minima, sans froisser les décideurs, je verrai au moins :
1) augmenter le temps de rotation
2) activer l’option pour stopper l’animation quand le focus ou le hover est dessus (dans à peu près toutes les libs ya ça)
3) ajouter un troisième bouton « pause » (en plus de précédent/suivant), à partir du moment où on laisse le lancement automatique

@rastapopoulos : d’accord avec les limites du Carousel, mais il y a un moment, avec ce genre de chose en page d’accueil, où même la durée des transitions automatiques n’est plus une décision négociable. Cela dit, à la place d’un bouton « Pause », on a un gros bouton « Tous les événements », destiné à court-circuiter le carousel.

Wahou, même la durée de rotation est imposée ! C’est des oufs ! :D

« Tous les événement » ça affiche un truc en surimpression et ça continue de bouger derrière ! À la limite si c’était avec un fond fixe… (mais faut le savoir quand même, c’est pas explicite que ça va « mettre en pause l’animation », ce que ça ne fait pas d’ailleurs pour l’instant)

Un des problèmes graves d’accessibilité de ce genre de trucs, c’est entre autre pour les gens qui ont des problèmes de lecture, de concentration, d’attention, et qui ne doivent vraiment pas être perturbés par des éléments mobiles pendant qu’ils visionnent une page. Que ce soit des pubs ou du contenu, peu importe : pas d’animation non demandée explicitement par l’utilisateur.

Mais bon, je sais bien ce que c’est quand c’est imposé… J’en fais souvent un combat de pédagogie d’ergonomie en début de projet, mais parfois c’est peine perdue…

Sinon, le détail qui me fait toujours sourire :

– sur l’ancien site, taille du texte du chapeau : 12px
– sur le nouveau site : 26px

– sur l’ancien, texte courant : 12px
– sur le nouveau site : 19px

Une page qui existait auparavant sous forme Flash : le plan du musée des Arts décoratifs
▻http://www.lesartsdecoratifs.fr/francais/musees/musee-des-arts-decoratifs/parcours/plan-766/plan
(cliquer sur un étage pour voir le truc se déplier)

C’est donc désormais du HTML, et tout est géré dans l’interface privée de SPIP (nativement, d’ailleurs, c’est une rubrique avec des sous-rubriques et des articles virtuels, et les images sont des logos d’articles et de rubriques).

La visite virtuelle est désormais interfacée avec le site SPIP, ce qui permet de gérer les descriptions des salles, les retours vers les salles et, surtout, les fiches des objets présentés, directement dans l’interface de gestion de SPIP :
▻http://www.lesartsdecoratifs.fr/index.php?page=visite

#bravo et #merci !

Pouce levé