by Hakim El Hattab

und die digitale Geisteswissenschaft

Emily Kühbauch, Aline Nünninghoff, Kristina Schneider, Vanessa Tissen

Reveal.js

Digitale Geisteswissenschaft
nach Manfred Thaller (2017)

Wie können geisteswissenschaftliche Forschungsfragen mit digitalen Methoden und Werkzeugen aufbereitet werden und wie können diese die geisteswissenschaftliche Forschung verbessern/ verändern?


→ die Technologie selbst wird zu dem Medium, das analysiert wird

Reveal.js
Aufbau-HTML-Dokument
Code HTML-Head
						
							<!doctype html>
								<html>
								  <head>
	                  
	                  

	                  reveal.js

	                  
	                  
	                  

	                  
	                  
                  </head>
						 
					  
revealjs.com/themes/
Code HTML-Body
						
              <body>
               <div class="reveal">
                <div class="slides">
	                <section> Digitale Geisteswissenschaft
                      

Forschungsbereiche der digitalen Geisteswissenschaft

;

textuelle Medien, nicht-textuelle Medien, Bilder und Texte als Quelle, Analyse ditigaler Methoden

</section> </div> </div> </body>
Digitale Geisteswissenschaft

Forschungsbereiche der digitalen Geisteswissenschaft

textuelle Medien, nicht-textuelle Medien, Bilder und Texte als Quelle, Analyse ditigaler Methoden

Code Veränderung der Hintergrundfarbe
						
              <section data-background-color="aquamarine"> Digitale Geisteswissenschaft
                  

Forschungsbereiche der digitalen Geisteswissenschaft

textuelle Medien, nicht-textuelle Medien, Bilder und Texte als Quelle, Analyse ditigaler Methoden

</section>
Digitale Geisteswissenschaft

Forschungsbereiche der digitalen Geisteswissenschaft

textuelle Medien, nicht-textuelle Medien, Bilder und Texte als Quelle, Analyse ditigaler Methoden

Digitale Geisteswissenschaft

Forschungsbereiche der digitalen Geisteswissenschaft

textuelle Medien, nicht-textuelle Medien, Bilder und Texte als Quelle, Analyse ditigaler Methoden

Basics in reveal.js

  • Hintergründe
  • Videos einbetten
  • IFrames einbetten
  • Fragmentierung
  • Tabellen
  • Code einbetten
  • Links
  • Layouts
Basics in Reveal.js

Erklärt am Beispiel der Thematik XML

Dieser Abschnitt nutzt die Inhalte aus Kapitel 9 des Buches Digital Humanities von Jannidis, Fotis, Hubertus Kohle, und Malte Rehbein zum Thema XML
und wird auf den folgenden Folien nicht mehr separat zitiert.

caption
© Jmh2o/ https://de.wikipedia.org/wiki/Datei:Xml_logo.svg /Reveal-Präsentation

XML

XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.

Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.

XML

XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.

Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.

Code Hintergrundbild


								<section data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";>
								    <p>
								      XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.
								    </p>
								    <p>
								      Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.
								    </p>
								</section>
							

XML

XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.

Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.

Code Zusatzblock


							<section data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";>
							 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
							  <h2>XML</h2>
							  <p>
							    XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.
							  </p>
							  <p>
							    Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.
							  </p>
						  </div>
							</section>
						

XML

XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.

Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.

Code Hintergrund wiederholen


							<section data-background="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png"
								data-background-repeat="repeat"
								data-background-size="100px">
							 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
							  <h2>XML</h2>
							  <p>
							    XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.
							  </p>
							  <p>
							    Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.
							  </p>
							 </div>
							</section>
						

XML

XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.

Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.

Code Hintergrundbild Größe


							<section data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
								data-background-size="95%">
							 <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
							  <h2>XML</h2>
							  <p>
							    XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.
							  </p>
							  <p>
							    Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.
							  </p>
							 </div>
							</section>
						

XML

XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.

Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.

Code Hintergrundbild Transparenz


							<section data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
								data-background-size="95%";
								data-background-opacity="0.2">
							  <h2>XML</h2>
							  <p>
							    XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.
							  </p>
							  <p>
							    Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.
							  </p>
							</section>
						

XML

XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.

Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.

Code Hintergrundbild Position


							<section data-background="#E3E3E3"
								data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png"
								data-background-size="250px"
								data-background-position="top 15px right 15px">
							  <h2>XML</h2>
							  <p>
							    XML steht für eXtensible Markup Language und bezeichnet ein Verfahren, um Texte auszuzeichnen und Informationen zu kodieren.
							  </p>
							  <p>
							    Es ist entwickelt worden, um die Strukturen eines Dokuments kenntlich und damit für den Computer verarbeitbar zu machen, indem Kodierungen (›Auszeichnungen‹) in einen laufenden Text eingefügt werden.
							  </p>
							</section>
						

XML - Video Tutorial

Code Video


							<section data-background-video="https://www.liquid-technologies.com/Content/videos/products/xml-studio/validate-xml.mp4"
								data-background-size="contain"
								data-background-color="#E3E3E3">
							</section>
						

XML Tutorial-Webseiten

Falls es Probleme mit XML gibt, findet man im Web viele Webseiten, die sich rund um das Thema XML beschäftigen.

Wikipedia für XML-Basics

Code Iframe


							<section data-background-iframe="https://de.wikipedia.org/wiki/Extensible_Markup_Language"
								data-background-interactive>
							  <div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
							    <h2>Wikipedia für XML-Basics</h2>
							  </div>
							</section>
						

Anwendung und Grundbegriffe

  • nutzt einen gewissen Zeichenvorrat in der Form UTF8 kann auf allen Plattformen und Betriebssystemen gelesen werden
  • Text innerhalb der spitzen Klammern ist Markup
  • Die mit den spitzen Klammern angezeigte Kodierung heißt tag
  • Die Einheit aus tags und allem was dazwischen steht, nennt man Element

Code Fragmentieren


							<section data-background="#E3E3E3";
								data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
								data-background-size="250px";
								data-background-position="top 15px right 15px";>
							  <h2>Anwendung und Grundbegriffe</h2>
							  <ul>
							    <li class="fragment">nutzt einen gewissen Zeichenvorrat in der Form UTF8 kann auf allen Plattformen und Betriebssystemen gelesen werden</li>
							    <li class="fragment">Text innerhalb der spitzen Klammern ist <span class="fragment highlight-blue">Markup</span></li>
							    <li class="fragment fade-in-then-semi-out">Die mit den spitzen Klammern angezeigte Kodierung heißt <span class="fragment highlight-green">tag</span></li>
							    <span class="fragment fade-in">
							      <span class="fragment fade-out">
							        <li>Die Einheit aus tags und allem was dazwischen steht, nennt man Element</li>
							      </span>
							    </span>
							  </ul>
							</section>
						

Character Entitäten

Bestimmte Zeichen sind reserviert – sie werden als Zeichenentität ersetzt: &Entitätsname;

Zeichen Entity Bedeutung
< & lt ; Lesser than
> & gt ; Greater than
& & amp ; Ampersand
" & quot ; Quotation mark
' & apos ; Apostrophe

Code Tabelle


							<section data-background="#E3E3E3";
								data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
								data-background-size="250px";
								data-background-position="top 15px right 15px";>
							  <h2>Character Entitäten</h2>
							  <p>
							    Bestimmte Zeichen sind reserviert – sie werden als Zeichenentität ersetzt: &Entitätsname;
							  </p>
							  <table>
							    <thead>
							      <tr>
							        <th>Zeichen</th>
							        <th>Entity</th>
							        <th>Bedeutung</th>
							      </tr>
							    </thead>
							    <tbody>
							      <tr>
							        <td>< </td>
							        <td>& lt ;</td>
							        <td>Lesser than</td>
							      </tr>
							      <tr>
							        <td>></td>
							        <td>& gt ;</td>
							        <td>Greater than</td>
							        ...
						

