Web Apps

Falko Braune
Präsentation - Hauptseminar Web Engineering
Professur Verteilte und selbstorganisierende Rechnersysteme
Technische Universität Chemnitz - 19.12.2012
1.
2.
3.
4.
5.
6.
7.
Einleitung
Technologie
Bewertung
Widgets
Inter-App Kommunikation
Demo
Quellen
Falko Braune - Web Apps
2
Falko Braune - Web Apps
3

Situation

Ziele
◦ Immer und überall „online“
◦ Mobiles Internet (Smartphones, Tablets, Notebook, …)
◦ Bedürfnis auch unterwegs auf wichtige Anwendungen
zugreifen zu können
◦ auf mobile Geräte zugeschnittene Websites
◦ „App“ als Modewort
◦ viele verschiedene Betriebssysteme und App Anbieter
◦ Vereinfachung der Entwicklung und Verteilung von
mobilen Anwendungen
◦ Plattformunabhängigkeit
Falko Braune - Web Apps
4

Definition „Web App“:
(kurz für ‘Web Application‘)
Anwendung (App) für mobile Endgeräte, die über den
Browser des Gerätes geladen und genutzt wird

soll möglichst einer normalen „nativen“ App in
nichts nachstehen

nutzten nur die Technologien die der Browser zur
Verfügung stellt (HTML, JavaScript, …)

Beispiele: Webmail, Webkalender, Online-Shops,
Spiele, …
Falko Braune - Web Apps
5






erweitert die Funktion eines mobilen
Endgerätes
sind auf spezielles Gerät oder
Betriebssystem zugeschnitten
werden nativ programmiert, in
Sprachen wie Java oder C++
weitflächige Abdeckung auf
möglichst viele Plattformen zeit- und
kostenintensiv
können auf alle Features des Gerätes zugreifen
werden über App Stores vertrieben (z.B. iTunes)
Falko Braune - Web Apps
6
Falko Braune - Web Apps
7









1992
◦
erste Version der HTML-Spezifikation
◦
CGI (Common Gateway Interface) als Teil des W3C-HTTP-Servers
◦
Netscape stellt JavaScript vor
◦
◦
Flash von Macromedia
Publikation der CSS Level 1 Recommendation
◦
◦
◦
Servlet Technologie von Sun Microsystems
PHP und ASP
HTML 4.0
◦
die Entwicklung von CSS3 wird begonnen
◦
„MIDlets“ als erster App-Vorgänger
◦
Ajax als Grundstein für Anwendungen wie Gmail
◦
Beginn der HTML5 Entwicklung
1994
1995
1996
1997
2000
2002
2005
2007
Falko Braune - Web Apps
8

HTML5

CSS (Cascading Style Sheets)

JavaScript
◦ ermöglicht das Einbinden von SVG und MathML
◦ neue Elemente zur Gruppierung und Strukturierung (z.B.
<section>,<nav>,<article>)
◦ Multimedia-Elemente (<audio>,<video>,<embed>,<canvas>)
◦ Erweiterung der Formulare
◦ interaktive Elemente (<details>,<summary>)
◦ DOM-Schnittstellen
◦ Anpassung an unterschiedliche Auflösungen oder Geräte
◦ Animationen von einfachen Übergängen bis hin zu aufwändigen
3D-Transformationen
Falko Braune - Web Apps
9

Was können Web Apps

Was können sie nicht

Frameworks
◦ Offline-Modus
◦ bereits einige Hardwarekomponenten ansprechbar (Kamera,
GPS-Ortung, Beschleunigungsmesser)
◦ viele andere Hardwarekomponenten noch nicht unterstützt
(Gyroskop, Bluetooth, …)
◦ WebGL
◦
◦
◦
◦
SenchaTouch
PhoneGap
iWebKit
jQuery mobile
Falko Braune - Web Apps
10
Falko Braune - Web Apps
11
+
+
+
+
+
+
-
Installation zusätzlicher Software meist überflüssig
in Aussehen, Funktionalität und Handhabung stehen sie nativen Apps in
fast Nichts nach
hohe Plattformunabhängigkeit
geringer Speicherplatzbedarf
kein Wartung und Aktualisierung durch den Nutzer notwendig
/ - keine einheitliche Vertriebsplattform
haben (noch) nicht vollen Zugriff auf alle Funktionen des mobilen
Endgerätes
Browser weisen trotz Standards Unterschiede in Interpretation auf
Abhängigkeit vom Webbrowser
Abhängigkeit vom Web App Betreiber
Updates werden durchgeführt, auch wenn der Nutzer dies vielleicht gar
nicht möchte
Anwendungen die vom Zugriff auf Serverdaten oder –dateien abhängig
sind, funktionieren nur mit aktiver Internetverbindung
Datenschutz
Falko Braune - Web Apps
12
Falko Braune - Web Apps
13

