Hannes Fuß – Visual Media

Presenting with WebApps

If you talk about WebApps, you might consider to present with a WebApp. My first attempt worked really well. Here is the result (with blind text and dummy pictures).

Yesterday I had the opportunity to give a short lecture at a seminar of co.patient for a health insurance company. In addition to analyses of the client's existing digital offerings, the participants wanted to discuss proposals for new possibilities of digital communication media. So it was obvious to throw WebApps into the ring and point to PWA on the horizon.

Of course, Powerpoint was out of question for this presentation. On a long weekend I sat down and put together the technical basis for the HTML presentation on one day and the contents on the other.

For the substructure I used JavaScript components, which are also used on my project pages: jQuery and Swiper. The Swiper API offers extensive possibilities to control the behaviour of the slides. The jquery-fullscreen-plugin is built in for the fullscreen-mode on desktop computers. The icons are written as inline SVGs directly into the HTML source code and are animated via jQuery and the CSS file.

I didn't want to use a big Lightbox-component for the enlargement of the integrated pictures, therefore I used a simple solution just with 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();
	});
});

For enlargement, the image is set as the background image of an otherwise empty and invisible div. #overlay will be faded in and out, #overlay-inner has a margin for the distances and gets the clicked picture as background.

The WebApp

To make the whole thing a WebApp, a Cache Manifesto is attached and referenced in the head of the HTML file.

<!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">

The first lines of index.html

In the .htaccess of the domain (here subdomain) the following line must be inserted:

AddType text/cache-manifest .appcache

First Apache needs to be explained that xxx.appcache is a manifest file

I am extremely satisfied with the speediness and smoothness of the result. The whole thing is responsive and runs in every reasonably modern browser. Navigation is done via swipes on touchscreens, arrow keys on the keyboard, the icons for forward and backward, the menu behind the burger or the dots above. That should do it.

The code and especially the CSS could still be tidied up, I also discovered a few minor bugs. For the next lecture I'll retouch it. In the long term I plan to integrate a presentation engine into this MODX installation, which spits out WebApp presentations and offers a few additional features for convenient editing.

In case you want to try yourself and if you know a little HTML: Here is a zip-Archive of the Dummy-WebApp-Presentation for testing

2017-12-13 ∙ WebApps

Comments (0)

Write a comment ...