﻿﻿{"id":2227,"date":"2026-02-01T19:08:37","date_gmt":"2026-02-01T18:08:37","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/uxnote-annotez-vos-maquettes-web-sans-prise-de-tete\/"},"modified":"2026-02-01T19:08:37","modified_gmt":"2026-02-01T18:08:37","slug":"uxnote-annotez-vos-maquettes-web-sans-prise-de-tete","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/uxnote-annotez-vos-maquettes-web-sans-prise-de-tete\/","title":{"rendered":"UxNote &#8211; Annotez vos maquettes web sans prise de t\u00eate"},"content":{"rendered":"<p>Il y a quelques jours, un lecteur (merci Benjamin !) m&#8217;a envoy\u00e9 un outil qu&#8217;il a bricol\u00e9 lui-m\u00eame avec Codex d&#8217;OpenAI et \u00e7a touche une petite corde sensible chez moi, d&#8217;o\u00f9 le fait que je vous en parle.<\/p>\n<p>C&#8217;est pas souvent que je bosse avec des clients sur autre chose que des articles mais il m&#8217;est arriv\u00e9 par le pass\u00e9 qu&#8217;un client m&#8217;envoie ses retours par mail, avec des captures d&#8217;\u00e9cran floues, des fl\u00e8ches rouges partout et des commentaires du genre &#8220;<em>le truc l\u00e0, \u00e0 gauche, je sais pas trop ??<\/em>&#8220;.<\/p>\n<p>Alors de mon c\u00f4t\u00e9, j&#8217;ai test\u00e9 pas mal de solutions pour \u00e9vier \u00e7a mais j&#8217;ai rien trouv\u00e9 de foufou&#8230; Figma par exemple c&#8217;est top pour les retours mais faut que le client cr\u00e9e un compte (et \u00e7a, c&#8217;est jamais gagn\u00e9), Marker.io c&#8217;est bien fichu mais c&#8217;est payant. J&#8217;avais m\u00eame essay\u00e9 Loom \u00e0 un moment, mais bon, leur demander d&#8217;enregistrer leur \u00e9cran c&#8217;\u00e9tait trop compliqu\u00e9.<\/p>\n<p>Alors que UxNote, lui, r\u00e8gle exactement ce probl\u00e8me sans rien de tout \u00e7a !<\/p>\n<p>En fait, \u00e7a permet d&#8217;int\u00e9grer une balise JavaScript dans votre page (juste avant le <code>&lt;\/body&gt;<\/code>) et hop, une petite toolbar appara\u00eet.<\/p>\n<div class=\"highlight\">\n<pre class=\"chroma\"><code class=\"language-gdscript3\" data-lang=\"gdscript3\"><span class=\"line\"><span class=\"cl\"><span class=\"o\">&lt;<\/span><span class=\"n\">script<\/span> <span class=\"n\">src<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"https:\/\/github.com\/ninefortyonestudio\/uxnote\/releases\/download\/v1.0.0\/uxnote.min-v1.0.0.js\"<\/span><span class=\"o\">&gt;&lt;\/<\/span><span class=\"n\">script<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/span><\/code><\/pre>\n<p>Votre client peut alors surligner du texte, \u00e9pingler des \u00e9l\u00e9ments avec des badges num\u00e9rot\u00e9s, ajouter des commentaires&#8230; et surtout, exporter tout \u00e7a proprement en JSON ou l&#8217;envoyer direct par mail.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/uxnote-annotation-page-web\/uxnote-annotation-page-web-2.png\" alt=\"\" loading=\"lazy\"><\/p>\n<p>Comme \u00e7a, fini le chaos habituel des retours clients fa\u00e7on &#8220;<em>j&#8217;ai annot\u00e9 le PDF que j&#8217;ai imprim\u00e9 puis scann\u00e9<\/em>&#8220;. L\u00e0, les commentaires sont directement contextualis\u00e9s sur la page, exactement l\u00e0 o\u00f9 ils doivent \u00eatre. C&#8217;est vrai que des outils d&#8217;annotation web existent depuis des lustres, mais UxNote a choisi le stockage 100% local (via le localStorage) plut\u00f4t que de monter un backend avec des comptes utilisateurs. Et c&#8217;est ce qui fait toute la diff\u00e9rence niveau simplicit\u00e9, avec les autres outils.<\/p>\n<p>Par contre attention, si votre client vide son cache navigateur, il perd ses annotations&#8230; Perso je vous recommande donc de faire l&#8217;export JSON d\u00e8s que possible pour \u00e9viter les mauvaises surprises.<\/p>\n<p>L&#8217;outil propose aussi un mode &#8220;assombrissement&#8221; qui met en \u00e9vidence la zone annot\u00e9e (pratique pour se concentrer), des couleurs personnalisables, et m\u00eame la possibilit\u00e9 de bloquer certains \u00e9l\u00e9ments de l&#8217;annotation avec l&#8217;attribut <code>data-uxnote-ignore<\/code>. \u00c7a fonctionne sur les environnements de staging, en local, et m\u00eame sur les<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Glossary\/SPA\">SPA<\/a><br \/>\n&#8230; sauf si vous avez une CSP ultra stricte, auquel cas faudra autoriser le script et les styles inline dans votre config.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/uxnote-annotation-page-web\/uxnote-annotation-page-web-3.png\" alt=\"\" loading=\"lazy\"><\/p>\n<p>Bref, si vous bossez avec des clients qui ont du mal \u00e0 exprimer leurs retours autrement qu&#8217;en pi\u00e8ces jointes de 15 Mo,<br \/>\n<a href=\"https:\/\/uxnote.ninefortyone.studio\/\">UxNote<\/a><br \/>\npourrait bien sauver les quelques cheveux qu&#8217;il vous reste. Et en plus c&#8217;est gratuit, open source et<br \/>\n<a href=\"https:\/\/github.com\/ninefortyonestudio\/uxnote\">disponible sur GitHub<\/a><br \/>\n.<\/p>\n<p>Que demande le peuple ???<\/p>\n<p>Merci Benjamin !<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Il y a quelques jours, un lecteur (merci Benjamin !) m&#8217;a envoy\u00e9 un outil qu&#8217;il a bricol\u00e9 lui-m\u00eame avec Codex d&#8217;OpenAI et \u00e7a touche une petite corde sensible chez moi, d&#8217;o\u00f9 le fait que je vous en parle. C&#8217;est pas souvent que je bosse avec des clients sur autre chose que des articles mais il m&#8217;est arriv\u00e9 par le pass\u00e9 qu&#8217;un client m&#8217;envoie ses retours par mail, avec des captures d&#8217;\u00e9cran floues, des fl\u00e8ches rouges partout et des commentaires du genre &#8220;le truc l\u00e0, \u00e0 gauche, je sais pas trop ??&#8220;. Alors de mon c\u00f4t\u00e9, j&#8217;ai test\u00e9 pas mal de solutions pour \u00e9vier \u00e7a mais j&#8217;ai rien trouv\u00e9 de foufou&#8230; Figma par exemple c&#8217;est top pour les retours mais faut que le client cr\u00e9e un compte (et \u00e7a, c&#8217;est jamais gagn\u00e9), Marker.io c&#8217;est bien fichu mais c&#8217;est payant. J&#8217;avais m\u00eame essay\u00e9 Loom \u00e0 un moment, mais bon, leur demander d&#8217;enregistrer leur \u00e9cran c&#8217;\u00e9tait trop compliqu\u00e9. Alors que UxNote, lui, r\u00e8gle exactement ce probl\u00e8me sans rien de tout \u00e7a ! En fait, \u00e7a permet d&#8217;int\u00e9grer une balise JavaScript dans votre page (juste avant le &lt;\/body&gt;) et hop, une petite toolbar appara\u00eet. &lt;script src=&#8221;https:\/\/github.com\/ninefortyonestudio\/uxnote\/releases\/download\/v1.0.0\/uxnote.min-v1.0.0.js&#8221;&gt;&lt;\/script&gt; Votre client peut alors surligner du texte, \u00e9pingler des \u00e9l\u00e9ments avec des badges num\u00e9rot\u00e9s, ajouter des commentaires&#8230; et surtout, exporter tout \u00e7a proprement en JSON ou l&#8217;envoyer direct par mail. Comme \u00e7a, fini le chaos habituel des retours clients fa\u00e7on &#8220;j&#8217;ai annot\u00e9 le PDF que j&#8217;ai imprim\u00e9 puis scann\u00e9&#8220;. L\u00e0, les commentaires sont directement contextualis\u00e9s sur la page, exactement l\u00e0 o\u00f9 ils doivent \u00eatre. C&#8217;est vrai que des outils d&#8217;annotation web existent depuis des lustres, mais UxNote a choisi le stockage 100% local (via le localStorage) plut\u00f4t que de monter un backend avec des comptes utilisateurs. Et c&#8217;est ce qui fait toute la diff\u00e9rence niveau simplicit\u00e9, avec les autres outils. Par contre attention, si votre client vide son cache navigateur, il perd ses annotations&#8230; Perso je vous recommande donc de faire l&#8217;export JSON d\u00e8s que possible pour \u00e9viter les mauvaises surprises. L&#8217;outil propose aussi un mode &#8220;assombrissement&#8221; qui met en \u00e9vidence la zone annot\u00e9e (pratique pour se concentrer), des couleurs personnalisables, et m\u00eame la possibilit\u00e9 de bloquer certains \u00e9l\u00e9ments de l&#8217;annotation avec l&#8217;attribut data-uxnote-ignore. \u00c7a fonctionne sur les environnements de staging, en local, et m\u00eame sur les SPA &#8230; sauf si vous avez une CSP ultra stricte, auquel cas faudra autoriser le script et les styles inline dans votre config. Bref, si vous bossez avec des clients qui ont du mal \u00e0 exprimer leurs retours autrement qu&#8217;en pi\u00e8ces jointes de 15 Mo, UxNote pourrait bien sauver les quelques cheveux qu&#8217;il vous reste. Et en plus c&#8217;est gratuit, open source et disponible sur GitHub . Que demande le peuple ??? Merci Benjamin !<\/p>\n","protected":false},"author":1,"featured_media":2228,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-2227","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/2227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=2227"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/2227\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/2228"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=2227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}