Some Info About QR Codes
What is a QR Code?
A QR (Quick Response) Code is a two dimensional code developed by Denso Wave that can store up to 4,296 characters or 2,953 data bytes .
What can I do with those codes?
You can store all kinds of data in a QR Code, e.g. a URL, geocoordinates or simple plain text messages. Once you have a QR Code, a decoder (as obviously as it sounds) can decode it. The great thing is, some smartphones have a decoder app with extended functionality like opening the URL if it detects an URL.
What makes it special?
The data is stored redundantly thus if your code is damaged it's still possible to decode it if the damage is not bigger than up to 30% of the code.
Finder Pattern
The finder pattern is used for detecting the position of the QR Code. By arranging the finder pattern at the three corners of a QR code, the position, the size, and the angle of the symbol can be detected.
Timing Pattern
The timing pattern is used for identifying the central coordinate of each cell in the QR Code. This is done by arranging white and black units alternately in a line between the finder patterns.
Alignment Pattern
The alignment pattern is used for correcting distortion in QR codes. Depending on how much data is encoded you can see more or less but at least one alignment pattern in your code.
This is a demo about generating QR Codes with only HTML Elements as units, each unit you see in that code is a HTML DIV element.
Love it? Then you should really check out
QR-DesignerNote:If you're a developer and you want to do the same:
This is a bad practise, you shouldn't do that. I did it because I
- wanted to test how to generate QR Codes with JavaScript AND also support IE versions before 9 ;-) (at least it works for 8 now)
- wanted to play around with some CSS3 stuff
If you have any questions regarding the demo, have a
tweet with me or drop me a line into
my contact form on patrick-wied.at.