Des affiches pour tester les nouvelles insertions d’images…
Suivi du reboute :
Des affiches pour tester les nouvelles insertions d’images…
Suivi du reboute :
@arno je viens d’up avec ta dernière modif, c’est bon pour les images :)
Génial, j’avais pas vu (je te causais dans le vide sur IRC :-))
Maintenant il faut aussi installer la correction du Autoembed, il manque un </div>.
@arno tu n’est plus connecté sur IRC :p Je viens d’up autoembed.
Bonjour à tous les deux et merci pour SeenThis ! Mais comment fait-on s’il vous plaît pour poster une image ?
@cjldx Il faut copier directement l’URL de l’image dans ton message à l’endroit où tu veux qu’elle apparaisse. Le système se chargera de fabriquer l’affichage qui va bien.
#merci ! ça a l’air super.
Apparemment, il y a quelques bugs d’affichage…
@simplicissimus pas de bug chez moi, essaye de vider le cache de ton navigateur, ou tente avec une fenêtre de navigation privée ;)
Sur smartphone, c’est pas aussi évident de vider le cache. (Sur iOS, aller dans les Réglages du système, trouver Safari dans la liste, et dans le panneau de droite, vers le bas, trouver « Effacer historique, données de site »).
Vivement qu’on passe sur #SPIP-3.1, on récupérera le timestamp automatique sur les CSS et les JS, ça nous simplifiera les mises à jour…
ah oui @b_b, les deux méthodes suggérées font disparaître la surimpression. Merci !
En revanche, il y a quand même des trucs bizarres…
Lorsque je rafraichis la page…
… après avoir posté le commentaire précédent
(reproductible l’un et l’autre, sans que j’aie fermé ou redimensionné la fenêtre)
Oui, quand on poste un message, le script qui effectue le calcul ne se redéclenche pas, et donc on a le rendu « standard » (l’image fait 1/3 de la largeur par défaut). C’est un aspect à affiner.
Super chouette, bravo !
Visiblement, les petites images sont agrandies de force à la largeur du texte, ce n’est pas forcément très heureux :
▻https://seenthis.net/messages/661811
On devrait donc pouvoir intégrer du Dailymotion :
▻https://www.dailymotion.com/video/x5umyjr
Et l’insertion asynchrone des images, aussi :
Cooooool, DailyMotion, merci !
(et tout le reste aussi, d’ailleurs)
Sinon, @b_b, je viens de faire une mise à jour d’Autoembed pour mieux gérer MixCloud.
Et donc l’intégration Mixcloud :
▻https://www.mixcloud.com/bluenote71/star-trek-musical-tribute-50th-anniversary
(Note : ça ne fonctionne pas avec l’URL mobile.)
@arno, à priori depuis ces modifications sur les images, les flux de seenthis (atom donc) font des trucs bizarres quand il y a des images, ai-je l’impression. Dès qu’il y a une image ça fait un gros blanc en dessous du texte, et en fait c’est parce qu’il y a un conteneur, le lien de l’image qui prendre plein de place, alors que l’image elle-même reste à une taille normale là où elle est insérée.
Et donc je viens de voir dans le code du flux, et il y a des styles insérés dans dur dans le HTML du genre :
<span class='image' style='padding-bottom:146.52014652015%'>
Du coup forcément…
Ah oui, du coup y’a pas de feuille de style externe dans les flux… Il faudrait peut-être insérer en dur dans le style le height:0
(éventuellement un display:block
).
Sinon, pour expliquer le principe : auparavant, pour placer une image dans une page, il fallait indiquer (en dur dans le HTML) ses dimensions (height
) et (width
), de façon à « réserver » son emplacement avant même le chargement de l’image. De cette façon, la page s’affiche sans attendre que les images soient chargées, et on n’a pas de décalage du texte une fois que les images sont chargées.
À partir du moment où la maquette est « responsive », on veut que les images s’affichent en proportion de la taille de la colonne de texte (qui varient, évidemment, selon la taille de l’écran). Du coup, si on a affiché « en dur » les dimensions hauteur et largeur de l’image, elle ne se redimensionnera pas. On a donc besoin de réserver l’emplacement de l’image, mais sans indiquer des dimensions « fixes ». Le principe, alors, c’est d’indiquer sa proportion : l’image verticale a une hauteur qui fait 146% de la largeur (en gros : une fois et demi plus haute que large). Si on affiche l’image sur une largeur de 300 pixels (smartphone), la hauteur « réservée » sera de 438 pixels ; si on affiche l’image sur une largeur de 550 pixels (écran d’ordinateur), la hauteur réservée sera de 803 pixels. Je dis « hauteur réservée », puisque le principe est d’indiquer l’emplacement qu’occupera l’image dès l’affiche initial de la page, c’est-à-dire avant même qu’elle soit téléchargée. Pour indiquer le proportion (hauteur divisée par largeur) d’un bloc, en HTML, il n’y a qu’une solution : donner un padding-bottom
(qui est la valeur exacte de cette proportion), en forçant la « hauteur » à 0.
Oui je fais ce genre de calculs aussi mais pas pour le même besoin (pas pour pré-réserver de l’espace avant chargement), pour avoir des blocs ayant tels proportions (16/9, 4/3, etc) même lorsque ce ne sont pas des images, n’importe quel bloc HTML. J’ai même une mixin pour ça :
/* Garde la proportion d'un bloc en permanence */
@mixin aspect-ratio($width, $height, $selector:'.inner') {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> #{$selector} {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
Mais du coup c’est pas en dur dans le HTML puisque ce n’est pas pour réserver une place avant chargement. Je ne sais pas si les flux doivent vraiment bénéficier de tout ça… C’est obligé que ce soit le même code ? Ou bien on peut nettoyer après coup en enlevant les attributs styles ?
#seenthis_fonctionnalités Les #hashtags, hiérarchisés
Bon, les hashtags sont désormais omniprésent, je ne pense pas que ce soit particulièrement une caractéristique de Seenthis.
En revanche, il y a l’aspect hiérarchisé qui est marrant : les messages avec le hashtag #seenthis_fonctionnalités apparaissent aussi dans la page du hashtag #seenthis_fonctionnalité, et du hashtag #seenthis, et #seen… On peut par exemple préciser #spip-3.1, ou #spip-3 ou juste #spip, et ça fera une hiérarchie. On a une série avec #ghost et autres endroits abandonnés…
Et par ailleurs on a un système de thématisation automatique, qui tourne avec l’API Reuters (OpenCalais), qui produit des hashtags automatiquement.
Et enfin on peut s’abonner (« suivre ») des hashtags (pas seulement des @auteurs). Si on suit un hashtag, dans la logique des hashtags hiérarchisés, on voit aussi passer les enfants de son hashtag. Ça me semble particulièrement intéressant, parce qu’on peut taguer de manière précise (#spip-3.1), mais suivre de manière plus générale (#spip tout court).
Commentaire : j’aime bien l’idée des hashtags hiérarchisés, et je trouve particulièrement élégant le principe de taguer précisément et de suivre plus largement. Mais après, dans la pratique, je ne suis pas certain que ce soit très important. En dehors de #spip, je n’ai pas vu autre chose qui tourne comme ça.
Sur le fait de pouvoir s’abonner à un hashtag, très bien. Mais notre communauté étant très petite, là encore dans la pratique, ce n’est pas forcément indispensable. Si on avait le nombre de participants de Mastodon, ça deviendrait sans doute plus pertinent, du coup :-))
Quant à la thématisation automatique, ça fonctionne surtout bien en anglais (c’est censé fonctionner aussi en français, mais ça ne semble pas donner des résultats très spectaculaires), sur certains sujets. Genre dans le flux de @nidal, c’est fonctionne très bien parce qu’on y parle de pays, de villes, de mouvements politiques… qu’OpenCalais identifie plutôt bien.
L’autre aspect problématique, c’est qu’on dépend là d’une API propriétaire, et qu’on n’a pas franchement de concurrent même propriétaire. Je me souviens que @fil avait évoqué des choses libres, mais est-ce que ça fonctionne bien ?
Moi je trouve ça très bien la hiérarchie, ne serait-ce que pour les problèmes de pluriels ou autres tags pas tout à fait écrits pareil.
C’est une des méthodes pour organiser l’énorme bordel que sont les tags libres. Dans d’autres systèmes (Stackoverflow il me semble par ex), il y a des fonctionnalités de fusion des tags, administrable par des admins et par celleux qui ont beaucoup de points. C’est une autre méthode. Mais si on laisse tout libre, alors ce système de hiérarchie limite les dégâts de l’éparpillement.
Et je m’abonne à quelques tags (dont « ghost », pour avoir toutes les variantes).
À signaler : il y a un #hashtag consacré aux hashtags specifiques en usage sur Seenthis : #seenthis_lexique
Inauguré par @intempestive en 2013 ?
▻https://seenthis.net/messages/185096#message185961
Oui, suivre un tag c’est bien, mais comme je le signalais ici ▻https://github.com/seenthis/seenthis_squelettes/issues/151 il serait vraiment sympa de proposer aux personnes de pouvoir être notifiées par email quand un tag qu’on suit est utilisé.
Perso, je n’ai aucun usage des tags automatiques, je pourrais très bien m’en passer.
Pouvoir construire son propre flux (ou sa newsletter) serait vraiment bien. La page « Thèmes », c’est ce qui m’a permis de garder le contact avec Seenthis (@7h36 est vraiment précieux aussi pour ça) et de me motiver à venir éplucher une fois par mois la 20aine de tags que j’essaie de suivre.
Par contre c’est pas évident de savoir quoi suivre parce qu’il n’y a pas de page qui permettrait d’explorer tous les tags et de capter leur hiérarchie, ou encore de voir les articles les plus « favorisés » sur tel ou tel tag (dans l’esprit de Delicious), ou « favorisés » par celles et ceux qu’on suit uniquement. Ou encore une bête liste des « tags » les plus utilisés en ce moment.
Quand ne on suit pas Seenthis au jour le jour, c’est compliqué de saisir les nouveaux usages qui pourrait peut-être nous intéresser.
Merci en tout cas pour ces #seenthis_fonctionnalités, c’est vraiment super classe de capter la richesse de cet outil et sa conception.
J’ai un gros soucis avec #SPIP-3.1 : il ajoute un timestamp aux fichiers, que ce soient les CSS et les Javascript, mais aussi les images passées par les filtres.
C’est certes épatant pour être certain de bien utiliser la dernière version de chaque fichier, mais en revanche, ça me plante complètement l’aspiration des sites en local (parce qu’en local, le fichier monimage.jpg?1436899191
, ça ne marche pas du tout).
Est-ce qu’il y a un moyen prévu (genre une variable) pour pouvoir désactiver cet automatisme ?
J’ai l’impression d’avoir plus de timestamps avec le 3.1, par exemple sur des images passées par image_reduire, qui n’en avaient pas en 3.0.
Ce que je veux, c’est aspirer le site en local, pour en avoir une copie totalement statique. Avec les timestamp, ça ne fonctionne pas.
Pour l’instant, ce que je fais, c’est d’avoir un #FILTRE{mini_html}
dans tous mes squelettes, qui me sert déjà à faire différentes bidouilles (essentiellement, supprimer les tabulations et les espaces surnuméraires dans le code source), et donc là-dedans j’ajoute la suppression des timestamp un peu à la hache (chaque fois que je trouve (jpg|gif|png)\?[0-9]+[\'\"]
, je vire le timestamp).
C’est dans image_graver()
visiblement et il n’y a pas d’option pour le virer (option à ajouter, problablement). Cela dit il n’y a pas de raison fondamentale que les timestamp fassent foirer ta copie locale. Peut-être le fait qu’ils sont avec un ?xxx
et ne finissent donc plus par .jpg
— mais ça aussi ça pourrait se changer.
@b_b, oui j’ai vu |supprimer_timestamp
, mais ça m’oblige à reprendre tous mes squelettes, alors que l’idée est plus dans le sens de ce que remarque @fil. Ou, plus largement, dans le sens de ce qu’ai fait pour image_responsive
:
►http://seenthis.net/messages/374212
Là quand j’ajoute :
define("_SPIP_LIER_RESSOURCES", true);
mes_options
, le même site se met à me fabriquer des squelettes plus verbeux contenant les liens <link href…>
pour permettre l’aspiration du site et des ressources.Là c’est pareil, idéalement on définirait une variable dans mes_options
, et hop terminés les vilains timestamps le temps de faire l’aspiration.
@speciale : le but du timestamp est juste d’éviter que, quand tu fais les mises à jour de ton site (soit en div, soit pendant que tu mets en ligne des articles) tu sois gêné par le cache de ton navigateur. Un logo arton1.jpg
, remplacé par une nouvelle version, est toujours le logo arton1.jpg
; le timestamp ajoute la date de mise en ligne du fichier, et donc ton navigateur ne réutilisera pas la vieille image. Donc c’est bien dans le src
de l’image que ça doit se trouver, pas dans un data-
, qui n’invaliderait pas le cache.
@arno puisque tu as un #FILTRE{truc}
dans tes squelettes, tu peux y ajouter le filtre supprimer_timestamp non ?
@b_b : oui c’est ce que j’ai fait (expliqué plus haut), mais pas directement supprimer_timestamp, qui prend un URL en entrée, et pas l’ensemble de la page.
Mais à nouveau, ça oblige à modifier ses squelettes si on n’a pas l’habitude comme moi de mettre un #FILTRE{mini_html}
absolument partout…
Le problème se pose aussi sur les js et css compactés et agrégés par SPIP qui ont aussi ce timestamp, mais sur lesquels il n’est pas possible de passer le filtre de suppression de ce timestamp.
Sauf erreur de ma part, le nom des fichiers créés dans local/ dépend déjà de la date des fichiers. Le timestamp est alors inutile et contre productif.
Et si le nom du fichier ne dépend pas pas de la date, il suffirait de la rajouter dans le calcul du nom, non ?
Salut @arno*. Il est bien possible que ▻https://zone.spip.org/trac/spip-zone/changeset/104022 t’intéresse comme réponse à ton problème, d’autant plus que ça se greffe sur #FILTRE{mini_html}
Gestion des Statuts
▻http://contrib.spip.net/Gestion-des-Statuts
la #documentation (carnet Wiki de Contrib) pour la gestion des statuts des objets en SPIP 3
Ouf, on a lancé la semaine dernière la nouvelle version du site des Arts décoratifs :
▻http://www.lesartsdecoratifs.fr
C’est évidemment #SPIP-3 et #responsive.
On avait réalisé la version précédente avec Mosquito en 2008, la nouvelle version reprend donc l’ancien site et l’augmente : il était donc important d’assurer autant que possible la compatibilité avec les anciens contenus, alors que graphiquement c’est radicalement différent.
L’un des aspects importants du nouveau site est la possibilité de créer des longforms, c’est-à-dire des pages longues regroupant beaucoup d’information (dans SPIP : les articles d’une même rubrique) dans une même longue page scrollable. Par exemple :
►http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/actualites/actuellement/exposition/le-centenaire-de-l-hotel-camondo
Une des nouveautés (dans mes scripts) par rapport à mes habitudes précédentes, c’est que j’ai systématisé la possibilité, pour le webmestre, de choisir des maquettes très différentes pour le texte d’un article, via le #plugin Compositions :
▻http://contrib.spip.net/Compositions-2-et-3
Sur mes sites habituels, la maquette standard est :
– une colonne principe (large, gros texte) à gauche, et une petite colonne d’annexes (droite, petit texte) à droite :
▻http://www.lesartsdecoratifs.fr/francais/bibliotheque/expositions/les-livres-pour-enfants-pendant-la
▻http://www.lesartsdecoratifs.fr/francais/ateliers-du-carrousel/les-ateliers/pendant-les-vacances-scolaires
Désormais, pour chaque article, le webmestre peut choisir :
– une seule colonne de texte (c’est la nouvelle présentation préférée)
▻http://www.lesartsdecoratifs.fr/francais/ateliers-du-carrousel/presentation/reperes-chronologiques
– deux colonnes égales (pour textes courts uniquement, genre deux paragraphes l’un à côté de l’autre)
– trois colonnes égales
▻http://www.lesartsdecoratifs.fr/francais/qui-sommes-nous/pratique/3-sites-a-paris
– une seule colonne alignée à gauche
– une seule colonne alignée à droite
À la base, il s’agit de répondre au besoin de rythmer les longforms, en adoptant des présentations différentes dans les différentes parties du texte. Malheureusement, au lancement du site, on n’a pas de « grande » exposition avec des tonnes de contenu, exploitant cette possibilité. Mais ça va venir… :-)
J’ai développé pour le site de subtiles modifications #responsive des raccourcis d’images de SPIP (les très classiques <img>, <doc>, <emb>), utilisés dans les quelques milliers de pages de l’ancienne version du site.
Voir par exemple les images insérées ici :
►http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/actualites/actuellement/exposition/le-centenaire-de-l-hotel-camondo
et jouer avec la largeur de la fenêtre sur une grande amplitude.
– Les images sont insérées dans une <figure>.
– D’abord, le positionnement des légendes des images change radicalement en fonction de la largeur de l’écran : quand j’ai assez de place (écran large), les légendes « sortent » de la colonne de texte. Le boulot, ici, est que ça fonctionne correctement selon les différentes maquettes (par exemple, la légende d’une image insérée à gauche dans une colonne de gauche pourra sortir de la colonne, mais pas dans une colonne de droite – puisque la légende irait s’afficher sur le texte de la colonne de gauche). Bref, il y a une petite foule de cas en fonction de la composition choisir et de la largeur de l’écran.
– Si cette histoire de légende est une utilisation « jolie » du responsive, mais n’apporte pas grand chose réellement en lisibilité, il y a un problème pénible avec le responsive et les images alignées à droite ou à gauche : lorsque la largeur de la colonne de texte rétrécit (smartphone), le texte qui habille l’image se comporte de manière totalement farfelue (parce que les « lignes » de texte à côté de l’image deviennent vraiment trop courtes). J’ai donc ajouté un petit javascript qui calcule la largeur occupée par l’image par rapport à sa colonne de texte et, si le pourcentrage est trop élevé, décide de modifier l’affichage de l’image (on passe en afficher centré et on rejette le texte à la suite, comme un <img|center>).
– Il y aussi des modèles d’insertion <video> qui fonctionnent en responsive :
▻http://www.lesartsdecoratifs.fr/francais/ecole-camondo/debouches/conversations
– Introduction d’une option <|large> dans les raccourcis, pour indiquer qu’on veut présenter les images de manière plus large que la colonne de texte. (Ça fonctionne aussi avec mes raccourcis d’intégration de vidéos.) Par exemple :
▻http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/l-hotel-et-les-collections
Un détail intéressant : les menus de navigation en haut d’écran changent de présentation en fonction de la largeur de l’écran d’une manière un peu originale. Quand on passe de large à étroit :
– d’abord, la taille du texte diminue (de manière un peu trop importante à mon goût, mais il était vital pour l’institution que toutes les entrées principales tiennent sur un écran d’iPad) ;
– puis, si on n’arrive pas à faire tenir toutes les entrées des menus horizontaux dans la ligne, ceux qui « dépassent » sont affichées dans un entrée « ••• ».
L’originalité, c’est que ce n’est pas du CSS responsive, mais un Javascript qui va calculer la situation.
Un aspect plus technique : certaines informations sont automatiquement rapatriées du système de billetterie (qui n’est pas de notre ressort). Par exemple :
▻http://www.lesartsdecoratifs.fr/francais/activites/visites-guidees-parcours
C’est donc un longform constitué de plusieurs articles. Chaque article contient des listes d’activités à venir, avec un titre, une description et une image, avec chacune une liste de dates et d’horaires dans le futur, avec un lien « Réserver ».
Le webmestre dispose d’un raccourci avec plusieurs variables (le type d’événement, la tranche d’âge, le lien…), et la présentation est fabriquée automatiquement en SPIP, dans une #boucle_DATA qui tourne sur des appels de fichiers JSON fournis par le serveur de la billetterie.
Très intéressant comme toujours, merci pour ces détails.
Pour l’accueil, le carrousel… ben. Carrousel quoi. Mais même quand on est obligé, ya quand même des « améliorations » possibles. Là déjà le constat :
1) le carrousel se lance automatiquement = bad, bon, ok.
2) mais il n’y a aucun contrôle pour l’arrêter.
3) même quand la souris est dessus, ça ne s’arrête pas !
4) et en plus le temps de rotation est trop court pour me permettre de lire tout le texte quand le titre est long (et cela sans handicap particulier, alors j’imagine pour PLEIN d’autres…)
À minima, sans froisser les décideurs, je verrai au moins :
1) augmenter le temps de rotation
2) activer l’option pour stopper l’animation quand le focus ou le hover est dessus (dans à peu près toutes les libs ya ça)
3) ajouter un troisième bouton « pause » (en plus de précédent/suivant), à partir du moment où on laisse le lancement automatique
@rastapopoulos : d’accord avec les limites du Carousel, mais il y a un moment, avec ce genre de chose en page d’accueil, où même la durée des transitions automatiques n’est plus une décision négociable. Cela dit, à la place d’un bouton « Pause », on a un gros bouton « Tous les événements », destiné à court-circuiter le carousel.
Wahou, même la durée de rotation est imposée ! C’est des oufs ! :D
« Tous les événement » ça affiche un truc en surimpression et ça continue de bouger derrière ! À la limite si c’était avec un fond fixe… (mais faut le savoir quand même, c’est pas explicite que ça va « mettre en pause l’animation », ce que ça ne fait pas d’ailleurs pour l’instant)
Un des problèmes graves d’accessibilité de ce genre de trucs, c’est entre autre pour les gens qui ont des problèmes de lecture, de concentration, d’attention, et qui ne doivent vraiment pas être perturbés par des éléments mobiles pendant qu’ils visionnent une page. Que ce soit des pubs ou du contenu, peu importe : pas d’animation non demandée explicitement par l’utilisateur.
Mais bon, je sais bien ce que c’est quand c’est imposé… J’en fais souvent un combat de pédagogie d’ergonomie en début de projet, mais parfois c’est peine perdue…
Sinon, le détail qui me fait toujours sourire :
– sur l’ancien site, taille du texte du chapeau : 12px
– sur le nouveau site : 26px
– sur l’ancien, texte courant : 12px
– sur le nouveau site : 19px
Une page qui existait auparavant sous forme Flash : le plan du musée des Arts décoratifs
▻http://www.lesartsdecoratifs.fr/francais/musees/musee-des-arts-decoratifs/parcours/plan-766/plan
(cliquer sur un étage pour voir le truc se déplier)
C’est donc désormais du HTML, et tout est géré dans l’interface privée de SPIP (nativement, d’ailleurs, c’est une rubrique avec des sous-rubriques et des articles virtuels, et les images sont des logos d’articles et de rubriques).
La visite virtuelle est désormais interfacée avec le site SPIP, ce qui permet de gérer les descriptions des salles, les retours vers les salles et, surtout, les fiches des objets présentés, directement dans l’interface de gestion de SPIP :
▻http://www.lesartsdecoratifs.fr/index.php?page=visite
Je teste régulièrement d’autres outils de publication, et j’en utilise d’autres dans le cadre de mon activité professionnelle mais je reviens pour mes usages personnels toujours à SPIP
►http://www.valeryxavierlentz.eu/blog/quelques-mots-a-propos-de-spip-3-0
J’ai porté mon #plugin « Sélection d’articles » pour #SPIP-3. J’en ai profité pour ajouter le classement des articles par glisser-déposer (vu qu’il y a #Jquery-UI) dans la nouvelle version de SPIP.
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/selection_d_articles
Si tu utilises mon plugin « Détails d’interface » qui modifie le graphisme de l’espace privé :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/details_interface_3
Ça donne ça (ici pendant le glisser-déposer, c’est pour ça qu’on a un peu l’impression que c’est en vrac) :
►http://twitpic.com/amdut1/full
J’ai continué à travailler sur mon plugin « Détails d’interface », qui modifie le graphisme de l’interface privée de #SPIP-3 :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_
Ce que ça donne désormais :
►http://twitpic.com/ajs8c0/full
Globalement, on a un problème d’uniformisation de la présentation des titres principaux de page <h1>. Une fois c’est au-dessus des 3 colonnes (situation idéale, on peut régler de jolis alignements), le plus souvent c’est à l’intérieur de la colonne centrale (c’est un peu chiant, graphiquement c’est pas joli), et parfois c’est collé en haut (voir différence entre cliquer sur « Maintenance » et sur « Vider le cache »).
Les différentes pages de statistiques sont devenues des onglets, qui ont elles-mêmes des onglets. C’est l’inflation.
Dans la page « Liens entrants », les onglets sont au-dessus du titre <h1>.
Dans « Répartition des visites », les onglets sont en-dessous du gros titre.
Dans « Statistiques », le gros titre est à l’intérieur du pavé. (Et globalement cette page est vilaine, et n’utilise pas les méthodes graphiques utilisées ailleurs).
La page de gestion des « documents » propose :
+ des onglets de filtrage par type (images, sons…)
+ puis 4 systèmes d’onflets de filtrage divers,
+ puis un bandeau de classement par colonnes,
+ puis la pagination classique de SPIP.
Ça ne fonctionne pas si mal, mais graphiquement c’est gloubiboulga.
Bonne idée dans le premier niveau de filtrage, il y a le nombre d’éléments contenus entre parenthèses. Pas dans les 4 systèmes de filtrage secondaires. En revanche, si j’active un onglet secondaire, le nombre d’éléments entre parenthèses dans le premier niveau ne prend pas en compte cette restriction, ce qui fait que je clique sur un chiffre qui est ensuite filtré – je clique sur « images (58) » et ça m’affiche une liste de 2 images (parce que j’ai restreint aux images distantes par exemple).
Toutes les pages de « Configuration » reprennent, en haut de colonne de gauche, l’intégralité du menu de navigation dans « Configuration ». C’est le seul endroit de l’interface qui fasse ça.
#SPIP-3 : c’est pas nouveau, mais l’interface des portfolio du nouveau gestionnaire de documents est une catastrophe industrielle. Si on gère des portfolios et qu’on veut/doit enregistrer un titre/descriptif pour chaque image, la nouvelle interface pousse au suicide (il faut ouvrir une lightbox, scroller dans la lightbox en espérant ne pas faire scroller la page, ce qui est impossible à réaliser sous Safari, valider, fermer la lightbox, voir l’ensemble du porfolio se rafraîchir, retrouver où on en était dans la liste, et cliquer sur le « modifier » suivant).
Au passage, c’est le seul élément de SPIP qui utilise une lightbox pour présenter un formulaire. Pas cohérent.
Si on a activé les mots-clés sur les documents joints, on se suicide deux fois :
– l’interface de modification est inutilisable (même chose que pour titre/descriptif, mais en pire),
– il n’est pas possible de voir où on a appliqué des mots-clés dans le porfolio sans faire « modifier ».
Ah oui : les vignettes de prévisualisation des images en portfolio sont microscropiques. Si on doit bosser avec les images, c’est pas possible.
Le bouton « Supprimer » demande à confirmer la suppression (c’est bien). Le bouton « Détacher » ne demande rien.
J’aurais tendance à préférer un onglet pour ce genre d’interface plutôt qu’une lightbox : il y a trop de champs pour qu’elle soit vraiment pratique.
Il faudrait au minimum la dimensionner verticalement pour afficher tout les champs, pour que l’on puisse utiliser l’ascenseur du navigateur plutôt que la scrollbar de la lightbox.
Sur Chrome le lien « modifier » qui permet d’afficher le champs pour uploader un nouveau fichier dans le document fonctionne mal (l’affichage se fait au bout de longues secondes).
Pour ce qui est des titres, ça fait longtemps que j’installe systématiquement Crayons, et autorise les crayons sur « * » dans l’admin.
Du coup, pour créer/modifier un titre, un double clic suffit.
#SPIP-3 : Formulaire pour changer la date : le bouton « Annuler » est avant le bouton « Changer ». Du coup, c’est lui qui se déclenche si on valide le formulaire depuis un champ texte :
– je change l’heure,
– je fais « retour chariot »,
– je vois le formulaire ajax qui se recharge,
– mais ça n’a rien enregistré (puisque ça a déclenché sur « Annuler »).
Même idiotie sur « Configuration de la Boîte multimédia », qui déclenche par défaut « Réinitialiser » au lieu de « Valider ». Et là, j’ai mis un sacré bout de temps avant de comprendre pourquoi ça ne validait pas (parce que sur ce coup-là, les boutons sont hors de l’écran).
L’interface de #SPIP-3 étant juste vilainissime et bourrée de détails torchés avec une grosse truelle, je me suis fait un #plugin (« Détails d’interface ») qui en corrige les aspects les plus insupportables :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/details_interface_3
L’interface non modifiée de SPIP 3 :
►http://twitpic.com/afx6x9/full
et l’interface modifiée par le plugin :
►http://twitpic.com/afx764/full
Pas totalement convaincu : pour la typo, ta version est globalement mieux (en tout cas en regardant les deux images), pour le reste, c’est moins évident.
Dans l’ordre de ma lecture du message :
Première réaction : tiens pourquoi il a pas commité directement dans le core ?
Seconde réaction, tiens le retour des mots nuancés « c’est quoi cette interface ... »
Troisième réaction : je ne suis vraiment pas un expert, une référence, une pointure en la matière : en mettant les 2 images l’une à coté de l’autre et en faisant le jeux des 7 différences, je n’arrive pas à dire « Oui il a raison ou tord c’est vraiment mieux ou moins bien »
#spip
Je suis circonspect.
Un des trucs les plus visibles que je vois, c’est la correction de l’effet « BLOCS dans des BLOCS dans des BLOCS » à cause de tous les cadres partout. Là avec le mélange d’arrondis + de bordures en dégradés parfois + d’aplats à la place des bordures, ça corrige un tout petit peu ce problème.
Mais évidemment viennent les remarques :
– les nouvelles icônes ont été longuement discutées publiquement pour déterminer leur pertinence d’abord (quelle métaphore utiliser), puis leur aspect (contraste, etc) : pourquoi ne pas avoir participer à cette discussion ?
– c’est super d’avoir mis tes modifications sur la zone pour permettre aux autres de tester, mais si au final ce n’est pas un chantier commun que d’autres pourraient modifier, ça ne servira pas à grand chose : est-ce que chaque personne qui voudra faire des remarques sur l’interface va commiter sa propre version sur la zone ? Du genre « interface_arno », « interface_ben », « interface_rastapopoulos » ? Pourquoi pas hein, c’est un peu comme le principe des branches ou des forks en Git, mais je suis dubitatif...
Mais sur les modifs elles-même, je n’ai pas envie de faire de commentaires car pour moi il est clair que ce n’est pas du tout 3 couleurs et 4 pixels de marge à changer en gardant la même interface, alors qu’à mon avis c’est une vraie refonte ergonomique qu’il faut engager pour vraiment prendre en compte ce qu’est SPIP aujourd’hui (càd plus uniquement pour faire un magazine), et notamment depuis qu’on peut y adjoindre moult plugins.
Bon puisque @tetue me gourmande :), je précise : ne te méprends pas @arno, je trouve ça super qu’on fasse des propositions (tant qu’elles sont publiques).
Et je suis aussi tout à fait d’accord avec toi sur plein de problèmes de lisibilité, voire même de laideur, quant à l’interface de SPIP 3 (entre autre le problème de cadres partout, mais pas que).
Seulement, je pense que le chantier est plus gros que juste changer quelques couleurs, fut-ce plus joli ensuite. Je ne fais donc volontairement aucune remarque esthétique : je ne suis pas forcément pertinent sur ce point. Mais sur l’ergonomie générale : layout (nombre de bandes, nombre de colonnes), navigation, placement des informations, etc.
Sinon il parait que @tetue est bloquée et qu’elle ne peut donc pas répondre alors qu’elle voulait te congratuler : dommage. :)
Je suis assez satisfait des nouvelles icônes très modernes (qui ressemblent à celles que Google+ a depuis mis en place par exemple) toutefois je suis d’accord pour confirmer une marge d’amélioration. Le projet de @tetue que @RastaPopoulos a mis en lien me semble assez convaincant.
Je trouve les remarques de de @tetue et @rastapopoulos plus convaincantes que la proposition d’Arno :
1./ Je ne vois pas en quoi le fait de revenir à l’ancien menu principal apporte.
2./ Je retiens néanmoins la sobriété des styles à l’intérieur du cadre principale et la sensibilité typographique d’Arno. (d’accord avec @rastapopoulos la dessus )
3./ Je retiens aussi l’agrandissement du logo de l’article. Au fait, y a t’il un chantier pour calquer le fonctionnement les logos d’articles sur celui les documents ? ( j’aimerai bien pouvoir choisir les logos parmi la médiathèque par exemple).
4./ Pourquoi avoir viré l’outil « déplacer » ? Je trouve qu’il est super intuitif à sa place dans Spip3
5./ D’accord avec Têtue pour gagner de la place sur les auteurs ou les mots clés :
– 99% des articles ne possède qu’un auteur. Pourquoi perdre autant de place ?
– Je trouve par ailleurs que les groupes de mots clés importants devraient être encore plus mis en exergue que les autres.
6./ Enfin, pour conclure, 100% d’accord avec Rastapopoulos lorsque qu’il dit « c’est une vraie refonte ergonomique qu’il faut engager pour vraiment prendre en compte ce qu’est SPIP aujourd’hui (càd plus uniquement pour faire un magazine) »
On commence par la home du site qui ne devrait pas forcement tourner autour de l’auteur connecté ?
sur les logos il y a un ticket sur le sujet ►http://core.spip.org/issues/920
Je viens d’uploader une mise à jour de mon #plugin pré-processeur de CSS pour #SPIP (« CSS imbriqués »). Compatible #SPIP-3 donc :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/css_imbriques
SPIP et SeenThis : comment les marier ?
Bonjour à tous,
J’aimerais intégrer au mieux #SeenThis dans mon site #SPIP.
Existe-t-il des cas concrets/pratiques d’intégration ?
J’aimerais « centraliser » mes différentes veilles dans SeenThis pour renvoyer vers Twitter (ça, ok) et vers mon site — en fonction des mots clés (thèmes) — mais avec un peu plus que titre + URL.
Qui peut m’aider ?
Merci d’avance ,-)
cc @spip
Je ne le fais pas, mais à mon avis, j’abonnerais directement mon site SPIP à mon flux RSS de Seenthis. Le tien est là :
►http://seenthis.net/people/davduf/feed
Du coup, dans SPIP, tu peux décider d’afficher non seulement le titre, mais le texte complet formaté en HTML (si tu as envie).
J’avais fait une présentation pour Twitter, qui paraît-il ne peut plus fonctionner sur Twitter, mais qui en revanche devrait directement être utilisable pour Seenthis :
►http://www.paris-beyrouth.org/tutoriaux-spip/article/afficher-des-messages-twitter-sur
Et que dirions nous de la boucle [data] de #SPIP-3 ?
Genre : ►http://spip3.quejai.me/rss-afficher-les-resultats-d-une-recherche-twitter
Mais comment faire pour l’adapter à SeenThis ?
j’ai tenté un coup de rss sur ►http://zzz.rezo.net mais il aurait fallu styler un peu, et j’ai eu la flemme…
Ah, oui... Merci @Fil ! On approche, on approche. Je fais tes tests de mon côté et je vous reviens vite...
Merci !
Ça marche ici aussi : ►http://www.davduf.net/@Selection-web@
Maintenant, comment affiner l’affichage ? Par exemple, les tags SeenThis ne correspondent pas aux mots clés du site Spip.
Le plus simple (?) serait de ne pas les afficher sur le site.
Des idées ?
La nouvelle version de #spip : ►http://www.spip.net/fr_article5427.html #spip-3 #cms
ouep, on peut faire ça avec #SPIP et les #itérateurs, comme @rastapopoulos a dit. Il faut juste que la page soit un minimum structurée et bien balisée, forcément. Puis bon, ça demande un peu de chipot mais c’est faisable et bien pratique. Donne une url @monolecte...
Encore plus simple : ►http://fivefilters.org/content-only
L’URL que je veux veiller : ►http://www.wsws.org/francais
C’est fait avec les pieds mais j’aimerais être au courant chaque fois que ce site sort un nouvel article en français.
Ouééééé, avec des vrais morceaux de table inside et des font size="2" face="Arial" color="#003366" comme on en fait plus ;-)
Je regarde ça ce week-end.
Ce qui est super compliqué c’est que le HTML n’est même pas valide et ya carrément des manques d’imbrications de plusieurs balises (mal ou pas fermées).
YQL passe le résultat par HTML Tidy qui reformate tout du mieux qu’il peut, donc c’est sur ce résultat re-formaté qu’on fait la recherche (et non pas sur ce que montre Firebug quand on visualise la page, car lui aussi reformate mais pas forcément pareil que Tidy).
Premiers éléments, avec cette requête (faut tout copier, Seenthis ne reconnait pas bien l’URL) tu as uniquement les paragraphes centraux qui sont soit des dates (ceux avec « font » dedans) soit des articles (ceux avec « a » dedans) :
http://developer.yahoo.com/yql/console/?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.wsw
Ensuite faut boucler dessus et construire le XML du flux RSS :
– quand on tombe sur une date, la transformer en vraie date informatique et la mettre en mémoire pour l’assigner aux liens qui suivent
– quand on tombe sur des liens, utiliser la dernière date trouvée comme date de l’article
Ouhlà, ça va être compliqué. Ce site c’est du fait main pas w3c compliant (du tout) et là ils ont ajouté un pavé (dans la mare) qui casse déjà la requête de RastaPopoulos...
Une requête plus résistante : tous les liens pointant vers un truc en « News/20... » :
http://developer.yahoo.com/yql/console/?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.wsw
Et voilà chère amie :
►http://rastapopoulos.artizanal.info/notes/spip.php?page=rss-wsws
Et le squelette que tu peux adapter à ton besoin :
►http://rastapopoulos.artizanal.info/notes/squelettes/rss-wsws.html
Whouhaou, impressionnée je suis... et ça marche !
Tu devrais aussi partager sur Spip-contrib...
Ah ben je l’avais proposé avant de te lire (le partage sur contrib)... Mais oui, c’est une bonne idée, d’autant que ça te permettra de voir que si le rss est fonctionnel en l’état, il pourrait être cassé dans plusieurs cas de figure (le code produit sur ce site n’est vraiment pas propre). C’est dans ma todo (documenter est un job parfois assez fastidieux).
Et voilà, c’était pas si compliqué, j’ai mis à jour le squelette (toujours au même endroit donc les URLs ci-dessus).
J’ai juste changé l’URL de base qui est « /fr/ » maintenant, et changé « News/ » par « articles/ » dans le test de l’URL pour trouver la date.
J’ajoute ma contrib : ►http://www.feed43.com/1863156282864312.xml
modifiable là : ►http://www.feed43.com/feed.html?name=1863156282864312
Y avait ça, aussi, je le garde en mémoire : ▻http://www.rsspect.com
#RSS
Hey, mon code fonctionne toujours pour WSWS, la classe. :)
Boulot boulot : je viens de mettre en ligne la nouvelle-nouvelle version du site du musée d’Art contemporain du Val-de-Marne :
►http://www.macval.fr
On avait déjà livré la nouvelle version il y a quelques mois, mais cette fois j’ai tout refait en #responsive_web_design.
Quelques remarques :
– c’est du SPIP, et avec mon plugin « CSS imbriqués », c’est du bonheur ; le pseudo-style « -spip-clear : fix », qui permet de déclarer des « auto-clear » sur n’importe quel style, est vraiment pratique, puisqu’il est particulièrement adapté aux media queries (alors qu’un style qu’on baptiserait « .clearfix » ou « .nettoyeur », c’est pas gagné qu’il nettoie ou qu’il nettoie pas selon la largeur de l’écran) ;
– c’est certes agréable à faire, mais c’est du boulot et ça prend beaucoup du temps ; intégré directement au budget initial, ça peut plomber assez nettement la facture d’un développement de site ;
– il faut un assez bon niveau de maîtrise des CSS (positions, flotteurs, etc.).
Les deux derniers points expliquent largement le succès du Responsive Web Design chez les professionnels de la profession : si on en cause tellement, et si tout le monde répète que c’est comme ça (et pas autrement) qu’il faut faire, c’est largement lié à ça : ça représente des journées entières de développement à facturer, et ça permet à nouveau d’établir un clivage niveau compétences. Je dis pas que c’est pas épatant, le Responsive Web Design (la preuve, j’en fais), mais comme toujours quand quelque chose devient une « évidence » sans laquelle on n’est pas censé pouvoir de site Web, il y a aussi de mauvaises raisons.
Félicitations. Très beau boulot, très fin et propre. Les « audaces » de mise en page (parcours) sont fort réussies et bien déclinées en .petit-ecran…
Je profite de ce commentaire pour une question : où puis-je me renseigner sur les meilleurs moyens d’organiser un rubriquage avec #spip sur des sites de cette ampleur ? Comment faire pour gérer des types de contenus différents. En bref : où trouver de l’info spip pour l’organisation de gros projets ? Voici belle lurette que j’ai cessé d’utiliser Spip sur de telss projets (passé à Django ; le côté sur-mesure d’un framework est tellement attirant…) mais j’aimerais bien m’y remettre. D’autant plus depuis #spip-3. Merci de la réponse.
Bien, le design. Je me disais justement qu’il fallait que je passe aux media queries, pour la prochaine mouture du site de l’entreprise qui m’emploie.
Et à propos de la conclusion, comme disait un grand philosophe,
Ce qui nous ramène à la justification habituelle de l’application stricte et rigide des normes : interdire l’accès aux nouveaux entrants en affichant un alibi de qualité.
:-)