XML - Beispielcode


							<?xml version="1.0" encoding="UTF-8"?>
							<gedichtsammlung xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
							  xmlns="http://gedichtforschung.org/gedichtsammlungen"
							  xsi:SchemaLocation="http://gedichtforschung.org/gedichtsammlung.
							xsd">
							  <gedicht>
							    <bibliografisch>
							      <titel>Krethi & Plethi</titel>
							      <autor typ="normiert" identifikation="gnd_11862444X">
							        <name><vorname>Kurt</vorname> <nachname>Tucholsky</nachname></name>
							        <name typ="alias">Theobald Tiger</name>
							        <!-- unter diesem Pseudonym veröffentlicht -->
							      </autor>
							      <quelle>Berliner Tageblatt, Nr. 487
							        <datum normiert="1918–09–23">23. September 1918</datum>
							      </quelle>
							    </bibliografisch>
							    <text sprache="deutsch">
							      <strophe>
							        <vers><name typ="person" identifikation="gnd_116996595">Vater
							          <nachname>Liebert</nachname></name> hat eine Rede vom Stapel gelassen,</vers>
							        <vers>in der er sagte, der <name typ="institution" identifikation="gnd_35236–6"> Reichstag</name> täte ihm nicht mehr passen.</vers>
							      </strophe>
							      <strophe>
							        ...
						

Code highlighten


							<section data-background="#E3E3E3";
								data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
								data-background-size="250px";
								data-background-position="top 15px right 15px";
								data-auto-animate>
							  <h2 data-id="code-title">XML - Beispielcode</h2>
							  <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|8,10-11|14|19-23">
							    <?xml version="1.0" encoding="UTF-8"?>
							    <gedichtsammlung xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
							      xmlns="http://gedichtforschung.org/gedichtsammlungen"
							      xsi:SchemaLocation="http://gedichtforschung.org/gedichtsammlung.
							    xsd">
							      <gedicht>
							      ...
								</code></pre>
							</section>
						

In Oxygen den XPath anzeigen lassen?

  • Öffnen Sie Ihr Dokument in Oxygen. Rechtsklick auf das Element, welches Sie interessiert & XPath kopieren auswählen.

Zurück zur Aufgabe

Code Link


					<section id="Lösung";
					data-background="#E3E3E3";
					data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
					data-background-size="250px";
					data-background-position="top 15px right 15px";>
					  <h3>In Oxygen den XPath anzeigen lassen?</h3>
					  <ul>
					  <li>Öffnen Sie Ihr Dokument in Oxygen. Rechtsklick auf das Element, welches Sie interessiert & XPath kopieren auswählen.</li>
					  </ul>
					  <p></p>
					  <a href="#/Aufgabe">Zurück zur Aufgabe</a>
					</section>
					

XML Path Language ist eine Abfragesprache, um Teile eines XML-Dokuments zu adressieren und auszuwerten.

Ein XPath adressiert Teile eines XML-Dokuments, die als Baumstruktur betrachtet werden

Es gibt Knoten und Achsen die den XPath-Ausdruck entscheiden

