Journal Nouveau design pour l'espace de rédaction

Sommaire

• Ajouter des images d'en-tête aux dépêches
• Créer un système d'onglet pour afficher la tribune, les détails et les informations
• Rendre le design utilisable sur les téléphones mobiles
• Essayer d'être compatible avec IE
• Garder l'espace de modération compatible avec l'affichage actuel aux utilisateurs
• Différences avec le design
• Conclusion
• Les nimages

Hello,

Sur github, j'ai proposé la fusion des modifications de LinuxFr 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 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. Je vérifie la compatiblité des navigateurs 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 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 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 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 des éléments DOM et du coup, on ne peut pas utiliser JavaScript pour ajouter directement des données dans les éléments <time> de la tribune. Je n'avais pas vu que le problème était simplement ça, il y a peut-être un moyen d'écrire un code compatible avec IE10.

Pour l'instant, j'ai juste évité de faire bugger complètement JavaScript sous IE avec le contrôle if(x.dataset) avant de l'utiliser. Maintenant, IE n'a plus ce bug JavaScript et donc la rédaction fonctionne à nouveau correctement :)

Garder l'espace de modération compatible avec l'affichage actuel aux utilisateurs

Pour l'espace de modération, j'ai essayé de faire converger les deux mondes: utiliser les nouveaux panneaux de l'espace de rédaction, mais garder le rendu de la dépêche tel qu'il sera fait après publication. Je me suis dit que ça aiderait les modérateurs.

Différences avec le design

Je me suis arrêté là, ça faisait déjà pas mal de changements :) Il reste encore quelques différences avec le design:

• Par simplicité, j'ai mis les boutons de publications sur le panneau de gauche avec le sommaire et les liens
• Dans la tribune, quand un message est posté, il est affiché sans avatars
• L'historique dans les détails est complètement caché par défaut. Le design prévoyait d'afficher les 5 derniers et de mettre un bouton "tout afficher".
• Dans l'onglet détail, on ne peut pas directement éditer le titre, la catégorie et la licence.
• Dans l'onglet détail, on ne peut pas ajouter de Tags (ce n'était déjà pas disponible et je n'ai pas trouvé de moyen rapide de le faire).

Conclusion

Tout n'est pas parfait, mais je pense que je suis arrivé à un point où c'est déjà utilisable pour la plupart des rédacteurs :-)

J'espère que cet article vous plaît et que vous serez motivé à également mettre à jour LinuxFr !

En plus des points ci-dessus, on a encore du pain sur la planche :-)

Les nimages

L'espace de rédaction d'une dépêche sans image d'entête:

L'espace de rédaction d'une dépêche avec image d'entête:

L'espace hybride de modération:

Les images dans l'accueil: