WEBAPPSMEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFTPROF. DR. MANFRED THALLERJONAS SCHOPHAUS | UNI KÖLN | WS 2012

AGENDA1. Native versus webbasierte Apps2. HTML5 & CSS3

1. Media Queries2. Geolocation3. Offline Data Storage4. WebKit Animations

3. jQuery Mobile4. WebApps nativ

ALTERNATIVE?

WEBAPPS VS. NATIVE APPS

DARUM WEBAPPSKeine Installation.Keine Updates.Ein Produkt, alle Plattformen!

TECHNOLOGIENWEBBASIERTE APP

HTML5CSS3JavaScript

NATIVE APP

Objective C Java Visual C++...

...

TECHNOLOGIENWEBBASIERTE APP

Eine Codebase bedient97% aller mobilen Endgeräte.

NATIVE APP

(WebKit)

Mehrere Codebases, geringerer Gesamtanteil.

Quelle: Franke/Ippen: Apps mit HTML5 und CSS3. Bonn 2012.

NACHTEILE GEGENÜBER NATIVEN APPSEingeschränkter Zugriff auf Hardware.Schlechtere Performance.Keine OS-integrierten Funktionen: Ausführen im Hintergrund, Notifications etc.Möglicherweise schwerer zu vermarkten als Apps in zentralisierten AppStores.

CHECKLISTE Zugriff auf geschütze

Hardwarekomponenten? Kamera, Mikrofon...

Geschwindigkeit/Performance? Grafik, Hardwarebeschleunigung

Offline-Funktionalitäten? Target Devices? Kenntnisse in relevanten

Programmiersprachen? Monetarisierung

HTML5 & CSS3

WEB(APP) TECHNOLOGIES

RESPONSIVE WEBDESIGNStyling angepasst an Ausgabegerät.

RESPONSIVE WEBDESIGN

Unterschiedliche Stylesheets für unterschiedliche Bildschirmgrößen.

CSS3: MEDIA QUERIES

Unterschiedliche Stylesheets für unterschiedliche Bildschirmausrichtungen.

CSS3: MEDIA QUERIES

Media Queries sind auch im Link-Tag in HTML möglich.

CSS3: MEDIA QUERIES

CSS3: MEDIA QUERIESweitere Medienmerkmale:• aspect-ratio

• color (Farbtiefe in Bit)

• monochrome (Graustufen in Bit)

• resolution (dpi)

GEOLOCATION MIT HTML5navigator.geolocation ermöglicht Positionsbestimmung über JavaScript.

GEOLOCATION MIT HTML5Bewegungen tracken mit geolocation.watchPosition.

GEOLOCATION MIT HTML5Eigenschaften des position-Objekts:• position.coords.accuracy (Radius in Metern)

• position.coords.altitude (Meter über NN)

• position.coords.altitudeAccuracy

• position.coords.heading (Winkel zu N)

• position.coords.speed

WEBKIT TRANSITIONSBestimmen Länge und Art und Weise der Änderung von Elementeigenschaften.

WEBKIT TRANSITIONTransition Styles:ease-in: Animation startet langsamease-out: Animation wird am Ende abgebremstease-in-out: Kombinationlinear: Animation verläuft gleichmäßig

Änderung der Eigenschaft (durch DOM-Manipulation) löst Animation aus.

WEBKIT ANIMATIONErweiterung von webkit transition, mit der Möglichkeit Keyframes zu setzen.

WEBKIT ANIMATION

OFFLINE, UND JETZT? Das Cache-Manifest: • Liste mit Dateien, die offline vorgehalten werden sollen.• Max. 5 MB.

Das localStorage-Objekt:• Persistente Speicherung von Key:Value-Paaren auf dem

Gerät.

HTML5: DAS CACHE-MANIFESTSichert Offline-Funktionalität.

Weitere Vorteile:• Geschwindigkeit.• Server-Auslastung minimieren.

