Create your own ´óÏó´«Ã½ QRCode
Post categories: Prototyping
| 12:00 UK time, Thursday, 15 September 2011
A few years ago, when I was working as an engineer on the , we started creating a QRCode for every ´óÏó´«Ã½ programme. Here's an example for Dr Who. A if you are unfamiliar, is a type of matrix barcode (or two-dimensional code) designed to be read by smartphones.
Back then, these codes were relatively new to the public at large, and people had only really scratched the surface of the things you can do with them. It seems though that things have changed. You are now seeing them on the side of buses and on tube train adverts, as well as on posters and in magazines. This is great, and allowed me to unearth some extra work I did back then.
I had done some experimenting with . This work never quite saw the light of day. But I'm happy to say that now it has! Albeit in a slightly different form.
I have created a little prototype web application that will convert any ´óÏó´«Ã½ url into a ´óÏó´«Ã½ QRCode. You can see an example below. If you have a suitable QRCode scanner, this will decode to /rd.
The url for the application is:
The generated QRCodes can then be downloaded and used on posters, websites etc. Anywhere in fact you need to graphically represent a url. Easy!
A few facts about the application. It is a simple web application, running under and . It uses and rQRCode to create the QRCodes, and uses the to create the shortened url that is embedded in the codes. The application uses and the individual QRCode pages live at unique urls in which the code is embedded in the actual webpage using the . This not only makes the page easier to cache, but also means that we can mitigate people hot-linking to the images.
Finally, you can get the source from our .
Comment number 1.
At 15th Sep 2011, Terence Eden wrote:This is a brilliant idea. I would suggest three small improvements.
Firstly, Bit.ly allows *anyone* to see the click stats of a URL simply by appending a + to it. So, I can see all the scans of the above QR code by visiting
I appreciate that this may not be a huge commercial / privacy for an organisation like the ´óÏó´«Ã½, but it does mean your rivals can see exactly how many scans a code has, when they were scanned etc.
Secondly, nearly 100% of scans come from mobile phones - yet there's no proper mobile redirection in place. Visiting doesn't redirect to the mobile version, for example. The /rd page in the QR above is really hard to use - even on a modern smartphone. iPlayer links seem to work well, though.
Thirdly (and this is a cheeky one) a bug report on URL validation!
I tried using the ´óÏó´«Ã½ URL - but it told me it was invalid and wouldn't let me submit the form.
Using .example.com/ allowed me to submit the form, but returned an error.
Great initiative - looking forward to seeing how it evolves.
T
Complain about this comment (Comment number 1)
Comment number 2.
At 15th Sep 2011, Duncan Robertson wrote:@Terence, thanks for your feedback.
I agree the mobile redirection is not ideal. I am unable to address this myself, but would hope it could be dealt with in the future.
As for the incorrect validation. Currently only bbc.co.uk urls will become bbc.in links and some *.bbc.co.uk, and this is something bit.ly handle for us. I realise this means some urls won't work, but for this prototype I think it's fine. To solve your problem you could use the canonical url which the shortened bbc.mobi redirects to: /mobile/tv/doctorwho/ which will correctly create a code.
The other url you provided is not a valid bbc url, so will indeed error.
I'll look at making the validation more transparent for the user.
Complain about this comment (Comment number 2)
Comment number 3.
At 15th Sep 2011, Kosso wrote:Nice job. I saw a few of these QR codes with a logo embedded in the middle recently.
I like the idea of using the data uri scheme in the result page to stop the hot linking. Nice touch.
One minor thing. There's a typo: "You can genrate other sizes"
Complain about this comment (Comment number 3)
Comment number 4.
At 15th Sep 2011, Duncan Robertson wrote:@kosso, thanks, and thanks for the typo heads-up
Complain about this comment (Comment number 4)
Comment number 5.
At 17th Sep 2011, Cassidy wrote:Thank you for this nice post. Love the idea of a «branded» qr-code.
Complain about this comment (Comment number 5)
Comment number 6.
At 18th Sep 2011, QRazystuff wrote:Excellent to see a resurgence of QR tech from the ´óÏó´«Ã½! Designer QR Code art is becoming extremely popular with big brands as demonstrated by the works of art on display in The World's First Designer QR Code Art Gallery - which now has 100+ exhibits on display.
Complain about this comment (Comment number 6)
Comment number 7.
At 11th Oct 2011, U14179821 wrote:All this user's posts have been removed.Why?
Complain about this comment (Comment number 7)
Comment number 8.
At 9th Apr 2012, kellyj481 wrote:Awesome post.Learn how to incorporate QR codes in your web apps to deliver quick information directly to your users' mobile device
Complain about this comment (Comment number 8)