Wie baut man ein Tag Cloud?

[blade999]

Hallo, kann mir einer die Funktion und die Umsetzung einer "tag Cloud" erklären?
Im www findet man unzählige Themen hier zu, aber kein einziges HowTo bzw keine wirklich klare Linie.
Wie habt ihr eure tag Cloud aufgebaut?

 

[Wustersoss]

Hallo,

über die Funktion einer Tagcloud muss du dir selbst Gedanken machen. Grundsätzlich bildet eine Tagcloud eine Folge von Worten in einer visuellen Darstellung ab. Ob das sinnvoll ist, ist von der Kompetenz deiner Nutzer abhängig. Generell kann man aber wohl davon ausgehen das Internetneulinge schwerlich was damit anfangen können.

Du brauchst also eine Folge von Worten. Das können Suchbegriffe sein. Gruppierende Begriffe(soganannte Tags) oder einfach die Häufigkeit einzelner Begriffe auf einer Webpräsenz.

Da diese meist aus einer Datenbank gelesen werden, brauchst du also eine Tabelle wo diese Worte abgelegt sind.
Es ginge wohl auch eine Datei, wo die Worte abgelegt sind. Zusästzlich zu den Worten muss man die Häufigkeit der Worte zu jedem Wort speichern.

Wir brauchen also eine Korrelation zwischen den Darstellenden Worten und der Anzahl der Verwendung, sprich Häufigkeit. Diese laden wir in ein Array.

Haben wir unsere Tabelle oder Datei erstellt, haben wir in etwa so etwas:

[TABLE="class: grid, width: 150"]
[TR]
[TD]Wort[/TD]
[TD]Anzahl[/TD]
[/TR]
[TR]
[TD]Käfer[/TD]
[TD]250[/TD]
[/TR]
[TR]
[TD]Marienkäfer[/TD]
[TD]45[/TD]
[/TR]
[TR]
[TD]Borkenkäfer[/TD]
[TD]35[/TD]
[/TR]
[TR]
[TD]Spinne[/TD]
[TD]300[/TD]
[/TR]
[TR]
[TD]Vogelspinne[/TD]
[TD]125[/TD]
[/TR]
[/TABLE]



Wir müssen also nun diese Worte aufgrund ihrer Häufigkeit sortieren und erhalten:
[TABLE="class: grid, width: 150"]
[TR]
[TD]Spinne[/TD]
[TD]300[/TD]
[/TR]
[TR]
[TD]Käfer[/TD]
[TD]250[/TD]
[/TR]
[TR]
[TD]Vogelspinne[/TD]
[TD]125[/TD]
[/TR]
[TR]
[TD]Marienkäfer[/TD]
[TD]45[/TD]
[/TR]
[TR]
[TD]Borkenkäfer[/TD]
[TD]35[/TD]
[/TR]
[TR]
[TD]usw.[/TD]
[TD][/TD]
[/TR]
[/TABLE]



Wir könnten nun die Grössen direkt verwenden als Prozentangaben für unser Ausgabe und Darstellung im CSS:

Spinne Käfer Vogelspinne Marienkäfer Borkenkäfer

Das wäre schon mal ganz gut. Besser wäre es, wenn die Worte nicht nach Grösse sondern durcheinander angezeigt würden.

Wir schütteln unsere Worte also ein wenig. In Programmersprachen gibt es dafür Funktionen wie shuffel, die das erledigen.

Danach lassen wir unsere Zufällige Folge ausgeben:
Vogelspinne Spinne Borkenkäfer Marienkäfer Käfer

sieht ja schon prächtig aus.
Wenn wir Jetzt einen Kasten drumherum machen würden unsere Worte dort so aussehen:

[TABLE="width: 15, align: left"]
[TR]
[TD][/TD]
[/TR]
[/TABLE]


[TABLE="class: outer_border, width: 190, align: center"]
[TR]
[TD]Vogelspinne Spinne Borkenkäfer Marienkäfer Käfer
[/TD]
[/TR]
[/TABLE]



Mit mehr Worten wirkt es natürlich besser. Zudem können wir noch URLs verwenden um die Claud-Worte anklickbar zu machen. Dazu müssten wir nur wissen wo unser Klickziel ist unser Array müsste dann halt erweitert werden.

Wir brauchen also ein Div und einige Klassen für die Schriftgrösse.

Unser CSS könnte so aussehen:

.tagcloudbody {
    width:220px;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#666666;
    border:solid 1px #333333;
    padding:5px;
    text-align:justify;
}

.tagcloudbody a {
    text-decoration:none;
    color:#333366;
}

.tag1 {
    font-size:26px;
}
.tag2 {
    font-size:16px;
}
.tag3 {
    font-size:13px;
}
.tag4 {
    font-size:20px;
}
.tag5 {
    font-size:9px;
}

Wir brauchen noch eine PHP Datei für unsere Funktion Tagcloud:
Die finden wir im Internet zum Beispiel hier: PHP / Strings / PHP Tag Cloud dynamisch erstellen

 

[threadi]

Es gibt auch noch ein älteres Topic dazu:
http://www.html.de/off-topic-plauderecke/29594-tag-cloud-wofuer-wieso-und-wie.html