elearning2.0

First, let me say that I'm in favour of conserving Joshua's bandwidth and cycles, so I am not recommending this as a permanent solution or for high-traffic sites. What follows is in the spirit of experimenting with these great service-oriented functionalities to see how we can make it easy for real authors to effectively mash up their own links and content.

OK. We've been planning to do some work, starting with simple Plone content types, to help editors, authors and site-managers to pull social bookmarks into their content. Since del.icio.us, for instance, delivers wonderfully flexible RSS, it is pretty easy to bring bookmarked links into portlets or RSS-feed objects. In other words, it is easy to include delicious RSS wherever a separate content object might be expected.

But real-world authors want to be able to include links within their content, not in separate objects. So much so that they will hand-edit links into their page content even when those links have already been collected into tags or containers. We here at KnowNet developed our 'indexFolder' Plone container/content-type to help authors with similar issues, but it is a tad demanding of their awareness of containment (see the NGRF site for plentiful examples of bringing listings into page content). We're well-aware that this style of 'object-wise' editing does not appeal to people without computer science or engineering degrees. Developers must find ways to make it easier for ordinary editors and authors to create the content they want and benefit from the goodness of logical links-objects.

The editors of the NGRF site have been 'getting' the power of social-bookmarking lately, and have started to assemble a useful resource at their del.icio.us account. While drafting an email to them about options for leveraging that resource within the NGRF site, it occurred to me that a very easy technique already exists for bringing 'live' links lists into discursive site content, using the del.icio.us javascript linkroll feature. This post explains how to do that.

Two more caveats before explaining the technique:

• It depends on javascripts which fetch content from del.icio.us before the rest of the page loads. Thus it can sometimes be a bit slow, and sometimes appears a bit wonky, and will only display if javascript is available and enabled ( fallback is to link to delicious/tag etc )
• It requires editing "raw html". If you are used to a WYSIWYG editor like kupu, you'll have to go into 'raw' editing mode briefly to paste the special code. In kupu and ecto the link for 'raw editing mode' looks like "<>".

In its favour though, the technique is completely independent of your content-publishing system - you can use it anywhere you can edit web content - and very easy to place in a particular context within your own words and pictures - just choose where you paste the special code. It also has the great merit of working now, with absolutely no further work needed to get some useful content brewing. Read the rest of this entry for a full explanation and to see some rather arbitrary examples.

Technorati Tags: social-bookmarking del.icio.us structured-blogging elearning2.0 elearning web2.0 content2.0 authoring how-to

Extended text for this entry:

How to place "live" links from del.icio.us in your own content

Step 1 - log into del.icio.us

You must have a del.icio.us account in order to make use of the linkroll-builder that del.icio.us provides. If you do not have a del.icio.us account, but you are happy to hand-edit the javascript call, you can include other people's bookmarks / tags in your content.

Step 2 - go to del.icio.us/doc/feeds/js

There is a simple interface here for specifying a live javascript embed from del.icio.us bookmarks, users and tags. See the annotated screenshot for rough and ready instructions on using the linkroll builder.

Step 3 - choose your options

The link-builder has several fields and choices you can use to specify the hot links-embed you want:

