• En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.

    Si vous avez des exemples et des outils à ajouter, je suis preneur.

    ______________________________________

    LES EXEMPLES

    http://www.framescollection.com/tunnelrats.html
    Peu de technique, mais une narration forte illustrée et rythmée graphiquement

    http://www.framescollection.com/manly.html
    essentiellement graphique mais peu adaptable sur mobile

    https://projects.lukehaas.me/scrollify/examples/apple
    principalement des animations visuelles et peu de texte

    https://projects.lukehaas.me/scrollify/examples/layered-scrolling
    joue principalement sur les fonds (image ou vidéos) et peu de texte

    http://computer-grrrls.gaite-lyrique.net
    joue principalement sur le rythme des blocs de contenu

    https://brest1937.kubweb.media/episode/heritage
    alterne animations et contenus textes/vidéos

    https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
    très simple, repose sur l’image

    https://www.liberation.fr/apps/2019/02/paris-populaire
    moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus

    https://fabre.montpellier3m.fr/Correspondance d’@arno
    pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)

    https://www.bloomberg.com/graphics/2015-auto-sales
    haut niveau, avec animation de #SVG et tout

    https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
    idem, gros niveau, The Guardian quoi

    https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)

    ______________________________________

    LES OUTILS

    How to implement #scrollytelling with six different libraries partagé par @fil
    https://pudding.cool/process/how-to-implement-scrollytelling

    Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
    https://github.com/russellgoldenberg/scrollama

    Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
    https://projects.lukehaas.me/scrollify

    ScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
    https://sjwilliams.github.io/scrollstory

    Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
    https://maxwellito.github.io/vivus

    graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
    https://github.com/1wheel/graph-scroll

    enter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
    https://github.com/russellgoldenberg/enter-view

    Projects | Knight Lab partagé par @klaus
    https://seenthis.net/messages/792645

    revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
    https://revealjs.com

    ______________________________________
    TAGS SUR SEENTHIS

    #art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms

    #webdev #spip_recette

    • Un jour il faudra que je développe ces idées, parce que ça me tient à cœur, mais rapidement, sur les limites de ces formats :

      – les longforms ont été popularisés vers 2011 à partir du NY Times ; donc toute une partie des développements techniques s’est fait sans trop se poser la question du responsive, pas encore totalement à la mode à l’époque ;

      – faire ça bien, ça coûte bonbon. Donc le NY Times n’en fait presque plus ; et les autres ont repris les usages les plus simples et plus « automatisables ». Genre des effets de parallaxe et les images en fond fixed, souvent pas bien jolis, et qui donnent plus envie de vomir qu’autre chose. Les longforms du Monde, à un moment, c’était quasiment que ça.

      – et on est toujours dans une logique de CMS tout-automatique et de réduction des coûts. Les « art directed articles », comme le nom l’indique, ça implique qu’il y a une direction artistique (donc une personne dont c’est le métier) pour chaque article. Et mon constat : il n’y a pas vraiment de gens prêts à payer pour ça.

      – l’idéologie de l’édition sur le Web n’est plus de faire des pages Web super-belles avec de super-articles longs qui attireraient les gens, mais de partager sur les supports avec un maximum d’audience. Une grosse partie des médias, ces dernières années, s’est engouffré d’abord sur les formats courts (à une époque, on a même eu l’idée de découper les articles en plusieurs pages pour multiplier les paves vues…), puis les « pages » Facebook, puis que les formats « AMP » de Google ; certes ils en reviennent, mais c’est plus avec ce genre de tendances que tu vas avoir des développements du côté de la narration enrichie sur le Web…

      – et dernier écueil : ça demande des graphistes avec des compétences techniques, et des informaticiens avec des compétences graphiques, et ça ce sont des animaux mythologiques dont l’existence est encore discutée par les archéologues du Web.

    • Autre exemple, ce que l’on avait fait il a quelques années avec @drbouvierleduc pour la région Limousin, des « expos virtuelles » dans le site Géoculture (toute la rubrique Focus) :
      https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin

      En gros 100% avec le Noizetier. Dans l’idée ça peut soit être un unique contenu SPIP avec des centaines de noisettes, soit comme on l’a fait là, une page qui agrège les noisettes de plusieurs Rubriques/Sous-rubriques ce qui permet de gérer le chapitrage plus simplement (cf le menu chapitre en haut).
      Et c’est responsive :p

      Pour moi le noizetier est une des manières les plus souples/complètes de faire ça. Vu que tu peux en inventer autant que tu veux, suivant ce qui a été décidé avec la direction artistique de permettre de faire.

      Ça évite d’être lié à un contenu SPIP, et à seulement 2 ou 3 choix possibles, car sinon faudrait ajouter 12000 champs. On doit pouvoir reproduire les long forms de @arno assez facilement à priori.

      Par ailleurs tu peux les utiliser aussi bien vraiment toutes seules (le contenu vient de champs de config des noisettes) ou en utilisant le « vrai » contenu éditorial du site (le contenu de telle noisette venant du contenu d’un article, d’un événement, etc).

      Le plugin ne fait rien lui-même hein : tout dépend vraiment de ton « jeu de noisettes », càd ce que vous permettez de faire aux gens. C’est à peu près infini comme possibilités, vu que tu peux parfaitement avoir des noisettes « cartes », des noisettes « frise chrono », ou tout autre animation kikou un peu complexe, que tu intercales avec d’autres contenus plus simple, des textes, des images, etc.

    • Purement graphique et avec un travail de design sonore mais seulement dans une app
      Phallaina, le roman graphique
      https://youtu.be/GIqQIpmhJGQ



      j’ai en ai développé plusieurs avec des étudiant.es des Beaux-arts de Bordeaux ou j’enseigne.
      Ce ne sont que des images et ce n’est pas connecté à une base de donnée, par manque de temps pour un simple projet pédagogique, mais c’est faisable.
      https://design-ebabx.fr/webapp/seahot
      https://design-ebabx.fr/webapp/affluence

  • Avec Diala on vient de réaliser le nouveau site de l’Ihédate (Institut des hautes études d’aménagement des territoires) :
    https://ihedate.org

    #shameless_autopromo donc, sous #SPIP évidemment.

    Le site est essentiellement consitué de #longforms 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 :
    https://ihedate.org
    https://ihedate.org/l-ihedate
    https://ihedate.org/le-cycle-annuel

    On a 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 trombine, 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 :
    https://ihedate.org/l-annuaire-des-auditeurs

    Et évidemment, des « articles » très 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…) :
    https://ihedate.org/la-fin-de-la-paix-territoriale

    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 » :
    https://ihedate.org/cycle-2019-geographies-de-l-argent
    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
    https://ihedate.org/les-documents-en-acces-libre

    Travail un peu original sur les « pages des auteurs », où il faut gérer les accès publics et privés :
    https://ihedate.org/marchandise-jacques-francois

    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).

  • 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.

    – 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 :

    – 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

    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> :


    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 :

    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 :

    – 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

    • Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.

      Ce qui donne par exemple, avant chargement de l’image :

      et une fois l’image chargée :

      Ce que je réalise directement dans le squelette ainsi :

      #image_haut {
              background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
              background: linear-gradient(to bottom,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
              );
      }
      #image_haut:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              content: " ";
              z-index: 1;
              background: linear-gradient(to right,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
              );
               mix-blend-mode: soft-light;
      }
    • @realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.

      Je fais ceci :

              $("#menu_flottant a").on("focus", function() {
                      $("#afficher_menu").prop("checked", true);
              });
              $("body > *:not(#menu_flottant) a").on("focus", function() {
                      $("#afficher_menu").prop("checked", false);
              });

  • 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.

    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.

    • Pour créer l’effet de dégradé ci-dessus…

      (1) Je pars de l’image d’origine (celle-ci n’est pas très grande, je préfère si possible travailler avec des images de 2400 pixels de large, pour couvrir les besoins d’un écran haute définition de type iPad) :

      (2) Dans mon logiciel de dessin, je déterminer (avec des règles bleues ici) comment découper mon image :


      – La partie supérieure du ciel sera ici supprimée.
      – La partie centrale sera la partie qui apparaîtra au-dessus de la zone de texte : on n’écrira donc pas sur cette partie (par choix graphique, et parce que c’est une image trop contrastée pour que du texte qui soit lisible).
      – La partie inférieure sera la partie sur laquelle on commencera le bloc de texte : on écrira donc « par dessus » cette partie, qui devrait être faiblement contrastée.

      (3) Étape particulièrement importante : j’applique un dégradé vers une couleur d’aplat (qui correspondra à la couleur de mon fond d’article) sur la partie basse de l’image :

      (4) Je découpe l’image en deux parties :

      Je sauvegarde ces deux images (img_haut.jpg et fond_haut.jpg par exemple) sur mon disque dur.

      (5) Je me rends dans l’espace privé de mon site, sur l’article qui convient, et je trouve en colonne de droite, l’encadré suivant :

      Les deux intitulés qui m’intéressent sont : « Image du haut », où je vais installer img_haut.jpg, et « Dégradé du haut » où j’installe fond_haut.jpg. Je peux uploader via « Enregistrer », mais ici, je vais cliquer plutôt sur la pipette.

      Et hop… Cela donne directement une vue réduite de la page :

      La pipette a indiqué que je voulais extraire automatiquement la couleur en bordure bas de l’image. Si le résultat automatique ne convient pas, je peux évidemment renseigner le code de la couleur à la main. (Et à l’inverse, si j’ai oublié de passer par la pipette pour uploader les images, je peux simplement cliquer sur la pipette une fois les images déjà chargées, ça fonctionnera aussi.)

      Si nécessaire, j’effectue la même opération pour le bas de l’article.

    • On peut tout à fait n’installer qu’une image de haut, ou qu’une image de dégradé du haut, ou la même chose en bas, selon la nature des images qu’on utilise. Toute la difficulté, c’est de bien prévoir à quel endroit on accepte ou on interdit de placer le texte par dessus l’image, avant tout par souci de lisibilité.

      Un autre usage très simple consiste à ne même pas utiliser d’image, ni en haut ni en bas, mais à simplement choisir une couleur de fond d’article.

    • Au niveau des squelettes, il faut modifier son squelette d’article pour appeler fonds_article.html, par exemple :

      [(#INCLURE{fond=fonds_article}{id_article})]

      Ce squelette gère l’ajout des images. En revanche, c’est toujours à vous de créer le squelette d’affichage du bloc de texte de l’article (contenant le texte, mais aussi le titre, le sous-titre, et tout ce que vous voulez…).

      De manière automatique, le squelette du plugin essaiera de charger un squelette : inc/contenu-article.html

      mais vous pouvez aussi lui passer un autre nom de squelette, que vous passerez dans une variable contenu_article :

      [(#INCLURE{fond=fonds_article}{id_article}{contenu_article=inc/mon_squelette_a_moi)]

      Oui, c’est un peu brut de décoffrage, il va falloir bosser un peu de votre côté…

    • Ah, un détail mignon : sur écran de petite taille (smartphone, tablette verticale), les images sont recadrées automatiquement, on conserve tout leur contenu vertical, mais on supprime une partie de la droite et de la gauche de l’image. De cette façon, sur petit écran, on limite l’aspect « minuscule bandeau horizontal », en « zoomant » un peu par rapport à l’image d’origine.

    • Quelques remarques :

      – d’expérience, ce n’est pas évident du tout à utiliser ; pas techniquement (une fois qu’on a réussi à bidouiller les squelettes), ni de l’interface, mais surtout au niveau graphique ; si on n’a pas de solides compétences de graphisme (et si on ne sait pas bien utiliser un logiciel de manipulation d’images), on n’y arrivera pas ;

      – du coup : ça réintroduit un graphiste dans la mise en ligne des articles. (Je te laisse réfléchir à ça…)

      – réaliser les images du haut avec des dégradés est généralement beaucoup plus difficile que de créer les images du bas de l’article. Avec les images du haut, on est généralement coincés par le corps des gens, sur lesquels on ne peut pas facilement appliquer de dégradé de couleur… avec les images du bas, on a souvent le ciel ou le plafond, c’est nettement plus facile (mais moins spectaculaire puisqu’on ne le voit qu’après avoir scrollé tout l’article)

      – par ailleurs, il faut essayer de faire des images « du haut » (au-dessus) du texte très larges et pas trop hautes, c’est-à-dire de grands bandeaux très horizontaux, puisque sinon on va rejeter le texte après l’image, possiblement en dehors de l’écran ; ça ajoute encore de la difficulté dans la création des images de fond du haut de l’article (alors que, en bas de page, on n’a aucun problème à avoir une image très haut).

    • Le plugin permet aussi de gérer une image en fond d’article (ni en haut, ni en bas, « en fond »…). Cela se passe dans la partie basse de l’interface :

      On chargera donc une image dans « Image de fond », qui devra s’afficher sous le bloc de texte de l’article.

      Il y a alors trois options pour dimensionner ce bloc de texte :

      taille automatique, le bloc aura naturellement la taille fabriquée par son contenu ; c’est l’image qui tentera de s’adapter aux dimensions du bloc de texte (donc de manière potentiellement grotesque) ;
      remplir l’écran, le bloc aura la hauteur de la fenêtre du navigateur ; si nécessaire, le plugin ajoutera de l’espace en haut et bas du texte pour centrer le texte dans l’écran, ou au contraire provoquera un ascenseur vertical (pas dément). C’est surtout destiné à un texte très court. Et c’est excessivement difficile à maîtriser, à cause des grandes différences de tailles d’écrans ;
      proportions de l’image : fabriquer un bloc de la « taille » de l’image affichée sur toute la largeur de l’écran ; on ne cherche pas à « remplir » l’écran, mais à afficher toute l’image. Comme précédemment, c’est destiné aux textes courts, ça ajoute du blanc ou ça ajoute des ascenseurs selon la hauteur du bloc de texte, mais c’est généralement plus facile à maîtriser…

      Dans le cas de remplir l’écran, par défaut le plugin affichera l’image en « position : fixed », l’image s’affichera avec cet effet de « parallaxe » (qui personnellement me sort désormais par les oreilles…), c’est-à-dire un élément qui ne scrolle pas pendant que le reste de la page défile.

    • Et une dernière technique : si tu fais ça en haut et bas d’articles, et que tu affiches tous les articles d’une rubrique les uns après les autres dans la même page, tu obtiens un énorme… longform. Et c’est comme ça que j’ai fabriqué ma démo de la Nasa. (Ou, moins « fondue » graphiquement, la page d’accueil de Paris-Beyrouth.)

      Dans le cas de la Nasa, toute la difficulté consiste à découper les images pour que le bas de l’article se « fonde » pour devenir le haut-dégradé de l’article suivant, et qu’on ait ainsi une impression de passage d’un article à l’autre avec une même grande image dégradée vers le haut et vers le bas. C’est pas évident à faire graphiquement, ça demande des images très spécifiques, le choix des couleurs se complique d’autant, mais le résultat est assez bluffant.

    • Super !

      Au niveau technique (je fais ce que je sais hein :p) il y aurait sûrement moyen de rendre ça générique pour l’activer (avec une config) sur n’importe quel type de contenu (objet SPIP). Le stockage est dans un sous-dossier « article123 » donc on devrait pouvoir avoir la même chose pour « rubrique123 » ou « patate123 ».
      (D’ailleurs je ne vois pas pourquoi l’id est répété dans le nom des fichiers, puisqu’on stocke déjà tout dans un sous-dossier dédié à tel contenu précis.)

      Pour les images, effectivement je ne vois pas ce qu’on pourrait automatiser de plus, et donc il faut forcément des compétences graphiques, c’est sûr.

      À la limite, avec une interface plus complète dans l’admin avec du JS, on pourrait imaginer faire le découpage, définir la ligne où va commencer le dégradé, et créer le dégrader (pas auto, avec un outil graphique pour définir l’amplitude, etc)… il y a des librairies JS qui permettent de manipuler ce genre de choses. Mais bon ça demande un sacré gros boulot en plus…

    • @rastapopoulos :

      – oui sur la généralisation, très juste, juste faire attention que ça stocke trois petites infos en base de donnée de l’objet (intitulé des images, et dimensionnement quand image de fond) ;

      – ne me demande pas pourquoi je répète le numéro dans un dossier déjà numéroté :-))

      – une évolution que j’envisage, effectivement, c’est de ne plus demander deux images pour gérer l’endroit où commence le texte, mais d’utiliser directement un curseur à gérer par glisser-déposer sur l’image dans l’interface privée ; parce que c’est un des points les plus bloquants pour les usagers ;

      – une autre difficulté : mon plugin image_reponsive ne fabrique pas de timestamp, et comme il faut souvent s’y reprendre à plusieurs fois, hé ben c’est pas pratique parce que l’usager lambda se fait planter par son cache quand il veut voir ses nouvelles images…

  • Pour le week-end, un #shameless_autopromo : avec @diala on a refait notre site professionnel :
    http://www.paris-beyrouth.org

    Évidemment c’est du #SPIP.

    – La page d’accueil est une de ces #longforms qui sont un peu notre spécialité désormais. Au passage, je rends publique une démonstration que j’ai réalisée il y a quelques années, où j’utilise intensivement mes différentes techniques de « formes longues » :
    http://www.orientpalms.com/demo/spip.php?rubrique2

    – Il y a ces petits SVG animés un peu partout. J’ai d’ailleurs fait une démonstration de ce principe là :
    http://www.orientpalms.com/demo/spip.php?rubrique7

    – Les tutoriaux SPIP sont toujours là, et il faudrait que je trouve le temps d’en rédiger de nouveaux :
    http://www.paris-beyrouth.org/tutoriaux-spip

  • On a livré aujourd’hui le site de l’OPPIC (L’Opérateur du patrimoine
    et des projets immobiliers de la Culture) :
    http://www.oppic.fr

    Évidemment, #SPIP, #HTML5 et #responsive, avec Mosquito.

    Les principales originalités :

    – le système de recadrage « intelligent » (souvent qualifié de « direction artistique »), avec mon #plugin Centre image : on indique avec une petite croix dans l’espace privé le centre d’intérêt de l’image, et ensuite les recadrages responsive de l’interface publique se font autour de ce point (et non systématiquement au centre de l’image comme on fait usuellement) ; au passage : les grands logos changent beaucoup de proportions selon les proportions de l’écran (vertical/horizontal, et taille) ;

    – les pages « projets » :
    http://www.oppic.fr/article76.html
    avec deux colonnes qui scrollent à des vitesses différentes (selon la taille de l’écran), et des raccourcis et des outils pour fabriquer différents cadres (pavé foncé en haut à gauche avec les mentions des architectes, maîtres d’œuvre…), un pavé avec les budgets (et système de « gros » chiffres, et dans le texte des petits pavés avec les prestataires…

    – des #longforms (formes longues) :
    http://www.oppic.fr/rubrique18.html
    avec mes outils permettant d’installer des images qui se fondent sous le texte, et une collection complète de modèles de texte (une, deux, trois, quatre colonnes, etc.).

    #shameless_autopromo

    • Bonjour

      Super et merci pour le partage :) ça m’a permis de découvrir Photoswipe que je ne connaissais pas et qui va me rendre bien service pour un nouveau projet.
      Un petit truc : dans le title du href des images : Ecole d’architecture de Strasbourg. Chantier au 4 juin 2013. ©Bob Fleck - <span class="caps">OPPIC</span> , le span class="caps" n’est pas interprété...
      Bonne nouvelle année à tous
      Cilou