Folien mit Shower

1. Eine Folie

In der Vorlage steht die ganze Präsentation in index.html. Jede Folie ist ein eigener Abschnitt, der mit <section class="slide"> beginnt und mit </section> endet. Alles dazwischen gehört zu dieser einen Folie:

<section class="slide">
    <h2>Meine Lieblingstiere</h2>
    <ol>
        <li>🐧 Pinguine</li>
        <li>🦊 Füchse</li>
        <li>🐬 Delfine</li>
    </ol>
</section>

• <h2> ist die Überschrift der Folie.
• Die Seitenzahl im roten Band rechts oben setzt die Vorlage von selbst.
• Eine neue Folie fügst du ein, indem du eine ganze <section> kopierst und ihren Inhalt änderst.

Deine eigenen CSS-Regeln gehören in styles.css, ans Ende unter den Kommentar »Eigene CSS-Regeln«. So bleibt index.html übersichtlich: Dort stehen die Folien, in styles.css ihr Aussehen.

2. Gute Folien

Eine Folie ist keine Buchseite. Dein Publikum soll dir zuhören und nicht gleichzeitig lesen. Diese Folie ist technisch richtig, aber zu voll:

<section class="slide">
    <h2>Die Geschichte des Internets</h2>
    <p>
        Das Internet entstand aus mehreren technischen Entwicklungen und wurde
        über viele Jahre hinweg immer weiter ausgebaut. Heute benutzen wir es
        für Webseiten, E-Mails, Chats, Videos, Spiele, Cloud-Dienste und viele
        andere Anwendungen, und kaum jemand kann sich ein Leben ohne vorstellen.
    </p>
</section>

Besser ist eine kurze Aussage als Überschrift und wenige Stichworte. Was du ohnehin sagst, muss nicht auf der Folie stehen:

<section class="slide">
    <h2>Das Internet verbindet Computer</h2>
    <ul>
        <li>ein Netz aus vielen kleinen Netzen</li>
        <li>Webseiten, Nachrichten, Videos</li>
    </ul>
</section>

• Eine Folie, eine Aussage. Die Überschrift sagt sie.
• Höchstens vier, fünf Stichpunkte, jeder höchstens eine Zeile.
• Musst du die Schrift kleiner machen, damit alles passt, nimm lieber zwei Folien.

3. Was die Vorlage mitbringt

Für häufige Aufgaben hat die Vorlage fertige Klassen. Du brauchst dafür kein eigenes CSS, nur die Klasse im HTML.

Bild neben Text: side-by-side

side-by-side stellt ein Bild und einen Textbereich nebeneinander, mit Flexbox. Der Text bekommt den Platz, den das Bild übrig lässt:

<section class="slide">
    <h2>Text links, Bild rechts</h2>
    <div class="side-by-side">
        <div>
            <p>Der Fuji ist mit 3776 Metern der höchste Berg Japans.</p>
            <p>Steht das Bild im HTML vor dem Text, steht es links.</p>
        </div>
        <img src="pictures/fuji.jpg" alt="Der Fuji"
            style="height: 330px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px;">
    </div>
</section>

Das innere <div> hält die Absätze zusammen; ohne es stünden sie selbst nebeneinander.

Spalten: columns

columns two, columns three und columns four teilen den Platz in gleich breite Spalten. Jedes direkte Kind ist eine Spalte:

<section class="slide">
    <h2>Drei wichtige Dateien</h2>
    <div class="columns three">
        <div>
            <h3>index.html</h3>
            <p>Hier stehen deine Folien.</p>
        </div>
        <div>
            <h3>styles.css</h3>
            <p>Hier steht ihr Aussehen.</p>
        </div>
        <div>
            <h3>pictures</h3>
            <p>Hier liegen deine Bilder.</p>
        </div>
    </div>
</section>

Ein Bild als Hintergrund: cover

Ein Bild mit der Klasse cover füllt die ganze Folie. bright-text an der Folie macht die Schrift weiß, mit einem Schatten, damit sie auf dem Bild lesbar bleibt. Unter das Bild gehört der Bildnachweis, mit der Klasse copyright:

<section class="slide bright-text">
    <h2>Der Fuji</h2>
    <img class="cover" src="pictures/fuji.jpg" alt="Der Fuji">
    <figcaption class="copyright right">
        Bild: 名古屋太郎, CC BY-SA 3.0, Wikimedia Commons
    </figcaption>
