reveal.js

Slides mit HTML/CSS/Javascript

Schau zu: http://graui.de/code/revealjs/

#Webmontag #Erfurt

Warum Slides in HTML?

The Good:

  • Portabilität
  • Herstellerunabhängigkeit
  • Web-Werkzeuge
    (CSS, JS-APIs, Online-Ressourcen)

The Bad:

  • steile Lernkurve
  • kaum GUI-Support
  • Web-Werkzeuge

And the Ugly:

PPT
Powerpoint
Microsoft
Keynote
Apple
Impress
Who cares?
LaTeX Beamer
Web?
Prezi
Flash

reveal.js

hakimel
Hakim El Hattab

  • HTML, CSS, Javascript
  • Modular
    • Markdown
    • Code Highlighting
    • Mathematische Formeln

Installation

Einsteiger

  1. Archiv herunterladen: https://github.com/hakimel/reveal.js/releases/latest
  2. Entpacken
  3. index.html bearbeiten

Fortgeschrittener


            git clone https://github.com/hakimel/reveal.js.git
            cd reveal.js
            npm install
            npm start

Vorteil: File Watcher, ext. Markdown/Speaker Notes, Multiplexing-Server

Eine Minimalpräsentation


              <html>
                  <head>
                      <link rel="stylesheet" href="css/reveal.css">
                      <link rel="stylesheet" href="css/theme/white.css">
                  </head>
                  <body>
                      <div class="reveal">
                          <div class="slides">
                              <section>Slide 1</section>
                              <section>Slide 2</section>
                          </div>
                      </div>
                      <script src="js/reveal.js"></script>
                      <script>
                          Reveal.initialize();
                      </script>
                  </body>
              </html>

Struktur

  • jede section ist eine Seite
  • geschachtelte section-Elemente: zweidimensionale Struktur

Slides

Inhalte



A cat image.

Alles was das Web erlaubt.

  • HTML5, <audio>, <video>
  • CSS-Animationen
  • iframes ( Webapplikationen, Live-Daten )
  • Lazy Loading für große Datenvolumenn

Viewport

  • Präsentation rendert (standardmäßig) in fixer Auflösung (960x700)
  • nachfolgend Skalierung auf Displaygröße
  • Umsetzung: CSS + Media Queries
  • Konfiguration:

            Reveal.initialize({
                ...
                width: 960,
                height: 700,

                // Größenfaktor Rand
                margin: 0.1,

                // Skalierungsgrenzen
                minScale: 0.2,
                maxScale: 1.5
            });

On-Slide Animation: Fragmente

Elemente mit Klassenattribut fragment werden nacheinander aufgeblendet.
Weitere Transformationen über Zusatzklasse.


                  <li class="fragment">a fragment</li>
                  <li class="fragment fade-up">a second fragment</li>
  • a fragment
  • a second fragment

Größen:


	                <li class="fragment grow">grow</li>
	                <li class="fragment shrink">shrink</li>
  • grow
  • shrink

Farben:


                  <li class="fragment highlight-current-blue">highlight-current-blue</li>
                  <li class="fragment highlight-red">highlight-red</li>
                  <li class="fragment highlight-green">highlight-green</li>
  • highlight-current-blue
  • highlight-red
  • highlight-green

Themes

Module

Syntax Highlighting

Komfortable Einbindung von highlight.js:

HTML


              <pre><code data-trim>
              #include &lt;stdio.h&gt;
              int main(char** argc) {
                printf("Hello World!\n");
                return 0;
              }
              </pre></code>

Ergebnis


              #include <stdio.h>
              int main(char** argc) {
                printf("Hello World!\n");
                return 0;
              }

Markdown

Support für Markdown:

HTML


              <section data-markdown>
                <script type="text/template">
                  ## Seitentitel

                    - Punkt 1
                    - Punkt 2

                  Ein Absatz mit Text und [Link](http://graui.de).
                </script>
              </section>

Ergebnis

Seitentitel

  • Punkt 1
  • Punkt 2

Ein Absatz mit Text und Link.

Mathematische Formeln


              
 \( a^2 + b^2 = c^2 \) 


              
 \(\lim_{n \to \infty} \sum_{i=0}^{n} \frac{1}{2^i} = 2\)
MathJax

Notation: LaTeX, MathML, AsciiMath

\[ a^2 + b^2 = c^2 \] \[ \lim_{n \to \infty} \sum_{i=0}^{n} \frac{1}{2^i} = 2\]

Fortgeschrittene Themen

  • Javascript
    • JS-API (Doku)
    • JS-Events (Standard-Events und selbstdefinierte Events)
  • Mehr Features
    • PDF-Export - benötigt Webserver, Chrome & spezielles Stylesheet
    • Parallax Backgrounds
    • Link Preview
    • Speaker Notes
    • Multiplexing - Master- und Client-Präsentation, Basis: socket.io
  • Alternativer Use-Case: Graphisches Feature

Ready
for
your
questions.