Technologiedemonstration: Präsentationen mit HTML (2005)

1. Was wird benötigt?

Die Demonstration funktioniert nur mit einem Browser, welcher die media-types / features vollständig implementiert.
Update 06.09.2020
Leider implementiert nur Firefox den display-mode "fullscreen" korrekt. Daher funktioniert die Demonstration auch 15 Jahre nach der ersten Spezifikation in den meisten Browsern nicht.
Update 06.01.2012
Bis heute ist Opera leider der einzige Browser, welcher dieses Feature implementiert hat, obwohl dies seit Jahren im CSS 2 Standard enthalten ist.
Siehe CSS Spezifikation, Abschnitt media types.

2. Was sind die Vorteile einer HTML-Präsentation?

Durch Einsatz moderner CSS-Techniken ist es möglich mit einer einzigen HTML-Seite sowohl die Website, die Präsentation, als auch die Druckversion zur Verfügung zu stellen, ohne den Inhalt mehrmals für die verschiedenen Sichten bereitzustellen. All dies wird erreicht ohne Einsatz von Javascript oder proprietären Standards. Durch Einhaltung der XHTML 1.0 Strict Spezifikation ist es auch möglich das Dokument als XML zu verarbeiten, die Informationen zu extrahieren, oder auch die Präsentation ohne größeren Aufwand generieren zu lassen.

3. Wie erstellt man eine Präsentation in HTML?

Damit jede Folie separat in der Präsentationsansicht dargestellt werden kann, muss jede Folie in einem Slide-Container gespeichert werden.
 01  <div class="slide" id="slide1">
 02     Inhalt der Folie
 03     <div class="page"></div>
 04  </div>
Die verschiedene Sichten werden einfach per Stylesheet definiert:
 01  html, body { font-family: Arial, sans-serif; }
 02
 03  /* Normalansicht Website */
 04  @media not (display-mode: fullscreen)
 05  {
 06      .slide { border: 1px black solid; padding: 4px; }
 07  }
 08
 09  /* Nur für Präsentationsansicht */
 10  @media all and (display-mode: fullscreen)
 11  {
 12      html, body { height: 100%; margin: 0px; padding: 0px; }
 13      .slide { height: 100%; page-break-after: always; overflow: visible; }
 14      .page { content: counter(slide); } /* Zählt die Folien mit */
 15  }
 16
 17  /* Nur Druckansicht */
 18  @media print
 19  {
 20      .slide { border: 1px black solid; margin-bottom: 30px; padding: 0px; 
 21               page-break-inside: avoid; }
 22  }	
Wichtig dabei ist das "page-break-after: always;" für jeden Slide, damit in der Präsentationsansicht auch nur eine Folie angezeigt wird. In der Druckansicht verhindert ein "page-break-inside: avoid;", dass ein Folie über zwei Seiten verteilt wird.
Das obige Beispiel ist die Minimalform einer HTML-Präsentation. Falls dies Ihr Interesse geweckt hat, können Sie auf der rechten Seite zwei komplexere Beispiele anschauen.
[sample]
Beispiel 1: Audi AG


[sample]
Beispiel 2: DaimlerChrysler AG