Maik Wagner: Semantische Tag Cloud (Selfforumssieb)

Eine Tag Cloud ist ein hübsches Spielzeug, oft gesehen in Blogs. Sie lädt zum Klicken ein, aber nur Besucher, die mit der graphischen Ansicht etwas anfangen können. Für alle anderen ist sie eine unkoordinierte, sinnlose Linkaufreihung.

Tag Clouds leben davon, dass die unterschiedlichen Gewichtungen der einzelnen Begriffe dargestellt werden. Klassischerweise wird durch unterschiedliche Schriftgrößen die Häufigkeit der verwendeten Tags (z.B. bei Suchbegriffen) symbolisiert. Dabei gilt: Je größer, desto häufiger.

Wie baut man eine Tag Cloud?

Grundlegende Hinweise zum Algorithmus von Tag Clouds finden sich in Kevin Hoffmann's Whitepaper "In Search of the perfect Tag Cloud" (http://dotnetaddict.dotnetdevelopersjournal.com/tw.htm),
Dank an Simbo für den Hinweis.

Häufig werden für Blogsysteme schon fertige Module oder Plug-Ins angeboten, die den oben genannten, bekannten Standards entsprechen und dementsprechend auf visueller Akzentuierung basieren.

So sieht sie dann aus

Beispiel einer klassischen Tag Cloud mit:

Darstellung Standard-Tag Cloud mit CSS

und ohne CSS

Darstellung Standard-Tag Cloud mit CSS

Offensichtlich ist, dass die Relevanz der einzelnen Begriffe nur über die graphische Darstellung realisiert wird, wodurch Usern ohne visuellen Zugriff die Kerninformation verborgen bleibt. Erschwerend kommt hinzu, dass sich Tastaturbenutzer durch eine schier endlos lange Liste von Links tabben müssen und so die Navigation höchst unergonomisch wird.

Recherche im Web

Recherchiert man im Web, so stößt man regelmäßig auf Hinweise, dass Tag Clouds nun einmal nicht semantisch seien und so Screenreadernutzern keine Hilfe böten.

Diskussion im Forum

Die Diskussion im SELFHTML-Forum zu diesem Thema erwies sich als ausgesprochen ideen- und abwechslungsreich. Nach mehreren Entwicklungsstufen kristallisierte sich die folgende Lösung heraus:

Lösungsvorschlag

Der Algorithmus zum Aufbau der Darstellung der unterschiedlichen Gewichtung wird ein wenig erweitert. Neben der Berechnung der Darstellungsgröße wird zusätzlich ein Begriff, der der Darstellungsgröße entspricht, aus einer Liste gewählt und ausgegeben:

Code-Schnipsel:

<a class="ignore"

" href="#ueb">Suchbegriffsliste überspringen</a> <ul id="tagcloud"> <li><span style="font-size:101%"><a href="linkziel">allergien</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:104%"><a href="linkziel">arthrose</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:137%"><a href="linkziel">arzt</a></span><span class="ignore"> häufig</span></li> <li><span style="font-size:169%"><a href="linkziel">Arzt-Suchdienst</a></span><span class="ignore"> ausgesprochen häufig</span></li> <li><span style="font-size:105%"><a href="linkziel">ärzte</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:95%"><a href="linkziel">Asthma</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:109%"><a href="linkziel">augen</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:121%"><a href="linkziel">bluthochdruck</a></span><span class="ignore"> häufig</span></li> <li><span style="font-size:99%"><a href="linkziel">Borreliose</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:93%"><a href="linkziel">Bücher</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:143%"><a href="linkziel">carstens-stiftung</a></span><span class="ignore"> sehr häufig</span></li> <li><span style="font-size:107%"><a href="linkziel">Darm</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:96%"><a href="linkziel">depression</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:97%"><a href="linkziel">diabetes</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:100%"><a href="linkziel">durchfall</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:99%"><a href="linkziel">ernährung</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:104%"><a href="linkziel">globuli</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:104%"><a href="linkziel">hausapotheke</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:118%"><a href="linkziel">hausmittel</a></span><span class="ignore"> eher selten</span></li> <li><span style="font-size:102%"><a href="linkziel">haut</a></span><span class="ignore"> eher selten</span></li> [...] </ul>

Die einzelnen Begriffe werden als Listenpunkte einer ungeordneten Liste ausgezeichnet; über CSS wird die visuelle Auszeichnung als Größe formatiert. Die zugehörigen erläuternden Begriffe werden außerhalb des Viewport (sichtbarer Bereich) geschoben.

Im konkreten Beispiel ging es um die Häufigkeit verwendeter Suchbegriffe, die in die folgenden Kategorien eingeteilt wurden:

  • ausgesprochen häufig
  • sehr häufig
  • häufig
  • eher selten

Neben dieser Einteilung ist auch die explizite Nennung der Häufigkeit denkbar.

So sieht's aus mit CSS

Darstellung neue From der Tag Cloud mit CSS

und so ohne

