Your browser doesn't support the features required by impress.mod.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

12.10.2017 | International Summer School (ISS)
Digitale Methodik in den Geistes- und Kulturwissenschaften

Webtechnologien und -annotationen

Strukturierte Daten im Web

Anna Neovesky, Jörg Hambuch| github | @digicademy | CC-BY 4.0
Slides | Seminarhandbuch

Inhalt

  1. Webtechnologien – ein Ausschnitt
  2. HTML, CSS, JavaScript
  3. RDFa, JSON-LD

01

Webtechnologien – ein Ausschnitt

Webtechnologien – ein Ausschnitt

02

HTML

Was ist HTML?

HTML - HyperText Markup Language

Ein bisschen Geschichte

1989
Tim Berners-Lee verfasst Information Management: A Proposal und schlägt ein "globales Hypertextsystem" vor (CERN)
1992
Urversion von HTML (ohne Versionsnummer) wird veröffentlicht
1993-1996
Weiterentwicklung von HTML durch die IETF
1994
Gründung des W3C
Ab 1996
W3C übernimmt Weiterentwicklung von HTML vom IETF
2004
WHATWG wird gegründet um die Entwicklung von HTML weiterzuführen, während sich das W3C auf XHTML konzentiert (2000-2009)
2008
Erster Entwurf von HTML5
2014
HTML5 löst HTML4 als Standard für Webseiten ab (Spezifikation)

Aufbau und Elemente

Aufbau eines HTML-Elements

Source: Mozilla Developer Network

Aufbau eines HTML-Elements

<p>Ein Text-Element</p>
<p>Ein <em>verschachteltes</em> Text-Element</p>

Ein Text-Element
Ein verschachteltes Text-Element

Eigenschaften eines HTML-ELements:

Attribute

<a href="#" title="Demo-Link">Ein Link</a>

Ein Link

Eigenschaften von Attributen:

Block-Level- und Inline-Elemente

Block-Level-Elemente beginnen eine neue Zeile und erstrecken sich über die Breite der kompletten Zeile, während Inline-Elemente keine neue Zeile starten und nur so viel Platz einnehmen wie nötig:

<p>Ein Block-level-Textelement mit einem <em>Inline-Auszeichnungselement</em>.</p>

Ein Block-Level-Textelement mit einem Inline-Element darin.

Basisstruktur eines HTML-Dokuments

<!DOCTYPE html>
<html>
    <head>
        <!-- this is a comment -->
        <!-- metadata -->
        <title>Sample page</title>
    </head>
    <body>
        <!-- content -->
        <h1>Sample page</h1>
        <p>This is a <a href="demo.html">simple</a> sample.</p>
    </body>
</html>

Wichtige Elemente

<!DOCTYPE html>
Sagt dem Browser, welche Version von HTML verwendet wird
<html>
Das Wurzelelement (root) eines HTML-Dokuments. Umschließt alle anderen Elemente
<head>
Enthält Metadaten und generelle Informationen über das Dokument, z. B. Autor, Titel und Zeichensatz, außerdem Verlinkungen zu externen Stylsheets und Skripten.
<body>
Enthält den Inhalt eines HTML-Dokuments, der auf der Webseite angezeigt wird.

Wichtige Elemente (2)

<h1>, <h2>, ..., <h6>
Überschriften unterschiedlicher Hierarchie
<p>
Absatz (engl. paragraph)
<ul>
Aufzählung (engl. unordered list)
<img>
Bild

Praktische Übung

02

CSS

Was ist CSS?

CSS - Cascading Style Sheets

Aufbau und Funktionsweise

Aufbau einer CSS-Regel

Source: Mozilla Developer Network

Aufbau einer CSS-Regel

body {
    font-family: "Arial", sans-serif;
    font-size: 1.6em;
    background-color: #eeeeee;
    /* This is a comment */
}

Praktische Übung

Was ist JavaScript?

Quelle: Google.de

Was ist JavaScript?

Quelle: Google Docs

Was ist JavaScript?

Quelle: Google Maps

... und was ist ohne JavaScript?

Google Maps mit deaktiviertem JavaScript

Quelle: Google Maps mit deaktiviertem JavaScript

