Trame QR Code

Un QR code (Quick Response) est un code-barres en deux dimensions inventé en 1994 par Denso Wave, une filiale de Toyota, pour suivre des pièces en usine. Il stocke du texte dans une grille de petits carrés, les modules. Un lecteur retrouve ce texte en photographiant la grille.

Les trois grands carrés dans les coins sont les motifs de repérage : ils permettent au téléphone de trouver le code et de savoir dans quel sens il est. Les lignes alternées qui les relient calent la grille, et les petits carrés supplémentaires sur les grands codes corrigent les déformations de la photo.

Le format est une norme ouverte (ISO/IEC 18004). N'importe quel lecteur lit n'importe quel QR code, y compris ceux fabriqués ici.

Un QR code ne contient que du texte. Ce qui change, c'est la manière dont ce texte est formaté, et donc ce que le téléphone propose de faire en le lisant.

Le contenu brut est affiché sous le formulaire : c'est exactement ce que le téléphone lira. Un lecteur qui ne comprend pas un format affichera simplement ce texte.

Le type virement fabrique un « EPC QR code », le format défini par le Conseil européen des paiements. Il contient le nom du bénéficiaire, son IBAN, et si tu veux un montant et une référence. Rien d'autre : pas de compte à ouvrir, aucun service au milieu, aucune commission.

Au scan, l'application bancaire ouvre un virement déjà rempli. Personne n'est débité tout seul : la personne vérifie et valide avec son code habituel. Une application qui ne connaît pas le format affichera simplement le texte.

C'est fait pour une cotisation d'association, un appel à dons, une facture, une cagnotte entre voisins. Deux limites à connaître : toutes les banques ne lisent pas encore ce code, donc teste avec la tienne avant d'imprimer, et l'IBAN est visible par quiconque scanne — ce qui est normal pour un IBAN, mais à savoir.

Trame vérifie la clé de contrôle de l'IBAN et te prévient s'il est faux. La norme demande la résistance M et 331 octets au maximum : garde la référence courte.

Le QR code a des cousins, chacun avec sa niche :

• Micro QR : un seul motif de repérage, 11 à 17 modules de côté, quelques dizaines de caractères. Pour les composants électroniques. Les téléphones ne le lisent presque jamais.
• rMQR : un QR rectangulaire (2022) pour les surfaces étroites. Même problème de lecture grand public.
• Data Matrix : très dense, sur les médicaments et l'industrie. Lu par les caméras d'iPhone récents, pas par tous les Android.
• Aztec : pas de marge nécessaire, utilisé sur les billets de train et cartes d'embarquement.
• PDF417 : sur les permis de conduire américains et certains billets.
• codes-barres 1D (EAN, Code 128) : produits en magasin, lus par des douchettes.

Pour un public qui scanne avec son téléphone, le QR code classique est le seul format lu partout, sans application. C'est le seul que Trame produit, et c'est un choix.

La version d'un QR code va de 1 à 40 et fixe sa taille en modules : 21 × 21 pour la version 1, 177 × 177 pour la version 40. Trame choisit toujours la plus petite version qui contient ton texte.

Plus il y a de modules, plus chacun est petit à taille d'impression égale, et plus le code est difficile à lire sur une photo floue ou de loin. En pratique : moins de 100 caractères donne un code confortable, au-delà de 300 il faut de la place, et vers 2 900 on atteint la limite.

