Compare commits

..

No commits in common. "160133cb12d8469155c91e75352d7265d81ab127" and "19c43350400f95336022a0c1d2db036bfe8bb36d" have entirely different histories.

4 changed files with 258 additions and 33 deletions

3
.gitignore vendored
View File

@ -112,6 +112,3 @@ typings/
*/_minted* */_minted*
*.pygtex *.pygtex
*.pygstyle *.pygstyle
# onPoint results
slides.*.html

View File

@ -1,14 +1,8 @@
<div class="layout-two-previews"> <div class="layout-two-previews">
<div class="layout-preview"> <div class="layout-preview">
<figure> @left-preview
@left-preview
<figcaption>@left-caption(inline)</figcaption>
</figure>
</div> </div>
<div class="layout-preview"> <div class="layout-preview">
<figure> @right-preview
@right-preview
<figcaption>@right-caption(inline)</figcaption>
</figure>
</div> </div>
</div> </div>

244
slides.de.html Normal file
View File

@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>LaTeX-Wochenende der Fachschaft WIAI</title>
<!-- TODO: Convert stylesheets -->
<!-- <link rel="stylesheet" href="css/reveal.css">-->
<link rel="stylesheet" href="css/theme/latex.css">
<!-- <link rel="stylesheet" href="lib/css/zenburn.css">-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<article>
<div class="layout-content-only">
<div class="layout-content titlepage">
<h1>L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X-Wochenende</h1>
<small>
<p>Ein Workshop der Fachschaft WIAI.<br/> Erstellt von Anika Amma, Fabian Lamprecht, <br/>Florian Knoch, Christian Kremitzl und Anna Sauer.</p>
</small>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1 id="was-ist-latex">Was ist L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X?</h1>
</div>
</div>
</article>
<article>
<div class="layout-two-previews">
<div class="layout-preview">
<figure>
<img src="svg/chapter-01/example-word-orig.svg">
<figcaption class="fragment">
Klassisches Word-Dokument
</figcaption>
</figure>
</div>
<div class="layout-preview">
<figure>
<img src="svg/chapter-01/example-latex-orig.svg">
<figcaption class="fragment">
Klassisches LaTeX-Dokument
</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 id="entstehung">Entstehung</h2>
<ul>
<li>Donald <strong>Knuth</strong>, 19771986: Textsatzsystem <strong>TeX</strong><span class="bubble fragment">τεχ → /tɛç/</span> für The Art of Computer Programming</li>
<li>Leslie <strong>Lamport</strong>, ab 1980er: Softwarepaket <strong>LaTeX</strong> zur einfacheren Benutzung von TeX</li>
</ul>
<div style="display: flex; justify-content: space-between; align-items: stretch;">
<figure>
<img src="svg/chapter-01/knuth.jpg" style="height: 13em">
<figcaption>
Donald Knuth
</figcaption>
</figure>
<figure>
<img src="svg/chapter-01/lamport.jpg" style="height: 13em">
<figcaption>
Leslie Lamport
</figcaption>
</figure>
</div>
</div>
<div class="layout-preview">
<div class="figure">
<img src="sections/german/01/taocp.jpg" />
</div>
</div>
</div>
</article>
<article>
<div class="layout-two-previews">
<div class="layout-preview">
<figure>
<img src="svg/chapter-01/example-word-orig.svg" />
<figcaption>
Klassisches Word-Dokument
</figcaption>
</figure>
</div>
<div class="layout-preview">
<figure>
<img src="svg/chapter-01/example-latex-orig.svg" />
<figcaption>
Klassisches LaTeX-Dokument
</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 id="typografie">Typografie</h2>
<h3 id="makrotypografie">Makrotypografie</h3>
<ul>
<li>Satzspiegel</li>
<li>Zeilenlänge vs. -abstand</li>
<li>Platzierung von Überschriften im Weißraum</li>
<li>Platzierung von Bildern und Tabellen</li>
<li>Schusterjungen / Hurenkinder</li>
<li>Gleichmäßiger Grauwert</li>
<li></li>
</ul>
<figure style="display: flex; justify-content: space-between; width: 100%; align-items: flex-end;">
<img src="svg/chapter-01/satzspiegel.svg" style="height: 8em">
<figcaption style="margin-left: 1em; font-size: .8em">
Satzspiegel-Konstruktion nach Villard (<a class="dark-font" href="https://commons.wikimedia.org/wiki/File:Satzspiegel-4.svg">Quelle</a>)
</figcaption>
</figure>
</div>
<div class="layout-preview">
<div class="figure">
<img src="svg/chapter-01/vergleich-makro.svg" />
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 id="typografie">Typografie</h2>
<h3 id="mikrotypografie">Mikrotypografie</h3>
<ul>
<li>Ligaturen</li>
<li>Kerning</li>
<li>echte Kursiven, Kapitälchen, Schriftgrade …</li>
<li>Wortabstände</li>
<li></li>
</ul>
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<figure>
<img src="svg/chapter-01/schriftschnitte-crop.svg" style="height: 1.7em;">
<figcaption style="font-size: .8em;">
Schriftschnitte:<br>gerade, schräg, kursiv
</figcaption>
</figure>
<figure>
<img src="svg/chapter-01/schriftgrade.svg" style="height: 2.2em;">
<figcaption style="font-size: .8em">
Schriftgrade:<br>klein, klein vergrößert, groß
</figcaption>
</figure>
</div>
</div>
<div class="layout-preview">
<div class="figure">
<img src="svg/chapter-01/vergleich-mikro.svg" />
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 id="weitere-vorteile">Weitere Vorteile</h2>
<ul>
<li>wesentlich bessere Standardeinstellungen<br/>als in sämtlichen Textverarbeitungsprogrammen</li>
<li>strukturiertes Arbeiten</li>
<li>zuverlässiges Undo</li>
<li>einfache Versionierung</li>
<li>unabhängig von proprietären Programmen</li>
<li>Quelltext und Ausgabe langfristig lesbar</li>
<li>einfache Zusammenarbeit mit anderen Programmen</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 id="ablauf-des-workshops">Ablauf des Workshops</h2>
<p><strong>Ziel:</strong> Ihr baut eure eigene LaTeX-Referenz<br/>auf Basis von <a href="https://www.ctan.org/tex-archive/info/lshort/german">l2kurz</a>.</p>
<ul>
<li>Learning by Doing</li>
<li>Verstehen, wie LaTeX funktioniert</li>
<li>Einzelheiten später nachschlagen</li>
</ul>
<p><strong>Gliederung:</strong></p>
<ol style="list-style-type: decimal">
<li><del>Was ist LaTeX?</del></li>
<li>Wie funktioniert LaTeX?</li>
<li>Grundstruktur eines LaTeX-Dokuments</li>
<li>Projektstruktur</li>
<li>Viele Features</li>
<li>Literaturverwaltung</li>
<li>Ausblick</li>
</ol>
</div>
<div class="layout-preview">
<div class="figure">
<img src="svg/chapter-01/l2kurz-orig.svg" />
</div>
</div>
</div>
</article>
</section>
</div>
</div>
<!-- TODO: Convert scripts -->
<!-- <script src="lib/js/head.min.js"></script>-->
<!-- <script src="js/reveal.js"></script>-->
</body>
</html>

