You are here: Startseite Medienlabor Inhaltliche Nähe

Inhaltliche Nähe

Tags
Backlinks
» Tags: "Inhaltliche Nähe" is tagged as » Backlinks: These Wikipages link to "Inhaltliche Nähe"

Beschreibung der "Inhaltliche Nähe" Visualisierung des Wikis. Sourcecode und API Dokumentation.

Die » Inhaltliche Nähe stellt den Versuch dar, dem User eine alternative Navigationsmöglichkeit in unserem Wiki zu geben. Im Gegensatz zur konventionellen hierarchischen Navigation die unter » Menü abgebildet ist, wird hier der Fokus auf den inhaltlichen Kontext gelegt.

Legende

 Naehe Legenede

Interaktionen

  • Drag'n'Drop: Knoten Bewegen und fixieren.
  • Klick: Öffnet den Hyperlink
  • Alt-Klick: Fixierung des Knotens lösen
  • Cmd/Strg-Klick: Öffnet den Hyperlink in einem neuen Fenster/Tab

Unsere Berechnung der "inhaltlichen" Nähe

Für die Berechnung der "inhaltlichen" Nähe müssen wir uns zunächst die nötigen Daten aus dem Wiki beschaffen, dies geschieht vereinfacht durch eine Datenbankabfrage folgender Art, "Hallo liebe Datenbank bitte suche mir alle Seiten im Wiki, die diese Bedingungen erfüllen":

  • mindestens einen gemeinsamen Tag mit der aktuelle Seite haben
  • die Links haben, die auf die aktuelle Seite zeigen
  • die durch "ausgehende" Links auf der aktuelle Seiten verknüpft sind
  • die in der Breadcrumb-Navigation (Brotkrümelnavigation) übergeordnet sind

Für alle "gefundenen" Wikiseiten wird nun der Tanimoto-Koeffizient zur aktuellen Seite berechnet. Der Tanimoto-Koeffizient gibt die Übereinstimmung zweier Sets an Kategorien wieder, beispielsweise haben die beiden Sets A (Hund, Katze, Baum) und B (Hund, Katze, Haus) einen Tanimoto-Koeffizient von 0,666. Anhand der berechneten Werte können wir nun alle gefundenen Wikiseite gewichten, sortieren und filtern:

  • Wenn es zwischen den Knoten Links oder Backlinks gibt, dann werden diese höher gewichtet. 
  • Erstelle anhand des Tanimoto-Koeffizienten für alle Knoten ein Ranking.
  • Nur Knoten, die mehr als 5% Übereinstimmung mit dem Zentralen Knoten haben sollen angezeigt werden

Alles was nun übrig bleibt, ist Datengrundlage für die Visualisierung.

Natürlich kann das System nur so gut sein, wie die Autoren Ihre Inhalte kategorisieren, denn ohne Tags können keine Aussagen über inhaltliche Bezüge gemacht werden.

Visualisierung

Rot umrandet ist die aktuelle Seite (Zentraler Knoten). Die farbliche Codierung (3 Grautöne) gibt das Zeitintervall seit der letzten Änderung wieder (siehe Legende). Prinzipiell gibt der Abstand der Knoten die inhaltliche Distanz wieder, benachbarte Knoten haben somit die höchste Übereinstimmung.

Der verzweigte Aufbau der Visualisierung erfolgt dadurch, dass wir der Reihe nach durch das Ranking der Knoten laufen (Sortiert nach Ähnlichkeit zur aktuellen Seite). In jedem Schritt wird nun durch erneute Berechnung des Tanimoto-Koeffizienten versucht, aus allen auf der Bühne bereits erstellten Knoten den best passenden Knoten zu finden und mit dem aus der aktuellen Rangfolge zu verbinden. Dieser Vorgang wird wiederholt bis das komplette Ranking durchlaufen ist und alle Knoten auf der Bühne erstellt sind.

Die eigentliche Positionierung der Knoten und Kanten übernimmt ein"force directed layout" Algorithmus. Die Grundidee dabei ist, jeder Knoten stößt alle anderen Knoten ab und jede Kante verhält sich wie eine virtuelle Feder. Da das System selbständig versucht in den "entspanntesten" Zustand zu kommen, ist es ein verbreiteter Ansatz in der Graphentheorie Netze darzustellen. "Auf diese Weise ergeben sich natürlicher anmutendende und oft intuitiver interpretierbare Zeichnungen des Graphen", wikipedia Graphzeichnen.

XML Schnittstelle

Die Daten über die inhaltlichen Nähe einer Seite werden über einen einfachen Webservice zur Verfügung gestellt, können also über eine Standard HTTP Abfrage sehr einfach ausgelesen werden. Damit können die Daten auch von jeder anderen Applikation genutzt werden. Die Daten werden mittels einer XML Datei übermittelt.

HTTP Abfrage

