Hannes Fuß – Visuelle Medien

Präsentieren mit WebApps

Wenn man über WebApps spricht, kann man ja auch gleich mit einer WebApp präsentieren. Schon der erste Versuch funktionierte richtig gut. Hier das Ergebnis (mit Blindtext und Dummy-Bildern).

Gestern hatte ich die Gelegenheit, im Rahmen eines Seminars von co.patient für eine Krankenkasse einen kleinen Vortrag zu halten. Neben Analysen der bestehenden digitalen Angebote war Wunsch der Teilnehmer, Vorschläge für neue Möglichkeiten digitaler Kommunikationsmedien zu diskutieren. Es lag also nahe, WebApps in den Ring zu werfen und auf PWA am Horizont zu zeigen.

Powerpoint kam für so eine Präsentation natürlich nicht in Frage. An einem zugegeben langen Wochenende habe ich mich daher hingesetzt und an einem Tag die technische Grundlage für die HTML-Präsentation, am anderen die Inhalte zusammengestellt.

Für den Unterbau habe ich auf JavaScript-Komponenten zurückgegriffen, die z. B. auch auf den Projektseiten verwendet werden: jQuery und Swiper. Die Swiper-API bietet sehr weitreichende Möglichkeiten, das Verhalten der Slides zu steuern. Für den Fullscreen-Modus auf Desktop-Rechnern ist das jquery-fullscreen-plugin eingebaut. Die Icons sind als Inline-SVG direkt in den Quellcode der HTML geschrieben und werden über jQuery und die CSS-Datei animiert.

Für die Vergrößerung der eingebundenen Bilder wollte ich nicht extra noch eine große Lightbox-Komponente einsetzen, daher eine einfache Lösung mit Bordmitteln von jQuery:

// img overlay

$("img.zoom").click(function () {
	$("#overlay").fadeTo(400, 1);
	$("#overlay-inner").css({
		backgroundImage: "url(" + this.src + ")"
	});
});

$("#overlay-inner").click(function () {
	$("#overlay").stop().fadeTo(400, 0, function () {
		$(this).hide();
	});
});

Für die Vergrößerung wird das Bild als background-image eines sonst leeren und unsichtbaren Divs eingesetzt. #overlay wird ein- und ausgeblendet, #overlay-inner hat eine margin für den Abstand außen und bekommt das angeklickte Bild als Hintergrund.

Die WebApp

Um das Ganze zu einer WebApp zu machen, ist ein Cache Manifest beigefügt und im Head der HTML-Datei referenziert.

<!doctype html>
<html manifest="presentation.appcache">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

Die ersten Zeilen der index.html

In der .htaccess der Domain (hier Subdomain) muss folgende Zeile eingefügt werden:

AddType text/cache-manifest .appcache

Apache muss man erst erklären, dass xxx.appcache eine Manifest-Datei ist

Die Schwuppdizität des Ergebnisses finde ich äußerst zufriedenstellend. Das Ganze ist responsiv und läuft in jedem einigermaßen aktuellen Browser. Die Navigation erfolgt über Swipes auf Touchscreens, Pfeiltasten auf der Tastatur, die Icons für Vor und Zurück, das Menü hinter dem Burger oder die dots oben. Das sollte reichen.

Der Code und vor allem die CSS könnte noch aufgeräumt werden, ein paar kleine Bugs habe ich auch entdeckt. Beim nächsten Vortrag setze ich mich nochmal ran. Spätestens bei der übernächsten Gelegenheit plane ich, eine Präsentations-Engine in diese MODX-Installation zu integrieren, die WebApp-Präsentationen ausspuckt und ein paar Zusatzfeatures für bequemes Editieren bietet.

Falls ihr auch mal probieren wollt und etwas HTML könnt: Hier die Dummy-WebApp-Präsentation zum Ausprobieren als zip-Archiv

13.12.2017 ∙ WebApps

Kommentare (0)

Kommentar schreiben ...