content developer build share monetize content developer logo content developer masthead bottom

How To Customize QR Codes With Your Brand’s Identity

Filed under share by david cummings on Wednesday 27 January 2010 at 10:17 am

Though apparently they’ve been big in Japan for quite a while, I first learned about only last summer after seeing them used in the campaign for the Sci Fi film .

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 .

bbc qr code customization example
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 created by and .

louis vuitton qr code example by set
QR Code created by Takashi Murakami for . Via .

My understanding is that 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 (pronounced Zebra Crossing) to both generate and read my QR Codes. If you’re an smartphone user (I use a ) it’s a great fit. You can also for the 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 .

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 but you can go with GIMP if you’re looking for an open source solution and 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 and tried to kick it up a notch by embedding a custom image. (hat tip to )

Here’s the before and after –

customized qr code with logo embedded
My First QR Code Hack

Granted, 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 . 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 )

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:

null
Screenshot of QR Code on website


of Audi Japan’s World’s Biggest QR Code via

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

How To Make a 3D Web Video Wall with XML, FLV and CoolIris

Filed under share by david cummings on Wednesday 6 January 2010 at 11:42 am

Whether you’re sharing stories about or telling tales , there’s no shortage of strategies content developers can turn to for publishing web video.

Video distribution services like and are now entrenched in our everyday lives as we both create and consume video content, while relatively new entrants into the space like are emerging as user friendly alternatives for embedding video into a blog. And of course there’s the and , two popular apps that thankfully make it much easier today to publish a single video or modest playlist of in your own .

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 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 videos,

2) A formatted file, and

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

cooliris video wall embed video example screenshotScreenshot of CoolIris 3D Embed Wall in action.

You may already be familiar with CoolIris via their proprietary 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 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 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 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 (though some would argue this number) and 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 that apparently hosed our CoolIris video playback. We re-encoded those files using 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 in order to deliver a standard wide screen viewing experience across all the video. Both and 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 and .

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 upload session ( is a great open source app for doing this) to get your video on your server(s) or in the . 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 .

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. is a popular choice if you use , is a based solution, and is a text editor written in for . (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 .) FWIW, since I started running on my I’ve been trying out 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 front end for getting our data into a database and generate the Media RSS feeds dynamically from there, but for projects like this treating the XML file as a sort of 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 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 to handle embedding the player.

You can and run it from your own server or you can load it from the 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 .

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 .

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

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

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.

cooliris video wall embed screenshot
Screenshot of playing a video in CoolIris

Many large content related companies like and are now publishing their content as 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 and .

Fresh Talent on The Food Network

Filed under featured,share by david cummings on Saturday 26 April 2008 at 11:54 am

It could simply be a skewed sample from the universe of colleagues I cross paths with, but for some reason it seems that a noticeable number of people who develop content for a living also have an elevated affection for cooking. I lump myself in that category as I’ve spent the last six months on a journey seeking out . Before that, constructing the ultimate no flour dark chocolate cookie (which some beta testers have suggested may be close at hand) became a mild obsession.

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 – . Her name is and her show is , 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 anderson cooking for real

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

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

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

Tell a friend.

Content Builds Brands – Social Media ROI

Filed under featured two,share by david cummings on Thursday 24 April 2008 at 8:35 am

Content Developer is a big believer in the idea that authentic, interesting content is one of the most powerful ways to build a brand.

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

and 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 .

Here’s the from their talk.

Kami also recently shared some strategies and metrics from a social media campaign that implemented as part of the launch of the new last year.

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


Video Enclosure: FastCompany.TV Global Neighbourhoods Interview

Thanks for the insight Kami, Geoff and Fran.

Scobelizer TV Spotlights San Antonio Tech

Filed under featured two,share by david cummings on Friday 18 April 2008 at 12:16 pm

Robert Scoble from recently spent some time in talking to some of the city’s up and coming tech companies.

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 – co founder Blake Wenzel shows how Kulabyte makes encoding technology for HD TV stations.

And – Matt Van Winkle from 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.


Content Developer was founded by , a San Antonio Web Developer & Freelance Content Strategist focused on using open source software to build, share and monetize multi-platform, interactive content; and how sharing knowledge via & can be used to help grow authentic brands. Learn more.

Content Developer is powered by Wordpress & Your Web Server. Content Developer and build. share. monetize. are trademarks of Cummings Hatton Corporation.