Zurück in die Zukunft - Wir machen Kinderseiten · Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft Es wurde irgendwie festgestellt … WEB APP Übermorgen

Zurück in die Zukunft

Progressive WebApps in der Kinderseitenlandschaft

Hamburg 2018, Darja Martens und Stefan R. Müller, Suchmaschine Blinde Kuh

Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

Wirrwarr an Begriffen entzaubern

Application

PWA


Es wurde irgendwie festgestellt …

WEB

APP

Übermorgen

Gestern

Heute

Morgen

Vorgestern

langweilig cool zu Hause, Spielen, Freunde Schule, Lehrer

Smartphone erfunden


Hurra !!! Das Web ist endlich tot !!!

Zitat: „THE WEB IS DEAD. LONG LIVE THE INTERNET“ Wired-Chefredakteur Chris Anderson – August 2010


Hurra !!! Das Web ist endlich tot !!!

Zitat: „THE WEB IS DEAD. LONG LIVE THE INTERNET“ Wired-Chefredakteur Chris Anderson – August 2010

Vivre le Freies Internet

von wegen …


Der Vergleich hinkt, …


Es sind Paralleluniversen …

APP

Übermorgen

Gestern

Heute

Morgen

Vorgestern

WEB

Webbasierende Apps wegen Datenaustausch

Datenbanken

WebApps Direkt in den Browser aufgerufen

Hybride Apps Web in einem extra „Fenster“

Native

Co

de

(JAV

A)

We

bSi

te (

HTM

L)

Progressive WebApps (PWA) Über den Browser installieren

Icon


Was ist eigentlich genau „mobil“ ?


Desktop PC

Smartphone

Wischen mobil privat cool neu

Tippen, Klicken Schule, Arbeit(sgerät) old scool = Sperrmüll

Programme Tools, Anwendungen (Applications)

Programme Tools, Anwendungen (APPs, frz: appli)

Har

dw

are

Soft

war

e

LAN WLAN 5G Internet

Differenzierung mobiler Endgeräte

3G


Desktop PC

Smartphone

Wischen mobil privat cool neu

Tippen, Klicken Schule, Arbeit(sgerät) old scool = Sperrmüll

Laptop/Notebook

etwa nicht mobil?

Programme Tools, Anwendungen (Applications)

Programme Tools, Anwendungen (APPs, frz: appli)

Har

dw

are

Soft

war

e

LAN WLAN WLAN 5G Internet

Klare Differenzierung mobiler Endgeräte ?

3G 5G 3G mit Wlan und Modem (oder gar mobilen Wlan-Router via Smartphone)

„mobil“ oder doch lieber „mobile“ ?

PHONE TABLET

LAPTOP

wifi (WLAN)

mobile connection

mobil, aber nicht mobile

mobil, aber nicht mobile

kann mobil, muss aber nicht mobil genutzt werden

PC Workstation

TV

mobil und mobile

mobil und mobile

kann mobil sein, kann mit Modem ein mobile sein

nicht mobil, und auch

nicht mobile

nicht mobil, kann aber mit

Modem ein mobile sein

nicht mobil, aber neuerdings auch WLan

nicht mobil, und auch nicht

mobile

Betriebssystem Android, iOS

iPhone, Windows Android, iOS,

iPad, Windows Windows, Linux,

Android, Mac Windows, Linux,

Android, Mac SmartTV, Android

Nicht alles was „mobil“ sein könnte, ist auch ein „mobile“, und nicht immer ist ein „mobile phone“ auch eine „mobile connection“. Android ist nicht immer ein „mobile“ und Windows kann auch ein „mobile“ sein.



Desktop PC

Smartphone

Laptop/Notebook

Har

dw

are

Bet

rieb

ssys

tem

Klare Differenzierung der Betriebssysteme

Android (google)

Tablet

WindowsMobile

Windows (microsoft)

Linux

ChromeOS (google)

Mac OS (apple)

iOS(apple)

(nokia)

R. I. P.


Aber das ist vorbei …

„Es wächst zusammen, was zusammen gehört.“


Symbiosen – Beispiel Apple (Hardware)

Tablet Keyboard Notebook

Auch andere Hersteller bieten eine Bluetooth-Tastatur an

Manche Firmen bringen Hybride auf den Markt, die eigentlich Notebook sind, aber deren Tastatur sich abnehmen lässt, oder umgekehrt.

Ein Tablet ist irgendwie ungeeignet für den Büroalltag.

