Image courtesy Flickr user PetroleumJelliffe

Seeing this got me to wondering –

Can you customize QR Codes with your own design features, logo or brand identity?

Well, it turns out you can. Pretty easily. At least up to a point.

While researching the topic, one of the earliest examples I could find of someone hacking a QR Code with their own branded design elements was Duncan Robertson from the BBC.

Image courtesy Flickr user whomwah

The key takeaway I got from Duncan’s pioneering work was that QR Codes have some relatively generous built in error correction, up to 30 percent in some cases.

Now, what exactly does 30 percent translate into regarding how far you can push a QR Code before it breaks? The answer to that question is a little murky, at least for me. Pushing the envelope in this area, and among the more widely circulated highly customized QR Codes out there, is this code for Louis Vuitton created by Takashi Murakami and SET.

QR Code created by Takashi Murakami for SET. Via Engadget.

My understanding is that this code is supposed to work and send the user to a special mobile website, but I’ve tried scanning it with a couple of QR Code readers and so far have never been able to properly decode it (though it does create a cool little animated loop as my QR Code reader tries to lock in on it).

So somewhere between Duncan’s minimalist black and white custom code and that LV artistic masterpiece is probably the sweet spot to aim at if you want your customized code to be easily scanned by the masses.

Interested in seeing what you can do with a customized QR Code?

The good news is that it’s easy to get started and much of the software you’ll need is free.

1) First, you’ll want to get yourself a QR Code generator and reader. After trying a couple, I’ve come to rely on the open source ZXing Project (pronounced Zebra Crossing) to both generate and read my QR Codes. If you’re an Android smartphone superphone user (I use a G1) it’s a great fit. You can also get the Zxing reader for the iPhone and other devices as well. When generating your codes, select the primary function you want your code to communicate (contact info, GEO location, URL, custom text etc…) from the QR Code Generator.

2) Once you’ve generated your QR Code, download the image and import it into your favorite photo editing tool that supports layers. I use PhotoShop but you can go with GIMP if you’re looking for an open source solution and Paint.net is another free option as well.

3) Now build your layers of custom design on top of your raw QR Code image. Try to visually integrate your custom design elements into the code rather than simply stacking them on top.

4) Test it with your QR Code reader to make sure your design tweaks didn’t hose your code.

5) Repeat this cycle until you’re happy with the appearance and the code is readable.

To test this method, I created a basic QR Code of Content Developer’s Contact Information and tried to kick it up a notch by embedding a custom image. (hat tip to Buccleuch Avon)

Here’s the before and after -

My First QR Code Hack

Granted, my kung fu is weak at this stage. But on the upside the code appears to be reliably readable, and I was ultimately encouraged by the possibilities this process presents to content developers of all kinds. For instance…

…could a customized QR Code that delivers a large number of measurable impressions generate revenue by including logos from third party sponsors?

One note here — as I continue to tinker, I’m finding that some of the more elaborate design hacks I think will work are broken, and others that I think have absolutely no chance of working are actually being read. My evidence is only anecdotal, but it seems that the center of the codes are a bit more flexible than the edges. YMMV though, so again…

Hack. Test. Repeat.

Also keep in mind that I’m not at all sure if this is the best way to go about building a custom QR Code. What I can tell you though is that this method seems to work pretty well. (maybe sometimes the simplest strategy actually is the best)

If you’re looking for some idea starters on how you might be able to deploy standard and customized QR Codes to enhance the user experience for your audience or customers, here are a couple real world applications of the technology I spotted recently:

Screenshot of QR Code on Mobile Photoshop for Android website

Related link: Example of QR Code displayed on the Dallas Cowboy’s Stadium HD display.

Video distribution services like Youtube and Vimeo are now entrenched in our everyday lives as we both create and consume video content, while relatively new entrants into the space like VideoPress are emerging as user friendly alternatives for embedding H.264 video into a Wordpress blog. And of course there’s the JW FLV Player and Flowplayer, two popular Open Source apps that thankfully make it much easier today to publish a single video or modest playlist of Flash video in your own customizable player environment.

