tagcloud-examples-fr: Difference between revisions
m (traduction à finir) |
RacboChide (talk | contribs) m (ligetz) |
||
Line 1: | Line 1: | ||
Ceci est une page pour les exemples de '''Tagcloud''' ou nuages de mots- | domgetrolc | ||
Ceci est une page pour les exemples de '''Tagcloud''' ou nuages de mots-clés | |||
==Voir aussi== | ==Voir aussi== | ||
Line 8: | Line 9: | ||
===url=== | ===url=== | ||
http://flickr.com/photos/tags/ | http://flickr.com/photos/tags/ | ||
=== | ===Modèles de nuages de tages=== | ||
Flickr a | 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 | ===Photos écrans=== | ||
[http://microformatique.com/images/hTagcloud/flickrmain.gif http://microformatique.com/images/hTagcloud/flickrmain.gif] | [http://microformatique.com/images/hTagcloud/flickrmain.gif http://microformatique.com/images/hTagcloud/flickrmain.gif] | ||
Line 17: | Line 18: | ||
[http://microformatique.com/images/hTagcloud/flickrhotweek.gif http://microformatique.com/images/hTagcloud/flickrhotweek.gif] | [http://microformatique.com/images/hTagcloud/flickrhotweek.gif http://microformatique.com/images/hTagcloud/flickrhotweek.gif] | ||
===Conventions de code=== | ===Conventions de code=== | ||
Le code "hot tags" ressemble | Le code "hot tags" ressemble à ça | ||
<pre><table id="Recently"> | <pre><table id="Recently"> | ||
<tr> | <tr> | ||
Line 32: | Line 33: | ||
<b><a href="/photos/tags/futureofwebappssf06/">futureofwebappssf06</a>, </b> | <b><a href="/photos/tags/futureofwebappssf06/">futureofwebappssf06</a>, </b> | ||
</pre> | </pre> | ||
Le nuage principal de Flickr ressemble | Le nuage principal de Flickr ressemble à ça en HTML | ||
<pre><p id="TagCloud"> | <pre><p id="TagCloud"> | ||
<a href="/photos/tags/06/" style="font-size: 12px;">06</a> | <a href="/photos/tags/06/" style="font-size: 12px;">06</a> | ||
Line 39: | Line 40: | ||
===Notes=== | ===Notes=== | ||
# Les tags hots sont simplement des cellules dans un tableau avec l'id “recently” | # Les tags hots sont simplement des cellules dans un tableau avec l'id “recently” | ||
# le nuage de tag convenable est un p avec l'id de “tagcloud” | # le nuage de tag convenable est un p avec l'id de “tagcloud” â ce qui permettrait un nuage de tags unique par page | ||
# que les liens sont simplement des liens - | # que les liens sont simplement des liens - malgré le fait que ce soit une liste de mots, triés par ordre alphabétique | ||
# que le rank ou le poids ou la | # que le rank ou le poids ou la popularité du tag est visuellement créé en utilisant un style dans la ligne et font-size | ||
# Il existe au moins une dizaine de niveaux | # 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. | ||
Line 49: | Line 50: | ||
http://technorati.com/tags | http://technorati.com/tags | ||
===Tag cloud models=== | ===Tag cloud models=== | ||
Cette page affiche maintenant deux nuages de tags, | 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=== | ===Photos Ecrans=== | ||
[http://microformatique.com/images/hTagcloud/technloratimain.gif http://microformatique.com/images/hTagcloud/technloratimain.gif] | [http://microformatique.com/images/hTagcloud/technloratimain.gif http://microformatique.com/images/hTagcloud/technloratimain.gif] | ||
Line 64: | Line 65: | ||
===Notes=== | ===Notes=== | ||
# chaque nuage de tags est de la classe “heatmap”, mais sont | # 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) | ||
# les tags sont dans une liste non | # les tags sont dans une liste non ordonnée | ||
# Innovativement, et | # Innovativement, et très intelligemment, les éléments imbriqués em fournissent le “weight” ou “importance” d'un tag. | ||
# Il n'est pas facile de | # 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. | ||
Line 96: | Line 97: | ||
===url=== | ===url=== | ||
http://del.icio.us/tag/ | 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. | The tag cloud shows a list of the most popular tags, presumably over time. | ||
===Screenshots=== | ===Screenshots=== | ||
Line 109: | Line 110: | ||
===Notes=== | ===Notes=== | ||
# There are two kinds of cloud | # 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 | # The links are not in a list | ||
# There is a root element with a class value, variously “alphacloud” and “freqcloud” | # There is a root element with a class value, variously “alphacloud” and “freqcloud” | ||
# The weight of a tag is given by a class value | # The weight of a tag is given by a class value â s1 though s5, giving 5 levels of weight | ||
Line 135: | Line 136: | ||
# the root element is a div with a class value of “zoomclouds” | # 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 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 | # 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) | ||
Line 142: | Line 143: | ||
http://www.squidoo.com/browse/tag_cloud | http://www.squidoo.com/browse/tag_cloud | ||
===Tag cloud models=== | ===Tag cloud models=== | ||
Squidoo has three kinds of tag cloud | 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=== | ===Screenshots=== | ||
[http://microformatique.com/images/hTagcloud/squiddweek.gif http://microformatique.com/images/hTagcloud/squiddweek.gif] | [http://microformatique.com/images/hTagcloud/squiddweek.gif http://microformatique.com/images/hTagcloud/squiddweek.gif] | ||
Line 170: | Line 171: | ||
===url=== | ===url=== | ||
http://connections.webdirections.org | http://connections.webdirections.org | ||
=== | ===Modèles de tagclouds=== | ||
The tag cloud represents the popularity of tags historically | The tag cloud represents the popularity of tags historically | ||
===Screenshots=== | ===Screenshots=== | ||
Line 183: | Line 184: | ||
# 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. | # 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 | # 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 | # each tag is a list item, with a class value of “weightN” where n is an integer value of 1â5 |
Revision as of 03:31, 20 December 2008
domgetrolc Ceci est une page pour les exemples de Tagcloud ou nuages de mots-clés
Voir aussi
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
- Les tags hots sont simplement des cellules dans un tableau avec l'id “recently”
- le nuage de tag convenable est un p avec l'id de “tagcloud” â ce qui permettrait un nuage de tags unique par page
- que les liens sont simplement des liens - malgré le fait que ce soit une liste de mots, triés par ordre alphabétique
- que le rank ou le poids ou la popularité du tag est visuellement créé en utilisant un style dans la ligne et font-size
- 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
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
- 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)
- les tags sont dans une liste non ordonnée
- Innovativement, et très intelligemment, les éléments imbriqués em fournissent le “weight” ou “importance” d'un tag.
- 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
- 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
Nom du site: del.icio.us
url
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
- 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
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>
- 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)
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
- 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
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
- 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