Lösung: bluetooth


Desktop PC

Smartphone

Laptop/Notebook

Har

dw

are

Bet

rieb

ssys

tem

Symbiosen – Beispiel Google (Betriebssystem)

Android (google)

Tablet

ChromeOS (google)

Google Fuchsia Ein Betriebssystem für alle Endgeräte


Smartphone Phone Har

dw

are

Bet

rieb

ssys

tem

Symbiosen – Beispiel Samsung (Hardware)

Android (google)

(ab Galaxy S8)

Phone wird auch zum Desktop PC

Samsung DeX

USB USB HDMI

Monitor oder TV Maus Tastatur


Symbiosen – Beispiel Samsung (Hardware)

Smartphone Desktop (womöglich mit TV als Monitor)

Handy


Was genau ist die „mobile“ Entwicklung?


Entwicklungsschritt 1 – Die Hardware ist da

Hier ist deine Musik. Hier sind deine Emails. Hier ist … das Internet. Und hier ist ein Anruf. Auf deinem iPhone.

Raumschiff Enterprise – Das nächste Jahrhundert

2007 - Werbungslogan von apple für das erste iPhone:

Krass … Das Internet wird mobil, denn es passt endlich in den Tricorder.


Entwicklungsschritt 2 – Die Software kann mehr

Es gibt für fast alles eine APP. Nur auf deinem iPhone.

2008 - Werbeslogan von apple für das zweite iPhone:

Besser als die Technik, sind für den Nutzer die Möglichkeiten durch die Vielfalt der Anwendungen!


Jede neue Lösung schafft neue Probleme

Entwicklungsschritt 3 – Das Design ändert sich

1 Während Phones und Tablets noch recht starr sind, was das Design betrifft, müssen sich nun Webseiten den Endgeräten anpassen. Responsives Design (reagierendes Design), bzw Adaptives Design

2 Unterschiedliche Anforderung bei Desktop-Arbeitsplätzen, Notebooks, Smartphones, Tablets und anderen Endgeräten. (Smartes Design)

3 Die Mächtigkeit der Hardware, der Browser und der Betriebssysteme ist unterschiedlich. Nicht überall geht Alles. Z.B.: Ein Smartphone lässt sich kippen, ein Monitor zwar auch, aber das Bild kippt mit.

Responsives Design vs. Adaptives Design


Responsives Design

Geht von der Hardware z.B.: Bildschirmauflösung aus. (CSS-Lösung)

@media only screen and (max-width: 700px) {

Der Bildschirm ist nicht breiter als 700px }

Adaptives Design

Geht vom Browser aus. (Javascript-Lösung)

if ( navigator.userAgent.indexOf( 'Chrome' ) > -1 ) {

Es ist der Chrome-Browser }

Problem: Keine Lösung ist vorausschauend oder gar 100% optimal

„mobile first“ meint jetzt was genau?


1 Ausgangslage ist nicht mehr Desktop, sondern mobile Endgeräte

2 responsive design (adaptive design) - Ein Angebot kann sehr gut auf einem Smartphone oder Tablet laufen, aber eben auch auf dem Desktop oder TV und es sieht auch gut im Druck aus, sofern es ausgedruckt werden sollte. (Aber, es geht hier vor allem um Glasplatten.)

3 Das Angebot ist nicht nur optisch schlank, sondern auch strukturell (und eigentlich auch in der Logik und im Inhalt).

4 Es wird nicht alles HTML und Medien in allen denkbaren Auflösungen erst einmal ausgeliefert, und dann nach Belieben mit CSS wegeschaltet, was je nach Endgerät nicht zu sehen sein soll.

„mobile first“ bedeutet dann nicht:

Titel (groß)

Men

u

Teaser (extern)

Footer

Teaser (intern)

Muss weg bei Tablet und Phone

Titel (klein)

Muss weg bei Desktop

Muss weg bei Phone

Muss weg bei Desktop

Muss weg bei Tablet und Phone

Muss weg bei TV

Denn, zu viel HTML (Struktur) und CSS (Design) = viel zu schwer, viel zu langsam und zu viel Stromverbrauch !!!

Text


Das alte Desktop-Design

„mobile first“ verlangt Dynamik

Titel (groß)

Men

u

Teaser (extern)

Footer

Teaser (intern)

Die einzelnen Bauteile werden nach Bedarf mit Javascript nachgeladen, bzw. dynamisch umgewandelt

Text Titel

Text

Titel (normal)

