URL: https://linuxfr.org/users/trim/journaux/nouveau-design-pour-l-espace-de-redaction Title: Nouveau design pour l'espace de rédaction Authors: Adrien Dorsaz Date: 2019年06月08日T17:42:13+02:00 License: CC By-SA Tags: linuxfr, rédaction et design Score: 48 Hello, Sur github, j'ai proposé la [fusion des modifications de LinuxFr](https://github.com/linuxfrorg/linuxfr.org/pull/242) qui permettent la mise en place du début du nouveau design proposé par mjourdan. # Ajouter des images d'en-tête aux dépêches Ici, l'idée semble assez simple à être mise en place, puisque LinuxFr utilise déjà CarrierWave et ImageMagick pour gérer l'envoi des avatars utilisateurs. C'est donc le premier point que j'ai voulu traiter et, finalement, c'est celui qui m'a pris le plus de temps. Tout d'abord, il m'a fallu me former aux concepts de Ruby on Rails (leur [tutoriel](https://guides.rubyonrails.org/getting_started.html) est vraiment bien fait !). Ensuite, j'ai débuté l'ajout de l'image aux dépêches, mais ça ne marchait pas. Pourtant, ce n'est pas bien compliqué, CarrierWave est vraiment simple à mettre en place ! J'ai donc repris le tutoriel, pas à pas, pour bien apprendre toutes les étapes de création de Model, Vues et Controlleurs et les formulaires pour la transmission des données. Les tutoriels pour CarrierWave disponibles étaient assez simples aussi, mais je n'y arrivais toujours pas. J'ai donc recommencé de zéro un projet avec Ruby on Rails, suivi le tutoriel de démarrage pour mettre en place un petit projet. Ensuite, j'ai suivi un tutoriel pour ajouter des images avec CarrierWave et tout a fonctionné sans problème. Je reprends le code de LinuxFr, je vérifie à nouveau que tout est bien fait comme dans l'autre projet. Mais aucune image n'arrive sur le serveur. J'étais prêt à baisser les bras, jusqu'à ce que je me rende compte que l'espace de rédaction utilise ajax pour envoyer les modifications au serveur. Je commence à lire le code CoffeeScript (c'est sympa, comme langage, je ne connaissais pas non plus !) et ce que je vois semble correct. Je regarde les requêtes réseaux et aucune image n'est transmise avec mon formulaire. A force de chercher, je tombe sur des forums qui expliquent que JavaScript est incapable de lire les fichiers stockés sur disque. C'est bien dommage, parce qu'ajax est bien pratique dans l'espace de rédaction pour éditer les textes. Heureusement, je vois qu'ajax a eu des mises à jour avec HTML5 et qu'il est maintenant capable d'envoyer des fichiers avec l'API [FormData](https://developer.mozilla.org/fr/docs/Web/API/FormData). Je vérifie la [compatiblité des navigateurs](https://caniuse.com/#search=formdata) et, heureusement, la plupart des navigateurs sont aujourd'hui compatibles. # Créer un système d'onglet pour afficher la tribune, les détails et les informations Maintenant que je comprends bien comment LinuxFr est construit, je m'attèle au deuxième challenge: ajouter un système d'onglet sur l'espace de rédaction pour éviter d'afficher trop d'informations en même temps aux rédacteurs. Là, je remercie fortement le [Hollandais Volant](https://lehollandaisvolant.net/?mode=links&tag=css) pour avoir écrit ses articles qui expliquent bien la puissance de CSS et comment bien l'utiliser avec JavaScript. Après avoir fait ça, je me dis que c'est dommage que l'aide Markdown n'est plus affichée pour les premiers utilisateurs. Et là, je me rends compte que mjourdan avait déjà prévu ça dans son design :) L'idée est simple: quand l'utilisateur commence l'édition d'un paragraphe, on active l'onglet d'aide à l'édition. Ensuite, à la fin de l'édition, on affiche à nouveau la tribune. Comme je m'étais déjà pris la tête avec les requêtes ajax, j'ai trouvé très rapidement comment appliquer ce comportement :) # Rendre le design utilisable sur les téléphones mobiles Le nouveau design utilise une structure à 3 colonnes. C'est sympa pour les grands écrans, mais ça ne marche pas bien pour les écrans plus petits comme ceux des tablettes ou les smartphones. Quand j'avais ajouté les icônes de téléchargement sur les boutons Markdown et Epub, j'ai appris qu'il ne fallait pas utiliser les CSS Grid, car la technologie est encore un peu trop récente. Heureusement, CSS avait déjà une autre solution plus simple, c'est les FlexBox. J'ai suivi ce guide [assez complet](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) et les pages de Mozilla pour mettre en place tout ceci. Au début, je me suis trompé et j'ai utilisé Flex à l'ancienne, comme si j'avais à faire à des `div` avec l'affichage réglé par des `float`. Finalement, j'ai réussi à utiliser correctement Flex pour lui décrire ce que je voulais faire avec mes 3 colonnes et ça marche plutôt bien :) Un autre point qui est intéressant pour les mobiles est de leur faire éviter de télécharger une image immense pour lui faire un rendu en petit. J'ai découvert que les navigateurs assez récents peuvent utiliser l'attribut [`srcset`](https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web) pour choisir automatiquement quelle image est la plus intéressante à télécharger pour son écran. Ce qui est chouette, c'est que c'est un nouvel attribut, alors même si votre navigateur ne le connaît pas, il sera toujours capable d'afficher l'image disponible dans l'attribut `src`. # Essayer d'être compatible avec IE Internet Explorer est encore présent et je voulais voir si c'était possible de garder l'espace de rédaction plus ou moins compatible avec lui. Heureusement pour moi, FormData et Flex sont plus ou moins disponibles dans IE :) Mon système d'onglet avec CSS + JavaScript fonctionne sur les nouvelles dépêches, mais est inutilisable sur d'autres... bizarre. Je regarde la console JavaScript disponible sur IE et je me rends compte qu'il y a un bug sur la tribune quand un message est disponible ! IE 10 n'est en fait pas compatible avec la propriété [`dataset`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/dataset) des éléments DOM et du coup, on ne peut pas utiliser JavaScript pour ajouter directement des données dans les éléments `