code | subscribe
One of the site’s features is a tag and song “tagcloud” used to show which tags are popular and which aren’t. The idea is simply, for tags that are popular, you emphasise them more, this can be done in terms of font weight, size, colour and whatever styling method that enables the text to be highlighted from another text.
Right now I’m only using the font size as a way of demonstrating the tag cloud but perhaps if theres time I could go about doing it for font colour too (which might need a bit of configuring to ensure it works).
I’ve managed to stumble upon this article which helped me out on how I should establish the correct distribution of font sizes etc so I’ll be using it for making the tag cloud.
http://semanticvoid.com/blog/2006/01/06/tag-cloud-font-distribution-algorithm/
The article is pretty small but does the job
Ever thought of how the collection of tags with varying fontsizes (known as Tag Cloud) populated. As I say ‘theres an algorithm for everything’, theres an algorithm for this too. Assuming you know all about tag popularity (if not refer previous post) I’ll go ahead explaining it.
The distinct feature of tag clouds are the different groups of font sizes. Now the number of such groups desired depends entirely upon the developer. Usually having six such size-groups proves optimal.
Assume any suitable metric for measuring popularity (for instance ‘number of users using the tag’). We can always obtain the max and min numbers for the same. For example:
max(Popularity) = 130
min(Popularity) = 35Therefore we can define one block of font-size as :
( max(Popularity) - min(Popularity) ) / 6For the above values we get one such block range as (130 - 35) / 6 = 15.83 ~ 16
Font-sizes therefore could be bound as follows:Range Font-Size
35 to 51 1
52 to 68 2
69 to 85 3
86 to 102 4
103 to 119 5
120 to 136 6
Update
Tonight I managed to create the tag cloud. Not only that, I turned it into a function so that it can be used for more then just the admin pages. The coding was pretty much based on the above calculations to come up with the right sizes, I used percentages to portray the font sizes as it seems more relative to the web page.
Managed to really tidy up the admin panel, in particular the Podcast manager section. I’ve tried to keep the amount of links and functions to a minimum and have the rest hidden via css and javascript. Below shows the songs and tag section doing just that. I’ve also added navigation on the top of the page so users can go back to the main page via the top, and the links on the side as well
Ok, hopefully the LAST blog pimping up session for a long time. It’s definitely distracting me from doing other stuff haha. Anyway, I managed to update the theme a little bit more, features now include:
- New subtitle bit at the top, had to shave the header padding a bit more to compensate the subtitle.
- Dates are now shown on the right of each post via the calender type thing. This makes more room for category and meta bits under the header
- Changed the header a bit, didnt like the rounded edge thing so I changed it to a normal heading, juiced up the size a bit too
- Used a bit more of the random text plugin, some very subtle ones though, I’m sure you can find them quite easily.
Made quite alot of updates to the blog. Some of them include:
- Managed to add some hatching effect on the top menu, slightly more web2.0 haha (i feel like i’m abusing the visual styles used in web2.0 quite alot these days)
- I really like the styles used for typo (a ruby on rails blogging software). Simple stuff like softer body text (using #666 instead of the obvious #000 or even #333) and the font being verdana helps quite alot in making the site more easier to read. I’m considering making my own skin in wordpress, it looks fun.
- I’ve applied a random text plugin which allows me to shove in the occasional random bit of text for fun, one I’m using atm is the list of words you say when you reply, it can vary from x wrote this to x said that.
- I’ve provided more contact methods to be used for contacting me, the email address will be forward to me instead of using my actual one just to make changing emails alot easier (spam and all)
- I’ve pimped up my about page , it includes a photo of me, as well as some more stuff about me
- Very subtle thing, but I’ve increased the font size of the headings on the sidebar
- Adding a bit of padding to the header thing
- Now I have a left and right class on my css, this means I can use it to float images to the left or right. Pretty useful.
- Added some extra images to jazz the site up a bit, you can see them below
You can find the above on the to do list page and the contact page 
For my next blog update, I think I’ll be redesigning the theme myself, might publish it and all too!
Tonight I managed to do some power coding for Musecast, was hoping to get it ready to show Jonathan Briggs after his ecommerce lecture.
The following changes included:
Improved the tags section
The tag section now includes a view tag page where you can view the tag and see where it’s been used. This tagging system is used alot in many web2.0 applications (including this blog) and provides users with a unique way of finding articles by tags rather then by a search engine, it’s almost like GIVING you the search terms rather then making you search it yourself
As well as a view tags php, I also managed to implement a quick tag cloud kind of style for the tags page, all that’s been done is that the query used to draw the tags include the number of times they’ve been used (via the tag links table) which means you can use that as a variable for deciding the size of the font. For now, the algorithm used is number of times used x 10 and the font size will be that (in pt units). I’ll definitely need to calculate a mean average for the tags and use that to generate a few steps of sizes (rather then a big bunch of steps). This shouldn’t be hard at all but I felt like doing other stuff before I got to keying in the algorithms, as well as that I might also include the font colour as another tag cloud factor (like my blog) This one is slightly tedious but still doable
Created the song section
Amazingly enough this was probably the easiest task I did. The songs section was used to tag songs into podcasts, this is so users can find out songs used for it and perhaps make it so each page includes a bit more detail about the song (havent looked into that one yet). The good thing about the songs section was the fact that it was almost identical to the tagging system, it was simply a tag, but with song titles. Though I did consider merging them together. It’s probably better to keep them separate in case I want to add additional fields for the songs section.
Implemented a “Feeds” section
This is where I really get into the xml/rss stuff. This section involved configuring the site to include feeds from other site, all you had to do was enter a url and it will instantly generate a page that includes the items inside the feed. I used a little small app called lastRss.php which allowed me to save time in coding the rss parsing, the api system was pretty neat so it was easy to implement what I needed, though I need to look into a bit more so I can see how I can further use it.
The limit field is probably the bit where I would actually need to look into the lastrss php a bit more, I would like to make it possible for the user to simply limit the feed to a certain amount of items, hopefully that can be done quite easily (should be done via the number of tags.
Quick podcast RSS feed
Managed to quickly knock off an RSS feed for the podcast, this used the fields on the podcast to generate most of the information, I’ve already done stuff like this before so now it’s definitely come in handly, will be using the w3c rss validator to ensure that i’ve got everything I need, not only that, I will probably need to use the podcasting standard too to ensure that it’s a valid podcast feed.
Another thing I will look into is getting feedburner to parse the feed, this tool will prove very useful for my client as he will be able to view all the subscribers to the feed. This tool has been used on most of the big sites such as Neowin which was where I initially found it