Recherche avancée

Sur d’autres sites (2753)

• Evolution #4727 : Des pictos / icônes symboliques pour tout le monde

  13 avril 2021, par RastaPopoulos ♥

  - et même amha assez simplement la balise #ICON pourrait détecter si l’image demandée est dans un sprite connu, auquel cas elle utilise le sprite, sinon elle utilise le fichier individuel

  Ça c’est bien prévu dans le cahier des charges :)

  Pour les classes, si ya une autre méthode que la fonte tant mieux hein, mais ce qui compte c’est continuer d’avoir l’option des classes, surtout pour l’interface d’admin. Car il y a plein de cas où c’est utile quand on veut avoir une interface cohérente maintenable, surtout si elle est modulaire (plugins infinis qui doivent avoir aussi le même style, sans devoir tout changer partout dès qu’on veut changer le style d’un morceau, dont les pictos).

  Et pour une interface d’admin, il y a encore moins de freinage y compris pour une fonte, on parle pas du site public qui utilise 3 pictos (là c’est au choix de la personne intégratrice de faire les bonnes décisions). Pour l’admin on charge de toute façon des choses permanentes, dont les sprites, et on va de toute façon utiliser un certain nombre de pictos un peu partout + en rendre dispo pour les plugins + le fait que les fontes sont à peu près toujours plus légères que les sprites. Avec tout ça je ne vois pas de problème énorme à charger une fonte de 80 pauvres kilos pour ce qui est de l’admin… (on parle pas de 500ko là…)
  Batailler pour ne pas intégrer 80ko voire même 40ko si on prend un jeu moins gros que bootstrap, c’est un peu dérisoire… :)
  (et du coup justement ya PAS à maintenir un sous-ensemble, car déjà l’ensemble complet pèse bien moins lourd que les sprites SVG, ça fait de la maintenance en moins)

• Evolution #4727 (Nouveau) : Des pictos / icônes symboliques pour tout le monde

  12 avril 2021

  Je fais un ticket pour la future PR et poser le plan d’action.
  C’est la suite de https://core.spip.net/issues/4562#Des-ic%C3%B4nes

  Proposition pour intégrer un jeu complet d’icônes symboliques.¶

  Les besoins sont multiples pour pleins d’éléments d’interface, dans le core et les plugins : des barres d’outils, des boutons d’actions, etc.
  Et chacun doit réimplémenter ça un peu à sa sauce, notamment dans le privé.

  C’est un besoin bien distinct des icônes svg de couleur dont on dispose actuellement dans le privé : on veut des pictos symboliques qui héritent de taille et de la couleur du texte, et issus d’un même set afin d’avoir un style unifié.
  Cela vient donc en complément.

  Il s’agit donc de reprendre un jeu d’icônes existant, qu’on n’aura pas à maintenir, optimisé, et qui fournit des icônes cohérentes visuellement, utilisables dans tous les contextes. Cf. plus bas pour une comparaison initiale des candidats possibles.

  Utilisation¶

  Ces icônes seraient utilisables de 2 façons :

  1) Des classes .spicon¶

  Des classes à ajouter à n’importe quel élément inline quand il s’agit d’icônes purement décoratives.
  Ces classes pouvant finir dans squelettes utilisés dans le public, pour éviter les conflits, on propose la contraption de spip + icon = spicon. Il y a aussi spip-icon mais c’est un peu plus verbeux.

  Exemples :

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_menu</span><span class="delimiter">"</span></span><span class="tag">></span>Ouvrir le menu<span class="tag"></span>
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">spicon_truc</span><span class="delimiter">"</span></span><span class="tag">></span><span class="tag"></span> Du texte
  
  <span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">titrem spicon_machin</span><span class="delimiter">"</span></span><span class="tag">></span>Mon titre<span class="tag"></span>
  
  </span></span></span></span>

  2) Une balise #ICON¶

  En complément, on peut vouloir embarquer une icône svg dans le HTML.

  On propose de reprendre et d’adapter la balise #ICON du plugin Zcore, qui fait ça très bien.
  Cette balise permet d’embarquer une icône du set par défaut, mais également n’importe quelle autre (je rentre pas dans les détails).

  Un modèle correspondant permettra aussi d’inclure des icônes svg dans les textes :
  

  <span class="CodeRay">
  
  #ICONE{identifiant}
  
  #ICONE{chemin/vers/mon_icone.svg}
  
  #ICONE{#identifiant_autre_set}
  
  </span>

  Identifiants sémantiques¶

  Les identifiants des icônes seront directement ceux du jeu d’icônes choisi.
  Mais ils peuvent avoir des noms un peu barbares : chevron-double-right, eye-slash, grip-vertical, etc.

  Dans tous les cas on pourra les utiliser tels quels, mais en plus de ça, on propose de faire une correspondance sémantique pour les icônes correspondants aux actions les plus courantes. Par exemple au lieu de faire #ICONE{chevron-double-down} on pourra faire #ICONE{deplier}.
  Cela passerait par un pipeline, donc liste qui peut être complétée selon ses besoins.

  La liste initiale est visible ici : https://demo.hedgedoc.org/3zIXkcFLTVSwV0nKC1_qcA?both

  Ressources privé / public¶

  Cela veut dire 2 ressources à charger :

  • Une font-face pour les classes
  • Un sprite svg pour la balise

  Dans le privé, il faut charger les 2.
  Dans le public, cela pourrait se faire optionnellement, à la demande.

  Candidats¶

  Pour finir un tableau comparatif des jeux d’icônes possibles (à licences libres), avec mes commentaires initiaux.
  Petite préférence pour Feather actuellement.

  Lib	Nb	sprite	fontface	Commentaire
  Bootstrap	1300+	693ko	85ko	Clés en main, beaucoup d’icônes (trop ?)
  Feather	286	( 100ko)	-	Styles rounded. Bonne balance nb icônes / poids.
  Octicon (Github)	433	( 240ko)	-	Styles rounded. Bonne balance nb icônes / poids. Beaucoup de manips à faire pour créer sprite et cie.
  Material (Google)	?	(?ko)	44ko	Style rounded / épaisseur variable. Beaucoup de manips à faire pour créer sprite et cie. Google !
  Core-ui	554	418ko	63ko	Clés en main. Sets inutiles non pris en compte dans ce tableau (brands, flags, …)
  Bytesize	101	11ko	-	Style rounded / épaisseur variable. Léger : le minimum syndical.

  Sprite entre parenthèses = non fourni dans le dépôt ou la dist → poids théorique.