Men

u

Footer

Text

Titel (klein)

Footer

Text


Desktop

Tablet

Phone

„mobile first“ bedeutet für Webangebote somit ….

Struktur Design

Hypertext Markup Language Cascading Style Sheets

Logik

Daten

Extended Markup Language

Daten

JavaScript Object Notation


Und was ist eine „mobile APP “ ???

Programmierung


1 Es ist ein Programm, das z.B.: in Java programmiert wurde. Native App, weil native Code.

2 Das Programm wird aus den AppStores bezogen, wobei sich der Nutzer dort registrieren muss.

3 Eigentlich hat es auch nichts mit Internet zu tun.

a Es sei denn, es greift auf die Daten eines Internet-Dienstes zu, etwa über einen Mail-, Web- oder andere Server

b Es sei denn, es ist eigentlich nur ein native Rahmen um eine Webanwendung - Hybride App

Java ist nicht Javascript

Was ist eine „Hybride APP “ ???

Native App


Eine Hybride App ist ein native Rahmen um eine Webanwendung herum, die selbst im Internet als Website existiert, und/oder deren Dateien als HTML5-Projekt auf dem Endgerät liegen.

WebClient

Struktur Design

Hypertext Markup Language Cascading Style Sheets

Logik Daten

JavaScript Object Notation

World Wide Web

Android System WebView Seit Android 4.3 (Jelly Bean) eigene Komponente und nicht mehr fester Bestandteil des Android Systems. Grund waren ständige Sicherheitslücken und dadurch notwendige Udates und Upgrades.

WebApps der ersten Generation

Was ist eine „Webbasierende APP “ ???

Native App


Eine webbasierende App ist eine App in native Code, die Daten aus dem Web bezieht, bzw Daten in das Web sendet.

World Wide Web

Immer mehr Apps verlangten die Berechtigung „Internet-Zugriff“

Eingabe

Verarbeitung

Ausgabe

Daten

DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA …

Was ist eine „Launcher APP “ ???

Native App


Macht nichts anders als eine Internetadresse (URL) an einen Browser auf dem Endgerät zu übergeben.

World Wide Web

Viele Apps sind irgendwie native, aber eigentlich eher nur ein „Link“ zu einer Website

edge Microsoft

firefox Mozilla

safari Apple

Chrome Google

URL Teilen

Die Touchicons


Wie bei einer native App sind die Touchicons (in den verschiedensten Größen) auch bei einer hybriden App innerhalb der App deklariert.

Native Code

WebView Objekt

HTML5

App

Mit nur einem Klick bin ich da !

HTML5

Die Touchicons


Bei einer echten WebApp werden die Icons in der Webseite definiert.

WebApp

Mit nur einem Klick bin ich da !

HTML5

Die Touchicons in der Webseite


Für den Safari-Browser bot Apple ab 2016 die apple-touch-icon-Deklaration an:

<link

rel="apple-touch-icon"

href="touch-icon-iphone.png“

>

<link


sizes="152x152"

href="touch-icon-ipad.png“

>

<link

rel="apple-touch-icon“

sizes="180x180“

href="touch-icon-iphone-retina.png“

>

<link


sizes="167x167"

href="touch-icon-ipad-retina.png“

>

Wird eine solche Webseite im iPhone oder im iPad geöffnet, erlaubt Safari, das Icon direkt

auf den Home-Screen zu legen.

add-to-screen

180x180

167x167

152x152

Die Touchicons in der Webseite


add-to-screen

Die Vorteile:

1 Es ist keine Installation über einen App-Store notwendig. Also auch keine Nutzer-Registrierung. Kinder dürfen anonym bleiben.

2 Es sind keine hybriden Apps, oder Launcher-Apps notwendig, nur um einen Link vom Screen des Smartphones zur gewünschten Webseite zu haben. Also keine doppelte Entwicklung.

3 Es wird kein extra Speicher benötigt, der über die Abspeicherung der Icons hinausgeht.

4 WebApps haben keinen Zugriff auf das System des Endgerätes.

6 Es ist kinderleicht. Auch Kinder können die Touch-Icons ihrer Lieblingsseiten auf ihr Handy „installieren“ und „deinstallieren“.

5 Die Installation ist kostenlos.

WebApps Beispiele


NASA Facebook Google Maps Twitter

Pinterest Starbucks Welt.de Angela Merkel

WebApps Beispiele für Kinder


WAS IST WAS Liliane Susewind Wendy Bibi Blocksberg

