Tutoriel: Utilisation simple des QR Codes avec PHP et jQuery

Publié par Gui dans Développement

Vous connaissez tous les QR Codes (Quick response codes), ces code-barres 2d contenant des blocs noirs sur un fond blanc.

Ils sont utilisés un peu partout maintenant, dans la publicité, sur les produits ou dans nos sites internet.

En effet, cet outil simple permet d‘accomplir facilement de nombreuses fonctions depuis un smartphone capable de les décoder.

Ils permettant par exemple d’accéder facilement à une page web sans avoir à la recopier dans le navigateur de son smartphone, ou encore d’ajouter un rendez-vous à son agenda.

Application

Je vous propose donc aujourd’hui une application simple qui permet de créer à la volée un QR Code à partir d’une sélection de texte.

Principe

Le principe est simple : Après sélection d’une portion de texte, il suffit de cliquer sur l’icone qui apparaît à la fin de la sélection. Le script va récupérer via Ajax une image générée à partir de la sélection pour l’afficher à côté du curseur.

Initialisation du script

Il n’y pas de paramètres disponibles par défaut, mais nous pourrions imaginer donner la possibilité d’ajuster la position de l’image, changer l’icone, changer l’effet etc…

$("p, li").qrcodeSelection();

Ici nous autorisons la génération d’un QR Code seulement pour les éléments de paragraphe (< p >) et de liste (< li >).

Limitations

Le script fonctionne sur tous les navigateurs modernes (Firefox, Chrome, Safari) à l’exception d’Internet Explorer. Le problème vient de la façon de récupérer la sélection de texte, j’avais commencer à creuser mais je n’ai pas le temps de maintenir la compatibilité avec celui-ci.

Dépendances

Le script se base sur la très bonne librairie PHP créée par FUKUCHI Kentaro et disponible ici : http://fukuchi.org/works/qrencode/index.en.html

A vous de jouer

Vous pouvez utiliser ce script et surtout l’enrichir pour améliorer l’interaction entre vos applications et nos smartphones.

Démo : tuts.guillaumevoisin.fr/jquery/qrcodeSelection

Téléchargement : Sources

Laisser une réponse


Post shadow