Here are the slides and some references for my closing talk at Swiss Intranet Summit in Zürich.

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

In a nutshell – You know digg? Now tweetmeme collects and counts all the links that are posted to twitter. And the little badge top right of this posting says how often this blog posting has been referred to.  Or you can click the green retweet button to simply create a simple tweet referring to this article. </nutshell>

TweetMeme Button tells how to add such a badge to your pages. For my Roller blog I had to edit the _day template and add the following code to the heading of each blog posting:

<div class="tweetmeme">
  <script type="text/javascript">
    tweetmeme_url = '$url.entry($entry.anchor)';
    tweetmeme_source = 'mprove';
##  tweetmeme_style = 'compact';  
  </script>  
  <script
    type="text/javascript"
    src="http://tweetmeme.com/i/scripts/button.js">
  </script>
</div>

The source parameter is your twitter name that is used for the composed tweet: 'RT @name title link (via @tweetmeme)'. Then the tweetmeme class is used to move the div to the right. It is defined in the stylesheet file:

.tweetmeme {
  float: right;
  margin-bottom: 3px;
  margin-left: 3px;
  }

Happy retweeting.

PS_ already adopted by Think Thin, GullFOSS, Student Views, Reviews Interactive

Each and every of my endeavors starts with an index page. A title, a logo, some ideas, related info, more stuff added over time, a log, and sooner than later the thing becomes a substantial project. This approach worked out fine for me for almost 1 1/2 decades now. First in the GoLive team in the late 1990s, where we developed a WYSIWYG web editor. Then the intranet for StarOffice' user experience team. And today I am still using GoLive to create and write on web pages for my projects.

All this is along the lines of the original vision of Tim Berners-Lee and Robert Cailliau to create a read/write web. Some time has passed, and their vision never came true. At least not in a way that could be called elegant or straight forward. Instead we see a cyber-landscape of wikis, blogs, microblogs and other social software that empower "users" to "generate content." Wrong perspective _BTW.

For the VDI project I've changed my habits a little. I set up a blog internal to Sun and start with a blog entry, a tag, some ideas, related info, more stuff added over time, and sooner than later the thing becomes a substantial project. The advantages are the same as in the early web zero-dot-nine days. I do not have to spend extra effort in communication, while colleagues can see what is happening and can provide feedback.

Here is a screenshot of my internal blog at Sun:

Tags are assigned to all entries, and the resulting tag cloud provides quick navigation for the blog. Concept diagrams, design sketches, and even photos from whiteboard scribblings are stored and shared on the blog. Other content like wiki pages are linked, as well as classical intranet pages for stuff that does not easily fit here.

I am not blogging. I say it again, I am not blogging. I just use the internal blog as a low key content management system; and that approach has proven to be useful for me and the team I work with.

>> VDI UX Story: Part 1: Concept Workshops | Part 2: User Research || To be continued...

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