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 17:44
© 2008 Hochschule für Gestaltung, Schwäbisch Gmünd. Impressum
0
» Post-it
jb
17:08, 26.11.2012

Again: Das digitale Klassenzimmer: [link]:article_id=228744

12:27, 31.08.2012

Retweetet diesen Tweet und gewinnt eine von 2 Freikarten für die push.conference in München am 24. Nov. [link]

09:29, 09.07.2012

Praktikumsplatz ab sofort bei schnelle-bunte-bilder in Berlin.
[link]

17:07, 05.06.2012

push.conference ist heute online gegangen. Fixes Studentenkontingent inklusive. [link]

jb
14:03, 07.05.2012

Disney Research's Touché system detects your touch on most things [link]

10:44, 14.02.2012

UX-Designer sind eine der bestbezahltesten IT-Jobs in 2012 [link]

16:13, 08.12.2011

predicting the future of computing [link]

09:35, 09.11.2011

Sehr lesenswerter Artikel zum Thema Touch-Interfaces.

[link]

15:56, 04.11.2011

ERGOSIGN München sucht einen Praktikanten (m/w): [link]

17:40, 27.10.2011

Games, Life & Utopia Conference an der FH Potsdam. Alle sind eingeladen. [link]

08:27, 27.10.2011

Zurück nach Gmünd. Heute um 15:30 mit meinem Vortrag »How to start up a design studio«

jb
14:00, 26.09.2011

Erdbebenwarngerät auf Arduino-Basis:

[link]

11:39, 16.08.2011

decoded conference 2011 wieder in München. 1 Tag. 6 Sprecher. Early Birds mit 15% Studentenrabatt sind noch zu haben [link]

00:27, 04.08.2011

US debt problem visualized [link]

jbo
12:42, 14.07.2011

Complexity vs Complicated — [link]

jbo
09:39, 06.07.2011

Einfache Tweenings in HTML/CSS – [link]

08:49, 04.07.2011

Hmmm. Lots of data waiting to get visualized... [link]

18:04, 17.06.2011

An Infographic about the Anatomy of a Computer Virus
[link]

15:25, 08.06.2011

Nokia Maps Berlin sucht UX-designer/Visual designer als Verstärkung. Go here: [link] and search for RES000001O9

10:46, 07.06.2011

[link] powerful Augmented Reality Picture tracking.