OnePager/Interactive Storytelling

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter dem Begriff Interactive Storytelling werden multimediale Präsentationen aus Fotos, Videos, Animationen und en z.B. mit SVG verstanden. Auch wenn es die einzelnen Bestandteile schon länger gab, ist es mit HTML5 möglich diese Medien direkt und ohne Plugins in Webseiten einzubinden.

Hierdurch können zusammenhängende, interaktive Geschichten mit aussagekräftigen Bildern, Diagrammen und Visualisierungen präsentiert werden. Deren Inhalte werden aber erst nach und nach sichtbar, damit die Geschichte übersichtlich bleibt und die Spannung erhöht wird.[1] [2]

Vorüberlegungen

HTML als Powerpoint-Ersatz?

Könnte man eine Päsentation nicht nur mit HTML und ein bisschen JavaScript gestalten?

Im Prinzip schon - entweder man bastelt etwas völlig eigenes oder verwendet ein kleines Framework:

Empfehlung: Auf die Frage, ob er dies öfter einsetzen würde, antwortete Gunnar, dass dies eine einmalige Sache war und der Arbeitsaufwand nicht im Verhältnis zum Produkt stünde. --Matthias Scharwies (Diskussion) 06:22, 11. Dez. 2022 (CET)

automatische Präsentation oder Guided Tour?

Vorneweg: im Web wird vom Benutzer alles, was er nicht selber unter Kontrolle hat, als negativ empfunden. Deshalb sollten solche Präsentationen nie automatisch ablaufen, sondern als Guided Tour am Ende eines Abschnitts einen Verweis zur nächsten Seite der Tour sowie einen Verweis zur Startseite anbieten.

Interessant sind automatisch ablaufende Präsentationen dagegen etwa auf Messen in einem Kiosk-System. Dabei kann man auch Endlosschleifen erzeugen, indem einfach die letzte Seite der Präsentation wieder die erste aufruft.

Aufbau

Der Kerngedanke eines „elevator pitches“ basiert auf dem Szenario, eine wichtige Person in einem Aufzug zu treffen und diese dann während der Dauer einer Aufzugsfahrt von einer Idee zu überzeugen. Ist die Idee überzeugend genug vorgestellt worden, wird das Gespräch weitergeführt oder man verabredet sich zu einem weiterführenden Meeting.[3]

Ein Elevator Pitch wird oft in Projekten oder Verkaufsgesprächen verwendet, bei denen es wichtig ist, Ideen präzise zu formulieren und auf den Punkt zu bringen.

Einführung in SVG

Mit Präsentationsprogrammen erstellte Vorträge schauen im Allgemeinen immer gleich aus und oft kann man noch die Vorlage und das verwendete Programm selbst erkennen. Auch viele YouTube-Videos bestehen nur aus einem Vortrag und statischen Bildern. Eine wohltuende Ausnahme ist diese Einführung in SVG.[4]

2014 erschien eine Infografik "Using SVG" von Jenn Coyle,[5] die aber auf Animationen verzichtete.

Mittlerweile werden CSS-animations und die WAAPI von allen Browsern unterstützt, sodass es Zeit für eine neue Version geworden ist.


Als Ausgangspunkt verwenden wir unser HTML-Grundgerüst und section-Elemente, die jeweils nahezu den gesamten Anzeigebereich ausfüllen.

Beispiel ansehen …
section {
  width: 100%;
  min-height: 90vh;
}
Durch die Angabe einer Breite von 100% und einer Mindesthöhe von 90vh, d. h. 90% der Viewporthöhe erstreckt sich die section nahezu über den gesamten Viewport.
<section id="one">
  <h2>Überschrift</h2>
  <svg viewBox="0 0 410 260">
  </svg>  
</section>

Einige section-Elemente enthalten neben dem svg-Element noch eine Überschrift, bei anderen ist dies im svg enthalten.

Intro

Dieser Abschnitt besteht aus zwei CSS-Animationen:

  1. Der Kreis (#intro)
    1. verändert seine Geometrie-Attribute rx und ry
    2. erhält eine gelbe Füllung
    3. und einen blauen Rand
  2. Parallel wird das dazugehörende SVG-Markup eingeblendet
Beispiel ansehen …
#intro {
  animation: changing 20s infinite;
}
 
