personalising my blog

image of the sidebar of my blog

Those who read me via news feeds (I wonder how many those are), may not have seen the recent additions I have made to my blog pages. I have added a view onto:

This is quite a lot of personal info. With my friend of a friend network it should be clear how you have more and more of the type of information you could find in social networking sites such as facebook on my blog. And this could keep growing of course.

The current personalization is mostly powered by JavaScript (with one flash application for last.fm ). Here is the code I added to my blog template, pieces of which I found here and there on the web, often in templates provided by the web services themselves.

 <h2>Recent Photos</h2><!-- see http://veerle.duoh.com/blog/comments/fickr_badge_w3c_valid/ -->
    <div id="flickr"><script type="text/javascript" 
   src="http://www.flickr.com/badge_code_v2.gne?count=6&display=latest&size=s&layout=x&source=user&user=88952050%40N00">
  </script>
    </div>
    <div class="recentposts">
     <script type="text/javascript" 
     src="http://feeds.delicious.com/v2/js/bblfish?title=My%20Recent%20Bookmarks&icon=s&count=5&sort=date&tags&extended">
    </script>   
    </div>
    <h2>Twittering</h2>
    <div id="twitter_div" class="recentposts">
    <a href="http://twitter.com/bblfish">last 5 entries:</a><br/>
<ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/bblfish.json?callback=twitterCallback2&count=5" type="text/javascript">
</script>
  <h2>Listening To</h2>
<!-- I am looking for something lighter than this! -->
<style type="text/css">table.lfmWidgetchart_0bbc5b054e26d39362c0a10c7761f484 td 
  {margin:0 !important;padding:0 !important;border:0 !important;}
 table.lfmWidgetchart_0bbc5b054e26d39362c0a10c7761f484 tr.lfmHead 
  a:hover
 {background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_blue.png) 
     no-repeat 0 0 !important;}
 table.lfmWidgetchart_0bbc5b054e26d39362c0a10c7761f484 tr.lfmEmbed object {float:left;}
 table.lfmWidgetchart_0bbc5b054e26d39362c0a10c7761f484 tr.lfmFoot td.lfmConfig a:hover 
    {background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat 0px 0 !important;;}
 table.lfmWidgetchart_0bbc5b054e26d39362c0a10c7761f484 tr.lfmFoot td.lfmView a:hover 
    {background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat -85px 0 !important;}
 table.lfmWidgetchart_0bbc5b054e26d39362c0a10c7761f484 tr.lfmFoot td.lfmPopup a:hover 
    {background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) no-repeat -159px 0 !important;}
</style>
<table class="lfmWidgetchart_0bbc5b054e26d39362c0a10c7761f484" cellpadding="0" cellspacing="0" border="0" 
   style="width:184px;"><tr class="lfmHead">
   <td><a title="bblfish: Recently Listened Tracks" href="http://www.last.fm/user/bblfish" target="_blank" 
       style="display:block;overflow:hidden;height:20px;width:184px;background:url(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_blue.png)
         no-repeat 0 -20px;text-decoration:none;border:0;">
   </a></td></tr>
   <tr class="lfmEmbed"><td>
   <object type="application/x-shockwave-flash" data="http://cdn.last.fm/widgets/chart/friends_6.swf" 
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
     id="lfmEmbed_210272050" width="184" height="199"> 
   <param name="movie" value="http://cdn.last.fm/widgets/chart/friends_6.swf" /> 
  <param name="flashvars" value="type=recenttracks&user=bblfish&theme=blue&lang=en&widget_id=chart_0bbc5b054e26d39362c0a10c7761f484" /> 
   <param name="allowScriptAccess" value="always" /> 
    <param name="allowNetworking" value="all" /> 
    <param name="allowFullScreen" value="true" /> 
    <param name="quality" value="high" /> <param name="bgcolor" value="6598cd" /> 
    <param name="wmode" value="transparent" /> <param name="menu" value="true" /> 
    </object></td></tr><tr class="lfmFoot">
    <td style="background:url(http://cdn.last.fm/widgets/images/footer_bg/blue.png) repeat-x 0 0;text-align:right;">
    <table cellspacing="0" cellpadding="0" border="0" style="width:184px;">
    <tr><td class="lfmConfig">
   <a href="http://www.last.fm/widgets/?colour=blue&chartType=recenttracks&user=bblfish&chartFriends=1&from=code&widget=chart" 
    title="Get your own widget" target="_blank" 
   style="display:block;overflow:hidden;width:85px;height:20px;float:right;background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png)
          no-repeat 0px -20px;text-decoration:none;border:0;">
    </a></td><td class="lfmView" 
     style="width:74px;">
    <a href="http://www.last.fm/user/bblfish" title="View bblfish's profile" 
     target="_blank" style="display:block;overflow:hidden;width:74px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png)
        no-repeat -85px -20px;text-decoration:none;border:0;">
    </a>
    </td><td class="lfmPopup"
     style="width:25px;">
    <a href="http://www.last.fm/widgets/popup/?colour=blue&chartType=recenttracks&user=bblfish&chartFriends=1&from=code&widget=chart&resize=1" 
       title="Load this chart in a pop up" 
       target="_blank" 
       style="display:block;overflow:hidden;width:25px;height:20px;background:url(http://cdn.last.fm/widgets/images/en/footer/blue.png) 
             no-repeat -159px -20px;text-decoration:none;border:0;" 
       onclick="window.open(this.href + '&resize=0','lfm_popup','height=299,width=234,resizable=yes,scrollbars=yes'); return false;"
