Aide – Comment ajouter un QR code

  • Auteur/autrice de la publication :

L’ajout d’un QR code dans un article ou une page permet de transférer rapidement une information du site vers un téléphone portable. L’information peut etre :

  • du texte
  • un lien vers un site web
  • un email
  • un sms
  • des coordonnées geographiques
  • une carte de visite
  • un réseau wifi
  • un RDV dans l’agenda

Il y a 2 solutions pour créer un QR code dans un article

1) Générer automatiquement le QR code dans votre article

Il suffit d’insérer ce code dans votre texte  [qrcodetag]contenu du qr code[/qrcodetag] .

exemple avec “bonjour tout le monde” 

  • Le contenu du QR code peut être un lien url (ex: https://csm-eaubonne-tt.fr)
  • un texte ou un sms
  • un email [qrcodetag]mailto:adresse.mail@toto.com[/qrcodetag]
  • Il est possible de le faire pour une carte de visite (Vcard), un réseau wifi ou des coordonnées géographiques, mais il est plus simple d’utiliser la 2eme méthode

Format Vcard (ne mettre que les champs nécessaires)
BEGIN:VCARD
VERSION:4.0
N:Gump;Forrest;;Mr.;
FN:Forrest Gump
ORG:Bubba Gump Shrimp Co.
TITLE:Shrimp Man
PHOTO;MEDIATYPE=image/gif:http://www.example.com/dir_photos/my_photo.gif
TEL;TYPE=work,voice;VALUE=uri:tel:+1-111-555-1212
TEL;TYPE=home,voice;VALUE=uri:tel:+1-404-555-1212
ADR;TYPE=WORK;PREF=1;LABEL=”100 Waters Edge\nBaytown\, LA 30314\nUnited States of America”:;;100 Waters Edge;Baytown;LA;30314;United States of America
ADR;TYPE=HOME;LABEL=”42 Plantation St.\nBaytown\, LA 30314\nUnited States of America”:;;42 Plantation St.;Baytown;LA;30314;United States of America
EMAIL:forrestgump@example.com
REV:20080424T195243Z
x-qq:21588891
END:VCARD

Le format vCard implémente les types de propriétés suivants. Conformément à la spécification de la version 3.0, les vCards doivent contenir la propriété VERSIONN et FN entre les entités BEGIN:VCARD et END:VCARD.

Nom Description Signification Propriétés
N Nom (Name) Une représentation structurée du nom de la personne, du lieu ou de la chose associée à l’objet vCard (Obligatoire) Champs textes séparés par des points-virgules : Nom de Famille, Prénom(s), Nom(s) additionnel(s), Titre(s) (DrPr, …), Suffixe(s) (Jr., M.D.). Les champs peuvent contenir eux-mêmes plusieurs valeurs séparées par des virgules.
FN Nom formaté (Formatted Name) La chaîne formatée représentant le nom associé à l’objet vCard (Obligatoire) Unique champ texte
NICKNAME Surnom (Nickname) Un nom descriptif ou familier donné à la place ou en addition du nom de la personne, du lieu ou de la chose associé Un ou plusieurs champs textes séparés par des virgules
PHOTO Photographie (Photograph) Une illustration ou une photographie de l’individu associé à la vCard Une URI vers une ressource externe ou le contenu binaire de l’image (en précisant encodage et type)
BDAY Date de naissance (Birthday) Date de naissance de l’individu associé à la vCard Date au format AAAAMMJJ ou ISO 8601
ADR Adresse de livraison (Delivery Address) Une représentation structurée de l’adresse physique de livraison associé à l’objet vCard Champs textes séparés par des points-virgules : Boîte postale, Adresse étendue, Nom de rue, Ville, Région (ou état/province), Code postal et Pays
LABEL Libellé de l’adresse (Label Address) Libellé de l’adresse physique de livraison de la personne ou de l’objet associé à la vCard Unique champ texte
TEL Téléphone (Telephone) La chaîne du numéro de téléphone pour les appels vocaux associée à l’objet vCard Unique champ texte
EMAIL Email (Email) L’adresse email associée à l’objet vCard Unique champ texte
MAILER Programme de mailing (Email Program) (Optionnel) Le type de programme de mailing utilisé Unique champ texte
TZ Fuseau horaire (Time Zone) Indication du fuseau horaire courant de l’objet vCard Décalage à l’UTC au format +05:30 ou -02:00
GEO Géopositionnement (Global Positioning) Propriété indiquant la latitude et la longitude Latitude et Longitude en décimale séparées par un point-virgule
TITLE Titre (Title) Indique le titre du poste, de la fonction ou de la personne associée à l’objet vCard au sein d’une organisation Unique champ texte
ROLE Fonction (Role or occupation) Le rôle, la profession ou la catégorie de métier de l’objet vCard au sein d’une organisation Unique champ texte
LOGO Logo (Logo) Une illustration ou le logo de l’organisation associé à l’individu de l’objet vCard Une URI vers une ressource externe ou le contenu binaire de l’image (en précisant encodage et type)
AGENT Agent (Agent) Informations à propos d’une autre personne qui agira au nom de la personne associée à la vCard. Généralement, cela peut être un administrateur, un assistant ou un secrétaire de l’individu de la vCard. Une autre vCard ou une URI vers la vCard de l’Agent
ORG Nom ou département de l’organisation (Organization Name or Organizational unit) Le nom et optionnellement le ou les département(s) associé(s) à l’objet vCard. Cette propriété est basée sur les propriétés du Nom et du Département de l’organisation dans la norme X.520. Champs textes séparés par des points-virgules : de l’entité la plus englobante à gauche à l’entité la plus précise au sein de l’organisation à droite.
CATEGORIES Catégorie (Category) Catégories applicables à la vCard Champs textes séparés par des virgules représentant chacun une catégorie
NOTE Note (Note) Spécifie des informations supplémentaires ou un commentaire qui est associée à la vCard Unique champ texte
REV Dernière révision (Last Revision) Combinaison de la date du calendrier et l’heure du jour de la dernière mise à jour à l’objet vCard Date/heure, par exemple 20171231T235900Z
SORT-STRING Texte pour le tri (Sort string) La chaîne qui sera utilisée pour trier le nom de l’objet (exemple : “Croix” pour “de la Croix”) Unique champ texte
SOUND Son (Sound) Par défaut, si cette propriété n’est pas regroupée avec les autres propriétés, elle précise la prononciation de la propriété FN (Formatted Name) de l’objet vCard. Une URI vers une ressource externe ou le contenu binaire du fichier (en précisant encodage et type)
URL URL (URL) Le lien internet permettant d’obtenir les informations mises à jour en temps-réel de l’objet vCard Une unique URI
UID Identifieur unique (Unique Identifier) Indique une valeur qui représente un identifieur unique, persistant et global associé à l’objet vCard Unique champ texte
VERSION Version (Version) Version de la spécification vCard (Obligatoire) Unique champ texte
KEY Clé publique (Public Key) La clé publique de chiffrement associée à l’objet vCard Unique champ binaire ou texte

Pour un réseau wifi : WIFI:T:WPA;S:mynetwork;P:mypass;;

Pour un RDV… exemple simple (beaucoup d’autres 
BEGIN:VEVENT
SUMMARY:Présentation Tennis de Table Auchan Sujet du RDV
LOCATION:25 Avenue Jeanne d’Arc, 95600 Eaubonne Adresse
DESCRIPTION:Démonstration de Tennis de Table Description
DTSTART:20180901T100000 Heure de début
DTEND:20180901T180000 Heure de fin
URL:https://csm-eaubonne-tt.fr/event/presentation-chez-auchan-le-1er-septembre-2018 Lien internet
END:VEVENT

Le code ci-dessus doit être présenté sans retour à la ligne  et entre les balises qrcodetag. Il est toutefois préférable d’utiliser la 2eme méthode pour un RDV
[qrcodetag size="250" link="true"]BEGIN:VEVENT SUMMARY:Présentation Tennis de Table Auchan LOCATION:25 Avenue Jeanne d Arc, 95600 Eaubonne DESCRIPTION:Démonstration de Tennis de Table DTSTART:20180901T100000 DTEND:20180901T180000 URL:https://csm-eaubonne-tt.fr/event/presentation-chez-auchan-le-1er-septembre-2018 END:VEVENT[/qrcodetag]
Voici le résultat

Par defaut, la taille du QR code est de 150 pixels, mais vous pouvez changer cette valeur dans le shortcode
Ex: [qrcodetag size="250" link="true"]content[/qrcodetag] Pour un code de 250 pixels

Cette taille peut être intéressante pour les  RDV agenda ou pour les QR codes avec beaucoup d’informations. 

GEO tagging using QR Codes

A QR Code reader might then open a local mapping application or could open a mapping web site like Google Maps in the device’s web browser. It will be centered to the specified location or query and set to the zoom state accordingly to your specifications.

The Geo URI scheme is still under development and not fully supported. Draft is available
here. It provides latitude, longitude and optionally altitude.
Optionally you can add a query defined in the Google Map Parameters or in the Google Maps API.
This query can contain search information (‘?q=hotel+near+city’), zoom information (‘?z=10′) or map type information (?t=[m|k|h|p])

What’s inside the geo tag?

The begin characters (‘geo:’) tells the decoding software the type of the embedded data.
Then you can specify the geo information you want to include.

geo-URI = “geo:” geo-location [ “?q=” query [ “[&|?]z=” zoom-level ] [ “[&|?]t=” map-type ] [ “[&|?]layer=” layer-type ] ]

The properties are as follows:

GEO URI PROPERTY DESCRIPTION AND SYNTAX
geo-location Syntax: geo-location = latitude “,” longitude [ “,” altitude ]where
latitude (deg N in range[-90, 90]),
longitude (deg W in range[-180, 180])
and
altitude (optional, elevation above mean sea level in meters, can be negative).
query(optional) query = search_words concatenated with “+”specified in section 3.4 of RFC 3986.
zoom-level (optional) zoom level = [1..20]1 shows the whole Earth, centered at the given geo-location.
2 shows a quarter of the Earth, and so on.
Values above 20 will be clamped.
map-type (optional) available options are “m” map, “k” satellite, “h” hybrid , “p” terrain, “e” GoogleEarth, “8” 8-bit
layer-type (optional) activates overlayavailable options are “t” traffic, “c” street view

 

 

 

 

 

 

 

 

The resulting geo-URI can look like:geo:40.79,-73.9535
geo:40.79,-73.9535,7
geo:40.79,-73.9535?z=17
geo:40.79,-73.9535?q=restaurant
geo:0,0?q=restaurant+New+York
geo:40.79,-73.9535?q=restaurant&z=13
Testing with Google Maps App on Android resulted in:

  • If you specify a query with a location name, geo-location is superseded.
  • If you specify any query, zoom level is superseded.
  • If you specify a query, you might consider to omit geo-location data.
  • Combining geo-location and zoom level set gives a piece of a map.
  • If you specify a query with a location, be aware of specifying a unique location. Results are rated according to current user position.

vous pouvez ajouter un tooltip
[qrcodetag tooltip=contenu du QR code]votre lien ou votre texte[/qrcodetag]
Ou contenu du QR code est le tooltip

2) Deuxieme méthode

Le plus simple est d’aller sur https://www.unitag.io/fr/qrcode

Créer votre QR code puis passer en mode texte dans votre article et insérer le code en copier/ coller du code html