But what happens when you have a portfolio or library of say 50, a 100, or even more videos that you want visitors to your web site to be able to browse and sample from within an efficient yet compelling user experience that is also easy to set up and manage?

I was helping some friends at a San Antonio production company tweak some features on their company web site recently and wanted to share with you a quick look at the approach we went with for addressing this type of challenge.

The key ingredients needed are:

1) A library of custom encoded H.264 FLV/F4V videos,

2) A Media RSS formatted XML file, and

3) An app known as the CoolIris 3D Embed Wall.

Screenshot of CoolIris 3D Embed Wall in action.

You may already be familiar with CoolIris via their proprietary browser plug-in for displaying images and video. CoolIris wasn’t on my radar until I saw their logo last year in a little 125X50 ad banner in the TechCrunch sidebar. (proof that old school ad banners actually work sometimes?)

While learning about the CoolIris plugin I noticed that they also offer a developer version of the CoolIris Embed Wall which allows you to display a CoolIris Wall on your site via a Flash player served from CoolIris.com. And that’s the technique we’ll be going into here.

A couple quick side notes though before we get started –

– CoolIris now offers CoolIris Express which does a nice job of automating much of this process for you. But if you’re searching for help on how to build a public feed of your own video assets and tweak your code to the fullest then you’ll want to read on.

– I’ve been using Flash since version 2 and with each passing year it seems I rely on it a little bit less to solve web problems, but video remains an area where Flash continues to shine. And with the Flash plugin now reportedly installed on 99% of desktops in mature markets (though some would argue this number) and 80% of online video being viewed with Flash it’s clearly among the leaders in this market. Keep in mind though that even with the installed base growing, Flash still lacks that kind of dominant market penetration on mobile devices. So the choice to go with a Flash based solution like this is not without its trade-offs.

Building your 3D Video Wall Step 1: Gather and prep your video assets.

The most time consuming aspect of building the wall turned out to be prepping all the media assets, and there are couple things to watch out for during this part of the process. One is audio. While testing out videos to include in the embed wall we hit a slight speed bump because a few of the videos were using some older audio codecs that apparently hosed our CoolIris video playback. We re-encoded those files using AAC and were back in business.

Another decision you may have to make is how you want to handle differing media formats. In this case the library included a cross section of standard 4×3 aspect ratio assets along with 16×9 assets with both 1:85 to 1 and 2:35 to 1 ratios. For this project the 4×3 video was pillarboxed in order to deliver a standard wide screen viewing experience across all the video. Both Episode and Compressor were used to do this part of the job. If you’re looking for an open source, multi-platform solution to handle your video encoding you may want to take a look at Handbrake and Avidemux.

If your video library is large and will be growing rapidly, before you get started it would also be wise to devise a solid naming convention so you can more easily keep track of your files.

OK, now that you have your video prepped and ready to go, all that’s need to complete this step is a massive FTP upload session (Filezilla is a great open source app for doing this) to get your video on your server(s) or in the cloud. Important to mention here that if your video assets are deployed across multiple servers and/or under a variety of domain names, be sure and read up on Adobe’s Cross-domain policy file specification.

Building your 3D Video Wall Step 2: Creating a Media RSS file.

First you’ll need an app for editing and managing your Media RSS format XML file. If you’re a coder by trade, you no doubt already have a favorite text editor or two in your toolbox. But if coding is not your world, there are several options out there for you to choose from, many of them free. Notepad ++ is a popular choice if you use Windows, jEdit is a Java based cross-platform solution, and Smultron is a text editor written in Cocoa for Mac OS X Leopard 10.5. (Note: Looks like dev work may have ceased on Smultron. The app appears stable but we still haven’t tried it on a box that’s been upgraded to Snow Leopard.) FWIW, since I started running Puppy Linux on my ThinkPad I’ve been trying out BlueFish and so far like what I see.

The good news here is that just about any text editor should work for you as long at is saves “raw” text and does not add any of its own formatting code to your xml file when it saves it.

