webapps

1. webapps Medien zwischen technologie und gesellschaft Prof. Dr. manfred Thaller Jonas Schophaus | Uni Köln | WS 2012

2. Agenda • Native versus webbasierte Apps • HTML5 & CSS3 • Media Queries • Geolocation • Offline Data Storage • WebKitAnimations • jQuery Mobile • WebApps nativ

3. Webapps vs. Native apps AlternatiVE?

4. Darum webapps • Keine Installation. • Keine Updates. • Ein Produkt, alle Plattformen!

5. Technologien Webbasierte App Native App Objective C Java Visual C++ ... • HTML5 • CSS3 • JavaScript ...

6. Technologien Webbasierte App Native App (WebKit) Eine Codebase bedient 97% aller mobilen Endgeräte. Mehrere Codebases, geringerer Gesamtanteil. Quelle: Franke/Ippen: Apps mit HTML5 und CSS3. Bonn 2012.

7. Nachteile gegenüber nativen Apps • Eingeschrä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.

8. Checkliste • Zugriff auf geschütze Hardwarekomponenten? Kamera, Mikrofon... • Geschwindigkeit/Performance? Grafik, Hardwarebeschleunigung • Offline-Funktionalitäten? • Target Devices? • Kenntnisse in relevanten Programmiersprachen? • Monetarisierung

9. Web(App) Technologies HTML5 & CSS3

10. Responsive Webdesign • Styling angepasst an Ausgabegerät.

11. Responsive Webdesign

12. CSS3: Media Queries Unterschiedliche Stylesheets für unterschiedliche Bildschirmgrößen.

13. CSS3: Media Queries Unterschiedliche Stylesheets für unterschiedliche Bildschirmausrichtungen.

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

15. CSS3: MEDIA QUERIES • weitere Medienmerkmale: • aspect-ratio • color(Farbtiefe in Bit) • monochrome (Graustufen in Bit) • resolution (dpi)

16. Geolocation mit html5 • navigator.geolocationermöglicht Positionsbestimmung über JavaScript.

17. Geolocation mit Html5 • Bewegungen tracken mit geolocation.watchPosition.

18. Geolocation mit Html5 • Eigenschaften 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

19. WebkitTransitions • Bestimmen Länge und Art und Weise der Änderung von Elementeigenschaften.

20. Webkit Transition • Transition Styles: • ease-in: Animation startet langsam • ease-out: Animation wird am Ende abgebremst • ease-in-out: Kombination • linear: Animation verläuft gleichmäßig • Änderung der Eigenschaft (durch DOM-Manipulation) löst Animation aus.

21. Webkit Animation • Erweiterung von webkittransition, mit der Möglichkeit Keyframes zu setzen.

22. Webkit Animation

23. 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.

24. HTML5: Das Cache-Manifest • Sichert 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

25. HTML5: Das Cache-Manifest Beispielmanifest.

26. HTML5: Das Cache-Manifest • Einbindung in HTML-Dokument: • AppCache-Objekt: • window.applicationCache

27. html5: localstorage • Persistente 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.

28. Webapp Frameworks jQuery Mobile

29. jQuery • Framework/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

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

31. Jquery Events • EventHandler hinzufügen mit ‚on‘: • Unterstützte Events: • dblclick, hover, mousemove, mousedown, mouseupetc.

32. HTML-Elemente manipulieren • Ein- und Ausblenden von Elementen: • .hide() • .show() • .toggle() • Animiertes Ein- und Ausblenden: • .slideToggle() .fadeIn() • .slideUp() .fadeOut() • .slideDown() .fadeToggle()

33. HTML-Elemente manipulieren • Attribut-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

34. AJAX Requests • Daten von Webservern im JSON-Format laden:

35. jQuery Mobile • Interface Framework. • Passend zu sämtlichen nativen UIs und Gerätegrößen. • Handling von Navigation und Animation. • Einbindung von Stylesheet und jQMobile-Library:

36. Jquery Mobile • Definition von App-Views als Div-Container mittels data-role-Attribut: • Div-Block für eine einzelne Seite.

37. Jquery Mobile Beispiel einer mit jQuery mobile erstellten App

38. Jquery Mobile: Interface Elemente • Header & Footer: • Navbar im Footer:

39. Jquery Mobile: Interface Elemente jQm-Standard-Icons

40. Jquery Mobile: Interface Elemente • Header mit Back-Button: • Button mit href="index.html" • Liste:

41. WebApps im Appstore? Phone gap

42. Phone Gap • Open-Source-Framework. • Wandelt HTML+JavaScript-basierteWebapp in native App um (verschiedene Plattformen). • Ermöglicht einfachen Zugriff auf Kamera und Mikrofon.

43. Phone Gap: Native BuilD • PhoneGap.js einbinden • PhoneGap Paket für die jeweilige Entwicklungsumgebung installieren • Alternativ: Phone Gap Build

44. Phone Gap: kamera • Zugriff auf Kamera über navigator.camera-Objekt:

45. Apple Homescreen Optimierung • <metaname="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“/>

46. Apple Homescreen Optimierung • Weitere Optionen: • StatusBar: • <metaname=„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“>