Suivi - Feuilles de style (CSS) Design: ajouter une icône de téléchargement à côté des liens Markdown et Epub

#1873 Posté par (page perso) . État de l'entrée : ouverte. Licence CC by-sa.
Tags : aucun
2
3
avr.
2019

Hello,

J'ai commencé à regarder le répertoire Github https://github.com/mjourdan/linuxfr-design.

Pour l'instant, je m'attaque à la partie "pied de page" des contenus.

Cette première itération amène juste un bouton "Download" à côté des liens Markdown et Epub.

Le résultat sur Firefox:

LinuxFr avec des icones de téléchargement

Le design de mjourdan ne prévoit qu'un seul bouton download sur la droite du fond d'article:

Ce que pourrait être LinuxFr

Je pense que garder les deux liens est un bon compromis avec les fonctionnalités actuelles, surtout parce que Markdown et Epub sont deux formats intéressants et à usage bien différent (editeur de texte / liseuse).

Un PR est ouvert sur Github qui inclus le changement de CSS et la nouvelle icone:
https://github.com/linuxfrorg/linuxfr.org/pull/233

La prochaine étape sera de déplacer le total de commentaire sur la droite également avec une icone également.

  • # Merci pour le patch

    Posté par (page perso) . Évalué à 3 (+0/-0).

    Sommaire

    Merci pour la contribution.

    Pour information, Mathieu m'avait également donné une suggestion pour l'ordre des modifications à faire. Je la mets ci-dessous.


    Décomposition des changements

    Ci-dessous on décompose les changements qui nous paraissent essentiels. On propose d'implémenter ces changements par série, de sorte à garder la cohérence des changements liés entre eux et que chaque série apporte une amélioration perceptible.

    Priorité 1

    1ère série - préparer le terrain dans l'espace de rédaction

    Objectif : lister plus de contenus sur un même écran, inciter à consulter d'abord les contenus publiés sur LinuxFr, et à aller voir les ressources externes dans un second temps.

    • [ ] [Rédaction] faire évoluer le gabarit d'article pour inciter à écrire un chapeau
    • [ ] [Rédaction] faire évoluer le gabarit pour intégrer au moins une image
    • [ ] [Rédaction] faire évoluer le gabarit pour toujours afficher les liens à la suite de l'article
    • [ ] [Rédaction] permettre de créditer les auteurs des images
    • [X] [Actualités] sur la liste des articles, retirer les liens
    • [X] [Actualités] sur les articles, placer les liens externes à la suite du texte

    Dans chaque article, on peut placer les liens externes dans deux colonnes à la suite du texte :

    https://github.com/mjourdan/linuxfr-design/blob/master/experimentations_5/3.1.0_article.png

    Priorité 2

    2ème série - soigner l'accueil

    Objectif : faciliter le premier contact, la compréhension de l'objet du site et des différents types de contenus.

    • [ ] [Navigation] déplacer le menu utilisateur vers la partie droite du bandeau de navigation
    • [ ] [Navigation] ajouter le bouton « À Propos » dans le bandeau du haut
    • [ ] [Navigation] màj la terminologie pour la rendre plus accessible
    • [ ] [Accueil] afficher les unes (?) / actualités / billets séparément avec leurs traitements visuels respectifs
    • [ ] [Accueil] faire apparaître les sondages, derniers messages de forums, et dernières modifications de wiki
    • [ ] [Préférences] supprimer les préférences liées à l'accueil devenues obsolètes

    Sur la maquette ci-après, on a pas de « une » persistante. On garde la possibilité de mettre en avant des articles (cf Paperwork 1.1) mais ceux-ci peuvent descendre dans la liste au fil du temps :

    https://github.com/mjourdan/linuxfr-design/blob/master/experimentations_5/1.0.0_accueil.png

    La barre de navigation en haut et le menu utilisitateur doivent s'adapter au mobile :

    https://github.com/mjourdan/linuxfr-design/blob/master/experimentations_5/barre_de_navigation.png

    3ème série - affiner la liste des articles

    Objectif : inciter à consulter les articles publiés sur LinuxFr, distinguer les différents types de contenus

    • [ ] [Actualités] sur la liste des articles, afficher les chapeaux (ou un texte tronqué) et illustrations
    • [ ] [Actualités] sur la liste des articles, retirer la possibilité de pertinenter / inutiler
    • [ ] [Actualités] sur la liste des articles, implémenter le traitement visuel
    • [ ] [Actualités] sur la listes des actualités, faire apparaître les articles les plus visités et les derniers commentaires

    4ème série - affiner la liste des billets

    Objectif : inciter à consulter les billets, renforcer la distinction articles éditoriaux / billets personnels

    • [ ] [Blogs] sur la liste des billets, afficher les chapeaux et illustrations
    • [ ] [Blogs] sur la liste des billets, retirer la possibilité de pertinenter / inutiler
    • [ ] [Blogs] sur la listes des blogs, faire apparaître les billets les plus visités et les derniers commentaires
    • [ ] [Blogs] sur la liste des billets, implémenter le traitement visuel

    Priorité 3

    5ème série - améliorer le suivi des commentaires

    Objectif : améliorer le confort de navigation parmi les commentaires, augmenter le rapport signal / bruit.

    • [ ] [Commentaires] mise en forme des commentaires (avatars arrondis, notes…)
    • [ ] [Commentaires] mettre en valeur les commentaires jugés pertinents par les auteurs des articles auxquels ils répondent (les messages des autres utilisateurs et ceux des auteurs eux-mêmes)
    • [ ] [Commentaires] permettre de rédiger un commentaire sans perdre le contexte (ni quitter la page ni perdre le suivi des commentaires non lus)
    • [ ] [Commentaires] nouveaux filtres de navigation (selon la note, afficher/masquer les erreurs de français)
    • [ ] [Commentaires] permettre de signaler des erreurs de français (fil positionné à la suite des autres commentaires)

    6ème série - nouvelle barre de navigation

    Objectif : adapter la navigation aux mobiles et aux interfaces tactiles

    • [ ] [Tribune] regrouper les espaces de discussion instantanée
    • [ ] [Tribune] permettre de les afficher/masquer à volonté sur mobile, depuis les barres de navigation
    • [ ] [Navigation] implémenter la nouvelle barre pour naviguer parmi les contenus / commentaires
    • [ ] [Rédaction] implémenter la nouvelle barre pour naviguer dans l'espace de rédaction
    • [ ] [Rédaction] implémenter la nouvelle barre pour rédiger les articles
    • [ ] [Navigation] màj la liste des catégories, plus courte et accessible

    Priorité 4

    7ème série - blogs

    Objectif : transformer les journaux en des blogs attrayants

    • [] [Blogs] soigner la présentation des profils
    • [] [Blogs] permettre d'éditer son profil depuis la page idoine
    • [] [Blogs] séparer les différents contenus par onglets
    • [] [Blogs] permettre d'épingler quelques contenus

    8ème série

    Objectif : améliorer le confort de rédaction & de navigation

    • [ ] [Rédaction] lister l'ensemble des articles et billets auxquels les gens participent sur la page de rédaction
    • [ ] [Notification] mettre en place le système de notification
  • # CSS à ajuster ?

    Posté par (page perso) . Évalué à 3 (+0/-0). Dernière modification le 07/04/19 à 13:00.

    Sur Firefox 66.0.2 Android :

    CSS mobile sur android

    Ou

    CSS desktop sur android

    Sur Firefox 66.0.1 Desktop :

    CSS desktop sur desktop

    Idéalement (à supposer que cela soit possible), je dirais que

    • Markdown et Epub devraient être alignés verticalement en bas avec Lire la suite
    • que du coup les icones devraient faire la taille de la police utilisée
    • que s'il est impossible d'aligner verticalement en bas Markdown/Epub avec Lire la suite, le mieux serait de l'aligner verticalement en bas avec Ce contenu est-il pertinent ou inutile (si la mention est présente)
    • [^] # Re: CSS à ajuster ?

      Posté par (page perso) . Évalué à 2 (+0/-0).

      En effet, j'ai remarqué que sur mobile les liens Markdown et Epub apparaissent bizarrement. J'ai vérifié et c'était déjà le cas avant d'ajouter ces images.

      Pour améliorer ça, il faudrait repenser la CSS du site pour éviter d'utiliser des float et préférer les CSS Grids. Apparemment, beaucoup de navigateurs supportent les CSS Grid maintenant, je vais voir ce que je peux faire.

      • [^] # Re: CSS à ajuster ?

        Posté par (page perso) . Évalué à 2 (+0/-0). Dernière modification le 08/04/19 à 22:13.

        Re,

        J'ai regardé cette piste et en effet les CSS Grids fonctionnent mieux que float pour faire du responsive design.

        J'ai posté l'évolution ici: https://github.com/linuxfrorg/linuxfr.org/pull/234

        Le résultat en mobile donne sur Firefox Desktop avec gabarit pour Galaxy S9/S9+:

        Pied de contenu avec CSS Grid

        J'ai testé sous Interne Explorer 10 et cette solution casse un peu l'affichage du lien "Lire la suite" (les boutons de téléchargements débordent un peu par dessus).

        PS: J'ai ré-ouvert l'entrée de suivi pour ce fil de commentaire.

  • # Cas d'usage pour le téléchargement en markdown ?

    Posté par . Évalué à 1 (+0/-0).

    Merci Adrien de te saisir de ça ! Autant je vois bien l'intérêt de télécharger au format .epub pour sa liseuse, autant je vois mal à quels besoins répond la possibilité de télécharger en .md ? Pourquoi ouvrir dans un éditeur de texte un article ou un billet qui a été publié sur LinuxFr ?

    • [^] # Re: Cas d'usage pour le téléchargement en markdown ?

      Posté par (page perso) . Évalué à 3 (+0/-0).

      J'ai 2 cas d'usage en tête :

      • une très grande majorité des contenus du site sont sous des licences libres, avoir le markdown permet de les réutiliser plus facilement ailleurs
      • ça permet d'apprendre la syntaxe markdown via des exemples : quelqu'un qui voit un contenu avec un tableau, une équation, des notes de bas de page peut aller voir le markdown pour comprendre comment faire quand il voudra écrire un prochain contenu avec l'une de ses fonctionnalités.
      • [^] # Re: Cas d'usage pour le téléchargement en markdown ?

        Posté par . Évalué à 1 (+0/-0).

        Ok. À mon avis ces usages ne justifient pas de faire figurer le lien sur la liste des articles, au même titre que le téléchargement d'epub.

        Du coup, je proposerais plutôt de séparer totalement les deux fonctionnalités et d'enrichir le popover derrière le bouton [⋅⋅⋅] pour y ajouter un lien « afficher la source de l'article » .

        Pour mémoire voici la maquette de la page article dans laquelle figure le popover dans lequel ça pourrait s'insérer.

        • [^] # Re: Cas d'usage pour le téléchargement en markdown ?

          Posté par . Évalué à 1 (+0/-0).

          J'ai mis à jour la maquette pour intégrer le fameux lien vers la source.

          • [^] # Re: Cas d'usage pour le téléchargement en markdown ?

            Posté par (page perso) . Évalué à 2 (+0/-0).

            Salut Matthieu,

            Merci pour la mise à jour de la maquette, j'aime bien cette proposition qui permet de retrouver la source sans avoir à toujours afficher le bouton pour le Markdown.

            Si je me souviens bien, la fonctionnalité de télécharger le fichier "Epub" est arrivée il y a 4-5 ans dans la vie du site. En fait, c'est vraiment plus pratique pour la plupart des lecteurs et je trouve que c'est une bonne idée de mettre en avant uniquement ce média hors-ligne.

            Le bouton "Afficher la source" est aussi pratique pour pouvoir exporter son article vers d'autres plateformes qui comprennent le Markdown (comme des blogs personnels, par exemple).

            Pour l'instant, je propose de laisser le pied de page tel qu'il est actuellement et de reprendre les modifications selon le plan que Bruno a mis dans les commentaires ci-dessus. Ça vous convient ?

            • [^] # Re: Cas d'usage pour le téléchargement en markdown ?

              Posté par . Évalué à 3 (+2/-0).

              Pour l'instant, je propose de laisser le pied de page tel qu'il est actuellement et de reprendre les modifications selon le plan que Bruno a mis dans les commentaires ci-dessus. Ça vous convient ?

              Même avec les deux formats côte-à-côte, l'icône apporte un plus appréciable. On a moins l'impression d'un morceau de texte perdu en bas à droite, on voit plus distinctement qu'il y a des possibilité d'interaction, et on sait à quoi s'attendre si on clique. Ça me convient donc très bien !

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.