Live Clipboard How-To for End Users from JasonKolb.com - The life of a technology entrepreneur.

It's the kind of thing you don't really think about when you're knee-deep in Live_clipboard_1 code, but Live Clipboard is really a new paradigm for the Web and it takes a while for people to adjust and digest everything, let alone use it effeciently. After I posted my embedded microcontent/viewer post, I started realizing from the feedback that people didn't really know what to do with it. This is an attempt to explain, in end-user terms, how to use Live Clipboard.

To use Live Clipboard you need two things: content to copy (the source), and somewhere to paste it (the destination). For this example I'm going to use the viewer I wrote layered on top of an HTML file with embedded microcontent as the source, and Ray Ozzie's Live Clipboard demo site as the destination. You can follow along in your own browser if you'd like.

Step 1: Copying Content

I'll be using http://www.xformats.org/MicroViewer/microContent.htm as the source. It's an HTML file that contains embedded microcontent, and links out to the viewer I wrote, which means it ends up looking like this:

The blue box on the right contains the content that was extracted from the embedded microformats. You can do other things with it such as map an address or make a call using Skype, but we're going to focus on the Live Clipboard button in the lower-left, which looks like a pair of scissors on an orange background: Liveclipboardicon16x16

Copy Method 1: Selecting and using Ctrl+C or the Edit Menu

There are two ways to copy the content using Live Clipboard. The first, and what I assume most people will end up doing at first, is to click the icon, which selects the microcontent, and then either press Ctrl+C or go to the Edit menu in the browser and click Copy. This basically acts just like Windows. When you click the icon, the viewer will change the look of the box containing the microcontent to let you know that you can go ahead and copy the content using Ctrl+C or the Edit menu:

Once you use Ctrl+C or the Edit menu to copy the content, the microcontent gets stuffed into your operating system clipboard. You can even look at it by pasting it into Notepad or something, but it won't make a whole lot of sense--it's meant to be used by a Live Clipboard destination.

What's interesting is that although I think this behavior is the most intuitive, most new users don't seem to realize that you can do it. They all seem to end up using....

Copy Method 2: The Right-Click Context Menu

With this method, you use the same icon as before, but you right-click it, bringing up the browser context menu:

Clipboardhowto3

Clicking "Copy" on this menu will also copy the microcontent to the clipboard.

Step 2: The content's copied, now what?

Now that the microcontent is on the clipboard, we need to paste it somewhere. I'm going to use Microsoft's Live Clipboard demo site:

The list of boxes on the left are basically receptacles for storing microcontent. Scroll down until you find an empty one:

Clipboardhowto5_1

You have two options now for getting the microcontent you copied to the clipboard into this receptacle (by the way, we really need a name for these endpoints). The first option is to click the Live Clipboard icon to hightlight and then press Ctrl+V or use the Edit Menu to paste the content in. This is what the receptacle looks like when it's selected:

Clipboardhowto6_2

Or, you can right-click the Live Clipboard icon and click the Paste menu item, like this:

Clipboardhowto7

After you do either of those things, the microcontent that you copied out of the other site will show up in the receptacle and look like this:

Clipboardhowto8_1

That's it, you're done! You're now officially on the cutting edge of Web technology. Now go demand Live Clipboard integration from your vendors ;)

P.S. This is all developer technology preview-stage stuff, so you will probably notice some rough edges. For example, sometimes I have to close my browser and re-open Microsoft's Live Clipboard demo site before I can successfully paste in content. I'm sure this will be smoothed out in time, just giving you a heads-up.

P.P.S. There has been some discussion lately on the Live Clip mailing list about the best way to visually indicate to users what they can do with Live Clipboard. If anyone has any feedback in that area please share!