Monetizing Ultrabook Apps with QR codes and HTML5

In this presentation, from the HTML5 Developer Conference in San Francisco, Intel Engineer Daniel Holmlund explains the value of using QR codes to connect people and devices and how you can do this with HTML5. And to keep it "real" he starts the presentation by showing his agenda in QR code format and also pointing the audience to resources to get a QR code reader should their smart phones not already be well equiped ;-).

Also before we get into things Daniel explains why Intel is supporting HTML5, saying Intel believes in developing great communities, and we support HTML5 for developing first class apps for PC and Intel devices and of course Ultrabooks and the Intel AppUp center are great resources for distributing and monetizing HTML5 apps. I think that is the only commercial of the presentation but nice he is providing all the links to these things via QR code.

In his first example Daniel points to as a site and brand that made good use of QR codes for monetization. They apparently build a HUGE lego based QR Code and put it on billboard. The QR code directed people to the website and it generated 49% increase in sales. Sounds impressive

What is a QR Code

The QR code has its history with Toyota who found bar codes were difficult to line up when scanning boxes of inventory. QR code is patented by Denso but put in the public domain so anybody can use it.

QR codes can hold a lot of information, and link people to many things. They are easily scanned lending themselves to easy use, especially with people carrying smartphones and other smart devices. QR codes can deliver people to websites, videos, maps, etc as well as nearly any digitally distributable content can be made accessible via a QR code. QR codes are good for advertising because like the Internet they allow information to quickly be transferred between people and devices.

Using QR Codes

One challenge is not everybody knows how to use QR codes, so some education is required for effective marketing. Creative Marketing is one way to break thru. Starbucks and Lady Gaga did a campaign, where Gaga fans collected codes, then were able to get a song for free by collecting all the codes. Tesco supermarket put up a billboard along a popular subway line. In the billboard was a photo of food and a QR code, when if used could purchase the food with delivery to your home. This is a great example of the power of QR codes to extend reach, as in this case providing grocery services to people travelling on the subway.

Help Japan Now was a great example of a QR code to help relief efforts. Other altruistic or charitable uses include Chili's putting QR codes on Children's coloring mats. Parents could then donate to St Jude’s from the mats. This raised 5 million dollars

Additionally Facebook is integrating QR codes, as with other social media services, and in-app solutions are being made like AppUp to help monetize software. QR codes are also quickly becoming part of the Geek Culture and is driving interaction and choices

Tech behind QR Codes
Scanable codes have been around for a while evolving along the way from the first bar codes that IBM invented UPC code that could allow for 13 digits of information to QR codes that allow for 7,000 digits
Code 16 & 49 versions took the1 dimensional stacking two dimensions but had issues with alignment of the code for scanning. QR codes are 2 dimensional and allow for scanning at various angles
QR codes can be customize the code for the amount of data from 21 x 21 modules up to 177x177 modules

Error correction is built into QR codes allowing for low -medium - high correction where from 7% to 30% of the code can be missing and reconstructed depending on what level of error correction you use.

QR codes have a structure where various areas of the code are applied for specific functions like alignment and error correction.

QR Code Structure

The Finder Pattern is one of the most recognizable aspects of a QR code. These are the squares in three corners (upper left, upper right and bottom left corners). Regardless of angle being scanned it’s a recognizable patter to determine the angle and alignment of QR code. This allows for faster scanning and reading of the code.

Another easily identifiable structure is the QR Code Alignment Pattern. This is a block that at the bottom right used at relative distances to help determine if a code has been distorted.

Additional structures of a QR code include:
Timing patters, Format Data, Error correction, Version Data, as well as the Mandatory white space that helps define the code as a QR code

Coding for QR Codes
There are many existing libraries available to help you create a QR code from scratch but it’s tedious. Fortunately you can use Jquery to build your own QR code
The following images show you resources for building your own QR codes as well as a Jquery example (click to enlarge).

Try your code with the HTML5 Playground then share with your friends. For more resources go to the Ultrabook Community to get tools, SDK, and documentation as well as access to AppUp Encapsulator to package your app as a Windows Binary for distribution to PC via App stores like AppUp

Well I guess one more commercial before the end. In all a great session and insight into QR codes. If you have any questions on this presentation, ask them here and well get Daniel to respond.

For more complete information about compiler optimizations, see our Optimization Notice.