Mobile Geräte sind populär, WebApps (http://de.wikipedia.org/wiki/Webapp) sind populär. Doch wie lässt sich das eine mit dem anderen verbinden? Wie aufwändig ist es, diese selbst zu erstellen?
Hier gibt es sogenannte Frameworks, mit denen einfach, auch umfangreiche mobile WebApps zu erstellen. Die folgende, unvollständige Liste enthält Frameworks, die frei nutzbar und zudem nicht auf eine bestimmte Architektur beschränkt sind:
- WepApp.Net: http://webapp-net.com
- iUI: http://www.iui-js.org
- jQtouch: http://jqtouch.com
- jQuery Mobile: http://jquerymobile.com
Doch wie sieht eine solche WebApp aus? Ein Beispiel mit jQuery Mobile!
- Zuerst wird eine Idee für eine App benötigt. Hier wird der Stream von CampusFM (http://campusfm.info/), dem Campus-Radio der Universität Duisburg-Essen, so aufbereitet, dass er schnell von über eine Webseite auf einem mobilen Gerät aufgerufen werden kann.
- Anschließend wird das Grundgerüst der Webseite erstellt. Hier macht jQuery Mobile folgenden Vorschlag (http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html):
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> ...content goes here... </body> </html> - Zuletzt ist der Aufruf notwendig, um den Audio-Stream darzustellen.
<object id="musik" type="video/quicktime" height="48" width="250" data="http://132.252.179.253:8000/listen.pls"> <param name="autoplay" value="false" /> <param name="loop" value="false" /> <embed id="musik" type="video/quicktime" height="48" width="250" data="http://132.252.179.253:8000/listen.pls" controller="false" autoplay="false" loop="false" > </embed> </object>Auch wenn das gewählte Framework grundsätzlich für andere Geräte, z. B. Android, eine richtige Darstellung liefert, liegt der berühmte Teufel im Detail. Quicktime ist auf iOS direkt nutzbar, auf anderen Geräten leider nicht immer. Jedoch gibt es hier Abhilfe durch HTML5. Der Aufruf lautet dann:
<audio src="http://132.252.179.253:8000" controls> Der Browser unterstützt dieses Audio-Element nicht.</audio>HTML5 funktioniert bei iOS und ist auch umfangreich von Apple dokumentiert (Link-1, Link-2). HTML5 funktioniert dann auch bei anderen Geräten, wenn der dortige Browser HTML5 unterstützt. Welche Audio-Formate grundsätzlich vom Gerät unterstützt werden, kann z. B. auf der folgenden Seite überprüft werden: http://textopia.org/androidsoundformats.html. Bei Android-Geräten kann es erforderlich sein, dass ein anderer Browser, z. B. Opera, nachinstalliert wird.
Das zusammengesetzte Ergebnis ist dann auf dem folgenden Bild zu sehen.
Die Links zu den beiden Versionen sind zu finden unter: http://www.uni-due.de/zim/kerkewitz/beispiele/index.html oder direkt unter:
Über diese Links können die Webseiten auch auf den Home-Bildschirm gelegt und damit direkt aufgerufen werden.
(Ein anderes Beispiel für eine mobile WebApp haben wir schon einmal in folgendem Blogeintrag gezeigt: https://blogs.uni-due.de/zim/2011/07/07/plattformunabhangige-entwicklung-von-mobile-learning-applikationen-fur-iphone-und-android-smatphones/)