Le #plugin #tickets de #SPIP vient de recevoir une série de commits permettant d’intégrer une fonctionnalité demandée depuis longtemps : régler qui reçoit les notifications des tickets.
les commits courent de ▻http://zone.spip.org/trac/spip-zone/changeset/78724 à ▻http://zone.spip.org/trac/spip-zone/changeset/78735
#spip_blog
Version 4.11.0 du plugin #GIS pour #SPIP : On passe en Leaflet 0.7 + maj des plugins utilisés
Je continue avec mon #plugin #SPIP « Image responsive » :
– je sauvegarde la taille de l’image d’origine dans le code HTML (data-l, data-h) ; dans le Javascript, ça me permet d’éviter d’appeler des images à une dimension supérieure à l’image d’origine (ça marchait, mais ça fabriquait des fichiers identiques avec des noms différents) ;
– (si je ne me suis pas raté) je détruis l’image intermédiaire après l’avoir renommée (faudrait voir à faire « rentame », plutôt, tiens… mais en faisant gaffe à pas renommer l’image d’origine) ;
– si on a le mod Apache XSendFile (et correctement configuré) c’est désormais pris en compte et, au lieu de faire un readfile, l’action qui expédie l’image passe par X-SendFile. J’ignore à quel point ça va jouer sur la réactivité du scripte et/ou la charge du serveur. (Attention, le code à insérer dans le htaccess doit être modifié pour pouvoir utiliser XSendFile.)
Je colle ce lien, histoire de voir tes messages à la suite :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Administrer les plugins d’un site en ligne de commande - Le blog Nursit
►http://blog.nursit.net/Administrer-les-plugins-d-un-site.html
Deux scripts PHP utilisables en ligne de commande qui permettent de voir les plugins actifs, et d’activer ou désactiver les plugins d’un site avec quelques petites options bien utiles.
=> cf plugin [spipenconsole->▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/spipenconsole/trunk/paquet.xml]
#spip #serveur #administration #plugin #script #bash #commande
Amélioration de mon #plugin #SPIP image_responsive : introduction d’une fonction image_reduire_net (qu’on peut extraire, parce qu’elle est très générique) : elle réunit dans une seule passe les 3 fonctions graphiques dont j’ai besoin dans ce plugin :
– elle effectue la réduction (équivalent à image_reduire)
– elle fait passer un filtre de netteté selon la taille de l’image (équivalent à image_renforcement, mais en utilisant la nouvelle fonction imageconvolution de PHP 5.1, certainement beaucoup plus rapide)
– et sauvegarde directement à la qualité désirée (puisque sur Retina je sauvegarde une image très compressée).
Du coup, on doit gagner en temps de calcul mais, surtout, en qualité d’image finale, puisqu’au lieu de 3 sauvegardes JPEG successives je n’ai plus besoin que d’une seule.
Note : je continue à sauvegarder une version renommée de l’image finale, pour éviter de lancer la cavalerie de _image_valeurs_trans à chaque hit sur l’image.
Énaurme modif sur mon #plugin #SPIP « Image responsive » (oui, je suis content) :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Ça concerne le chargement des images sur écran haute définition (Retina chez Apple, mais je teste actuellement avec un Nexus 7).
Sur un écran « normal », en admettant qu’on affiche l’image sur 512 pixels de large, le plugin va charger l’image « xxx-resp512.jpg » :
Si on a un écran haute définition (densité 2), le javascript précédent chargeait la même image, mais en 1024 pixels de large « xxx-resp1024.jpg » (512x2) :
J’ai déjà évoqué ces deux buts contradictoires des images reponsives :
– ne plus charger les grandes images quand on est sur petit écran, parce que ça ne sert à rien (généralement, sur smartphone avec connexion lente),
– mais aussi, pouvoir charger les images en haut définition sur écran haute définition. Malheureusement, le plus grand nombre d’écrans haute déf pour le moment, ce sont les smartphones.
Donc sur smartphone, on a connexion (plutôt) lente et écran haute définition, du coup on charge des images plus grosses là où on pensait en charger des plus légères.
La solution : si écran haute définition, alors je charger bien une image de 1024 pixels, mais en compressant le JPEG de manière beaucoup plus importante « xxx-resp512-2.jpg » :
Par défaut, les images JPEG traitées par SPIP sont sauvegardées avec un taux de compression de 85%, de façon à avoir de belles vignettes. Avec un taux de 50%, on gagne donc énormément en poids de fichier. Mais évidemment, on détruit largement la qualité de l’image. Sauf qu’ici, on affiche l’image sur un écran haute définition : l’œil est à ce niveau de définition incapable de percevoir la différence.
Note : la compression à 50% n’est appliquée que si l’image d’origine est suffisamment grande par rapport à la taille cible. Avec le plugin, il n’est pas rare qu’on n’affiche finalement pas une image beaucoup plus grande que ce qu’on ciblait à l’origine (si mon image d’origine fait 800 pixels de large, que je l’affiche sur 600 pixels de large sur un écran Retina, je ne pourrai évidemment pas expédier d’image de 1200 pixels sur-compressée… donc dans ce cas je ne sur-compresse pas pour éviter que la dégradation ne devienne perceptible).
Alors, ça ressemble à la logique des « compressive images » :
▻http://filamentgroup.com/lab/rwd_img_compression
l’article prétend qu’une image sauvegardée à un taux JPEG de 10%, affichée deux fois plus petite, est perçue comme de même qualité qu’une image sauvegardée à un taux normal. C’est peut-être vrai quand on affiche cette image sur un écran « normal » (l’image est à nouveau lissée par le fait qu’on affiche 4 pixels de l’image d’origine en un seul à l’écran) ; mais sur écran haute définition, c’est très perceptible, et on perd à mon avis carrément l’intérêt de balancer une image haute définition sur un écran retina.
Bon, c’est en fonctionnement sur OrientXXI :
►http://orientxxi.info
Sur écran « normal », il n’y a logiquement aucune différence. En revanche, sur écran haute définition, on charge des images visiblement beaucoup plus « nettes », « définies » (« sharp »), parce qu’avec quatre fois plus de pixels, mais quasiment de même poids (environ un tiers de plus, alors que dans la version précédente, l’écran Retina provoquait le chargement d’images 7 fois plus lourdes…).
Je trouve que ça commence à devenir sympa.
(Pour ceux qui avaient déjà installé/testé le plugin, penser à remodifier le fichier .htaccess, la redirection a été modifiée.)
De-anonymizing users of French political forums:
▻http://archive.hack.lu/2013/dbongard_hacklu_2013.pdf #privacy
TL;DR : #Gravatar leaks #email adresses.
Anyway, why does anyone expect #pseudonymity when registering with a personal email address ? Depressing stupidity.
By the way, this is not a new attack - see ▻https://web.archive.org/web/20111219233019/http://rgov.org/2010/11/27/gravatar
Et hop, 3h après avoir eu l’info, chez SPIP, on empêche la fuite :
▻http://zone.spip.org/trac/spip-zone/changeset/77751
Bravo Cédric. :)
Pour le prochain #spip_blog.
Nan il a été enlevé immédiatement après, commit suivant.
Que celui qui n’a jamais oupsé, lui jette… :)
Ajout à mon #plugin #SPIP image_responsive, une fonction |image_proportions
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Par exemple :
[(#LOGO_ARTICLE_NORMAL|image_proportions{16,9})]L’intérêt par rapport à image_recadre, c’est qu’il s’agit ici de modifier retailler l’image sans en diminuer la taille à des dimensions arbitraires, mais de conserver l’image aussi proche de sa taille initiale que possible.
C’est rendu nécessaire et utilisable par le principe même du plugin image_responsive, qui va ensuite charger l’image à la taille qui va bien dans tous les cas.
Non. L’aspect responsive n’a pas besoin qu’on formate spécifiquement les images. Au contraire, le plugin permet qu’on balance les images d’origine sans faire trop attention.
Mais à l’inverse, pour faire maquette sympa, c’est vraiment plus efficace si on se force à avoir des vignettes de navigation de mêmes proportions (par exemple 16/9, mais ça peut être 4/3, 1/1, ce qu’on veut…). Voir la page d’accueil d’Orient XXI, les vignettes sont toutes recardées aux mêmes proportions :
►http://orientxxi.info
Pour ça, habituellement, on recadre les images directement aux dimensions prévues, genre :
[(#LOGO_ARTICLE
|image_passe_partout{300,200}
|image_recadre{300,200}
)]Mais avec le plugin image_responsive, je n’ai plus besoin de savoir la dimension finale de l’image, parce que c’est le plugin qui va charger l’image dont il a besoin. Et même potentiellement la largeur de l’écran d’un smartophone, à double définition.
Donc c’est pas la peine de s’embêter à calculer avec le redimensionnement de l’image en amont : tu balances l’image complète directement, ça chargera juste ce qui est nécessaire selon la maquette la définition de l’écran.
[(#LOGO_ARTICLE
|image_responsive
)][(#LOGO_ARTICLE
|image_proportions{300,200}
|image_responsive
)]C’est donc un confort lié à ce que fait ce plugin :
– comme il va chercher l’image à la bonne taille tout seul, il n’est plus nécessaire de réduire les images dans le squelette ; ça laisse d’autant plus de latitude pour différentes situations et les écrans retina ;
– mais dans le même temps, j’ai l’habitude de recarder les images pour forcer des maquettes plus typées.
Donc là j’en profite pour recadrer sans réduire, parce que c’est le plugin qui fera le reste du travail selon les situations.
C’est bien sympa et générique, ça mériterait d’être ajouter au plugin dist « filtres_images » (qui est indépendant du core, donc qui a son propre cycle de vie désormais, à peu près).
Dans :
▻http://zone.spip.org/trac/spip-zone/browser/_core_/branches/spip-3.0/plugins/filtres_images
Et dans :
►http://zone.spip.org/trac/spip-zone/browser/_core_/plugins/filtres_images
C’est déjà dans le plugin « CSS imbriqués » (version 1.6) :
►http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-pre-processeur-de-css
1.6. Introduction de la fonction couleur_rgba($couleur, $alpha) qui permet de fabriquer une couleur RGBA à partir d’un code hexadécimal.
Il me semblait bien que je l’avais vue quelque part sur Paris Beyrouth
C’est à dire @Fil ?
Sur un de mes sites j’ai fait une série de tests sur la largeur et la hauteur pour afficher l’image en pleine largeur si elle est en paysage et assez grande et dans une colonne si elle en portrait ou trop petite. Je m’étais bien pris la tête.
Suite à l’observation de @rastapopoulos j’ai ouvert ▻http://core.spip.org/issues/3144 pour garder une trace du besoin.
b_b me dis de l’ajouter moi même mais je ne sais pas coder moi :-)
Quelques nouveautés pour mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Que l’on utilise par exemple ainsi :
[(#LOGO_ARTICLE_NORMAL|image_responsive{160})][(#LOGO_ARTICLE_NORMAL|image_responsive{160,0})][(#LOGO_ARTICLE_NORMAL|image_responsive{0,0})]Comme il fonctionne bien, je l’ai désormais systématisé sur Flip-Zone :
►http://www.flip-zone.net
Si l’on affiche le site avec plusieurs tailles d’écran, on pourra voir que les images qui sont chargées sont de tailles différentes.
Les deux nouveautés :
– la première variable désigne la taille de l’image par défaut ; a priori, on choisit la taille minimale d’affichage (sur mobile) ; on peut désormais fixer cette valeur à 0, et dans ce cas l’image par défaut sera « rien.gif » ; au chargement de la page, donc, rien ne se déclenche, on ne charge les images que via javascript. C’est pratique si, comme sur Flip-Zone, on peut avoir des dizaines d’images sur la page ; dans ce cas, limiter le nombre de hits est sensible.
– la seconde variable est optionnelle, et la seule option est de la mettre à zéro. Si on la fixe a zéro, cela signifie qu’on ne chargera pas les images en haute définition (écran Retina…). En effet, l’intérêt des images responsive est double : (a) charger l’image en fonction de la maquette dans laquelle elle s’affiche à l’écran (selon la taille de l’écran, une image s’affichera par exemple sur 70 pixels de large, 160 ou 524 pixels…) ; (b) charger une image de double définition si on détecte qu’on est sur un écran haute définition (dans ce cas, on a une maquette qui affiche l’image sur « 70 » pixels, mais on affiche une image de 140 pixels puisqu’il y a deux fois plus de points affichés).
Les deux objectifs sont parfois contradictoires :
– le point (a) permet de limiter la taille des images chargées sur petit écran,
– le point (b) force à charger une image deux fois plus larges, donc avec 4 fois plus de pixels, sur affichage à haute définition (souvent des smartphone…).
Du coup, on peut décider que certaines images se chargent à leur taille d’affichage, mais sans prendre en compte le fait qu’on est sur écran haute définition. Le but du plugin dans ce cas est, essentiellement, d’accélérer l’affichage sur le site.
Sur Flip-Zone, toutes les vignettes de navigation, qui sont des images, restent en définition normale ; certes ça se voit, mais comme ce sont des photos, je pense que c’est très acceptable vu le poids gagné sur smartphone (la situation de connexion la pire). En revanche, le logo du site, lui, se charge en haute définition sur écran haute déf… parce que c’est une image qui n’est pas très lourde, et parce que c’est un lettrage, dont l’affichage est très sensible à la haute définition.
Cédric vient de publier un blog autour des logos d’articles responsive , en particulier pour #SPIP :
▻http://blog.nursit.net/images-logo-responsive-web-design.html
Il propose un filtre qui fait le job :
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/z-core/zcore_options.php#L50
Un nouveau #plugin pour #SPIP, destiné à gérer des images en #responsive : Image Responsive
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Le plugin est actuellement installé sur Orient XXI :
►http://orientxxi.info
Pour se faire une idée des problématiques :
▻http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution
Aucune des solutions évoquées ne me plaît, et je me suis dit qu’on a déjà dans SPIP ce qu’il faut pour s’en sortir, du coup voici une solution qui me semble intéressante.
Notez que je suis particulièrement intéressé, ici, par des retours et des commentaires. C’est une solution très expérimentale (je l’ai codée aujourd’hui), et comme elle est du coup directement intégrée à SPIP, je pense que c’est une piste très intéressante à développer.
Le problème à résoudre :
– en responsive, selon la taille de l’écran, une image va s’afficher en différentes tailles ; sur la page d’accueil d’Orient XXI, c’est même très important (une même image s’affiche sur 160 pixels de large ou 460 pixels de large selon l’écran) ;
– de plus, sur un écran haute définition, il faudrait afficher des images encore deux fois plus grandes.
Du coup, dès qu’on commence à faire du design responsive, on a tendance à charger des images plus lourdes que ce qu’on va réellement afficher. Et ça commence à peser sur une connexion mobile pourrie.
Noter que c’est un aspect désormais lourdement pénalisé par le calcul du PageSpeed.
Ma solution avec ce plugin :
– on fait passer une image (ou, si je ne me suis pas raté, un texte complet contenant plusieurs images) par le filtre |image_responsive{120}
– cela va modifier le tag <img> :
+ le src va appeler une version réduite de l’image (ici, à 120 pixels de large),
+ l’image d’origine (celle qui est donc dans la version initiale du src) est stockée dans un data-src
+ j’ajoute une classe « image_responsive » à l’image.
Initialement, quand on charge la page, on va charger une version déjà réduite de l’image et, idéalement, on indiquera la taille d’affichage pour smartphone.
Une feuille de style est associée au plugin, qui force l’affichage de toutes les images de classe .image_responsive à 100% de la largeur. Attention, c’est le point vraiment important et un peu contraignant : c’est le conteneur de l’image (par exemple un <span class="logo"><img></span>) qui va déterminer la largeur d’affichage de l’image, parce que de toute façon l’image sera affichée sur 100% de cet espace. (La feuille de style va donc styler .logo éventuellement de manière responsive…)
Une fois la page chargée, un javascript va scanner chaque .images_responsive, récupérer la largeur à laquelle elle est affichée, éventuellement multiplier par la densité de l’écran (2 pour un écran retina), et remplacer l’image par la version de cette nouvelle largeur.
On charge donc une vignette, puis on remplace par une version de l’image à la taille exacte d’affichage.
L’idée c’est de faire du responsive, pas du fluide. Si votre image peut s’afficher en 1000 largeurs différentes, ce plugin va finir par fabriquer 1000 fichiers graphiques différents, ce qui n’est pas forcément génial…
– Assez simplement, là où mettait un [(#LOGO_ARTICLE_NORMAL|image_reduire{320})]
on met maintenant un :
[(#LOGO_ARTICLE_NORMAL|image_responsive{120})]
(en considérant, par exemple, que 120 est la taille d’affichage usuelle de cette vignette sur un smartphone).
Le reste des automatismes du système se charge automatiquement via le #INSERT_HEAD, donc il n’y a rien à faire, si ce n’est vérifier que les CSS sont adaptées pour forcer le dimensionnement du conteneur de l’image plutôt que l’image elle-même.
– Important : si votre site repose sur le .htaccess (URL sans query string), il faut absolument y insérer une ligne supplémentaire. Cela permet de traiter les images derrière des URL de fichiers JPG, ce qui devrait faciliter les mises en cache.
Avec ça, le score PageSpeed de la page d’accueil d’Orient XXI est passée de 76/100 à 94/100. Et l’impression de vitesse sur smartphone est très très nettement améliorée.
Pour info, sur le thème Responsive + Performance, Cédric a aussi commencé un plugin ayant peu ou prou le même but, pour l’instant complètement expérimental, en suivant des propositions d’articles traitant de ce sujet :
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/respim/trunk
Je viens de tenter de l’utiliser sur un site qui se trouve sur un hébergement Gandi : gros soucis (inutilisable). Les images ne se chargent le plus souvent pas, sauf si on force leur chargement. Je suspecte qu’il y a quelque chose à ajouter dans les headers que j’expédie au client, mais là ça me dépasse un peu. Surtout, c’est derrière un Varnish de Gandi dont la configuration est un secret d’État, ce qui n’aide pas (alors que sur mon serveur à moi, j’ai aussi un Varnish, et il n’y a aucun problème).
Cédric vient de publier un blog au sujet de sa solution pour des logos d’articles responsive ▻http://seenthis.net/messages/185485
@arno Comment se comporte ton plugin après quelques jours ? As-tu percé les Mystères de Varnish et Gandi ?
Sur Gandi, c’est un site en prod, alors je ne peux pas trop trop bidouiller, et en plus je suis un peu débordé pour y consacrer trop de temps.
En revanche, ça tourne désormais sur la partie Lingerie de Flip-Zone, et là j’ai aussi un Varnish (vu que les images sont désormais des scripts PHP, c’est particulièrement conçu pour être derrière un Varnish)
►http://en.dentell.es
et ça ne semble pas poser de soucis. À l’instant, j’ai viré le cache du site pour forcer le passage de quasiment toutes les images en responsive, alors ça va ramer un peu et certaines images ne vont pas venir le premier coup, mais je pense que d’ici quelques heures ça reprendra son rythme de croisière.
Noter : je viens de poster des modifications sur la Zone :
– on peut désormais choisir |image_reponsive{0}. La valeur zéro indique qu’on ne veut charger de vignette dans le src de l’image. À la place, ça charge rien.gif ;
– corrigé le bug des images verticales (pourtant, les image_reduire, j’ai l’habitude…).
►http://en.dentell.es fait planter mon iceweasel 20. J’ai pas flash installé.
Je n’utilise pas Flash. (En dehors des pubs Google.) Est-ce que ►http://www.flip-zone.net te plante aussi ? (Sur Flip-Zone, le plugin n’est pas installé.)
Salut,
une petite explication de Cédric sur la liste Zone sur la différence entre vos 2 plugins ( Image Responsive et Adaptive Images ) :
▻http://article.gmane.org/gmane.comp.web.spip.zone/35142
Je me disais que ça serait intéressant de l’avoir là pour éclairer les choix vers l’un ou l’autre...
Bonjour,
en test (sur 3.0.20) de ce plugin bien pensé comme toujours.
Seulement... un soucis.
la fonction image_proportions fonctionne parfaitement, le plugin est donc bien installé, le htaccess aussi.
Il y avait dans le squelette
[(#LOGO_ARTICLE|image_reduire{200,200})]
La css stylait correctement img.spip_logos en width=200px ;
je l’ai transformé en [(#LOGO_ARTICLE|image_proportions{1,1}|image_responsive{200})]
Or, à l’affichage, le logo s’affiche pixellisé en 650x650 (100%page), donc le conteneur de l’image est mal stylé.
Est-ce qu’il faut mettre le #LOGO_ARTICLE dans une div à part, où est-ce que normalement, le style spip_logos est conservé ? (je ne trouve pas dans le code généré de classe paticulière à l’intérieur de <picture>)
merci d’éclairer un peu mon chemin...
Et hop, une nouvelle version du plugin #gis pour #spip :
▻http://zone.spip.org/trac/spip-zone/changeset/77121
Au menu : mise à jour des libraires utilisées + ajout d’une nouvelle couche #OSM H.O.T. ▻http://openstreetmap.fr/nouveau-rendu-humanitaire ping @ybon :) + le mode fullscreen fonctionne aussi sous ie maintenant (pseudo fullscreen).
#spip_blog ?
Je viens d’installer sur #spip-zone un #plugin #SPIP que j’utilise systématiquement pour mes sites en #HTML5 et #responsive : HTML5 responsive
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/html5_responsive
Il s’agit d’une petite trousse à outil des choses dont j’ai systématiquement besoin lors du démarrage de squelettes HTML5 et responsive. (Si on ne veut pas faire de responsive, ce n’est pas une bonne idée d’installer ce plugin.)
Une fois activé, le plugin ajoute directement ce qu’il faut dans #INSERT_HEAD, il n’y a rien à faire de spécifique dans les squelettes.
– D’abord, intégration de html5shiv (pour activer la prise en compte des balises HTML5 par internet explorer), et de css3-mediaqueries (pour la prise en compte des #mediaqueries par internet explorer).
– Insertion des meta-tags habituels pour un site responsive :
+ définition du viewport (attention : j’ai l’habitude d’interdire le zoom sur mes sites responsive, parce que souvent j’ai besoin de pouvoir utiliser les gestures pour autre chose dans le site – bon, si on a besoin, c’est facile à désactiver) ;
+ refuser la détection des numéros de téléphone, ça m’a toujours posé plus de soucis qu’autre chose ;
+ activer la possibilité de transformer le site Web en webapp.
– Pour l’aspect Webapp, intégration d’un petit script perso qui transforme tous les liens internes du site en action javascript, ce qui fait qu’on peut naviguer entre les pages du site sans cliquer la Webapp (sans cela, dès qu’on suit un lien du site, ça lancerait Safari).
– Comme c’est chiant à faire à chaque fois, j’intègre le meta du charset systématiquement à cet endroit.
– Et quelques lignes de CSS…
+ désactiver la « correction » de la taille des caractères ; c’est logique sur un site qui n’est pas optimisé, mais en responsive c’est pénible ;
+ tiens, désactiver le zoom sous Internet Explorer ;
+ forcer le lissage des images réduites sous IE7, parce qu’en responsive on le fait souvent.
+ et puis mes minimums : pas de marge pour le body, et pas de cadre autour des images. C’est pas directement lié au responsive, mais ce sont les seuls choses du genre « reset » que j’utilise systématiquement (je n’utilise jamais de reset.css).
Je sais qu’il y a déjà des choses dans la Zone, mais c’est un vieux truc à moi que j’utilise absolument tout le temps, et qui est bien pratique. Alors autant le partager.
(attention : j’ai l’habitude d’interdire le zoom sur mes sites responsive, parce que souvent j’ai besoin de pouvoir utiliser les gestures pour autre chose dans le site – bon, si on a besoin, c’est facile à désactiver) ;
OOOOoooooh ooouuuuh ouuuuuuh
Tu sais, quand on montre du doigt et qu’on dit « ouh ouh ». Enfin nous en maternelle on faisait ça.
Ah, je dois avoir honte, donc ? :-)
Bon, c’est pour cela que je le signale explicitement, parce que je sais bien que ce n’est pas ce qu’on fait normalement. Mais je le justifie : j’utilise le zoom pour autre chose.
Par exemple, sur Flip-Zone, si j’accepte le zoom dans la page, la navigation dans les collections ne fonctionne plus du tout :
▻http://www.flip-zone.net/fashion/ready-to-wear/fashion-houses-42/basil-soda-4242
Sur Orient XXI, le zoom doit être détecté pour zoomer la carte, pas la page :
►http://orientxxi.info/cartographie/palestine-janvier-2000,0346
Pour la Chapelle d’Écouen, pareil, si on zoom dans la page HTML, l’animation devient totalement incompréhensible :
▻http://www.musee-renaissance.fr/chapelle/tour3.html
Donc j’en ai un besoin légitime, et je préfère l’avoir par défaut, pour moi c’est plus facile de le sucrer que de devoir retrouver ce qu’il faut ajouter sinon (le code n’est pas évident évident, c’est une CSS peu connue dans IE…).
Je comprend tout à fait la logique de ton truc mais j’avoue que quand je peux pas zoomer ça m’énerve autant que quand certains trucs sont désactivés (type clic droit ou copier)…
@nidal a annoncé le lancement du site @OrientXXI la semaine dernière :
▻http://seenthis.net/messages/180554
C’est donc là :
►http://orientxxi.info
Comme c’est bibi qui l’a fait, un petit coup de #shameless_autopromo pour détailler quelques aspects techniques…
– C’est évidemment du #SPIP_3, #HTML5 et #responsive. Donc évidemment, je travaille avec mon plugin « CSS imbriqués » :
►http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-css-imbriques-pre
– L’un des aspects que j’ai pu beaucoup plus travailler que d’habitude, c’est la typographie des textes des articles. C’est drôlement gros (de base sur mon ordinateur : 19px), et c’est rend la lecture à l’écran vraiment fluide. Sur tablette, je trouve que c’est carrément épatant.
– Pour l’occasion, j’ai aussi pas mal bossé les tags meta destinés à informer les réseaux sociaux du contenu de la page. Les petits pavés qui apparaissent sur Twitter et Facebook quand quelqu’un partage un article sont vraiment attrayants.
– Le pavé « Lire aussi » dans la colonne de droite des articles est totalement automatique : c’est un calcul basé sur les mots-clés utilisés par chaque article. Ça marche pas mal pour créer de la navigation transversale.
– Je fais passer mon plugin « Détecter langue » (conçu initialement pour Seenthis) sur les textes, cette fois paragraphe par paragraphe, pour pouvoir publier des articles multilingues (avec de l’arabe, ça devient indispensable) :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/plugins_seenthis/detecter_langue
On peut le voir à l’œuvre par exemple sur ce poème traduit de Mahmoud Darwich :
►http://orientxxi.info/magazine/mahmoud-darwich-for-ever-le-discours-du-dictateur-0328
– Sur ce site, je force le retour chariot façon SPIP 2 (il faut sauter deux lignes) ; parce que plus ça va (depuis que je suis sur SPIP 3), plus je constate que laisser le retour à la ligne simple sur un site éditorial conduit rapidement à la catastrophe.
– Pour le pavé de Une (fond bleu) de la page d’accueil, une sélection manuelle grâce avec mon vieux plugin « Sélection d’articles » :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/selection_d_articles
– Comme expliqué par @nidal, le site intègre directement le flux Seenthis du groupe (via l’importation de RSS de SPIP) :
►http://orientxxi.info/au-fil-du-web
– J’utilise mon vieux plugin « Lire aussi » pour pouvoir créer des « Dossiers » :
►http://orientxxi.info/magazine/oslo-20-ans-apres,0345
(donc, bien comprendre : sur ce site le pavé « Lire aussi » du site public se construit automatiquement ; le plugin « Lire aussi » n’est pas utilisé pour créer ce pavé, mais pour constituer des « Dossiers » éditoriaux)
– Dans la rubrique « Cartographie », j’affiche des cartes géantes zoomables de @reka, l’interface fonctionnant avec #leaflet.js. Ajout : un véritable mode plein écran (#fullscreen_api du HTML5, avec alternative en position:fixed pour les navigateurs qui ne l’acceptent pas). En revanche, par rapport à @fil, je n’ai pas de script coté serveur pour fabriquer les briques graphiques des cartes, j’utilise directement Zoomify et j’installe les briques sur le serveur.
Le détail sympa : la carte est consultable seule dans sa page :
▻http://orientxxi.info/cartographie/egypte-bassin-du-nil
mais il y a de plus un modèle SPIP pour intégrer la carte dans le texte d’un article :
►http://orientxxi.info/magazine/tensions-autour-du-nil,0297
(et ça c’est carrément cool).
C’est classe d’avoir ce genre d’explications sur des sites. Deux-trois retours :
– +1 pour la question des retours lignes. C’était un peu embêtant avant, fallait s’y faire, mais maintenant sur Spip 3 c’est pire :p
– Pour les réseaux sociaux, le rendu est top, cf ▻https://twitter.com/OrientXXI/status/387504642331901952
– moi aussi je veux un bouton de partage vers Seenthis. C’est le bouton pour navigateur intégré sur le site, c’est ça ?
– au niveau typo, je pense qu’on gagne vraiment à remplacer les dernières Arial qui traînent.
– sur la page d’accueil, les trois colonnes ça fait très classe, mais le web ne sait toujours pas justifier du coup ça éclate le texte chez moi. A l’inverse, j’aime beaucoup la page magazine non justifiée.
– le corps 19 pour le texte, ça fonctionne bien, mais par contre le corps 26 pour le chapô, c’est un peu trop gros pour moi.
– j’ai pas compris l’intérêt du plugin « lire aussi » pour constituer des dossiers éditoriaux par rapport à un groupe de mots-clés spécifique.
– le mode plein écran pour les cartes est vraiment impressionnant, et les cartes dans les articles sont bien aussi. Ca pourrait bien intéresser sous-surveillance. Manque peut-être juste un bouton pour revenir à une taille optimale dans le bloc quand t’as déjà zoomé.
Merci en tout cas pour les infos, joli boulot !
#spip_blog
Sur « Lire aussi » et les « Dossiers »…
– D’abord, tu dois savoir que je suis persuadé (de manière quasiment religieuse désormais) qu’il ne faut jamais utiliser les mots-clés pour gérer des statuts éditoriaux. La seule utilisation viable des mots-clés, c’est la thématisation.
À chaque fois que j’ai vu (ou qu’on m’a obligé à le faire) des mots-clés utilisés pour gérer la page de Une, la colonne de droite, les trucs qu’on fait apparaître plus gros… ça rend le site vraiment bordélique à gérer.
– Donc ici, oui, il y a des mots-clés, mais ce sont bien des mots-clés thématiques. Par exemple, les Accords d’Oslo :
▻http://orientxxi.info/accords-d-oslo
Mais il faut bien voir que les mots-clés, ce sont des thèmes « ouverts » : à tout moment quelqu’un peut ajouter tel mot-clés à tel nouvel article, et donc la page « Accords d’Oslo » évoluera selon ces ajouts.
– Ce dont j’avais besoin ici, c’est de créer des « Dossiers » figés. Un objet éditorial regroupant plusieurs articles, qu’on n’enrichira plus par la suite.
Donc pas des mots-clés. Sinon ça veut dire qu’on a un groupe de mots-clés dédiés à cela, et qu’on fabrique un mot-clé à usage unique pour chaque « Dossier ». Pour moi, c’est clairement un détournement des mots-clés, destinés à faire des manipulations éditoriales.
Ça n’est pas le pire détournement possible, mais c’est à éviter.
– Le plugin « Lire aussi » est explicitement destiné à gérer ces regroupements, au lieu de créer des « mots-clés à usage unique ». Il est construit sur le même principe que les liens de traduction : il y a un article de référence, et les articles qui lui sont liés. Dans chaque article concerné, je vois la liste des articles liés, et quel est l’article de référence.
Du coup, ici, c’est facile : l’article de référence est considéré comme la porte d’entrée du dossier (ce ne serait pas facile à faire avec des mots-clés), et je pourrais aussi décider de ne plus intégrer les articles secondaires du dossier dans la navigation, ou de manière différente (je n’ai pas fait ça, mais c’est une possibilité).
Coucou,
Plein de belles choses. Mignon la petite image « dossier » qui se colle sur le logo de l’article d’accueil du dossier.
Quelques bugs ou remarques :
– le logo est un peu pixélisé sur les autres pages que la page d’accueil (ff20/linux)
– quand y’a pas de logo pour les articles dans les listes de « Lire aussi », ça fait un peu bizarre. ici par ex : ▻http://orientxxi.info/magazine/barack-obama-et-hassan-rohani,0381
– c’est peut-être voulu, mais chez moi les thèmes ne sont pas stylés. Ça me fait penser aux sites de journaux américains, qui raffolent de liens bleus ►http://www.nytimes.com
Une petite question. Comment sont fabriquées les url ? Le numéro à la fin, c’est pour google (j’ai un vague souvenir que google demande un nombre unique pour chaque page dans l’url) ?
C’est super de présenter ses réalisations de sites et leur entrailles. Ça devrait être une rubrique sur le blog de SPIP ou sur spip-contrib, pour inviter tout le monde à le faire.
Pour les URL, c’est un bout de code trouvé je crois sur Contrib, mais je ne sais plus où. Dans mes_options.php :
▻https://gist.github.com/anonymous/6899027
Ah si, retrouvé, c’est là :
▻http://contrib.spip.net/Optimiser-les-URLS-pour-google-actus
Hop @arno pour info il existe un plugin leaflet.fullscreen fait par un ty gars sympa sur github ;)
▻https://github.com/brunob/leaflet.fullscreen
Et depuis hier, il gère aussi du pseudo fullscreen pour les vieux navs.
@arno oui c’est un truc « rapide » qui marche, mais du coup :
1) je trouve que ça enlaidie les URLs pour une histoire uniquement technique (en plus même pas pour un standard reconnu mais juste pour faire plaisir à une entreprise particulière)
2) si jamais le site a des objets éditoriaux différents (article, rubrique, événement, patate) : deux objets peuvent avoir le même nombre donc il n’est pas unique (ce qui normalement fait partie de la demande).
Lorsqu’on ne veut pas modifier ses URLs, la solution est de fournir à Google un sitemap particulier, propre à #Google-News. Il y a quelques obligations à respecter, et possiblement des infos en plus quand on les a sous la main (voir la doc).
▻https://support.google.com/news/publisher/answer/74288?hl=fr
J’ai fait ça dans un mini-plugin tout con qui ajoute ça au robot.txt de SPIP et qui fournit un « sitemap_news » basique qui fonctionne. On peut le surcharger ensuite chez soi si on a plus d’infos à y mettre.
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/sitemap_news/trunk
@arno : merci, je vais tester. Sur Rebellyon, les articles en manchette ont le mot-clé « manchette », ceux en « une », le mot-clé « une ». Et quand on a beaucoup d’articles sur un même sujet, on crée un mot-clé de dossier. Tout cela fonctionne, mais c’est pas forcément aisé à transmettre comme fonctionnement.
Je pense qu’il faut créer ou améliorer un plugin pour ces besoins, car il y a de plus en plus de sites où il y n’y a pas que les « articles » comme objets éditoriaux.
Par exemple pour le besoin de « mettre en une » (que ce soit pour l’accueil complet ou l’accueil d’une rubrique), si on veut mettre en avant des articles et des événements dans la même liste, c’est galère. Ou même si on a un site composé presque que d’événements (un site culturel par ex) et que c’est ça le contenu éditorial principal du site.
Bref, ce type de plugin devrait être agnostique au niveau des objets à manipuler.
Pour gérer les Unes, j’utilise généralement deux solutions :
– la plus efficace et agréable à gérer, ce que je fais sur ce site-là, c’est le plugin « Sélection d’articles » ; c’est rapide, ça marche bien…
– quand le site est plus compliqué, et que justement il faut pouvoir mettre en page d’accueil un peu tout et n’importe quoi (des articles, des rubriques, des « événements », des calendriers, des formulaires d’inscription à des trucs…), je fais dans le lourd : une « rubrique technique » (dont je fais généralement commencer le nom par un dièse), avec éventuellement des sous-rubriques (si la page d’accueil est très structurée), et là-dedans on installe des articles virtuels (des articles qui pointent directement vers une autre URL). C’est encore avec ça que j’ai les résultats les plus puissants et le plus de liberté, même si c’est assez contraignant.
Pas forcément ultra récent mais mériterait d’être dans une partie « Le saviez vous ? » de la gazette.
Ce commit ici, là, de marcimat : ▻http://zone.spip.org/trac/spip-zone/changeset/69369
Gérer les crayons sur des parties de configuration, avec #EDIT{meta-demo/truc} ou #EDIT_CONFIG{demo/truc}.
Attention, cette nouvelle balise (#EDIT_CONFIG) n’étant pas présente dans SPIP, si le plugin crayon est désactivé, le contenu de la balise s’affiche dans les squelettes ({demo/truc}).
Par ailleurs, enregistrer des sous configurations nécessite soit SPIP 3, soit SPIP 2.x + Bonux 2 ou CFG
On change de stratégie pour l’autorisation de lire ou d’écrire des metas : on dit que celles de SPIP qu’on pouvait éditer ne changent pas (pouvoir configurer le site), mais les autres, plutôt que de les interdire nécessitent d’être webmestre pour être modifiées.
Ces 2 écritures sont donc valables :
<div class="#EDIT_CONFIG{demo/truc}">#CONFIG{demo/truc,---}</div>
<div class="#EDIT{meta-demo/truc}">#CONFIG{demo/truc,---}</div>
En gros dans tradlang je l’utilise par exemple pour éditer les descriptifs de priorités ici : ▻http://zone.spip.org/trac/spip-zone/browser/_galaxie_/trad.spip.net/trunk/inclure/tradlang_bilan_connecte.html?rev=76839#L60. Couplé avec le plugin #multilang (▻http://contrib.spip.net/Multilang-en-test), c’est un outil extrèment pratique.
Bref #SPIP #spip_blog #SPIP_est_génial #video_todo
Mozilla Labs : TogetherJS
►https://togetherjs.com
TogetherJS : une librairie javascript opensource créée et hébergée par Mozilla pour intégration d’outils de collaboration directmeent dans un site web. Permet navigation synchronisée, chat, suivi des focus et clics des utilisateurs, synchro des modifications
#togetherJS #javascript #outil #webapp #collaboratif #mozilla
cerdic a commencé fil cf ▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/together/trunk
Voilà une petite astuce pour avoir des couleurs SPIPées avec de la transparence .
#SPIP génére des couleurs en HEX, de la forme #51f3d6 (enfin plutôt 51f3d6, le # disparaît dans les traitements)
Pour avoir des la transparence, il faut des couleurs en RGBa, du style rgba(0, 0, 255, 0.5).
▻http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html
Pour cela, Il suffit de copier ce script dans mes_fonctions.php
▻http://bavotasan.com/2011/convert-hex-color-to-rgb-using-php
function hex2rgb($hex) {
$hex = str_replace("#", “”, $hex);
if(strlen($hex) == 3) {
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
} else {
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));
}
$rgb = array($r, $g, $b);
return implode(",", $rgb); // returns the rgb values separated by commas
// return $rgb; // returns an array with the rgb values
}
(notez qu’il faut décommenter dans le script original la ligne return implode et commenter le return)
Ensuite, dans son squelette on peut faire ceci :
background-color: rgba([(#LOGO_RUBRIQUE||couleur_extraire|hex2rgb)],0.3);
Mmmh à intégrer aux fonctions d’images. #SPIP-à-intégrer
Et seenthis devint un spip-contrib alternatif ... :)
Je veux bien mettre ça ailleurs, mais c’est vrai que le mettre directos sur un bout du wiki, sans doute moins de gens l’aurait vu, et puis ici c’est bien pour parler.
<code> Sinon, @seenthis est-ce que j’ai loupé un truc il n’y a pas de manière de mettre du code à la SPIP ? Un truc du genre serait aussi pas mal : ▻http://contrib.spip.net/Coloration-Code-2938 (mais j’ai l’impression qu’on va me conseiller d’utiliser un service externe et de l’embedder ici)</code>
En fait il faudrait un seenthis uniquement pour SPIP, vrai, ce serait biiiieeen, vu que seenthis est en opensource #yaka !
C’est clair que ça pourrait remplacer l’ancien microblog spip.org, en bien mieux. Et ça pourrait permettre de faire de manière assez « organique » des groupes de discussions, des propositions avec forum, etc, sans pour autant avoir un truc « normé », trop rigide.
Ça ferait un idees.spip.net mais en bazar plus qu’en cathédrale quoi !
Super idée @touti !
Rien à voir, mais c’est ça le plaisir de la discussion : je me rends compte qu’en tant qu’initiateur de ce fil je peux effacer n’importe laquelle des réponses à mon message initial. Je connais pas trop d’endroit où ce pouvoir est donné.
Ça aurait sa place dans ▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/fonctions_images non ?
Bof fonctions_images a été commencé à une époque où les fonctions d’images de la distrib étaient dans le noyau. Maintenant elles sont toutes dans un plugin « core » sur la zone.
Pour moi tout ce qui est dans fonctions_images devrait intégrer le plugin de fonctions d’images « core », car là on se retrouve avec deux plugins listant des fonctions d’images...
Et donc cette fonction rgba irait aussi au même endroit.
C’est déjà dans le plugin « CSS imbriqués » depuis 3 ans :
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/css_imbriques/css_imbriques_fonctions.php?rev=42667
Plugin « fonctions_images » ou « css_imbriquees », dans les deux cas ce sont des plugins « à part », externes, alors qu’il existe déjà un plugin commun dont le but est de regrouper des fonctions sur les couleurs et images : « filtres_images » de la dist.
Je ne saisis pas l’intérêt de disperser des fonctions portant sur un même sujet dans de multiples plugins différents. À la limite en attendant, le temps du test. Mais une fois que ça marche : dans le plugin commun.
@habbon ça serait pas la même chose que cette fonction du core ?
▻http://code.spip.net/autodoc/tree/ecrire/inc/filtres_images_lib_mini.php.html#function__couleur_hex_to_dec
On dirait. J’ai essayé de tester. Peut-être que c’est parce que je ne suis pas à l’aise avec les tableaux ou que je n’arrive pas à appeler la fonction dans le filtre, mais j’arrive pas à retourner une ou des valeurs qui ressemblent à quelque chose.
Si jamais elle fait le taf, peut-être faudrait-il rajouter un bout de doc ici ? ►http://www.spip.net/fr_article3326.html
Arf oui désolé, la fonction n’est pas directement utilisable comme filtre, il faut passer par une fonction perso qui fait le bon include et l’appelle en interne (un peu comme le fait @arno dans le plugin css_imbiques).
@arno OK, mais c’est documenté à priori uniquement dans le code source d’un plugin. Pour moi c’est le genre de petits scripts qui devraient être fournis avec SPIP, comme ceux documentés ici : ►http://www.spip.net/fr_article3326.html
D’ailleurs, en terme d’usage, un couleur_transparence(), inspiré de ton couleur_rgba($couleur, $alpha) serait peut-être sa forme la plus praticable.
GHOST MICE – All we got is each other «
▻http://moncul.org/catalogue/ghost-mice-all-we-got-is-each-other
Les chansons de ce disque sont entièrement dédiées à Samantha Jane, confondateur (à l’époque c’était un homme) de Plan-it-x Records et malheureusement décédée il y a deux ans. Un disque sur une longue relation d’amitié ponctuée par les complications d’une maladie mentale, la schizophrénie en l’occurrence.
▻http://chrisclavin.bandcamp.com/album/all-we-got-it-each-other
Un petit côté Silver Mt. Zion + Daniel Johnston...
#son
une playlist embedée dans un status seenthis ? Comment ça marche ?
@vlentz avec ce plugin tout simplement :)
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/plugins_seenthis/autoembed
Ghost Mice c’est vraiment très très bien :) j’aime beaucoup leur tube lors d’une précédente tournée : « Up the punks ».
▻http://www.youtube.com/watch?v=yeBpMVSSuvQ
Une Histoire du fichage
▻http://www.polemixetlavoixoff.com/une-histoire-du-fichage
c’est cette ligne là qu’il faut changer ?
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/plugins_seenthis/autoembed/stubs.php#L916
peut-être avec ce lecteur ▻http://mail.google.com/mail/html/audio.swf ?
ou bien s’inspirer ce que raconte cette page ▻http://aide-blogger-fr.blogspot.fr/2010/01/jouer-un-fichier-mp3-sur-son-blog.html ?
avec cette option a true ▻http://zone.spip.org/trac/spip-zone/changeset/74124/_plugins_ et le plugin soundmanager un lecteur html s’affiche sur le site, sans intermédiaire type Google ou autre.
Deux variantes #OSM plutôt sympa :
▻http://tiles.kupaia.fr/article17.html
Intégrées dans le plugin #leaflet providers avec l’autorisation de Maxim Rylov
du GIScience Research Group @ University of Heidelberg (merci tout plein à lui).
▻https://github.com/leaflet-extras/leaflet-providers/pull/43
Et hop, elles sont disponibles dans GIS 4.8.7 :
▻http://zone.spip.org/trac/spip-zone/changeset/73544
Il faudra attendre un peu pour les tester car OpenMapSurfer est en maintenant ce soir :