tagcloud-examples-fr

domgetrolc Ceci est une page pour les exemples de Tagcloud ou nuages de mots-clés

Voir aussi

• tagcloud-brainstorming-fr

Nom du site : flickr

url

http://flickr.com/photos/tags/

Modèles de nuages de tages

Flickr a à la lois sont propre nuage de tags, qui a historiquement donné le modèles à la relative popularité des tags, ce qui veut dire, la fréquence à laquelle un tag a été donné au total, tout comme les plus petits nuages de tags "hot tags", qui renvoient les tags les plus populaires dans une courte période de temps, respectivement en un jour et en une semaine.

Photos écrans

Conventions de code

Le code "hot tags" ressemble à ça

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

Le nuage principal de Flickr ressemble à ça en 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

1. Les tags hots sont simplement des cellules dans un tableau avec l'id “recently”
2. le nuage de tag convenable est un p avec l'id de “tagcloud” — ce qui permettrait un nuage de tags unique par page
3. que les liens sont simplement des liens - malgré le fait que ce soit une liste de mots, triés par ordre alphabétique
4. que le rank ou le poids ou la popularité du tag est visuellement créé en utilisant un style dans la ligne et font-size
5. Il existe au moins une dizaine de niveaux différents de popularité, difficile à déterminer sans un travail minutieux, parce qu'ils sont renvoyés en font-size dans les pixels.

Nom du site : Technorati

url

http://technorati.com/tags

Tag cloud models

Cette page affiche maintenant deux nuages de tags, appelés “heat maps” — l'une pour les tags les plus populaires durant la dernière heure, et l'autre pour les 100 tags les plus populaires historiquement.

Photos Ecrans

Conventions de Code

<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

1. chaque nuage de tags est de la classe “heatmap”, mais sont différenciés par les ids “smallheatmap” (hot tags de la dernière heure) et "largeheatmap" (les tags populaires historiquement)
2. les tags sont dans une liste non ordonnée
3. Innovativement, et très intelligemment, les éléments imbriqués em fournissent le “weight” ou “importance” d'un tag.
4. Il n'est pas facile de déterminer combien de niveaux de poids de tags il y a, parce que je suis trop paresseux pour compter les éléments imbriqués.

Nom du site : 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

1. the cloud is a paragraph of class “frontpageheatmap”
2. tags are just links, not in a list
3. 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”
4. It’s unclear from the example how many levels of tag weight or rank there are

Nom du site: del.icio.us

url

http://del.icio.us/tag/

Modèles de nuages de tags

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

1. There are two kinds of cloud — an alphacloud which orders tags alpahbetically, and a freqcloud, which orders them by popularity
2. The links are not in a list
3. There is a root element with a class value, variously “alphacloud” and “freqcloud”
4. The weight of a tag is given by a class value — s1 though s5, giving 5 levels of weight

Nom du site : 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>

1. the root element is a div with a class value of “zoomclouds”
2. the count of the tag is added as content after the tag name, with a class of zoomcloudswg.
3. 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)

Nom du site : 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

1. tag clouds all are divs with a class value of tagcloud
2. the three are differentiated by id values, “tagcloud24Display”, “tagcloudWeekDisplay”, “tagcloudDisplay”
3. weight is indicated by inline CSS “font-size” values
4. there appear to be quite a significant number different weights, as indicated by different font-size values

Nom du site : Web Connections

url

http://connections.webdirections.org

Modèles de tagclouds

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

1. 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.
2. this contains an unordered list of class “popularity”. This allows for the extension to other class values for different kinds of cloud
3. each tag is a list item, with a class value of “weightN” where n is an integer value of 1–5