Definition (W3C): Widgets sind vollwertige

Stand-Alone oder eingebettet


Widget User Agent:
Laufzeitumgebung
Instantiated Widget: Widget,
das auf einem Widget User
Agent ausgeführt wird
Widget Package
Start Files
(custom / default)
Configuration
Document
Icon*
(custome / default)
Files / Folders*
Digital Signature*
Falko Braune - Web Apps
Widget Package

clientseitige Anwendungen die durch die
Verwendung von Webstandards wie HTML erstellt
und für die Verteilung verpackt wurden
14
http://www.w3.org/TR/widgets/#widget-packages
Falko Braune - Web Apps
15
http://dev.w3.org/2006/waf/widgets-land/figures/widget_arch.png

Beispiele
◦ iGoogle
◦ Netvibes
◦ Open Social
Falko Braune - Web Apps
16
Falko Braune - Web Apps
17

Widgets - Intercom
◦ Ansatz aus „Orchestrated User Interface Mashups Using W3C Widgets”
◦ Widget soll in der Lage sein
 eigene Veränderungen bemerkbar zu machen (Events)
 Eingaben entgegenzunehmen (Operations)
 Daten möglichst einfach auszutauschen

Android – Intents
◦
◦
◦
◦

Anfrage um Funktionen anderer Komponenten zu nutzen
werden an das Android System gesendet
Explizite und implizite Intents
können Daten enthalten
iOS - URL Handler
◦ Dienst den die App anderen Apps zur Verfügung stellt
◦ einige aber von Apple bereitgestellt: http, mailto, tel, sms
◦ Beispiel: fb://profile, fb://friends
Falko Braune - Web Apps
18
Falko Braune - Web Apps
19
Falko Braune - Web Apps
20
Falko Braune - Web Apps
21
[1] D. Heise, „Web-Apps und native Apps: ein Vergleich,“ ZDNet, 30 August 2011. [Online]. Available: http://www.zdnet.de/41555607/web-apps-und-nativeapps-ein-vergleich/. [Zugriff am 26 November 2012].
[2] M. Seer, „Web-Apps: 4 Gründe, warum ihnen die Zukunft gehört,“ t3n, 12 Mai 2011. [Online]. Available: http://t3n.de/news/web-apps-4-grunde-ihnenzukunft-gehort-309574/. [Zugriff am 26 11 2012].
[3] diverse, „JavScript,“ Wikipedia, 3 Dezember 2012. [Online]. Available: http://de.wikipedia.org/wiki/JavaScript. [Zugriff am 5 Dezember 2012].
[4] diverse, „Cascading Style Sheets,“ Wikipedia, 28 November 2012. [Online]. Available: http://de.wikipedia.org/wiki/Cascading_Style_Sheets. [Zugriff am 5
Dezember 2012].
[5] M. Caceres, „Widgets 1.0: The Widget Landscape (Q1 2008),“ W3C, 14 April 2008. [Online]. Available: http://dev.w3.org/2006/waf/widgets-land/. [Zugriff
am 6 Dezember 2012].
[6] M. Caceres, „Packaged Web Apps (Widgets) - Packaging and XML Configuration (Second Edition),“ W3C, 27 November 2012. [Online]. Available:
http://www.w3.org/TR/widgets/#user-agents. [Zugriff am 6 Dezember 2012].
[7] Y. Lechelle, „Inter-app communication and the future of app (re)discovery,“ appsfire, 23 Januar 2012. [Online]. Available: http://blog.appsfire.com/interapp-communication-and-the-future-of-app-rediscovery/. [Zugriff am 9 Dezember 2012].
[8] L. Vogel, „Android Intents - Tutorial,“ vogella, 17 July 2012. [Online]. Available: http://www.vogella.com/articles/AndroidIntent/article.html. [Zugriff am 9
Dezember 2012].
[9] B. Fling, Mobile Design and Development: Practical concepts and techniques for creating mobile sites and web apps, O'Reilly Media, Inc., 2009.
[10] J. Mudge, „Native App vs. Mobile Web App: A Quick Comparison,“ Six Revisions, 11 July 2012. [Online]. Available: http://sixrevisions.com/mobile/nativeapp-vs-mobile-web-app-comparison/. [Zugriff am 3 Dezember 2012].
[11] diverse, „HTML5,“ Wikipedia, 3 Dezember 2012. [Online]. Available: http://de.wikipedia.org/wiki/HTML5. [Zugriff am 4 Dezember 2012].
[12] S. Wilson, F. Daniel, U. Jugel und S. Soi, „Orchestrated User Interface Mashups Using W3C Widgets,“ ICWE 2011 Workshops, pp. 49-61, Juni 2011.
Falko Braune - Web Apps
22