Abschlusspräsentation

<div class="vcard">

<div class="fn">Joe Doe</div>

<div class="org">The Example Company at

<span class="geo">

<span class="latitude">52.48</span>,

<span class="longitude">-1.89</span>

</span>

</div>

<div class="tel">604-555-1234</div>

<a class="url" href="http://example.com/">

http://example.com/</a>

</div>

<div xmlns:foaf="http://xmlns.com/foaf/0.1/" about="#me" rel="foaf:knows">

<ul>

<li typeof="foaf:Person">

<a property="foaf:name" rel="foaf:homepage" href="http://example.com/bob">Bob</a>

</li>

<li typeof="foaf:Person">

<a property="foaf:name" rel="foaf:homepage" href="http://example.com/eve">Eve</a>

</li>

<li typeof="foaf:Person">

<a property="foaf:name" rel="foaf:homepage" href="http://example.com/manu">Manu</a>

</li>

</ul>

</div>

zurück zur Problemstellung!

Aber wer erstellt Inhalte im Web?

<div class="rdfa" title="Berlin containedby Germany" about="http://rdf.freebase.com/rdf/en.berlin" rel="http://rdf.freebase.com/ns/location.location.containedby">

<span about="http://rdf.freebase.com/rdf/en.germany"></span>

</div>

?

Die Same-Origin-Policy gilt nicht für <link>-Tags. JSONP steht für die dynamische Erzeugung eines solchen Link-Tags, bei der die nachgefragten Informationen von einer HTTP-basierten API über GET-Parameter angefragt werden und dabei eine Callback-Funktion definiert wird. Die Antwort enthält ein JavaScript-Objekt im JSON-Format, welches instanziiert wird und der Callback-Methode übergeben wird, die nach der Instanziierung aufgerufen wird.

Danke für Ihre Aufmerksamekeit!

Technik-Exkurs

Einfügen eines Statements

Technik-Exkurs

• Inhalte explizit mit Semantik auszeichnen

• aber WIE?

Semantic Web

<meta>

Einfügen eines Statments (2)

• Der markierte Text wird mit einem -Tag umgeben.

• In dem about-Attribut des -Tags findet sich die Referenz auf die URI der Ressource.

• In HTML5 wird das -Tag überall im Dokument eingesetzt werden können und würde zu diesem Zweck genutzt werden.

<span>

Warum brauchen wir mehr Semantik? (Fortsetzung)

• Dem Quelltext werden weitere Tags angehängt (RDFa-Statement):

<div class="vcard">

<div class="fn">Joe Doe</div>

<div class="org">The Example Company

<span class="geo">

<span class="latitude">52.48</span>,

<span class="longitude">-1.89</span>

</span>

</div>

<div class="tel">604-555-1234</div>

<a class="url" href="http://example.com/">

http://example.com/</a>

</div>

Einfügen einer Ressource

• Völlig neue Möglichkeiten für Browser
• Termine und Adressen von Webseiten exportieren
• Karten zu genannten Orten einblenden
• Links zu Zusatzinformationen anbieten

<span>

• Bessere Treffer in Suchmaschinen

• Computerinterpretierbare Informationen können analysiert und weiterverwendet werden

• Strukturierte Informationen können aggregiert und automatisiert verarbeitet werden, z. B. in

• Blogs, Wikis, Homepages
• Uni-Veranstaltungsverzeichnissen
• Online-Fernsehprogrammen
• ...

"ich fahre am 01.09.09 von A nach B"

"ich brauche eine Mitfahrgelegenheit von A nach B am 01.09.09"

Joe Doe

The Example Company

604-555-1234

http://example.com

Wozu mehr Semantik?

Demo - Screencast

Vision

Eingabefeld

statische semantische Annotationen

Szenario

• Ein Redakteur soll in der Lage sein, ohne technisches Wissen über Ontologien oder RDF seine Inhalte semantisch auszuzeichnen

• Er soll dafür nur den Namen der Syntax kennen und wissen, was er meint

• Die Lösung soll intuitiv verständlich sein

• Es sollen Statements gebildet werden können

• Blogsystem

• Rich-Text-Editor

• besondere Aufmerksamkeit auf Usability

• Einbindung von Wissensdatenbanken

Architektur

• RDF und RDFa sind allerdings nicht trivial
• Wer erstellt Inhalte auf Webseiten?

• Software kann Semantik nicht erfassen

• Es gibt zwar Projekte in diese Richtung - aber die "Magie" funktioniert noch nicht

DAU - Redakteur

Wissensdatenbanken

• Tomcat Server, MySQL Datenbank

• Blojsom: Blogsystem (Java incl. Spring + Hibernate)

