Créer un QR code Foursquare

Créer un QR code Foursquare

Dans le cadre de la cinquième saison du Café Numé­rique, j’ai entre­pris la créa­tion d’un QR code Foursquare pour chaque soirée.foursquare logo

Ce QR code permet d’ouvrir l’ap­pli­ca­tion Foursquare si elle est instal­lée sur votre smart­phone Android. S’il elle n’est pas instal­lée ou que vous utili­sez un Iphone, c’est l’appli­ca­tion web mobile qui s’ou­vrira.

Pour créer le code barre 2D j’uti­lise ce site : http://kere­mer­kan.net/qr-code-and-2d-code-gene­ra­tor/ mais il en existe d’autre comme http://zxing.apps­pot.com/gene­ra­tor/ que j’aime aussi beau­coup.

Récu­pé­rer l’URL

Prenons un lieu, par exemple : Micro­soft Execu­tive Brie­fing Center et cher­chons le sur Foursquare, nous trou­vons l’URL suivante : https://www.foursquare.com/v/micro­soft-execu­tive-brie­fing-center/50250806e4b0f1b43771a29d

Elle est longue, trop longue. Nous pouvons la raccour­cir :

  • utili­ser HTTP au lieu de HTTPS : vous serez de toutes façon redi­rigé vers l’ap­pli­ca­tion ou vers la version sécu­ri­sée de l’ap­pli­ca­tion web ;
  • reti­rer les www ;
  • reti­rer micro­soft-execu­tive-brie­fing-center, en effet, seul le code alpha­nu­mé­rique 50250806e4b0f1b43771a29d est néces­saire pour iden­ti­fier le lieux.

Au final, nous obte­nons 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 raccour­cie four­nie par Foursquare.

Adresse Microsoft

Géné­rer le QR code

Comme je l’ai dit en début d’ar­ticle, nous allons utili­ser ce géné­ra­teur : http://kere­mer­kan.net/qr-code-and-2d-code-gene­ra­tor/

Générateur de QRcode

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

  1. Rensei­gner l’URL Foursquare ;
  2. Sélec­tion­ner « medium-hi » comme en face de « error correc­tion level »,
    « medium-low » suffit si vous ne comp­tez pas incor­po­rer de logo au centre de l’image ;
  3. Pres­ser le bouton « gene­rate code« .

Et voila le résul­tat :

QRcode Microsoft

Créer l’af­fi­cher

Person­na­li­ser le QR code

Je vais person­na­li­ser le QR code à l’aide du logi­ciel Inks­cape, le petit frère libre d’Illus­tra­tor,  mais vous pouvait utili­ser n’im­porte quel logi­ciel de dessin vecto­riel pour réali­ser les opéra­tions suivantes.

Impor­ter le QR code

Inkscape : importer le QR code

Vecto­ri­ser le QR code

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

Inkscape : menu vectoriser le bitmapInkscape : boîte de dialogue vectoriser le bitmap

Il en résulte un second QR code, aussi net que le premier, redi­men­tion­nable sans deve­nir flou ni pixe­li­ser, sans fond et dont on peut choi­sir la couleur.

 Inkscape : QR code vectorisé

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 effi­ca­cité.

Seule chose vrai­ment problé­ma­tique, Le néga­tif, 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 toute­fois des astuces pour en donner l’illu­sion, n’hé­si­tez pas à me consul­ter pour d’autres effets plus complexes.

4 exemples de QR codes personnalisés

 

Ajou­ter un logo

Main­te­nant, nous allons ajou­ter le logo du Café Numé­rique au centre de l’image.

 QR code & logo

Modi­fier les repères

Vous aurez remarqué que malgré les modi­fi­ca­tions apporté au QR code, les repères, les 4 carrés ne changent pas.

Dans notre exemple, j’ai décidé de les rempla­cer par des ronds. Mais tout d’abord, suppri­mez les 3 gros repères carrés.

QR code sans repère        QR code avec repères ronds

En bref

  1. Impor­ter le QR code ;
  2. Vecto­rier le QR code ;
  3. Modi­fier les tracets ;
  4. Ajou­ter un logo au centre ;
  5. Rempla­cer ou modi­fier les repères ;
  6. Expor­ter le QR code.

Récu­pé­rer le logo Foursquare

Vous pour­rez récu­pé­rer le logo Foursquare à cette adresse : https://play­foursquare.s3.amazo­naws.com/press/misc/window­cling.pdf

Résul­tat

Affiche Microsoft Foursquare Café Numérique Inscakpe & explication

 

Vous aussi vous êtes membre du Café Numé­rique et vous voulez réali­ser ce type d’af­fiches, je peux vous four­nir le fichier source vecto­riel en SVG (univer­sel) ou plus spéci­fique en EPS ou en PDF.

Articles simi­laires :

Tagués avec : , , ,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.