Once you have your text editor, the process for actually editing the XML of your Media RSS file is pretty straightforward. Included below is a bare bones template if you need one to get you started.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>

    <!--EDIT BELOW THIS ONLY-->

         <item>
            <title>Put Title of Your First Item Here</title>
            <link>Put URL to something you want to link to here. Optional.</link>
            <media:description>Put short description here. Optional. </media:description>
            <media:thumbnail url="http://put_url_to_thumbnail_jpg_file_here"/>
            <media:content type="video/x-flv" url="http://put_url_to_flv_file_here"/>
        </item>

        <item>
            <title>Put Title of Your Second Item Here</title>
            <link>Put URL to something you want to link to here. Optional.</link>
            <media:description>Put short description here. Optional.</media:description>
            <media:thumbnail url="http://put_url_to_thumbnail_jpg_file_here"/>
            <media:content url="http://put_url_to_jpeg_file_here"/>
        </item>

 <!--EDIT ABOVE THIS ONLY-->

    </channel>

    </rss>

One thing to point out here — this template includes examples both for displaying video and also for displaying only image files. Be sure and note the addition of the content type “video/x-flv” notation for the first item which is needed to identify your video.

From here, building your XML file is a matter of simply cutting and pasting a new item for each asset and filling in the blanks. I thought about finding/building a quick little PHP front end for getting our data into a MySQL database and generate the Media RSS feeds dynamically from there, but for projects like this treating the XML file as a sort of flatfile database and just editing the text directly is fast and easy so we decided just to leave well enough alone and go with that approach.

Building your 3D Video Wall Step 3: Embedding options.

While we were building and testing the wall we tried out the traditional Flash embed code technique for embedding the wall which is a good way to get started quickly. It worked fine, but when it was time to go live we turned to swfobject to handle embedding the player.

You can download swfobject and run it from your own server or you can load it from the Google AJAX Hosted Libraries API by placing this code within the head section of your web site:

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>

In the past I’ve been a proponent of downloading and running swfobject from my own servers but I’ve recently begun using the hosted Google version and it seems to be pretty reliable so far. If you want more info on how swfobject works, here are the Google swfobject wiki docs.

Now, from here all it takes to make the CoolIris Embed Wall display your video library is to include a snippet of javascript like this in the section of your web page where you want your wall to appear:

<script type="text/javascript">
var flashvars = {
    feed: "http://put_url_to_your_xml_file_here.xml"
};
var params = {
    allowscriptaccess: "always"
};

swfobject.embedSWF("http://apps.cooliris.com/embed/cooliris.swf",
                   "wall", "960", "500", "9.0.0", "",
                   flashvars, params);

</script>

<div id="wall"><!-- 3D Wall Goes Here --></div>

The above is an example of about the most basic install you can do on a 960 wide by 500 tall wall. To use this code on your site, insert the URL to your XML file in the feed variable and adjust the width and height parameters to fit the size you want your wall to be.

Another advantage to this approach is that you should be able to get your code to validate.

Building your 3D Video Wall Step 4: Customizing your wall.

There are many ways you can further customize the player via the CoolIris Javascript API or if you decide to go with a straight flash embed you can customize your player using the selection of CoolIris flashvars.

One of the nice customization options you have is the ability to integrate your logo or other branding elements into the CoolIris Wall either on the bottom bar of the player or via the ability to add a custom preload screen and/or wall backgrounds. We tested all the options and they worked well, but ultimately decided to go with just a subtle logo on the player bar.

Screenshot of playing a video in CoolIris

Many large content related companies like Hulu and Syfy are now publishing their content as CoolIris Channels for the CoolIris plugin. And now with the CoolIris 3D Embed Wall, content developers of all sizes can take advantage of this innovative video distribution platform.

If you want to keep up with the latest CoolIris news and developments, you can check out their blog and follow CoolIris on Twitter.

From analytics, to content (thanks Alan for the visit and for mentioning Content Developer), to vlogging, Alan delivers a quick exploration of a cross section of companies and individuals that are helping to shape the San Antonio Social Media Ecosystem.

Even if you follow social media closely, chances are you might learn about something or someone new in the article — I did.

…The software architect behind TED lives here in San Antonio.

