Quelques petits changements sur le site

Posté par  (site web personnel) . Édité par Davy Defaud et Nils Ratusznik. Modéré par Nils Ratusznik. Licence CC By‑SA.
Étiquettes : aucune
51
2
août
2018
LinuxFr.org

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

Aller plus loin

  • # Page « À propos »

    Posté par  . É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 _;)

  • # article sélectionné

    Posté par  (site web personnel, Mastodon) . Évalué à 9.

    Super, merci à tous ceux qui travaillent pour maintenir ce site.

    2 petites remarques pour l'article sélectionné :

    En haut de la page d'accueil, la première dépêche est un contenu sélectionné par l'équipe de modération et 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.

    • 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  (site web personnel) . Évalué à 9. Dernière modification le 02 août 2018 à 10:59.

      si les articles étaient sélectionnés par la rédaction ou par un algorithme

      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  . É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  . É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.)

  • # Bug nouvelle épinglée

    Posté par  (site web personnel) . Évalué à 10.

    La nouvelle épinglée casse décidément plusieurs CSS.
    Pour moi, ça ressemble ça :
    css bug

    La nouvelle au dessus du titre "Accueil" et même du logo, c'est bizarre…

    • [^] # Re: Bug nouvelle épinglée

      Posté par  . É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  (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  . É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  . É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  (site web personnel) . É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.

  • # les raccourcis clavier

    Posté par  . É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  (site web personnel) . Évalué à 3.

      Ils marchent moins bien : maintenant il faut cliquer dans l'article pour que les raccourcis J et K fonctionnent.

      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 ?

      Même problème sur la page "Les contenus que j'ai lus".

      Sur les pages qui listent des contenus (dépêches, journaux, forums, etc.), j et k servent à 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  . É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  (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 j apparaî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  . Évalué à 2.

            Bien vu, c'est à cause de la tribune. Merci :-)

            • [^] # Re: les raccourcis clavier

              Posté par  (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  (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

  • # Chrome-like, Firefox : les blocs de code sont 1,1x trop gros

    Posté par  (site web personnel, Mastodon) . Évalué à 4.

    La classe CSS code a une règle font-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

  • # Problème avec firefox sous android

    Posté par  . É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 :
    capture d'écran avec le défaut

    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.