• Anomalie #4719 (Nouveau) : [d3js] Décorreler la durée (3 mois, 2 ans) du type d’affichage (jours /...

  9 avril 2021

  Sur les statistiques des visites, les boutons 3 mois, 2 ans, 5 ans, infini, sont associés à un affichage spécifique qui regroupe les données en tranches.

  - Jusqu’à 3 mois, on regroupe par jour,
  - 2 ans, on regroupe par semaine,
  - au delà de 5 ans, par an.

  Il y a 2 raisons :

  - la première est une question d’affichage : afficher 730 jours (2 ans) ferait des barres trop étroites pour être lisibles
  - la seconde concerne l’archivage des statistiques (actuellement optionnelles) qui, si on le fait, regroupe les visites de plus de 2 ans, sur le 1er jour du mois, et de plus de 5 ans sur le premier jour de l’année.

  Pour décorréler ces éléments, il faudrait 2 graphiques :

  - l’un petit avec l’ensemble des données qui sert de sélecteur de plage de date,
  - l’autre qui affiche le contenu de la plage sélectionnée. Tel que https://bl.ocks.org/robyngit/89327a78e22d138cff19c6de7288c1cf (ici un graphique "line", mais c’est la même idée avec l’histogramme)

  L’inconvénient est qu’il faut charger l’ensemble des données que l’on connaît obligatoirement pour avoir ce petit graphique, ce qui peut être copieux sur un affichage par jour (3600 lignes donc pour 10 ans de stats). A priori c’est pas non plus une quantité extravagante à traiter en JS. Enfin l’affichage "histogramme" est peut être pas le plus adapté dans ce cas car si on sélectionne une trop grande plage, les barres seraient trop étroites.

  Cependant le calcul actuel du json et le JS actuel des statistiques savent traiter les durées et types d’affichage que l’on désirerait. Ça rend juste le graphique potentiellement illisible si le fait tel quel.