</section>

copyright right setzt den Nachweis unten rechts, copyright left unten links.

4. Die Seitenzahl

Das rote Band mit der Foliennummer erzeugt die Vorlage selbst, mit der CSS-Regel .slide::after. Die Zahl schreibst du nie ins HTML; sie zählt von selbst mit.

Farbe ändern

Willst du nur eine andere Farbe, überschreibe in styles.css den Hintergrund:

<section class="slide">
    <h2>Eine blaue Seitenzahl</h2>
    <p>Die Farbe kommt aus styles.css.</p>
</section>

.slide::after {
    background-color: #4b86c2;
}

Eine runde Seitenzahl

Aus dem Band wird ein Kreis, wenn du die Lesezeichen-Form entfernst (clip-path: none) und die Ecken ganz rundest:

<section class="slide">
    <h2>Eine runde Seitenzahl</h2>
    <p>Rechts oben steht die Zahl jetzt in einem Kreis.</p>
</section>

.slide::after {
    top: 32px;
    left: auto;
    right: 55px;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    padding-top: 0;
    clip-path: none;
    border-radius: 50%;
    background-color: #4aa03f;
    line-height: 1;
}

left: auto; right: 55px misst den Abstand vom rechten Rand statt vom linken.

Ohne Seitenzahl

Auf einer einzelnen Folie, etwa der Titelfolie, blendest du die Zahl mit einer zweiten Klasse aus; die passende Regel steht schon in styles.css:

<section class="slide nopagenumber">
    <h2>Startfolie ohne Seitenzahl</h2>
</section>

Beide Klassen stehen im selben class-Attribut, durch ein Leerzeichen getrennt. Auf allen Folien zugleich verschwindet sie mit dieser Regel in styles.css:

.slide::after {
    visibility: hidden;
}

5. Formeln mit KaTeX

<sup> und <sub> reichen für a² und H₂O. Für richtige Formeln gibt es KaTeX: Du schreibst die Formel in der Schreibweise von LaTeX, und KaTeX setzt sie.

KaTeX einschalten

Die Dateien von KaTeX liegen in der Vorlage im Ordner include/katex, sind aber noch nicht eingebunden. Füge diese Zeilen einmal in den <head> von index.html ein, direkt unter <link rel="stylesheet" href="styles.css">:

<link rel="stylesheet" href="include/katex/katex.min.css">
<script defer src="include/katex/katex.min.js"></script>
<script defer src="include/katex/auto-render.min.js"
    onload="renderMathInElement(document.body);"></script>

Formeln schreiben

<section class="slide">
    <h2>Formeln mit KaTeX</h2>
    <p>Die Fläche eines Kreises ist \(A = \pi r^2\).</p>
    <p>Der Satz des Pythagoras:</p>
    <p>$$a^2 + b^2 = c^2$$</p>
</section>

• \( und \) umschließen eine Formel mitten im Satz.
• $$ am Anfang und am Ende setzt eine Formel groß in eine eigene Zeile.

Was du oft brauchst:

x^2              hochgestellt
H_2O             tiefgestellt
\frac{a}{b}      Bruch
\sqrt{x}         Wurzel
\pi              π
\cdot            Malpunkt
\le  \ge         kleiner gleich, größer gleich

Siehst du statt der Formel nur den Code, prüfe: Sind die KaTeX-Zeilen im <head>? Ist die Formel mit \( und \) umschlossen? Sind alle geschweiften Klammern geschlossen, etwa bei \frac{1}{2}? Steht vor \sqrt, \frac und \pi der Backslash?

6. Präsentieren

Deine Präsentation läuft in jedem Browser:

• Klicke auf eine Folie in der Übersicht, um sie groß zu zeigen.
• Mit den Pfeiltasten oder der Leertaste geht es weiter und zurück.
• Esc führt zurück zur Übersicht aller Folien.
• F11 schaltet den Browser auf Vollbild.
• StrgP speichert die Präsentation als PDF, eine Folie pro Seite.

Zum Vortragen brauchst du weder Internet noch den Workspace: Lade den ganzen Ordner herunter, kopiere ihn auf einen Stick und öffne dort index.html mit einem Doppelklick. Das klappt nur, wenn alles im Ordner liegt, was die Präsentation braucht: Bilder, Schriften und die Dateien der Vorlage. Probiere es vor dem Vortrag einmal an einem anderen Rechner aus.