And in a nice multi-platform example of how to build your digital brand by using traditional print media content to drive traffic to your new media content, Alan’s following up this column with a series of video interviews with some of the people mentioned in his newspaper piece.

You can watch those interviews as they’re published over on Alan’s public relations blog and his YouTube Channel.

Good work Alan.

——

technorati tags: Blog Catalog; Social Media Club San Antonio; Pear Analytics; Bar Camp San Antonio; IdeaGin; PodCamp San Antonio; FireCat Studio; PRSA;

In this segment John Buckman talks about his experience with Magnatune and Bookmooch.

Two areas Content Developers may find particularly interesting are John’s insights into scale and his concise breakdown of the freemium model.

Other segments in the doc series include a talk with Timo Hannay from Nature Magazine about bringing an open source philosophy to the publication of scientific journals and a visit with Tom Reynolds, a London Ambulance Service E.M.T. who shares his experience publishing his book Blood, Sweat and Tea and blog Random Acts of Reality.

via BookMooch Blog

You can get more information on Friend Connect here and see some more examples of how Friend Connect can be used here.

Am not sure of the source of this intersection of interests, and again my evidence for it even existing is merely anecdotal. Still, perhaps there is some kind of common ground in the brain chemistry needed to prepare a memorable meal and create a compelling piece of content.

Part art. Part science. And a whole lot of passion.

And hey, they’re both all about crafting a satisfying user experience, right?

With that in mind I wanted to take a moment to help spread the word about an emerging talent that debuted a new show this month on what some might consider the true HQ for the blending of content and food – The Food Network. Her name is Sunny Anderson and her show is Cooking for Real, which airs Sunday mornings at 9:30 AM CST.

The Food Network describes the show this way:

Sunny’s fresh, uncomplicated approach to classic comfort foods, along with her passion for interpreting the flavors of her unique travels, brings a bright style to delectable, down-home dishes. Don’t let the rush of the real world deny you the real food, the real techniques and the can’t miss tastes, of — Cooking for Real.

Here’s a behind the scenes photo from the show, courtesy of The Food Network, and published originally on Sunny’s blog.

And here’s a video clip of Sunny’s recent visit to the CBS Early Show.

Sunny’s a fellow Army brat, an Air Force vet and an old friend from my broadcasting days. Here’s her official Food Network Bio, and if you want to learn even more, Food Network Addict has this interview with Sunny.

Remember – Sunday Morning, 9:30 AM CST, The Food Network. Sunny Anderson. Cooking for Real.

Tell a friend.

Whether you are building your own content to support your brand, or your users and audience are creating that content about you.

Kami Huyse and Geoff Livingston touch on some aspects of how and why content is finding its way into modern communications strategies in their recent presentation Building Brands with Social Media at the New Communications Forum.

Here’s the slideshare from their talk.

| View | Upload your own

Kami also recently shared some strategies and metrics from a social media campaign that Seaworld of San Antonio implemented as part of the launch of the new Journey to Atlantis roller coaster last year.

Here’s a Global Neighbourhoods TV interview with Kami and Seaworld San Antonio Director of Communications Fran Stephenson about the campaign.

Thanks for the insight Kami, Geoff and Fran.

Above – Lewis Donzis and Jonathan Schmidt from Perftech explain their technology that lets cable companies communicate with customers via the screens on their computers.

Below – Kulabyte co founder Blake Wenzel shows how Kulabyte makes encoding technology for HD TV stations.

And – Matt Van Winkle from Rackspace talks about Rackspace’s radio station, KRACK.

Thanks Robert for helping spread the word about some of the interesting things happening here in San Antonio.

I learned some tips and tricks and found some resources that can help this type of migration go a little smoother. Stay tuned for more details.

* Product Marketing, Mobile @ Facebook (Palo Alto, CA)

* Google: Senior Financial Analyst, YouTube and Content Partnerships @ YouTube Inc (San Bruno, CA)

* Web Content Analyst @ Yahoo! Inc. (New York, NY)

* Web Content Specialist/Writer @ Capital Group Companies (San Antonio, TX)

* Sr Manager, Mobile Web Experience @ T-Mobile (Bellevue, WA)

see more jobs…