S6 – Präsentationen aus der Hosentasche

Wer von den Lesern des Webkrauts-Adventskalenders kann sich noch an S5 von Eric Meyer erinnern? Dieses HTML/CSS basierte Präsentations-Werkzeug war vor ein paar Jahren mal sehr angesagt, momentan ist es etwas ruhiger darum geworden, obwohl dessen Vorteile immer noch auf der Hand liegen.

Einmal erstellen – auf vielen Endgeräten ansehen:

• Zum Erstellen und Abspielen brauchen wir keine Programme wie PowerPoint oder Keynote, sondern nur einen einfachen Texteditor und einen (modernen) Web-Browser.
• Die Präsentationen lassen sich 1:1 ins Web stellen, wo wiederum Suchmaschinen kein Problem haben, die Inhalte zu durchforsten.
• Da die Slides aus HTML bestehen, sind sie weitgehend barrierefrei (wenn der Autor darauf achtet) und sollten von assistiver Software (wie zum Beispiel einem Screenreader) vorgelesen werden können.

Präsentationen ohne Balast

Wäre es nicht schön, wenn wir zu Präsentation nicht mehr einen Laptop mitnehmen müssten, sondern unsere Präsentation quasi aus der Hosentasche starten könnten?

iPad, iPhone 4 und der neueste iPod Touch machen es möglich, einen VGA-Adapter anzuschließen und damit Präsentationen durchzuführen.

Hierfür war mir S5 jedoch nicht mehr flexibel genug, so dass ich für meine Bedürfnisse etwas eigenes zusammenstellte, das ich – da es von S5 inspiriert ist – »S6« nennen möchte.

Anders als beim S5 haben die einzelnen Slides keine fixe Höhe, sondern können beliebig vertikal wachsen. Damit erhält der Autor die Freiheit, thematisch zusammenhängende Inhalte gemeinsam auf einem Slide darzustellen und bei Bedarf eben runterzuscrollen.

Demo von S6

S6 kann via Mouse, Finger oder Tastatur bedient werden – in der Demo habe ich die verwendeten Bedienmöglichkeiten zusammengefasst. Außerdem findet sich dort noch einiges, was man beim Editieren, Anpassen und Verwenden von S6 wissen sollte…

Die Demo von S6 befindet sich auf unserem Server.

Responsive Design

Ethan Marcotte hat bei Alistapart einen sehr wichtigen Artikel über Responsive Web Design geschrieben, der mir half, S6 so aufzubauen, dass sich alle Inhalte automatisch an die Breite des Browserfensters anpassen:

Der Trick beim »Responsive Design« ist, dass im Stylesheet Breitenangaben entweder in Prozent angegeben oder die beiden Attribute max-width und min-width verwendet werden.

Listing 1: Kurze Erläuterung

/* starr, nicht responsive */
article {width:50em;}

/* flexibel */
article {width:80%;}

/* flexibel mit bewussten Einschränkungen */
p {
  max-width:40em;
  min-widht: 20em;
}

Entgegen dem bisher Erlernten werden bei »Responsive Design« im HTML-Code keine Breiten- und Höhenangaben bei Bildern (oder HTML5-Filmen) mehr gemacht, weil diese Angaben verhindern, dass die Bilder sich automatisch an die zur Verfügung stehende Größe anpassen.

Listing 2: Kurze Erläuterung

<!-- HTML-Anweisung OHNE Breiten- und Höhenangabe! -->
<img src="demo.jpg" alt="Demo Bild" />

/* flexibles bild */
img {max-width:100%}

Media Queries

Das automatische, prozentuale Anpassen des Layouts kommt jedoch irgendwann an seine Grenzen, wenn z.B. zwei nebeneinander gefloatete Elemente so schmal werden, das der dort dargestellte Text nur noch als »Text-Salat« zu beschreiben ist. Dann macht es Sinn, das Floaten zu beenden und die Elemente untereinander darzustellen.

