Monthly Archives: October 2008

Debug menu, where have you been all my life?!

By accident, I came across a feature today which has pretty much made Firefox redundant for me.

I’m sure I’m not alone in reverting to Firefox occasionally for one or two key features that don’t exist in Opera (or at least I haven’t found them yet). The Web Developer toolbar was my addictive feature but without wishing to sound like a cheesy commercial, all that changed when I found the Dragonfly team’s debug menu.

Although it doesn’t do everything the Web Developer toolbar can do, it’s got plenty to keep me productive and happy in a single browser. The only time I need fire up an orange fox, blue “e”, etc. is for cross-browser testing but in an ideal world, that would be redundant too.

I highly recommend you try it out and here’s an updated version of the menu which has the addition of a feed validator, W3C HTML5 validator, headers checker and window resize options (thanks Christian).

QR codes – with an extra dimension

After thinking a bit more about logos in QR codes (the fun never stops!), it occurred to me that instead of obscuring some of the code’s appearance with a logo, you could obscure some of the code’s appearance time with a logo. In other words, make it animated with the logo disappearing or shrinking to some extent and it would still be readable. This has the added of benefit of not needing a high error correction level so you can keep the whole image small.

Here’s a quick 29×29 attempt made with the lovely Gimp using Demonstro’s nice alternative Opera logo:

Animated Opera QR code

N.B. If you can’t see it moving please try using a different browser.

At the end of the day, it’s still an animated image which some people find annoying but at least it has a purpose.

I have more ideas but that’s enough excitement for now…

Opera’s (potential) HTML5 compliance

With HTML5 on its way I thought I’d take inspiration from http://www.w3.org/QA/2008/09/top-500-html5-validity.html who in turn took inspiration from Opera’s QA team and test the front page of a few of Opera’s websites for HTML5 conformity.

Firstly, an important caveat. The HTML5 validator is beta so may have erroneously missed or mis-detected issues. In addition, at the time of writing HTML5 is still a working draft only and public websites should not be expected to support it yet. Not being valid HTML5 means nothing unless the document’s doctype indicates that it’s HTML5, which none of them do at this stage. This is just intended to be a (hopefully educational) “what if” exercise. Having said that, several sites didn’t even validate against current standards – I’m looking at you list.opera.com, widgets.opera.com, bugs.opera.com, portal.opera.com, labs.opera.com and irc.opera.com!

So onto the HTML5 validation results, in no particular order:

HTML5 validator result

This is all academic until we see what errors were found and how to correct them, in other words, what are some of the common changes from HTML 4 to 5 that we may encounter in our own websites?

Not surprisingly, the majority are a result of presentation and markup being strictly separated at last. The following were encountered in this exercise:

  • Attribute size not allowed on element input.
  • Attributes bgcolor, link, alink, vlink not allowed on element body.
  • Attribute width not allowed on element table or td.
  • Attribute border not allowed on element table or img.
  • Attribute bgcolor not allowed on element table, tr or td.
  • Attributes cellspacing and cellpadding not allowed on element table.
  • Attribute align not allowed on element td or div.
  • The center, font and big elements are obsolete.

CSS is the place for presentational items such as these.

Other HTML5-specific errors were mostly as follows:

  • Attribute accesskey not allowed on element a.
  • Attribute name not allowed on element a. (Use id)
  • No whitespace allowed in paths/URIs. (Use %20)
  • The acronym element is obsolete. (Use abbr)
  • Bad values content-type and cache-control for attribute http-equiv on element meta.

Admittedly this only uses Opera’s websites as an example and they are more compliant than most, but I was still surprised at how little work would be needed to make any of these valid HTML5. I wonder if the folks at snapshot.opera.com know they’re already ahead of the game?

Operatic QR codes

QR codes are the fastest way to access a webpage with your phone and Opera is the fastest way to view a webpage with your phone. QR codes + Opera = a match made in heaven and yet they’re pretty scarce on opera.com. Not any more.

Widely used in Japan, QR codes seem to be gaining ground in other countries as more and more phones ship with scanning capabilities. They are the most widely-used form of so-called 2D bar code containing a varying number of dark and light pixels representing data. This data can be plain text, a URL or mail address, a combination of these, an image, even another QR code. Although QR codes look like a mess of dots, they can be customised to contain a pattern or, for today’s exercise, a logo. Hmm, wonder which one to choose…

1. So, the most simple attempt first: Opera’s big red “O” superimposed onto a QR code containing the text “Opera Software” and a link to http://www.opera.com:

QR code for Opera

Bar code scanners see the world in black and white but with enough opacity in the logo the scanner can still read this code, however the red “O” is now a pink “O” and I think we can do better.

2. QR codes have a neat built-in feature that allows them to be damaged but still readable. When you create a QR code, as well as specifying the data and size you can choose an “error correction” setting. The highest level means that up to 30% of the code can be damaged or incorrect but the code as a whole can still be read, the only downside being that its size will increase a bit. This means we can paste a small logo onto our code without affecting its readability:

QR code for Opera

Of course, the downside of this is that there’s now no room for error – the slightest bit of damage to the code will probably render it unreadable, but if they’re going to be primarily displayed on-screen this is not a problem. Pretty good, but not perfect. To make the slightest change to the code or to make several variations you have to edit the image each time. Far better to be a lazy programmer and create the code and its logo dynamically.

3. Copying Taking inspiration from Duncan Robertson’s work at the BBC, we can achieve the following result:

QR code for Opera

After many attempts, this was about the maximum size of logo I could get away with for this size QR code. It may not have smooth edges but as it’s a two-colour logo at the same scale as the code, the program that generates the code can be extended to draw the logo on top at the same time. Following Duncan’s example, this is the matrix for this logo on a 45×45 QR code:

$opera_logo = [
    ['w', 20, 13, 26, 13],
    ['w', 18, 14, 28, 14], ['r', 21, 14, 25, 14],
    ['w', 17, 15, 29, 15], ['r', 19, 15, 21, 15], ['r', 25, 15, 27, 15],
    ['w', 16, 16, 22, 16], ['r', 18, 16, 20, 16], ['w', 24, 16, 30, 16], ['r', 26, 16, 28, 16],
    ['w', 16, 17, 21, 17], ['r', 17, 17, 19, 18], ['w', 25, 17, 30, 17], ['r', 27, 17, 29, 18],
    ['w', 15, 18, 20, 28], ['r', 16, 19, 18, 27], ['w', 26, 18, 31, 28], ['r', 27, 19, 30, 27],
    ['w', 16, 29, 21, 29], ['r', 17, 28, 19, 29], ['w', 25, 29, 30, 29], ['r', 27, 28, 29, 29],
    ['w', 16, 30, 22, 30], ['r', 18, 30, 20, 30], ['w', 24, 30, 30, 30], ['r', 26, 30, 28, 30],
    ['w', 17, 31, 29, 31], ['r', 19, 31, 21, 31], ['r', 25, 31, 27, 31],
    ['w', 18, 32, 28, 32], ['r', 21, 32, 25, 32],
    ['w', 20, 33, 26, 33]
];

This means that the underlying QR code can be generated automatically without having to add the logo each time. In other words, each opera.com page can easily have its own QR code proudly displaying Opera’s logo. Here are a couple more linking to this page to get the ball rolling:

QR code for Opera
QR code for Opera

N.B. For those wanting to quickly create plain vanilla QR codes, I’ve made a simple widget. For more more advanced code generation, there are good open source libraries available:

UPDATE

Here’s a fourth method of incorporating a logo.