tagcloud-examples: Difference between revisions
AndyMabbett (talk | contribs) m (boilerlpate) |
m (Reverted edits by TrocdEldar (Talk) to last version by RacriCcaca) |
||
(4 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
c4teltletoge | |||
cnalet | |||
This is a page for '''Tagcloud''' examples | This is a page for '''Tagcloud''' examples | ||
==See also== | ==See also== | ||
*[[tagcloud-brainstorming]] | *[[tagcloud-brainstorming]] | ||
==Site Name: flickr== | |||
===url=== | |||
http://flickr.com/photos/tags/ | |||
===Tag cloud models=== | |||
Flickr has both their main tagcloud, which models the relative popularity of tags historically, that is, how often a tag has been used in total, as well as smaller âÂÂhot tagsâ tag clouds, which reflect the most popular tags in a shorter period of time, a day and week respectively. | |||
===Screenshots=== | |||
[http://microformatique.com/images/hTagcloud/flickrmain.gif http://microformatique.com/images/hTagcloud/flickrmain.gif] | |||
[http://microformatique.com/images/hTagcloud/flickrhot24.gif http://microformatique.com/images/hTagcloud/flickrhot24.gif] | |||
[http://microformatique.com/images/hTagcloud/flickrhotweek.gif http://microformatique.com/images/hTagcloud/flickrhotweek.gif] | |||
===Code conventions=== | |||
The hot tags code looks like this | |||
<pre><table id="Recently"> | |||
<tr> | |||
<td> | |||
<p><b>In the last 24 hours</b><br /> | |||
<b><a href="/photos/tags/pics2006/">pics2006</a>, </b> | |||
<b><a href="/photos/tags/ubicomp2006/">ubicomp2006</a>, </b> | |||
... | |||
</p> | |||
</td> | |||
<td> | |||
<p><b>Over the last week</b><br /> | |||
<b><a href="/photos/tags/itunes7/">itunes7</a>, </b> | |||
<b><a href="/photos/tags/futureofwebappssf06/">futureofwebappssf06</a>, </b> | |||
</pre> | |||
Flickrs main tagcloud looks like this in HTML | |||
<pre><p id="TagCloud"> | |||
<a href="/photos/tags/06/" style="font-size: 12px;">06</a> | |||
<a href="/photos/tags/amsterdam/" style="font-size: 15px;">amsterdam</a> | |||
</pre> | |||
===Notes=== | |||
# The hot tags are simply cells in a table with the id “recently” | |||
# The tagcloud proper is a p with the id of “tagcloud” â which would allow only a single tagcloud per page | |||
# that the links are simply links â despite this being a list of words, ordered alphabetically | |||
# that the rank or weight or popularity of the tag is visually created using inline style and font-size | |||
# There are at least a dozen different levels of popularity, difficult to determine without tedious work, as these are reflected in font-sizes in pixels. | |||
==Site Name: Technorati== | |||
===url=== | |||
http://technorati.com/tags | |||
===Tag cloud models=== | |||
This page shows two tag clouds, called “heat maps” â one for the most popular tags in the last hour, and one for the 100 historically most popular tags. | |||
===Screenshots=== | |||
[http://microformatique.com/images/hTagcloud/technloratimain.gif http://microformatique.com/images/hTagcloud/technloratimain.gif] | |||
[http://microformatique.com/images/hTagcloud/technloratihot1hr.gif http://microformatique.com/images/hTagcloud/technloratihot1hr.gif] | |||
===Code conventions=== | |||
<pre><ul class="heatmap" id="smallheatmap"> | |||
<li><em><em><em><em><em><a href="/tag/Advertising">Advertising</a> | |||
</em></em></em></em></em></li> <li><em><em> | |||
<em><a href="/tag/Blogroll">Blogroll</a></em></em></em></li> </pre> | |||
<pre><ul class="heatmap" id="bigheatmap"> | |||
<li><em><em><em><a href="/tag/Allgemein">Allgemein</a> | |||
</em></em></em></li> </pre> | |||
===Notes=== | |||
# each tagcloud is of class “heatmap”, but are differentiated by the ids “smallheatmap” (hot tags of the last hour) and largeheatmap (historically popular tags) | |||
# tags are an unordered list | |||
# Innovatively, and very cleverly, nested em elements provide the “weight” or “importance” of a tag. | |||
# It’s not easy to determine how many levels of tag weight there are, as I’m too lazy to count nested em elements :-) | |||
==Site Name: BBpress== | |||
===url=== | |||
http://support.westciv.com | |||
This is an example standard BBPress install. The PHP has been edited to make the font-sizing em based, and to constrain the font sizing to an upper and lower limit. This is done in the PHP. | |||
===Tag cloud models=== | |||
As far as I can determine, the tagcloud shows the historically most popular tags, but given its labeling as “Hot tags” it may reflect the recent popularity of the the tags. | |||
===Screenshots=== | |||
[http://microformatique.com/images/hTagcloud/bbpress.gif http://microformatique.com/images/hTagcloud/bbpress.gif] | |||
===Code conventions=== | |||
<pre><p class="frontpageheatmap"> | |||
<a href='http://support.westciv.com/tags.php?tag=bbedit' title='2 topics' | |||
style='font-size: 1.2em;'>BBEdit</a> | |||
<a href='http://support.westciv.com/tags.php?tag=case_sensitive' title='1 topics' | |||
style='font-size: 0.9em;'>case_sensitive</a> | |||
</pre> | |||
===Notes=== | |||
# the cloud is a paragraph of class “frontpageheatmap” | |||
# tags are just links, not in a list | |||
# the relative rank of a tag is shown by inline style, but also indicated by the title attribute on the link element. e.g. title=”1 topics”, title=”3 topics” | |||
# It’s unclear from the example how many levels of tag weight or rank there are | |||
==Site Name: del.icio.us== | |||
===url=== | |||
http://del.icio.us/tag/ | |||
===Tag cloud models=== | |||
The tag cloud shows a list of the most popular tags, presumably over time. | |||
===Screenshots=== | |||
[http://microformatique.com/images/hTagcloud/deli.icio.us.gif http://microformatique.com/images/hTagcloud/deli.icio.us.gif] | |||
===Code conventions=== | |||
<pre><div class="alphacloud"> | |||
<a href="/tag/.net" class="lr s2;">.net</a> | |||
<a href="/tag/advertising" class="lb s1">advertising</a> | |||
<a href="/tag/ajax" class=" s5">ajax</a> | |||
</pre> | |||
When the tags are chosen to be shown as a list in order of frequency, rather than alphabeticcally, the class name is “freqcloud” | |||
===Notes=== | |||
# There are two kinds of cloud â an alphacloud which orders tags alpahbetically, and a freqcloud, which orders them by popularity | |||
# The links are not in a list | |||
# There is a root element with a class value, variously “alphacloud” and “freqcloud” | |||
# The weight of a tag is given by a class value â s1 though s5, giving 5 levels of weight | |||
==Site Name: Zoomclouds== | |||
===url=== | |||
http://zoomclouds.com/cloud/ZC_Blom/ | |||
===Tag cloud models=== | |||
Like most tag clouds, zoomclouds models the historical popularity of a tag. | |||
===Screenshots=== | |||
Zoomclouds, more than most, utlize CSS to style their clouds. | |||
[http://microformatique.com/images/hTagcloud/zoomclouds.gif http://microformatique.com/images/hTagcloud/zoomclouds.gif] | |||
===Code conventions=== | |||
<pre><div class="zoomclouds"> | |||
<span class="tag2"><a href="http://www.zoomclouds.com/tag/ZC_Blom/asian+stocks" | |||
onmouseout="zoomclouds_cs()" style="font-size: 12px;">asian stocks</a></span> | |||
<span class="zoomcloudswg">(39)</span> | |||
<span class="tag1"><a href="http://www.zoomclouds.com/tag/ZC_Blom/analysts" | |||
style="font-size: 9px;">analysts</a></span> | |||
<span class="zoomcloudswg">(23)</span></pre> | |||
# the root element is a div with a class value of “zoomclouds” | |||
# the count of the tag is added as content after the tag name, with a class of zoomcloudswg. | |||
# the weight of the tag is given by a font-size value, but also with a clas value of tagN, where N is an integer of 1âÂÂ4 (at least in the example cited) | |||
==Site Name: Squidoo== | |||
===url=== | |||
http://www.squidoo.com/browse/tag_cloud | |||
===Tag cloud models=== | |||
Squidoo has three kinds of tag cloud â all ranking popularity. Hot tags, are those which are popular in the last 24 hours, recent tags are popular in the last week, and all time tags are the most popular tags over the life of squidoo | |||
===Screenshots=== | |||
[http://microformatique.com/images/hTagcloud/squiddweek.gif http://microformatique.com/images/hTagcloud/squiddweek.gif] | |||
[http://microformatique.com/images/hTagcloud/squidall.gif http://microformatique.com/images/hTagcloud/squidall.gif] | |||
[http://microformatique.com/images/hTagcloud/squidoo24.gif http://microformatique.com/images/hTagcloud/squidoo24.gif] | |||
===Code conventions=== | |||
<pre><div id="tagcloud24Display" class="tagcloud"> | |||
<a href="http://www.squidoo.com/tags/advertising" style="font-size:1em">advertising</a> | |||
<a href="http://www.squidoo.com/tags/art" style="font-size:1.8em">art</a></pre> | |||
<pre><div id="tagcloudWeekDisplay" class="tagcloud"> | |||
<a href="http://www.squidoo.com/tags/advertising" style="font-size:.8em">advertising</a> | |||
<a href="http://www.squidoo.com/tags/art" style="font-size:2em">art</a></pre> | |||
<pre><div id="tagcloudDisplay" class="tagcloud"> | |||
<a href="http://www.squidoo.com/tags/advertising" style="font-size:1.5em">advertising</a> | |||
<a href="http://www.squidoo.com/tags/art" style="font-size:2.2em">art</a></pre> | |||
===Notes=== | |||
# tag clouds all are divs with a class value of tagcloud | |||
# the three are differentiated by id values, “tagcloud24Display”, “tagcloudWeekDisplay”, “tagcloudDisplay” | |||
# weight is indicated by inline CSS “font-size” values | |||
# there appear to be quite a significant number different weights, as indicated by different font-size values | |||
==Site Name: Web Connections== | |||
===url=== | |||
http://connections.webdirections.org | |||
===Tag cloud models=== | |||
The tag cloud represents the popularity of tags historically | |||
===Screenshots=== | |||
[http://microformatique.com/images/hTagcloud/webconnections.gif http://microformatique.com/images/hTagcloud/webconnections.gif] | |||
===Code conventions=== | |||
<pre><div class="hTagcloud"> | |||
<ul class="popularity"> | |||
<li class="weight1"><a href="/tags/Access+Testing">Access Testing</a></li> | |||
<li class="weight1"><a href="/tags/McFarlane+Prize">McFarlane Prize</a></li></pre> | |||
===Notes=== | |||
# The root element is a div of class “hTagcloud”. Web connections front end developer Cameron Adams and I came up with this as a very early implementation of a potential proposal for a tagcloud microformat, and chose the name by analogy with hCard, etc. | |||
# this contains an unordered list of class “popularity”. This allows for the extension to other class values for different kinds of cloud | |||
# each tag is a list item, with a class value of “weightN” where n is an integer value of 1âÂÂ5 |
Latest revision as of 20:06, 8 January 2009
c4teltletoge cnalet This is a page for Tagcloud examples
See also
Site Name: flickr
url
http://flickr.com/photos/tags/
Tag cloud models
Flickr has both their main tagcloud, which models the relative popularity of tags historically, that is, how often a tag has been used in total, as well as smaller âÂÂhot tagsâ tag clouds, which reflect the most popular tags in a shorter period of time, a day and week respectively.
Screenshots
Code conventions
The hot tags code looks like this
<table id="Recently"> <tr> <td> <p><b>In the last 24 hours</b><br /> <b><a href="/photos/tags/pics2006/">pics2006</a>, </b> <b><a href="/photos/tags/ubicomp2006/">ubicomp2006</a>, </b> ... </p> </td> <td> <p><b>Over the last week</b><br /> <b><a href="/photos/tags/itunes7/">itunes7</a>, </b> <b><a href="/photos/tags/futureofwebappssf06/">futureofwebappssf06</a>, </b>
Flickrs main tagcloud looks like this in HTML
<p id="TagCloud"> <a href="/photos/tags/06/" style="font-size: 12px;">06</a> <a href="/photos/tags/amsterdam/" style="font-size: 15px;">amsterdam</a>
Notes
- The hot tags are simply cells in a table with the id “recently”
- The tagcloud proper is a p with the id of “tagcloud” â which would allow only a single tagcloud per page
- that the links are simply links â despite this being a list of words, ordered alphabetically
- that the rank or weight or popularity of the tag is visually created using inline style and font-size
- There are at least a dozen different levels of popularity, difficult to determine without tedious work, as these are reflected in font-sizes in pixels.
Site Name: Technorati
url
Tag cloud models
This page shows two tag clouds, called “heat maps” â one for the most popular tags in the last hour, and one for the 100 historically most popular tags.
Screenshots
Code conventions
<ul class="heatmap" id="smallheatmap"> <li><em><em><em><em><em><a href="/tag/Advertising">Advertising</a> </em></em></em></em></em></li> <li><em><em> <em><a href="/tag/Blogroll">Blogroll</a></em></em></em></li>
<ul class="heatmap" id="bigheatmap"> <li><em><em><em><a href="/tag/Allgemein">Allgemein</a> </em></em></em></li>
Notes
- each tagcloud is of class “heatmap”, but are differentiated by the ids “smallheatmap” (hot tags of the last hour) and largeheatmap (historically popular tags)
- tags are an unordered list
- Innovatively, and very cleverly, nested em elements provide the “weight” or “importance” of a tag.
- It’s not easy to determine how many levels of tag weight there are, as I’m too lazy to count nested em elements :-)
Site Name: BBpress
url
http://support.westciv.com This is an example standard BBPress install. The PHP has been edited to make the font-sizing em based, and to constrain the font sizing to an upper and lower limit. This is done in the PHP.
Tag cloud models
As far as I can determine, the tagcloud shows the historically most popular tags, but given its labeling as “Hot tags” it may reflect the recent popularity of the the tags.
Screenshots
Code conventions
<p class="frontpageheatmap"> <a href='http://support.westciv.com/tags.php?tag=bbedit' title='2 topics' style='font-size: 1.2em;'>BBEdit</a> <a href='http://support.westciv.com/tags.php?tag=case_sensitive' title='1 topics' style='font-size: 0.9em;'>case_sensitive</a>
Notes
- the cloud is a paragraph of class “frontpageheatmap”
- tags are just links, not in a list
- the relative rank of a tag is shown by inline style, but also indicated by the title attribute on the link element. e.g. title=”1 topics”, title=”3 topics”
- It’s unclear from the example how many levels of tag weight or rank there are
Site Name: del.icio.us
url
Tag cloud models
The tag cloud shows a list of the most popular tags, presumably over time.
Screenshots
Code conventions
<div class="alphacloud"> <a href="/tag/.net" class="lr s2;">.net</a> <a href="/tag/advertising" class="lb s1">advertising</a> <a href="/tag/ajax" class=" s5">ajax</a>
When the tags are chosen to be shown as a list in order of frequency, rather than alphabeticcally, the class name is “freqcloud”
Notes
- There are two kinds of cloud â an alphacloud which orders tags alpahbetically, and a freqcloud, which orders them by popularity
- The links are not in a list
- There is a root element with a class value, variously “alphacloud” and “freqcloud”
- The weight of a tag is given by a class value â s1 though s5, giving 5 levels of weight
Site Name: Zoomclouds
url
http://zoomclouds.com/cloud/ZC_Blom/
Tag cloud models
Like most tag clouds, zoomclouds models the historical popularity of a tag.
Screenshots
Zoomclouds, more than most, utlize CSS to style their clouds.
Code conventions
<div class="zoomclouds"> <span class="tag2"><a href="http://www.zoomclouds.com/tag/ZC_Blom/asian+stocks" onmouseout="zoomclouds_cs()" style="font-size: 12px;">asian stocks</a></span> <span class="zoomcloudswg">(39)</span> <span class="tag1"><a href="http://www.zoomclouds.com/tag/ZC_Blom/analysts" style="font-size: 9px;">analysts</a></span> <span class="zoomcloudswg">(23)</span>
- the root element is a div with a class value of “zoomclouds”
- the count of the tag is added as content after the tag name, with a class of zoomcloudswg.
- the weight of the tag is given by a font-size value, but also with a clas value of tagN, where N is an integer of 1âÂÂ4 (at least in the example cited)
Site Name: Squidoo
url
http://www.squidoo.com/browse/tag_cloud
Tag cloud models
Squidoo has three kinds of tag cloud â all ranking popularity. Hot tags, are those which are popular in the last 24 hours, recent tags are popular in the last week, and all time tags are the most popular tags over the life of squidoo
Screenshots
Code conventions
<div id="tagcloud24Display" class="tagcloud"> <a href="http://www.squidoo.com/tags/advertising" style="font-size:1em">advertising</a> <a href="http://www.squidoo.com/tags/art" style="font-size:1.8em">art</a>
<div id="tagcloudWeekDisplay" class="tagcloud"> <a href="http://www.squidoo.com/tags/advertising" style="font-size:.8em">advertising</a> <a href="http://www.squidoo.com/tags/art" style="font-size:2em">art</a>
<div id="tagcloudDisplay" class="tagcloud"> <a href="http://www.squidoo.com/tags/advertising" style="font-size:1.5em">advertising</a> <a href="http://www.squidoo.com/tags/art" style="font-size:2.2em">art</a>
Notes
- tag clouds all are divs with a class value of tagcloud
- the three are differentiated by id values, “tagcloud24Display”, “tagcloudWeekDisplay”, “tagcloudDisplay”
- weight is indicated by inline CSS “font-size” values
- there appear to be quite a significant number different weights, as indicated by different font-size values
Site Name: Web Connections
url
http://connections.webdirections.org
Tag cloud models
The tag cloud represents the popularity of tags historically
Screenshots
Code conventions
<div class="hTagcloud"> <ul class="popularity"> <li class="weight1"><a href="/tags/Access+Testing">Access Testing</a></li> <li class="weight1"><a href="/tags/McFarlane+Prize">McFarlane Prize</a></li>
Notes
- The root element is a div of class “hTagcloud”. Web connections front end developer Cameron Adams and I came up with this as a very early implementation of a potential proposal for a tagcloud microformat, and chose the name by analogy with hCard, etc.
- this contains an unordered list of class “popularity”. This allows for the extension to other class values for different kinds of cloud
- each tag is a list item, with a class value of “weightN” where n is an integer value of 1âÂÂ5