Créer un QR code Foursquare

Dans le cadre de la cinquième saison du Café Numérique, j’ai entrepris la création d’un QR code Foursquare pour chaque soirée.

Ce QR code permet d’ouvrir l’application Foursquare si elle est installée sur votre smartphone Android. S’il elle n’est pas installée ou que vous utilisez un Iphone, c’est l’application web mobile qui s’ouvrira.

Pour créer le code barre 2D j’utilise ce site : http://keremerkan.net/qr-code-and-2d-code-generator/ mais il en existe d’autre comme http://zxing.appspot.com/generator/ que j’aime aussi beaucoup.

Récupérer l’URL

Prenons un lieu, par exemple : Microsoft Executive Briefing Center et cherchons le sur Foursquare, nous trouvons l’URL suivante : https://www.foursquare.com/v/microsoft-executive-briefing-center/50250806e4b0f1b43771a29d

Elle est longue, trop longue. Nous pouvons la raccourcir :

utiliser HTTP au lieu de HTTPS : vous serez de toutes façon redirigé vers l’application ou vers la version sécurisée de l’application web ;
retirer les www ;
retirer microsoft-executive-briefing-center, en effet, seul le code alphanumérique 50250806e4b0f1b43771a29d est nécessaire pour identifier le lieux.

Au final, nous obtenons l’adresse suivante : http://foursquare.com/v/50250806e4b0f1b43771a29d encore un peu longue, mais c’est déjà mieux.

Nouvelle méthode

Encore plus court et encore plus simple sur la page d’un lieu, il y a une adresse raccourcie fournie par Foursquare.

Générer le QR code

Comme je l’ai dit en début d’article, nous allons utiliser ce générateur : http://keremerkan.net/qr-code-and-2d-code-generator/

Les options de base sont correcte, les 3 choses à faire sont

Renseigner l’URL Foursquare ;
Sélectionner « medium-hi » comme en face de « error correction level »,
« medium-low » suffit si vous ne comptez pas incorporer de logo au centre de l’image ;
Presser le bouton « generate code« .

Et voila le résultat :

Créer l’afficher

Personnaliser le QR code

Je vais personnaliser le QR code à l’aide du logiciel Inkscape, le petit frère libre d’Illustrator, mais vous pouvait utiliser n’importe quel logiciel de dessin vectoriel pour réaliser les opérations suivantes.

Importer le QR code

Vectoriser le QR code

Cliquer sur « path » puis que « trace bitmap », dans la boîte de dialogue qui apparaît, régler les options comme elles sont affichées sur la copie d’écran ci-dessous :

Il en résulte un second QR code, aussi net que le premier, redimentionnable sans devenir flou ni pixeliser, sans fond et dont on peut choisir la couleur.

Donner un effet au QR code

Voici 4 exemples ce que l’on peut faire subir à un QR code sans qu’il ne perde de son efficacité.

Seule chose vraiment problématique, Le négatif, en effet tous les lecteurs ne permettent pas de lire un QR code dont le premier plan est plus sombre que le fond. Il existe toutefois des astuces pour en donner l’illusion, n’hésitez pas à me consulter pour d’autres effets plus complexes.

Ajouter un logo

Maintenant, nous allons ajouter le logo du Café Numérique au centre de l’image.

Modifier les repères

Vous aurez remarqué que malgré les modifications apporté au QR code, les repères, les 4 carrés ne changent pas.

Dans notre exemple, j’ai décidé de les remplacer par des ronds. Mais tout d’abord, supprimez les 3 gros repères carrés.

En bref

Importer le QR code ;
Vectorier le QR code ;
Modifier les tracets ;
Ajouter un logo au centre ;
Remplacer ou modifier les repères ;
Exporter le QR code.

Récupérer le logo Foursquare

Vous pourrez récupérer le logo Foursquare à cette adresse : https://playfoursquare.s3.amazonaws.com/press/misc/windowcling.pdf

Résultat

Vous aussi vous êtes membre du Café Numérique et vous voulez réaliser ce type d’affiches, je peux vous fournir le fichier source vectoriel en SVG (universel) ou plus spécifique en EPS ou en PDF.