CSS3 bietet für diese Fälle Media-Queries an, die es erlauben, für unterschiedliche Bildschirm- oder Browserfenster-Breiten unterschiedliche Stylesheet-Informationen aufzurufen:

Listing 1: Kurze Erläuterung

/*
die hier gezeigten Anweisungen werden
direkt im »normalen« Stylesheet eingefügt  –
nach den Anweisungen für die Standard-PC-Monitore
*/

/* iPad Hochformat & schmales Browser-Fenster */
@media only screen and (max-width: 768px) {
  div#wrap {
    margin-top: 2.4em;
    width: 98%;
  }
}

/* iPhone quer o.ä. */
@media only screen and (max-width: 480px) {
  body {
    /*hier den text kleiner!*/
    font-size: 50%;
  }

  div#wrap {
    margin-top: 2.6em;
    width: 98%;
  }
}

Andy Clarke hat die wichtigsten Media-Queries auf seiner Website zusammengefasst – und Webkraut Michael Jendryschik hat einen umfassenden Artikel darüber geschrieben…

HTML5

Um den semantischen Nährwert der Präsentationen möglichst hoch zu bekommen, ist S6 komplett in HTML5 erstellt und für jeden Slide wird der HTML5-Tag <article> verwendet. Bilder werden via <figure> eingefügt und können via <figcaption> eine Bildlegende erhalten.

Listing 3: Kurze Erläuterung

<article>
  <h1>Überschrift</h1>
  <figure>
    <!--
      keine Breiten- und Höhen-Angaben hier,
      damit das Bild „elastisch“ bleibt!
    -->
    <img src="demo.jpg" alt="ein demobild">
    <figcaption>Ein schönes Demobild</figcaption>
  </figure>
  <p>Paragraph mit weiteren Informationen</p>
</article>

jQuery

S6 verwendent jQuery für das Umschalten zwischen den Slides. Außerdem erzeugt es automatisch die Inhaltsangabe, die sichtbar wird, wenn der User auf die Ziffern am oberen, rechten Rand des Browser-Fensters klickt.

Paul Irish hat bei HTMLBoilerplate eine sehr raffinierte Methode vorgestellt, wie wir die jQuery-Library so einbinden können, dass diese von den Google-Servern geladen wird und nur im Notfall vom eigenen Rechner. Dies lädt jQuery schneller und erhöht die Chance, dass das Framework schon im Cache des Browsers vorhanden ist, weil mittlerweile sehr viele Websites auf diese URL verweisen, um jQuery zu laden.

Listing 4: Kurze Erläuterung

<!--
  Einbinden von jQuery ganz am Ende des <body>,
  damit der Inhalt der Seite schneller sichtbar wird!
-->

<!-- jeweils neueste jQuery bei Google gehostet -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<!--
  eigene jQuery-Version als Fallback, falls gerade von
  Google nicht geladen werden kann
-->
<script>!window.jQuery && document.write('<script src="../../meta/core/js/jquery-1.4.2.min.js"><\/script>')</script>

<!-- eigene Scripte -->
<script src="../../meta/core/js/thias.js"></script>

</body>
</html>

Apps für Präsentationen am iPad/iPhone

Will ich HTML-Seiten am iPad/iPhone via Beamer präsentieren, benötige ich dazu (noch) kleine Zusatz-Apps wie z.B. den GoodReader, der übrigens auch PDFs, Office-Dokumente und Filme darstellen kann.

Bei GoodReader müssen alle benötigten Dateien auf den iPhone/iPad herunterladen werden. Möchte man dies nicht machen, ist das Programm 2Screens eine interessante Alternative, die allerdings nur auf dem iPad läuft…

Fork your S6

S6 kann bei github heruntergeladen oder auch »geforkt« werden: https://github.com/megolla/S6

Lizenz

S6 wurde unter der Creative Commons Attribution 3.0 veröffentlicht.

Gemälde: Cornelis Norbertus Gijsbrechts, Quodlibet, 1675. Wallraf-Richartz-Museum, Köln.

Werbung

• 
•