• Servlets und RDFa-Editor holen Daten aus Freebase

• Erstellte Posts sind über den Blog für Besucher zugreifbar

==> Das Web funktioniert für Menschen

Warum ein Rich-Text-Editor?

Usability

• Problem der global eindeutigen URIs und des Anwenders, der nur eine sprachliche Bezeichnung kennt

• In Wissensdatenbanken werden verschiedenste Daten gesammelt

• DBPedia, Freebase, Ontowiki

• Freebase stellt eine API zur Verfügung, die im Rahmen dieser Arbeit zum Finden der passenden Ressourcen eingesetzt wurde

• WWW ist größte Wissenssammlung des Planeten

• Mensch kann eine Internetseite ansehen und Text interpretieren

• Rich-Text-Editoren sind dem Zielpublikum bekannt (MS-Word; in standard-Bloginterfaces)

• WYSIWYG = "Direct Manipulation Interface"

• JavaScript RTE beliebig in Webseiten nutzbar

Motivation

• Die Akzeptanz neuer Technologie hängt immer mehr von der Usability ab

• Usability = Qualitätsmerkmal, das die Benutzbarkeit einer Software durch einen Menschen ausdrückt. Usability Engineering ist ein fortschreitender Prozess, der diese optimiert

• Auch "User Experience" =

UX

Das Konzept "Direct Manipulation Interface" beschreibt ein Interface, das dem Anwender das direkte Editieren der "Objects of Interest" in der View erlaubt

UX

Warum ein Blogsystem?

Web-MVC

• Blogsysteme sind einfach zu bedienen

• Viele Menschen nutzen bereits Blogs; Zielpublikum: Webredakteure, die Content erstellen

• Es geht darum, Wissen in Webseiteninhalten strukturiert ablegen zu können

Problemstellung

UX

Zuerst fragt man sich, was der Anwender bereits kennt. Bekannte Mittel sollten eingesetzt werden.

• WWW = Hypertextdokumente

• Dokumente referenzieren sich netzartig

• Dokument wird mit HTML-Tags definiert

• Tags enthalten wenig Bedeutung

• Semantik beschreibt eindeutig, was mit Inhalten gemeint ist

• kann nicht eindeutig aus der Syntax abgeleitet werden

• Beispielinhalte: "Oldenburg." "Ich bin Tim Dellas." "Ich kenne Jürgen Greuter."

• Auch Menschen benötigen Kontext- bzw. Metainformationen, um die Semantik eindeutig bestimmen zu können.

Ein Haupteingabefeld

Was ist Semantik?

Usability - Engineering

?

• Menschen können Bedeutung erschliessen (rechts)
• Computersysteme kann Semantik nicht erschliessen (links)
• HTML-Tags sind "nur" Syntax

4. Umsetzung

1. Einleitung und 2. Grundlagen

5. Fazit / Ausblick

Fazit / Rückblick

3. Technik

"Ein RDFa-Editor zur Einbettung semantischer Informationen in ein Weblog-System" von Tim Dellas

Gutachter: Prof. Dr.-Ing Axel Hahn und Nikolai Dahlem Betreuer: Dr. Jörn von Holten

Datum: 27.08.2009

• Tool funktioniert und ist nützlich (Interesse OpenText CMS)

• Es wurde eine minimale Eingabemaske gefunden

• Bei Erweiterung von Software sollte Machbarkeitsstudie und Prototypphase vorhergehen

• Usability Engineering Voraussetzung bei Tools für "neue Technologien"

• Bei JavaScript-Programmierung unbedingt Framework einsetzen <== jQuery war effektiv und zeitsparend

• "Unsichtbare" Verbesserungen sichtbar machen

Abschlusspräsentation

der Diplomarbeit

Ein RDFa-Editor zur Einbettung

semantischer Informationen

in ein Weblog-System

präsentiert von

Tim Dellas

Gutachter:

Prof. Dr.-Ing. Axel Hahn

Nikolai Dahlem

Zeitstrahl

• Ressourcen können über Prädikate miteinander in Verbindung gebracht werden
• Prädikate sind ebenfalls durch URIs identifiziert, z. B.:

Betreuer:

Dr. Jörn von Holten

http://dbpedia.org/data3/birthplace.rdf

Wie explizites

Wissen implementieren?

• Resource Description Framework (RDF)
• Beschreibt Ressourcen mit eindeutiger ID in Form einer URI, z. B.:

27.08.2009

1. Einleitung

http://dbpedia.org/data3/populationTotal.rdf

2. Grundlagen

http://www.ithoughts.de/foaf.rdf#me

http://dbpedia.org/data/london.rdf