Trois astuces pour un code plus léger : raccourcir l'URL (un domaine court, pas de paramètres de suivi), écrire l'URL en MAJUSCULES quand le serveur le tolère (l'encodage alphanumérique est 30 % plus compact), et baisser le niveau de correction.

Le QR code compresse le texte différemment selon les caractères utilisés. Trame choisit automatiquement le mode le plus compact, et l'affiche sous le code.

• numérique : uniquement des chiffres. 3 chiffres tiennent sur 10 bits. Un numéro de téléphone sans « + » ni espace donne un code minuscule.
• alphanumérique : chiffres, majuscules, espace et $ % * + - . / :. 2 caractères sur 11 bits. C'est pourquoi une URL en majuscules est plus courte.
• octets : tout le reste, en UTF-8, 8 bits par octet. Les accents et les emojis prennent 2 à 4 octets.

Il existe aussi un mode kanji, inutile ici, et un mode mixte qui découpe le texte en segments. Trame n'utilise qu'un mode par code : plus simple, et la différence se compte en quelques modules.

Chaque QR code embarque des données de secours qui permettent de reconstruire le contenu si une partie du code est abîmée, sale, ou cachée. Quatre niveaux existent :

Plus le niveau est haut, plus il y a de modules pour un même contenu, donc plus le code est dense. Sur un contenu court, la différence est négligeable : autant prendre Q ou H. Sur une longue vCard, L ou M garde un code lisible.

Un lecteur échantillonne le centre de chaque module. Tant que le centre a la bonne couleur, la forme du bord importe peu : on peut donc arrondir les modules ou les remplacer par des points sans casser la lecture.

Trame garde les trois motifs de repérage bien pleins (avec des angles adaptés au style) parce que ce sont eux que le téléphone cherche en premier. Les points sont dessinés à 85 % du module : en dessous, les lecteurs anciens décrochent.

Règle simple : les carrés sont les plus sûrs, les points les plus élégants ; teste toujours le résultat final avec deux téléphones différents.

Les trois grands coins ont leur propre réglage de forme et de couleur, expliqué juste en dessous.

Les trois carrés des coins sont les motifs de repérage : c'est ce que le téléphone cherche en premier pour trouver le code et savoir dans quel sens il est. Leur donner une forme et une couleur à part suffit souvent à faire un code qui a l'air dessiné exprès.

Par défaut ils suivent la forme des points (réglage auto). Tu peux les forcer en carrés, arrondis ou ronds. Ce qui ne change jamais, c'est leur signature : sept modules de côté et le rapport 1-1-3-1-1 entre l'anneau, le vide et le cœur. Trame le respecte quelle que soit la forme.

La couleur des coins peut différer de celle des points, à condition de rester franchement sombre sur clair. Un avertissement apparaît sous l'aperçu si leur contraste descend trop bas. Le petit × les ramène à la couleur des points.

Un code posé seul sur une vitrine se fait souvent ignorer : personne ne sait ce qu'il y a derrière. Une phrase courte autour du code change tout. C'est ce que fait le cadre : un contour, et une ligne de texte sous le code.

Deux styles. Plein : un bandeau de couleur, le texte en négatif. Contour : un simple trait, le texte de la même couleur. Le texte s'écrit librement — « scannez-moi », « la carte », « le wifi », « laissez-nous un avis » — et sa taille s'adapte à sa longueur. Court se lit de plus loin.

Le cadre est dessiné autour de la zone de silence, jamais dessus : la lecture n'est pas gênée. Le dessin exporté devient un peu plus haut que large, et la mise en page en tient compte toute seule.

Une image peut passer sous les points : une photo, un dégradé, un papier scanné. C'est le réglage le plus joli et le plus risqué de la page, parce qu'un lecteur a besoin de voir chaque module se détacher de ce qu'il y a derrière.

Deux garde-fous. Le voile pose un blanc transparent sur l'image pour l'éclaircir : 30 à 50 % suffisent souvent. Et Trame mesure la clarté moyenne de l'image après le voile, puis prévient quand elle reste trop foncée, ou trop chargée en contrastes, pour la couleur des points.

Ce qui marche : un aplat, un dégradé doux, une photo claire et floue. Ce qui ne marche pas : un motif contrasté, du texte, une zone sombre juste sous un coin. L'image est réduite puis intégrée au fichier exporté ; elle ne part sur aucun serveur.

Les lecteurs cherchent des modules sombres sur un fond clair. Tu peux changer les couleurs, à trois conditions :

• garder un contraste franc : sombre contre clair, pas deux tons moyens ;
• ne pas inverser : des modules clairs sur fond sombre passent sur certains téléphones et pas sur d'autres ;
• éviter le rouge vif pour les modules, que certains capteurs voient comme du clair.

Trame te prévient sous l'aperçu quand le contraste devient faible. Le fond transparent est pratique pour poser le code sur une image : vérifie alors que l'image sous le code reste claire et uniforme.

Le dégradé fait passer les points d'une couleur à l'autre, en diagonale, à l'horizontale ou à la verticale. Les deux couleurs doivent être sombres : c'est la couleur d'arrivée qui pose problème neuf fois sur dix, et c'est celle que l'avertissement surveille. Un dégradé entre deux tons proches d'une même teinte est le plus sûr.

La norme prévoit une bande vide de 4 modules tout autour du code. Sans elle, le lecteur ne sait plus où le code s'arrête et confond ses bords avec ce qui l'entoure : une bordure, un texte, une photo.

Le réglage par défaut est 4. Descends à 2 ou 3 seulement si tu maîtrises ce qu'il y a autour (fond uni, rien de sombre à proximité). À 0, c'est à toi de garantir l'espace dans ta mise en page.

L'aperçu est affiché sur un damier pour que tu voies la marge réelle et l'effet d'un fond transparent.

Le logo cache des modules. C'est la correction d'erreur qui compense : Trame passe automatiquement en niveau H quand tu ajoutes un logo, et le dessine sur une pastille de la couleur du fond pour qu'il ne se mélange pas aux modules.

Le logo occupe environ 5 % de la surface, bien en dessous des 30 % que le niveau H tolère : il reste de la marge pour une photo médiocre. Deux précautions : un logo simple et contrasté, et un test de lecture avant d'imprimer.

Le fichier reste sur ton appareil. Il est intégré dans le SVG et le PNG exportés, jamais envoyé.

SVG : vectoriel, net à toutes les tailles, quelques kilo-octets. Le bon choix pour l'impression, Figma, Illustrator, Canva, InDesign ou un site web.

PNG : une image en pixels. Pour un mail, Word, PowerPoint, un réseau social ou un outil qui ne lit pas le SVG. Le curseur règle la largeur en pixels ; 1 024 px suffisent pour un écran, prends 2 048 ou plus pour imprimer.

Copier place le PNG dans le presse-papiers pour le coller directement dans un document ou une conversation.

Partager ne donne pas une image mais un lien qui rouvre cette page avec ton code déjà fait : le contenu, les couleurs, le style, le cadre. Celui qui le reçoit peut le scanner, le modifier ou le télécharger dans le format qu'il veut. Sur téléphone le menu de partage habituel s'ouvre, ailleurs le lien part dans le presse-papiers.

Si tu ouvres un lien reçu alors que tu étais déjà en train de faire un code, le tien n'est pas perdu : il est rangé dans tes derniers codes, le bouton en haut de page, et tu le reprends d'un clic.

Ton code voyage dans la partie du lien qui suit le #. Cette partie-là n'est jamais envoyée à un serveur, pas même au mien : un mot de passe wifi ou un IBAN reste entre ton navigateur et celui d'en face. Dans la conversation, l'aperçu annonce qu'un QR code a été partagé, mais il ne peut pas montrer le tien : pour le connaître il faudrait justement lire cette partie du lien. Le logo et l'image de fond ne tiennent pas dans un lien : pour les garder, envoie le PNG.

Taille d'impression : la largeur du code vaut environ un dixième de la distance de lecture. 2 cm pour une carte de visite lue à 20 cm, 20 cm pour une affiche lue à 2 m. Un contenu court se lit plus petit.

Télécharger le pdf écrit un PDF vectoriel directement, sans passer par la fenêtre d'impression : la feuille est à la taille exacte, en millimètres, les codes et les textes sont des tracés, pas des pixels. C'est le fichier à envoyer à un imprimeur. Les textes y sont en Helvetica, une police que tous les lecteurs de PDF possèdent, pour que la feuille sorte pareille partout.

La case repères de coupe et fond perdu ajoute ce qu'un imprimeur attend. Le fond de la feuille dépasse de 3 mm tout autour : c'est le fond perdu, qui évite le liseré blanc quand la lame se décale d'un cheveu. Huit traits fins marquent la ligne de coupe, posés en dehors de la zone imprimée. La page exportée mesure donc 14 mm de plus dans chaque sens : c'est normal, l'imprimeur coupe au format.

Un repère bleu en pointillés apparaît alors dans l'éditeur, à 3 mm du bord : c'est la zone qui survit à la coupe, garde tes textes à l'intérieur. Les repères se retrouvent dans le PDF, le SVG, le PNG et l'impression.

Le fond de la feuille se colore juste à côté : c'est lui qui déborde dans le fond perdu. Pour le chevalet de table, un trait de pliage marque le milieu ; pour le sticker rond, un cercle en pointillés donne la découpe.

Le bouton par lot prend une liste — un contenu par ligne — et fabrique tous les codes d'un coup. Un libellé peut suivre après un point-virgule ou une tabulation : https://exemple.fr/1 ; Table 1. Un fichier csv ou txt s'importe directement, et un csv à virgules est reconnu.

Trois sorties :

• une planche à découper : les codes remplissent le gabarit choisi dans « mise en page », le libellé sous chacun, sur autant de pages qu'il faut ;
• une page par code : ta mise en page sert de modèle, répétée pour chaque ligne. Écris {libellé} dans un texte pour qu'il prenne la valeur de la ligne ;
• une archive : un fichier SVG ou PNG par code, nommé d'après son libellé, dans un zip.

Le lot marche avec les types dont un seul champ change : lien, texte, téléphone, sms, whatsapp, rendez-vous et avis. Le style, les couleurs et les réglages sont ceux du générateur, les mêmes pour toute la série. Jusqu'à 500 lignes, et tout est calculé sur ton appareil : une liste de clients ou de commandes ne part nulle part.

Rien à faire : après une première visite, la page est gardée en mémoire par ton navigateur et s'ouvre sans connexion. La pastille verte en haut de page confirme que c'est en place.

Pour l'avoir sous la main comme une application :

• iPhone : bouton Partager, puis « Sur l'écran d'accueil ».
• Android : menu du navigateur, puis « Ajouter à l'écran d'accueil » ou « Installer ».
• Ordinateur : dans Chrome ou Edge, l'icône d'installation à droite de la barre d'adresse.

Tu peux aussi télécharger la page : un seul fichier, à ouvrir dans n'importe quel navigateur, qui fabrique les QR codes exactement pareil sans jamais toucher à internet.

Le bouton mise en page, sous l'aperçu, ouvre une feuille où le QR code se pose où tu veux : tu le glisses, tu tires la pastille bleue de son coin pour le redimensionner, et tu ajoutes autant de textes que nécessaire.

Les formats vont du papier aux petits objets : A4, A5, A6, carte de visite (85 × 55), badge (90 × 54), chevalet de table (100 × 210, avec son trait de pliage au milieu), sticker rond (⌀ 60, avec son cercle de découpe) et marque-page (55 × 180), chacun en portrait ou en paysage.

Quatre modèles pour démarrer : affiche (un titre, le code, une ligne en dessous), côte à côte (le code à gauche, le texte à droite), étiquettes (la feuille remplie de copies du code, à découper) et code seul. Le titre est pré-rempli à partir de ton contenu : le nom du réseau wifi, le titre de l'événement, le nom du contact, l'adresse du site.

Le modèle étiquettes propose des gabarits de planches du commerce : 65 étiquettes de 38 × 21 mm, 21 de 63,5 × 38 mm, 8 de 99 × 68 mm, ou 24 rondes de 40 mm. Les positions sont calculées au millimètre sur une feuille A4 portrait, comme les planches vendues sous les références L7651, L7160 et L7165. Fais toujours une impression d'essai sur du papier ordinaire avant d'y passer une planche neuve : les tolérances varient d'une marque et d'une imprimante à l'autre.

Un double-clic sur un texte permet de l'écrire. Les flèches du clavier déplacent l'élément sélectionné millimètre par millimètre, Maj + flèche par pas de 5 mm, et la touche Suppr le retire. Un repère bleu apparaît quand l'élément est centré sur la largeur de la feuille.

Quatre sorties. Télécharger le pdf écrit un PDF vectoriel à la taille exacte, sans fenêtre d'impression. Imprimer passe par la fenêtre du navigateur : choisis-y marges : aucune et taille réelle (pas « ajuster à la page ») pour que les millimètres soient respectés. SVG pour Illustrator, Inkscape, Figma ou Canva. PNG à 300 dpi pour un envoi rapide chez l'imprimeur.

Comme le reste de la page, la mise en page est calculée par ton navigateur : elle ne part sur aucun serveur et fonctionne hors ligne.

Quand tu télécharges, copies ou imprimes un code, Trame en garde une trace dans ton navigateur pour que tu puisses le retrouver plus tard. Une icône d'horloge apparaît alors en haut de la page, à côté de la pastille « hors ligne » ; elle reste invisible tant qu'il n'y a rien à montrer, et disparaît dès que tu vides l'historique.

Ce qui est gardé : le contenu du code, ses réglages de style et la date. Les douze derniers, pas plus. Ce qui n'est jamais gardé : les images, logo et image de fond, trop lourdes pour le stockage d'un navigateur. Un clic sur une ligne recharge le code et ses réglages.

Cet historique vit dans le stockage local du navigateur, sur cet appareil. Il ne part sur aucun serveur, il n'est pas synchronisé entre tes appareils, et personne d'autre ne le voit. Comme il contient ce que tu as encodé — y compris un mot de passe wifi ou un IBAN — le bouton tout effacer du menu le supprime pour de bon. Effacer les données du site depuis ton navigateur revient au même.

Le QR code est calculé par ton navigateur, sur ton appareil, avec un encodeur écrit pour cette page. Rien ne part vers un serveur : ni le lien, ni le mot de passe wifi, ni l'IBAN, ni le logo, ni les listes du mode lot. Il n'y a pas de compte, pas de statistiques, pas de cookie.

Deux choses seulement sont écrites dans le stockage local de ton navigateur, et n'en sortent jamais : ton choix de thème clair ou sombre, et l'historique de tes derniers codes, que tu peux effacer d'un clic.

La page s'enregistre dans le navigateur à la première visite. Ensuite, elle s'ouvre et fonctionne sans connexion ; la pastille en haut à droite le confirme. Sur mobile, « Ajouter à l'écran d'accueil » en fait une petite application.

Conséquence utile : un QR code fabriqué ici ne peut jamais cesser de fonctionner. Contrairement aux services qui redirigent vers leur propre adresse, le code contient directement ton contenu.