Paris-Beyrouth

http://www.paris-beyrouth.org

  • Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
    https://www.fondationcustodia.fr

    Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…

    Parmi les points à voir en particulier…

    – Un menu hamburger tout mignon.
    https://i.imgur.com/bNcdyNm.jpg

    – Des #longforms pour la présentation des expositions :
    https://www.fondationcustodia.fr/Georges-Michel

    – Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :
    https://i.imgur.com/o4jIdNN.jpg

    – Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
    https://www.fondationcustodia.fr/Les-portraits-en-miniature-12
    https://i.imgur.com/FLoLf2r.jpg

    Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
    http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images

    On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :
    https://i.imgur.com/zGMFgeK.jpg
    C’est pas toujours évident à utiliser à bon escient, mais là ça donne un aspect « imprimé » particulièrement chic je trouve.

    – Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :
    https://i.imgur.com/g7h66dl.jpg

    Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.

    – Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
    https://www.fondationcustodia.fr/les-portraits-en-miniature

    – Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.

    – Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :
    https://i.imgur.com/FRMLXPy.jpg

    – Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).

    – Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.

    À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))

    #shameless_autopromo

    https://seenthis.net/messages/660728 via ARNO*


  • Nouveau #plugin #SPIP : Fonds d’articles
    https://zone.spip.org/trac/spip-zone/browser/_plugins_/fonds

    C’est un plugin particulièrement important dans les sites que je réalise désormais, parce qu’il me permet d’installer les images qui viendront se fondre sous le texte de l’article, ce qui constitue un aspect central de mes #longforms avec SPIP.

    http://i.imgur.com/5CTZv37.jpg

    Par exemple :
    – dans les dossiers histoires d’Orient XXI :
    http://orientxxi.info/l-orient-dans-la-guerre-1914-1918/german-asymmetric-warfare-in-world-war-i,1423
    – les articles d’Orient Palms :
    http://fr.orientpalms.com/L-oeil-de-Tony-Hage
    – la page d’accueil de Paris-Beyrouth :
    http://www.paris-beyrouth.org
    – les « formes longues » du site de l’OPPIC :
    http://www.oppic.fr/rubrique18.html
    – bien entendu, ma spectaculaire démonstration à base d’images de la NASA :
    http://www.orientpalms.com/demo/spip.php?rubrique2

    Le principe est de créer des images se terminant par un dégradé vers un aplat de couleur (de la même couleur que le fond de la page, que l’on indiquera aussi dans l’interface du plugin), puis d’installer cette image en « fond » d’article, une partie se trouvant avant le pavé de texte, et la seconde (la partie peu contrastée) en dessous du pavé de texte. Le plugin permet d’installer de telles images en haut et en bas de l’article. D’autres options permettent d’installer une image « en fond » d’article, sans notion de haut et de bas.

    Par ailleurs, l’affichage est responsive, avec un balisage moderne qui autorise le pré-chargement des images et l’affichage adapté sur écran haute définition.

    https://seenthis.net/messages/599479 via ARNO*