Jetzt sag endlich:
Was ist denn nun JavaScript?

* Inzwischen gibt es JavaScript auch auf dem Server, siehe node.js

Code-Beispiele

  1. Hallo mit Javascript: hallo.html, JSFiddle
  2. Zeichnen mit Javascript: canvas.html, JSFiddle
  3. Autovervollständigung: suggest.html

Literatur

HTML

CSS

JavaScript

Weiterführendes

Strukturierte Daten im Web

RDFa, JSON-LD

Worum geht es?

Möglichkeiten der RDF Einbindung

Name Einsatz Bereitstellung MIME-Type
RDF/XML Import/Export Schnittstelle application/rdf+xml
Turtle Import/Export Schnittstelle text/turtle
JSON-LD HTML-Seite (head) Web crawler, Scraping, Schnittstelle application/ld+json
HTML5 RDFa HTML-Seite (body) Web crawler, Scraping In HTML eingebunden.
HTML5 Microformat HTML-Seite (body) Web crawler, Scraping In HTML eingebunden.

RDFa

Resource Description Framework in Attribute

Einsatz

Entwicklung

  • 2007 W3C-Entwurf für RDFa-Standard
  • 2008 offizielle W3C-Empfehlung
  • RDFa 1.0 nur mit XHTML nutzbar
  • 2012 RDFa 1.1 und RDFa Lite kann in HTML und XML Dialekten eingesetzt werden

RDFa Lite und RDFa

Attribute

RDFa Lite Attribute

  • vocab: legt Standard-Vokabular fest
  • prefix: legt weitere Namensräume fest
  • typeof: Typ des Subjekts
  • resource: Subjekt oder Objekt der Aussage (about)
  • property: Eigenschaften

RDFa Attribute

  • RDFa enthält weitergehendes tagset, insbesondere zur Beschreibung von Relationen
  • content: formatierter Inhalt
  • rel, rev: Bestimmung des Prädikats
  • src: persistente Identifizierung mit IRI

Vokabulare

Dublin Core, FOAF, SKOS, schema.org

  • Legen Begriffe fest, die genutzt werden können
  • Dublin Core: bibliographisches Datenformat
  • FOAF: Modellierung von Personen und Netzwerken
  • SKOS (Simple Knowledge Organization System): Modellierung von Klassifikationen, Taxonomien
  • schema.org: Initiatve zur Strukturierung von Daten auf Websites

schema.org

Idee und Entwicklung

  • 2011 begonnene Initiative von Suchmaschinenbetreibern
  • Ausgangspunkt: bestehende Möglichkeiten der Einbindung von Daten zu kompliziert
  • Ziel: einfaches, einheitliches Vokabular zur optimierten Aufbereitung von Webseiten für Suchmaschinen
  • Schema = Set von Typen mit Eigenschaften
  • Basiert auf bestehenden Vokabularen, Mitarbeit von Experten

schema.org

Was bringt es?

  • Gezielte Verknüpfung von Inhalten
  • Bessere Inhaltliche Auswertung in der Suche, v.a. Produktsuche
  • Google Rich Snippets

Beispiel: RDFa mit schema.org

Strukturierte Auszeichnung eines Buches: Objekttyp und Properties

Dokumentation von schema.org

HTML-Code

Testing Tool

Angabe von Objekttyp und Properties

Erweiterte Auszeichnung von Personen

Weitere Auszeichnung:

  • Einsatz zusätzlicher Vokabulare
  • Einsatz von Normdaten

JSON-LD

JSON Linked Data

Beispiel

JSON-LD basierte Auszeichnung für ein Buch

Wann welches Format?

Zusammenfassung Strukturierte Daten im Web

Mehrwert, Nutzung

Metasuche über Musikkataloge

Anwendungsbeispiel in den Digitalen Geisteswissenschaften

  • Digitale Musikeditionen, Quellensammlungen, Kataloge
  • Ziel: Plattform für übergreifende Suchmöglichkeiten
  • Anhand der charakteristischen Melodien ("incipits")

Anforderungen an strukturierte Metadaten

Weitere Informationen

Literatur

Tools

Dokumentationen

THE END

Vielen Dank für Ihre Aufmerksamkeit