0 min

Semantik

Problemstellung

3. Technik

Semantic Web

Eindeutige Bezeichner

• gerichtete Verbindungen von Ressourcen heißen Aussagen oder Statements
• Bestehen aus Subjekt, Prädikat und Objekt
• bilden einen Graphen, in dem Ressourcen die Knoten und Prädikate die Kanten sind
• Objekte eines Statements können auch einfache Datentypen wie Strings und Zahlen sein

Semantik implementieren

http://dbpedia.org/data/london.rdf

Probleme

http://dbpedia.org/data3/birthplace.rdf

Vision

Wissensdatenbanken

Microformats

RDF

• Meta-Tags beschreiben nur Informationen über Dokumente

• Microformats beschreiben nur wenige, modellierte Klassen von Informationen

• Immer noch keine Eindeutigkeit

(London in GB != London in Canada)

• basiert auf Konventionen, an die sich die Anwender halten müssen

5 min

Ausblick

http://dbpedia.org/data/Kiefer_Sutherland.rdf

RDFa

Usability

?

http://dbpedia.org/data3/populationTotal.rdf

JavaScript als Grundlage für einen RDFa-Editor

Rich-Text-Editor

JavaScript

= wenn mehr Erklärung notwendig, nachfragen!

jQuery

7556900

WYMeditor = What-You-Mean-Editor

• Baut auf jQuery auf, was die Programmierung erleichtert
• keine "selbstgebastelten", undurchsichtigen Klassen
• Gute Dokumentation
• "proof-of-concept" RDFa-Erweiterung, bei der einige feste Werte (z. B. foaf:Person) auswählbar sind, und farblich hervorgehoben werden:

Same-Domain-Policy

?

• Technologie RDFa findet immer weitere Verbreitung

• Yahoo bewertet bereits semantisches Markup, Google hat dies ebenfalls angekündigt und ist in Testphase

• Trend: Semantic SearchEngineOptimization

• Lokale Wissensdatenbanken für semantische Daten bzw. Aggregationen oder Suchmaschinen für semantische Daten und Ontologien werden in Zukunft zunehmen

mögliche Anschlussarbeiten

• Viele offene Implementierungen von WYSIWYG-Editoren: TinyMCE, freerichtexteditor, NicEdit, ...

• Entscheidung für WYMeditor

• Baut auf jQuery, einer Bibliothek für JavaScript auf

• Problem: "Same-Origin-Policy" im JavaScript Client verhindert, auf externe Domains zuzugreifen

Java Servlets

4. Umsetzung

• andere Einbindung von Daten, z. B. über sameas.org oder sindice.com (RDF-Indizes)

• Variable Webseiteninhalte, die über RDFa referenziert würden

• komplexere RDF-Strukturen

• RDF-Twitter (per Link-Shortener reifizierte semantische Aussagen twittern)

Komplexerer Graph

10 min

Architektur

• Wenig eindeutige Semantik
• Beschreiben gesamtes Dokument
• Alternativ auf Konventionen beruhende Microformats
• Microformats definieren Personen, Kalendereinträge, und definieren Text als Review, Produkt, und ähnliches

Web-MVC

Usability Engineering

<meta name="dc:publisher" content="Tim Dellas" />

<meta name="dc:subject" content="Reise nach London" />

Ressourceneinbettung

• Metainformationen für das Dokument in speziellen -Tags
• Beschreiben Inhalt aber auch nur als reinen Text

<meta>

5. Ausblick / Fazit

Statementeinbettung

Semantik in HTML?

View für Blogbesucher

15 min

Rückblick

Demo-Screencast

Ausblick

<html><head><title>London</title></head>

<body>

<h1>Meine Reise nach London</h1>

<p><i>Tim Dellas, 27.08.2009</i></p>

<p>Ich war letzte Woche in London. Die Stadt ist schön. Ich habe Big Ben besucht, den historischen Glockenturm, der in London steht.</p>

</body></html>

Ideen für weitere Arbeiten

• wenige Ausnahmen haben eine klare Bedeutung:

title, cite, abbr, ...

RDFa

• RDF kann in HTML-Attributen integriert werden
• RDFa dient als semantische Metainformation für Inhalte eines HTML-Tags
• W3C-Recommendation seit Oktober 2008

Reifikation

Fragen

20 min

HTML bietet (fast) nur Syntax

Workaround für Same-Origin-Policy

?

• Ein Servlet kommuniziert per AJAX mit dem clientseitigen Editor, holt sich die benötigten Daten und gibt sie an den Editor zurück

• Eine API einer Wissensdatenbank mit JSONP-Antwort (JavaScriptObjectNotation with Padding)

?