When Peter approached me a few weeks ago to work on the UI design for the next release of Sweet, I had just started on twitter in order to understand what all the fuzz is about. Well, I cannot say I get it, but at least I got some interesting links that I had missed otherwise.

Now Sweet is our internal microblogging service, based on open source laconi.ca. You can try out laconica at identi.ca or take a look at the before state_

It is not possible to significantly change a project in mid air – but this is exactly what I did by tweaking the CSS and a few images to create a pleasant and inviting design for Sweet. Note the logo (done with creatr.cc), the color scheme, the layout, the text counter, the tabs, the font changes, and the tag cloud in the after image. BTW_ the bird in the tree indicates that a tweet is also visible to the public on twitter.

Paying attention to the 'design details' can even improve the usability of such a project. A professional design increases the perceived quality and therewith the user experience. Since the relaunch we have more users and we even figured out that there was another installation of laconica running inside Sun -- they are now planing the migration to Sweet.

All this took me less than a week. I learned a lot about dirty CSS hacks, and got in touch with 2 nice colleagues at Sun whom I never met in person. Peter was a kind of project lead, and Olof the engineer behind the curtain. And guess what, our main communication tool was... Sweet!

> internal URL: http://do.sfbay.sun.com/sweet/

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

I spent some time exploring and experimenting with wikis.sun.com. First of all, it is a wiki that is open to people inside Sun as well as outside. Second, it is divided into spaces on various topics. Each space is created by a Sun employee, has its own set of permissions that control the access level for the users. Everything is possible -- from anybody can do everything, down to just the space owner can see and edit the pages of her wiki space.

The notation guide reveals some nice features. It is definitely worth to take a look. My personal highlight is the capability to include some external content to wiki pages. For example, the wiki page for the Sun Ray Conenctor for VMware View Manger lists all of Sun's blog postings that are tagged with 'srvc'. The wiki macro that does the trick is:

{rss:url=http://blogs.sun.com/main/feed/entries/atom?tags=srvc}

The other feature I like to discuss in brief is the page layout and a navbar with macros. Therefore, all my wiki pages are based on the same skeleton:

{section}
{column:width=70%}

main content goes here

{column}

{column:width=5%}
{column}

{column:width=25%}
{include:navbar}
{column}
{section}

This divides the page into 3 columns: 70% width for the main content, 5% white space, 25% for the navigation bar on the right. The latter contains the same elements for all pages by including another wiki page 'navbar'. Here is my navbar:

{panel:bgColor=#eef|borderColor=#ccc}
h6. Pages
[A Social Software Pattern Language]
{pagetree:startDepth=2}
\\
{pagetreesearch}
\\
{recently-updated-dashboard:showProfilePic=true} 
\\
{panel}

A light blue box with a tree view of all pages in the wiki space, a search element, and a log of recent changes in the wiki space to stimulate participation. '\\' is a forced empty line. Here is an example: A Social Software Pattern Language

BTW_ I strongly recommend to put such recurring elements to the right, in order not to break the visual connection between the page heading and the content.

enjoy,
mmprove

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: tagging, taxonomy, folksonomy, knowledge, weinberger

Technorati Tags: menschundcomputer, tagging