• A Critical Problem | Cheryl Rofer
    https://nucleardiner.wordpress.com/2017/06/19/a-critical-problem

    The metal rods in the top photo are plutonium. Rods can roll. These rods could roll closer to each other and perhaps produce the kind of runaway neutron reaction that killed Slotin and Daghlian. Putting a hand in to separate them could make the reaction worse because the water in a human body reflects the neutrons.

    I had formal safety training, informal discussions with more experienced people, and made it a point to internalize rules of thumb. Keep pieces of plutonium separate. Abide by glovebox limitations; every glovebox has a sign with the limits of plutonium allowed in it. For solutions, keep them dilute and in flat containers. Flat/thin is safer; the closer a shape is to spherical, the less material is needed to go critical. IIRC, there were racks to put rods in if you were working with that shape of metal, so that they didn’t accidentally roll together.

    That photo is at the center of two articles from the Center for Public Integrity (NMPolitics.net, Washington Post). They are based on an investigation reported here. According to those articles, a technician ignored glovebox limits and arranged the plutonium to take that photo for management.

    #nucléaire #plutonium #YOLO

    (incident de 2011 désormais tout va bien)

  • #Rythmes_scolaires, allègement des classes, #réforme_du_collège... sur le bureau du ministre de l’éducation
    https://www.mediapart.fr/journal/france/230517/rythmes-scolaires-allegement-des-classes-reforme-du-college-sur-le-bureau-

    Jean-Michel Blanquer, nouveau ministre de l’éducation nationale, a effectué son premier déplacement dans une école ce mardi. Sans vouloir tout réformer, il a promis de prendre le temps d’évaluer les réformes et les dispositifs initiés par ses prédécesseurs. Revue des chantiers qui l’attendent.

    #France #éducation_prioritaire #jean-Michel_Blanquer #Najat_Vallaud-Belkacem #Plus_de_maîtres_que_de_classes

  • Mise à jour importante sur mon #plugin #SPIP image_responsive :
    http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive

    – il y avait un bug sur le choix des images hors media-queries, avec risque de ne pas respecter le choix de tailles prédéterminés (et donc de fabriquer beaucoup trop d’images en cache)
    – surtout : je viens (enfin) d’ajouter le timestamp aux adresses des fichiers, ce qui devrait résoudre pas mal des problèmes de cache rencontrés par les utilisateurs.

    • Bonjour
      Je cherche à comprendre pourquoi (et surtout si c’est normal) avec background_responsive il y a dans le code html de la page 4 appels d’images (avec 1 px de différence) pour chaque taille (je comprends pour 1 et 2 mais pas i et p).
      EX :
      \"960\" :{\"i\" :{\"1\" :\"local\\/cache-responsive\\/cache-960\\/d32c7d34962d8ea6f4fa0a9b008cdf7c.jpg ?1529623009\",\"2\" :\"local\\/cache-responsive\\/cache-960\\/d32c7d34962d8ea6f4fa0a9b008cdf7cd32c7d34962d8ea6f4fa0a9b008cdf7c-2.jpg ?1529623010\"},\"p\" :{\"1\" :\"local\\/cache-responsive\\/cache-960\\/5e9c6d2f4211f48525892e5f9f166dc6.jpg ?1529623011\",\"2\" :\"local\\/cache-responsive\\/cache-960\\/5e9c6d2f4211f48525892e5f9f166dc65e9c6d2f4211f48525892e5f9f166dc6-2.jpg ?1529623012\"}

      Merci

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

    • Juste un retour d’expérience d’une novice : 4 utilisations pour votre plugin Insertion avancée d’images (particulièrement le slide) : 2 utilisations « telles quelles » => 1) en espace public ; 2) espace privé, pour afficher des slides de copies écran des fantaisies typographiques (exergue, épigraphe et autres qui ne « passent » pas autrement dans l’espace privé (et l’affranchissement de Java est un gros « plus » dans l’espace privé) ; et 2 utilisations « hors-normes » (ou "hack si vous voulez !) dans l’espace public : 3) création de slide façon « vrai slide javascript », avec les poignées précédent/suivant sur le côté et les bulles de positionnement en haut (ça marche super, le seul hic c’est qu’évidemment la bulle de positionnement ne se met pas à jour - ne change pas de couleur - quand on choisit la slide avec les poignées de côté, mais bon, les visiteurs s’en accomoderont !) et 4) un super petit truc pour afficher les articles suivant/précédent façon « Monde Diplomatique » (les flèches en Java du haut de l’article), en jouant à nouveau sur le CSS uniquement (ce qui fait que, en affichant une double flèche en haut de l’article, ce qui s’affiche en-dessous est initialement « rien » puis si on clique dessus, on fait venir le titre de l’article suivant à l’intérieur du système « slide » (invisible) et de même pour le « précédent ». Je suis très contente de ma trouvaille de débutante et voulais vous en faire part, ça fonctionne à merveille. Merci beaucoup.

  • Grosse nouveauté dans mon #plugin #SPIP Insertion avancée d’images :
    https://zone.spip.org/trac/spip-zone/browser/_plugins_/medias_responsive_mod

    Outre le raccourci <imgXXX> et ses tripotées de variables (zoom, habillage automatique, image dans un rond, « flip »…), il y avait donc le raccourci <ligneXXX> pour placer plusieurs images l’une à côté de l’autre, éventuellement sur plusieurs lignes bien alignées, en fonction des dimensions des images et de l’écran.

    Il y a désormais un raccourci super-méga-trop-la-classe : <slideXXX>, qui fabrique automatiquement un slider horizontal quand on en met plusieurs à la suite. Par exemple :

    <slide970>
    <slide971>
    <slide972>

    provoque l’affichage suivant :

    Je suis très content, c’est totalement responsive, multilingue (même en direction rtl) et ça fonctionne entièrement sans Javascript. (Attention, limitation : on ne peut mettre que 8 images à la suite.)

    L’intérêt c’est de mettre ces petits spiders (idéalement 2 ou 3 images pas plus) directement dans le corps du texte, et donc d’en mettre plusieurs dans différents endroits du texte si on veut.

    Pour la suite (cette semaine j’espère), j’ajouterai un petit script pour gérer le swipe du doigt pour faire défiler les images sur écran tactile.

    • Et je viens d’ajouter le javascript qui gère le swipe gauche-droite sur écran tactile, pour faire défiler horizontalement le slider. Du coup je passe en translate3d pour que l’animation soit plus fluide. (D’après caniuse, désormais translate3d a grosso modo le même taux de compatibilité que translate.)

  • J’ai ajouté un gros paragraphe consacré à « Image adaptative, recadrage et direction artistique » dans ma documentation du #plugin #SPIP image_responsive :
    http://www.paris-beyrouth.org/Plugin-SPIP-Image-responsive

    Ça explique les critères de recadrage que l’on peut utiliser directement dans le filtre image_responsive, comme ceci :

    [(#LOGO_ARTICLE_NORMAL|image_responsive{
            0/480/800/1280/1920/480/800/1280/1920,
            0, 0,
            (max-width: 480px) and (orientation:portrait)/(min-width:481px) and (max-width: 800px) and (orientation:portrait)/(min-width:801px) and (max-width:1280px) and (orientation:portrait)/(min-width:1281px) and (orientation:portrait)/
            (max-width: 480px)/(min-width:481px) and (max-width: 800px)/(min-width:801px) and (max-width:1280px)/,
            4x5/4x5/4x5/4x5/3x2/3x2/3x2/3x2
            })]

    (lequel code fabrique une bonne grosse balise picture en HTML5, extrêmement efficace au niveau de l’affichage, puisque l’image est préchargée, et l’affichage est instantané quand on revient sur une page déjà affichée).

    Pour le plugin lui-même :
    http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive

    • Et je viens d’ajouter un paragraphe sur le précalcul des images avec _IMAGE_RESPONSIVE_CALCULER, ainsi que l’ajout de liens <link> pour faciliter l’aspiration du site, avec _SPIP_LIER_RESSOURCES.

  • Planète sable - La Chine en guerre contre le « dragon jaune »
    http://www.arte.tv/fr/videos/053446-001-A/planete-sable

    La #Chine est menacée. Ses #déserts anciens, apparus il y a longtemps dans le nord et le centre du pays, continuent de s’étendre. De nouveaux sont en formation. Les zones arides et semi-arides couvrent désormais la moitié de son gigantesque territoire. Elles grignotent peu à peu les terres arables, dont le recul force de nombreuses populations villageoises à se déplacer. Les barrières végétales naturelles qui se dressent aux confins des déserts ne sont ni assez nombreuses ni assez puissantes pour retenir le sable qui s’envole et retombe sur Pékin. À chaque printemps, la capitale chinoise et sa région sont noyées, durant des jours entiers, dans les #tempêtes_de_sable. Mêlant sédiments et poussières de #sable, ce « #dragon_jaune » contre lequel les autorités se mobilisent affecte directement plus de deux cent cinquante millions de personnes. Et bien davantage encore si l’on ajoute les zones touchées au-delà des frontières de l’Empire du Milieu, jusqu’en Corée ou au Japon. Engagée contre l’avancée inexorable de ces déserts, une armée de trente-deux mille « faiseurs de pluie » se bat quotidiennement. Des équipes scientifiques sont également à pied d’œuvre pour réintroduire des espèces végétales dans les sols appauvris. Une « #muraille_verte », aussi longue que la mythique Grande Muraille, commence à sortir de terre pour faire barrage à l’ennemi.

    #désertification #végétalisation #pluie_artificielle #cyanobactérie #lichen #salinisation

  • The role of rainfall in Africa’s ethnic conflicts | VOX, CEPR’s Policy Portal
    http://voxeu.org/article/role-rainfall-africas-ethnic-conflicts

    In recent work, we empirically investigate whether inequality between ethnic groups affects ethnic conflict prevalence in the African continent between 1982 and 2001 – the period for which our main data sources were all available (Guariso and Rogall 2017). The analysis is based on an innovative rainfall-based measure of inequality between ethnic groups.

    Our approach uses the observation that agriculture employed most people in Africa, and at the same time has been highly dependent on weather conditions.1 Variations in rainfall are therefore likely to lead to variations in agricultural production and income.

    The link between rainfall and income across Africa has already been highlighted, starting with Miguel at al. (2004). To the best of our knowledge, however, we are the first use this to investigate the role of inequality. Using weather data, we can overcome both issues of data availability – as high-frequency data are systematically collected for the entire continent – and endogeneity – as changes in the distribution of rainfall are not caused by conflict.

    #inégalités #conflits #précipitations #pluviométrie #Afrique #cartographie

  • Dites, je cherche les listes (par langue) des caractères/glyphes courants utilisés dans les langues mondiales majeures.

    Pour les curieux : c’est pour faire du « subsetting » sur mesure de webfonts, pour plein de pays (>15). Une idée ?

    Pour l’instant, j’ai trouvé des choses chez font squirrel. C’est très bien, mais j’ai des doutes sur la fiabilité.

    • Je n’irais pas faire du subsetting précis pour chaque langue, sinon tu vas retomber dans les problèmes historiques des multiples variantes régionales d’ISO 8859 : multilinguisme problématique (tu veux écrire « as the French say : “qui vole un œurf vole un bœuf” » dans un article du site anglais, et hop, le « œ » est tout pété – private joke), noms étrangers qui utilisent des caractères qui ne sont pas dans ton subset (tu parles de « Håkan Juholt » dans un article en français, et le « å » apparaît tout moche parce que tu ne l’as pas conservé dans le subset de la fonte du site français), et à l’heure d’Unicode l’habitude des gens de détourner les caractères d’une autre langue pour faire des effets de signature graphique…

      Sur Orient Palms, il se trouve justement que j’ai 15 langues différentes, et que j’utilise un certain nombre de fontes différentes, justement pour éviter d’avoir une énorme police Unicode « complète » à charger… Mais j’ai vraiment limité les variantes :
      – il y a la police avec les caractères latins (tous ceux dessinés par le typographe, ça me couvre de l’espagnol à l’allemand en passant par le français et le suédois… Comprendre que j’ai ici une seule version de la police de caractère pour 9 langues différentes :
      http://www.orientpalms.com
      http://fr.orientpalms.com
      http://tr.orientpalms.com
      http://pt.orientpalms.com
      http://es.orientpalms.com
      http://de.orientpalms.com
      http://it.orientpalms.com
      http://sv.orientpalms.com
      http://nl.orientpalms.com

      – il y a le fichier du même dessin de caractère avec les caractères cyrilliques et latins (grosso modo deux fois plus lourde),
      http://ru.orientpalms.com

      – il y a encore un fichier du même dessin de caractère, mais avec les dessins grecs et latins (donc égalemment plus lourde que le latin seul),
      http://el.orientpalms.com
      (uniquement sur les sous-titres, les gros titres restent en caractères latins ici)

      – il y a un fichier pour les caractères arabes (la fonte contient les caractères latins les plus courants),
      http://ar.orientpalms.com

      – et pour le fun, dans la version coréenne j’ai une (énorme - 1Mo) fonte dédiée, tellement grosse que soit c’est une idiotie soit je compte sur le fait que les coréens ont la meilleure connexion du monde…
      http://ko.orientpalms.com

      – je n’utilise pas de webfonts pour le chinois, ni pour le japonais, parce que là aussi, ça ferait des polices énormes (et on a un traffic pas négligeable sur la Chine, alors je soigne un peu plus l’expérience utilisateur sur cette version).

      Par ailleurs, comme je l’ai déjà documenté ici, je n’utilise plus que WOFF et WOFF2, qui sont bien compactés.

      Un des aspects à prendre en compte :
      – pas question pour moi de gérer 15 fichiers de police différents, c’est le meilleur moyen de se planter dans son organisation et ses mises à jour (surtout si tu t’amuses à modifier des dessins de caractères, je te dis pas s’il faut le reproduire ensuite dans 15 fontes différentes…) ; et comme généralement on a besoin de plusieurs fontes pour faire quelque chose de joli, on multiplie encore le nombre de fichiers (sur Orient Palms, j’ai 2 webfontes dans ma maquette) ;
      – je préfère éviter le recours aux options CSS de range Unicode pour gérer par exemple Grec et Latin avec deux fichiers de polices différents qui se complèteraient : d’abord parce qu’il faudrait encore tester la compatibilité du truc (avec les Webfonts et Unicode, je me méfie très lourdement des implémentations dans les brouteurs, qui ont toujours été historiquement merdiques) ; surtout parce que je préfère charger un fichier plutôt que deux.

      Après, perso, je préfère généralement n’utiliser que des polices de titraille, j’évite les webfonts sur le texte courant (problèmes de rendus et de lisibilité, temps de chargement des polices sur du texte qu’on devrait pouvoir lire immédiatement, et besoin de 3 voire 4 fichiers juste pour assurer l’affichage gras/italique…). Ça limite énormément les problèmes de subsetting par langue, parce que les caractères hors-subset et le multilinguisme, c’est beaucoup plus rare (genre mettre une citation originale en cyrillique dans un article en anglais, ça se fait, mais dans le titre c’est beaucoup plus rare).

    • Sinon, si tu tiens à tester pour chaque langue, il y a une astuce que j’avais faite pour ajouter des langues à mon #plugin #SPIP de détection de langues : j’avais besoin de connaître la fréquence des séries de 3 lettres dans quelques langues manquantes dans le script d’origine.

      Du coup je suis allé sur le projet Gutenberg, j’ai récupéré quelques gros romans dans la langue qui me manquait, j’ai collé tous les textes (bruts) dans un fichier, et hop j’ai fait une moulinette qui a compté les séries de 3 lettres et m’a retourné un tableau de leurs fréquences respectives. Tu peux facilement faire la même chose pour connaître la fréquence des caractères utilisés dans une langue… (mais voir mon message précédent, je ne pense pas que ce soit une bonne idée).

    • Roh, merci pour tout ces détails, ça donne à réfléchir. Je savais bien que sur seenthis j’allais avoir de la matière :)

      Le contexte chez mon client est légèrement différent : sites e-commerce assez ciblés (contenus peu ou pas littéraire), et grosse préoccupation webperf. Il est très improbable que l’on ait à utiliser des caractères sortant du subset.

      Comme tu le soulignes, l’enjeu lors du subsetting, est de décider ce qu’on inclue ou non...

      Pour l’instant, j’ai un générateur « toutautomatisé » (utilisant https://github.com/ecomfe/fontmin), qui prend en entrée un ensemble de fichiers ttf (la Roboto et toutes ses variantes, dans mon cas) et une liste de fichiers texte UTF8 (1 par pays), contenant les caractères à utiliser (en faisant gaffe aux caractères invisibles).

      Il produit en sortie les formats attendus (woff2, woff, etc...) rangés dans des répertoires qui vont bien. Bien sûr, l’approche ne vaut que pour les sites « européens » (pour simplifier), je ne me suis pas attaqué encore au site chinois.

      L’avantage d’avoir tout automatisé, est qu’on pourra changer rapidement le subsetting sans que ce soit la plaie.
      Je croise les doigts, et j’espère bien que ma solution tiendra la route.

      Au départ, j’ai cherché à comprendre comment faisait https://fonts.google.com pour proposer des webfonts aussi légères. Grosso modo, en plus des optimisations classiques ils génèrent plus de 30 variantes par fonte, optimisées sur mesure et servies dynamiquement selon l’OS et le User-agent. Cet aspect n’est bien sûr pas documenté, et je n’ai pas le temps, les compétences ni le courage de faire la rétro-ingénierie.

  • Nous, policiers, pourquoi nous soutenons Jean-Luc Mélenchon | Marianne
    https://www.marianne.net/debattons/tribunes/nous-policiers-pourquoi-nous-soutenons-jean-luc-melenchon

    Florilège, (léger léger) :

    Toutefois, l’adulte a-t-il le temps de regarder le ciel quand il est nu de tout engin à moteur, a-t-il le temps de nourrir le geai ou de livrer une parole silencieuse quand le chronomètre lui affiche le temps restant avant le gong ?

    [...]

    C’est à la lumière de l’espoir, érigé en possibilité que le présent se vit comme une saveur printanière, explosive et irradiante.

    [...]

    Quant à la pensée, elle est un luxe ; devenons riche et inutile, le temps de la floraison des cerisiers.

    [...]

    Le monde s’assombrit quand le rire d’un enfant est entravé par les cris et emmurés derrière une stèle

    allez pour finir :

    En vole, en marche, en réveil salutaire, M. Mélenchon résonne comme un colibri.

    #poésie #littérature #plumes #poulet #flics #acab #mouahahaha

  • Les missions régionales d’autorité environnementale dressent leur premier bilan
    http://www.caissedesdepotsdesterritoires.fr/cs/ContentServer/?pagename=Territoires/Articles/Articles&cid=1250278749977&nl=1

    Un effort de réduction de la #consommation_d'espaces est néanmoins constaté entre les documents d’#urbanisme préexistants et ceux qui lui sont soumis pour avis. Mais la marge de progrès est importante : dans les #Scot, #PLU, #PLUi ou cartes communales étudiés, l’évaluation des impacts reste « mal pratiquée ou acceptée » par les collectivités qui les portent. Les informations sont parfois dispersées, conduisant ces missions régionales à recoller les morceaux d’un puzzle encore peu maîtrisé. A leur défaut d’homogénéité s’ajoute un manque de justification des besoins d’#urbanisation. Le maître mot reste la consommation d’espaces naturels et agricoles. « Loi Alur et stratégies régionales/locales pour la #biodiversité font progresser les choses, mais on voit encore passer des projets de zones d’activités dans des territoires en complète déprise et où l’urbanisation pourrait être évitée en réinvestissant des friches ou des espaces vacants », illustre Alby Schmitt.

  • Comment le thème de l’identité nationale a été capturé par la droite et le FN
    https://www.mediapart.fr/journal/france/030317/comment-le-theme-de-l-identite-nationale-ete-capture-par-la-droite-et-le-f

    Vincent Martigny © Radio #France/Christophe Abramowitz La gauche des années 1970 avait su s’approprier le thème de l’identité nationale. #Vincent_Martigny explique comment la droite a forgé un récit alternatif, laissant beaucoup moins de place au #pluralisme_culturel.

    #Culture #idées #Identité_nationale

  • Pollution près de l’usine Areva de la Hague : il y a aussi du plutonium - Magazine GoodPlanet Info
    https://www.goodplanet.info/actualite/2017/03/02/pollution-pres-de-lusine-areva-de-hague-y-a-plutonium

    Les terres polluées à l’américium 241 à côté de l’usine Areva de Beaumont-Hague (Manche) le sont aussi au plutonium, autre radioélément extrêmement toxique, a indiqué jeudi Areva.

    En janvier, #Areva avait annoncé que l’entreprise allait « ramasser » des terres contaminées à l’#américium_241 près de son usine de retraitement des déchets nucléaires, confirmant une pollution dénoncée en octobre par l’Association pour le contrôle de la radioactivité dans l’Ouest (ACRO).

    Cette fois, Areva confirme la présence dans ces terres « d’un marquage en #plutonium_239 – 240, avec une valeur moyenne de l’ordre de 200 becquerels (Bq) par kilo de terre sèche ».

    Un peu plus tôt jeudi matin, l’ACRO avait annoncé dans un communiqué avoir trouvé, quant à elle, jusqu’à 492 Bq par kilo de matière sèche de ces plutonium.
    ...

    Selon Areva, la valeur de 200 Bq par kg sec « ne présente pas de risque sanitaire pour l’homme ». « Le plutonium est fixé dans un environnement de terre humide, peu propice à l’exposition par ingestion ou inhalation. Enfin, les analyses réalisées dans l’eau du ruisseau des Landes », proche de la zone contaminée, « ne révèlent pas de marquage en plutonium ».

    L’ACRO de son côté affirme que la quantité de plutonium trouvée est « 350 fois plus élevée » que « la concentration la plus élevée répertoriée en France dans les sols et sédiments pour ces isotopes du plutonium (1,4 Bq/kg sec) ».

    #pollution #nucléaire

  • Analysis of #Soviet smoke detector #plutonium
    https://carlwillis.wordpress.com/2017/02/07/analysis-of-soviet-smoke-detector-plutonium #smoke_detector #URSS #détecteur_de_fumée

    The Soviet Union cooked up more plutonium than any other nation. Most of this was slated for the noble purpose of containing capitalist imperialism, but some found its way into commercial ionization smoke detectors like the KI-1, RID-1, and RID-6M. (The bourgeois warmongers themselves preferred, and still prefer, americium-241 for this application)

    • Mais y aura plus du tout d’americium dedans en France après la fin de l’année.

      Les détecteurs de fumée ioniques interdits en France
      http://le-detecteur-de-fumee.fr/content/73-detecteurs-de-fumee-ioniques-interdits-en-france

      L’arrêté du 18 novembre 2011 portant dérogation à l’article R. 1333-2 du code de la santé publique pour les détecteurs de fumée à chambre d’ionisation concerne tous les détenteurs de détecteurs de fumée à chambre d’ionisation, les professionnels de la détection incendie et les opérateurs de maintenance.

      Toutes ces personnes doivent participer activement au remplacement de ces appareils par des détecteurs de fumée optiques avant le 31 décembre 2017.

      Où retrouve t-on les détecteurs de fumée ioniques
      En 2013, l’on comptait environ 7 millions de détecteurs ioniques repartis sur le territoire national.

      Installés majoritairement dans le secteur public (65%), ils équipent principalement les locaux de soin et les lieux à sommeil (Hôtels...)

      Comment reconnaître et différencier un détecteur de fumée ionique d’un détecteur optique
      Peu d’éléments visuels permettent de différencier un détecteur de fumée ionique d’un détecteur de fumée optique pourtant, pour votre sécurité, il est important de savoir les identifier.

      Le seul élément auquel vous pouvez vous fier est la mention du trèfle radioactif au dos de l’appareil.

  • Communiqué commun SUD Educ #EHESS & Solidarités Etudiant-e-s EHESS concernant la revue Éléments et ses contributeurs récents.
    https://twitter.com/ArSaintMartin/status/826192205719171072

    #Marcel_Gauchet #Jacques_Sapir #Pierre_Manent #Alain_de_Benoist

    Avec cette justification de Marcel Gauchet (de 5min35s à ) :

    J’ai accepté de faire un entretien avec des gens que je connais un peu et qui me paraissent des intellectuels respectables . Je me serai bien passé de cette Une. [...] Pour moi l’esprit démocratique, #pluraliste, ça consiste à discuter avec tout le monde. C’est à dire notamment avec les gens avec lesquels on n’est pas d’accord. Je suis loin d’être d’accord avec Alain de Benoist sur l’essentiel de sa pensée, mais je ne vois pas de raisons dès lors... Pour moi les gens avec lesquels je ne discute pas ce sont ceux qui se proposent de renverser la #démocratie. Mais à partir du moment où les gens sont dans l’ #espace_démocratique, il me semble que la règle de base c’est d’accepter le désaccord. C’est la coexistence. [...] Il y a une extrême gauche et une extrême #droite, le champs politique est polarisé par nature. Je discute aussi avec des gens d’ #extrême_gauche. Je dois dire, par ailleurs, beaucoup plus souvent avec l’extrême #gauche qu’avec l’ #extrême_droite.

    https://www.youtube.com/watch?v=AwOmFwRzxQU

    • 1. Refonte du raccourci <img>

      Fondamentalement, c’est une modification complète du fonctionnement du raccourci <img> : l’image est affichée « en grand », et jamais sous forme de vignette. Elle peut être évidemment placée au centre, à gauche ou à droite, mais l’utilisation première est d’afficher l’image sur toute la colonne de texte disponible.

      Une idée vraiment importante est de se débarrasser totalement de la différence entre les images du portfolio et les images hors du portfolio : les images s’affichent de la même façon dans tous les cas, et jamais sous forme de vignette.

      2. Si on a mis un titre, un descriptif et/ou des crédits, ils s’affichent avec <img>. C’est dans la continuation de la logique précédente : si on met un titre, c’est qu’on veut un titre. Donc <img> affiche toujours le titre (quand il est renseigné).

      3. C’est responsive, évidemment.

    • Outre le fait que personne ne comprend vraiment la logique <img>, <doc> ou <emb>, la question qui prime est le fait que les usages qui ont justifié ces différents raccourcis ont disparu.

      – Quand on a conçu SPIP en 2000, la bande passante utilisée par les images restait une question importante : on affichait les images en petit dans les articles, et on proposait de cliquer dessus pour que l’utilisateur puisse les charger uniquement s’il en a envie. Clairement, plus personne ne fait ça… On veut des images en grand et puis c’est tout. C’est aussi pour cela qu’on affiche le type et le poids du fichier dans <doc> (pour que l’utilisateur ait une idée de ce qui l’attend s’il clique sur ce terrifiant fichier de… 160ko) ; mais aujourd’hui, en dehors de fichiers spécifiques, genre gros PDF ou fichier d’image monstrueux, ça n’a pas de sens de continuer à le faire pour des images…

      Bref, le coup d’insérer des petites vignettes cliquables au lieu de grandes images, ça ne se fait plus du tout.

      À l’inverse, insérer de belles grandes images qui occupe toute la largeur de la colonne, c’est la norme désormais.

      – Une habitude (étrange…) qu’on avait était d’insérer des petites images sans légende à l’intérieur des textes. Bon, ça non plus, ça ne se fait plus : quand on met une image, si on a une légende, hé ben on affiche la légende, ça ne coûte pas plus cher…

      – Un usage que j’ai supprimé de mes sites : la différence entre portfolio et hors portfolio. Si une image est associée à un article, c’est qu’on veut l’afficher dans tous les cas (si on veut conserver des images dans le site, mais sans les associer à un article, on a maintenant la médiathèque). Donc une image s’affiche toujours de la même façon avec le raccourci <img>, et si elle n’est pas affichée dans l’article, on la mettra dans le portfolio en dessous, sans se demander si elle est dans le « portfolio » (au sens technique SPIP) de l’article, parce que c’est une notion incompréhensible pour les usagers.

      Je ne l’ai pas encore fait dans ce plugin, mais je pense qu’il faudrait complètement réserver l’utilisation de <doc> à des présentations de documents à télécharger, genre grosses images ou fichiers PDF, et ne plus du tout l’utiliser pour insérer des images dans le texte. Du coup, sur mes sites, j’utilise désormais uniquement <img> pour insérer des images, et plus jamais <emb> ni <doc>.

    • 4. Balisage moderne avec <figure> et <figcaption>.

      5. Une image est cliquable (pour afficher le grand format) automatiquement si elle fait plus de 800 pixels dans une de ses dimensions. Pas de considération de la notion SPIP de « portfolio » ici (voir ci-dessus : c’est une notion qu’on devrait totalement abandonner je pense) : si une image est assez grande, elle est cliquable et puis c’est tout…

      On conserve la possibilité de faire un lien hypertexte « à la main » sur une image, même si je pense que l’usage a également plus ou moins disparu de nos jours (quand on clique sur une image, on s’attend plutôt à la voir en grand, pas à changer de page).

    • 6. Possibilité de forcer la largeur d’une image « à la main » :

      <img23|right|largeur=300>

      Noter que techniquement, dans ce cas on aura grâce au plugin image_responsive une gestion plus avancée du balisage, mieux adaptée au chargement anticipé des images, puisque ça va utiliser le srcset avec les valeurs 1x et 2x (pour le retina).

      7. Une subtilité javascript épatante ici : les images flottantes à droite ou à gauche, c’est très joli sur un grand écran, mais sur un téléphone ça détruit généralement complètement la maquette, parce qu’on met une image « flottante » de 250 pixels dans une colonne de 320 pixels, et qu’il reste du coup 70 pixels pour afficher le texte, et généralement c’est une catastrophe.

      Le plugin inclue donc un mécanisme #javascript qui vérifie la largeur des images flottantes et de la colonne de texte pour supprimer le float quand l’image devient proportionnellement trop large par rapport à sa colonne d’affichage (plus de 60% de la colonne de texte). Dans ce cas l’image est « forcée » en présentation centrée, avec sa légende, et on récupère un affichage optimal même sur petit écran.

      À l’inverse, on peut aussi se prévoir des styles pour les écran très larges (ça c’est pas directement dans le plugin, mais le balisage le permet facilement) :

    • 8. Option de présentation : rond : ça force l’image à s’afficher dans un cercle. Oui, tout rond. Même si l’image est un JPG, ça se fait en CSS, donc ça évite de recourir à un PNG dix fois plus gros.

      <img13|center|rond>

      Ça peut valoir le coup de l’associer à l’option largeur si on veut faire flotter une grande image à droite ou à gauche :

      <img13|left|rond|largeur=200>

      9. Trop mignon avec un navigateur récent : une image arrondie (avec rond) flottante forcera un habillage irrégulier par le texte : c’est-à-dire que le texte habillera le cercle de façon… circulaire, et non en rectangle. Ça se fait directement en CSS avec shape-outside. C’est automatique quand on utilise ˋrond`, pas besoin d’option supplémentaire.

      10. Extrêmement puissant : on peut demander un habillage irrégulier automatiquement sur les images JPG dotées d’un fond uni grâce à l’option shape. Attention, ça n’utilisera pas ma vieille technique de « tranches » (de image_ragged), mais sur la base d’un polygon calculé avec une nouvelle fonction : `image_detourer_polygon. Ça c’est carrément spectaculaire.

    • 11. Une petite animation rigolote : l’option flip permet de faire tourner l’image sur elle-même lorsqu’elle apparaît dans le viewport (en fonction du scroll, donc). Ça donne l’impression d’une pièce de monnaie qui tourne sur elle-même avant de s’arrêter pour s’arrêter :

      <img13|center|flip>

      ça devient encore plus fun si on force l’affichage dans un rond :
      <img13|center|rond|flip>

      ou carrément dans un rond flottant avec le détourage automatique :

      <img13|left|rond|flip|largeur=200>
    • 12. Et enfin l’animation la plus puissante : le zoom sur un détail de l’image (déterminé avec le plugin centre_image) :

      <img13|center|kenburns=1.6>

      Je pense qu’il faudrait renommer l’option simplement zoom, parce que personne n’arrive jamais à mémoriser ça…

      C’est une animation volontairement lente, mais alors : extrêmement spectaculaire… Et pour le coup, ça a généralement un véritable intérêt éditorial.

    • 13. Et enfin, la possibilité d’afficher plusieurs images sur une même ligne, avec adaptation aux différentes tailles d’écran, avec un nouveau raccourci : <ligne> :

      <ligne13>
      <ligne14>
      <ligne15>

      Ça c’est vraiment impressionnant… (en revanche, je n’utilises pas le même code HTML que pour les <img>, alors que je pense que je devrait le faire, pour profiter des raccourcis décrits précédemment).

      Noter qu’ici encore, s’il y a des titres, descriptifs et/ou crédits, ça s’affiche. Sinon, non.

      C’est à la fois très puissant, et assez déstabilisant, parce que la composition est automatique et… responsive. Du coup l’affichage dépend énormément des proportions des images et de la taille de l’écran. Du coup il faut réussir à se faire à l’idée que l’affichage sera variable, semi-automatique, et ne pas chercher à avoir des positionnements absolus qu’on décrète soi-même (ce qui est le « problème » de la mise en page responsive : il faut accepter que ça se recompose).

    • Bon, je dois m’absenter pour la journée, je compléterai avec des copies d’écran plus tard. Mais déjà, j’invite les Spipeurs•ses à jouer avec, parce que c’est un outil que j’installe sur tous mes sites, et qui change radicalement leur fonctionnement. Je suis très très très très preneur de retours à ce sujet.

    • Pas testé, mais sur le principe ça rejoint en partie le plugin Medoc de @tetue, en ajoutant le côté responsive.
      Mais il y a beaucoup de gadgets visuels : ça mériterait deux plugins distincts (un plugin = une fonction).

      Après, la « doc » et la discussion sur seenthis n’engagent pas vraiment la discussions avec la communauté #SPIP.

    • Ma remarque sur le lieu approprié pour le discussion est un peu sèche et pourrait être mal interprétée : pas d’arrière pensée de ma part, juste une remarque pratique sur le fait que tu « invites les Spipeurs•ses à jouer avec ».

    • @nicod_ : yep, attention à ne pas confondre évol d’affichage des modèles et débug ergo.

      1) Medoc n’est qu’un patch (grossier) qui corrige un bug ergo (hyper chiant quand on y confronté, totalement imperceptible pour les autres)
      2) et (plein) d’autres plugins proposent des variantes d’affichage des modèles, responsive ou pas, toussa, toussa…

      En tant que patch correctif, Medoc s’utilise avec n’importe lequel de ces autres plugins (dont il doit rester distinct).
      Il n’aura plus de raison d’être lorsque le « mode » (« image » ou « document ») aura disparu de la table spip_documents ainsi que ses implications (différence entre portfolio et hors portfolio)… chose que je suis infichue de savoir faire, d’où cet affreux petit sparadrap appelé Medoc ;)

      @arno : je suis ravie à l’idée d’essayer ton plugin prochainement :)

    • Merveilleux ! Super boulot, merci de le partager !
      Une remarque sur la notion d’image insérée sans légende, c’est en fait essentiel pour l’accessibilité de pouvoir définir un titre inséré dans le alt de l’image, mais qu’on ne tient pas à afficher en dessous de l’image en légende.

      Actuellement
      <img> insère l’image avec le titre en alt
      <doc> insère l’image avec le titre en légende en dessous

      Donc, dans la logique de ce que tu as fait, un paramètre |legend ou |nolegend serait pertinent, non ?

    • @tetue me suis mal exprimé, et trop vite.

      Je parlais de

      Fondamentalement, c’est une modification complète du fonctionnement du raccourci <img>

      qui est le côté très intéressant du plugin de @arno, et qui rejoint ta réflexion sur medoc.

      Avec l’ajout du paramétrage de largeur et le côté responsive, ça en fait un travail intéressant qui peut alimenter la réflexion sur la refonte de la gestion des docs dans SPIP (d’où ma remarque également sur le lieu pour en discuter).

    • Merci @arno , ce plugin a l’air très bien, et rempli de bonnes idées.

      Une remarque sur <ligneXX> : je vois* que cela crée autant de <ul> que de <ligne>. Est-ce qu’une syntaxe tel que <ligne|XX,YY,ZZ> ne serait pas plus appropriée, ce qui permettrait de n’avoir qu’un conteneur pour les 3 documents ?

      Le terme « ligne » en lui-même aussi est un peu flou, mais je n’ai pas d’idée là comme ça à part avoir une autre notion tel que <images|ligne|XX,YY,ZZ> , <images|cases|XX,YY,ZZ> peut être… ce qui deviendrait un « modèle d’affichage d’une liste de documents sélectionnés »

      * note : le modèle est ainsi fait, mais un pipeline enlève ensuite les ul en trop sur ces lignes…

    • Ah ou… si autant de balises <ligneXX> que de documents à afficher est conservé (plutôt que d’1 pour n documents), pourquoi ne pas utiliser plutôt <imgXX|ligne> ou <docXX|ligne> finalement directement ? ça paraîtrait bien également non ?

    • Sur <ligne>

      D’abord, je voudrais refaire le code de ce modèle pour qu’il utilise le même code que <img> pour l’affichage de l’image et des intitulés ; pour l’instant ce n’est ni le même code ni la même logique de fonctionnement, ce qui pose différentes difficultés :

      – les images de <ligne> s’affichent en background, ce qui fait qu’elles ne sont généralement pas imprimées et/ou difficiles à sauvegarder dans un PDF ; et autres petites difficultés d’utilisation quand les images sont des background…

      – le fait d’avoir deux codes à maintenir, c’est un peu chiant (c’est pas dramatique, parce que j’utilise énormément ce plugin, mais c’est chiant)…

      – j’aimerais bien avoir les mêmes fonctionnalités (notamment le zoom kenburns dans l’image) y compris sur les images en ligne…

      Du coup, utiliser carrément le même modèle avec <imgXX|ligne>, ça semble une bonne piste (surtout que ligne remplace exactement center, left et right dans leur logique de positionnement).

      Difficulté : je pense que certaines fonctionnalités n’ont rien à faire dans ligne (notamment forcer la largeur), et donc ça va commencer à faire du code un peu complexe.

      En revanche, je ne pense pas intéressant de fusionner la déclaration de plusieurs images dans le même modèle :
      – d’abord parce que c’est chiant à manipuler (quand on fait des articles, on déplace beaucoup les images, surtout qu’avec ligne ça demande des réglages parce que certaines associations fonctionnent moins bien que d’autres), et du coup le copier-coller d’une ligne pour une image, c’est plus pratique que d’aller éditer le modèle avec plusieurs images,
      – parce que je voudrais pouvoir passer des fonctionnalités différenciées sur chaque image (comme l’effet de zoom).

    • J’oubliais une option :

      14. Ça prend en compte l’option large :

      <imgXX|center|large>

      qui se contente d’insérer une classe .large. Ça ne sert pas à grand chose pour l’instant, mais c’est extrêmement utile dans un autre de mes plugins (pas diffusé pour l’instant), et chacun pourra de toute façon bidouiller ses feuilles de style soi-même : ça permet d’afficher cette image plus large que la colonne de texte.

    • Hello, :-)
      Je viens de faire un test de ton plug pour voir, j’ai un bug avec un SPIP 3.1.4-dev [23345] (php5.6.25), j’ai deux images dans la médiathèque que j’ajoute à un article, je mets donc <img2|left> <img1|left> avec du texte avant chaque image, si je clique sur l’onglet « voir » du porte plume, les images apparaissent et disparaissent d’un coup, quand à l’onglet « plein écran » du porte plume, je ne vois même pas les images, à savoir qu’il n’y a que ton plug et « image_responsive » dans les plugs. A savoir, il faut que je fasse plus de test, mais la première fois, comme il s’agissait d’un spip tout neuf, j’ai activé ton plug avant d’aller dans /ecrire/ ?exec=configurer_avancees et que le résultat, c’est que cette page plante (page blanche) avec juste le logo « infini » et l’url qui s’écrit /ecrire/ ?exec=configurer_avancees&action=tester_taille&i=1&arg=6000-6000 j’ai aussi pas mal de notice dans l’article, mais ça c’est pas grave, cela vient sans doute que dans mes_options, je demande à les voirs

    • Je pense avoir compris le problème, par contre, je ne sais si c’est un bug de spip ou du plug :-(
      Pour info, pour voir le problème, il est important qu’après l’installation d’un spip neuf, de ne pas faire le choix d’un type d’url dans /ecrire/ ?exec=configurer_urls , donc le laissé comme il est nativement, puis d’aller dans ecrire/ ?exec=depots pour faire l’ajout du dépôt de la zone, enfin, installer le plugin « medias_responsive_mod » en manuel dans le dossier « plugin » et laissé spip installer la dépendance « Filtre image_responsive », télécharger un jpeg dans la médiathèque, activer le plugin « medias_responsive_mod » et faire un article.
      Avec ou sans htaccess, il y n’y a pas de changement de mon côté

    • Salut @arno

      un souci rencontré avec image_responsive (je n’ai pas trouvé le seen dédié, donc je me permet de poster ici) :

      Sur un SPIP 3.0.3 avec uniquement ce plugin installé, j’ai cette erreur dans la console de Firefox :

      Et quand je regarde ce fichier dans local/cache-js, j’ai (ça donne un a circonflexe majuscule dans le source Firefox)

      Si je désactive la compression js dans l’espace privé, plus de problème.

      La ligne en question se trouve dans https://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/javascript/image_responsive.js#L311

      En regardant de plus près, il semble y avoir également un souci là https://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/javascript/image_responsive.js#L388 (carré de couleur rouge matérialisant une erreur ?)

      (Le fil sur spip_zone : https://www.mail-archive.com/spip-zone@rezo.net/msg43360.html )

    • Salut,

      Sur le point n°5 :

      Une image est cliquable (pour afficher le grand format) automatiquement si elle fait plus de 800 pixels dans une de ses dimensions.

      Ligne 37 du modèle img.html, il y a un test sur la taille pour utilise soit un <span>, soit un <a> mais, dans les 2 cas, il y a un href="#FICHIER" ce qui, dans le cas du span, crée une erreur de validation.
      Idem pour le type="#MIME_TYPE" (et pour les class et data-photo ?)

      cf : https://zone.spip.org/trac/spip-zone/browser/_plugins_/medias_responsive_mod/squelettes/modeles/img.html#L37

      Il ne faudrait pas tester si on a un lien ou un span avant de les insérer ?

  • Plugin E-learning
    https://contrib.spip.net/Plugin-E-learning

    La documentation/carnet SPIP du plugin elearning

    Dans le cadre d’une formation en e-learning, les professeurs utilisent déjà SPIP ainsi que certains plugins, pour mettre à disposition les cours. Le but est d’améliorer certains plugins existants, et de créer un nouveau plugin E-learning qui dépend de ces plugins et qui rajoutent de nouvelles fonctionnalités.
    Il existe déjà moult logiciels de e-learning en licence libre, mais ils sont trop gros pour l’utilisation qu’en font les professeurs sus-cités. Il ne s’agit donc pas de recréer toute une énorme infrastructure mais de développer des fonctionnalités de base qui s’intégreront dans ce qui est déjà utilisé actuellement

    A coupler avec https://contrib.spip.net/Plugin-Big-Brother si on veut les fonctionnalités de suivi des élèves (nbe de visites et temps passé sur les articles).

    #SPIP #documentation #elearning #plugin #big_brother

  • Je viens d’uploader un nouveau #plugin pour #SPIP : « Métadonnées Opengraph, Twitter et Facebook » :
    https://zone.spip.org/trac/spip-zone/browser/_plugins_/metas_opengraph

    Ça s’intègre dans le squelette article.html avec :

    <INCLURE{fond=metas_opengraph}{id_article}>

    Ça permet de fabriquer les « cartes » de prévisualisation dans Facebook et Twitter notamment :

    Les particularités :

    – ça ajoute deux champs aux auteurs, qui permettent de renseigner leur compte Twitter et leur compte Facebook, pour qu’ils apparaissent dans les « cartes » de ces réseaux ;

    – noter que pour Facebook, le méta article:author apparaît en double : le nom en clair et l’URL du compte Facebook ; c’est la solution que j’ai trouvée pour que ça fonctionne dans Facebook et dans d’autres réseaux qui exploitent OpenGraph mais, évidemment, pas les comptes Facebook (je crois que j’ai essayé avec Pinterest) ;

    – ça découpe « intelligemment » le logo de l’article pour que ça apparaisse de manière optimale dans les cartes de ces réseaux ; il faut les plugins image_responsive et centre_image, pour pouvoir recadrer en indiquant le « centre d’intérêt » du logo (ça évite de recadrer l’image n’importe comment).

    • yop, super merci, par contre récemment ya eu ça déjà, qui fait (pour le but, pas pour l’implémentation) exactement la même chose :
      https://contrib.spip.net/Metas-4845

      On va essayer de voir si ya pas des choses à fusionner…

      Après je vois bien que dans celui là ça utilise des trucs précis, des champs ajoutés, etc.

      Sinon pour le recadrage avec focus : quand ce n’est que pour avoir une image unique, il n’y a plus besoin d’avoir le plugin « image_responsive » à priori, puisque grâce à @marcimat le « image_recadre » fourni par la dist sait déjà le faire, y compris avec « focus », et donc compatible avec « centre_image » : |image_recadre{458:228, -, focus}

    • Sinon, je me suis tâté pour ajouter des valeurs globales (à régler dans les préférences du site) de façon à pouvoir ajouter des valeurs globales du site (pas seulement des auteurs) :
      fb:admins
      fb:app_id
      twitter:site

      Mais en fait je ne suis pas certain que ce soit réellement utile (les « cartes » semblent très bien fonctionner sans, et je ne sais pas bien à quoi ça servirait de les ajouter).

    • Sinon pour les informations, que ce soit pour le site ET pour les utilisateurs, j’ai plutôt tendance à penser que ça n’a rien à voir avec un plugin qui sert juste à ajouter des metas. Car c’est une info qui peut sert à bien d’autres choses (pour le site, afficher ces infos dans le site public, pour les utilisateurs, faire des liens ou je ne sais quoi).

      Pour le site, il y a déjà le plugin « Liens sociaux » qui fait ça :
      https://contrib.spip.net/Liens-sociaux

      Pour chaque utilisateur, d’après moi c’est plutôt à chaque plugin de réseau (le plugin Twitter, le plugin Facebook…) de permettre ces infos pour les utilisateurs, et donc suivant ce que le site va vraiment utiliser.

      Ensuite, le plugin qui ajoute les metas, peut parfaitement tester si ces plugins sont présents, et si les champs sont remplis, les utiliser pour ajouter des metas en plus. [(#PLUGIN{truc}|oui) Ajout]

  • 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