Darstellung neue From der Tag Cloud ohne CSS

Die semantische Ausgestaltung einer Tag Cloud basiert auf den selbst entwickelten Funktionen. Nutzer vorgefertigter Module müssen sich zur Umsetzung dieses Vorschlags auf die Suche nach den Funktionen zum Aufbau einer Tag Cloud innerhalb ihres Blog-Systems machen, um die dort hinterlegten Algorithmen aufzufinden und diese entsprechend der hier vorgestellten Idee zu ergänzen.

  1. Da eine ordentliche Tagcloud (auch hier im Beispiel) alphabetisch geordnet ist, wäre jedoch eine ol besser geeignet als eine ul. Oder nicht?

  2. "Eher selten", "sehr häufig" finde ich weniger geeignet:

    • Nicht definiert: Was ich als häufig betrachte, kann für jemand anders wenig sein
    • Nicht deklarativ: Was ist selten?
    • Schlecht zu erfassen, da zu lang

    Meine Lösung sieht so aus:

    • Die Tag Cloud heißt nicht so, sondern "Stichwörter"
    • Die Stichwörter sind alphabetisch geordnet und über ein Register (Liste) am Seitenanfang springt man direkt zum Buchstaben
    • Das einschließende div-Tag hat außer der Klasse zur Darstellung der Größe einen Titel, der lautet: "Dieses Stichwort ist in x Dokumenten", wobei x die Anzahl der Seiten ist, die dieses Tag enthalten. Steht der Mauszeiger über einen Link, erscheint bei grafischen Browsern ein Tooltip mit diesem Text und ich hoffe, Screenreader lesen den Titel
    • Konkrete Anzahl der Tags steht hinter jedem Tag

    P.S.: Ich fände es gut, wenn ihr das CSS so ändert, dass Listen mit einem Bullet und eingerückt formatiert werden und Absätze mit einem größeren Abstand nach oben, da viel übersichtlicher. Die Bullets habe ich "händisch" erzeugt.

  3. @Gerrit,

    darüber haben wir auch schon diskutiert, ich habe mich aber dagegen entschieden. Die Nummerierung würde an dieser Stelle eine Struktur oder Wertung implizieren, die gar nicht da ist. Nach 1., 2., 3., etc würde ich eine Rangfolge erwarten, da sollten die Begriffe dann eher nach ihrer Gewichtung sortiert sein.

  4. @Elmar,

    über die Benennung der "Unterteilungsbegriffe" kann man sicher trefflich streiten, im komkreten Fall halte ich sie immer noch für angemessen.

    • Dein Beispiel ist auch keine Tag Cloud mehr, sie ist eine Stichwortliste.
    • Screenreader lesen <title>-Attribute mit
    • P.S.: Die Listen werden doch richtig formatiert, oder? Ich sehe jetzt für jeden Aufzählungspunkt zwei Bullets in Deinem Kommentar. Deine Formatierungswünsche sind angekommen.
  5. Hi,

    mich würde mal interessieren, ob diese Variante auch beim Zielpublikum richtig ankommt -- habt ihr schon Feedback in irgendeiner Form bekommen?

    mfg Malcolm

  6. Ich habe in meine Blog-Engine ebenfalls einen Tag-Cloud-Generator eingebaut. Dieser erstellt eine unsortierte Liste (<ul>) nach folgendem Muster:

    
    <ul class="tags">
      <li class="tag" style="font-size: 68.5%;">
        <a class="tag" rel="chapter" href="?id=artikel&tag=XHTML">XHTML <var class="count">(kommt 1 mal vor)</var></a>
      </li>
      <li class="tag" style="font-size: 113.2%;">
        <a class="tag" rel="chapter" href="?id=artikel&tag=CSS">CSS<var class="count">(kommt 6 mal vor)</var></a>
      </li>
      <li class="tag" style="font-size: 75.1%;">
        <a class="tag" rel="chapter" href="?id=artikel&tag=PHP">PHP <var class="count">(kommt 3 mal vor)</var></a>
      </li>
    </ul>
    
    
    Also mit der Anzahl des Vorkommens des jeweiligen Tags in Klammern. Was haltet ihr davon?
  7. Wäre es nicht besser das ganze so zu realisieren?

    
    <ol>
     <li>(Ganz wichtig)
       <ol>
         <li>Google</li>
         <li>SelfHTML</li>
         <li>Wikipedia</li>
       </ol>
      </li>
      <li>Weniger wichtig
      <ol>
        <li>Heise</li>
        <li>Apple dot com</li>
      </ol>
      </li>
    </ol>
    

  8. Ist eine Tag Cloud Liste überhaupt für Suchmaschinen geeignet ? Sollte man die Links vielleicht auf no-follow setzen ? Ich weiß es nicht, vielleicht antwortet ja einer würde mich echt interessieren.

    Danke

  9. Es gibt auch andere Alternativen. Man kann zu einem Tag-Cloud-generator zugreifen: http://www.tagcloud-generator.com/