Eine Tag Cloud ist eine visuelle Darstellung einer Liste von Elementen. In Blogs werden häufig Tag Clouds angezeigt. Es wurde von Websites wie Flickr bekannt gemacht.
Bei Tag Clouds handelt es sich um eine Liste von Links, deren Größe und Gewicht sich (manchmal auch in der Farbe) je nach messbaren Attributen ändert. Die meisten Tag-Clouds basieren auf der Beliebtheit oder der Anzahl der Seiten, die mit diesem bestimmten Tag versehen sind. Sie können jedoch aus jeder Liste von Elementen auf Ihrer Website eine Tag-Cloud erstellen, die mindestens zwei Möglichkeiten hat, sie anzuzeigen. Zum Beispiel:
- Eine Liste der Artikel in alphabetischer Reihenfolge mit den Stilen, die die Beliebtheit der Artikel angeben.
- Eine Liste der Websites in alphabetischer Reihenfolge, wobei die Stile angeben, welche Ihnen am besten gefällt.
- Eine Liste der Web-Editoren, die in der Preisreihenfolge aufgeführt sind, wobei die Stile angeben, wie nahe sie jeweils einem vordefinierten Satz von Kriterien kommen.
- Eine Liste mit Freunden, deren Stile die Entfernung zwischen Ihrem Haus und ihrem Haus angeben.
Was brauchen Sie, um eine Tag Cloud aufzubauen?
Es ist einfach, eine Tag-Cloud aufzubauen. Sie benötigen nur zwei Dinge:
- Eine Liste mit Elementen (wie Webartikeln, Websites oder Ihren Freunden)
- Eine Messung für jeden Artikel (wie Seitenaufrufe pro Tag, Rang 1 bis 10 oder Entfernung zum Haus).
Die meisten Tag-Clouds sind Linklisten. Daher ist es hilfreich, wenn jedem Element eine URL zugeordnet ist. Dies ist jedoch nicht erforderlich, um eine visuelle Hierarchie zu erstellen.
Schritte zum Erstellen einer Tag-Cloud für beliebte Links
Unsere Website enthält Artikel, die täglich Seitenaufrufe abrufen. Dies ist eine einfache Messgröße, mit der wir eine Tag-Cloud erstellen können. In diesem Beispiel erstellen wir eine Tag-Cloud aus einer Liste von Artikeln, den Top 25 der Artikel auf meiner Website für die Woche vom 1. Januar 2007.
-
Bestimmen Sie, wie viele Ebenen Sie in Ihrer Hierarchie haben möchten.
Es ist zwar möglich, so viele Ebenen in Ihrer Cloud zu haben wie Elemente in Ihrer Liste, aber dies macht den Code langweilig und die Unterschiede können sehr gering sein. Ich empfehle Ihnen, nicht mehr als 10 Ebenen in Ihrer Hierarchie zu haben.
-
Legen Sie für jedes Level die Abschneidepunkte fest.
Es könnte so einfach sein, Ihre Seitenaufrufe pro Tag in 1/10 Segmente zu schneiden - dh. Wenn auf der größten Seite Ihrer Website 100 Seitenaufrufe pro Tag erzielt werden, können Sie diese in 100+, 90-100, 80-90, 70-80 usw. aufteilen.
-
Listen Sie Ihre Artikel in der Reihenfolge der Seitenaufrufe auf und vergeben Sie einen Rang basierend auf Schritt 2
Machen Sie sich keine Sorgen, wenn Sie in einigen Slots keine Gegenstände haben, was die Cloud nur interessanter macht.
-
Platzieren Sie Ihre Liste in alphabetischer Reihenfolge (oder was auch immer Sie als zweite Sorte verwenden möchten).
Das macht die Wolke interessant. Wenn Sie es nach Rang sortiert lassen, wird es nur eine Liste mit den größten Elementen oben bis zum kleinsten unten sein.
-
Schreiben Sie Ihren HTML-Code so, dass der Rang eine Klassennummer ist.
class = "tag4"> Streaming-Audiodateien hinzufügen
-
Das ist es!
Sobald Sie den HTML-Code für jedes einzelne Listenelement und die Reihenfolge, in der Sie sie anzeigen möchten, haben, müssen Sie eine Entscheidung treffen. Sie können die Links in einen Absatz einfügen, und Sie sind fertig. Dies wäre jedoch nicht semantisch markiert und jeder, der kein CSS in Ihre Tag-Cloud hat, würde nur einen großen Absatz von Links sehen. Der HTML-Code für diesen Listentyp würde folgendermaßen aussehen:
Wir empfehlen stattdessen, Ihre Tag-Cloud mit einer ungeordneten Liste zu erstellen. Es gibt noch ein paar Zeilen HTML- und CSS-Code, aber es sorgt dafür, dass der Inhalt gelesen werden kann, unabhängig davon, wer ihn sieht. Das HTML würde so aussehen:
Aber wo sind die Stile für die Tag Cloud?
Nun kommen wir zum Spaß - den CSS-Styles. Wenn Sie eine Tag Cloud formatieren, ändern Sie normalerweise die Schriftgröße und die Schriftstärke. Sie können auch die Farbe der Schriftart oder des Hintergrunds oder eines beliebigen anderen Stilattributs ändern, aber Größe und Gewicht sind traditionell.
Sie benötigen 10 Stilklassen, einen für jeden Tag-Rang:
Wir möchten gerne einige Stile in die Cloud einfügen: Zentrieren Sie den Cloud-Text, stellen Sie eine Zeilenhöhe ein, damit die Cloud lesbar ist, und stellen Sie sicher, dass die Ankertags keine Auffüllung haben:
Wenn Sie die semantische Stilmethode (dh die ungeordnete Liste) verwenden, müssen Sie schließlich zwei weitere CSS-Zeilen hinzufügen, damit die Liste keine Aufzählungszeichen hat und nicht eingerückt ist:
