Tim Tepaße: Tag-Cloud semantisch auszeichnen - Ideen?

Beitrag lesen

Hallo Maik,

Meine optische Gewichting hat fünf Stufen, die durch die Schriftgröße realisiert werden, nun könnte man zumindest drei Stufen durch den Einsatzt von <keine>, <em> und <strong> realisieren.

Ich finde Verschachtelung von Wichtig-Tags nicht so sinnvoll, wichtiger als wichtig geht nicht. Deswegen würde ich einfach bei dem starten, was man machen würde, wenn man keine strukturierenden Elemente zur Verfügung hätte, bei reinem Text, dort angeben, was man angeben will, das dann strukturieren und dann so gestalten, wie man will. Tagclouds sind letztendlich eine alphabetisch sortierte Liste mit einem Metawert einer Gewichtung wie Popularität:

Astronautennahrung   – Jo
  Barcelona            – Oha!
  Euro 2008            - Hui!!!
  Sigmoidoskopie       - Äh ...
  Transsubstantiation  - Häh??

Normalerweise würde man das ja wirklich wie Beat nach den Gewichtungen sortieren, aber der Default ist die alphabetische Sortierung. Diese Metadaten würde auch im Quellcode beibehalten, man weiß nie, wann die man sinnvoll sind. Als Liste z.B. so:

~~~html <ol class="tagcloud">
    <li class="xxx">
      <a href="">Astronautennahrung</a>
      <span class="relevanz">Jo</span>
    </li>
    <li class="xxxx">
      <a href="">Barcelona</a>
      <span class="relevanz">Oha!</span>
    </li>
    <li class="xxxxx">
      <a href="">Euro 2008</a>
      <span class="relevanz">Hui!!</span>
    </li>
    <li class="xx">
      <a href="">Sigmoidoskopie</a>
      <span class="relevanz">Äh…</span>
    </li>
    <li class="x">
      <a href="">Transsubstantiation</a>
      <span class="relevanz">Häh?</span>
    </li>
  </ol>

  
Oder aber gleich als Tabelle, offenkundig vereinfacht:  
  
  ~~~html
<table>  
    <tr><th>Tag</th><th>Relevanz</th></tr>  
    <tr class="xxx">  
      <td>Astronautennahrung</td>  
      <td>Jo</td>  
    </tr>  
    <tr class="xxxx">  
      <td>Barcelona</td>  
      <td>Oha!</td>  
    </tr>  
    <tr class="xxxxx">  
      <td>Euro 2008</td>  
      <td>Hui!!</td>  
    </tr>  
    <tr class="xx">  
      <td>Sigmoidoskopie</td>  
      <td>Äh…</td>  
    </tr>  
    <tr class="x">  
      <td>Transsubstantiation</td>  
      <td>Häh?</td>  
    </tr>  
  </table>

Manche hier würden auch noch die Definitionsliste nehmen, ich bin da aber spießiger als das W3C. Der durch solche Auszeichnung gewonnene Hauptvorteil ist meiner Meinung nach eine noch halbwegs sinnige Ausgabe, wenn das ganze ohne Informationen zur Gestaltung linearisiert (vorgelesen, gemorst, vertextbrowsert) wird. Dass die genutzte Gewichtungsinformation noch mal seperat im gruppierenden Elternelement übertragen wird, ist m.E. ein Vorteil bei den Gestaltungsmöglichkeiten, man ist nicht nur auf die Standard-Tagcloud angewiesen, sondern kann andere Darstellungsmöglichkeiten wie das von Elca erwähnte CSS-Balkendiagramm nehmen. Oder kann das leicht als Indikator für einen Sortierungsmechanismus in JS verwenden.

So ein ins Blaue gedachter Vorschlag für sehr moderne Browser: Bei klassischen Artikel-Modell – Inhalt links, Tagclouds rechts – könnte man z.B. mit CSS Media Queries die Darstellung von der zur Verfügung stehenden Breite abhängig machen. Breite Viewports kriegen die breitere Heatmaps, sinkt der zur Verfügung stehende Platz, kommt die alternative Darstellung als schlanke, zweispaltige Tabelle oder Liste zum Tragen, in der die Relevanz durch Balkendiagramme dargestellt wird.

Tim