Communauté Mozilla francophone - Mot-clé - image-------------- actualités de la communauté Mozilla francophone2024-02-05T20:00:40+01:00Communauté Mozilla francophoneurn:md5:73600939acb1c10f8c091147e13c403fDotclearFirefox 74 améliore votre sécurité en ligneurn:md5:85ff081f90060d70809e832192a6e3622020-03-13T15:30:00+01:002020-03-23T17:23:03+01:00MozinetFirefoxchiffrementChromecommcontrôlecybersécuritédonnéesdéveloppementESRextensionFacebookFirefoxGNU LinuxGoogleHTMLHTTPSimageInternetiOSJavaScriptmacOSmobileMozillaongletsoutilspistagereleasesmartphonestandardsynchronisersécuritétesttéléchargementvidéovie privéeWebAssemblyWebExtensionsWebVRWindowséditeur<p><a href="https://blog.mozfr.org/dotclear/public/firefox/74/a-propos-de-mozilla-firefox-74.png" title="À propos de Mozilla Firefox 74"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/a-propos-de-mozilla-firefox-74.png" alt="À propos de Mozilla Firefox 74" style="float:right; margin: 0 0 1em 1em; width: 400px;" /></a> Le gros changement de Firefox 74 dont seuls les effets se feront voir est l’<strong>abandon de la prise en charge des protocoles de chiffrement TLS 1.0 et 1.1</strong> qui utilisent des algorithmes cryptographiques faibles pour la navigation sécurisée (https). Les principaux éditeurs de navigateur ont décidé de ne plus prendre en charge ces versions anciennes du protocole publiées respectivement en 1996 et 2006.</p>
<div style="margin: 1em; padding:0.5em; background-color: #e9d3d3; border: 2px dashed grey;">
<p><ins datetime="2020-03-23T17:10:00+01:00" cite="https://www.mozilla.org/en-US/firefox/74.0/releasenotes/#note-788289" style="text-decoration: none;"><abbr title="Mise à jour">MÀJ</abbr> : Mozilla est revenu sur cette désactivation pour ne pas gêner la diffusion d’informations officielles sur des sites qui n’auraient pas quitté TLS 1.0 ou 1.1.</ins></p>
<blockquote cite="https://www.mozilla.org/en-US/firefox/74.0/releasenotes/#note-788289"><ins datetime="2020-03-23T17:10:00+01:00" cite="https://www.mozilla.org/en-US/firefox/74.0/releasenotes/#note-788289" style="text-decoration: none;"><p>Nous avons annulé ce changement pour une durée indéterminée afin de permettre un meilleur accès aux sites gouvernementaux essentiels partageant des informations relatives au <abbr title="coronavirus disease 2019" lang="en">COVID-19</abbr>.</ins></p> </blockquote>
</div> <p>Chrome 81 attendu mi-mars et Edge 82 fin avril devraient aussi mettre un terme à la prise en charge de ces protocoles obsolètes.</p>
<p>Firefox ouvrant le bal, il est à craindre qu’il essuie les plâtres et les mécontentements, car il est estimé que <a href="https://www.zdnet.fr/actualites/les-navigateurs-bloquent-l-acces-aux-sites-https-utilisant-les-protocoles-tls-10-et-11-39900171.htm" hreflang="fr" title="Les navigateurs bloquent l’accès aux sites HTTPS utilisant les protocoles TLS 1.0 et 1.1 (5 mars 2020) Catalin Cimpanu, ZDNet">850 000 sites utilisent encore les protocoles TLS 1.0 et 1.1</a> dont plus de 5 000 figurant au classement <i lang="en">Alexa Top 1 Million sites</i>.</p>
<p>Firefox 74 propose néanmoins un bouton vous permettant de <a href="https://support.mozilla.org/fr/kb/que-faire-devant-erreur-echec-connexion-securisee#w_version-non-prise-en-charge-de-tls" hreflang="fr" title="Que faire devant l’erreur « Échec de la connexion sécurisée » – Assistance de Firefox">passer outre la restriction de version minimum de TLS</a>. Mozilla prévoit de supprimer cette option et de désactiver définitivement les versions TLS 1.0 et 1.1 dans une future version de Firefox.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/74/echec_de_connexion_securisee_SSL_ERROR_UNSUPPORTED_VERSION.png" title="Échec de connexion sécurisée : SSL_ERROR_UNSUPPORTED_VERSION"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/echec_de_connexion_securisee_SSL_ERROR_UNSUPPORTED_VERSION.png" alt="Échec de connexion sécurisée : SSL_ERROR_UNSUPPORTED_VERSION" style="display:table; margin:0 auto; width: 700px;" /></a></p>
<p>Les administrateurs et administratrices doivent s’assurer d’activer TLS 1.2 ou TLS 1.3 sur leur serveur, sinon les utilisateurs et utilisatrices perdront l’accès à leur site. Les internautes sous Firefox risquent donc de rencontrer des pages d’erreur en voulant se connecter à leur site habituel.</p>
<p>La sortie de Chrome et ses 60 à 70 % de parts de marché devraient convaincre les plus réfractaires à suivre un mouvement annoncé en 2018.</p>
<h3>Sécurité et vie privée</h3>
<p>Comme toutes les versions majeures, Firefox 74 comprend un certain nombre de <a href="https://www.mozilla.org/en-US/security/advisories/mfsa2020-08/" hreflang="en" title="Security Vulnerabilities fixed in Firefox 74 – Mozilla">mises à jour de sécurité</a> que Mozilla juge globalement comme étant de niveau élevé.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/amo/foxface-puzzle-alpha.png" title="Foxface Puzzle"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/amo/foxface-puzzle-alpha.png" alt="Foxface Puzzle" style="float:right; margin: 0 0 1em 1em; width: 160px;" /></a> Les modules complémentaires installés par des programmes extérieurs peuvent désormais être <a href="https://support.mozilla.org/fr/kb/desactiver-supprimer-modules#w_supprimer-des-extensions" hreflang="fr" title="Désactiver ou supprimer des modules complémentaires – Assistance de Firefox">supprimés dans le gestionnaire de modules complémentaires de Firefox</a> (about:addons). Désormais, seuls les utilisateurs et utilisatrices peuvent installer des modules complémentaires dans Firefox. Les applications et programmes tiers ne le peuvent plus. Cette pratique appelée <i lang="en">sideloading</i> n’est plus permise</a>.</p>
<p>Les programmes externes comme les gestionnaires de mots de passe, les logiciels de sécurité, les logiciels malveillants, etc. ne peuvent plus ajouter leur extension dans Firefox en la plaçant dans le dossier du programme ou via le registre. Les modules complémentaires déjà installés sont convertis en une extension installée par l’utilisateur ou l’utilisatrice qui est placée dans le dossier de profil, où il ou elle peut désormais les supprimer. Pour les nouvelles installations, les éditeurs de logiciels doivent distribuer leur extension sur un site web affiché dans Firefox où l’utilisateur ou l’utilisatrice peut agir et cliquer pour l’installer.</p>
<p>Firefox améliore votre vie privée pour les appels audio et vidéo en prenant en charge le protocole <abbr lang="en" title="Multicast DNS">mDNS</abbr> <abbr lang="en" title="Interactive Connectivity Establishment">ICE</abbr> qui camoufle votre adresse <abbr lang="en" title="Internet protocol">IP</abbr> avec un identifiant aléatoire dans certains scénarios <a href="https://developer.mozilla.org/fr/docs/WebRTC" hreflang="fr" title="WebRTC – MDN">WebRTC</a>.</p>
<p><cite lang="en">Mozilla Hacks</cite>, le blog des développeurs et développeuses, cite <a href="https://hacks.mozilla.org/2020/03/security-means-more-with-firefox-74-2/" hreflang="en" title="Security means more with Firefox 74 (10 mars 2020) Chris Mills, Mozilla Hacks">d’autres améliorations de la sécurité</a>.</p>
<h4>Contrôle des fonctionnalités sensibles par les dev de la page</h4>
<p>La <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy" hreflang="en" title="Using Feature Policy – HTTP — MDN">politique des fonctionnalités</a> est activée par défaut. Les requêtes de géolocalisation, de plein écran, de la caméra, du micro, de la capture d’écran depuis des <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe" hreflang="fr" title="<iframe> – HTML (HyperText Markup Language) — MDN"><code><iframe></code></a> d’origine tierce sont désormais désactivées par défaut. Les dev ont désormais le contrôle de l’activation de ces fonctionnalités de la plateforme web. Voir aussi d’autres <a href="https://www.fxsitecompat.dev/en-CA/versions/74/" hreflang="en" title="Firefox 74 Site Compatibility – Firefox Site Compatibility">changements touchant la compatibilité web</a>.</p>
<p>La prise en charge de l’en-tête CORP pour <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)" hreflang="en" title="Cross-Origin Resource Policy (CORP) – HTTP — MDN">Cross-Origin Resource Policy</a> qui permettent aux sites web et applications d’activer des protections contre certaines requêtes tierces (telles que celles venant d’éléments <code><script></code> et <code><img></code>). Ces protections peuvent contribuer à atténuer des <a href="https://fr.wikipedia.org/wiki/Attaque_par_canal_auxiliaire" hreflang="fr" title="Attaque par canal auxiliaire – Wikipédia">attaques spéculatives sur les canaux auxiliaires</a> (comme Spectre et Meltdown) ainsi que les attaques par inclusion de scripts intersites.</p>
<h4>Exceptions dans Facebook Container</h4>
<p>L’extension de Mozilla, <a href="https://addons.mozilla.org/fr/firefox/addon/facebook-container/" hreflang="fr" title="Facebook Container – Adoptez cette extension pour Firefox (fr)">Facebook Container</a>, empêche la galaxie des sites de Facebook de vous pister dans tout le Web. Le système de connexion de Facebook, les boutons « J’aime » (<i lang="en">likes</i>) et les commentaires sur des sites non Facebook sont automatiquement bloqués. Maintenant quand vous voulez instaurer une exception, vous pouvez en créer une en ajoutant le site dans Facebook Container (en utilisant le bouton de l’extension).</p>
<p style="text-align:center;"><a href="https://blog.mozfr.org/dotclear/public/firefox/74/Facebook_Container_panneau_de_bouton.png" title="Facebook Container : panneau de bouton"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/Facebook_Container_panneau_de_bouton.png" alt="Facebook Container : panneau de bouton" style="height: 400px;" /></a> <a href="https://blog.mozfr.org/dotclear/public/firefox/74/Facebook_Container_sites_autorises.png" title="Facebook Container : sites autorisés"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/Facebook_Container_sites_autorises.png" alt="Facebook Container : sites autorisés" style="height: 400px;" /></a></p>
<p>La <a href="https://www.mozilla.org/fr/firefox/74.0/whatsnew/all/?oldversion=73.0.1" hreflang="fr" title="Nouveauté Firefox : empêchez Facebook de vous traquer">page des nouveautés de Firefox 74</a> ouverte lors de la mise à jour présente Facebook Container et propose de l’installer.</p>
<p>L’extension <a href="https://addons.mozilla.org/fr/firefox/addon/multi-account-containers/" hreflang="fr" title="Firefox Multi-Account Containers – Adoptez cette extension pour Firefox (fr)">Firefox Multi-Account Containers</a> de Mozilla qui permet d’en faire plus avec <a href="https://support.mozilla.org/fr/kb/onglets-contextuels-avec-les-containers" hreflang="fr" title="Onglets contextuels avec les Containers ÷ Assistance de Firefox">les contextes</a> et d’isoler d’autres sites ou d’avoir plusieurs comptes du même site ouverts en parallèle permet d’afficher le menu des contextes d’une nouvelle manière. En plus d’un clic long sur le bouton <strong>+</strong> de nouvel onglet, un clic droit sur ce même bouton le fait apparaître.</p>
<p>Depuis début février, il est possible de <a href="https://blog.mozilla.org/security/2020/02/06/multi-account-containers-sync/" title="Multi-Account Containers Add-on Sync Feature (6 févr. 2020) Kendall Werts, Mozilla Security Blog" hreflang="en">synchroniser ses <i lang="en">containers</i> grâce à la fonction Sync de Firefox</a>.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/74/Syncing_Containers_is_now_available.png" title="Syncing Containers is now available"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/Syncing_Containers_is_now_available.png" alt="Syncing Containers is now available" style="display:table; margin:0 auto;" /></a></p>
<p>On peut aussi noter au titre de la sécurité <a href="https://www.zdnet.fr/actualites/un-nouveau-bac-a-sable-pour-la-securite-de-firefox-sur-mac-et-linux-39899693.htm" hreflang="fr" title="Un nouveau bac à sable pour la sécurité de Firefox sur Mac et Linux (26 févr. 2020) Catalin Cimpanu, ZDNet">l’arrivée</a> dans la version Linux de Firefox (et dans la version macOS en 75) de <a href="https://plsyssec.github.io/rlbox_sandboxing_api/sphinx/" hreflang="en" title="Overview – RLBox Sandboxing API documentation">RLBox</a> qui sécurise les bibliothèques dans Firefox en les mettant en bac à sable (<i lang="en">sandboxing</i>) <a href="https://hacks.mozilla.org/2020/02/securing-firefox-with-webassembly/" hreflang="en" title="Securing Firefox with WebAssembly (25 févr. 2020) Nathan Froyd, Mozilla Hacks">grâce à WebAssembly</a>.</p>
<h3>Modifications de l’interface</h3>
<h4>Ctrl + I pour les informations sur la page</h4>
<p>Firefox vient unifier le raccourci clavier pour accéder à la <a href="https://support.mozilla.org/fr/kb/voir-details-techniques-page" hreflang="fr" title="Voir les détails techniques de la page sur laquelle vous êtes – Assistance de Firefox">fenêtre d’informations sur la page</a>. <kbd>Ctrl + I</kbd> ouvrait sous Windows le panneau latéral des marque-pages (utilisez maintenant <kbd>Ctrl + B</kbd>). Désormais sous Windows et Linux, <kbd>Ctrl + I</kbd> ouvre les informations sur la page, tandis que sous macOS il faut appuyer sur <kbd>Commande + I</kbd>.</p>
<p>Toujours sous Windows, <a href="https://support.mozilla.org/fr/kb/comment-detacher-firefox-barre-de-tache-windows-10" hreflang="fr" title="Comment détacher Firefox de la barre de tâche de Windows 10 – Assistance de Firefox">Firefox est désormais attaché à la barre de tâches de Windows 10</a>.</p>
<h4>Importation des données d’autres navigateurs</h4>
<p>Firefox améliore la prise en charge de l’importation des données utilisateur de navigateurs tiers <a href="https://support.mozilla.org/fr/kb/importer-favoris-et-autres-donnees-internet-explorer-ou-edge" hreflang="fr" title="Importer les favoris et d’autres données d’Internet Explorer ou Microsoft Edge – Assistance de Firefox">comme Edge</a> basé sur Chromium (Edgium) sur Windows et macOS, Chrome bêta et les mots de passe des versions 80 et supérieures de Chrome.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/74/import_edge.png" title="Importation des paramètres et des données avec les 2 Edge"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/import_edge.png" alt="Importation des paramètres et des données avec les 2 Edge" style="display:table; margin:0 auto;" /></a>
<em style="display: block; text-align:center;">Assistant d’importation des données avec les 2 versions d’Edge</em></p>
<h4>Mots de passe</h4>
<p>Le gestionnaire de mots de passe de Firefox, <a href="https://support.mozilla.org/fr/kb/gerer-mots-de-passe-firefox-ordinateur-firefox-lockwise" hreflang="fr" title="Gérer les mots de passe dans Firefox pour ordinateur avec Firefox Lockwise – Assistance de Mozilla">Lockwise</a>, offre désormais aussi la possibilité de classer les identifiants de Z à A.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/74/lockwise_firefox_74.png" title="Lockwise dans Firefox 74 : Trier par nom (Z-A)"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/lockwise_firefox_74.png" alt="Lockwise dans Firefox 74 : Trier par nom (Z-A)" style="display:table; margin:0 auto;" /></a></p>
<p>Une entrée des champs de mot de passe permet désormais de <a href="https://support.mozilla.org/fr/kb/comment-generer-mot-de-passe-sur-firefox" hreflang="fr" title="Comment générer un mot de passe sûr dans Firefox – Assistance de Firefox">générer un mot de passe sûr</a>.</p>
<p style="text-align:center;"><a href="https://blog.mozfr.org/dotclear/public/firefox/74/utiliser_un_mot_de_passe_genere.png" title="Entrée de menu contextuel : Utiliser un mot de passe généré"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/utiliser_un_mot_de_passe_genere.png" alt="Entrée de menu contextuel : Utiliser un mot de passe généré" /></a> <a href="https://blog.mozfr.org/dotclear/public/firefox/74/utiliser_un_mot_de_passe_genere_de_maniere_securisee.png" title="Utiliser un mot de passe généré de manière sécurisée"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/utiliser_un_mot_de_passe_genere_de_maniere_securisee.png" alt="Utiliser un mot de passe généré de manière sécurisée" /></a></p>
<p>Quand une vidéo est chargée avec un lot de photos sur Instagram, le déclencheur du mode d’incrustation vidéo (<i lang="en">Picture-in-Picture</i>) de Firefox se trouvait au-dessus du bouton <em>Suivant</em>. Le bouton bleu est désormais déplacé pour vous permettre de passer à la photo suivante de la série.</p>
<p>Une nouvelle préférence (cachée) pour désactiver le détachement pour les afficher dans une nouvelle fenêtre a été ajoutée. Il s’agit de <code>browser.tabs.allowTabDetach</code>.</p>
<p>Des problèmes concernant les <a href="https://support.mozilla.org/fr/kb/onglets-epingles-garder-sites-favoris-ouverts" hreflang="fr" title="Onglets épinglés – garder vos sites web favoris ouverts à portée d’un clic – Assistance de Firefox">onglets épinglés</a> qui pouvaient être perdus ont été corrigés. Vous ne devriez plus les voir se réordonner d’eux-mêmes.</p>
<h3>Développement</h3>
<p>Les développeurs et développeuses peuvent se reporter à <a href="https://developer.mozilla.org/fr/docs/Mozilla/Firefox/Releases/74" hreflang="en" title="Firefox 74 for developers – Mozilla — MDN">la page de MDN</a> et à <a href="https://hacks.mozilla.org/2020/03/security-means-more-with-firefox-74-2/" hreflang="en" title="Security means more with Firefox 74 (10 mars 2020) Chris Mills, Mozilla Hacks">l’article du blog <em lang="en">Mozilla Hacks</em></a>, déjà cité, rédigés à leur intention.</p>
<p>Il y a des nouveautés pour la plateforme web et pour les outils de développement de Firefox.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/74/rdm-viewport-optimized.gif" title="rdm viewport optimized"><img src="https://blog.mozfr.org/dotclear/public/firefox/74/rdm-viewport-optimized.gif" alt="rdm viewport optimized" style="display:table; margin:0 auto; width: 600px;" /></a>
<em style="display: block; text-align:center;">Meilleure simulation des appareils mobiles dans la vue adaptative</em></p>
<p>Vous pouvez constater qu’avec la réduction de <a href="https://blog.mozfr.org/pages/Calendrier-versions-Firefox" hreflang="fr" title="Calendrier des versions de Firefox – Communauté Mozilla francophone">l’intervalle entre les versions</a> (qui sera de 4 semaines avec la prochaine version), le nombre de nouveautés est lui aussi réduit, mais pas ridicule non plus.</p>
<p>Vous voudrez peut-être aussi consulter les <a href="https://www.mozilla.org/en-US/firefox/74.0/releasenotes/" hreflang="en" title="Firefox 74.0, See All New Features, Updates and Fixes">notes de version de Firefox 74</a>.</p>
<p><a href="https://www.mozilla.org/en-US/firefox/68.6.0/releasenotes/" hreflang="en" title="Firefox ESR 68.6.0, See All New Features, Updates and Fixes">Firefox ESR</a> et <a href="https://www.mozilla.org/en-US/firefox/android/68.6.0/releasenotes/" hreflang="en" title="Firefox for Android 68.6.0, See All New Features, Updates and Fixes">Firefox pour Android 68.6</a> sont aussi sortis en même temps que Firefox 74 pour ordinateur ce mardi 10 mars.</p>
<p><a href="https://www.mozilla.org/fr/firefox/all/" hreflang="fr" title="Téléchargez le navigateur Firefox en français et dans plus de 90 autres langues"><strong>Télécharger Firefox sur le site officiel</strong></a> – choisissez entre toutes les versions, tous les installeurs et toutes les langues disponibles !</p>
<p>Le prochain train de versions passera dans 4 semaines. Vous pouvez <a href="https://blog.mozfr.org/post/2019/10/Tester-Firefox" hreflang="fr" title="Tester Firefox : pourquoi et comment (11 oct. 2019) Communauté Mozilla francophone">tester les différentes versions de Firefox</a>. On vous explique pourquoi c’est important et comment s’y prendre.</p>
<address><br />
<a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">Mozinet</a>
</address>
<p><em>Précédente version de Firefox :</em> <a href="https://blog.mozfr.org/post/2020/02/Firefox-73-avec-zoom-global" hreflang="fr" title="Firefox 73 avec un zoom global (12 févr. 2020) Communauté Mozilla francophone">Firefox 73 avec un zoom global</a></p>
<blockquote cite="https://blog.mozfr.org/post/2020/02/Firefox-73-avec-zoom-global" class="a-prec"><p style="margin 0; font-size: 90%; font-style: normal;">Les deux nouveautés mises en avant par Mozilla améliorent l’accessibilité des contenus et sont disponibles pour tous et toutes…</p></blockquote>
<p>Nos captures de Firefox sont disponibles sous <a href="https://creativecommons.org/publicdomain/zero/1.0/deed.fr" hreflang="fr" title="Creative Commons – Transfert dans le domaine public 1.0 universel – CC0">licence CC0</a>.</p>Concevoir de meilleures alertes de sécuritéurn:md5:648a8258593f197af6c8f29a71aa37f22019-03-28T12:00:00+01:002019-03-31T20:35:39+02:00MozinetFirefoxassistancechoixcommcontrôlecréationdesignFirefoxidentitéimageInternetmarqueMozillanavigationrecherchesécuritéutilisateur·rice·s<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_attention_risque_probable_de_securite.png" title="Firefox 66 – Attention : risque probable de sécurité"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_attention_risque_probable_de_securite.png" alt="Firefox 66 – Attention : risque probable de sécurité" style="float:right; margin: 0 0 1em 1em; width: 300px; border: none;" /></a> <a href="https://blog.mozilla.org/press-fr/2019/03/19/la-nouvelle-version-de-firefox-permet-de-reduire-les-nuisances-en-ligne/" hreflang="fr" title="La nouvelle version de Firefox permet de réduire les nuisances en ligne (19 mars 2019) Section Presse Mozilla">Firefox 66</a> est sorti la semaine dernière avec des nouveautés pour réduire les nuisances en ligne. Une autre amélioration annoncée vise à mieux protéger utilisateurs et utilisatrices en leur présentant des avertissements de sécurité pour les certificats plus efficaces et plus faciles à comprendre.</p>
<p>L’équipe travaillant sur l’expérience utilisateur dans Firefox a rédigé un <a href="https://blog.mozilla.org/ux/2019/03/designing-better-security-warnings/" hreflang="en" title="Designing Better Security Warnings (12 mars 2019) Meridel Walkington, Firefox UX">billet de blog</a> expliquant ses choix et ses motivations dans un domaine particulièrement important car touchant à la sécurité tout en interrompant la navigation. La communauté Mozilla francophone l’a traduit pour vous :</p> <hr />
<p>Les messages liés à la sécurité sont difficiles à bien transmettre, mais il est très important de le faire. Le monde de la sécurité sur Internet est de plus en plus complexe et fait peur aux non-initié·e·s. Tandis que nos expertes et experts en sécurité jouent un rôle important dans l’identification des menaces, c’est aux designers et aux rédacteurs et rédactrices de communiquer sur celles-ci de façon à éclairer les utilisateurs et utilisatrices pour leur permettre de prendre des décisions mieux éclairées.</p>
<p>Nous sommes encore en train d’apprendre ce qui fonctionne et ce qui ne fonctionne pas avec les messages de sécurité. De récentes études de terrain nous éclairent sur certains aspects clés. Nous avons eu l’occasion de mettre en œuvre certaines de ces recommandations, ainsi que des leçons apprises de notre propre recherche en interne, dans le cadre d’un récent projet visant à réviser les messages d’avertissement de Firefox les plus courants relatifs aux certificats de sécurité.</p>
<h3>Rappels</h3>
<p>Les sites web prouvent leur identité au moyen de certificats de sécurité (c’est-à-dire que www.example.com est bien www.example.com et voici la documentation pour le prouver). Lorsque vous essayez de visiter un site web, votre navigateur vérifie l’authenticité du certificat. Si tout se passe bien, vous pouvez vous rendre sur le site en toute sécurité.</p>
<p>Si quelque chose ne fonctionne <em>pas</em>, vous verrez un avertissement de sécurité. 3 % des utilisateurs et utilisatrices de Firefox rencontrent quotidiennement un message de certificat de sécurité. Presque tous les utilisateurs et utilisatrices qui voient un message de sécurité voient l’un des cinq types de message différents. Il est donc important que ces messages soient clairs, précis et efficaces pour éduquer et donner les moyens aux utilisateurs et utilisatrices de faire un choix éclairé (et idéalement, plus sûr).</p>
<p>Ces messages d’erreur comprenaient auparavant un jargon technique vague, niché au sein d’un design daté. Compte tenu de leur prévalence et de l’engagement de Firefox envers les utilisateurs et utilisatrices, et la sécurité, l’équipe <abbr title="Expérience utilisateur">UX</abbr> et l’équipe de sécurité se sont associées pour apporter des améliorations. En utilisant les résultats de recherches externes et internes, le designer UX Bram Pitoyo et moi-même avons collaboré à une nouvelle version et un nouveau design.</p>
<h4 style="margin: 2em 0;">Anciens designs c/ nouveaux designs</h4>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox_56_Connexion_non_securisee.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox_56_Connexion_non_securisee.png" alt="Message d’erreur gris contenant un verrou gris barré d’un trait rouge. Le titre, « La connexion n’est pas sécurisée », est suivi d’un corps de texte en langage technique, à la fois sur l’écran initial et sur celui révélé via un bouton « Avancé »." style="display:table; margin:0 auto; border: none;" /></a>
<em style="display: block; text-align:center;">Exemple d’un ancien message de sécurité de Firefox</em></p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox_66__Attention_risque_probable_de_securite.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox_66__Attention_risque_probable_de_securite.png" alt="Message d’erreur gris contenant une icône de triangle jaune avec un point d’exclamation et un petit verrou brisé. Le titre, « Attention : risque probable de sécurité » est suivi de deux paragraphes, dont un intitulé « Que pouvez-vous faire ? » en gras. Un bouton « Avancé » révèle du texte supplémentaire, écrit en langage plus courant que l’ancien message de sécurité." style="display:table; margin:0 auto; border: none;" /></a>
<em style="display: block; text-align:center;">Exemple d’un nouveau message de sécurité de Firefox</em></p>
<h3>Objectifs</h3>
<p><strong>Objectifs opérationnels :</strong></p>
<ol>
<li>Sécurité de l’utilisateur : empêcher les utilisateurs et utilisatrices de visiter des sites potentiellement dangereux.</li>
<li>Rétention des utilisateurs : éviter que les utilisateurs et utilisatrices de Firefox qui rencontrent ces erreurs basculent vers un autre navigateur.</li>
</ol>
<p><strong>Objectifs en matière d’expérience utilisateur :</strong></p>
<ol>
<li>Compréhension : l’utilisateur ou l’utilisatrice comprend la situation et peut prendre une décision éclairée.</li>
<li>Adhésion : l’utilisateur ou l’utilisatrice fait un choix éclairé et pro-sécurité. Dans le cas d’avertissements de sécurité, cela signifie que l’utilisateur ou l’utilisatrice ne se rend pas sur un site potentiellement dangereux, surtout s’il ne comprend pas parfaitement la situation et les implications.<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-1" id="rev-wiki-footnote-1">1</a>]</sup></li>
</ol>
<h3>Résultats</h3>
<p>Nous avons atteint nos objectifs, comme le montrent ces trois études :</p>
<ol>
<li><strong>Une étude d’ergonomie qualitative</strong> (à distance, non modérée sur usertesting.com) d’une première ébauche de pages d’erreur redessinées et réécrites. L’étude a évalué l’intelligibilité, l’utilité et le ton des nouvelles pages. Notre chercheur interne, <a href="https://medium.com/@djabber" hreflang="en" title="Francis Djabri – Medium">Francis Djabri</a>, a testé ces messages auprès de huit participants ou participantes et nous avons fait des ajustements en fonction des résultats.</li>
<li><strong>Une enquête quantitative</strong> comparant les nouvelles pages d’erreur de Firefox, les pages d’erreur actuelles de Firefox et les pages comparables actuelles de Chrome. Il s’agissait d’une étude de panel payante qui demandait aux utilisateurs et utilisatrices quelle était la source du message, ce qu’ils pensaient du message et quelles mesures ils allaient prendre à la suite du message. Voici un aperçu des résultats :
<blockquote>
<p>Lorsque le message d’erreur remanié a été présenté, nous avons constaté une <strong>diminution de 22 à 50 %</strong> du nombre d’utilisateurs et utilisatrices déclarant qu’ils tenteraient d’ignorer le message d’avertissement.</p>
<p>Lorsque le message d’erreur remanié a été présenté, nous avons constaté une <strong>diminution de 29 à 60 %</strong> du nombre d’utilisateurs et utilisatrices déclarant qu’ils tenteraient d’accéder au site Web par un autre navigateur (seulement <strong>4,7 à 8,5 %</strong> des utilisateurs et utilisatrices qui ont vu le nouveau message de Firefox ont dit qu’ils essaieraient un autre navigateur, contre <strong>10 à 11,3 %</strong> des utilisateurs et utilisatrices qui ont vu un message de Chrome).</p>
<p><em>(Source : Firefox Strategy & Insights, Tyler Downer, November 2018 Survey Highlights)</em></p>
</blockquote></li>
<li><strong>Une étude en conditions réelles</strong> comparant les nouveaux et les anciens messages de sécurité avec des utilisateurs et utilisatrices de Firefox a confirmé que les nouveaux messages n’avaient pas d’impact négatif sensible sur l’utilisation ou la rétention. Cela nous a donné le feu vert pour la mise en service des pages redessinées pour tous les utilisateurs et toutes les utilisatrices.</li>
</ol>
<h3>Comment nous l’avons fait</h3>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/vignettes.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/vignettes.png" alt="Huit boîtes grises reliées entre elles par des flèches illustrent le processus de création de nouveaux messages d’erreur. Boîte 1 : discussion avec des experts internes de sécurité. Boîte 2 : Recherches externes sur les avertissements de sécurité et la psychologie utilisateur. Boîte 3 : Reconception initiale avec l’ébauche de nouveau texte. Boîte 4 : Test d’utilisabilité qualitatif. Boîte 5 : amélioration du design et du texte. Boîte 6 : enquête quantitative (suivie par d’autres améliorations du design et du texte). Boîte 7 : Étude en conditions réelles comparant l’ancien et le nouveau message. Boîte 8 : lancement à tous les utilisateurs et toutes les utilisatrices." style="display:table; margin:0 auto; border: none;" /></a>
<em style="display: block; text-align:center;">Le processus de création des nouveaux messages de sécurité</em></p>
<p>Dans ce billet de blog, j’identifie les huit conseils de conception et de contenu basés sur des recherches externes et les nôtres pour créer des messages d’avertissement de sécurité plus efficaces.</p>
<h3>Conseils sur le contenu et la conception</h3>
<h4>1. Évitez le jargon technique et choisissez vos mots avec soin</h4>
<p>À moins que vos propres utilisateurs et utilisatrices soient plus techniques, il est généralement recommandé d’éviter les termes techniques – ils ne sont pas utiles ou accessibles pour la population en général. Des mots comme « informations d’identification de sécurité », « chiffrée » et même « certificat » sont trop abstraits et donc inefficaces pour permettre à l’utilisateur ou l’utilisatrice de comprendre.<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-2" id="rev-wiki-footnote-2">2</a>]</sup></p>
<p>Il est difficile d’éviter complètement certains de ces termes, mais lorsque vous les utilisez, expliquez ce qu’ils signifient. Dans nos nouveaux messages, nous n’utilisons pas le terme technique « certificats de sécurité », mais le terme « certificats ». Lors de la première utilisation, cependant, nous expliquons ce que signifie « certificat » en langage clair et simple :</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/Les_sites_web_justifient_leur_identite_par_des_certificats_qui_ont_une_periode_de_validite_definie.png" title="Les sites web justifient leur identité par des certificats qui ont une période de validité définie."><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/Les_sites_web_justifient_leur_identite_par_des_certificats_qui_ont_une_periode_de_validite_definie.png" alt="Les sites web justifient leur identité par des certificats qui ont une période de validité définie." style="display:table; margin:0 auto; border: none;" /></a></p>
<p>Certains termes apparemment communs peuvent également être problématiques. Notre propre étude sur les utilisateurs et utilisatrices a montré que le terme « connexion » était source de confusion. Ils pensaient, à tort, que la cause du problème était une mauvaise connexion internet, plutôt qu’un mauvais certificat.<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-3" id="rev-wiki-footnote-3">3</a>]</sup> Nous évitons donc le terme dans notre version finale :</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/avant_apres__Attention_risque_probable_de_securite.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/avant_apres__Attention_risque_probable_de_securite.png" alt="La phrase « avant », « La connexion n’est pas sécurisée », suivie de la phrase « après », « Attention : risque probable de sécurité »" style="display:table; margin:0 auto; border: none;" /></a></p>
<h4>2. Soyez concis et lisible… parce que les gens sont des « avares cognitifs »</h4>
<p>Lorsque nous sommes confronté·e·s à des décisions à prendre en ligne, nous avons tous et toutes tendance à être des « avares cognitifs ». Pour minimiser l’effort mental, nous prenons « des décisions rapides basées sur les règles apprises et l’heuristique ». Cette prise de décision axée sur l’efficacité n’est pas infaillible, mais elle permet d’accomplir le travail. Cela signifie, cependant, que nous faisons des économies lorsque nous consommons du contenu et que nous considérons les résultats.<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-4" id="rev-wiki-footnote-4">4</a>]</sup></p>
<p>Sachant cela, nous avons gardé nos messages courts et lisibles.</p>
<ul>
<li>Comme les gens ont tendance à lire en <a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/" hreflang="en" title="F-Shaped Pattern For Reading Web Content (original eyetracking research) – 17 avr. 2006 – Jakob Nielsen – Nielsen Norman Group">forme de F</a>, nous avons présenté notre contenu le plus important dans l’espace de choix de l’en-tête et du coin supérieur gauche de la page.</li>
<li>Nous avons utilisé des titres en gras et des paragraphes courts pour que le lecteur ou la lectrice puisse trouver et consommer les informations les plus importantes rapidement et facilement. L’utilisation d’entêtes et la priorisation du contenu dans une hiérarchie rendent également votre contenu <a href="https://styleguide.mailchimp.com/writing-for-accessibility/" hreflang="en" title="Writing for Accessibility – Mailchimp Content Style Guide">plus accessible</a> :</li>
</ul>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_Attention_risque_probable_de_securite_1_phrase_flou.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_Attention_risque_probable_de_securite_1_phrase_flou.png" alt="L’entête « Attention : risque probable de sécurité » précède un paragraphe de texte où il est écrit : « Firefox a détecté une menace potentielle de sécurité et n’a pas poursuivi vers untrusted-root.badssl.com. » La ligne suivante est floutée et l’exemple entier est entouré de violet." style="display:table; margin:0 auto; border: none;" /></a></p>
<p>Nous avons également simplifié le processus de prise de décision grâce à une conception fondée sur des opinions et à une présentation progressive de l’information (lire ci-dessous).</p>
<h4>3. Employez la conception avisée, dans une mesure raisonnable</h4>
<blockquote><p>« La sécurité est un concept abstrait. Lorsque nous évaluons les alternatives lors d’une prise de décision, les résultats de nature abstraite tendent à être moins persuasifs que les résultats concrets. » — Ryan West, <a href="https://cacm.acm.org/magazines/2008/4/5436-the-psychology-of-security/abstract" hreflang="en" title="The Psychology of Security – April 2008 – Communications of the ACM">The Psychology of Security</a></p></blockquote>
<p>Quand les utilisateurs et utilisatrices rencontrent un avertissement de sécurité, ils et elles ne peuvent immédiatement accéder au contenu ou terminer une tâche. Entre les deux options – continuer et accéder au contenu désiré, ou abandonner pour éviter un risque potentiel et ambigü – la première propose une récompense plus immédiate et tangible. Et les gens aiment les récompenses.<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-5" id="rev-wiki-footnote-5">5</a>]</sup></p>
<p>Sachant que la sécurité peut être l’option la moins attrayante, nous avons employé la conception avisée. Nous encourageons les utilisateurs et utilisatrices à faire le choix le plus sûr en leur donnant un avantage visuel, le marquant clairement comme « choix par défaut ».<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-6" id="rev-wiki-footnote-6">6</a>]</sup> Dans le même temps, nous devons faire attention à ne pas être un navigateur <em lang="en">big brother</em>. Si les utilisateurs et utilisatrices veulent continuer et prendre le risque, c’est leur choix (et dans certains cas, la personne informée peut le faire en sachant qu’elle n’a rien à craindre de l’erreur de certificat dans la situation donnée). Il peut être tentant d’ajouter dix choses à cliquer et obscurcir le choix risqué, mais nous ne voulons pas frustrer les gens dans le processus. De plus, l’efficacité d’obstacles additionnels dépend de la difficulté de ces obstacles.<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-7" id="rev-wiki-footnote-7">7</a>]</sup></p>
<p>Recherchant l’équilibre, nous :</p>
<ul>
<li>avons fait du choix pro-sécurité le choix le plus visible et accessible. Le bouton bleu contraste avec le fond gris, et contient du texte indiquant qu’il s’agit bien de la démarche « recommandée ». La couleur bleue est également souvent utilisée en signalisation routière pour indiquer les recommandations et les directions, ce qui est approprié pour le chemin pro-sécurité voulu.</li>
<li>Au contraire, le bouton « Avancé » est d’un gris discret, et après avoir sélectionné ce bouton, une dernière barrière est présentée à l’utilisateur ou l’utilisatrice. Cette barrière est un contenu supplémentaire expliquant le risque. Il est suivi du bouton en gris discret permettant de continuer vers le site et portant le texte inquiétant « Accepter le risque… ». Nous avons utilisé le mot « risque » intentionnellement pour capter l’attention de l’utilisateur ou de l’utilisatrice, et être clair·e·s qu’il ou elle se met dans une situation potentiellement précaire.</li>
</ul>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_Retour_recommande_Avance.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_Retour_recommande_Avance.png" alt="Deux boutons côte à côte : un bouton bleu vif avec le texte « Retour (recommandé) » écrit en blanc, et un bouton gris avec le texte « Avancé… » écrit en noir." style="display:table; margin:0 auto; border: none;" /></a></p>
<h4>4. Communiquez sur le risque, et rendez-le tangible</h4>
<p>Outre le fait que la « sécurité » est un concept abstrait, les utilisateurs et utilisatrices ont tendance à croire qu’ils ne seront pas eux-mêmes ou elles-mêmes les victimes d’une menace potentielle (c’est-à-dire que ce genre de choses n’arrive qu’aux autres… cela ne m’arrivera pas à <em>moi</em>).<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-8" id="rev-wiki-footnote-8">8</a>]</sup> Et, en dehors de nos utilisateurs et utilisatrices les plus familiarisé·e·s avec la technologie, la population générale ne se préoccupe pas de savoir quelle erreur particulière de certificat s’est produite et les détails qui y sont associés.</p>
<p>Nous devions donc rendre ce risque le plus concret possible et le communiquer de manière plus intime. Voici ce que nous avons fait :</p>
<ul>
<li>Utiliser le mot « Attention » dans le titre pour attirer l’attention.</li>
<li>Expliquer le risque en termes de résultats potentiels. L’ancien message disait simplement « Pour éviter que vos données ne soient dérobées… ». Notre nouveau message est beaucoup plus explicite avec des exemples de ce qui risque d’être volé. Google Chrome utilise une formulation concrète semblable.</li>
<li>Communiquer sur le risque assez tôt dans le contenu, dans notre cas dès le premier paragraphe, plutôt que l’enterrer dans une section « Avancé ».</li>
</ul>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_Attention_risque_probable_de_securite_1re_phrase_floue.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_Attention_risque_probable_de_securite_1re_phrase_floue.png" alt="Le titre « Attention : risque probable de sécurité » apparaît au-dessus d’une ligne de texte floutée. la seconde ligne indique : « Si vous consultez ce site, des personnes malveillantes pourraient tenter de voler des informations comme vos mots de passe, courriels, ou détails de carte bancaire. » L'exemple est souligné en violet dans sa totalité." style="display:table; margin:0 auto; border: none;" /></a></p>
<h4>5. Pratiquez la révélation progressive d’informations</h4>
<p>Bien que la majorité de la population ne nécessite pas ou ne veut pas connaître les détails techniques, vous devriez les fournir aux utilisateurs et utilisatrices qui le désirent… Au bon endroit.</p>
<p>Les utilisateurs et utilisatrices cliquent rarement sur les liens comme « En savoir plus » ou « Plus d’informations ».<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-9" id="rev-wiki-footnote-9">9</a>]</sup> Notre propre étude d’utilisabilité a confirmé cela, car la moitié des participantes et des participants n’ont pas remarqué ou ne se sont pas senti·e·s obligé·e·s de sélectionner le bouton « Avancé ».<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-10" id="rev-wiki-footnote-10">10</a>]</sup> Ainsi, nous avons privilégié le contenu le plus généralement accessible et immédiatement important sur notre premier écran, mais nous avons fourni plus de détails et d’informations techniques dans la seconde moitié de l’écran, ou derrière le bouton « Avancé ». Sachant que les utilisateurs et utilisatrices ne cliqueront probablement pas sur « Avancé », nous avons déplacé toute information plus importante, telle que du contenu à propos de quelle action l’utilisateur ou l’utilisatrice peut réaliser, vers le premier écran.</p>
<p>La section « Avancé » agit ainsi comme une forme de révélation progressive d’information. Nous avons évité d’encombrer notre écran principal avec des détails techniques, tout en préservant un espace moins voyant pour ces informations pour les utilisateurs et utilisatrices qui les veulent.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_erreur_avance.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_erreur_avance.png" alt="Une sélection d'un message d'erreur qui comprend le corps : « Les sites web justifient leur identité par des certificats. Firefox ne fait pas confiance à untrusted-root.badssl.com, car l’émetteur de son certificat est inconnu, le certificat est auto-signé ou le serveur n’envoie pas les certificats intermédiaires corrects. » Elle est suivie de la ligne « Code d’erreur : SEC_ERROR_UNKNOWN_ISSUER » et d'un lien « Afficher le certificat ». Suivent deux boutons : un bleu avec le texte « Retour (recommandé) » et un gris avec le texte « Accepter le risque et poursuivre »." style="display:table; margin:0 auto; border: none;" /></a></p>
<h4>6. Soyez transparent (personne n’aime le navigateur qui criait au loup)</h4>
<p>Dans le cas d’erreurs de sécurité, nous ne savons pas <em>avec certitude</em> si le problème est dû à une attaque ou simplement à un site mal configuré. Des pirates pourraient être en train de détourner le site pour dérober des informations de carte de crédit… ou un site peut simplement ne pas avoir les informations de son certificat de sécurité en bon ordre, par exemple.</p>
<p>Quand il y a une possibilité d’attaque, communiquez sur le risque, mais soyez transparent sur l’incertitude. Nos messages emploient des termes comme « potentiel » ou « des attaquants <em>pourraient</em> », et nous reconnaissons qu’il y a deux causes d’erreur potentielles (la première non sûre, la seconde sûre) :</p>
<blockquote><p>Soit le site est mal configuré, soit l’horloge de votre ordinateur est réglée à la mauvaise heure.</p></blockquote>
<p>Expliquez <em>pourquoi</em> vous ne faites pas confiance à un site et offrez la possibilité d’en apprendre plus dans un article du support :</p>
<blockquote><p>Les sites web justifient leur identité par des certificats. Firefox ne fait pas confiance à example.com, car l’émetteur de son certificat est inconnu, le certificat est auto-signé ou le serveur n’envoie pas les certificats intermédiaires corrects. <a href="https://support.mozilla.org/fr/kb/que-signifie-votre-connexion-nest-pas-securisee" hreflang="fr" title="Que signifie : « Votre connexion n'est pas sécurisée » ? – Assistance de Firefox">En savoir plus sur cette erreur</a>.</p></blockquote>
<p>Une personne participant à notre étude d’utilisabilité a fait part de son appréciation pour ce genre de transparence :</p>
<blockquote>
<p>« Je ne suis pas frustré·e, je suis éclairé·e. Souvent, les logiciels tentent de résumer les choses, ils pensent que l’utilisateur ou l’utilisatrice n’a pas besoin de savoir, et ils disent juste quelque chose d’assez vague. En tant qu’utilisateur·rice, je préférerais qu’ils me disent « voici ce que nous pensons et voici ce qui nous a amené à le penser ».<br />
<em>— Personne participant à une étude sur les messages d’erreur réécrits (User Research Firefox UX, <a href="https://medium.com/@djabber" hreflang="en" title="Francis Djabri – Medium">Francis Djabri</a>, 2018)</em></p>
</blockquote>
<h4>7. Choisir l’imagerie et les couleurs avec attention</h4>
<p>Les illustrations, l’iconographie et le traitement de couleur sont d’importants outils de communication pour accompagner le texte. Les signaux visuels peuvent être encore plus « forts » que les mots, il est donc critique de les choisir avec attention.</p>
<p>Nous avons voulu que les utilisateurs et utilisatrices comprennent le risque, mais n’avons pas voulu exagérer le risque, ce qui aurait créé le sentiment que la navigation est un acte dangereux. Nous avons également voulu que les utilisateurs et utilisatrices sachent et ressentent que Firefox les protège des menaces potentielles.</p>
<p>Certains messages d’avertissement emploient une imagerie plus spectaculaire, comme des yeux masqués, un cambrioleur ou un officier de police, mais leur efficacité est discutée.<sup>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#wiki-footnote-11" id="rev-wiki-footnote-11">11</a>]</sup> Quoi qu’il en soit, il est sans doute mieux de réserver cette sorte d’imagerie explicite pour les situations où nous <em>savons</em> que le danger est imminent, ce qui n’était pas notre cas.</p>
<p>L’imagerie doit également être conforme à notre image de marque et cohérente avec notre charte graphique. Dans Firefox, nous n’utilisons pas d’illustrations d’êtres humains dans le produit, nous utilisons des créatures fantaisistes. Une créature ne serait pas un choix approprié pour des messages d’erreur véhiculant une menace. Ainsi, nous avons décidé d’utiliser une iconographie qui évoque le risque ou le danger.</p>
<p>Nous avons également choisi une échelle de couleurs en fonction du niveau de menace. Dans Firefox, le jaune est un avertissement et le rouge signifie une erreur ou une menace. Nous avons utilisé une grande icône jaune pour nos messages car il y a un risque, mais ce risque n’est pas certain. Nous avons également ajouté une bordure jaune comme signal dissuasif supplémentaire pour les messages dans lesquels l’utilisateur ou l’utilisatrice a le choix de continuer vers le site non sûr (ce n’est pas toujours le cas).</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_bordure_jaune.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_bordure_jaune.png" alt="Un exemple d'un nouveau message de sécurité : une zone floue de texte et de boutons est entourée d'une bordure jaune." style="display:table; margin:0 auto; border: none;" /></a>
<em style="display: block; text-align:center;">Exemple d’une bordure jaune autour d’un des nouveaux messages d’erreur</em></p>
<h4>8. Rendez-le humain</h4>
<p>Tout bon texte UX utilise un langage qui a l’air humain, et c’est un principe directeur explicite parmi les propres <a href="https://design.firefox.com/photon/copy/voice-and-tone.html" hreflang="en" title="Voice and Tone">directives de voix et de ton de la marque</a> de Firefox. Par « humain », je veux dire un langage qui est naturel et accessible.</p>
<p>Si le contexte est bon, vous pouvez aller un peu plus loin et vous amuser un peu. L’un de nos cinq messages d’erreur n’impliquait aucun risque pour l’utilisateur : l’utilisateur n’avait qu’à régler son horloge. Dans ce cas, <a href="https://twitter.com/mart3ll" hreflang="en" title="mart3ll+ (@mart3ll) sur Twitter">Sean Martell</a>, responsable du design de la communication, a jugé opportun de créer une illustration « Old Timey Berror ». Les gens de notre étude ont bien réagi… nous avons même eu un gloussement :</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_L_heure_de_votre_ordinateur_est_incorrecte_SUMO.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/alertes/firefox66_L_heure_de_votre_ordinateur_est_incorrecte_SUMO.png" alt="Exemple d'un nouveau message de sécurité. Le titre : « L’heure de votre ordinateur est incorrecte » surmonte une illustration fantaisiste bleue d'un ours avec un chapeau, un monocle, une moustache et un nœud papillon, vérifiant l'heure sur sa montre gousset. C'est suivi par un paragraphe : « Votre ordinateur pense qu’il est 12/02/2018, ce qui empêche Firefox de se connecter de façon sécurisée. Pour visiter www.facebook.com, mettez à jour l'horloge de votre ordinateur dans vos paramètres système afin qu'elle soit réglée sur la date, l'heure et le fuseau horaire qui conviennent, puis actualisez www.facebook.com. » Puis un second paragraphe : « www.facebook.com a recours à une stratégie de sécurité HTTP Strict Transport Security (HSTS), une connexion sécurisée est obligatoire pour y accéder. Vous pouvez pas ajouter d'exception pour visiter ce site. » Un lien bleu « En savoir plus… » se trouve en dessous, suivi de deux boutons : un bouton bleu avec le texte « Réessayer » et un bouton gris « Plus d'informations »." style="display:table; margin:0 auto; border: none;" /></a>
<em style="display: block; text-align:center;">Nouveau message d’erreur à propos de l’heure</em></p>
<h3>Conclusion</h3>
<p>Le domaine des messages de sécurité représente un défi à plusieurs niveaux, mais il y a des choses que nous pouvons faire en tant que designers et stratèges de contenu pour aider les utilisateurs et utilisatrices à naviguer dans ce champ de mines. Étant donné le taux de frustration que peuvent causer à l’utilisateur ou l’utilisatrice les messages d’erreur et le risque que ces freins représentent pour les résultats de l’entreprise, comme la fidélisation de la clientèle, cela vaut la peine de prendre le temps et la peine de bien faire passer ces messages souvent négligés… ou, du moins, de les améliorer.</p>
<h4>Remerciements</h4>
<p><em>Des mercis tout particulier à mes collègues : Bram Pitoyo pour avoir conçu les messages et être tout le temps un excellent partenaire de réflexion, Johann Hofmann et Dana Keele pour leur patience et leur expertise en matière de sécurité, et Romain Testard et Tony Cinotto pour leurs compétences folles en matière de gestion de projet. Merci à Sharon Bautista, Betsy Mikel et Michelle Heubusch pour avoir relu une version préliminaire de ce billet.</em></p>
<h4>Références</h4>
<ul lang="en">
<li><a href="https://ai.google/research/pubs/pub43265">“Improving SSL Warnings: Comprehension and Adherence”</a></li>
<li><a href="https://pdfs.semanticscholar.org/4c40/c0ea6b02630839658ba7939dd609c621bf17.pdf">“Alice in Warningland: A Large-Scale Field Study of Browser Security Warning Effectiveness”</a></li>
<li><a href="https://course.ccs.neu.edu/is2000f10/readings/west.pdf">“The Psychology of Security”</a></li>
<li><a href="https://www.youtube.com/watch?v=_RozwCeXCyc&amp;t=51m3s">Introduction & Keynote : Web Privacy and Security: The User Experience</a></li>
<li><a href="https://research.google.com/pubs/archive/41927.pdf">“At Scale With Google Chrome’s SSL Warning (2014)”</a></li>
</ul>
<div class="footnotes">
<h3>Notes</h3>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-1" id="wiki-footnote-1">1</a>] Adrienne Porter Felt et al., “Improving SSL Warnings: Comprehension and Adherence.”(Philadelphia: Google, 2015).</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-2" id="wiki-footnote-2">2</a>] Ibid.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-3" id="wiki-footnote-3">3</a>] User Research, Firefox UX, Francis Djabri, 2018.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-4" id="wiki-footnote-4">4</a>] West, Ryan. “The Psychology of Security.” Communications of the ACM 51, no. 4 (April 2008): 34-40. doi:10.1145/1330311.1330320.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-5" id="wiki-footnote-5">5</a>] West, Ryan. “The Psychology of Security.” Communications of the ACM 51, no. 4 (April 2008): 34-40. doi:10.1145/1330311.1330320.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-6" id="wiki-footnote-6">6</a>] Adrienne Porter Felt et al., “Experimenting At Scale With Google Chrome’s SSL Warning.” (Toronto: CHI2014, April 26 – May 01 2014). https://dl.acm.org/citation.cfm?doid=2556288.2557292</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-7" id="wiki-footnote-7">7</a>] Ibid.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-8" id="wiki-footnote-8">8</a>] West, Ryan. “The Psychology of Security.” Communications of the ACM 51, no. 4 (April 2008): 34-40. doi:10.1145/1330311.1330320.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-9" id="wiki-footnote-9">9</a>] Devdatta Akhawe and Adrienne Porter Felt, “Alice in Warningland: A Large-Scale Field Study of Browser Security Warning Effectiveness.” Semantic Scholar, 2015.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-10" id="wiki-footnote-10">10</a>] User Research, Firefox UX, Francis Djabri, 2018.</p>
<p>[<a href="https://blog.mozfr.org/post/2019/03/Concevoir-meilleures-alertes-securite#rev-wiki-footnote-11" id="wiki-footnote-11">11</a>] Devdatta Akhawe and Adrienne Porter Felt, “Alice in Warningland: A Large-Scale Field Study of Browser Security Warning Effectiveness.” Semantic Scholar, 2015.</p>
</div>
<hr />
<address><br />
Traduction et relecture : <a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">Mozinet</a>, Watilin, Marine, Benoît, <a href="https://twitter.com/hellosct1" hreflang="fr" title="Christophe Villeneuve (@hellosct1) sur Twitter">Hellosct1</a> et anonymes
</address>
<p>Cette traduction comme la <a href="https://blog.mozilla.org/ux/2019/03/designing-better-security-warnings/" hreflang="en" title="Designing Better Security Warnings (12 mars 2019) Meridel Walkington, Firefox UX">version originale</a> sont disponibles sous les termes de la <a href="https://creativecommons.org/licenses/by-sa/3.0/deed.fr" hreflang="fr" title="Creative Commons — Attribution - Partage dans les mêmes conditions 3.0 non transposé — CC BY-SA 3.0">licence CC By-SA 3.0</a>.</p>
<p><em>Crédit illustrations :</em> seule l’avant-dernière image a été conservée de <a href="https://blog.mozilla.org/ux/2019/03/designing-better-security-warnings/" hreflang="en" title="Designing Better Security Warnings (12 mars 2019) Meridel Walkington, Firefox UX">l’article original</a>. La dernière provient <a href="https://support.mozilla.org/fr/kb/erreurs-liees-date-et-heure-sur-sites-web-seurises" hreflang="en" title="Erreurs liées à la date et l'heure sur des sites web sécurisés : que faire ? – Assistance de Firefox">de SUMO</a>, le site officiel d’assistance de Mozilla traduit aussi par la communauté.</p>Une semaine d'extensions Firefox – 2018-11urn:md5:3de946e27c474c858767daf97b892aa72018-03-24T21:30:00+01:002018-03-25T20:43:05+02:00MozinetMes extensionsAndroidapplicationscommextensionFirefoxGoogleHTMLimageMozillaongletsphotopistageQuantumWebExtensions<p><a href="https://extensionschallenge.com/" title="Firefox Quantum Extensions Challenge"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Firefox_Quantum_Extensions_Challenge-160x160.png" alt="Firefox Quantum Extensions Challenge" style="float:right; margin: 0 0 1em 1em;" /></a> Avec un peu de retard dû à des vacances (bien ?) méritées, notre <a href="https://blog.mozfr.org/post/2018/03/semaine-extensions-Firefox-2018-10" hreflang="fr" title="Une semaine d'extensions Firefox – 2018-10 (13 mars 2018) Communauté Mozilla francophone">troisième</a> semaine d’extensions vous rapporte une bonne partie de l’actualité dans ce domaine.</p>
<p>N’hésitez pas à nous faire vos commentaires sur la forme ou le fond ici ou sur nos réseaux sociaux.<br />
<a href="https://www.facebook.com/frmozilla/" title="Page Facebook Mozilla francophone"><img src="https://blog.mozfr.org/dotclear/public/icone/facebook_white_24-03.png" alt="Facebook" /></a> <a href="https://twitter.com/mozilla_fr" title="Twitter Mozilla francophone (@mozilla_fr)"><img src="https://blog.mozfr.org/dotclear/public/icone/twitter_white_24-03.png" alt="Twitter" /></a> <a href="https://mamot.fr/@Mozilla" title="Compte Mastodon Mozilla francophone (@Mozilla@mamot.fr)"><img src="https://blog.mozfr.org/dotclear/public/icone/mammouth_24x24.png" alt="Mastodon" /></a></p>
<p style="margin-left: 2em;">AMO, c’est pour <a href="https://addons.mozilla.org/fr/firefox/" hreflang="fr" title="Modules pour Firefox">addons.mozilla.org</a>.</p>
<h3>Sur le blog d’AMO : <em>Firefox Quantum Extensions Challenge</em></h3>
<p>Mozilla lancé jeudi un concours d’extensions, le <a href="https://extensionschallenge.com/" hreflang="en" title="Firefox Quantum Extensions Challenge">Firefox Quantum Extensions Challenge</a>. Firefox Quantum depuis novembre 2017 a adopté un nouveau modèle pour les extensions, les <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/What_are_WebExtensions" hreflang="fr" title="Qu'est-ce que les WebExtensions, MDN web docs">WebExtensions</a> (multinavigateurs). Mozilla vous demande de tirer parti des <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions">nouvelles API</a> qui sont ajoutées ou améliorées pour chaque version de Firefox.</p>
<p>Vous avez jusqu’au 15 avril pour soumettre une extension dans une des catégories du concours. Les extensions obsolètes adaptées pour les WebExtensions et les extensions portées depuis Chrome sont aussi éligibles.</p>
<p>Le jury sélectionnera trois ou quatre finalistes dans chaque catégorie et les membres de la communauté seront invités à choisir les vainqueurs qui seront annoncés avec la sortie de Firefox 60 en mai.</p> <p><a href="https://extensionschallenge.com/" title="Firefox Quantum Extensions Challenge"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Firefox_Quantum_Extensions_Challenge.png" alt="Firefox Quantum Extensions Challenge" style="display:table; margin:0 auto; width: 400px;" /></a></p>
<p>Tout savoir :</p>
<ul>
<li><a href="https://blog.mozilla.org/addons/2018/03/15/firefox-quantum-extensions-challenge/">le billet du blog d’AMO</a></li>
<li><a href="https://hacks.mozilla.org/2018/03/firefox-quantum-extensions-challenge/" hreflang="en" title="Firefox Quantum Extensions Challenge (15 mars 2018) Caitlin Neiman, Mike Conca, Mozilla Hacks">le billet du blog Mozilla Hacks</a></li>
<li><a href="https://extensionschallenge.com/" hreflang="en" title="Firefox Quantum Extensions Challenge">Firefox Quantum Extensions Challenge</a></li>
</ul>
<div style="text-align:center; margin-top: 2em;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/OTAEgTRLiIY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<em style="display: block; text-align:center;">Firefox Quantum Extensions Challenge, <a href="https://youtu.be/OTAEgTRLiIY" hreflang="en" title="Firefox Quantum Extensions Challenge (ajoutée le 14 mars 2018) sur la chaîne YouTube de Mozilla Hacks">sur YouTube</a> (48 s)</em>
</div>
<h3>Revues d’extension</h3>
<h4>Bookmarks Organizer</h4>
<p>GHacks nous annonce la <a href="https://www.ghacks.net/2018/03/14/bookmarks-organizer-2-0-for-firefox-released/" hreflang="fr" title="Bookmarks Organizer 2.0 for Firefox released (14 mars 2018) Martin Brinkmann, gHacks">sortie de la version 2.0</a> de <a href="https://addons.mozilla.org/fr/firefox/addon/bookmarks-organizer/" hreflang="en" title="Bookmarks Organizer – Module pour Firefox de Sören Hentzschel">Bookmarks Organizer</a>. Nous vous avions <a href="https://blog.mozfr.org/post/2017/05/Grand-menage-printemps-marque-pages-Firefox" hreflang="fr" title="Grand ménage de printemps dans vos marque-pages de Firefox (23 mai 2017) Communauté Mozilla francophone">présenté cette extension</a> en mai dernier.</p>
<p><em>Bookmarks Organizer 2.0</em> gère vos marque-pages et recherche principalement les doublons, les URL cassées et les redirections. Il vous permet de corriger facilement les erreurs en supprimant les marque-pages ou corrigeant les redirections.</p>
<p>Pour utiliser cette nouvelle version vous aurez besoin de Firefox 59 minimum.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/firefox-bookmarks-organizer-2.0.jpg" title="Firefox Bookmarks Organizer 2.0"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/firefox-bookmarks-organizer-2.0.jpg" alt="Firefox Bookmarks Organizer 2.0" style="display:table; margin:0 auto;" /></a>
<em style="display: block; text-align:center;">Crédit gHacks</em></p>
<p>La nouvelle version de l’extension utilise l’étouffement des requêtes pour éviter trop d’exécutions simultanées de requêtes. La fonctionnalité peut prolonger le temps d’analyse, mais elle réduit le nombre de faux positifs, car moins d’URL brisées sont trouvées lors des analyses.</p>
<p>Autres nouvelles fonctionnalités de <em>Bookmarks Organizer 2.0</em> :</p>
<ol>
<li>Les séparateurs de marque-pages ne sont plus inclus dans le nombre total de marque-pages ni dans la liste des résultats.</li>
<li>Le raccourci clavier a été changé pour <kbd>MAJ+F11</kbd> pour résoudre un conflit.</li>
<li>Correction du deuxième contrôle des signets en utilisant une méthode différente, car il n’était parfois pas exécuté.</li>
<li>Légères améliorations des performances.</li>
<li>Traductions en différentes langues.</li>
</ol>
<p><br />
<em>N’hésitez pas à nous signaler des revues d’extensions en français ou en anglais qui apparaîtraient sur vos radars (même si vous en êtes l’auteur).</em></p>
<h4>Save In…</h4>
<p><a href="https://addons.mozilla.org/fr/firefox/addon/save-in/" hreflang="en" title="Save In… - Module pour Firefox de gyng">Save In…</a> est une extension pour utilisateur un peu débrouillard à avancé.</p>
<p>GHacks <a href="https://www.ghacks.net/2018/03/15/save-in-switch-between-multiple-download-folders-in-firefox/" hreflang="en" title="Save In: use multiple download folders in Firefox or Chrome (15 mars 2018) Martin Brinkmann, gHacks Tech News">nous présente cette extension</a> « que vous pouvez utiliser pour ajouter plusieurs dossiers de téléchargement à Firefox pour passer d’un dossier à l’autre quand vous télécharger des fichiers. »</p>
<blockquote cite="https://addons.mozilla.org/fr/firefox/addon/save-in/">
<p>Save In… ajoute un menu contextuel pour enregistrer des médias (image, vidéo, audio, lien, sélection, page) dans des dossiers déterminés par l’utilisateur comme sous-dossiers du dossier de téléchargement par défaut.</p>
</blockquote>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Save_In.png" title="Save In"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Save_In.png" alt="Save In" style="display:table; margin:0 auto;" /></a>
<em style="display: block; text-align:center;">Crédit gyng sur AMO</em></p>
<h4>Session Boss</h4>
<p><a href="https://www.ghacks.net/2018/03/12/save-and-restore-firefox-tabs-with-session-boss/" hreflang="fr" title="Save and restore Firefox tabs with Session Boss (12 mars 2018) Martin Brinkmann, gHacks">GHacks nous a présenté</a> le 12 mars l’extension <a href="https://addons.mozilla.org/fr/firefox/addon/session-boss/" hreflang="en" title="Session Boss – Module pour Firefox de William Wng">Session Boss</a> pour sauvegarder et restaurer vos onglets.</p>
<p style="text-align:center;"><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Session_Boss.png" title="Session Boss"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Session_Boss.png" alt="Session Boss" style="width: 310px;" /></a> <a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Session_Boss_2.png" title="Session Boss"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Session_Boss_2.png" alt="Session Boss" style="width: 310px;" /></a>
<em style="display: block;">Crédit William Wng sur AMO</em></p>
<p>Cette extension récente, mise à jour en dernier le 14 mars, propose déjà des nombreuses fonctionnalités et en ajoute régulièrement.</p>
<p><em>N’hésitez pas à nous dire ce que vous pensez de cette extension, notamment si vous en avez essayé d’autres ou si vous en avez utilisé d’autres maintenant obsolètes.</em></p>
<h3>Sélection d’extensions mises à jour</h3>
<p>Cette sélection est toute personnelle parmi les nombreuses extensions mises à jour au cours de la semaine et sera donc totalement subjective.</p>
<h4>In-Page Pop-up Reporter</h4>
<p>Ehsan Akhgari a annoncé que Firefox allait être équipé d’un bloqueur de <em>pop-ups</em> internes aux pages web (parfois appelées <em>pop-ins</em>). Il en appelle aux utilisateurs de Firefox pour constituer un jeu de données des URL des pages qui contiennent ce genre de boîtes agaçantes masquant le contenu des pages web.</p>
<p>Alors que Mozilla expérimente ce bloqueur automatique, il vous propose une extension <a href="https://addons.mozilla.org/fr/firefox/addon/in-page-pop-up-reporter/" hreflang="en" title="In-Page Pop-up Reporter – Module pour Firefox d’Ehsan Akhgari">In-Page Pop-up Reporter</a> pour Firefox et Firefox pour Android 48+ qui a été travaillée pour être compatible avec Chrome.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/in-page-pop-up-reporter.png" title="In-Page Pop-up Reporter"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/in-page-pop-up-reporter.png" alt="In-Page Pop-up Reporter" style="display:table; margin:0 auto;" /></a>
<em style="display: block; text-align:center;">Crédit Ehsan Akhgari sur AMO</em></p>
<h4>Greasemonkey</h4>
<p><a href="https://addons.mozilla.org/fr/firefox/addon/greasemonkey/" hreflang="en" title="Greasemonkey – Module pour Firefox d'Anthony Lieuallen">Greasemonkey</a> vous permet de modifier l’affichage et le comportement des pages web grâce à des scripts utilisateur, des petits bouts de code JavaScript. Ces scripts peuvent être installés – avec précaution – depuis des <a href="https://wiki.greasespot.net/User_Script_Hosting" hreflang="en" title="User Script Hosting – GreaseSpot Wiki">dépôts d<em>‘userscripts</em></a>.</p>
<p>La version 4.2 sortie cette semaine se déclare compatible avec Firefox pour Android.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Greasemonkey.png" title="Greasemonkey"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Greasemonkey.png" alt="Greasemonkey" style="display:table; margin:0 auto;" /></a>
<em style="display: block; text-align:center;">Crédit Anthony Lieuallen sur AMO</em></p>
<h4>Print Edit</h4>
<p><em>Print Edit</em> était le <a href="https://blog.mozfr.org/post/2016/12/Pour-une-impression-plus-durable-Calendrier-Avent-Jour-22" hreflang="fr" title="Pour une impression plus durable – Calendrier de l’Avent – Jour 22 (22 déc. 2016) Communauté Mozilla francophone">22ᵉ jour</a> de notre <a href="https://blog.mozfr.org/post/2016/12/calendrier-avent-toutes-nos-extensions-de-firefox" hreflang="fr" title="Calendrier de l’Avent : toutes nos extensions de Firefox (25 déc. 2016) Communauté Mozilla francophone">Calendrier de l’Avent 2016</a>. Sa <a href="https://addons.mozilla.org/fr/firefox/addon/print-edit-we/" hreflang="en" title="Print Edit WE –Y Module pour Firefox de DW-dev">version en WebExtension</a> compatible avec Firefox Quantum est mis en avant par AMO. Ses versions de la semaine 11 de 2018 apportent de nouvelles fonctionnalités, des changements aux fonctionnalités existantes et des correctifs.</p>
<p style="text-align:center;"><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Print_Edit.png" title="Print Edit"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Print_Edit.png" alt="Print Edit" style="width: 310px;" /></a> <a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Print_Edit_2.png" title="Print Edit"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Print_Edit_2.png" alt="Print Edit" style="width: 310px;" /></a>
<em style="display: block; text-align:center;">Crédit DW-dev sur AMO</em></p>
<h4>Save Page</h4>
<p>Du même auteur, <a href="https://addons.mozilla.org/fr/firefox/addon/save-page-we/" hreflang="en" title="Save Page WE – Module pour Firefox de DW-dev">Save Page <abbr title="WebExtension">WE</abbr></a> vous permet d’enregistrer une page web entière (ou uniquement son état actuel) comme un fichier HTML unique augmenté qui peut être affiché dans n’importe quel navigateur web.</p>
<p style="text-align:center;"><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Save_Page_WE_Google.png" title="Save Page WE pour Google"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Save_Page_WE_Google.png" alt="Save Page WE pour Google" style="width: 310px;" /></a> <a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Save_Page_WE_Wikipedia.png" title="Save Page WE pour Wikipédia"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Save_Page_WE_Wikipedia.png" alt="Save Page WE pour Wikipédia" style="width: 310px;" /></a>
<em style="display: block; text-align:center;">Crédit DW-dev sur AMO</em></p>
<p>En fin de page d’AMO, un tutoriel vous explique comment convertir et enregistrer les fichiers <abbr title="Mozilla Archive Format">MAF</abbr> et UnMHT produits par d’anciennes extensions maintenant obsolètes.</p>
<h4>Exodify</h4>
<p><a href="https://addons.mozilla.org/fr/firefox/addon/exodify/" hreflang="en" title="Exodify – Module pour Firefox de Facetts Open">Exodify</a> ajoute le nombre des traqueurs et des permissions sur la boutique d’applications de Google pour Android, le <em>Google Play</em>. Cette extension utilise les rapports fournis par <a href="https://exodus-privacy.eu.org/" hreflang="en" title="Exodus Privacy">Exodus Privacy</a> afin d’ajouter directement ces informations dans les pages de la boutique de Google.</p>
<p><em>Εxodus</em> est une plateforme réalisant des audits au regard de la vie privée des applications Android. Elle détecte les comportements qui peuvent se révéler dangereux pour la vie privée de l’utilisateur tel que les pubs, le pistage, l’analytique, etc.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Exodify.png" title="Exodify"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/semaine/2018-11/Exodify.png" alt="Exodify" style="display:table; margin:0 auto;" /></a>
<em style="display: block; text-align:center;">Crédit Facetts Open sur AMO</em></p>
<h3>Les extensions sur SUMO</h3>
<p>L’assistance officielle de Firefox traduite par des bénévoles de la communauté (<a href="https://support.mozilla.org/fr/get-involved" hreflang="fr" title="Assistance de Mozilla : Sauvez le monde depuis le confort de votre canapé">rejoignez-les</a>) a des tutoriels sur les extensions. Ainsi, on vous explique comment <a href="https://support.mozilla.org/fr/kb/trouver-installer-modules-firefox" hreflang="fr" title="Trouver et installer les modules complémentaires pour ajouter des fonctionnalités à Firefox – Assistance de Firefox">trouver et installer les modules complémentaires pour ajouter des fonctionnalités à Firefox</a>.</p>
<h3>Rencontre et hackathon à Mozilla Paris</h3>
<p>Restez branchés sur ce blog et nos réseaux sociaux, vous aurez bientôt des nouvelles d’un week-end dans les locaux de Mozilla à Paris pour en apprendre davantage sur les WebExtensions, leur actualité et comment en développer.</p>
<p style="margin-left: 1em; border-left: 3px solid grey; padding-left: 0.5em;"><a href="https://blog.mozfr.org/post/2017/12/probleme-avec-Firefox-assistance-Mozilla" hreflang="fr" title="J'ai un problème avec Firefox ! [MÀJ] (13 févr. 2018) Communauté Mozilla francophone">J’ai un problème avec Firefox !</a> et comment y remédier.</p>
<p><br />
<em>On espère vraiment que ça vous a plu et que vous nous donnerez votre avis, voire plus.</em></p>
<address><br />
<a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">Mozinet</a>
</address>
<p><em>Notre précédente actualité :</em> <a href="https://blog.mozfr.org/post/2018/03/semaine-extensions-Firefox-2018-10" hreflang="fr" title="Une semaine d'extensions Firefox – 2018-10 (13 mars 2018) Communauté Mozilla francophone">Une semaine d’extensions Firefox – 2018-10</a></p>Au cœur d'un moteur CSS super rapide : Quantum CSSurn:md5:c147e04522792a1cddbc8183e15dacac2017-09-02T14:00:00+02:002017-12-17T20:53:19+01:00MozinetFirefoxcodecommdéveloppementFirefoxGoogleHTMLimageinformatiqueingénierieMicrosoftMozillanavigationNightlyQuantumRustServoWebWebKit<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/01.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/.01-500x317_s.png" alt="Dessin de Lin Clark" style="float:right; margin: 0 0 1em 1em;" /></a> <strong>Quantum</strong>, le gros truc qui arrive pour Mozilla, et qui va révolutionner Firefox et le petit monde des navigateurs, on vous en a <a href="https://blog.mozfr.org/tag/Quantum" hreflang="fr" title="Mot-clé Quantum – Communauté Mozilla francophone">déjà parlé</a> : <a href="https://blog.mozfr.org/post/2016/10/Quantum-va-vous-faire-reaimer-Firefox-et-le-Web" hreflang="fr" title="Quantum va vous faire réaimer Firefox et le Web (30 oct. 2016) Communauté Mozilla francophone">sur ce blog</a> et <a href="https://tech.mozfr.org/post/2016/10/27/Un-saut-quantique-pour-le-Web" hreflang="fr" title="Un saut quantique pour le Web (29 oct. 2016) Bidouilleux d'Web">sur notre blog technique</a>. Sur ce dernier blog, un <a href="https://tech.mozfr.org/post/2016/10/28/Le-projet-Quantum-de-Mozilla-%3A-des-ambitions-et-des-precisions" hreflang="fr" title="Le projet Quantum de Mozilla, des ambitions et des précisions (29 oct. 2016) Bidouilleux d'Web">autre article</a> vous présentait les 4 sous-projets de Quantum qui vont remplacer autant de composants de <strong>Gecko, le moteur de rendu de Firefox</strong>. Le premier est <strong>Quantum CSS</strong> qui « remplacera le moteur CSS de Gecko par celui de <strong>Servo</strong>. Le moteur de Servo permet un parallélisme massif, pas celui de Gecko. »</p>
<p style="margin-left: 1em; border-left: 3px solid grey; padding-left: 0.5em;">(Re)lire : <a href="https://blog.mozfr.org/post/2017/01/Remplacer-moteur-avion-en-plein-vol" hreflang="fr" title="Remplacer le moteur de l'avion en plein vol (6 janv. 2017) Jen Simmons traduite par la communauté Mozilla francophone">Remplacer le moteur de l’avion en plein vol</a></p>
<p>Depuis, <strong>Lin Clark</strong>, ingénieure de l’équipe des relations avec les développeurs de Mozilla, et qui, non seulement, joue avec JavaScript, WebAssembly, Rust et Servo, mais aussi dessine des BD pour illustrer le code, a rédigé un <a href="https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/" hreflang="fr" title="Inside a super fast CSS engine: Quantum CSS (aka Stylo) (22 août 2017) Lin Clark, Mozilla Hacks">billet pédagogique</a> sur <em>Mozilla Hacks</em>, le blog des développeurs web de Mozilla. Elle nous y initie au <a href="https://developer.mozilla.org/fr/docs/Web/CSS" hreflang="fr" title="CSS – MDN">CSS</a> – les feuilles de style qui décrivent comment doivent être affichés les éléments <a href="https://developer.mozilla.org/fr/docs/Web/HTML" hreflang="fr" title="HTML (HyperText Markup Language) – MDN">HTML</a> (l’ossature de la page web) – et nous y explique ce que fait un moteur de rendu CSS et comment Quantum CSS le fait beaucoup mieux.</p>
<p>Nous avons collaboré avec la communauté LinuxFr pour vous offrir une traduction de ce long article passionnant :</p>
<h3>Au cœur d’un moteur CSS super rapide : Quantum CSS (alias Stylo)</h3>
<p>Vous avez sûrement entendu parler du projet <a href="https://wiki.mozilla.org/Quantum" hreflang="en" title="Quantum – Mozilla Wiki">Quantum</a>… c’est une réécriture majeure des entrailles de Firefox pour le rendre rapide. Nous intégrons actuellement dans Firefox des parties de notre navigateur web expérimental, <a href="https://servo.org/" hreflang="en" title="Servo, the parallel browser engine">Servo</a>, et nous faisons d’importantes améliorations sur d’autres parties.</p>
<p>Le projet peut être illustré par le remplacement en vol des pièces d’un jet. Les changements se font sur place, pièce par pièce, pour que vous puissiez voir les résultats dans Firefox le plus tôt possible dès qu’une pièce est prête.</p> <p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/01.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/01-500x317.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Et le premier composant majeur de Servo – un nouveau moteur CSS appelé Quantum CSS (connu auparavant sous le nom de Stylo) – est maintenant en cours de test dans la version Nightly de Firefox. Vous pouvez vérifier que le nouveau moteur est activé chez vous : dans la page <code>about:config</code>, vérifiez que le paramètre <code>layout.css.servo.enabled</code> est à <em>true</em>.</p>
<p>Ce nouveau moteur rassemble les innovations de l’état de l’art de quatre navigateurs web différents pour créer un super moteur CSS.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/02.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/02-500x380.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Il profite des matériels modernes en parallélisant le travail à travers tous les cœurs de votre machine. Il peut donc fonctionner deux, quatre ou même dix-huit fois plus rapidement.</p>
<p>En plus de cette amélioration, il combine l’état de l’art des optimisations utilisées par les autres navigateurs web. Ainsi, même si la parallélisation n’est pas utilisée, il s’agira toujours d’un moteur CSS rapide.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/03.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/03-500x179.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Mais que fait un moteur CSS ? Commençons par inspecter le moteur CSS et comment il s’insère dans le reste du navigateur. Ensuite, nous verrons comment Quantum CSS fait pour tout accélérer.</p>
<h4>Que fait un moteur CSS ?</h4>
<p>Le moteur CSS est une partie du moteur de rendu du navigateur. Le moteur de rendu prend le code HTML et les fichiers CSS d’un site web et les transforme en pixels sur l’écran.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/04.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/04-500x133.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Chaque navigateur web a son propre moteur de rendu. Dans Chrome, il s’appelle Blink. Dans Edge, c’est EdgeHTML. Dans Safari, il s’agit de Webkit. Et dans Firefox, il s’appelle Gecko.</p>
<p>Pour passer des fichiers aux pixels, tous ces moteurs de rendu font essentiellement les mêmes choses :</p>
<ol>
<li>Analyser les fichiers et les transformer en objets que le navigateur peut comprendre, dont le DOM. À cette étape, le DOM connaît déjà toute la structure de la page. Il sait tout sur les relations parents-enfants entre les éléments. Par contre, il ne connaît pas l’aspect visuel de chacun de ces éléments.<br /><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-01.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-01-500x349.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></li>
<li>Comprendre comment les éléments devraient apparaître. Pour chaque nœud DOM, le moteur CSS recherche les règles CSS à appliquer. Ensuite, il retrouve la valeur de chacune des propriétés CSS pour ce nœud DOM.<br /><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-02.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-02-500x340.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></li>
<li>Mesurer les dimensions pour chaque nœud et leur emplacement sur l’écran. Des boîtes sont créées pour chaque chose qui peut être affichée à l’écran. Les boîtes ne représentent pas seulement les nœuds DOM… vous avez aussi des boîtes pour des choses à l’intérieur des nœuds DOM, comme des lignes de texte.<br /><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-3.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-3-500x371.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></li>
<li>Dessiner les différentes boîtes. Cela peut demander de nombreux calques. Je me représente cela comme les anciennes animations peintes à la main, avec différents papiers calques superposés comme une peau d’oignon. Cela permet de modifier juste un calque sans avoir à tout redessiner.<br /><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-04.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-04-500x356.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></li>
<li>Prendre ces différents calques, appliquer les propriétés de composition – comme les transformations – et les changer en image. C’est essentiellement comme prendre une photo des calques posés les uns sur les autres. Cette image est ensuite rendue sur l’écran.<br /><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-05.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/05-05-500x334.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></li>
</ol>
<p>Ainsi, quand il commence à calculer les styles, le moteur CSS a deux outils à disposition :</p>
<ul>
<li>un arbre DOM ;</li>
<li>une liste de règles de style.</li>
</ul>
<p>Il parcourt tous les nœuds DOM, un par un, et pour chaque nœud il retrouve les styles associés. Durant ce processus, il donne au nœud DOM une valeur pour toutes les propriétés CSS, même si les feuilles de style ne déclarent pas de valeur pour certaines propriétés.</p>
<p>Je me l’imagine comme une personne qui est face à un formulaire et le remplit. Il a besoin de remplir un formulaire pour chacun des nœuds DOM. Et pour chacune des questions, il doit avoir une réponse.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/06.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/06-500x296.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Pour le remplir, le moteur CSS à besoin de faire deux choses :</p>
<ul>
<li>Trouver quelles règles s’appliquent au nœud — c’est-à-dire <strong>faire correspondre les sélecteurs CSS aux nœuds DOM</strong> ;</li>
<li>Remplir toutes les valeurs manquantes avec les valeurs du parent ou une valeur par défaut – c’est ce qu’on appelle <strong>la cascade</strong>.</li>
</ul>
<h5>Faire correspondre les sélecteurs CSS aux nœuds DOM</h5>
<p>Durant cette étape, nous allons ajouter chaque règle qui correspond au nœud DOM dans une liste. Comme plusieurs règles peuvent correspondre, il pourrait y avoir plusieurs déclarations de valeur pour une même propriété.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/07.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/07-500x407.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>En plus des règles déclarées par le code du site, le navigateur ajoute lui-même certains CSS par défaut (appelés feuilles de style de l’agent de l’utilisateur). Comment le moteur CSS peut-il déterminer la bonne valeur ?</p>
<p>C’est ici que le principe de la spécificité des déclarations CSS intervient. Le moteur CSS crée en gros une feuille de calcul avec pour chaque ligne une déclaration CSS. Ensuite, il ordonne les lignes en fonction des différentes colonnes.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/08.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/08-500x210.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>La règle CSS définie avec la plus grande spécificité gagne. Ainsi depuis cette feuille de calcul, le moteur CSS est capable de remplir les valeurs dans le formulaire. Pour l’instant, il ne remplit que les valeurs déclarées explicitement par des règles du code CSS du site.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/09.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/09-500x297.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Pour le reste, il va devoir utiliser la cascade.</p>
<h5>La cascade</h5>
<p>Le principe de la cascade rend le code CSS plus facile à écrire et maintenir. Grâce à la cascade, vous pouvez paramétrer la propriété <code>color</code> une fois sur le corps de la page <code>body</code> et vous savez que le texte des éléments <code>p</code>, <code>span</code> et <code>li</code> utilisera la même couleur (à moins d’avoir une règle plus spécifique qui surpassera cette valeur).</p>
<p>Pour arriver à ce résultat, le moteur CSS regarde tous les blancs qui restent dans le formulaire. Si une propriété hérite par défaut la valeur de l’élément parent, alors le moteur CSS remonte l’arbre DOM et regarde si le parent a une valeur. Si aucune valeur n’est déclarée pour le parent ou si une propriété n’hérite pas, il utilise la valeur par défaut.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/10.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/10-500x295.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Maintenant tous les styles ont été calculés pour ce nœud DOM.</p>
<h5>Quelques précisions : le partage des structures de styles</h5>
<p>Le formulaire que je vous ai montré est une simplification. Le standard CSS a des centaines de propriétés. Si le moteur CSS tenait pour chaque nœud DOM la liste de chaque propriété avec une valeur, il serait rapidement à court de mémoire.</p>
<p>Ainsi, au lieu de tenir de tels formulaires, les moteurs utilisent généralement ce qu’on appelle le partage des structures de styles. Ils enregistrent les données qui vont habituellement ensemble (comme toutes les propriétés de police d’écriture) dans un même objet appelé structure de styles. Ensuite, plutôt que d’avoir toutes les propriétés dans un même objet pour un nœud, l’objet contenant le style calculé du nœud est un ensemble de pointeurs. Pour chaque catégorie de propriétés, il y a un pointeur vers une structure de styles qui a les bonnes valeurs pour ce nœud DOM.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/11.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/11-500x184.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Cette technique permet à la fois de réduire l’espace mémoire et le temps de traitement nécessaire. Tous les nœuds qui ont des propriétés proches (comme les jumeaux) peuvent simplement pointer vers les mêmes structures pour les propriétés partagées. Et comme beaucoup de propriétés sont héritées, un ancêtre peut partager une structure avec tous ses descendants qui n’ont pas de déclaration de valeur plus spécifique.</p>
<h4>Maintenant, comment peut-on faire tout cela rapidement ?</h4>
<p>Voici à quoi ressemblent les calculs de styles si vous ne les avez pas optimisés.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/12.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/12-500x219.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Il y a beaucoup de travail qui se passe ici. Et pas seulement au premier chargement de la page. Le travail doit être refait encore et encore tant que l’utilisateur interagit avec la page, en passant la souris par-dessus des éléments (<em>hover</em>) ou en modifiant le DOM, déclenchant à nouveau le calcul des styles.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/13.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/13-500x116.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Ainsi, le calcul des styles CSS est un très bon candidat pour l’optimisation… et les navigateurs ont testé différentes stratégies pour l’optimiser durant ces 20 dernières années. Ce que Quantum CSS fait est de prendre le meilleur des stratégies des différents moteurs, de les combiner et de créer un nouveau moteur très rapide.</p>
<p>Examinons donc en détails comment faire fonctionner ensemble ces stratégies.</p>
<h5 id="parallel-807">Tout faire en parallèle</h5>
<p>Le projet Servo (d’où vient le moteur Quantum CSS) est un navigateur expérimental qui essaie de paralléliser toutes les différentes parties de la création de rendu d’une page web. Qu’est-ce que cela signifie ?</p>
<p>Un ordinateur ressemble à un cerveau. Il y a une partie qui pense (l’ALU). Très proche de celle-ci il y a une mémoire à court terme (les registres). Ces parties rassemblées forment le processeur (CPU). Ensuite, il y a la mémoire à long terme, la RAM.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/14.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/14-500x332.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Les premiers ordinateurs ne pouvaient penser qu’à une chose à la fois en utilisant ce CPU. Mais ces dernières années, les CPU ont évolué pour avoir plusieurs ALU et registres, regroupés en cœurs. C’est-à-dire que le CPU peut penser à plusieurs choses en même temps – en parallèle.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/15.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/15-500x243.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Quantum CSS utilise cette fonctionnalité récente sur les ordinateurs en partageant le calcul des styles pour les différents nœuds DOM à travers les différents cœurs.</p>
<p>Cela paraît être facile à faire… simplement partager les branches de l’arbre DOM et les envoyer aux différents cœurs. C’est en réalité beaucoup plus difficile et ce pour plusieurs raisons. Une de ces raisons est que l’arbre DOM est souvent déséquilibré. Ainsi, un cœur aura beaucoup plus de travail que les autres.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/16.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/16-500x530.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p id="vol-travail-807">Pour répartir le travail plus équitablement, Quantum CSS utilise une technique nommée le vol de travail. Quand un nœud DOM est en train d’être analysé, le code reprend ses enfants directs et les partage en une ou plusieurs « unités de travail ». Ces unités de travail sont mises dans une queue.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/17.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/17-500x362.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Quand un cœur finit le travail de sa queue, il regarde la queue des autres pour trouver plus de travail à faire. Ainsi, nous pouvons séparer équitablement le travail sans perdre du temps pour traverser l’arbre et chercher comment l’équilibrer à l’avance.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/18.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/18-500x356.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Dans la plupart des navigateurs, il serait très difficile de le faire bien. Le parallélisme est un problème connu pour être difficile et le moteur CSS est très complexe. Il s’insère aussi entre les deux autres parties les plus complexes d’un moteur de rendu – le DOM et l’affichage. Ainsi, il est très facile de créer des bogues, et quand le parallélisme engendre des bogues, qui sont très difficiles à résoudre, ils sont appelés courses de données (<em>data races</em>). J’approfondis les explications sur ce type de problèmes dans <a href="https://hacks.mozilla.org/2017/06/avoiding-race-conditions-in-sharedarraybuffers-with-atomics/#data-race" hreflang="en" title="Avoiding race conditions in SharedArrayBuffers with Atomics (14 juin 2017 Lin Clark, Mozilla Hacks">un autre article</a>.</p>
<p>Quand vous acceptez des contributions de centaines ou de milliers d’ingénieurs, comment pouvez-vous créer un programme parallélisé sans être effrayé ? C’est pour cela que nous avons Rust.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/19.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/19-500x221.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Avec Rust, vous pouvez vérifier statiquement que vous n’aurez pas de courses de données. C’est-à-dire que vous empêchez l’apparition de bogues difficiles à résoudre, simplement en vous empêchant de les créer dans votre code dès le début. Le compilateur ne vous laissera pas faire. Je suis en train d’écrire d’autres articles à ce sujet. Pour l’instant, vous pouvez voir <a href="https://www.youtube.com/watch?v=cNeIOt8ZdAY" hreflang="en" title="Unlocking the Power of Parallelism with Rust – Mozilla ♥ Rust (ajoutée le 17 nov. 2016) chaîne YouTube de Mozilla Hacks (5 min 44)">cette vidéo d’introduction au sujet du parallélisme dans Rust</a> ou <a href="https://www.youtube.com/watch?v=gof_OEv71Aw" hreflang="en" title="Rayon: Data Parallelism for Fun and Profit – Nicholas Matsakis (ajoutée le 9 janv. 2017) chaîne YouTube de Rust Belt Rust Conference">celle-ci qui est une discussion plus détaillée sur le vol de travail</a>.</p>
<p>Avec tout ceci, le calcul des styles CSS évolue de ce que nous appelions « un difficile problème de parallélisme » à « de très petits problèmes bloquant pour une exécution en parallèle efficace ». C’est-à-dire que nous pouvons nous rapprocher d’une accélération linéaire en termes de vitesse. Si vous avez 4 cœurs dans votre machine, alors cela pourra s’exécuter presque 4 fois plus vite.</p>
<h5>Accélérer les recalculs de style avec l’arbre des règles</h5>
<p>Pour chaque nœud DOM, le moteur CSS doit traverser toutes les règles pour faire la correspondance des sélecteurs CSS. Pour la plupart des nœuds, les correspondances ne changeront pas souvent. Par exemple, si l’utilisateur passe la souris sur un parent, les règles qui y sont liées pourraient changer. Nous devons donc encore recalculer les styles pour ses descendants pour appliquer correctement les propriétés héritées, mais les règles correspondant à ses descendants ne changeront probablement pas.</p>
<p>Ce serait mieux si nous pouvions simplement noter quelles règles correspondent à chaque descendant et ne pas avoir besoin de refaire le calcul des correspondances pour eux de nouveau… c’est ce que l’arbre des règles – emprunté du précédent moteur CSS de Firefox – fait.</p>
<p>Le moteur CSS effectue la recherche des sélecteurs qui correspondent et ensuite les trie par spécificité. De ceci, il crée une liste chaînée de règles.</p>
<p>Cette liste sera ajoutée à l’arbre des règles.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/20.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/20-500x189.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Le moteur CSS essaie de conserver le plus petit nombre de branches dans l’arbre. Pour cela, il essaie de réutiliser une branche dès qu’il peut.</p>
<p>Si la plupart des sélecteurs dans une liste sont les mêmes que dans une branche existante, alors il suivra le même chemin. Mais il pourrait atteindre un point où la règle suivante dans la liste n’est pas dans cette branche de l’arbre. Seulement à ce point il ajoute une nouvelle branche.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/21.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/21-500x298.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Le nœud DOM recevra un pointeur vers la règle qui a été insérée en dernier (dans cet exemple, la règle <code>div#warning</code>). C’est la plus spécifique.</p>
<p>Lors d’un recalcul de styles, le moteur fera une vérification rapide pour voir si le changement du parent modifie les règles qui correspondent aux enfants. Si les correspondances ne changent pas, alors pour tous les descendants, le moteur peut juste suivre le pointeur du nœud descendant pour obtenir la règle. De là, il peut remonter l’arbre jusqu’à la racine pour obtenir une liste complète de règles correspondantes, de la plus spécifique à la moins spécifique. Cela signifie qu’il peut complètement outrepasser les étapes de recherche de correspondance de sélecteurs et de leur tri.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/22.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/22-500x174.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Ainsi, cela aide à réduire le travail nécessaire durant le recalcul de styles. Mais il y a encore beaucoup de travail pour le premier calcul de styles. Si vous avez 10 000 nœuds, vous devez toujours faire la recherche de correspondance des sélecteurs 10 000 fois. Mais il y a un autre moyen d’accélérer tout ceci.</p>
<h5>Accélérer le rendu initial (et la cascade) avec le cache partagé des styles</h5>
<p>Pensez à une page avec des milliers de nœuds. Beaucoup de ces nœuds correspondront aux mêmes règles. Par exemple, pensez à un long article Wikipédia… les paragraphes dans le contenu principal devraient tous suivre exactement les mêmes règles et avoir donc les mêmes styles calculés.</p>
<p>S’il n’y avait pas d’optimisation, alors le moteur CSS devrait faire la correspondance des sélecteurs et calculer les styles pour chaque paragraphe individuellement. Mais s’il y avait un moyen pour prouver que les styles seront les mêmes d’un paragraphe à l’autre, alors le moteur ne devrait faire ce travail qu’une fois et il ferait pointer chaque nœud de paragraphe au même style calculé.</p>
<p>C’est ce que le cache partagé des styles – inspiré par Safari et Chrome – fait. Après avoir traité un nœud, il met le style calculé dans le cache. Ensuite, avant de débuter le calcul de styles du nœud suivant, il lance quelques vérifications pour voir s’il peut réutiliser les données du cache.</p>
<p>Ces vérifications sont :</p>
<ul>
<li>Est-ce que les deux nœuds ont les mêmes identifiants, classes, etc ? Si oui, alors ils vont correspondre aux mêmes règles.</li>
<li>Pour ceux qui ne sont pas stylés depuis les sélecteurs – les styles <em>inline</em> par exemple –, est-ce que les nœuds ont les mêmes valeurs ? Dans ce cas, les règles au-dessus soit ne seront pas surchargées, soit elles seront surchargées, mais de la même manière.</li>
<li>Est-ce que les deux parents pointent vers le même objet de styles calculés ? Si oui, alors les valeurs héritées seront identiques.</li>
</ul>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/23.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/23-500x505.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Ces vérifications ont été utilisées dès le début des premiers caches de styles partagés. Mais il y a beaucoup d’autres petits cas où les styles pourraient ne pas correspondre. Par exemple, si une règle CSS utilise le sélecteur <code>:first-child</code>, alors deux paragraphes ne pourraient pas correspondre, même quand les vérifications ci-dessus suggèrent que oui.</p>
<p>Dans WebKit et Blink, le cache partagé de styles est abandonné dans ces cas et le cache n’est pas utilisé. Comme de plus en plus de sites utilisent ces sélecteurs modernes, l’optimisation a été de moins en moins utile, à tel point que l’équipe Blink l’a récemment enlevée. Mais il s’avère qu’il y a un moyen d’utiliser le cache de styles partagés avec ces changements.</p>
<p>Dans Quantum CSS, nous rassemblons tous ces sélecteurs bizarres et vérifions s’ils s’appliquent au nœud DOM. Ensuite, nous stockons les réponses avec des uns et des zéros. Si les deux éléments ont le même nombre de uns et de zéros, nous savons qu’ils correspondent effectivement.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/24.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/24-500x195.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<p>Si un nœud DOM peut partager des styles qui ont déjà été calculés, vous pouvez passer outre presque tout le travail. Comme les pages ont souvent beaucoup de nœuds DOM avec les mêmes styles, le cache de styles partagés peut économiser beaucoup de mémoire et vraiment accélérer les choses.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/25.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/quantum/stylo/25-500x166.png" alt="Dessin de Lin Clark" style="display:table; margin:0 auto;" /></a></p>
<h4>Conclusion</h4>
<p>C’est le premier grand transfert de technologie de Servo vers Firefox. Durant ce chemin, nous avons beaucoup appris sur la manière d’apporter du code moderne et performant écrit en Rust dans le cœur de Firefox.</p>
<p>Nous sommes vraiment enthousiastes d’avoir rendu disponible cette grosse pièce du projet Quantum aux utilisateurs pour qu’ils l’expérimentent directement. Nous sommes très heureux de vous laisser l’essayer et, si vous rencontrez le moindre problème, faites-le-nous savoir.</p>
<p>-- <a href="https://code-cartoons.com/" hreflang="en" title="Code Cartoons">Lin Clark</a></p>
<hr />
<p>Adrien Dorsaz s’est lancé dans la traduction du billet de Lin Clark. La communauté de LinuxFr a relu le texte avant <a href="https://linuxfr.org/news/les-entrailles-d-un-interpreteur-css-tres-rapide-quantum-css-alias-stylo" hreflang="fr" title="Les entrailles d'un interpréteur CSS très rapide : Quantum CSS (alias Stylo) (31 août 2017) LinuxFr.org">sa publication sur ce site</a>. Avec son aimable assentiment, nous avons repris son texte qui a été relu par la communauté Mozilla francophone dont <a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">Mozinet</a>, <a href="https://twitter.com/Goofy_fr" hreflang="fr" title="Goofy (@Goofy_fr) sur Twitter">Goofy</a> et <a href="https://twitter.com/t_chevalier" hreflang="fr" title="Théo Chevalier (@t_chevalier) sur Twitter">Théo</a>.</p>
<p>Cette traduction comme l’article original et la traduction de LinuxFr sur laquelle elle est basée sont sous licence <a href="https://creativecommons.org/licenses/by-sa/3.0/deed.fr" hreflang="fr" title="Creative Commons — Attribution – partage dans les mêmes conditions 3.0 non transposé — CC BY-SA 3.0">CC By-SA 3.0</a> ou supérieure.</p>
<p><em>Précédent article sur le futur de Firefox :</em> <a href="https://blog.mozfr.org/post/2017/08/Mozilla-developper-Roadshow-ce-qui-arrive" hreflang="fr" title="Mozilla Roadshow : ce qui arrive (20 août 2017) Communauté Mozilla francophone">Mozilla Roadshow : ce qui arrive</a></p>
<p><em>Crédit illustrations :</em> Lin Clark.</p>Thunderbird 52, version majeure annuelleurn:md5:7bb4bf6988fd027dde60cfcc1b961b952017-05-08T10:00:00+02:002017-05-08T10:00:00+02:00MozinetThunderbirdcommcommunauté francophoneGNU LinuxGoogleimagelocalisationLocasprintmacOSMicrosoftMozillaMozillien·ne·sréseaux sociauxsécuritéThunderbirdtraductionvie privéeWindows<p><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/.thunderbird_pieuvre_s.png" alt="Pieuvre Thunderbird" style="float:right; margin: 0 0 1em 1em;" /> Bon, ce n’est pas vraiment une nouvelle fraîche, mais <strong>Thunderbird</strong>, le logiciel autonome de courriel, blogs, messageries instantanées textuelles, Twitter, groupes de discussion… de Mozilla (encore), est sorti dans une <strong>version majeure</strong>. Depuis, une version mineure de stabilité et de sécurité est même sortie fin avril. Suivant le rythme de <abbr title="Extended support release">Firefox ESR</abbr> (édition longue durée pour les organisations et entreprises), Thunderbird connaît une version majeure environ tous les ans et des versions mineures toutes les 6 à 8 semaines.</p>
<p style="margin-left: 1em; border-left: 3px solid grey; padding-left: 0.5em;">Notes de version <a href="https://www.mozilla.org/en-US/thunderbird/52.0/releasenotes/" hreflang="en" title="Thunderbird – Notes (52.0) – Mozilla">52.0</a> | <a href="https://www.mozilla.org/en-US/thunderbird/52.1.0/releasenotes/" hreflang="en" title="Thunderbird – Notes (52.1.0) – Mozilla">52.1</a> | <a href="https://www.mozilla.org/fr/thunderbird/features/" hreflang="fr" title="Fonctionnalités de Thunderbird – Mozilla">fonctionnalités</a> | <a href="https://www.mozilla.org/fr/thunderbird/" hreflang="fr" title="Thunderbird – Un logiciel pour rendre votre messagerie plus facile – Mozilla">téléchargement</a> | <a href="https://addons.mozilla.org/fr/thunderbird/" hreflang="fr" title="Modules pour Thunderbird">modules</a></p>
<p><a href="https://blog.mozfr.org/dotclear/public/mozfr/evenements/locasprint/locasprint_2017_travail.jpg" title="Locasprint 2017 : travail"><img alt="Locasprint 2017 : travail" src="https://blog.mozfr.org/dotclear/public/mozfr/evenements/locasprint/.locasprint_2017_travail_s.jpg" style="float:right; margin: 0 0 1em 1em;" /></a> Lors de la <a href="https://blog.mozfr.org/post/2017/04/De-nouveaux-contributeurs-grace-au-Locasprint-5" hreflang="fr" title="De nouveaux contributeurs grâce au Locasprint 5 (22 avr. 2017) Communauté Mozilla francophone">dernière réunion de localisation</a> à Mozilla Paris, début avril, les nouveaux initiés à toutes les arcanes de la localisation chez Mozilla francophone se sont fait la main sur la page des nouveautés de Thunderbird 52 de l’assistance de Mozilla en anglais. Depuis lors, le site de <abbr title="support.mozilla.org">SUMO</abbr> est revenu temporairement à son ancienne plateforme, ce qui nous a permis d’ajouter <a href="https://support.mozilla.org/fr/kb/nouveautes-de-thunderbird-52" hreflang="fr" title="Les nouveautés de Thunderbird 52.0 – Assistance de Thunderbird">cette traduction</a> au site, améliorée par la communauté.</p>
<p>Comme le signale cette page de nouveautés : <q lang="fr" cite="https://support.mozilla.org/fr/kb/nouveautes-de-thunderbird-52">par rapport à la version 45.0 de Thunderbird beaucoup moins de modifications sont visibles dans l’interface utilisateur, mais beaucoup de bogues anciens et de soucis pénibles ont été réglés</q>.</p> <p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52.png" title="Thunderbird 52"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.Thunderbird52_m.png" alt="Thunderbird 52" style="display:table; margin:0 auto;" /></a></p>
<p>Dans la rédaction des messages, la gestion des images change.</p>
<blockquote><p>Cela permet une meilleure interopérabilité avec les suites bureautiques telles que <abbr title="Microsoft">MS</abbr> Office ou <a href="https://fr.libreoffice.org/" hreflang="fr" title="Communauté LibreOffice francophone">LibreOffice</a>. Cela règle aussi les problèmes persistants pour joindre les images provenant d’autres messages. Cela règle les problèmes persistants que l’on rencontre quand on veut joindre des images provenant d’autres messages. Les images liées à d’autres adresses sur Internet ne seront plus téléchargées ni jointes automatiquement au message.</p></blockquote>
<p>Je vous laisse lire sur SUMO les détails techniques et les possibilités de personnalisation.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52_propietes_des_images.png" title="Thunderbird 52 : propriétés des images.png"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.Thunderbird52_propietes_des_images_m.png" alt="Thunderbird52_propietes_des_images.png" style="display:table; margin:0 auto;" /></a></p>
<p>Cette même série de modifications concernant l’inclusion des images dans les messages permet de <q lang="fr" cite="https://support.mozilla.org/fr/kb/nouveautes-de-thunderbird-52">protéger les utilisateurs qui laisseraient fuiter des fichiers accidentellement</q>.</p>
<h3>Nouveautés mises en avant par SUMO</h3>
<h4>Fenêtre Principale – Panneau des dossiers</h4>
<p>Le panneau des dossiers a maintenant une barre d’outils située au-dessus, qui est préconfigurée avec le bouton d’affichage des dossiers. La <em>barre d’outils du panneau des dossiers</em> peut être activée en passant par le menu <em>Affichage</em> > <em>Barre d’outils</em>.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/thunderbird52_affichage_barre_d_outils_panneau_dossiers.png" title="Thunderbird 52 : affichage de la barre d'outils du panneau des dossiers"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.thunderbird52_affichage_barre_d_outils_panneau_dossiers_m.png" alt="Thunderbird 52 : affichage de la barre d'outils du panneau des dossiers" style="display:table; margin:0 auto;" /></a></p>
<p><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52_barre_d_outils_du_panneau_des_dossiers.png" alt="Thunderbird 52 : barre d'outils du panneau des dossiers" style="display:table; margin:0 auto;" /></p>
<h4>Fenêtre principale – Panneau des fils de discussions</h4>
<p>La colonne « Correspondants » avec de nouvelles icônes est maintenant présente par défaut pour tous les dossiers. Il n’y a pas de conversion forcée. L’option peut être désactivée avec la préférence <code>mail.threadpane.use_correspondents</code> [via l’<a href="https://support.mozilla.org/fr/kb/editeur-de-configuration" hreflang="fr" title="Éditeur de configuration – Assistance de Thunderbird">éditeur de configuration</a>].</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52_correspondants.png" title="Thunderbird 52 : correspondants"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52_correspondants.png" alt="Thunderbird 52 : correspondants" style="display:table; margin:0 auto;" /></a></p>
<h4>Agenda – Lightning – Évènements dans un onglet</h4>
<p>Les évènements peuvent maintenant être créés et modifiés dans un onglet. Pour activer cette option, cocher <em>Modifier les évènements et les tâches dans un onglet plutôt que dans une fenêtre de dialogue</em> dans le menu <em>Outils</em> > <em>Options</em> > <em>Agenda</em> > onglet <em>Général</em>.</p>
<h3>Prérequis système</h3>
<p>Vous pouvez installer <a href="https://support.mozilla.org/fr/kb/editeur-de-configuration" hreflang="fr" title="Éditeur de configuration – Assistance de Thunderbird">Thunderbird sur</a> :</p>
<ul>
<li>Windows : Windows XP SP3, Windows Server 2003 SP1 ou supérieur</li>
<li>macOS : Mac OS X 10.9 ou supérieur</li>
<li>Linux : GTK+ 3.4 ou supérieur</li>
</ul>
<p>Thunderbird 52 est la dernière version à prendre en charge Windows XP, Windows Server 2003, Windows Server 2003 R2, Windows 2008 et Windows Vista. Windows XP n’est déjà plus pris en charge par la version actuelle de Firefox.</p>
<p style="margin-left: 1em; border-left: 3px solid grey; padding-left: 0.5em;">(Re)lire : <a href="https://blog.mozfr.org/post/2017/04/Mozilla-Firefox-53" hreflang="fr" title="Mozilla Firefox 53 (20 avr. 2017) Communauté Mozilla francophone">Mozilla Firefox 53</a></p>
<h3>Installation et désinstallation</h3>
<p>Vous pouvez désormais, de façon optionnelle, supprimer les fichiers de données correspondants lorsque vous supprimez un compte de Thunderbird.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52_Supprimer_le_compte_et_les_donnees.png" title="Thunderbird 52 : Supprimer le compte et les données"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.Thunderbird52_Supprimer_le_compte_et_les_donnees_m.png" alt="Thunderbird 52 : Supprimer le compte et les données" style="display:table; margin:0 auto;" /></a></p>
<p>Thunderbird propose désormais l’importation des paramètres du logiciel de courriel d’origine japonaise <a href="http://www.oryva.net/becky/" hreflang="fr" title="Becky! en français (page non officielle)">Becky! Internet Mail</a>.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Becky.png" title="Becky! Internet Mail"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.Becky_m.png" alt="Becky! Internet Mail" style="display:table; margin:0 auto;" /></a></p>
<h3>Filtres</h3>
<p>Vous pouvez désormais copier les filtres des messages pour en créer de nouveaux.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/thunderbird52_filtres_des_messages_copier.png" title="Thunderbird 52 : filtres des messages &gt; copier"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.thunderbird52_filtres_des_messages_copier_m.png" alt="Thunderbird 52 : filtres des messages &gt; copier" style="display:table; margin:0 auto;" /></a></p>
<p>Les messages des dossiers <abbr title="Internet Message Access Protocol">IMAP</abbr> lus dans des appareils externes sont désormais filtrés par défaut.</p>
<h3>Messageries instantanées</h3>
<h4>Twitter</h4>
<p>Les messages directs (privés) de Twitter sont pris en charge dans cette version 52.</p>
<p>Vous pouvez copier le lien d’un tweet et même l’aimer (anciens favoris).</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52_Twitter_menu_contextuel_Copier_adress_tweet_Aimer.png" title="Thunderbird 52 : Twitter &gt; menu contextuel &gt; Copier l'adresse du tweet et Aimer"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.Thunderbird52_Twitter_menu_contextuel_Copier_adress_tweet_Aimer_m.png" alt="Thunderbird 52 : Twitter &gt; menu contextuel &gt; Copier l'adresse du tweet et Aimer" style="display:table; margin:0 auto;" /></a></p>
<h4><abbr title="Extensible Messaging and Presence Protocol">XMPP</abbr></h4>
<p>La prise en charge du mécanisme d’authentification <abbr title="Simple Authentication and Security Layer">SASL</abbr> <abbr title="Salted Challenge Response Authentication Mechanism">SCRAM</abbr>.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/Thunderbird52_Assistant_de_creation_de_compte_de__messagerie_instantanee.png" title="Thunderbird 52 : Assistant de creation de compte de messagerie instantanée"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/td52/.Thunderbird52_Assistant_de_creation_de_compte_de__messagerie_instantanee_m.png" alt="Thunderbird 52 : Assistant de creation de compte de messagerie instantanée" style="display:table; margin:0 auto;" /></a></p>
<h4>Plus de Yahoo!</h4>
<p>La prise en charge de <em>Yahoo! Messenger</em> a été arrêtée (car <a href="https://web.archive.org/web/20160730080614/https://help.yahoo.com/kb/yahoo-messenger-for-web/SLN26860.html" hreflang="en" title="Get started in the new Yahoo Messenger – Yahoo Messenger for Web Help – SLN26860">Yahoo lui-même a arrêté la prise en charge des clients tiers</a>).</p>
<h3>Rédaction</h3>
<p>Le raccourci clavier pour insérer les liens hypertextes dans une fenêtre de rédaction a été changé de <kbd>CTRL+L</kbd> pour <kbd>CTRL+K</kbd> pour s’aligner sur les applications Office.</p>
<p>Quand vous répondez à une liste dans Thunderbird 52, la réponse sera envoyée à l’adresse dans l’en-tête <em>De</em> ignorant l’en-tête <em>Répondre à</em>.</p>
<p>La barre d’outils de formatage est désormais laissée en place lorsque le format d’expédition est changé en texte seulement.</p>
<p>La configuration des dictionnaires est restaurée lors de la modification d’un brouillon. L’en-tête <code>Content-Language</code> (<a href="https://tools.ietf.org/html/rfc3282" hreflang="en" title="Internet Engineering Task Force : Request for Comments: 3282 (mai 2002)">RFC 3282</a>) est transmise avec le message.</p>
<h3>Sous le capot</h3>
<p>Sur Linux, <a href="https://fr.wikipedia.org/wiki/PulseAudio" hreflang="fr" title="PulseAudio – Wikipédia">PulseAudio</a> est désormais nécessaire pour jouer les sons.</p>
<p>Les dossiers au format de stockage mbox plus gros que 4 Go sont désormais pris en charge sans message d’alerte (sauf à passer la préférence <code>mailnews.allowMboxOver4GB</code> sur <code>false</code>).</p>
<p>La mise en cache pour IMAP utilise désormais la dernière technologie de cache de Mozilla.</p>
<p>De nombreux <strong>correctifs de bogues gênants</strong> ont été inclus dans cette version comme les formats de distribution qui sont maintenant préservés pour les brouillons enregistrés ou comme la réponse à ses propres courriels qui est faite avec la bonne identité.</p>
<h3>Mise à jour de sécurité</h3>
<p>Thunderbird 52 corrige 23 vulnérabilités de sécurité dont 7 critiques selon le <a href="https://www.mozilla.org/en-US/security/advisories/mfsa2017-09/" hreflang="en" title="Security vulnerabilities fixed in Thunderbird 52 – Mozilla">bulletin de sécurité de Mozilla</a>.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/Thunderbird/thunderbird_main_furry.png"><img src="https://blog.mozfr.org/dotclear/public/Thunderbird/.thunderbird_main_furry_s.png" alt="Thunderbird Main Furry" style="display:table; margin:0 auto;"></a></p>
<h3>Thunderbird 52.1.0</h3>
<p>La version 52.1, sortie fin avril, corrige quelques <strong>problèmes de stabilité</strong> : l’installation sous Google Oauth pouvait parfois ne pas progresser vers la dernière étape et les images de fond ne fonctionnaient pas comme d’autres problèmes existaient concernant les images intégrées en rédigeant un message.</p>
<p>Thunderbird 52.1 a toujours quelques <strong>problèmes connus</strong> : les grosses pièces jointes peuvent ne pas être affichées ou enregistrées correctement si le message est stocké dans un dossier IMAP qui n’est pas synchronisé pour un usage hors ligne. Solution de contournement : régler la préférence <code>browser.cache.memory.max_entry_size</code> à la valeur <code>-1</code> (illimité) et créer la préférence en nombre entier <code>browser.cache.memory.capacity</code> avec la valeur <code>200000</code> (200 Mo, 25 Mo par message).</p>
<p>Il y a toujours des plantages lors du compactage d’un dossier IMAP.</p>
<p>L’extension antispam de McAfee est toujours incompatible. La solution de contournement consiste à démarrer en <a href="https://support.mozilla.org/fr/kb/le-mode-sans-echec-avec-thunderbird" hreflang="fr" title="Le mode sans échec avec Thunderbird – Assistance de Thunderbird">mode sans échec</a> et à désactiver l’extension <em>McAfee Anti-Spam</em>.</p>
<p>Thunderbird 52.1 corrige <a href="https://www.mozilla.org/en-US/security/advisories/mfsa2017-13/" hreflang="en" title="Security vulnerabilities fixed in Thunderbird 52.1 – Mozilla">30 vulnérabilités de sécurité</a> dont 8 critiques.</p>
<p style="margin-left: 1em; border-left: 3px solid grey; padding-left: 0.5em; margin-top:2em;">Toutes <a href="https://www.mozilla.org/en-US/thunderbird/all/?q=french" hreflang="en" title="Download in your language – Mozilla">les versions de Thunderbird</a> en français.</p>
<p style="margin-top:3em;">Pour finir, je vous propose un article de Philippe Scoffoni paru récemment et intitulé <em><a href="https://philippe.scoffoni.net/zero-inbox-gtd-thunderbird/" hreflang="fr" title="Zero inbox et GTD avec Thunderbird (1er mai 2017) Philippe Scoffoni – Logiciel libre, open source, numérique">Zero inbox et GTD avec Thunderbird</a></em>. N’hésitez pas à partager avec la communauté vos méthodes de travail, vos astuces et vos extensions indispensables.</p>
<address><br />
<a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">Mozinet</a>, relu par la communauté
</address>
<p style="margin-top:2em;"><em>Article précédent :</em> <a href="https://blog.mozfr.org/post/2017/02/tester-Thunderbird-52-beta" hreflang="fr" title="Aidez à tester Thunderbird 52 bêta (3 févr. 2017) Communauté Mozilla francophone">Aidez à tester Thunderbird 52 bêta</a></p>
<p><em>Crédit illustrations :</em> Dessins de Mozilla.</p>
<p>Photo par <a href="https://flic.kr/s/aHskSBgNpb" hreflang="fr" title="Locasprint 5 2017 Mozilla Paris, Mozinet sur Flickr">Mozinet</a> sous licence <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr" hreflang="fr" title="Creative Commons – Attribution - pas d’utilisation commerciale - partage dans les mêmes conditions 2.0 générique – CC BY-NC-SA 2.0">CC By-NC-SA 2.0</a></p>Firefox aux couleurs de Noël – Calendrier de l'Avent – Jour 24urn:md5:db0e13c639b94ddb27282fb82603aa372016-12-24T17:40:00+01:002016-12-24T17:55:10+01:00MozinetMes extensionscalendrier de l AventcommextensionFirefoximagemodulesMozillathèmes<p><a href="https://blog.mozfr.org/dotclear/public/Firefox_OS/appdujour/avent/FOXNoel2412_900.jpg" title="Les Fox en luge 24-12"><img src="https://blog.mozfr.org/dotclear/public/Firefox_OS/appdujour/avent/.FOXNoel2412_900_s.jpg" alt="Les Fox en luge 24-12" style="float:right; margin: 0 0 1em 1em;" height="180" /></a>
<strong>Parce qu’on aime les extensions et qu’elles sont essentielles au succès de tout navigateur web, nous vous proposons de découvrir ou redécouvrir une extension pour Firefox par jour jusqu’au 24 décembre, selon la tradition commerciale des calendriers de l’Avent.</strong></p>
<p>Vous êtes unique ! Faites un Firefox à votre image.</p>
<p>Mais pourquoi Mozilla a-t-elle appelé son extension « <strong>Personas Plus</strong> » ? Parce qu’au temps de sa création les <strong>thèmes légers</strong>, faits principalement d’images d’arrière-plan de barres d’outils, s’appelaient des <em>personas</em>. Évidemment l’extension fait plus que de juste <a href="https://support.mozilla.org/fr/kb/utiliser-themes-changer-apparence-firefox" hreflang="fr" title="Utiliser les thèmes pour changer l'apparence de Firefox – Assistance de Firefox">installer des thèmes dans Firefox</a>.</p>
<p>Le dépôt des modules complémentaires de Mozilla contient des dizaines de milliers de thèmes à essayer et à adopter selon votre envie du moment.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_animated_holiday_cheer_.png" title="Personas Plus : animated holiday cheer"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_animated_holiday_cheer_.png" alt="Personas Plus : animated holiday cheer" style="display:table; margin:0 auto;" /></a></p>
<p>Une précision : vous pouvez visualiser le rendu d’un thème sans même l’installer dans votre Firefox. Survoler l’aperçu et l’interface de Firefox s’habille du thème. Quittez l’aperçu et votre Firefox revient à son état précédent. Dans <em>Personas Plus</em>, le principe est le même quand vous survolez le nom d’un thème dans un menu.</p> <p>Voici comment en faire plus :</p>
<p>Quand vous installez l’extension, un thème léger est appliqué. Sous l’icône à tête de Fox ajoutée par l’extension à la barre d’outils (que vous pouvez basculer d’un clic-droit vers le menu), un sous-menu « Thèmes vedettes » vous donne accès… à des thèmes vedettes en pagaille.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_themes_vedettes.png" title="Personas Plus : thèmes vedettes"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/.personas_plus_themes_vedettes_m.png" alt="Personas Plus : thèmes vedettes" style="display:table; margin:0 auto;" /></a></p>
<p>Les entrées de menu comme « Choix aléatoire dans Thèmes vedette », « Choisis récemment », « Thème par défaut », « Préférences » ou « Afficher l’aperçu lors de la sélection via le menu » sont assez transparentes.</p>
<p>Le sous-menu « Favoris » vous invite à vous connecter à <abbr title="addons.mozilla.org">AMO</abbr> avec votre compte Firefox. Les thèmes que vous marquez en favori seront accessibles dans ce menu.</p>
<p style="text-align:center;"><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_identifiez-vous_favoris.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/.personas_plus_identifiez-vous_favoris_s.png" alt="Personas Plus : identifiez-vous pour accéder à vos favoris" /></a><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_favoris.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/.personas_plus_favoris_s.png" alt="Personas Plus : Favoris" /></a></p>
<p>Le site de Mozilla regorge de thèmes pour tous les goûts et pour toutes les envies. Les thèmes sont classés par catégories et avec des critères comme « en progression », « ajouts récents », « les plus populaires » ou « les mieux notés ».</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/addon-apparence.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/.addon-apparence_m.png" alt="Gestionnaire de modules complémentaires : apparence" style="display:table; margin:0 auto;" /></a></p>
<p>Les thèmes sont stockés dans le volet Apparence du gestionnaire de modules complémentaires (Ctrl+Maj+A). Vous pouvez les y (ré)activer à tout moment et les supprimer.</p>
<h3>Esprit de Noël</h3>
<p>Pour mettre votre Firefox au diapason des fêtes et traditions de Noël, nous vous proposons quelques bonnes adresses sur AMO :</p>
<p>Vous pouvez trouver des thèmes festifs dans la catégorie <a href="https://addons.mozilla.org/fr/firefox/themes/holiday" hreflang="fr" title="Vacances et jours fériés Thèmes – Modules pour Firefox">Vacances et jours fériés</a> :</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_amo_categorie_vacances_jours_feries_anime.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_amo_categorie_vacances_jours_feries_anime.png" alt="Personas Plus : catégorie AMO Vacances et jours fériés animé" style="display:table; margin:0 auto;" /></a></p>
<p>Vous pouvez même y trouver des thèmes animés comme celui-là qui fait tomber de la neige dans votre Firefox.</p>
<p>La catégorie des thèmes <a href="https://addons.mozilla.org/fr/firefox/themes/seasonal" hreflang="fr" title="Saisonnier Thèmes – Modules pour Firefox">Saisonniers</a> vous en présente aussi :</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_amo_categorie_saisonnier.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_amo_categorie_saisonnier.png" alt="Personas Plus : catégorie AMO Saisonnier" style="display:table; margin:0 auto;" /></a></p>
<p>Vous avez aussi la possibilité de <a href="https://addons.mozilla.org/fr/firefox/search/?q=christmas&amp;cat=themes" hreflang="fr" title="Résultats de recherche de thèmes pour christmas – Modules pour Firefox">faire une recherche</a> pour afficher les thèmes de Noël :</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_amo_recherche_christmas.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personas_plus_amo_recherche_christmas.png" alt="Personas Plus : recherche AMO « christmas »" style="display:table; margin:0 auto;" /></a></p>
<h3>Aller plus loin</h3>
<p>Pour aller plus loin avec l’extension, nous proposons de construire votre thème léger personnalisé pour <em>Personas Plus</em>.</p>
<p>Pour cela, certaines règles sont à respecter comme la dimension (3000 × 200 pixels) pour le bandeau en haut et en bas.</p>
<p>Nous vous dévoilerons pas comment nous avons réalisé ce bandeau, mais le résultat obtenu peut être téléchargé pour que vous puissiez l’installer directement chez vous.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/bandeau.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/bandeau.png" alt="bandeau pour faire un persona" style="display:table; margin:0 auto;" /></a></p>
<p>Pour positionner notre bandeau dans notre navigateur, nous passons par le menu « Persona personnalisé » puis « Éditer ».</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/personnaliser.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/.personnaliser_m.png" alt="Créer un persona dans Personas Plus : personnaliser" style="display:table; margin:0 auto;" /></a></p>
<p>Comme vous le voyez plusieurs paramètres sont disponibles. Une fois renseignés, nous obtenons le rendu suivant :</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/resultat.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/PersonasPlus/resultat.png" alt="Créer un persona dans Personas Plus : résultat" style="display:table; margin:0 auto;" /></a></p>
<table style="width: 100%; margin: 2em 0;" border="1">
<thead>
<tr>
<th style="font-weight: bold;">Nom<br>
</th>
<th style="font-weight: bold;">Auteur<br>
</th>
<th style="font-weight: bold;">Catégorie<br>
</th>
<th style="font-weight: bold;">Audience<br>
</th>
<th style="font-weight: bold;">Licence<br>
</th>
</tr>
</thead>
<tbody style="font-size: 0.9em;">
<tr>
<td style="padding: 0.4em;"><a href="https://addons.mozilla.org/fr/firefox/addon/personas-plus/" hreflang="en" title="Personas plus – modules pour Firefox">Personas plus</a></td>
<td style="padding: 0.4em;"><a href="https://github.com/mozilla/personas-plus/" hreflang="fr" title="mozilla/personas-plus: Personas Plus extension for Firefox">Mozilla</a></td>
<td style="padding: 0.4em;">Apparence</td>
<td style="padding: 0.4em;">Pour tous</td>
<td style="padding: 0.4em;"><abbr lang="en" title="Mozilla public license">MPL</abbr> 1.1, <abbr lang="en" title="GNU's Not UNIX">GNU</abbr> <abbr lang="en" title="General Public License">GPL</abbr> 2.0 & GNU <abbr lang="en" title="Lesser General Public License">LGPL</abbr> 2.1</td>
</tr>
</tbody>
</table>
<p><em>Bon réveillon ! Et n’hésitez pas à partager vos trouvailles avec la communauté.</em></p>
<address><br />
<a href="https://twitter.com/hellosct1" hreflang="fr" title="Christophe Villeneuve (@hellosct1) sur Twitter">@hellosct1</a> et <a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">@Mozinet</a>
</address>
<table style="width: 100%; margin: 2em 0;">
<tbody>
<tr>
<td style="width: 35px; text-align: center; border: none;">◀️</td>
<td style="width: 365px; text-align: center; border-top: none; border-bottom: none; border-left: none;"><a href="https://blog.mozfr.org/post/2016/12/Rendez_navigation_securisee_effective-HTTPS_Everywhere-Calendrier-Avent-Jour-23" hreflang="fr" title="Rendez la navigation sécurisée effective – Calendrier de l’Avent – Jour 23 - Communauté Mozilla francophone">HTTPS Everywhere</a></td>
<td style="width: 365px; text-align: center; border: none;"></td>
<td style="width: 35px; text-align: center; border: none;">▶️</td>
</tr>
</tbody>
</table>
<p><em>Crédit illustrations :</em> Dessin des Fox par Rendleflow. Tous droits réservés.</p>Capturez, éditez et sauvegardez – Calendrier de l’Avent – Jour 18urn:md5:c315d9d9d4e72fd6cc6eb20fc46fe5a22016-12-18T20:48:00+01:002016-12-20T02:19:01+01:00MozinetMes extensionscalendrier de l AventcloudcommextensionFirefoximageéditeur<p><a href="https://blog.mozfr.org/dotclear/public/Firefox_OS/appdujour/avent/FOXNoel1812_900.jpg" title="Les Fox en luge 18-12"><img src="https://blog.mozfr.org/dotclear/public/Firefox_OS/appdujour/avent/.FOXNoel1812_900_s.jpg" alt="Les Fox en luge 18-12" style="float:right; margin: 0 0 1em 1em;" height="180" /></a><strong>Parce qu’on aime les extensions et qu’elles sont essentielles au succès de tout navigateur web, nous vous proposons de découvrir ou redécouvrir une extension pour Firefox par jour jusqu’au 24 décembre, selon la tradition commerciale des calendriers de l’Avent.</strong></p>
<p>Les raisons pour avoir besoin d’une capture de l’écran, de la page web ou d’une zone de l’écran sont nombreuses. Il est souvent intéressant de fournir rapidement une capture d’écran pour illustrer ses propos.
La méthode traditionnelle peut s’avérer fastidieuse ou insuffisante. Pour effectuer une capture écran, vous tapez sur la touche d’impression de votre clavier. Pour avoir uniquement une zone de l’écran, il vous faut coller l’image du presse-papiers dans un logiciel de retouche d’image comme <a href="https://www.gimp.org/" hreflang="fr" title="GNU image manipulation program">Gimp</a> (au hasard).</p>
<p>Parmi les <a href="https://addons.mozilla.org/fr/firefox/tag/screenshot" hreflang="fr" title="screenshot – Étiquette – Modules pour Firefox">nombreuses extensions de capture d’écran</a> disponibles sur AMO, le dépôt de modules complémentaires de Mozilla, nous avons choisi <strong><em>Nimbus Screen Capture</em></strong>.</p>
<p>Nimbus est puissant, propose des fonctionnalités que d’autres n’ont pas et offre une expérience de capture complète. Bien qu’uniquement en anglais, les commandes et préférences de l’extension sont faciles à comprendre.</p>
<p>Vous avez trois façons de capturer. Tout d’abord, à partir du bouton ajouté dans votre barre d’outils, à partir du menu contextuel (clic-droit de votre souris) ou en usant du raccourci clavier configurable dans les options de l’extension.</p>
<p><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_menu_contextuel.png" alt="Nimbus : menu contextuel" style="display:table; margin:0 auto;" /></p>
<p>L’icône ajoutée à la barre d’outils (d’un clic-droit vous pouvez la basculer vers le menu de Firefox) affiche un panneau avec les options de capture et l’accès aux options (<em>Android Version</em> ouvre le <em>Play Store</em>). Vous avez ainsi la possibilité de capturer la partie visible de la page, un fragment (un élément HTML) de la page, une zone sélectionnée, la page toute entière et un écran vierge (vous pourrez y ajouter vos propres images).</p>
<p><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_capture_options.png" alt="Nimbus : options de capture" style="display:table; margin:0 auto;" /></p>
<p>Le menu en bas de panneau permet de régler le comportement du bouton de capture sur lequel vous appuierez. La capture s’affichera dans l’éditeur d’image, dans l’onglet d’enregistrement, s’enregistrera directement sur le disque dur ou sera copiée dans le presse-papiers.</p> <p><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_image_has_been_copied_to_the_clipboard.png" alt="Nimbus : Image has been copied to the clipboard" style="display:table; margin:0 auto;" title="L'image a été copiée dans le presse-papiers" /></p>
<p>La capture d’un fragment de la page est intéressant, car il permet à la souris de choisir la zone à l’écran d’un élément HTML de son code. Une fois choisi l’élément, des boutons apparaissent pour vous permettre d’envoyer la capture dans l’éditeur, de l’enregistrer sur votre disque dur ou d’annuler l’opération.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_fragment_selection.png" title="Nimbus : sélection d'un fragment de la page"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/.nimbus_fragment_selection_m.png" alt="Nimbus : sélection d'un fragment de la page" style="display:table; margin:0 auto;" /></a></p>
<p>La capture d’une zone sélectionnée à la souris fonctionne presque pareil, sauf que vous avez une loupe qui vous permet d’être précis au pixel prêt. Vous aurez ensuite en plus un bouton pour copier la zone dans le presse-papiers.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_selection_zone.png" title="Nimbus : sélection d'une zone de la page"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/.nimbus_selection_zone_m.png" alt="Nimbus : sélection d'une zone de la page" style="display:table; margin:0 auto;" /></a></p>
<h4>L’éditeur d’image</h4>
<p>Quand vous choisissez d’éditer votre capture plutôt que de l’enregistrer ou la copier dans le presse-papiers, un nouvel onglet s’ouvre avec une barre d’outils d’édition. Vous avez les fonctions habituelles d’un logiciel de retouche d’image.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_editeur.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_editeur.png" alt="Nimbus : éditeur" style="display:table; margin:0 auto;" /></a></p>
<h4>La sauvegarde</h4>
<p>Appuyer sur « Done » ouvre le même onglet d’enregistrement dont nous vous parlions plus haut. De droite à gauche, il vous est proposé d’imprimer l’image, de la copier dans le presse-papiers ou de l’enregistrer dans <em>Google Drive</em>, sur votre disque dur ou dans Nimbus.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_save.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/.nimbus_save_m.png" alt="Nimbus : onglet “save screenshot”" style="display:table; margin:0 auto;" /></a></p>
<p>Nimbus offre un service dans le <em>cloud</em>, un peu comme Evernote, et vous proposant de stocker vos captures et vos notes. L’offre gratuite dispose de 100 Mo d’enregistrement mensuel. Une extension <em>Web Clipper</em> est aussi disponible pour enregistrer tout contenu en ligne. Des logiciels sont aussi disponibles pour diverses plateformes. Rien ne vous oblige cependant à entrer dans cet écosystème de <em>cloud</em> commercial.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/nimbus_send_to_nimbus_note.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/.nimbus_send_to_nimbus_note_m.png" alt="Nimbus : Send to nimbus note" style="display:table; margin:0 auto;" /></a></p>
<p>Les options vous permettent de choisir le format d’image de votre capture, le taux de compression, le modèle pour le nom du fichier et si vous voulez sauvegarder la position de recadrage ou activer la capture rapide. Cette dernière option déterminer le type de capture et le type d’action qui s’appliqueront quand vous cliquez sur le bouton de Nimbus. Vous aurez toujours la possibilité d’effectuer les autres via la flèche de menu du bouton et le menu contextuel.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/Nimbus_settings.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/avent/nimbus/.Nimbus_settings_m.png" alt="Nimbus : screenshot settings" style="display:table; margin:0 auto;" /></a></p>
<h3>Aller plus loin</h3>
<p>Un <a href="https://everhelper.desk.com/customer/portal/articles/1180411-nimbus-screenshot---quick-guide" hreflang="fr" title="Nimbus Web Inc – Nimbus ScreenShot – Quick Guide">guide de démarrage</a> rapide en anglais explique les fonctions principales. Comme il est illustré de captures d’écran, vous pourrez comprendre même si vous ne parlez pas cette langue.</p>
<table style="width: 100%; margin: 2em 0;" border="1">
<thead>
<tr>
<th style="font-weight: bold;">Nom<br>
</th>
<th style="font-weight: bold;">Auteur<br>
</th>
<th style="font-weight: bold;">Catégorie<br>
</th>
<th style="font-weight: bold;">Audience<br>
</th>
<th style="font-weight: bold;">Licence<br>
</th>
</tr>
</thead>
<tbody style="font-size: 0.9em;">
<tr>
<td style="padding: 0.4em;"><a href="https://addons.mozilla.org/fr/firefox/addon/nimbus-screenshot/" hreflang="en" title="Nimbus Screen Capture – editable screenshots – Modules pour Firefox">Nimbus Screen Capture - editable screenshots</a></td>
<td style="padding: 0.4em;"><a href="https://nimbus.everhelper.me/screenshot.php" hreflang=”en”>Nimbus Web</a></td>
<td style="padding: 0.4em;">Capture d’écran, retouche d’images</td>
<td style="padding: 0.4em;">Pour tous</td>
<td style="padding: 0.4em;">Licence personnalisée</td>
</tr>
</tbody>
</table>
<p><em>Et vous ? Quelle solution de capture d’écran utilisez-vous au quotidien ?</em></p>
<address><br />
<a href="https://twitter.com/hellosct1" hreflang="fr" title="Christophe Villeneuve (@hellosct1) sur Twitter">@hellosct1</a> et <a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">@Mozinet</a>
</address>
<table style="width: 100%; margin: 2em 0;">
<tbody>
<tr>
<td style="width: 35px; text-align: center; border: none;">◀️</td>
<td style="width: 365px; text-align: center; border-top: none; border-bottom: none; border-left: none;"><a href="https://blog.mozfr.org/post/2016/12/Ressuscitez-vos-formulaires-Calendrier-Avent-Jour-17" hreflang="fr" title="Ressuscitez vos formulaires – Calendrier de l’Avent – Jour 17 - Communauté Mozilla francophone">Ressuscitez vos formulaires</a></td>
<td style="width: 365px; text-align: center; border: none;"><a href="https://blog.mozfr.org/post/2016/12/comme-au-cinema-calendrier-avent-Jour-19" hreflang="fr" title="Comme au cinéma – Calendrier de l’Avent – Jour 1 - Communauté Mozilla francophone">Comme au cinéma</a></td>
<td style="width: 35px; text-align: center; border: none;">▶️</td>
</tr>
</tbody>
</table>
<p><em>Crédit illustrations :</em> Dessin des Fox par Rendleflow. Tous droits réservés.</p>Le fonds de Mozilla qui sécurise l’open source et le Neturn:md5:cb7eb4f6f3c7fb8984a7e8d89d9cf0fd2016-11-05T14:30:00+01:002016-11-05T14:32:29+01:00MozinetMozillacommcybersécuritéFLOSSimageInternetinterviewlogiciel libreMOSSMozillaopen sourcesécurité<p><a href="https://blog.mozfr.org/dotclear/public/secu/moz-love-open-600x300.jpg"><img src="https://blog.mozfr.org/dotclear/public/secu/.moz-love-open-600x300_s.jpg" alt="moz love open" style="float:left; margin: 0 1em 1em 0;" /></a>Dans le récent article de Richard Barnes sur tout <a href="https://blog.mozfr.org/post/2016/11/Mozilla-comment-nous-protegeons-Internet-avec-votre-aide" hreflang="fr" title="Mozilla : comment nous protégeons Internet avec votre aide (3 nov. 2016) Communauté Mozilla francophone">ce que fait Mozilla pour la sécurité du Net</a> (que nous vous avons traduit), l’ingénieur sécurité décrivait comment Mozilla, grâce à des dotations, aidait ses pairs dans la communauté <em>open source</em> à améliorer leur sécurité grâce au programme <a href="https://wiki.mozilla.org/MOSS" hreflang="en" title="MOSS – Mozilla Wiki">Mozilla Open Source Support</a> (MOOS). Un sous-programme appelé <a href="https://wiki.mozilla.org/MOSS/Secure_Open_Source" hreflang="en" title="MOSS/Secure Open Source – Mozilla Wiki">Secure Open Source Fund</a> ou <em>SOS Fund</em> a aussi été institué pour sécuriser les solutions <em>open source</em> grâce à des audits.</p>
<p>Chris Riley qui dirige l’équipe <em>Net Policy</em> de Mozilla a donné une <a href="https://opensource.com/government/16/10/introduction-mozilla-secure-open-source-fund" hreflang="en" title="A new effort to support security audits for open source software projects (25 oct. 2016) Mark Bohannon (Red Hat), Opensource.com">interview à opensource.com</a> pour expliquer le fonctionnement de ce fonds.</p>
<p>Les logiciels <em>open source</em> sont une part centrale de l’internet, mais la majorité est développée sans un soutien institutionnel. Malgré leur succès au sein de Mozilla et d’importantes organisations, les programmes de récompenses pour le signalement de bogues de sécurité, connus sous le nom de <em>bug bounty</em>, ne sont pas suffisants. De nombreux projets n’ont pas assez de ressources propres pour payer les sommes nécessaires et régler les problèmes qui émergent alors.</p> <blockquote><p>En nous appuyant sur notre histoire en tant qu’une des premières institutions à créer un programme de <em>bug bounty</em>, nous avons institué le <em>SOS Fund</em> pour aider à combler cette lacune. Notre approche consiste à travailler avec des cabinets d’audits externes pour mener une évaluation ponctuelle du projet et de fournir alors le soutien nécessaire au mainteneur du projet pour gérer la réparation. Enfin, nous travaillons avec la personne chargée de l’audit à vérifier les modifications qui ont été faites.</p></blockquote>
<p>Sécuriser le Net est l’affaire de tous et profite à tous. Mozilla y engage une partie de ses ressources et encourage les autres acteurs à la rejoindre. Mozilla continue à soutenir les organisations et améliore ses processus en tirant les leçons apprises au fur et à mesure.</p>
<p>Pour en savoir plus sur le programme, lisez <a href="https://blog.mozilla.org/press-fr/2016/06/09/pour-un-ecosysteme-open-source-plus-securise/" hreflang="fr" title="Pour un écosystème Open Source plus sécurisé (9 juin 2016) Section Presse Mozilla">ce résumé en français</a> de ce <a href="https://blog.mozilla.org/blog/2016/06/09/help-make-open-source-secure/" hreflang="en" title="Help Make Open Source Secure (9 juin 2016) Chris Riley, The Mozilla Blog">billet en anglais</a> du blog officiel de Mozilla.</p>
<p>Chris Riley revient ensuite sur les réussites à mettre au crédit du projet. Des <a href="https://wiki.mozilla.org/MOSS/Secure_Open_Source/Completed" hreflang="en" title="MOSS/Secure Open Source/Completed – Mozilla Wiki">vulnérabilités de sécurité</a> jugées critiques ou au moins très élevées ont été identifiées et corrigées. Elles étaient alors inconnues, tout comme celles découvertes au cours de l’audit de la bibliothèque de traitement du JPEG.</p>
<blockquote><p>Notre audit a identifié deux problèmes avec le standard JPEG lui-même. En d’autres termes, toute bibliothèque de traitement d’images JPEG conforme au standard – qu’elle soit <em>open source</em> ou non, quelle que soit la source ou le contexte – est sujette aux mêmes vulnérabilités (jugées modérées). Précisément, certains types d’images légitimes déclenchent une surconsommation du processeur central (<abbr title="Central Processing Unit">CPU</abbr>) ou de la mémoire, menant potentiellement à des plantages du système.</p></blockquote>
<p>Mozilla ne fait pas juste des logiciels sûrs et fiables, mais participe à la bonne santé de l’écosystème dans lequel elle évolue, pour le bénéfice de tous, utilisateurs de ses produits et services ou pas. C’est ça aussi Mozilla.</p>
<address><br />
<a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">@Mozinet</a>, relecture par la communauté
</address>
<p><em>Notre précédent article :</em> <a href="https://blog.mozfr.org/post/2016/11/Mozilla-comment-nous-protegeons-Internet-avec-votre-aide" hreflang="fr" title="Mozilla : comment nous protégeons Internet avec votre aide (3 nov. 2016) Communauté Mozilla francophone">Mozilla : comment nous protégeons Internet avec votre aide</a></p>
<p><em>Crédit illustrations :</em> <a href="https://blog.mozilla.org/blog/2016/06/22/mozilla-awards-385000-to-open-source-projects-as-part-of-moss-mission-partners-program/" hreflang="en" title="Mozilla Awards $385,000 to Open Source Projects as part of MOSS “Mission Partners” Program (22 juin 2016) The Mozilla Blog">Mozilla</a></p>Ajouter des émoticônes partout facilementurn:md5:2032cfe15708eafbee4b8fd3bdf180d42016-10-12T10:30:00+02:002016-10-14T16:36:09+02:00MozinetMes extensionsAndroidcommextensionFirefoximage<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/Emoji_Keyboard_people_survol.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/.Emoji_Keyboard_people_survol_m.png" alt="Emoji Keyboard : people (au survol)" style="float:right; margin: 0 0 1em 1em; width: 350px;" /></a>Bien avant le Web, des combinaisons de caractères communs ont été ajoutées aux textes pour <strong>figurer une émotion</strong> :-) Leur nombre a explosé et le code de saisie, non normalisé, de chacune dépendait des communautés en ligne et de leur culture. Les forums ont popularisé le remplacement des émoticônes textuelles par des <strong>images</strong> et, en inversant le paradigme, le code des émoticônes graphiques est devenu du texte. Les messageries instantanées ont alors amplifié le phénomène.</p>
<p>Le Consortium Unicode, qui coordonne le développement du standard <a href="https://fr.wikipedia.org/wiki/Unicode" hreflang="fr" title="Unicode – Wikipédia">Unicode</a> qui permet des échanges de textes dans différentes langues à un niveau mondial, a décidé d’inclure les <strong>émoticônes dans sa table de caractères</strong> depuis quelques années. Cependant, chaque logiciel ou système d’exploitation qui implémente les émoticônes Unicode en donnent son interprétation graphique, ce qui peut amener des incompréhensions.</p>
<p>Malgré ces limitations, les émoticônes Unicode sont devenues très populaires. Disposer d’une <strong>méthode facile</strong> pour les inclure dans ses forums, webmails, messageries en ligne, réseaux sociaux, etc. dans le navigateur et même au-delà par copier-coller peut vous faire gagner un temps précieux ou vous permettre de trouver la bonne représentation graphique au-delà de vos émoticônes habituelles.</p> <p>J’avais sélectionné deux extensions candidates dans les <a href="https://addons.mozilla.org/fr/firefox/" hreflang="fr" title="Modules pour Firefox">modules complémentaires de Firefox sur AMO</a>. Après usage pendant quelques semaines, j’ai choisi <a href="https://addons.mozilla.org/fr/firefox/addon/emojikeyboard/" hreflang="fr" title="Emoji Keyboard – Module pour Firefox d’Harry N.">Emoji Keyboard</a> d’Harry N. qui est plus riche, dispose de plus de catégories, d’une recherche plus puissante (bien que toujours en anglais) et de liens vers des outils en ligne complémentaires, et est disponible pour <a href="https://www.mozilla.org/fr/firefox/android/" hreflang="fr" title="Firefox pour Android — le navigateur pour mobile — encore plus de moyens de l’adapter à votre gré et de protéger votre vie privée — Mozilla">Firefox pour Android</a>. Cette extension tout public est en vedette sur AMO.</p>
<p>L’extension ajoute une <strong>icône d’émoticône dans votre barre d’outils</strong>. Cliquer dessus fait jaillir le panneau des émoticônes classées en catégorie avec une option de recherche par mots-clés. Au survol du curseur de la souris, le descriptif et l’icône Unicode s’affichent. Un champ est disponible pour créer votre message truffé d’émoticônes à copier où vous voulez. Si un champ de saisie a le focus dans la page, cliquer sur une émoticône l’insert à cet endroit. Votre navigateur peut ne pas prendre en charge (carré avec le code <img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/unicode_caractere_non_pris_en_charge.png" alt="Caractère Unicode non pris en charge" />) telle ou telle émoticône, mais, si le service ou le logiciel dans lequel vous l’inclurez prend en charge cette émoticône (et souvent la totalité des icônes standardisées) votre message apparaîtra bien avec la représentation graphique de l’émoticône saisie.</p>
<p><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/Emoji_Keyboard_food_survol_message.png"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/.Emoji_Keyboard_food_survol_message_m.png" alt="Emoji Keyboard : food (au survol) dans un message" style="display:table; margin:0 auto;" /></a></p>
<p>En bonus, le panneau dispose de trois liens vers des outils en ligne pour agrémenter vos textes. En plus de la version en ligne de l’extension sur <a href="https://emojikeyboard.org/" hreflang="en" title="Emoji Keyboard Online - A Free Emoji Search &amp; Emoji Picker">Emoji Keyboard Online</a>, <a href="https://coolsymbol.com/" hreflang="en" title="Cool Symbol Picker - Fancy Letters, Characters &amp; Cool Text">Symbol Picker</a> classe en catégories les symboles Unicode traditionnels qui reprennent les caractères de différentes langues, des symboles mathématiques et scientifiques, des nombres sous différentes formes, des pictogrammes, des flèches, des figures géométriques miniatures, et bien plus. Enfin, <a href="https://coolsymbol.com/cool-fancy-text-generator.html" hreflang="en" title="Cool Fancy Text Generator">Fancy Text Generator</a> utilise la richesse des tables Unicode et les ressemblances pour décorer vos textes.</p>
<div style="text-align:center;">
<p style="font-size:0.8em;"><a href="https://blog.mozfr.org/dotclear/public/firefox/extensions/Emoji_Keyboard_skin_tones.png" title="Emoji Keyboard : couleurs de peau (skin tones)"><img src="https://blog.mozfr.org/dotclear/public/firefox/extensions/.Emoji_Keyboard_skin_tones_m.png" alt="Emoji Keyboard : couleurs de peau (skin tones)" style="display:table; margin:0 auto;" /></a>
<em>Prise en charge des couleurs de peau</em></p></div>
<p>Voici une de mes extensions, à vous de nous présenter et faire découvrir les vôtres.</p>
<address><br />
<a href="https://twitter.com/Mozinet" hreflang="fr" title="Mozinet (@Mozinet) sur Twitter">@Mozinet</a>
</address>