5. Herausforderungen mobiler Webseiten
Herausforderung:
• Wie schaffe ich es, eine
Vielzahl von Geräten mit
unterschiedlichen
Betriebssystemen
unterstützen, und diese nicht
native zu programmieren und
sorge dabei für eine korrekte
Darstellung und
Funktionsweise von
Applikation auf Geräten mit
unterschiedlichen Möglichkeiten
(beispielsweise Displaygröße)
14. Offline Storage
• Application Cache
• Local Storage
• Web SQL
• Online / Offline Events
15. Application Cache
• Spezifieren des Cache:
<html manifest=“meinCache.appcache">
...
</html>
• Auflistung zu cachender Dateien
CACHE MANIFEST
# version 1.0.0
CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
NETWORK:
*
16. Application Cache
// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new
Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
17. Web SQL
var db =
window.openDatabase("DBName", "1.0", "description", 5*1024
*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM
test", [], successCallback, errorCallback);
});
18. Online und Offline Events
document.body.addEventListener(„offline“, function () { ...
}, false);
document.body.addEventListener(„online“, function () { ...
}, false);
23. Geo Location (3/3)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map:
map});
map.setCenter(latLng);
}, errorHandler);
}
24. Camera API (Phonegap)
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
25. Contact API (Phonegap)
function onSuccess(contacts) {
alert('Found ' + contacts.length + ' contacts.');
};
function onError(contactError) {
alert('onError!');
};
// find all contacts with 'Bob' in any name field
var options = new ContactFindOptions();
options.filter="Bob";
var fields = ["displayName", "name"];
navigator.contacts.find(fields, onSuccess, onError, opti
ons);
26. Connectivity: Web Sockets
var socket = new
WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }
27. 3D, Graphics & Effects
• Canvas
• CSS3 3D Features
• WebGL
• SVG
28. Javascript Frameworks
• JQuery Mobile
• Sencha Touch
• Jo
• jQTouch
• Xui
• Lawnchair
• EmbedJS
29. JQuery Mobile
• Touch-optimiertes Web Framework für Smartphones und
Tablets
• Auf JQuery aufgesetzt
• Unterstützt iOS, Android, Blackberry, ...
30. Was ist Phonegap? (1/2)
• Werkzeug, um mobile Applikationen mit Webtechnologien zu
bauen
• HTML5 für das Layout
• Javascript für den Zugriff auf Geräte-Funktionalitäten
• CSS3 für das Design
31. Was ist Phonegap? (2/2)
• Eine Sammlung von Tools und eine konsistente geräte-
übergreifende API
• Die gleichen Javascript Aufrufe um Geräte Funktionen
aufzurufen.
• Beispiel: navigator.notification.vibrate();
• Funktioniert mit JQuery Mobile zusammen
32. Phonegap: Unterstütze Plattformen
• iOS
• Android*
• Blackberry
• webOS!
• Symbian*
• MeeGo*
• Windows Mobile
• Windows Phone
• Samsung Bada
33. Architektur einer Phonegap App
• Javascript ruft via XHR Daten beim Server in Form von JSON
Daten ab
• HTML/JS/CSS + Grafiken sind auf dem Device
, zusammengepackt beim Build Process.
• JavaScript kann abgerufene Daten in einer SQLite Datenbank
im Browser zur Offline-Bearbeitung speichern
• JavaScript kann auch Bilder cachen