"And now to something completely different". This famous line from Monty Python comes to mind whenever you click on a hyperlink that links to a PDF or ODF document. In order to indicate the type of the link I'm using icons by adding some lines to the stylesheet. Here is the code for GullFOSS, that you can copy and paste into your blog's stylesheet or CSS file without any modifications:

/* add odf icons for those links */
a[href$=".odp"] {
    padding-left: 17px;
    background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/odp.gif) no-repeat center left; }

a[href$=".odt"] {
    padding-left: 17px;
    background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/odt.gif) no-repeat center left; }

a[href$=".ods"] {
    padding-left: 17px;
    background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/ods.gif) no-repeat center left; }

a[href$=".odg"] {
    padding-left: 17px;
    background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/odg.gif) no-repeat center left; }

a[href$=".pdf"] {
    padding-left: 16px;
    background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/pdf.gif) no-repeat center left; }

Finally an example. The PDF at the bottom of Bill Verplank sketches metaphors gets the PDF icon from the style statement above.

December 9, today, 40 years ago in 1968 Doug Engelbart presented NLS to the public. NLS was a system named after the literal meaning of being on-line with the computer – the oN-Line System – where “on-line” was not used with the sense of today to have a system connected to the Internet. There was no Internet yet. The meaning of on-line in the 1960s was to use the machine interactively! For Engelbart's Augmentation Research Center at the Stanford Research Institute this was made possible by the use of one of the first time-sharing computers.

The presentation at the Fall Joint Computer Conference in San Francisco at December 9, 1968 is often referred to as “the mother of all demos”. Doug Engelbart and his team presented the mouse, windows, interactive text editing, video conferencing and hypertext capabilities of NLS. A kind of magic and religious moment, as Alan Kay recalls.

Here are some excerpts from Vision and Reality of Hypertext and Graphical User Interfaces:

• 2.1.3 Hypertext - NLS/Augment
• 3.1.3 GUIs - NLS/Augment
  

And finally I have some compelling interview clips for you, and of course the original recording from 1968:

• Doug Engelbart's Invisible Revolution -- don't miss the Documentary
• the 40 year old mother of all demos at the famous mouse site
  

Hi,
here are some code snippets that show how I implemented the tag cloud on this blog.

Step 1: Log in to Roller, go to Design-Theme and select 'Custom Theme' for your blog.

Step 2: Go to Design-Stylesheet and add to the end of the CSS code:

/* Tag Cloud -----------------------------------------------*/
.tagcloud { font-size: 130%; light-height: 90%; word-spacing: 3pt; 
            text-align: center; 
            margin-top: 13px }
a.tag     { border-style: none }
a.tag.s1  { color: #a3b8cb; font-size: 70%; letter-spacing: 1px  }
a.tag.s2  { color: #a3b8cb; font-size: 90% }
a.tag.s3  { color: #5382a1; font-size: 100% }
a.tag.s4  { color: #5382a1; font-size: 120% }
a.tag.s5  { color: #35556b; font-size: 140%; letter-spacing: -1px }

Step 3: Go to Design-Templates, open the 'sidebar' template and add to an appropriate position:

<!-- TAGCLOUD -->
<div class="navsect">
<div class="tagcloud">
  #set($mytags = $model.weblog.getPopularTags(-1, 100))
  #foreach ($tag in $mytags)
    #if ($tag.count > 1)
      <a class="tag s${tag.intensity}"
         href="$url.tag($tag.name)"
         title="$tag.count">$tag.name</a>
    #end
  #end
  <a href="$url.home">(all)</a>
</div>
</div>

The surrounding navsect-div depends on your general theme. The tagcloud-div is the link to the special font style above.
Tags show up in the tag cloud as soon as they are used twice.

Step 4: The footer for each blog article should also contain the tags. For me this is coded in the '_day' template (3rd line from the bottom):

<div class="entryfooter">
<p>
  $utils.formatDate($entry.pubTime, "dd MMM yyyy")
  | <a href="$url.entry($entry.anchor)">Permalink</a>

  #if ($utils.isUserAuthorizedToAuthor($entry.website))
    | <a href="$url.editEntry($entry.anchor)">$text.get("macro.weblog.entrypermalink.edit")</a>
  #end
  #set($commentCount = $entry.commentCount)
  #if($entry.commentsStillAllowed || $commentCount > 0)
    #set($link = "$url.comments($entry.anchor)" )
    | <a href="$link" class="commentsLink">$text.get("macro.weblog.comments")[$commentCount]</a>
    #end
  | Tags: #foreach($tag in $entry.tags) <a href="$url.tag($tag.name)" title="$tag.count">$tag.name</a>  #end
</p>
</div>

Step 5: Tag your articles. Use the Tags field above the edit field when you create an article. All tags are yours. Build your own vocabulary that makes sense to you –– by adding popular tags you can drive some traffic to your site.

Step 6: Enjoy. Let me know if this was useful for you, and share a link to your blog with the new tag cloud.

-Matthias

PS_

• GullFOSS tag cloud updated
• design@sun tag cloud updated
• tag clouds for sweet, the Sun internal microblogging service
• Think Thin as well
  

Technorati Tags: DouglasAdams, TedNelson

Technorati Tags: Engelbart, HyperScope

• reboot7 - tripreport
• A Chat with Doug Engelbart
• Back to the Future – The Way to a Personal Dynamic Medium for Creative Thought

Technorati Tags: reboot7, Engelbart