Bibi&Tina SWR Kindernetz Legakids Blinde Kuh

Mehrere WebApps von einem Anbieter


Suchmaschine Zufallsgenerator Videos Nachrichten Links

www.blinde-kuh.de

Progressive WebApp – Das Manifest


2017 legen beim W3C Google, Mozilla, Microsoft und Apple Standards für das Manifest vor

<link rel="manifest" href="./pwa-manifest.json" type="application/manifest+json" >

HTML

Manifest

Blinde Kuh - Suchmaschine

1 Touch-Icons

2 Name

3 Internet-Adresse

https://www.blinde-kuh.de/pwa/

pwa-manifest.json

Was steht denn hier eigentlich drin ???

{display: "standalone", orientation: "any", scope: "/pwa/", icons: [ {src: "./assets/icons/icon-48x48.png", sizes: "48x48", type: "image/png„ }, {src: "./assets/icons/icon-96x96.png", sizes: "96x96", type: "image/png„ }, {src: "./assets/icons/icon-144x144.png", sizes: "144x144", type: "image/png"}, {src: "./assets/icons/icon-192x192.png", sizes: "192x192", type: "image/png"}, {src: "./assets/icons/icon-512x512.png", sizes: "512x512", type: "image/png„ } ], start_url: "/pwa/index.html?pwa", description: "Suchmaschine für Kinder - Blinde Kuh", name: "Blinde Kuh - Suchmaschine", short_name: "Blinde Kuh - Suchmaschine", theme_color: "#154787", background_color: "#154787" }

Progressive WebApp – Das Manifest


Das Format des PWA-Manifestes ist JSON (JavaScript Object Notation)

nur gucken, nicht auswendig lernen

Normale WebApp – Kein Internet


Wenn es keinen Internetanschluß gibt, wird im Browser eine Fehlerseite gezeigt.

Internet An Internet Aus

Sieht irgendwie

ein bisschen doof aus

Progressive WebApp – Die Offlinevariante


Bei einer PWA gibt es eine Offline-Seite, die dann aktiv wird, wenn kein Internetzugriff besteht

Internet An Internet Aus

CACHE

ServiceWorker(In) in JavaScript

Webserver

Progressive WebApp – Mit Sicherheit


Vor allem Google forciert das Thema, dass Anbieter von HTTP aus HTTPS umstellen sollen

HTTP Hypertext Transfer Protocol

HTTPs Hypertext

Transfer Protocol

Secure

unsicher, weil Daten werden klar übertragen

„sicher“, weil Daten werden

verschlüsselt

Progressive WebApp – Zusammenfassung


Progressive WebApp – Install-Banner


Browser wie Chrome zeigen bei einer progressiven WebApp eine Installationsaufforderung

Installierte WebApp Webseite Install-Banner

Progressive WebApp – WebAPK


Der Chrome-Browser kann auf Android-Gräten eine APP generieren

Native App Webseite

APK

Google Chrome

Gepackte APP

öffnen

erzeugen

entpacken

Progressive WebApp versus Native, Hybride App


Die Vorteile:

2 Es ist keine mehrfache Entwickung notwendig.

3 Eine installierte PWA hat ca. 60 Kbyte. Eine hybride App hat meist schon 2 Mbyte.

4 Die App steht nicht mehr in Konkurrenz zur eigenen Webseite.

5 Die progressive WebApp wird Browser und Geräte -unabhängig.

6 Die progressive WebApp ist auch auf einem Windows PC installierbar.

7 Die progressive WebApp ist durch die Webseite suchmaschinenoptimiert.

1 Es ist keine Installation über einen App-Store notwendig.

Eine kleine Statistik am Endeh


2012 ist Chrome für den mobilen Markt noch bedeutungslos

2017 ist Chrome mit knapp 60% Marktführer

2018 spielt Firefox keine Rolle auf dem mobilen Markt

2018 liegt Safari bei 14%, und lag gemütlich all die Jahre um die 20%

2018 liegt der Absatz anteilig im Mobilen Markt von Android-Geräten bei 83% und von iOS-Geräten bei 16%, das sind zusammen 99%

Richtungsvorgaben scheitern im Alltag


Der Mobilmarkt hat sich nahezu unberechenbar weiterentwickelt und wird dies weiter tun.

Documents

Zurück in die Zukunft - Wir machen Kinderseiten · Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft Es wurde irgendwie festgestellt … WEB APP Übermorgen