Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

S6 – Präsentationen aus der Hosentasche

S6 – Präsentationen aus der Hosentasche

Dank CSS3 und Javascript ist es möglich, Webstandard-konforme Präsentationen zu erstellen, die via iPhone oder iPad auf den Beamer projiziert werden können. Matthias Edler-Golla beschreibt, wie er sich ein entsprechendes »Framework« zusammengestellt hat.

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

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?

iPodTouch mit S6
iPodTouch mit S6

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.

S6-Slides Schema
S6-Slides Schema

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.

  1. /* starr, nicht responsive */
  2. article {width:50em;}
  3.  
  4. /* flexibel */
  5. article {width:80%;}
  6.  
  7. /* flexibel mit bewussten Einschränkungen */
  8. p {
  9.   max-width:40em;
  10.   min-widht: 20em;
  11. }

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.

  1. <!-- HTML-Anweisung OHNE Breiten- und Höhenangabe! -->
  2. <img src="demo.jpg" alt="Demo Bild" />
  3.  
  4. /* flexibles bild */
  5. 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:

  1. /*
  2. die hier gezeigten Anweisungen werden
  3. direkt im »normalen« Stylesheet eingefügt  –
  4. nach den Anweisungen für die Standard-PC-Monitore
  5. */
  6.  
  7. /* iPad Hochformat & schmales Browser-Fenster */
  8. @media only screen and (max-width: 768px) {
  9.   div#wrap {
  10.     margin-top: 2.4em;
  11.     width: 98%;
  12.   }
  13. }
  14.  
  15. /* iPhone quer o.ä. */
  16. @media only screen and (max-width: 480px) {
  17.   body {
  18.     /*hier den text kleiner!*/
  19.     font-size: 50%;
  20.   }
  21.  
  22.   div#wrap {
  23.     margin-top: 2.6em;
  24.     width: 98%;
  25.   }
  26. }

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.

  1. <article>
  2.   <h1>Überschrift</h1>
  3.   <figure>
  4.     <!--
  5.       keine Breiten- und Höhen-Angaben hier,
  6.       damit das Bild „elastisch“ bleibt!
  7.     -->
  8.     <img src="demo.jpg" alt="ein demobild">
  9.     <figcaption>Ein schönes Demobild</figcaption>
  10.   </figure>
  11.   <p>Paragraph mit weiteren Informationen</p>
  12. </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.

  1. <!--
  2.   Einbinden von jQuery ganz am Ende des <body>
  3. ,
  4.   damit der Inhalt der Seite schneller sichtbar wird!
  5. -->
  6.  
  7. <!-- jeweils neueste jQuery bei Google gehostet -->
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  9.  
  10. <!--
  11.   eigene jQuery-Version als Fallback, falls gerade von
  12.   Google nicht geladen werden kann
  13. -->
  14. <script>!window.jQuery && document.write('<script src="../../meta/core/js/jquery-1.4.2.min.js"><\/script>')</script>
  15.  
  16. <!-- eigene Scripte -->
  17. <script src="../../meta/core/js/thias.js"></script>
  18.  
  19. </body>
  20. </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.

Kommentare

Markus
am 09.12.2010 - 15:27

Eine sehr schöne Idee, genau sowas habe ich neulich noch gesucht. Danke :)

Permanenter Link

domingos
am 09.12.2010 - 20:04

Doofe Frage, aber werden min- und max-width von den neueren IEs unterstützt? Kann mich deutlich erinnern, dass der IE6 die beiden nicht kannte.

Permanenter Link

Nicole
am 11.12.2010 - 02:25

Hey Wo ist denn der Facebook Like Button? ;)

Permanenter Link

Manfred Mirsch
am 15.12.2010 - 00:03

Eine super Umsetzung eines Online-Präsentationswerkzeuges.

Was ich allerdings vermisse bzw. nicht gefunden habe, ist Eric Meyers "incremental", um einzelne Text-Teile oder Grafiken einer Seite inkrementell anzuzeigen.

Habe ich das übersehen? Für mich ist dies momentan noch der Grund, Eric Meyers S5 zu verwenden.

Grüße aus Nürtingen,
Manfred Mirsch

Permanenter Link
Matthias Edler-Golla

Matthias Edler-Golla (Autor)
am 15.12.2010 - 07:51

@Manfred: Ja das „Incremental“ habe ich noch nicht eingebaut, steht aber auf meiner Todo-Liste für weitere Entwicklungsschritte…

Permanenter Link

Alex Blum
am 18.12.2010 - 01:21

Gefällt mir sehr gut und wird sicher bald bei mir zum Einsatz kommen, aber…

… vielleicht wäre das automatische anhängen eines Ankers auch noch so eine Sache für die Todo-Liste. Gerade für User, die sich die Tastatur-Befehle nicht ansehen ist dies sicher sinnvoll um per Backspace zur zuletzt angesehenen Slide zu gelangen, statt zur zuletzt geöffneten anderen Seite. Und mit preventDefault ist das Ganze schließlich auch in kürzester Zeit erledigt.

Permanenter Link
Matthias Edler-Golla

Matthias Edler-Golla (Autor)
am 21.12.2010 - 09:54

@Alex

… vielleicht wäre das automatische anhängen eines Ankers auch noch so eine Sache für die Todo-Liste. Gerade für User, die sich die Tastatur-Befehle nicht ansehen ist dies sicher sinnvoll um per Backspace zur zuletzt angesehenen Slide zu gelangen, statt zur zuletzt geöffneten anderen Seite. Und mit preventDefault ist das Ganze schließlich auch in kürzester Zeit erledigt.

Sorry, das habe ich leider nicht verstanden… Mit welcher Taste soll man zurückblättern?

Permanenter Link

Die Kommentare sind geschlossen.