Struktur:• CACHE: nach dem ersten Laden• NETWORK: unter allen Umständen vom Server• FALLBACK: wenn Ressource nicht verfügbar ist

Beispielmanifest.

HTML5: DAS CACHE-MANIFEST

HTML5: DAS CACHE-MANIFESTEinbindung in HTML-Dokument:

AppCache-Objekt: window.applicationCache

HTML5: LOCAL STORAGEPersistente Speicherung auf dem Gerät.Alternative zu Datenbank auf Webserver (MySQL & Co).Key:Value-Paare.

localStorage.setItem(key, value);localStorage.getItem(key);localStorage.removeItem(key);localStorage.clear();

Analog dazu: sessionStorage.

JQUERY MOBILE

WEBAPP FRAMEWORKS

JQUERYFramework/Klassenbibliothek für JavaScript.

Erhebliche Erleichterung von:• Elementselektion (ähnlich CSS)• DOM-Manipulation• Realisation von Effekten und Animationen• AJAX Requests

Download: http://code.jquery.com/jquery-latest.min.js

JQUERY SYNTAX

Codebeispiel: An alle h1-Elemente einen Button anhängen. Wie von CSS gewohnt funktionieren auch:

JQUERY EVENTSEventHandler hinzufügen mit ‚on‘:

Unterstützte Events:dblclick, hover, mousemove, mousedown, mouseup etc.

HTML-ELEMENTE MANIPULIERENEin- und Ausblenden von Elementen:.hide().show().toggle()

Animiertes Ein- und Ausblenden:.slideToggle() .fadeIn().slideUp() .fadeOut().slideDown() .fadeToggle()

HTML-ELEMENTE MANIPULIERENAttribut-Funktionen:.attr({name,wert}).addClass(name).removeClass(name).toggleClass(name)

DOM-Maniupulation:.prepend(code) - HTML am Anfang des Tags einfügen.append(code) - HTML am Ende des Tags einfügen

AJAX REQUESTSDaten von Webservern im JSON-Format laden:

JQUERY MOBILEInterface Framework.Passend zu sämtlichen nativen UIs und Gerätegrößen.Handling von Navigation und Animation.

Einbindung von Stylesheet und jQMobile-Library:

JQUERY MOBILEDefinition von App-Views als Div-Container mittels data-role-Attribut:

Div-Block für eine einzelne Seite.

JQUERY MOBILE

Beispiel einer mit jQuery mobile erstellten App

JQUERY MOBILE: INTERFACE ELEMENTEHeader & Footer:

Navbar im Footer:

jQm-Standard-Icons

JQUERY MOBILE: INTERFACE ELEMENTE

JQUERY MOBILE: INTERFACE ELEMENTE

Header mit Back-Button:Button mit href="index.html"

Liste:

PHONE GAP

WEBAPPS IM APPSTORE?

PHONE GAPOpen-Source-Framework.Wandelt HTML+JavaScript-basierte Webapp in native App um (verschiedene Plattformen).Ermöglicht einfachen Zugriff auf Kamera und Mikrofon.

PHONE GAP: NATIVE BUILD• PhoneGap.js einbinden• PhoneGap Paket für die jeweilige Entwicklungsumgebung

installieren • Alternativ: Phone Gap Build

PHONE GAP: KAMERAZugriff auf Kamera über navigator.camera-Objekt:

APPLE HOMESCREEN OPTIMIERUNG<meta name="apple-mobile-web-app-capable" content="yes"/>im head ermöglicht das Verknüpfen der Website mit einem Home-Screen Icon auf iOS-Geräten.

Setzen des Icons:<link rel=„apple-touch-icon“ href=„img/iphone-icon.png“/>

APPLE HOMESCREEN OPTIMIERUNGWeitere Optionen:

StatusBar:<meta name=„apple-mobile-web-app-status-bar-style“ content=„black“>, möglich sind: default, black, translucent

Splash-Screen:<link rel=„apple-touch-startup-image href=„img.png“>