Auszeichnungssprachen
Christof Schöch
2023-10-05
Sitzung 1 (31.10.2023):
Datenformate in den DH
Überblick: HTML-Kenntnisse
- Fast allen von Ihnen ist klar, dass Sie fast täglich HTML nutzen, wenn Sie Internet-Seiten lesen
- Einige von Ihnen haben schonmal Webseiten mit HTML gestaltet, teils auch mit CSS und JavaScript (super!)
- Teils ist das schon ziemlich lange her, teils haben Sie das auch noch gar nicht gemacht (das ist ok!)
- Nächste Woche wird es weiter um HTML und CSS gehen.
I – Beispiele für konkrete Datenformate
- HTML vs xHTML
- BibTex
- Markdown
- Pixelgrafik
- MEI, MusicXML (=> separate Sitzung)
Beispiel für TEI, HTML und andere
https://www.deutschestextarchiv.de/book/show/nn_allgemeine21_1929
Siehe auch: Dateien im Ordner “/examples”.
Beispiel für BibTeX
@book{burnard_2014_what,
title = {What Is the {{Text Encoding Initiative}}?},
author = {Burnard, Lou},
year = {2014},
publisher = {{OpenEdition Press}},
address = {{Marseille}},
url = {http://books.openedition.org/oep/426},
abstract = {This simple and straightforward book explains the XML technology used by the TEI in language accessible to the non-technical reader and provides a guided tour of the many parts of the TEI universe.},
isbn = {978-2-8218-3460-6},
}Beispiel für Pixelgrafik
Pixelbild mit nur 2x2 Pixeln (hier auf 200x200 vergrößert)
Das Bild mit Python PIL reduziert auf RGB-Array:
[[[247 247 248]
[171 104 255]]
[[247 247 248]
[171 104 255]]]- 256 Werte pro Farbe (2^8) => 8 Bits pro Farbe;
- 3x8=24 => Farbtiefe von 24 Bits / Pixel
- Eine vollständige PNG-Datei ist komplexer: Metadaten + Kompression
Grundlegende Markdown-Syntax
Siehe auch: Quarto, https://quarto.org
## Beispiel für Markdown
Pixelbild mit nur 2x2 Pixeln (hier auf 200x200 vergrößert)
{height="200"}
Das Bild mit Python PIL reduziert auf RGB-Array:
[[[247 247 248]
[171 104 255]]
[[247 247 248]
[171 104 255]]]
:::{.nonincremental}
- 256 Werte pro Farbe (2^8) => 8 Bits pro Farbe (8 Stellen in Binärcode);
- 3x8=24 => Farbtiefe von 24 Bits / Pixel
- Eine vollständige PNG-Datei ist komplexer: Metadaten + Kompression
:::II – Allgemeinere Fragen
Unterschied XML/nicht-XML, markup-basiert/nicht markup-basiert
- Markup vs. Nicht-Markup
- Markup: Fügt dem Inhalt davon separate Auszeichnungen hinzu (Protoyp: HTML)
- Nicht-Markup: Organisiert Daten, aber nicht als Text + Auszeichnungen (Prototyp: CSV)
- Markup: XML vs. nicht-XML
- XML: Markup folgt den Regeln von XML (Prototyp: TEI)
- Nicht-XML: Markup folgt anderen Regeln (Prototyp: Markdown)
Vor- und Nachteile von Auszeichnungssprachen in den DH
- Für Textdaten (mit hierarchischer Struktur; OHCO) sind Auszeichnungssprachen prädestiniert
- Für andere Daten sind oft CSV/TSV oder JSON effizienter
- Welche Auszeichnungssprache jeweils geeignet ist, hängt vom Anwendungsziel ab
- TEI: Master-Format mit allen Informationen (aber recht aufwändig)
- HTML: Für die ansprechend gestaltete Ansicht im Browser (aber nicht so ausdruckstark)
- Markdown: Als Grundlage für linguistische Annotation (aber sehr einfach)
- CSV/TSV: Tokenisiert mit token-basierter Annotation (aber nicht gut lesbar)
Warum beruht Mediawiki nicht auf XML?
- XML hat auch Nachteile
- Es ist relativ ‘verbose’, also viel Markup im Verhältnis zum Text (etwas umständlich)
- Es muss immer wohlgeformt sein, damit es verarbeitet werden kann (verzeit keine Fehler)
- Mediawiki hat diese Nachteile nicht
- Es ist relativ unaufdringlich, Text ist gut lesbar
- Es verzeit auch kleinere (!) Fehler
- Aber Mediawiki hat auch Nachteile
- Man kann es nicht validieren und daher Fehler nicht so leicht finden
- Es kann nicht mit Standard XML-Tools verarbeitet werden
XML als Meta-Auszeichnungssprache vs. spezifische Auszeichnungssprachen
- XML definierte eine Syntax, aber keine Semantik
- Also: XML definiert, dass es Elemente, Attribute und Werte gibt; und wie diese konstruiert werden; aber nicht, welche Element und Attribute es gibt
- Jede XML-basierte Auszeichnungssprache hat die gleiche XML-Syntax (allgemeine Konstruktionsregeln)
- Aber jede XML-basierte Auszeichnungssprache hat ihre eigene Semantik (wie die erlaubten Elemente und Attribute heißen und was sie bedeuten)
- Man kann eine XML-basierte Auszeichnungssprache in XML beschreiben / definieren (bspw. mit XSD)
Was macht TEI in den DH wichtig? (Beispiele!)
- TEI ist sehr flexibel: es gibt für jedes Phänomen mehrere Kodierungsstrategien
- TEI ist sehr ‘ausdrucksstark’: es gibt für sehr viele Phänomene (mindestens einen) Mechanismus
- TEI ist (deswegen) weit verbreitet: es gibt viele Texte in TEI
- Beispiele: DTA, TextGrid, ELTeC, OTA, DraCor, ConSSA, Conha19, DISCO, Théâtre classique uvm.
- Gegenbeispiele: Projet Gutenberg, Hathi Trust, Wikisource.
- TEI-Komptenzen sind ebenfalls weit verbreitet: viele Personen haben TEI-Kenntnisse
- TEI ist daher der de facto Standard für die Kodierung von Texten
Welche anderen XML-Formate gibt es in den Geisteswissenschaften noch und in welchen Bereichen werden sie verwendet (Beispielsweise METS)
- EAD (Encoded Archival Description): für Findhilfen in Geschichte und Archivwissenschaften
- RDF (Resource Description Framework): für Linked Open Data (SPO-Tripels)
- TCF (Text Corpus Format): für linguistisch annotierte Korpora (mehr-schichtig organisiert)
- SVG (Scalable Vector Graphics): für Bilder, insbesondere Diagramme oder Strichgrafiken
- KML (Keyhole Markup Language): für geographische Daten wie Geo-Koordinaten
- METS (Metadata Encoding and Transmission Standard): für Metadaten insbesondere im Bibliotheksbereich
Unterschied KML und GML
- Beides sind XML-basierte Formate für Geo-Informationen
- Ursprung und Standardisierung:
- KML: Ursprünglich von Keyhole, Inc. für die Nutzung mit Google Earth entwickelt.
- GML: Vom Open Geospatial Consortium (OGC) entwickelte Modellierungssprache für geografische Systeme und offenes Austauschformat
- Schwerpunkt:
- KML: Visualisierung von geografischen Daten konzipiert. Einfache Darstellung mit Elementen wie Markierungen, Pfaden und Polygonen.
- GML: Umfassender in Bezug auf die Beschreibung von geografischen Daten und Strukturen, für den Datenaustausch und die Speicherung in GIS-Systemen
- Flexibilität:
- KML: Hat ein stärker festgelegtes Schema, mit Fokus Visualisierung.
- GML: Flexibler und erweiterbar.
- Verwendung:
- KML: Häufig verwendet für einfache Kartierungsaufgaben, Webkartenanzeige und Overlays in Google Earth oder Google Maps.
- GML: Verwendet in komplexeren GIS-Anwendungen, Webdiensten, Datenaustausch zwischen GIS-Systemen und Speicherung von geografischen Daten in XML-Datenbanken.
Beispiel KML vs GML
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Trier Center for Digital Humanities</name>
<description>Location of the Trier Center for Digital Humanities.</description>
<Point>
<coordinates>6.6506,49.7596,0</coordinates>
</Point>
</Placemark>
</kml><?xml version="1.0" encoding="UTF-8"?>
<gml:FeatureCollection xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/gml http://schemas.opengis.net/gml/3.1.1/base/gml.xsd">
<gml:featureMember>
<gml:Feature gml:id="location1">
<gml:name>Trier Center for Digital Humanities (TCDH)</gml:name>
<gml:description>Location of the TCDH.</gml:description>
<gml:pointProperty>
<gml:Point gml:id="point1">
<gml:pos>49.7596 6.6506</gml:pos>
</gml:Point>
</gml:pointProperty>
</gml:Feature>
</gml:featureMember>
</gml:FeatureCollection>Wie entscheide ich in den Digital Humanities, welche Auszeichnungssprache sich am besten für mein Vorhaben eignet?
- Welches Format enspricht den allgemeinen Kriterien: verbreitet, nicht-proprietär, gut dokumentiert, unmittelbar lesbar?
- Gibt es bereits ähnliche Daten und in welchem Datenformat liegen diese vor?
- Sind meine Daten eher sequenziell, hierarchisch, ungeordnet, textuell, numerisch, gemischt, etc.?
- Möchte ich meine Dateien später validieren können oder ist das unwichtig?
- Mit welchem Tool möchte ich die Daten weiterverarbeiten, und welche Formate akzeptiert das Tool?
Sitzung 2 (7. Nov. 2023)
: HTML und CSS
Überblick
- Ihre Fragen zu HTML und CSS
- CSS als Auszeichnungssprache oder Programmiersprache?
Unterschiede zwischen XML, XSLT und CSS
- Frage: Was sind die Unterschiede zwischen XML, XSLT und CSS?
- Antwort:
- XML ist eine Meta-Auszeichnungssprache
- XSLT ist eine Programmiersprache zur Transformation von XML-Dokumenten (siehe auch: separate Sitzung!)
- CSS ist eine Script-Sprache für die Darstellung von HTML-Dokumenten
Editor für HTML und CSS
- Frage: Warum gibt es keinen Editor, der die Gestaltung einer Website ohne HTML und CSS lösen kann? Ist das unmöglich oder ein unnötiger Umweg?
- Antwort:
- Es gibt selbstverständlich diverse Tools für das Erstellen von Webseiten
- HTML + CSS-Editoren: web-basiert oder lokal; für einzelne Seiten; entweder mit Code-Sicht (VSCode / Codium; Brackets); oder als WYSIWYG-Editor (e.g. CKEditor)
- Content Management Systeme (Wordpress, Typo3, Drupal): WYSIWYG-Editor mit Seiten-Management-System; für komplexe Webseiten, die Datenbank-basiert dynamisch generiert werden
- Static Site Generators: Content in Markdown, Metadaten, Parameter; System generiert statische HTML-Seiten mit Navigation, Suche, etc. (e.g. Quarto, Hugo)
- In allen Fällen kommt man aber früher oder später an einen Punkt, wo Hintergrundwissen zu HTML, CSS (und JavaScript) nützlich sind
Einbindung von CSS ins HTML-Dokument (Bühler, S. 48)
- Fragen:
- Warum wurde bei SelfHTML eine andere Weise der Einbindung von CSS ins HTML-Dokument beigebracht, als im Video oder im Buch?
- Ist es möglich mehrere externe CSS-Dateien zu verlinken?
- Antwort:
- Standard / minimal:
<link rel="stylesheet" href="stylesheet.css"> - Ja, für verschiedene Ausgabemedien;
- mehrere Stylesheets mit Attribut
mediaoder@import
- Standard / minimal:
Einbindung von CSS ins HTML-Dokument
Boxmodell
- Frage: Könnten Sie das Boxmodell genauer erklären?
- Antwort
- Zunächst mal: inline-Elemente (bspw.
hi) vs. Block-Elemente - Block-Elemente sind für Seitenstruktur (bspw.
header) und Textstruktur (bspw.h1) gedacht - Block-Elemente sind als Box gedacht mit:
heightundwidthpadding(innen),border(Linie mitborder-width) undmargin(außen)- Position
- Weil fixe Boxen nachteilig sind, gibt es jetzt auch Lösungen wie die “Flexbox”
- Siehe auch: “Boxmodell” bei SelfHTML
- Zunächst mal: inline-Elemente (bspw.
Boxmodell (Bühler, S. 66)
Nachteile von CSS
- Frage: Gibt es auch Kritik an bzw. Nachteile von CSS (etwa im Bereich Sicherheit)?
- Antwort:
- Ein regelmäßiger Concern ist sog. “cross-site scripting (XSS)”. Hier wird CSS in eine Webseite “injiziert”, sodass diese andere Inhalte zeigt als vorgesehen. Das kann für Phishing oder Keystroke logging genutzt werden.
- Ansonsten sind vor allem CMS-basierte Webseite problematisch (im Vergleich zu statischem HTML), weil sie komplex sind, regelmäßig Updates benötigen und sonst gekapert werden können.
Diskussion: CSS
- Ist CSS eher eine Auszeichnungssprache oder eher eine Programmiersprache?
- Bringen Sie Ihre Argumente ein!
Sitzung 4 (14. Nov. 2023):
Textauszeichnung
Besonders erhellende Punkte
- Hierarchie als “essentielle” Form/Struktur eines Textes
- Der Entwicklungsprozess im historischen Kontext und die Zusammenarbeit der Entwickler*innen bei der Erfindung und Weiterentwicklung der Textauszeichnung über die Jahrzehnte.
- Dass der Beginn der maschinellen Textverarbeitung bereits auf das Jahr 1949 zurückgeht. / Dass Text Encoding schon 1949 begann.
- Unterscheidung zwischen deskriptivem und prozeduralem Markup. / Wie viele und welche Vorteile deskriptives Markup hat.
- Entstehung und Entwicklung der Digital Libraries.
- Dass der Begriff “Markup” aus dem traditionellen Verlagswesen kommt.
- Wie groß und auch bedeutend das Thema und auch die TEI ist und welche Vorteile das mit sich bringt.
Fragen: Mehr zu TEI
- Praktisches Beispiel: die häufigsten / wichtigsten Elemente von TEI-XML
- Generell mehr zu den TEI-Richtlinien
- Mehr Informationen und konkretes Beispiel zu den Elemente im “teiHeader”
- Gibt es für TEI eigene Software oder sind das nur Richtlinien?
- => Sitzung 8
Mehr zum Thema Schema
- Erläuterung / Beispiel dazu, wie man eine DTD schreibt.
- Wie ein Schema zur Definition einer XML-basierten ML aussieht / strukturiert ist.
- In was für einem Datenformat ein Schema gespeichert wird.
- => Sitzung 5
Begriffe
- Frage: Was ist der Unterschied zwischen „Dokumenttypdefinition“ und „Dokumenttypdeklaration“ und „Dokumenttypinstanz“?
- Antwort: “Die Dokumenttypdefinition (DTD) oder ein Schema legt die Regeln und die Struktur für ein XML-Dokument fest. Die Dokumenttypdeklaration am Anfang des XML-Dokuments informiert den Parser darüber, welche DTD oder welches Schema verwendet werden soll. Und die Dokumenttypinstanz ist das eigentliche XML-Dokument, das diesen Regeln folgen muss.” (ChatGPT 3.5)
Portabilität und Interoperabilität
- Frage: Was sind Portabilität und Interoperabilität und wie werden diese durch deskriptiven Markup gefördert
- Antwort
- Portabilität: Wie gut kann der Text inkl. Markup in einen anderen Kontext transportiert werden?
- Interoperabilität: Wie gut kann der Text in einem anderen Kontext weiter verarbeitet werden? (technisch, aber auch intellektuell)
- Deskriptiver Markup befördert das, weil er semantisch und eindeutig ist, also unabhängig vom Kontext (bspw.:
<head>vs.<bold>)
- Deskriptiver Markup befördert das, wenn er standardisiert ist (dann weiß man, was die Elemente bedeuten)
- Ein deskriptiv ausgezeichnetes Dokument fördert das, wenn es gegen ein Schema validiert wurde (dadurch weiß man genau, “was drin ist”)
What text really is
- Frage: Eine nähere Erklärung zum Thema “What text really is”.
- Antwort: Großes Thema!
- Renear: Text als “OHCO” vs. Phänomene überlappender Hierarchien
- Textlinguistik: Was macht eine Wortfolge zum Text: (inhaltliche, d.h. thematische und argumentative) Kohärenz und (formale, d.h. syntaktische) Kohäsion
- Kommunikationswiss.: Text als geschriebene Zeichenfolge vs. “sprachliche Form einer kommunikativen Handlung”
- Digitale Edition: textzentriert (Zeichenfolge) vs. dokumentzentriert (materieller Träger)
- Welche Informationen machen einen Text aus? Enthaltene Buchstaben, Wörter, Sätze, Absätze, Textteile; deren Abfolge; implizite Informationen wie Bedeutungen, aber auch POS oder NE.
- Urheberrecht: beliebiger Text (nicht unbedingt geschützt) vs. Werk (Ausdruck des Individuums, urheberrechtlich geschützt)
Status von Textauszeichnung in den DH
- Frage: Ist Textauszeichnung die Basis der Digital Humanities bzw. kann es als diese bezeichnet werden?
- Antwort:
- Historisch ist Textauszeichung sicherlich zentral für die DH, weil DH lange sehr textzentriert waren
- Insbesondere in der Digitalen Edition ist die Textauszeichnung (in XML-TEI) nach wie vor fundamental
- In der stilometrischen Autorschaftsattribution ist bis heute plain text das Kernformat
- Allgemeiner gilt aber: Die Digitalisierung, Modellierung und Erschließung von Daten sind für die DH zentral (egal, um welches Medium es geht, bspw.: Texte, Bilder, Manuskripte, Musik, Skulpturen, etc.)
Diskussion: TEI Guidelines in anderem Format als XML/SGML?
- TEI als XML-Format vs. TEI als Modell/Ontologie von Textphänomenen => diverse “Serialisierung”
- Daher: Was sind die Anforderungen?
- Die in TEI definierten Textphänomene ausdrücken => definierbares Vokabular
- Trennung von Semantik und Darstellung => deskriptiver Ansatz
- Validierbar => doch wieder XML?
- Formate, die Sie als geeignet genannt haben: LaTeX, HTML, JSON, Python
- Formate, die Sie für nicht geeignet halten: Markdown, plain text, WYSIWYG-Ansätze
- Weitere Ansätze:
- TEI in/als RDF (stand-off markup, Linked Open Data-Ansatz)
- TEI in NIF (NLP Interchange Format)
Beispiel für NIF (ein Wort!)
<http://llod.jerteh.rs/ELTEC/por/NIF/POR0001_JulDin_Morgadinha.xml#char=1554,1563> a nif:OffsetBasedString,
nif:RFC5147String,
nif:Word ;
nif:anchorOf "inquietas"^^xsd:string ;
nif:beginIndex "1554"^^xsd:nonNegativeInteger ;
nif:endIndex "1563"^^xsd:nonNegativeInteger ;
nif:lemma "inquieto"^^xsd:string ;
nif:nextWord <http://llod.jerteh.rs/ELTEC/por/NIF/POR0001_JulDin_Morgadinha.xml#char=1564,1571> ;
nif:posTag "ADJ"^^xsd:string ;
nif:previousWord <http://llod.jerteh.rs/ELTEC/por/NIF/POR0001_JulDin_Morgadinha.xml#char=1551,1553> ;
nif:referenceContext eltec:POR0001_JulDin_Morgadinha.xml ;
nif:sentence <http://llod.jerteh.rs/ELTEC/por/NIF/POR0001_JulDin_Morgadinha.xml#char=1419,1617> .Sitzung 5 (21. Nov. 2023):
Schema und Validierung
Überblick
- Fragen zum Thema Schema und Validierung
- Anwendungsbeispiel: Weinetiketten-Projekt
- Diskussion zu Vor- und Nachteilen von strikten Schemata
Frage: Begrifflichkeit
- Frage: Spricht man von einem Schema nur, wenn dieses mit XML Schema festgelegt wurde? Was ist mit DTD oder RelaxNG?
- Antwort: “Schema” ist der Überbegriff für alle Formen von “XML-Sprach-Definitionen”; zugleich ist “XML Schema” ein Unterbegriff, also ein spezifisches Schema-Format
Frage: Visualisierung
- Frage: Welche Möglichkeiten gibt es, XML-Schema und XML allgemein zu visualisieren?
- Antwort
- Erstaunlicher Weise habe ich keine Möglichkeit gefunden, aus einem Schema eine Dokumentation zu generieren (TEI-ODD kann so etwas allerdings)
- oXygen hat einen Visual Schema Editor
- Die in einer XML-Datei enthaltenen Daten können visualisiert werden, aber nicht “einfach so”, sondern indem man ein dafür geeignetes Skript schreibt; beispielsweise als Netzwerk; Beispiel: bibliographische Daten
Frage: Namespaces / Namensräume
- Frage: Welche Rolle spielen Namespaces bei der Validierung?
- Antwort
- Namespaces bezeichnen jeweils ein Schema
- Ein Dokument kann Elemente aus mehreren Namespaces / Schemata verwenden
- Jedes Element muss dann angeben, aus welchem namespace es kommt, e.g.
<tei:head> - Jeder Namespace muss am Anfang des XML-Dokuments “deklariert” werden
- Für jeden Namespace muss eine Schema-Datei angegeben sein
- Bei der Validierung werden dann jeweils die korrekten Definitionen angewandt
Frage: Verschiedene Schema-Sprachen
Frage: Wann könnte es sinnvoll sein, Relax NG statt XML Schema zu verwenden? Welche Nachteile hat Relax NG?
- XML Schema
- selbst in XML geschrieben: validierbar, aber etwas unübersichtlich
- sehr mächtig, aber dadurch auch sehr komplex
- für große / professionelle Projekte
- Relax NG
- einfacher und damit lesbarer
- fast genauso mächtig wie XML Schema
- weniger Datentypen
- Relax NG Compact Syntax
- noch einfacher, noch lesbarer
- etwas eingeschränkter
- eher für kleinere Projekte
Frage: XML Schema Datatype Hierarchy
Anwendungsbeispiel: Weinetiketten-Projekt
- Beispiel: Scan des Etiketts und modellierte Instanz
- WLV-Schema: RNC-Format und Dokumentation sowie Skript zum Erstellen der Dokumentation aus dem Schema
Diskussion: Vorteile und Nachteile eines sehr detaillierten Schemas
Vorteile
- präzise Spezifikation / genaue Dokumentation / Meta-Informationen
- Struktur des Dokuments für alle leicht verständlich
- Daten können auf Kompatibilität mit dem Schema überprüft werden
- Erleichtert das Arbeiten zwischen verschiedenen Systemen / Interoperabilität
- XML Dokument ist klarer strukturiert und besser verständlich
- Fehler bei der Eingabe werden vermieden
- Bessere Auswertung der Dokumente
- …
Nachteile
- hoher Aufwand / hohe Fehleranfälligkeit
- geringe Flexibilität / individuelle Unterschiede der Dokumente / Sonderfälle
- kann schnell sehr komplex werden
- erschwert Änderungen und notwendige Anpassungen
- womöglich nur sehr spezifisch anwendbar
- erhöhter Platzbedarf (?)
- …
Sitzung 6 (28. Nov. 2023):
X-Technologien – XPath
Überblick
- Fragen zum Thema XPath
- Vergleich XPath vs. Reguläre Ausdrücke
Kurze Frage, kurze Antwort
- Kann Xpath nur auf XML-Dokumente angewendet werden? => Ja
- In welchem Kontext wird XPath hauptsächlich angewendet? => In den DH vor allem in der Digitalen Edition.
Templates
- Frage: Könnte/media/christof/Data/Github/christofs/BIB18/collaborations.ipynbn Sie erklären / veranschaulichen, was man unter Templates versteht?
- Antwort:
<xsl:template>mit den Attributenmatchundselectist ein Grundbaustein von XSLT (eXtensible Styleshee Language Transformations)- Damit werden die Elemente im Ausgangsbaum gesucht und ausgewählt
- Das ist Thema in der nächsten Sitzung zu XSLT
XPath und Programmiersprachen
- Frage: Ist es möglich, XPath in eine andere Programmiersprache einzubinden, also z.B. in Python mehrere XML-Dokumente automatisch mit XPath auszulesen? Oder wird es eher nur in XSLT wie im Tutorial auf SelfHTML verwendet?
- XPath wird in der Tat sehr viel innerhalb von XSLT verwendet, wobei dies ja auch eine automatische Suche oder Transformation über mehrere Dateien erlaubt (bspw. in oXygen; oder XML Copy Editor)
- Alternativ kann man XPath sehr gut über Python einsetzen, insbesondere mit der Library lxml / etree.
- Beispielprojekt, wo einfache XPath-Ausdrücke zur Auswertung von bibliographischen Daten in RDF (=XML) eingesetzt wurde: https://christofs.github.io/BIB18/
Relativ vs. absolut
- Frage: Gibt es Kriterien, wann ein absoluter oder relativer XPath verwendet werden sollte
- Antwort
- Ein absoluter Pfad findet nur genau die Elemente oder Attribute, die dem kompletten absoluten Pfad entsprechen
- Ein relativer Pfad findet alle Elemente oder Attribute, die dem relativen Pfad entsprechen, unabhängig davon, in welchem weiteren übergeordneten Kontext die Elemente oder Attribute auftauchen
Beispiel für relative / absolute Pfade
def find_things(bibdata):
# Absoluter Pfad
xpath = "/rdf:RDF/rdf:Description/bib:authors/rdf:Seq/rdf:li/foaf:Person/foaf:surname/text()"
# Absoluter Pfad
xpath = "/rdf:RDF/bib:Book/bib:editors/rdf:Seq/rdf:li/foaf:Person/foaf:surname/text()"
# Relativer Pfad
xpath = "//foaf:Person/foaf:surname/text()"
results = bibdata.xpath(xpath, namespaces=namespaces)
print(results)
print(len(results))
find_things(bibdata)Verbindungen der Knoten und deren Bezeichnungen
- Knotentypen vs. Achsen
Dokumentknoten und Kontextknoten
- Frage: Können Sie das mit den Dokumentknoten und Kontextknoten weiter ausführen?
- Begriffliche Klärung:
- Knoten (nodes) allgemein: Knoten sind die strukturellen Bausteine des XML-Dokuments, einschließlich Elementknoten, Attributknoten, Textknoten.
- Dokumentknoten (document node): Der Dokumentknoten repräsentiert das gesamte XML-Dokument selbst. Ausgangspunkt der Navigation im Dokument. Alle anderen Knoten sind dem Dokumentknoten untergeordnet.
- Kontextknoten (context node): Ausgangspunkt für die Ausführung / Interpretation eines XPath-Ausdrucks. Der XPath wird relativ zu diesem Kontextknoten ausgeführt. Wählt man mit einem XPath einen Teil des Dokuments aus und arbeitet mit dem Ergebnis weiter, liegt der Kontextknoten dann an der Position des Ergebnisses.
- Knoten (nodes) allgemein: Knoten sind die strukturellen Bausteine des XML-Dokuments, einschließlich Elementknoten, Attributknoten, Textknoten.
Anwendungsbeispiele zu den Pfad-Trennzeichen
- Anwendungsbeispiel zu den Pfad-Trennzeichen “/” und”::”
- Begriffsklärung
- Die “/”-Achse ermöglicht den Zugriff auf direkte Kinder eines Knotens.
- Die “//”-Achse ermöglicht die Suche über alle Nachkommen eines Knotens.
- Die “::”-Achse wird bei der ausführlichen Notation eingesetzt (und bei Tests bspw. für einen Ausgabewert wie die position:
::position())
XPath 1.0 vs. 2.0
- Frage: Warum wird oft nur XPath 1.0 eingesetzt (es gibt doch auch das leistungsfähigere XPath 2.0)
- Antwort:
- Stimmt, XPath 2.0 ist viel funktionsreicher und mächtiger
- Aber XPath ist auch wesentlich komplexer einzusetzen
- XPath funktioniert ohne vollumfänglichen XSLS-Prozessor wie Saxon (aufwändigere Installation)
- Viele Anwendungen sind für XPath 1.0 konzipiert und benötigen 2.0 nicht
- Auch in anderen X-Technologien ist XPath 2.0 noch nicht vollständig integriert
Argumente pro und contra: RegEx vs. XPath
Sitzung 7 (5. Dez. 2023):
X-Technologien – XSLT
Überblick
- Fragen zu XSLT
Anwendungsbeispiel XML zu HTML (u.a. auch: CSS)
Setup für Transformationen
- Tools
- Texteditor, bspw. Geany oder VSC / Codium
- Java JRE / OpenJDK (requirement)
- Saxon HE 11.4
- Bausteine
- XML-Dokument (
SimplifiedSAP.xml) - XSL-Transformation (
mystyle.xsl) - Java-Befehl:
java -jar saxon-he-11.4.jar -xsl:mystyle.xsl -s:SimplifiedSAP.xml -o:output.csv - Ergebnis: CSV-Datei (in diesem Fall;
output.csv)
- XML-Dokument (
Anwendungsbeispiel XML zu CSV (Konstrukte)
- Konstrukte (nach denen teils gefragt wurde, teils nicht)
<xsl:for-each select="">: Loop über alle bestimmten Elemente<xsl:sort select="">: Sortierung nach einem bestimmten Kriterium (Umstrukturierung!)<xsl:if test="">: If-Bedingung (siehe XSLT als Programmiersprache)<xsl:value-of select="">: Wähle den Element-Inhalt<xsl:text>: Füge plain text / String ein
Anwendungsbeispiel XML zu CSV (Code)
Beispiel: https://programminghistorian.org/en/lessons/transforming-xml-with-xsl
Anwendungsbeispiel XML zu SVG (Konstrukte)
- Frage: Beispiel zur Umwandlung eines XML-Dokuments in eine SVG-Datei
- Antwort: Erneut aus dem vorigen Datensatz; Beispielsweise: Wir könnten die Anzahl der “records” pro Stadt (oder pro Jahr) zählen und dann einen Barchart anlegen, der diese Anzahl visualisiert
- Es kommen wieder mehrere XSL-Konstrukten zum Einsatz (nach denen teils gefragt wurde):
<xsl:call-template name="generateBarChart"/>: Um das Ergebnis eines Templates in den HTML-Kontext einzubauen<xsl:for-each select="">: Um über alle Treffer für ein Element zu iterieren<xsl:variable name="" select="."/>: Variable anlegen, die dann nach und nach befüllt / modifiziert werden kann (Variable!)- Die Variablen
cityName,cityCountundbarHeightwerden angelegt, befüllt / berechnet und genutzt
- Knackpunkt
<xsl:for-each select="//city[not(. = preceding::city)]">- Sorgt dafür, dass ein neuer Eintrag nur begonnen wird für Städte, die noch nicht vorkamen
- Vom aktuellen Knoten aus (
.) gesehen, wird eine neue Stadt nur angelegt, wenn sie keiner (not) der preceding-siblings “city” (preceding::city) entspricht
Anwendungsbeispiel XML zu SVG (Code)
XSL(T) und Browser
- Frage: Können Sie noch ausführlicher erklären, warum XSLT mit bestimmten Browsern nicht funktioniert?
- Antwort: Seit wenigen Jahren führen Browser standard-mäßig keine lokalen XSL-Dateien mehr aus, weil das ein Sicherheitsrisiko darstellt.
Verarbeitung mehrerer Dateien
- Frage: (Automatisierte) Verarbeitung von mehreren XML Dateien mit XSLT. Beispielsweise Erstellung eines Korpus aus mehreren Werken.
- Antwort:
- Beispiel für XPath in Python
- Extraktion von Metadaten aus je 100 XML-Dateien für 12+ Sprachkorpora (ELTeC)
- Code-Beispiel: https://github.com/COST-ELTeC/Scripts/blob/master/Python/extract_metadata.py
Variablen und Parameter
- Frage: Können Sie anhand eines Beispiels erklären, was Variablen und was Parameter sind?
- Antwort:
- Beispiel, siehe oben (Barchart)
- Variablen: Werden deklariert, befüllt und dann eingesetzt
- Parameter: ähnliches Prinzip
- Unterschied: Variablen haben einen lokalen Scope (aktueller Block), Parameter einen größeren Scope (ganzes Skript)
Weitere Fragen
- Welches sind die Faktoren, die die Geschwindigkeit der XSLT-Prozessing beeinflussen?
- Wenn XSLT eine Ähnlichkeit zu CSS hat, kann es auch für die Gestaltung von Webseiten verwendet werden?
- Welche Rolle spielen Parameter bei der Wiederverwendung von Stylesheets? Können Sie das anhand eines Beispiels erklären?
- genauere Erklärung zu dem apply-templates Tag: wäre im HTML Beispiel im Screencast die Nutzung überhaupt nötig gewesen? Hätte man das body und html Tag nicht auch später im template mit match=“wein” schließen können?
- Ich würde mich über ein Beispiel zu Default Templates freuen und wann sie zu ungewolltem Output führen.
- Was ist ein Parser?
- In welchen Fällen ist eine Transformation der Dokumente ais dem XML Formet sinnvoll in der Praxis?
- Lektüre; neunte Abbildung (“Figure 9—An XML structure matched by XSLT templates”): Warum wird die Struktur der XML-Datei in dem XSL-Stylesheet nicht berücksichtigt?
- Wie funktioniert ein Serializer? Gibt es bestimmte Regeln/Anweisungen, die festlegen, wie der XML-Baum Schritt für Schritt in Tags und Text übersetzt wird?
- CSS vs. XSLT: Beispiel von CSS zur Formatierung von XML Dateien
- Wie wird XSLT in Web-Technologien angewandt?
Sitzung 8 (12. Dez. 2023):
Text Encoding Initiative (1)
Überblick
- Fragen zu TEI allgemein
- Grenzfälle der TEI-Anwendung
Entwicklung der TEI
- Frage: Die TEI gibt es seit 1987. Was waren die größten Veränderungen der TEI im Laufe der Jahre?
- Nur wenige Änderungen sind relativ punktuell gewesen
- Wechsel von SGML zu XML (mit TEI P4, 2002 und vollständig mit P5, 2007)
- Ergänzung um dokument-zentriertes / textgenetisches Edieren (um 2011)
- Viele Entwicklungen eher graduell
- Mehr Module / mehr Textsorten
- Wachsende Community / Uptake
- Internationalisierung
- Zunehmend viele Tools: oXygen, Roma, TEI Publisher, Versioning Machine, etc.
Alternativen zu TEI
- Frage: Gibt es Konkurrenz für TEI? Eventuell sogar etwas, was ganzheitliche Arbeit erleichtert und Möglichkeiten wie zum Beispiel Artefakte mit Textanteilen zu annotieren ohne verschiedene Methoden anwenden zu müssen?
- Alternativen für digitale Edition: kaum
- Außer eventuell Text als LOD / Graph
- Alternativen für andere Zwecke: definitiv
- LaTeX (wiss. Publikationen)
- Markdown (wiss. Publikationen, Webseiten)
- JSON (Korpora)
- HTML: Webseiten
- MediaWiki: Wikipedia
TEI all oder eingrenzen?
- Frage: Sollte TEI für Projekte formell eingegrenzt werden? Beispielsweise mittels eines Schemas (ROMA-Tool). Oder kann auch das ganze TEI als Schema deklariert werden, auch wenn nur ein Bruchteil davon genutzt wird?
- Man kann “tei_all.rng” für ein Projekt nutzen, das nur einen Teil von TEI verwendet
- Aber es ist keine gute Idee:
- Das Schema hilft dabei, konsistent zu kodieren (siehe WLV!)
- Das Schema dokumentiert das Datenmodell
TEI für verschiedene Textsorten
- Frage: Kann man mit TEI nicht nur literarische Texte kodieren, sondern auch Interviews? Ist das sinnvoll?
- Man kann eine Menge Textsorten mit TEI kodieren, auch Interviews
- Siehe Table of contents
- Verse, Performance Texts, Transcriptions of Speech, Dictionaries, Manuscript Descriptions, Language Corpora.
Kodierung von Text
- Frage: Muss der Text einer Quelle in TEI immer in einem
<p>oder<l>Element enthalten sein? Kann der Text auch direkt in einem<div>enthalten sein? Problem: Paragrafen sind aus einem OCR-Text nicht immer automatisch extrahierbar. - Text ist normalerweise in
<p>oder<l>enthalten, kann aber auch in<ab>enthalten sein <p>und<l>müssen immer in einem<div>oder<ab>enthalten sein- Im
<teiHeader>können eine Menge Informationen auch ohne<p>kodiert werden
Grenzfälle für TEI-Anwendung
- Ein Liedtext in einem Notenblatt
- Grabsteine mit Inschriften / Inschriften bzw. Beschriftungen
- alte Handschriften / künstlerische Elemente
- gesprochensprachliche Sprachdaten / Transkriptionen sein
- Bilddateien mit Überschrift oder Verweis
- Quellen, die keinem traditionellen Einteilung in Paragraphen / Verse folgen
- Jegliche Form nicht-standardisierter grafischer Darstellung
- Gemälde
- Partituren
- Texte in antiken Sprachen oder Sprachen ohne Standard-Alphabet (z.B. Futhark-Runen, Ägyptische Hieroglyphen)
- multimediale Inhalte: Text, Audio, haptische Elemente
- natürliche Sprache
- Geschichten
- Dokumente, die Verweise und Links beinhalten
- Videos / Videospiele
- Multimodale Untersuchungsgegenstände
- Alles, was nicht nur aus Text besteht: illustrierte Bücher
Sitzung 9 (19. Dez. 2023):
TEI und Dictionaries
Überblick
- Ihre Fragen zu TEI Lex-0
- Diskussion zum Ansatz von Lex-0
Wechsel zu TEI?
- Frage: Gibt es Projekte, die nach der Entwicklung von TEI Dictionary Standards auf TEI gewechselt haben? Wie würde so ein Wechsel funktionieren?
- Wechsel zu TEI / Lex-O
- Das Kapitel zu “Dictionaries” gibt es schon lange
- heute startet man daher direkt mit TEI (oder auch Lex-0)
- Wechsel in ein neues Kodierungs-Schema sind aber normal;
- man entwickelt dafür eine Transformations-Routine (ggfs. mit XSLT!): Mapping, Infos die wegfallen, Infos die neu erhoben werden müssen
- Wechsel zwischen TEI und Lex-0:
- beide Richtungen denkbar; Informationsverlust?
- Lex-0 auch/vor allem als Export-, Austausch- oder Analyseformat
DWDS und TEI
- Frage: Sind die Daten im DWDS-Wörterbuch im Hintergrund in TEI kodiert?
- Antwort: Das DWDS beruht auf mehreren Wörterbüchern
Kodierung mit <superEntry>, <entry>, <hom> und <sense>
Aussprache nach IPA?
- Frage: Kann man die Aussprache auch in IPA kodieren, ohne dass das Programm Schwierigkeiten macht? Es ist ja schließlich keine Standardorthographie einer Sprache.
- Antwort:
- Das ist kein Problem, weil IPA in Unicode vorhanden ist
- Beispiel: 4.5.2
Weiteres Anwendungsbeispiel: Etymologie
Quelle: jTEI
<entry xml:id="Eingang" xml:lang="de">
<form type="lemma"><orth>Eingang</orth></form>
<gramGrp><gram type="gen">m.</gram></gramGrp>
<etym>
<cit type="etymon" xml:lang="gmh">
<lang expand="Mittelhochdeutsch" norm="gmh">mhd.</lang>
<form><orth>īnganc</orth></form>
</cit>
<cit type="cognate" xml:lang="nl">
<lang expand="Neuniederländisch" norm="nl">nnl.</lang>
<form><orth>ingang</orth></form>
</cit>
<cit type="cognate" xml:lang="da">
<lang expand="Dänisch" norm="da">dän.</lang>
<form><orth>indgang</orth></form>
</cit>
<cit type="cognate" xml:lang="sv">
<lang expand="Schwedisch" norm="sv">schwed.</lang>
<form><orth>ingång</orth></form>
</cit>
<lbl>Lehnübersetzung des</lbl>
<cit type="etymon" xml:lang="la">
<lang expand="Latein" norm="la">lat.</lang>
<form><orth>introitus</orth></form>
</cit>
<note>Aus dem ‘Hineingehen’ als Handlung ist
die ‘Stelle, an der man ins Haus, in den Saal geht’
geworden, neuerdings auch die ‘Gesamtheit der
eingegangenen Geschäftssachen, Mannschaften’
usw. Vgl. <xr type="related"> <ref type="entry">Zugang</ref>.
<ref type="bibl">(Kluge, 1975) p. 159</ref></xr></note>
</etym>
</entry>TEI Lex-0 wird ständig weiter entwickelt
Quelle: MEC-TEI 2023
Diskussion zum Ansatz von Lex-0
- Ausgangsfrage: Welche Gründe könnte es dafürgeben, dass die TEI nicht grundsätzlich dem ja eigentlich einleuchtetenden Prinzip von TEI Lex-0 folgt, die Kodierung von Quellen stärker als bisher zu formalisieren und zu standardisieren?
- Argumente
- Flexibilität vs. Standardisierung
- Nur in TEI können alle Details / Spezifika abgebildet werden
- Lex-0 für Datenaustausch, Interoperabilität
- Ideal wäre: Jedes Wörterbuch-Projekt hat eine Routine für die Konversion nach Lex-0
- Weitere vereinfachte Austausch-Formate: TEI Simple, teilite, DTABf, etc.
Zitat aus den TEI Lex-0 Guidelines
To what extent can we achieve consistent encoding within a given community of practice by following the TEI Guidelines? The topic is of particular importance for lexical data if we think of the potential wealth of content we could gain from pooling together the information available in the variety of highly structured, historical and contemporary lexical resources. The encoding possibilities offered by the Dictionaries Chapter in the Guidelines are too numerous and too flexible to guarantee sufficient interoperability and a coherent model for searching, visualising or enriching multiple lexical resources. – https://dariah-eric.github.io/lexicalresources/pages/TEILex0/TEILex0.html
Sitzung 10 (9. Jan. 2024):
Music Encoding Initiative (MEI)
Fragen zur Vorbereitung
- Zu welchen Aspekten oder Themen möchten Sie gerne ein weiteres Beispiel oder eine weiterführende Erläuterung hören?
- Zur Diskussion: Welcher Kodierungsstandard (TEI, MEI oder ein anderer) erscheint ihnen für die folgenden Dokumenttypen jeweils am besten geeignet? Urkunden, Oper, Postkarte, Lehrbuch, Ausstellungskatalog.
MEI aufführen / abspielen
- Frage: Kann ein Stück, das in MEI codiert wurde, tatsächlich aufgeführt oder abgespielt werden?
- Antwort:
- Es kann aufgeführt, aber nicht abgespielt werden
- MEI ist ein Standard zur Kodierung von notierter Musik / Notentexten
- Man kann also auf der Grundlage von MEI auch wieder einen Notentext darstellen
- Ein Editor, mit dem man MEI bearbeiten und als Score darstellen kann, ist der MEI Score Editor (MEISE)
- Für Audio sind zwei Arten von Datenformaten relevant:
- MIDI: Zur Kommunikation von “musical instructions” zwischen elektronischen Instrumenten, die dann ein Audiosignal erzeugen
- MP3 (uvm.): Zur komprimierten Repräsentation eines spezifischen, phyischen Audiosignals
Musikalische Vorbildung für MEI
- Frage: Inwieweit muss man musikalisch vorgebildet sein, um mit MEI arbeiten zu können? Reicht es Noten lesen zu können?
- Antwort:
- Ich denke schon, dass man sehr gut Noten lesen können muss, um einen Notentext korrekt in MEI übertragen zu können
- Außerdem braucht man natürlich ausreichend gute MEI-Kenntnisse
Einfaches vs. kompliziertes Stück in MEI
- Frage: Können Sie eventuell ein sehr kompliziertes Stück im Vergleich zu einem sehr simplen Musikstück in MEI kodiert zeigen und die Gemeinsamkeiten und Unterschiede erklären?
- Antwort:
- Beispiele für simple Stücke oder kurze MEI-Snippets findet man am besten in der MEI-Dokumentation
- Ein Beispiel für ein (etwas komplexeres) Stück finden Sie hier:
- Notentext – PDF
- MEI-Kodierung – MEI
MEI und weitere Notensysteme
- Frage: Ist es vorgesehen MEI um weitere Notensysteme zu erweitern?
- Anwort:
- Neben der “Common (western) music notation” gibt es bereits:
- Neume Notation (9-12. Jhdt.)
- Mensural-Notation (13.-15. Jhdt.)
- Tabulatur (u.a. für Gitarre)
Auszeichnung von Musik ohne Noten
- Frage: Wie zeichnet man Musikstücke, zu denen keine Noten verfügbar sind? Zum Beispiel ein Bard-Song aus der Undergroundkultur, von der es mehrere Varianten gibt und von der man weder Noten, noch Akkorden findet, nur Aufnahmen (nicht immer in guter Qualität) und Textvariationen im besten Fall.
- Antwort
- Man kann nur Musik auszeichnen, für die es Notentexte gibt
- Genauer: mit MEI könnte man eine Rekonstruktion der Noten dokumentieren, die man auf Grundlage von Aufnahmen erstellt hat.
MEI und TEI
- Frage: Ist es ratsam, MEI in Verbindung mit TEI zu verwenden, insbesondere wenn man beabsichtigt, auch die Lyrics eines Musikstücks zu markieren?
- Anwort: Ja!
- Man kann ja mehrere Namespaces in einer Kodierung verbinden
- Siehe auch: MEI: Integration
- Es gibt eine (derzeit wohl inaktive) “Music SIG” in der TEI
Music Information Retrieval (1)
- Frage: Mehr darüber, wie Music Information Retrieval funktioniert und welche Tools dafür eingesetzt werden.
- Analyse-Ebenen: Audio, Bild, symbolische Notation, Metadaten / Kontex
- Einige Arbeitsbereiche:
- Feature-Extraktion (aus Audio): Akkorde, Melodie, Tempo, etc.
- Klassifikation: nach Epoche, Genre, Komponist, etc.
- Recommender Systems
- Instrument-Erkennung, Signal-Trennung
- Optical Music Recognition
- Generative Ansätze / Musik generieren
- Kreativer Einsatz von Algorithmen und ML
Music Information Retrieval (2): Ressourcen
- Wikipedia: “Music Information Retrieval”
- Kurzer Überblick: Burgoyne et al.: “Music Information Retrieval”, in: A New Companion to Digital Humanities. (siehe StudIP)
- International Society for Music Information Retrieval – ISMIR
- Buchempfehlung: Meinard Müller, Fundamentals of Music Processing, 2015.
Weiterführend: Beispiel für ein Projekt der quantitativen Musikgeschichte
- Christof Weiß, Meinard Müller: “Studying Tonal Evolution of Western Choral Music: A Corpus-Based Strategy”, Computational Humanities Research 2023. PDF (Best Paper Award!)
- Klassische Musik, ca. 1600-2000
- Datengrundlage: Audio-Korpus mit 5773 Aufnahmen (kein MEI!)
- Komplexität der Tonalität / Tonklassen messen (zentrale methodische Herausforderung)
- Entwicklung dieser Komplexität über die Zeit
- Differenzierungen: nach lokal/global, dur/moll, instrumental/vokal
- Siehe auch: Kurzvorstellung von Christof Weiß’ Arbeit: “Das ist Haydn. Ganz sicher!” (Youtube)
Komponisten / Korpus
Tonale Komplexität im Überblick
Zur Diskussion: geeignete Kodierungsstandards
- Urkunden
- Oper
- Postkarte
- Lehrbuch
- Ausstellungskatalog
Zur Diskussion: geeignete Kodierungsstandards (Antworten)
- Urkunden: TEI (oder speziell: CEI)
- Oper: MEI (auch für enthaltenen Text!)
- Postkarte: TEI gut geeignet
- Lehrbuch: Markdown / LaTeX / TEI + SVG => PDF, EPUB
- Ausstellungskatalog: Markdown / LaTex / TEI + PNG/TIFF => PDF, EPUB
Weitere Nennungen
- METS + ALTO
- MARC
- RelaxNG
Sitzung vom 16.1.2023: SVG
Überblick
- Gibt es Aspekte von SVG, zu denen Sie Rückfragen haben oder ein konkretes Beispiel sehen möchten?
- Im Screencast werden am Ende einige Vorteile von SVG genannt, aber was sind Ihrer Meinung nach Nachteile von SVG (gegenüber pixelbasierten Bildformaten wie PNG oder JPEG)?
SVG für verschiedene Plot-Typen
- Frage: Kann man mit SVG alle Typen von Grafiken zeichnen, die wir bei der Informationsvisualisierung kennengelernt haben? Wie üblich ist es, dass man Grafiken in SVG zeichnet, oder macht das nur bei wenig komplizierten Grafiken Sinn?
- Antwort
- Ja, im Prinzip kann man alle üblichen Visualisierungsformen in SVG erstellen
- Praktisch ist das aber nur, wenn es eine Library gibt, die das unterstützt
- Ein Beispiel ist pygal – sehr viele Chart Types!
- Auch Seaborn, eine andere sehr gute Visualisierungs-Library, kann SVG exportieren
- Das macht daher bei einfachen und komplexen Grafiken gleichermaßen Sinn
Interaktives, komplexes Beispiel
- Frage:
- Können Sie noch ein Beispiel zeigen, in dem SVG für eine interaktive Darstellung genutzt wird?
- Könnten Sie einmal ein möglichst komplexes Beispiel einer SVG-Grafik zeigen, damit wir uns vorstellen können, was mit SVG alles möglich ist?
- Antwort:
- Gerne, hier mit Pygal
- Als nächstes: Python-Code, Visualisierung, SVG Code
SVG-Plot mit Pygal erstellen
import pygal as pg
import seaborn as sns
import pandas as pd
import numpy as np
from pygal.style import DarkColorizedStyle
def create_plot():
titanic = sns.load_dataset("titanic")
data = pd.pivot_table(
titanic,
values="survived",
index="sex",
columns="class")
plot = pg.Bar(
legend_at_bottom=True,
legend_at_bottom_columns=2,
style=DarkColorizedStyle,
range=(0, 100))
plot.title = "Titanic data: Survival rate by sex and class"
plot.x_labels = data.columns
plot.add(
"Male",
[np.round((item*100),1) for item in list(data.loc["male",:])])
plot.add(
"Female",
[np.round((item*100),1) for item in list(data.loc["female",:])])
plot.render_to_file("titanic.svg")
create_plot()Ergebnis (Image)
Ergebnis (SVG / XML)
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="chart-afa7062c-9e4a-4de3-a692-f3e73596098e" class="pygal-chart" viewBox="0 0 800 600">
<!--Generated with pygal 3.0.4 (etree) ©Kozea 2012-2016 on 2024-01-15--><!--http://pygal.org--><!--http://github.com/Kozea/pygal-->
<defs>
<style type="text/css"> #chart-afa7062c-9e4a-4de3-a692-f3e73596098e {
-webkit-user-select: none;
-webkit-font-smoothing: antialiased;
font-family: FreeSans, Consolas, "Liberation Mono", Menlo, Courier, monospace
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .title {
font-family: FreeSans, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 16px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .legends .legend text {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 14px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis text {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 10px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis text.major {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 10px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .text-overlay text.value {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 16px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .text-overlay text.label {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 10px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 14px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e text.no_data {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 64px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e {
background-color: #2c2230
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e path,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e rect,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e circle {
-webkit-transition: 250ms ease-in;
-moz-transition: 250ms ease-in;
transition: 250ms ease-in
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .graph >
.background {
fill: #2c2230
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .plot >
.background {
fill: #3f3145
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .graph {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e text.no_data {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .title {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .legends .legend text {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .legends .legend:hover text {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis .line {
stroke: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis .guide.line {
stroke: rgba(255, 255, 255, 0.5)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis .major.line {
stroke: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis text.major {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.y .guides:hover .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .line-graph .axis.x .guides:hover .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .stackedline-graph .axis.x .guides:hover .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .xy-graph .axis.x .guides:hover .guide.line {
stroke: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis .guides:hover text {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .reactive {
fill-opacity: .2;
stroke-opacity: .8;
stroke-width: 1
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .ci {
stroke: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .reactive.active,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .active .reactive {
fill-opacity: .7;
stroke-opacity: .9;
stroke-width: 4
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .ci .reactive.active {
stroke-width: 1.5
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .series text {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip rect {
fill: #3f3145;
stroke: rgba(255, 255, 255, 0.9);
-webkit-transition: opacity 250ms ease-in;
-moz-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip .label {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip .label {
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip .legend {
font-size: 0.8em;
fill: rgba(255, 255, 255, 0.5)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip .x_label {
font-size: 0.6em;
fill: rgba(255, 255, 255, 0.9)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip .xlink {
font-size: 0.5em;
text-decoration: underline
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip .value {
font-size: 1.5em
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .bound {
font-size: 0.5em
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .max-value {
font-size: 0.75em;
fill: rgba(255, 255, 255, 0.5)
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .map-element {
fill: #3f3145;
stroke: rgba(255, 255, 255, 0.5) !important
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .map-element .reactive {
fill-opacity: inherit;
stroke-opacity: inherit
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .color-0,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .color-0 a:visited {
stroke: #c900fe;
fill: #c900fe
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .color-1,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .color-1 a:visited {
stroke: #01b8fe;
fill: #01b8fe
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .text-overlay .color-0 text {
fill: black
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .text-overlay .color-1 text {
fill: black
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e text.no_data {
text-anchor: middle
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .guide.line {
fill: none
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .centered {
text-anchor: middle
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .title {
text-anchor: middle
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .legends .legend text {
fill-opacity: 1
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.x text {
text-anchor: middle
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.x:not(.web) text[transform] {
text-anchor: start
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.x:not(.web) text[transform].backwards {
text-anchor: end
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.y text {
text-anchor: end
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.y text[transform].backwards {
text-anchor: start
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.y2 text {
text-anchor: start
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.y2 text[transform].backwards {
text-anchor: end
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis .guide.line {
stroke-dasharray: 4, 4;
stroke: black
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis .major.guide.line {
stroke-dasharray: 6, 6;
stroke: black
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .horizontal .axis.y .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .horizontal .axis.y2 .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .vertical .axis.x .guide.line {
opacity: 0
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .horizontal .axis.always_show .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .vertical .axis.always_show .guide.line {
opacity: 1 !important
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.y .guides:hover .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.y2 .guides:hover .guide.line,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis.x .guides:hover .guide.line {
opacity: 1
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .axis .guides:hover text {
opacity: 1
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .nofill {
fill: none
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .subtle-fill {
fill-opacity: .2
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .dot {
stroke-width: 1px;
fill-opacity: 1;
stroke-opacity: 1
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .dot.active {
stroke-width: 5px
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .dot.negative {
fill: transparent
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e text,
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e tspan {
stroke: none !important
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .series text.active {
opacity: 1
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip rect {
fill-opacity: .95;
stroke-width: .5
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .tooltip text {
fill-opacity: 1
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .showable {
visibility: hidden
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .showable.shown {
visibility: visible
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .gauge-background {
fill: rgba(229, 229, 229, 1);
stroke: none
}
#chart-afa7062c-9e4a-4de3-a692-f3e73596098e .bg-lines {
stroke: #2c2230;
stroke-width: 2px
}
</style>
<script type="text/javascript">
window.pygal = window.pygal || {};
window.pygal.config = window.pygal.config || {};
window.pygal.config['afa7062c-9e4a-4de3-a692-f3e73596098e'] = {
"allow_interruptions": false,
"box_mode": "extremes",
"classes": ["pygal-chart"],
"css": [
"file://style.css", "file://graph.css"
],
"defs": [],
"disable_xml_declaration": false,
"dots_size": 2.5,
"dynamic_print_values": false,
"explicit_size": false,
"fill": false,
"force_uri_protocol": "https",
"formatter": null,
"half_pie": false,
"height": 600,
"include_x_axis": false,
"inner_radius": 0,
"interpolate": null,
"interpolation_parameters": {},
"interpolation_precision": 250,
"inverse_y_axis": false,
"js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"],
"legend_at_bottom": true,
"legend_at_bottom_columns": 2,
"legend_box_size": 12,
"logarithmic": false,
"margin": 20,
"margin_bottom": null,
"margin_left": null,
"margin_right": null,
"margin_top": null,
"max_scale": 16,
"min_scale": 4,
"missing_value_fill_truncation": "x",
"no_data_text": "No data",
"no_prefix": false,
"order_min": null,
"pretty_print": false,
"print_labels": false,
"print_values": false,
"print_values_position": "center",
"print_zeroes": true,
"range": [
0, 100
],
"rounded_bars": null,
"secondary_range": null,
"show_dots": true,
"show_legend": true,
"show_minor_x_labels": true,
"show_minor_y_labels": true,
"show_only_major_dots": false,
"show_x_guides": false,
"show_x_labels": true,
"show_y_guides": true,
"show_y_labels": true,
"spacing": 10,
"stack_from_top": false,
"strict": false,
"stroke": true,
"stroke_style": null,
"style": {
"background": "#2c2230",
"ci_colors": [],
"colors": [
"#c900fe",
"#01b8fe",
"#59f500",
"#ff00e4",
"#f9fa00",
"#780098",
"#0181b2",
"#348f00",
"#b200a0",
"#feff61"
],
"dot_opacity": "1",
"font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"foreground": "rgba(255, 255, 255, 0.9)",
"foreground_strong": "rgba(255, 255, 255, 0.9)",
"foreground_subtle": "rgba(255, 255 , 255, 0.5)",
"guide_stroke_color": "black",
"guide_stroke_dasharray": "4,4",
"label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"label_font_size": 10,
"legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"legend_font_size": 14,
"major_guide_stroke_color": "black",
"major_guide_stroke_dasharray": "6,6",
"major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"major_label_font_size": 10,
"no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"no_data_font_size": 64,
"opacity": ".2",
"opacity_hover": ".7",
"plot_background": "#3f3145",
"stroke_opacity": ".8",
"stroke_opacity_hover": ".9",
"stroke_width": "1",
"stroke_width_hover": "4",
"title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"title_font_size": 16,
"tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"tooltip_font_size": 14,
"transition": "250ms ease-in",
"value_background": "rgba(229, 229, 229, 1)",
"value_colors": [],
"value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"value_font_size": 16,
"value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
"value_label_font_size": 10
},
"title": "Titanic data: Survival rate by sex and class",
"tooltip_border_radius": 0,
"tooltip_fancy_mode": true,
"truncate_label": null,
"truncate_legend": null,
"width": 800,
"x_label_rotation": 0,
"x_labels": [
"First", "Second", "Third"
],
"x_labels_major": null,
"x_labels_major_count": null,
"x_labels_major_every": null,
"x_title": null,
"xrange": null,
"y_label_rotation": 0,
"y_labels": null,
"y_labels_major": null,
"y_labels_major_count": null,
"y_labels_major_every": null,
"y_title": null,
"zero": 0,
"legends": ["Male", "Female"]
}
</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"/></defs>
<title>Titanic data: Survival rate by sex and class</title>
<g class="graph bar-graph vertical"><rect x="0" y="0" width="800" height="600" class="background"/><g transform="translate(48, 46)" class="plot"><rect x="0" y="0" width="732.0" height="490.0" class="background"/><g class="axis y always_show">
<g class="guides"><path d="M0.000000 480.576923 h732.000000" class="axis major line"/><text x="-5" y="484.0769230769231" class="major">0</text>
<title>0</title>
</g>
<g class="guides"><path d="M0.000000 433.461538 h732.000000" class="guide line"/><text x="-5" y="436.96153846153845" class="">10</text>
<title>10</title>
</g>
<g class="guides"><path d="M0.000000 386.346154 h732.000000" class="guide line"/><text x="-5" y="389.8461538461538" class="">20</text>
<title>20</title>
</g>
<g class="guides"><path d="M0.000000 339.230769 h732.000000" class="guide line"/><text x="-5" y="342.7307692307692" class="">30</text>
<title>30</title>
</g>
<g class="guides"><path d="M0.000000 292.115385 h732.000000" class="guide line"/><text x="-5" y="295.61538461538464" class="">40</text>
<title>40</title>
</g>
<g class="guides"><path d="M0.000000 245.000000 h732.000000" class="major guide line"/><text x="-5" y="248.5" class="major">50</text>
<title>50</title>
</g>
<g class="guides"><path d="M0.000000 197.884615 h732.000000" class="guide line"/><text x="-5" y="201.38461538461536" class="">60</text>
<title>60</title>
</g>
<g class="guides"><path d="M0.000000 150.769231 h732.000000" class="guide line"/><text x="-5" y="154.26923076923077" class="">70</text>
<title>70</title>
</g>
<g class="guides"><path d="M0.000000 103.653846 h732.000000" class="guide line"/><text x="-5" y="107.15384615384613" class="">80</text>
<title>80</title>
</g>
<g class="guides"><path d="M0.000000 56.538462 h732.000000" class="guide line"/><text x="-5" y="60.03846153846155" class="">90</text>
<title>90</title>
</g>
<g class="guides"><path d="M0.000000 9.423077 h732.000000" class="major guide line"/><text x="-5" y="12.923076923076906" class="major">100</text>
<title>100</title>
</g>
</g>
<g class="axis x"><path d="M0.000000 0.000000 v490.000000" class="line"/><g class="guides"><path d="M131.384615 0.000000 v490.000000" class="guide line"/><text x="131.38461538461536" y="505.0" class="">First</text>
</g>
<g class="guides"><path d="M366.000000 0.000000 v490.000000" class="guide line"/><text x="366.0" y="505.0" class="">Second</text>
</g>
<g class="guides"><path d="M600.615385 0.000000 v490.000000" class="guide line"/><text x="600.6153846153845" y="505.0" class="">Third</text>
</g>
</g>
<g class="series serie-0 color-0">
<g class="bars">
<g class="bar"><rect x="34.347692307692306" y="306.7211538461538" rx="0" ry="0" width="90.84307692307692" height="173.85576923076928" class="rect reactive tooltip-trigger"/><desc class="value">36.9</desc>
<desc class="x centered">79.76923076923077</desc>
<desc class="y centered">393.64903846153845</desc>
<desc class="x_label">First</desc>
</g>
<g class="bar"><rect x="268.9630769230769" y="406.6057692307692" rx="0" ry="0" width="90.84307692307692" height="73.97115384615387" class="rect reactive tooltip-trigger"/><desc class="value">15.7</desc>
<desc class="x centered">314.38461538461536</desc>
<desc class="y centered">443.5913461538462</desc>
<desc class="x_label">Second</desc>
</g>
<g class="bar"><rect x="503.5784615384615" y="416.9711538461538" rx="0" ry="0" width="90.84307692307692" height="63.60576923076928" class="rect reactive tooltip-trigger"/><desc class="value">13.5</desc>
<desc class="x centered">549.0</desc>
<desc class="y centered">448.77403846153845</desc>
<desc class="x_label">Third</desc>
</g>
</g>
</g>
<g class="series serie-1 color-1">
<g class="bars">
<g class="bar"><rect x="137.57846153846154" y="24.5" rx="0" ry="0" width="90.84307692307692" height="456.0769230769231" class="rect reactive tooltip-trigger"/><desc class="value">96.8</desc>
<desc class="x centered">183.0</desc>
<desc class="y centered">252.53846153846155</desc>
<desc class="x_label">First</desc>
</g>
<g class="bar"><rect x="372.19384615384615" y="46.644230769230774" rx="0" ry="0" width="90.84307692307692" height="433.9326923076923" class="rect reactive tooltip-trigger"/><desc class="value">92.1</desc>
<desc class="x centered">417.61538461538464</desc>
<desc class="y centered">263.6105769230769</desc>
<desc class="x_label">Second</desc>
</g>
<g class="bar"><rect x="606.8092307692307" y="245.0" rx="0" ry="0" width="90.84307692307692" height="235.5769230769231" class="rect reactive tooltip-trigger"/><desc class="value">50</desc>
<desc class="x centered">652.2307692307692</desc>
<desc class="y centered">362.78846153846155</desc>
<desc class="x_label">Third</desc>
</g>
</g>
</g>
</g>
<g class="titles">
<text x="400.0" y="26" class="title plot_title">Titanic data: Survival rate by sex and class</text>
</g>
<g transform="translate(48, 46)" class="plot overlay"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/></g>
<g transform="translate(48, 46)" class="plot text-overlay"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/></g>
<g transform="translate(48, 46)" class="plot tooltip-overlay">
<g transform="translate(0 0)" style="opacity: 0" class="tooltip"><rect rx="0" ry="0" width="0" height="0" class="tooltip-box"/><g class="text"/></g>
</g>
<g transform="translate(58, 566)" class="legends">
<g id="activate-serie-0" class="legend reactive activate-serie"><rect x="0.0" y="1.0" width="12" height="12" class="color-0 reactive"/><text x="17.0" y="11.2">Male</text>
</g>
<g id="activate-serie-1" class="legend reactive activate-serie"><rect x="366.0" y="1.0" width="12" height="12" class="color-1 reactive"/><text x="383.0" y="11.2">Female</text>
</g>
</g>
</g>
</svg>Viewport und Viewbox
- Frage: Wie funktioniert das mit Viewport und Viewbox noch einmal?
- Antwort:
- Der Viewport bestimmt die Größe der Fläche für die Abbildung
- Die Viewbox bestimmt die Position und den Zoom des Bildelements im Viewport
- Gutes Tutorial: SVG Scaling Made Simple
- Beispiel: “Bird Cage”
Frage
- Wenn sich SVG innerhalb von HTML-Code oder generell mittels Python-Code erstellen lässt, wie sieht es mit der Akzeptanz und Anwendung in der Forschung aus? Greift man mittlerweile stärker auf das SVG-Format als PNG o.a. zurück, da dessen Eigenschaften “ideal” sind, um Ergebnisse darzustellen?
Ursprünge von SVG
- Frage: Warum wurde SVG entwickelt und von wem?
- Antwort:
- Bedarf für ein vektor-basiertes Bildformat, das Interaktion und Animation ermöglicht
- Vorteile: Skalierbarkeit, geringer Speicherbedarf, XML-basiert
- Vom W3C (genauer: der SVG Working Group des W3C) seit 1999 entwickelt
- Wichtigster Entwickler: Chris Lilley (der auch PNG entwickelt hat, ein pixelbasiertes Format!)
Retrodigitalisierung von Abbildungen
- Frage: Zeichnet man mit SVG schon bestehende grafische Elemente aus wie z.B. einfarbige Illustrationen in alten Büchern? Wenn ja, wie kann ich mir das vorstellen?
- Antwort:
- Soweit ich weiß, wird das nicht gemacht.
- SVG setzt eine abstrakte Modellierung einer Grafik voraus
- Bei der Retrodigitalisierung von Grafiken möchte man den historischen Aspekt und die Details nicht aufheben
- Es gibt Konversions-Tools von Pixelformaten zu Vektor-Formaten; das funktioniert aber m.W. nicht sehr gut
Nachteile von SVG
- Nicht alles lässt sich gut mit SVG darstellen - für die Darstellung von komplexen Strukturen wie z.B. bei Fotos / fotorealistischen Bildern mit Farbverläufen oder Schattierungen sind pixelbasierte Formate wie PNG oder JPEG geeignet.
- Komplexere Motive brauchen auch mehr Speicherplatz.
- SVG ist nicht mit allen / älteren Browsern kompatibel.
- Für die Erstellung werden XML-Kenntnisse benötigt.
- Manche Anwendungen unterstützen SVG nicht, da es nicht so weit verbreitet ist wie z.B. PNG; bwps. WordPress.
- Dateigröße: SVG-Dateien können bei komplexen Grafiken oder detaillierten Illustrationen größer sein als ihre pixelbasierten Gegenstücke.
- Können nicht mit Photoshop bearbeitet werden)
- Wenige GUI-Editoren vorhanden und erstellen mit Code erfordert Kenntnisse von XML/CSS (vgl. Photoshop und andere Bildbearbeitungsprogramme für JPEG-Bilder)
- SVG-Tutorial von SelfHTML: Canvas ist besser geeignet für schnelle Spiele als SVG, weil es schneller rendert
- SVG Dateien sind nur in textueller Form editierbar (schwer für Anfänger);
Sitzung 11 (23. Jan. 2024):
Markdown
Überblick
- Fragen zu Markdown
- Diskussionsfrage
- Kleine Übung zu Markdown in VS Code / VSCodium
Fragen zu Markdown
- Ist es möglich in Markdown selbst beispielsweise Diagramme zu erstellen, wie man es beispielsweise bei Word kann? => Mermaid und (dann aber extern) SVG.
- Mir erschließen sich die Vorteile von Markdown, abgesehen von der Transformation in HTML, ehrlicherweise nicht. Können sie ein Beispiel aus dem wissenschaftlichen Arbeiten nennen, in dem Markdown das bevorzugte Mittel ist? => Methods, BIB18, Auszeichnungssprachen, JDH: ipynb, allgemein Gitlab Wiki, …
- Gibt es Möglichkeiten, sich bereits im Schreibprozess eine Markdown-Preview mit Seitenzahlen (für A4-Formatierungen und mit entsprechend eingestellten Seitenrändern & co.) anzeigen zu lassen? => Ja, wenn man in Quarto arbeitet.
- Was genau heißt es, dass es verschiedene Markdown Dialekte gibt? Neigt man dazu, vorzugsweise im “originalen Markdown”-Stil zu schreiben und bei Bedarf auf Elemente aus anderen Dialekten zurückzugreifen? Oder verfügen diese Dialekte über eine vollständige Markdown-Syntax? => Jeder “Dialekt” ist vollständig mit Zusatzfunktionen (bspw. Überarbeitungs-Markup, Issues, etc). Siehe Wikipedia.
- Wenn man als Anfänger mit Markdown arbeitet will, sollte man sofort über Quarto einsteigen? => Auch Online-Editoren sind geeignet, bspw. Dillinger.
- Die Erstellung von Tabellen erscheint für kleine noch tragbar, für größere Tabellen kann die Gestaltung (vor allem für einen Laien) zeitintensiv werden. Gibt es Alternativen, die mich Zeit sparen lassen und Tabellen schneller gestalten und/oder sogar importieren lassen? => Markdown Table Generator
- Können Sie nochmal auf die Erstellung von PDF eingehen? Dies kann sicherlich hilfreich sein, wenn eine Hausarbeit mit Markdown umgesetzt wurde. => Dillinger: Export as PDF; Quarto:
quarto render; pandoc:pandoc meintext.md -o meintext.pdf - Kann man Schriftarten von Google Fonts einbinden? => In Quarto kann man viele Fonts einbinden, das läuft über LaTeX; Dokumentation
Diskussionsfrage: Pro/Contra Hausarbeit mit Markdown
Pro-Argumente
- Gut lesbar
- Funktioniert auf verschiedenen Editoren und Betriebssystemen: plattformunabhängig.
- Ist nicht durch Abonnements eingeschränkt
- Versionierung mithilfe von Git -> Zusammenarbeit einfacher möglich, Änderungen können nachverfolgt werden
- Kann einfach in verschiedene Formate übertragen werden (z.B. HTML)
- Die Konvertierung ist relativ einfach. / Export in viele verschiedene Formate möglich / Markdown kann in Kombination mit pandoc oder Quarto verwendet werden, um Dokumente in verschiedenen Formaten wie HTML, PDF, DOCX und mehr zu exportieren.
- Begrenzte Formatierungsoptionen bedeuten auch, dass der Fokus beim Schreiben bleibt.
- Im Vergleich zu Word oder anderen Editoren ist das Einbinden von Bildern und Tabellen aufwändiger.
- Inhalte können teilweise automatisch zusammengesetzt werden (großer Vorteil für technical writing)
- Möglichkeit Code einzubinden (RMarkdown, Quarto: .ipyn files)
- Syntax ist einfacher und lesbarer als bei LaTex und deswegen schneller geschrieben
- Syntax ist schneller als das Arbeiten mit der graphischen Oberfläche bei Word
- Einbinden von Bildern, Diagrammen, Grafiken möglich; Plugin für Barcharts und Plots vorhanden (kann mit LaTex mithalten, wenn nichts zu Kompliziertes nötig ist)
- Einfachheit: Markdown ist eine einfache und intuitive Sprache, die es Benutzern ermöglicht, schnell und einfach Texte zu formatieren.
- Markdown-Dateien, als reine Text-Dateien, können auf allen Plattformen geöffnet und bearbeitet werden
- Kleinere Dateigröße im Vergleich zu Word-Dokumenten
- Wenn ich sie an einer Tagung präsentieren oder veröffentlichen werde, dann ist das schon eine gute Vorarbeit
- Wenn man eine wissenschaftliche Karriere anstrebt, ist diese Fähigkeit von Vorteil für kollektive Veröffentlichungen, die spätestens bei der Promotion anfangen
- Bei nicht megakomplexen Hausarbeiten hat Markdown alles, was man braucht
- Mit Markdown kann man leicht eine übersichtliche und einheitliche Formatierung erzielen.
- Blockzitate können unkompliziert eingefügt werden.
- Programmiercode kann in Form von Code-Listings mit auf die Sprache abgestimmter Formatierung übersichtlich eingefügt werden.
- Es können Cross-References (z.B. zu Entitäten wie Bildern oder Tabellen) eingefügt werden, was Leser*innen der Arbeit erleichtern kann, durch das Dokument zu navigieren.
- Falls man für die Hausarbeit Visualisierungen in SVG angefertigt haben sollte, kann man diese direkt einbinden.
Contra-Argumente
- Schlechte bzw. keine Möglichkeit für Fußnoten
- Word ist gewohnter und intuitiver als die Markdown Syntax / Umgang mit Markdown muss erst erlernt werden und der Fokus richtet sich somit weg vom Inhalt
- Markdown ist weniger frei in der visuellen Gestaltung und dem Layout (je nach Dozent gibt es verschiedene Anforderungen für die Formatierung der Hausarbeit) / Strenge formale Vorgaben zur Hausarbeit eventuell schwieriger umzusetzen
- Auch wenn nur einfache Codierungen nötig sind, könnte es als schwieriger/aufwendiger empfunden werden, als wenn man ein Worddokument anlegt. Markdown benötigt Einarbeitung
- Während sich bspw. mit Word i.d.R. bereits jeder auskennt, müssen die Markdown-Syntax, pandoc & co. ggf. erst noch erlernt werden, um damit vernünftig an Hausarbeiten schreiben zu können.
- *Außerdem ist es schwieriger, die Arbeit von jemandem korrekturlesen zu lassen. Die Kommentar- und „Änderungen nachvollziehen“-Funktion in Word finde ich persönlich dafür schon praktisch.
- Ich bin mir nicht sicher, ob man im Schreibprozess gut und unkompliziert überblicken kann, wie viele Seiten man bereits geschrieben hat und wie viel Platz man noch hat (oder gibt es hier Möglichkeiten?)
- Die endgültige Seitenzahl wird glaube ich erst beim Umwandeln des Dokuments in das gewünschte Outputformat wie z.B. PDF generiert.
- Gerade wenn Bilder in den Fließtext eingebunden sind, kann ich mir vorstellen, dass es nochmal schwieriger ist, da den Überblick zu behalten.
- Die Mischung aus verschiedenen Sprachen könnte es eventuell etwas unübersichtlich machen.
- Bei sehr spezifischen Layoutvorgaben wird es wahrscheinlich schwer, alles einzuhalten.
- Keine automatische Verwaltung der Bibliografie
- Formatierung nur begrenzt möglich / Das Layout kann nicht, wie bei Word, direkt gesteuert werden
- Weniger verbreitet, könnte auf Skepsis stoßen
- Ich kann mir vorstellen, dass das Verfassen einer Hausarbeit in Markdown zunächst zeitaufwendig sein kann, besonders wenn man gerade erst damit vertraut wird. Allerdings könnte ich mir ebenso gut vorstellen, dass mit ausreichender Übung die Geschwindigkeit vergleichbar mit der Verwendung von Word werden könnte.
- Latex bietet ähnliche Funktionalitäten und ist weiter verbreitet. Die Einbindung von Formeln muss sowieso über Latex erfolgen. Komplexe Formeln können nicht wiedergegeben werden
- Wird weniger verwendet, daher vermutlich weniger Hilfe/Communities im Internet bei Problemen
- Overleaf zeigt mit einem Click das gerenderte PDF an, Word zeigt permanent das Dokument, bei Markdown muss es jedes Mal mit pandoc erstellt werden
- Komplexe Dokumente lassen sich damit nicht erstellen.
- Lernkurve: Ein Laie, der die Verwendung von Word oder Overleaf / LaTeX gewöhnt ist und mit Markdown beginnt, muss dessen Syntax aufnehmen und von Anfang an lernen.
- Kompatibilitätsprobleme: Es kann zu Probleme beim Teilen der Ausarbeitung mit Personen kommen, die z.B. Word verwenden.
- Markdown hat keine WYSIWYG-Ansicht
- Word ist doch einfacher zu stylen, als Markdown, wenn es um eine einfache Hausarbeit geht
- Wenn man auf Regelstudienzeit studiert, ist es in den Ferien nicht realistisch, 2 qualitativ gute Hausarbeiten zu schreiben UND vernünftig sich mit Pandoc auseinanderzusetzen, sodass die Hausarbeit einheitlich und gut gestyled aussieht
Übung: Aufgabe
Erstellen Sie eine markdown-Datei, die folgende Kriterien berücksichtigt:
- Ein Kommentar oder ein Programmiercode wird als solcher eingefügt
- Das Dokument enthält eine Tabelle
- Mithilfe von Zotero soll mindestens eine bibliographische Angabe im Dokument vorliegen
Hinsichtlich des Inhalts der Datei können Sie das Rezeptbeispiel zu Beginn des Semesters wieder aufgreifen, einen Programmiercode aus dem Internet dokumentieren bzw. kommentieren, einen Abschnitt/ein Kapitel einer Hausarbeit in Markdown schreiben oder ein anderes, für Sie interessantes Thema frei wählen.
Hinweis: In VS Code lässt sich mit der Extension „Markdown Preview Enhanced“ über über den Shortcut strg+shift+v ein Preview-Fenster öffnen.
Sitzung 12 (30. Jan. 2024)
JSON
Überblick
- Einführung in JSON
- Praxis-Beispiel: HathiTrust Research Center “Extracted Features”
Grundlagen von JSON
- JSON = JavaScript Object Notation
- Grundlegend: ein Format, das auf Paaren von “key” und “value” basiert
- Basis-Syntax:
{key : value} - Kann verschachtelt werden: eine
valuebesteht wieder aus einem key-value-Paar value: String, Zahl, bool’scher Wert, Liste, Objekt, “null”
Hintergrundinfos
- Gibt es seit etwa dem Jahr 2000
- Ursprünglich für JavaScript entwickelt, heute aber sprach-unabhängig
- Wäre fast “JSML (JavaScript Markup Language)” genannt worden
Einfaches Beispiel
Etwas komplexeres Beispiel
{
"first_name": "John",
"last_name": "Smith",
"is_alive": true,
"age": 27,
"address": {
"street_address": "21 2nd Street",
"city": "New York",
"state": "NY",
"postal_code": "10021-3100"
},
"phone_numbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
"number": "646 555-4567"
}
],
"children": [
"Catherine",
"Thomas",
"Trevor"
],
"spouse": null
}Vergleich mit XML
- Ähnlichkeiten
- Beide sind sprach- und plattform-unabhängig
- Beide sind hierarchisch organisiert
- Beide können Text und Daten kodieren
- Beide definieren eine Syntax ohne eigene Semantik
- In vielen Fällen kann ein XML-Dokument in JSON transformiert werden
- Beide können als Transfer-Formate eingesetzt werden
- Unterschiede
- XML ist durch das Prinzip von Element, Attributen und Werten ausdrucksstärker (m.E.)
- XML kann viel präziser auf Wohlgeformtheit und Validität geprüft werden
- JSON ist kompakter und kann schneller geladen werden
- “JSON Is Simple, and XML Is Powerful”
Anwendungsgebiete
- Allgemein
- Austausch-Format fürs Web
- Viele APIs liefern die Ergebnisse einer Anfrage als JSON zurück
- Beispiele aus den Digital Humanities
- Die Schnittstellen (APIs) von Bibliotheken und Museen liefern oft JSON
- Inzwischen gibt es zunehmend linguistisch annotierte Korpora in JSON (ansonsten vor allem tabular (CSV/TSV), gelegentlich in XML oder XMI)
- Das HathiTrust Research Center liefert seine “Extracted Features” als JSON
- Das Kollationierungs-Tool “CollateX” erwartet als Input die Texte in JSON
Ressourcen
- Abigail Walker: “Getting Data for Digital Humanities with APIs: A Gentle Introduction”, 2019. URL: https://studentwork.prattsi.org/dh/2019/05/13/getting-data-for-digital-humanities-with-apis/
- Matthew Lincoln: “Reshaping JSON with jq”. The Programming Historian, 2016. DOI: https://doi.org/10.46430/phen0055