Si vous êtes un lecteur régulier et attentif, vous avez peut‐être remarqué quelques petits changements sur le site ces dernières semaines. J’ai touché à la CSS principale du site et, comme je suis plutôt un développeur back‐end, il est possible qu’il y ait quelques effets de bord non voulus. L’idée était de reprendre en main la feuille de style principale (qui n’avait pas été écrite par moi mais par 2PetitsVerres, dans le cadre d’un concours pour créer un nouveau style au site fin 2010 / début 2011) et de commencer à mettre en place le travail de mjourdan.
Travail technique
- découpage de la feuille de style en plusieurs fichiers pour mieux s’y retrouver ;
- ajout de la bibliothèque normalize.css qui permet d’effacer certaines différences dans les feuilles de style par défaut des différents navigateurs ;
- utilisation de
box-sizing: border-box;par défaut ; - suppression de tous les anciens préfixes CSS et utilisation d’une bibliothèque pour ajouter automatiquement des préfixes CSS pour les propriétés qui le nécessitent ;
- utilisation de prettier pour formater les fichiers de la feuille de style principale, et de stylelint pour détecter des erreurs.
Nouvelles icônes pour les boutons
Nous utilisons maintenant de jolies icônes vectorielles au format SVG pour agrémenter les boutons sur le site. Elles proviennent de la collection Feather, sous licence MIT. L’avantage d’utiliser du SVG par rapport aux anciennes icônes au format PNG est double : ça pèse moins lourd et permet donc de charger la page plus rapidement, mais surtout, le rendu est plus propre pour les utilisateurs qui ont un niveau de zoom différent de celui par défaut.
Page « À propos »
La page « À propos » a été ajoutée selon une proposition de mjourdan. Elle permet de présenter le site aux nouveaux visiteurs et les encourager à s’inscrire. Elle met également à l’honneur des vrais gens qui font vivre le site.
Changements sur la page d’accueil
En haut de la page d’accueil, la première dépêche est un contenu sélectionné par l’équipe de modération qui reste pendant quelques jours en une du site. Il est ressorti de l’enquête que cette dépêche qui ne change pas souvent pouvait être vue comme une absence de nouveaux contenus sur le site et prêter à confusion. Nous adoptons un nouveau style pour cette dépêche, ce qui devrait permettre de mieux la distinguer des autres contenus.
Nous avons également ajouté en bas de page un texte court pour encourager tout le monde à participer. Nul besoin d’être un expert pour ça, tout le monde peut apporter sa pierre à l’édifice !
Et d’autres choses
- j’ai revisité les tableaux sur le site, comme celui de la page de suivi des bogues et propositions d’amélioration ;
- la page de prévisualisation des nouveaux journaux et entrées de forum a maintenant un fond grisé pour ne pas la confondre avec les contenus vraiment créés ;
- et des petites modifications sur la page qui présente l’équipe.
# Page « À propos »
Posté par fero14041 . Évalué à 6.
Cool, merci!
Ca pourrait être bien que cette fameuse nouvelle page à propos soit par ex. accessible en lien du titre de la section de liens de base de page "À propos de LinuxFr.org" ?-) (j'ai dû chercher pour trouver le lien actuellement présent: "En savoir plus" du pied de page "Faites vivre LinuxFR.org"—que je n'avais pas vu en 1ère lecture _;)
[^] # Re: Page « À propos »
Posté par Bruno Michel (site web personnel) . Évalué à 3.
Oui, c'est prévu de mettre plus en avant cette page (mais ce n'est pas encore fait).
# article sélectionné
Posté par Goffi (site web personnel, Mastodon) . Évalué à 9.
Super, merci à tous ceux qui travaillent pour maintenir ce site.
2 petites remarques pour l'article sélectionné :
pourquoi ne pas mettre un bandeau « article sélectionné par la rédaction » ? Ça rendrait les choses plus claires, et serait certainement plus compréhensible pour les personnes qui n'ont pas la mise en page CSS (lecteur braille par exemple)
on s'est demandé une fois sur notre salon si les articles étaient sélectionnés par la rédaction ou par un algorithme, tu réponds à cette question en précisant que c'est la rédaction qui sélectionne. Ce serait une information utile à mettre en petit sous l'article (ou ailleurs)
Merci :)
[^] # Re: article sélectionné
Posté par Benoît Sibaud (site web personnel) . Évalué à 9. Dernière modification le 02 août 2018 à 10:59.
Y a un pseudo algo : tous les quand on veut changer de Une (ie que ça fait au moins 2 ou 3j, et que l'on y pense), on trie les dépêches par intérêt, et en repartant en gros de la dernière sélectionnée en Une, on prend celle plus haut qui a un score supérieur à une valeur importante (40, 50, 60, ça dépend un peu de la quantité de dépêches super bien notées à ce moment). Ce n'est pas automatique, mais ce n'est pas totalement un choix individuel/collectif non plus.
[^] # Re: article sélectionné
Posté par nud . Évalué à 2.
Personnellement, je n'avais pas remarqué le style différent pour cette dépèche mise en avant par la rédaction. Effectivement un bandeau textuel rendrait peut-être les choses plus claires.
# Menu de gauche plus difficile d'accès sur la page d'accueil > icône du tableau de bord
Posté par gasche . Évalué à 7.
J'ai l'impression que le changement de style de la nouvelle "sélectionnée" a cassé une propriété du design précédent qui m'était personnellement très utile: le menu de gauche n'est plus visible sur la page d'accueil sans (pour mes tailles d'écran et de police par défaut) scroller un coup en bas.
Un cas d'usage courant pour moi est d'aller sur la page d'accueil pour voir s'il y a des nouveaux commentaires dans une discussion à laquelle je participe, en regardant si l'icône "bulle BD" s'affiche à côté de "Mon tableau de bord". La nouvelle feuille de style rend cela plus pénible, j'imagine de façon involontaire.
J'aurais une préférence pour une solution de "style différent" qui n'impacte pas le positionnement du menu de gauche sur cette page par rapport aux autres. (Ou alors on pourrait imaginer avoir l'information "vous avez des notifications" dans le menu du haut du site, pas seulement le menu de gauche.)
[^] # Re: Menu de gauche plus difficile d'accès sur la page d'accueil > icône du tableau de bord
Posté par jihele . Évalué à 5.
Je trouve aussi bizarre le menu en haut à gauche qui est décalé vers le bas.
J'ai rechargé la page en pensant que c'était un défaut de chargement.
C'est assez habituel (cf. MediaWiki, par exemple) le logo en haut à gauche qui est cliquable et renvoie à l'accueil.
Et esthétiquement, ça fait bizarre.
Si c'est juste pour rendre plus clair le fait que c'est une dépêche sélectionnée, alors autant l'écrire explicitement, ça devrait suffire, ou mettre un cadre spécial.
[^] # Re: Menu de gauche plus difficile d'accès sur la page d'accueil > icône du tableau de bord
Posté par bolikahult . Évalué à 4.
Plutôt d'accord… Pourquoi ne pas copier la bannière en coin "Fork me on Github" que l'on voit sur certains sites, en mettant par exemple "(article) mis en avant/sélectionné" ?
[^] # Re: Menu de gauche plus difficile d'accès sur la page d'accueil > icône du tableau de bord
Posté par Bruno Michel (site web personnel) . Évalué à 7. Dernière modification le 03 août 2018 à 16:06.
Les retours ne sont globalement pas très positifs sur le changement de position de la dépêche en une. J'ai fait un retour en arrière.
[^] # Re: Menu de gauche plus difficile d'accès sur la page d'accueil > icône du tableau de bord
Posté par gasche . Évalué à 3.
Merci ! Le retour en arrière a immédiatement amélioré mon expérience de navigation sur LinuxFR.
# Bug nouvelle épinglée
Posté par Axioplase ıɥs∀ (site web personnel) . Évalué à 10.
La nouvelle épinglée casse décidément plusieurs CSS.
Pour moi, ça ressemble ça :
La nouvelle au dessus du titre "Accueil" et même du logo, c'est bizarre…
[^] # Re: Bug nouvelle épinglée
Posté par nud . Évalué à 3.
Malheureusement il est extrêmement compliqué de supporter toutes les CSS dans la nature (ou même les nombreuses CSS "officielles" en fait).
[^] # Re: Bug nouvelle épinglée
Posté par Axioplase ıɥs∀ (site web personnel) . Évalué à 3.
Ça a été réparé. \o/
Mais quel intérêt d'avoir des CSS officielles si elles ne sont pas supportées ? C'est comme si ton clavier MS cessait de marcher sous Windows lors de la prochaine update parce que zut, « on a mis à jour l'OS, c'est déjà pas mal ! »
[^] # Re: Bug nouvelle épinglée
Posté par nud . Évalué à 7.
Concernant les CSS alternatives, j'ai déjà suggéré de ne plus les supporter officiellement et nono< avait l'air d'accord.
Ça avait l'air d'une bonne idée à l'époque mais bon, les temps changent. C'est une horreur en maintenance: ça casse de façon aléatoire à chaque petit changement dans le HTML, et chaque réparation est coûteuse surtout en regard de l'utilisation qui en est faite par après.
Je ne suis pas certain de la pertinence de ta comparaison, mais bon, c'est pas comme si les mises à jour de Windows n'avaient pas laissé des tonnes de matériel parfaitement fonctionnel sur le bord de la route suite à la non-publication de drivers par les constructeurs… Libre aux gens qui maintiennent et utilisent des CSS alternatives de les garder fonctionnelles, mais je ne pense pas que ce soit un boulot qui incombe à l'équipe du site. Je préférerais qu'ils s'occupent de trucs qui apportent plus à la communauté ;-)
# Tableau dans le suivi
Posté par HL . Évalué à 2.
Les changements sont plutôt sympas.
Dans le suivi, le tableau n'a pas de bord. C'est peut-être une question de goût, les lignes blanches se confondent avec l'arrière-plan, ça m'a l'air bizarre. Un bord adapté serait plus assorti au style général.
Et puisque la conception est un peu dans le genre flat, le champ de recherche en haut à droite du site pourrait aussi avoir son petit lifting, pourquoi pas ? :-)
# Pas fan de la nouvelle épinglée
Posté par Wawet76 . Évalué à 4.
Ça fait vraiment bizarre que le logo et le menu ne soient pas au même endroit sur la page d'accueil que sur les autres.
(perso je mettrais la page "Dépêches" en page d'accueil et hop.
[^] # Re: Pas fan de la nouvelle épinglée
Posté par Benoît Sibaud (site web personnel) . Évalué à 3.
La page d'accueil ne contient pas que les dépêches (pour les visiteurs authentifiés, elle contient ce qu'ils ont mis dans leurs préférences, et pour les autres, elle contient le choix par défaut dépêches + sondages, bref les contenus modérés a priori).
[^] # Re: Pas fan de la nouvelle épinglée
Posté par Wawet76 . Évalué à 2.
Je sais je sais. Mais je disais qu'à mon goût, ça serait aussi bien si cette page était remplacée par la page "Dépêches". :)
# les raccourcis clavier
Posté par Jean-Baptiste Faure . Évalué à 1.
Ils marchent moins bien : maintenant il faut cliquer dans l'article pour que les raccourcis J et K fonctionnent. Même problème sur la page "Les contenus que j'ai lus".
[^] # Re: les raccourcis clavier
Posté par Bruno Michel (site web personnel) . Évalué à 3.
Je n'ai pas l'impression d'avoir touché à quelque chose de ce côté là et je ne comprends pas vraiment ce qui ne marche pas. Est-ce que ce serait possible d'avoir plus de détails ?
Sur les pages qui listent des contenus (dépêches, journaux, forums, etc.),
jetkservent à naviguer entre les contenus pas encore lus. C'est donc normal que ça ne fasse rien sur la page "Les contenus que j'ai lus". Par contre, il y a les raccourcis[et ']` pour naviguer entre les contenus avec de nouveaux commentaires.[^] # Re: les raccourcis clavier
Posté par Jean-Baptiste Faure . Évalué à 1.
Je n'ai pas été assez précis. Quand j'affiche les contenus que j'ai déjà lus pour consulter les nouveaux commentaires, je procède de la façon suivante :
1/ je clique sur "Les contenus que j'ai lus"
2/ dans l'encart en bas à gauche, je clique le crochet ] de "Contenus lus avec + de commentaires " pour aller au 1er contenu avec des nouveaux commentaires. Cela défile la page jusqu'au contenu en question.
3/ je clique sur "Lire la suite"
3/ ensuite j’appuie sur J pour accéder au 1er nouveau commentaire
et ça ne marche pas. Maintenant il faut que je clique dans la zone de l'article, en dehors du bandeau de gauche, pour que la touche J ait un effet.
[^] # Re: les raccourcis clavier
Posté par BAud (site web personnel) . Évalué à 3.
tu n'aurais pas activé l'affichage de la 3bune d'excellence dans le bandeau de gauche ? Si oui, le
japparaît dans le champ de commentaire qui est sélectionné par défaut et où le curseur est positionné (je ne sais pas si ce comportement peut être changé… je pense que oui, vu que ça ne le faisait pas avec la tribune de modo).Moi aussi, j'ai dû m'habituer à cliquer sur la page avant d'utiliser
j:/[^] # Re: les raccourcis clavier
Posté par Jean-Baptiste Faure . Évalué à 2.
Bien vu, c'est à cause de la tribune. Merci :-)
[^] # Re: les raccourcis clavier
Posté par BAud (site web personnel) . Évalué à 3.
cela empêche aussi d'aller au nouveau commentaire via le tableau de bord (cliquer puis
j, bah on s'y habitue :p), cela décale aussi la visualisation du contenu vers le bas quand on clique dessus (bah, mollette de la souris pour remonter…).Tout modo devrait pouvoir le constater en activant la visu comme simple identifié au site ;-) (oui, devrait y avoir encore cette fonctionnalité, jsaipuoù).
Je pense qu'il suffit de reprendre le code dispo pour la tribune de modo pour s'éviter cet inconvénient ; pour bien faire, il faudrait l'entrée de suivi< kivabien, mais bon c'est pas si gênant et j'aurais pensé qu'une moule< l'aurait déjà faite (mais une vraie moule ne regarde que peu le site alternatif autour du site principal qu'est board :D)
Yaurait aussi à màj les stats des fonctions activées dans les préférences mais ya quasi que moi et Oumph< (*) (et un peu NoNo<) qui adorons les stats pour les regarder au moins une fois par mois :p
(*) la preuve sur les entrées de suivi des stats bon en vrai ya aussi Floxy<, Nils<, see<, Nÿco<… qui ont fait des propositions visiblement plus simples et efficaces à réaliser vues qu'implémentées :D
[^] # Re: les raccourcis clavier
Posté par Bruno Michel (site web personnel) . Évalué à 6.
La tribune dans la colonne de gauche n'a plus le focus par défaut maintenant. Cf https://github.com/linuxfrorg/linuxfr.org/commit/2f73fb881248e9bb32f71198ae981ce8c62d3730
[^] # Re: les raccourcis clavier
Posté par Jean-Baptiste Faure . Évalué à 2. Dernière modification le 22 août 2018 à 10:01.
Merci, cela me permet de réafficher la tribune dans le bandeau de gauche. :-)
# Chrome-like, Firefox : les blocs de code sont 1,1x trop gros
Posté par SpaceFox (site web personnel, Mastodon) . Évalué à 4.
La classe CSS
codea une règlefont-size: 1.1em;, ce qui fait que les blocs de code (en ligne et multi-ligne) sont plus gros que le reste, d'un facteur 1,1 semble-t-il.Ça donne un rendu assez inégal :
Comportement observé sous Vivaldi 1.15.1147.55 (Stable channel) (64 bits) (moteur JS : V8 6.5.254.41) et Chromium 68.0.3440.7 et Firefox 61.0.1 (64 bits) sous Linux Mint 19 Cinnamon à jour.
La connaissance libre : https://zestedesavoir.com
[^] # Re: Chrome-like, Firefox : les blocs de code sont 1,1x trop gros
Posté par Bruno Michel (site web personnel) . Évalué à 5.
Merci, c'est corrigé. Cf https://github.com/linuxfrorg/linuxfr.org/commit/d5cc3ba84febdb11807abe42c308dad9f2d0dbda
# Problème avec firefox sous android
Posté par Denis Dordoigne . Évalué à 4. Dernière modification le 03 août 2018 à 18:15.
Je ne me souviens pas si j'utilise la css par défaut, mais le score de la dépêche se trouve maintenant sur le texte :
En tout cas merci de continuer à améliorer le site !
Membre de l'april, et vous ? https://april.org/adherer -- Infini, l'internet libre et non commercial : https://infini.fr
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.