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é ?
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 ?
Tu veux dire une page éditée manuellement ? Normalement ça se fait automatiquement, avec un machin qui fait du XML
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...
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.wsws.org%2Ffrancais%2F%22%20and%20xpath%3D%22%2Fhtml%2Fbody%2Ftable%5B1%5D%2Ftbody%2Ftr%2Ftd%5B3%5D%2Ftable%2Ftbody%2Ftr%2Ftd%22
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.wsws.org%2Ffrancais%2F%22%20and%20xpath%3D%22%2F%2Fa%5Bcontains(%40href%2C’News%2F20’)%5D%22
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.
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é.
:-)