@keyframes changing {
	15% {
		fill: black;
		stroke: var(--blue);
		stroke-width: 0;		
		cx: 0px;
		cy: 0px;
	}
	
	20% {
		fill: black;
		stroke: var(--blue);
		stroke-width: 0;		
		cx: 75px;
		cy: 75px;
	}
	
	35% {
		fill: black;
		stroke: var(--blue);
		stroke-width: 0;		
		cx: 75px;
		cy: 75px;
	}
	
	40% {
		fill: var(--yellow);
		stroke: var(--blue);
		stroke-width: 0;		
		cx: 75px;
		cy: 75px;
	}
}


SVG ist …

… eine Auszeichnungssprache für grafische Inhalte, die in HTML integriert und mit Hilfe von CSS gestylt und animiert werden können.

Deshalb ist es keine Schande, Text und Überschriften weiterhin mit HTML auszuzeichnen und SVGs als externe Grafiken einzubinden.

Beachte: Auch SVG-Grafiken benötigen einen alt-Text, falls die Grafik nicht geladen werden kann oder soll.

Grundformen

Vektorgrafiken bestehen aus Grundformen wie Kreisen, Ellipsen und Rechtecken, aber auch Polygonen und Pfaden. Man kann die Größen in Geometrie-Attributen und die Darstellung mit Präsentationsattributen beliebig gestalten und auch animieren.

Stern mit Markierung der Eckpunkte ansehen …
<defs>
  <marker id="markerKreis" markerWidth="8" markerHeight="8" refx="4" refy="4">
    <circle cx="4" cy="4" r="2" />
  </marker>
</defs>
<style>

  #three polygon {
    marker-start: url(#markerKreis); 
    marker-mid: url(#markerKreis);
    animation: appear 20s infinite;
    stroke-dasharray: 960, 960; 
    stroke-dashoffset: 960;
  }
  #three marker { 
    fill: #dfac20; 
    stroke: #000; 
    stroke-width: 1;
  }

</style>

<polygon points="300,10 240,198 390,78 210,78 360,198" />

Der Stern ist ein Polygon, das neben der Füllung und der Randlinie stroke auch die Zwischenpunkte des Pfades – nämlich die Eckpunkte des Sterns – markiert. Das marker-Element kann mit CSS gestaltet und natürlich ein- und ausgeblendet werden.

Text in SVG

Neben grafischen Elementen kannst du auch text-Elemente einsetzen, gestalten und animieren.

Die viewBox

Einer der großen Vorteile von SVG ist die Skalierbarkeit. Dies kann über die Veränderung der Geometrie-Attribute, aber auch mit einem Ein- und Auszoomen aus der viewBox erreicht werden.

Diese Animation wurde mit SMIL durchgeführt.

Schreinerei Meier

https://commons.wikimedia.org/wiki/File:WOODlab_Meise_Wonder_Wood_Wall_1.jpg


CSS: horizontales Scrollen

Das HTML-Markup ist nun schon bekannt: mehrere section-Elemente, die per CSS nun aber horizontal angeordnet werden:

horizontales Scrollen ansehen …
body {
  overflow-y: hidden;
}

.slider {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: scroll;
}

section {
  border-right: thin solid white;
  padding: 1rem;
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  text-align: center;
}


Siehe auch

  • Daten­visualisierung
    • Balken- und Kreisdiagramme
    • Liniendiagramme
     
  • interaktive Landkarten
     

Weblinks

  1. ↑ webkrauts: Interactive Storytelling von Mathias Schäfer, (01.12.2013)
  2. ↑ t3n.de: Multimedia-Storytelling: Diese 25 beeindruckenden Artikel musst du gesehen haben (07.12.2013)
  3. ↑ Elevator Pitch(de.wikipedia.org)
  4. ↑ Youtube: SVG Tutorial (Level 1) - You, me and SVG (englisch)
  5. ↑ Medialoot: Infographic: How to Create an SVG


Abgerufen am 28.06.2025
von "http://wiki.selfhtml.org/wiki/OnePager/Interactive_Storytelling"