></a></td>
   </tr></table>
   </td></tr>
   </table>

So that as you can see is quite a lot of extra html every time someone wants to download my web page. This would not be too bad, but the above javascript widgets themselves go and fetch a lot of html, javascript, code and other content to further slow down the responsiveness of the web pages. This data is served to everyone whether they want to see all that information or not. Well, if they don't they can subscribe to the rss feed by dragging this page into a feed reader. In which case they will just see the blog posts themselves, and not the sidebar.

Why add this information to my blog? Well it gives people an idea of where they can find out more about me. A lot of people don't know that I have a del.icio.us feed, so they may not know that they can follow what I am reading over there. This gives the initial feeling of what it would be like to have a deeper view on my activities.

But as mentioned previously, there are a few problems with this.

  • This makes this page heavier.
  • Every page view on my blog will download that information and start those applets. ( A great way for those services to track the number of people directly visiting these pages btw. )
  • This can become tedious. People who want to follow me can do so by coming to this web page from time. But with enough sites like that this is going to become a bit difficult to do. One does not want to spend all day reading the different feeds of information of one's friends. This is what Facebook does for people: it is a giant web based feed reader of social information.
  • Difficult to track change: If I switch to a different book marking service, perhaps a semantic one like faviki, I will have to redo this page, and all my friends are going to have to update their feeds.
  • If I add more of the resources I am working on this page is going to become unmaintainably long
  • People who read my feed will not notice the changes occurring here.

So those are the problems that Web 3.0, the semantic web is going to solve. By just downloading my foaf file, you should have access to my network of friends via linked data, and via pointers to all the other resources on the web that I may be using. Whatever tool you use will be able to then keep all this data easily up to date, and with great search tools, enhance your view of the many linked networks you will be part of and tracking.

The whole code you see above could then be replaced with one link to my foaf file. That foaf file can itself be point to further resources in case it becomes large. To give a list of some of my the most interesting accounts I have I added the following N3 to my foaf file today:

@prefix : <http://bblfish.net/people/henry/card#> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .

:me foaf:holdsAccount 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's skype account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://www.skype.com/>
              ],
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's flickr pictures account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://www.flickr.com/>
                foaf:accountProfilePage <http://www.flickr.com/people/bblfish>
              ], 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's last.fm music account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://www.last.fm/>
                foaf:accountProfilePage <http://www.last.fm/user/bblfish>
              ], 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's delicious bookmarking account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://delicious.com/>
                foaf:accountProfilePage <http://delicious.com/bblfish>
              ], 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's java.net developer account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://java.net/>
              ], 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's twitter micro blogging account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://twitter.com/>
                foaf:accountProfilePage <http://twitter.com/bblfish>
              ], 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's twine semantic aggregation account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://twine.com/>
                foaf:accountProfilePage <http://www.twine.com/user/bblfish>
              ], 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's facebook social networking account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://www.facebook.com/>
              ], 
              [ a foaf:OnlineAccount ;
                rdfs:label "Henry Story's linked in business social network account"@en;
                foaf:accountName "bblfish";
                foaf:accountServiceHomepage <http://www.linkedin.com/>
                foaf:accountProfilePage <http://www.linkedin.com/pub/0/482/680>
              ] .

First of all it should be clear that the above is a lot more readable that the javascript code shown earlier in this post. Secondly I listed over twice as many online accounts there than I currently have in my side bar. And finally this is in a file that a client would not need to download unless it had an interest in knowing more about me. This could easily be cached over a period of time, and need not be served up again on each page request.

Again for one possible view on the above data it is worth installing the Tabulator Firefox extension and then clicking on my foaf icon. There are of course many more things specialized software could do with that infomation than present it like that.

On this topic, you may want to continue by looking at the recently published, excellent and beautiful presentation on the subject of the Social Semantic Web, by John Breslin.

Comments:

I'm actually maintaining such a list of my friends' accounts manually as a local resource.

Posted by Andrey Nordin on December 10, 2008 at 08:23 AM CET #

I actually removed some of the applets recently, because I fear they were slowing down the pages too much and I did not get the feeling they were being used that much. Last.fm went a few weeks ago, and Twitter which often is quite slow, may well be next on the list to axe. Even Google Analytics may be a problem.

On the web, what is not distributed is not good. Clearly the server should be doing more of the work putting these pieces together, and serving up cached versions.

Posted by Henry Story on April 03, 2009 at 11:57 AM CEST #

This week I found a way to add twitter back to the blog, without using javascript. By doing the same work in Scala, one can easily reduce the load on twitter, and on the connecting browsers.

I show how to do this here:
http://blogs.sun.com/bblfish/entry/adding_twitter_to_my_blog

Posted by Henry Story on April 29, 2009 at 08:34 AM CEST #

Post a Comment:
Comments are closed for this entry.
About

bblfish

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today