1. How many items in the display? Default is 15, maximum is 100. Fewer than 15 is good if you just want a flavour of a collection within some otherwise continuous text (and of course will load quicker and consume less of del.icio.us' bandwidth.
2. Title you want to appear with your embed. By default this is something like 'My del.icio.us'. You can enter anything you like here, for instance 'References' or 'Work-Related Learning Links'...
3. Show tags? If ticked, all of the tags applied to that bookmark are shown as links to open the relevant tag-view in del.icio.us. I recommend ticking this. The pattern of tags is quite informative to your readers, and can provide very useful hinges for navigation. Generally they do not tak up too much room. (Note this shows the tags applied to this bookmark, not to all other bookmarkings of the same link). Default is unticked.
4. Show extended description? Useful if you are embedding into a real content area, but gets in the way if displaying in a sidebar or portlet. If ticked, the extended description of each item displays inlinebelow the link for the item. I not ticked, the first 100 or so characters of the extended description become the link title ( mouseover tool-tip). Default is unticked.
5. Icon to show alongside the title. Optionally, an icon with its own link can be placed alongside the title, above your embedded links. Th default is none. If you choose one of the delicious icons, it will be placed tot the left of the title, and will also link to the delicious page for viewing these links. If you choose the RSS icon, it will be placed after the title, and its link is to the RSS feed for these links. I recommend the RSS icon in most cases, since this way your readers have immediate access to both links - to view the rest of the links in this tag, or to subscribe to them.
6. Bullet to display in fornt of each item. You can choose to have a hard-coded bullet placed before each item in your display. The default is not to, and in almost all cases there is no reason to change that. del.icio.us returns the links in an html list, so unless you have styled away the automatic bulleting of lists, these bullets will be redundant.
7. Filter by tags? This is the most useful and interesting feature, of course: it allows you to be very selective about which bookmarks you want to pull into which pieces of your content. Be warned, though, that this can be flaky and you may need to either load the page again and make this choice first, or hand-edit the urls in the code that you paste to get the tags right. Separate mutliple tags with the '+' sign (I think :o)

The good news about specifying tha tag(s) to use is that it is easy to see where in the code you would need to make the change. I'll explain the code below.

Step 4 - copy the special code from the area at the top of the linkroll builder page

As you make you choices in the form, the text at the top of the page changes to reflect your preferences. When you are finished making your choices, select the text at the top of the page (just click in it) and copy it (control-C).

Step 5 - get into 'raw HTML editing mode' in some of your content

You are going to want to paste the special code that you just copied into some of your content. The code has to be pasted as raw HTML though. If you use a WYSIWYG editor for writing your web content, you'll have to find out how to get your editor to allow you to edit 'raw HTML'. Usually that just means clicking an icon in your editing toolbar - the icon usually looks like a pair of angle brackets: " < > ". You'll be able to get back into WYSIWYG editing mode afterwards - usually the icon for doing that will look like a formatted letter A and will appear where the enter-raw-mode icon appeared.

Step 6 - paste the special code wherever you want the embedded links to appear

Once you are in raw-html editing mode, you'll likely notice lots of angle-brackets and other mysterious gubbins among your lovely words. Don't worry about that - it's just the way that browsers represent content structuring. Find the place you want your embedded links to appear, make aq bit of vertical space in the raw html ( this will not appear in the page when viewed in a browser ), and paste.

Step 7 - finish writing the rest of the content in the page, save and view in a browser

When you view your content in a web browser, the little bit of code that you pasted will automagically load in the bookmarks you specified from del.icio.us. Check it out. I it is not what you wanted, you will need to go back to step 2 and repeat the process - replacing the previous code with the new code.

IMPORTANT! If you wanted to filter by tags, and find that your code is not loading the tags you wanted, you may have had a glitch in the linkroll builder. You can go back into the linkroll builder and make the first thing you do be to tick the 'only these tags' checkbox and enter the tag(s) you want to pull bookmarks from. Or you can hand-edit the text that you pasted for the code. It will look something like:

...
    src="http://del.icio.us/feeds/js/NGRF/wrl?tags;extended;count=5;
    [...]title=Work-Related%20Learning Links;icon=rss" ...

< noscript >
    < a href="http://del.icio.us/NGRF/wrl">Work-Related Learning Links< / a >
< / noscript >

... where the above says "NGRF/wrl", replace in the string that would specify the username and tags you want to dsiplay. Note that this string appears twice: once in the 'javascript" src="http://del.icio.us/feeds/js/' which specifies the source of the bookmarks to fetch, and once in the specification of the noscript link.

You can test the string easily by pasting the noscript url into a browser's location - it should display the del.icio.us page for the tags you want.

Well, that's about it. Let me know if you have trouble following these instructions, or if you find that they've helped you to do something interesting.

Please watch this space over the next few for further work on refining these techniques in ways that improve their usability and functionality and spread the load to our own servers. del.icio.us does offer this feature publicly, and I'm sure they do an efficient job of caching the results, I would much prefer to see this ad-hoc use of a great feature evolve into something more distributed. (Though considering how much of del.icio.us' server and bandwidth resource is hogged by illicit scrapers and crawlers, I reckon I could save more of del.icio,us' resource by rationalising some of my own tags than by failing to point out this great and simple technique for combining links from your del.icio.us tags with your own words in your own content :o)

And now for an example or two:

Below are a couple of examples. the first is a real-world one taken from my email exchange with Alan Brown from the Institute for Employment Research earlier today, and pulls in some of the bookmrk that the NGRF editors have been collecting recently. The second is a pertinent collection from my own bookmarks, relating to "social-citation" - services for social bookmarking of bibliographic resources, which leverage standards such as digital object identifiers to assist academics in creating, re-using, sharing and hinging-upon citable resources.

ASIDE on bibliographic references: Connotea and CiteULike do not yet have a similar feature as far as I know, but since both of them offer extensive and flexible RSS, it would not take much work to host a similar service for the social-citation services. It would be very nice to be able to add hoc 'references' sections within content. On the other hand, since generally there is only at most one references section per content section, content publishers like KNotes could be extended to ask for a tag and service to pull references for an object without requiring the javascript step or author action beyond making a simple choice.

In case you are not familiar with the notion of 'social citation', below are some links that may help to explain:

Thanks for reading! Do let me know of any questions or uses you think of.