View File

@ -3,25 +3,24 @@
@content @content
# Was ist L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X? # Was ist L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X?
@slide(layout=two-previews) @slide(layout=two-previews)
@left-preview @left-preview
![](svg/chapter-01/example-word-orig.svg) <figure>
<img src="svg/chapter-01/example-word-orig.svg">
@left-caption <figcaption class="fragment">Klassisches Word-Dokument</figcaption>
Klassisches Word-Dokument </figure>
@right-preview @right-preview
![](svg/chapter-01/example-latex-orig.svg) <figure>
<img src="svg/chapter-01/example-latex-orig.svg">
@right-caption <figcaption class="fragment">Klassisches LaTeX-Dokument</figcaption>
Klassisches LaTeX-Dokument </figure>
@slide(layout=content-and-preview) @slide(layout=content-and-preview)
@content @content
## Entstehung ## Entstehung
* Donald **Knuth**, 19771986: Textsatzsystem **TeX**<span class="bubble fragment">τεχ → /tɛç/</span> für The Art of Computer Programming * Donald **Knuth**, 19771986: Textsatzsystem **TeX**<span class="bubble fragment">τεχ → /tɛç/</span> für The Art of Computer Programming
@ -33,21 +32,15 @@ Klassisches LaTeX-Dokument
</div> </div>
@preview @preview
![](svg/chapter-01/taocp.jpg) ![](sections/german/01/taocp.jpg)
@slide(layout=two-previews) @slide(layout=two-previews)
@left-preview @left-preview
![](svg/chapter-01/example-word-orig.svg) <figure><img src="svg/chapter-01/example-word-orig.svg" /><figcaption>Klassisches Word-Dokument</figcaption></figure>
@left-caption
Klassisches Word-Dokument
@right-preview @right-preview
![](svg/chapter-01/example-latex-orig.svg) <figure><img src="svg/chapter-01/example-latex-orig.svg" /><figcaption>Klassisches LaTeX-Dokument</figcaption></figure>
@right-caption
Klassisches LaTeX-Dokument
@slide(layout=content-and-preview) @slide(layout=content-and-preview)
@ -68,7 +61,6 @@ Klassisches LaTeX-Dokument
@preview @preview
![](svg/chapter-01/vergleich-makro.svg) ![](svg/chapter-01/vergleich-makro.svg)
@slide(layout=content-and-preview) @slide(layout=content-and-preview)
@content @content
@ -89,7 +81,6 @@ Klassisches LaTeX-Dokument
@preview @preview
![](svg/chapter-01/vergleich-mikro.svg) ![](svg/chapter-01/vergleich-mikro.svg)
@slide(layout=content-only) @slide(layout=content-only)
@content @content
@ -102,7 +93,6 @@ Klassisches LaTeX-Dokument
* Quelltext und Ausgabe langfristig lesbar * Quelltext und Ausgabe langfristig lesbar
* einfache Zusammenarbeit mit anderen Programmen * einfache Zusammenarbeit mit anderen Programmen
@slide(layout=content-and-preview) @slide(layout=content-and-preview)
@content @content