Aufgabe 1:

  • Öffnen Sie das Dokument DH-Methoden & geben Sie den XPath zu xyz an.
  • Wie ging das nochmal?

    Code Link

    
    					<section id="Aufgabe";
    					data-background="#E3E3E3";
    					data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
    					data-background-size="250px";
    					data-background-position="top 15px right 15px";>
    					  <h3>Aufgabe 1:</h3>
    					  <li>Öffnen Sie das Dokument DH-Methoden & geben Sie den XPath zu xyz an.</li>
    					  <p>
    					  <a href="#/Lösung">Zurück zur Aufgabe</a>
    				 </section>
    					

    Code Bilder stapeln

    
    						  <section data-background="#E3E3E3";
    						  data-background-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Xml_logo.svg/362px-Xml_logo.svg.png";
    						  data-background-size="250px";
    						  data-background-position="top 15px right 15px";>
    						    <div class="r-stack">
    						     <img class="fragment" src="https://upload.wikimedia.org/wikipedia/commons/3/39/XMLSample.png" width="500" height="300">
    						     <img class="fragment" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/XML_%28de%29.svg/413px-XML_%28de%29.svg.png" width="500" height="300">
    						    </div>
    						  </section>
    						

    Features in reveal.js

    • Animationen und Visualisierungen
    • Sprecheransichten und Notizzettel
    • Zeiteinstellungen durch AutoSlide
    • Touch Navigation
    • PDF-Export
    • Seitennummerierungen und Anpassungen
    • Vertikale Folien

    Feature

    Vertikale Folien

    Erklärt am Beispiel von Digitale Methoden

    Geographische Informationssysteme (GIS)
    und
    Digitale Rekonstruktion und Simulation

    Geographische Informationssysteme (GIS)

    In den Geisteswissenschaften hat das Interesse an räumlichen Analysen stetig zugenommen, sodass sich der Bereich der Spatial Humanities herauskristalisiert hat, deren gemeinsame Basis Forschungsfragen mit Raumbezug bilden. Dabei sind Karten, also Visualisierung von Rauminformationen, das grundlegende Element und der ausschlaggebende Grund für die Einbindung für Geographische Informationssysteme. Diese ermöglichen die Darstellung, Analyse und Archivierung von raumbezogenen Daten.
    Beispiele für GIS-Programme sind u.a. QGIS, GRASS GIS, OpenJump und DIVA-GIS.

    1. vertikale Ebene

    Vertiefung von QGIS

    QGIS ist ein freies open-source Geographisches Informationssystem. Mit diesem benutzerfreundlichen Programm lassen sich räumliche Daten erfassen, beobachten, analysieren und verarbeiten. Weiterhin unterstützt QGIS eine Reihe von Raster- und Vektordatenformate wie Shapefile oder SpatialLite. Mithilfe der Plugin-Architektur können neu entwickelte Formate wie bspw. das GeoPackage problemlos hinzugefügt werden.

    2. vertikale Ebene

    QGIS – Dokumentationen und Tutorials

    Dokumentationen zur QGIS-Version 3.10

    Tutorials für Anfanger

    Digitale Rekonstruktion und Simulation

    Das Vorgehen der digitalen Rekonstruktion und digitalen Simulation ist insofern gleich, da beide Methoden etwas herstellen, was nicht mehr exisitiert. Jedoch unterscheiden sich diese insichtlich ihrer Motivation, die zuweilen vertauscht werden. In der digitalen Rekonstruktion wird der Versuch unternommen, den vergangenen Zustand wiederzuerlangen, sei es mittels eines Modelles oder in der Realität. Dabei steht die Rekonstruktion großen Herausforderungen entgegen, da Funde u.a. Umwelteinflüssen unterliegen und verwittern können. Die Simulation hingegen experimentiert damit, wie es gewesen sein könnte und versucht den Zeitverlauf mittels einer retrospektiv-historische Darstellung zu gestalten.
    Dabei kann die digitale Rekonstruktion und Simualtion durch Methodiken der virtuellen Realität erweitert werden.

    1. vertikale Ebene

    Aspekte der virtuellen Realität

    • Cave Automatic Virtual Environment (CAVE): illisionistisch überformter Raum, welcher mittels mehrseitigen digitalen Projektionen entsteht
    • Head-Mounted Display: am Kopf tragendes Ausgabegerät, mit dem digitale Projektionen illisionistisch gesteigert wahrgenommen werden kann.
    • Augmented Realilty: computergestützte Erweiterung der Realitätswahrnehmung, so werden bspw. Bilder mit computergenerierten Zusatzinformationen über Einblendungen oder Überlagerungen auf die Realität gelegt
    • Holographie: durch Nutzung des Wellencharakters des Lichts können scheinbar frei im Raum schwebende Bilder erzeugt werden
    • 3D-Drucker: dreidimensionale Objekte erstellbar durch schichtweisen Auftrag

    Code vertikale Folien

    
                    				

    Geographische Informationssystem (GIS)

    In den Geisteswissenschaften...

    Vertiefung von QGIS

    QGIS ist ein freies open-source...

    QGIS - Dokumentationen und Tutorials

    Dokumentationen zur...

    Literaturverzeichnis

    • Jannidis, Fotis, Hubertus Kohle, und Malte Rehbein, Hrsg. Digital Humanities. Stuttgart: J.B. Metzler, 2017

    Abbildungsverzeichnis

    • https://upload.wikimedia.org/wikipedia/commons/3/39/XMLSample.png
    • https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/XML_%28de%29.svg/413px-XML_%28de%29.svg.png
    • https://www.liquid-technologies.com/Content/videos/products/xml-studio/validate-xml.mp4