Die HTTP Abfrage erfolgt immer durch hinzufügen von "/naehe.xml" hinter der URL einer Wikiseite. Beispielsweise müsste für die aktuelle Seite "/medienlabor/inhaltliche-nahe" die URL folgendermassen aufgebaut sein:

Struktur XML

Für die derzeitige Visualisierung wird nur ein Teil der zur Verfügung stehenden Daten benutzt. Wir haben versucht, die Schnittstelle möglichst allgemein zu definieren, um ganz unterschiedliche Visualisierungen zu ermöglichen.    

Die Struktur der XML Datei gliedert sich immer in folgende Ober- und Unterpunkte:

  • <naehe> Wurzelknoten dem alle Daten untergeordnet sind
    • <wiki_categories> alle Tags mit Anzahl die im Wiki vorkommen (momentan nicht in der Visualisierung benutzt)
    • <centralnode> die aktuelle Seite
    • <breadcrumbs> alle übergeordneten Wiki Seiten die in der Breadcrumb-Navigation "You are here" angezeigt werden
    • <wiki_link_related> alle anderen Seiten im Wiki die mit der aktuellen Seite verlinkt sind.
    • <category_related> alle anderen Seiten im Wiki die mit der aktuellen Seite eine Schnittmenge in den Tags habe. 

<?xml version="1.0" encoding="UTF-8"?>
<naehe>

<wiki_categories>
<wiki_category>
<category>Abläufe</category>
<category_count>2</category_count>
</wiki_category>
...
</wiki_categories>

<centralnode>
<node>
<title>chemieraum - anfassbare chemie im ausstellungsraum</title>
<url>... die URL absolut zur Wikiseite</url>
<description>... der Beschreibungstext</description>
<plone_content_type>Projekt</plone_content_type>
<date_created>2008/07/23 23:42:44.652 GMT+2</date_created>
<date_last_modified>2008/08/06 23:07:28.048 GMT+2</date_last_modified>
<unmodified_since unit="hour">2125.0</unmodified_since>
<username>thomas_glaeser</username>
<main_text>
... der Haupttext
</main_text>
<categories>
<category>Hardware</category>
<category>medienlabor</category>
<category>tangible</category>
<category>Arduino</category>
<category>Interaktion</category>
<category>vvvv</category>
<category>Ausstellung</category>
<category>Interface</category>
<category>Haptik</category>
</categories>
<wiki_links>
</wiki_links>
</node>
</centralnode>

<breadcrumbs>
<node>
...
</node>
</breadcrumbs>

<wiki_link_related>
<node>
...
</node>
</wiki_link_related>

<category_related>
<node>
...
</node>
</category_related>

</naehe>

Quellcode

Der komplette Quellcode als Flex (AS 3) Projekt (Stand 16/12/2008).
Idee und Realisation: Benedikt Groß und Ronald The

Links und sonstige Quellen

 
(0 Words, 0 Weblinks, 0 Pictures and 0 Video) - Seite Drucken
Page created by benedikt_gross. Last modification on 03.02.2009 16:44
© 2008 Hochschule für Gestaltung, Schwäbisch Gmünd. Impressum
0
» Post-it
jbo
17:24, 30.08.2010

Wireframing Stencils bis zum Umfallen — [link]

14:40, 27.08.2010

Logged in – Wie sozial machen uns Netzwerke? [link]

15:32, 17.08.2010

Medienfassaden Symposium auf der Ars Electronica am 6.9.2010
[link]

13:42, 16.08.2010

Designmethodenfinder: [link]

13:11, 14.08.2010

11 Principles of Interaction Design Explained [link]

13:55, 12.08.2010

5 indispensable skills: [link]

11:05, 30.07.2010

Sonys 360° 3D Display Prototyp [link]!

jbo
09:26, 30.07.2010

kleine Sammlung für die iPhone Entwicklung — [link]

10:37, 28.07.2010

some more history: Brief history of data visualization [link] (via. flowingdata)

17:08, 26.07.2010

Design Is History [link]

09:37, 26.07.2010

IDEO Method Card iPhone Application
[link]

10:07, 12.07.2010

Interactiondesign in Seattle (Washington State) - vielleicht eine Möglichkeit fürs Auslandsemester
[link]

00:12, 09.07.2010

mouse-less?
intelligenter einsatz von infrarot.
[link]

10:21, 07.07.2010

bilderkennung in der küche

[link]

21:08, 03.07.2010

Ich bin begeistert von der Wireframing Software Balsamiq: [link]

Wäre schön wenn wir dafür Hochschul-Lizenzen bekommen könnten.

11:19, 03.07.2010

Der beste Artikel über Usability den ich bisher gelesen habe: [link]

20:15, 02.07.2010

Sprachsteuerung erschreckend gut. Siri iPhone App (US only) [link]

17:52, 02.07.2010

Bauhaus Interaktiv
[link]

jb
09:39, 02.07.2010

Von .cn zu .中国
[link]

07:15, 01.07.2010

Orginal...[link]

 
» Inhaltliche Nähe zu "Inhaltliche Nähe"