Mobile Webentwicklung mit HTML5

Mobile
Webapplikations-
Entwicklung

Kai Kramhöft

Agenda:
1. Einführung
2. Herausforderung Entwicklung mobile Geräte
3. HTML5
4. Javascript Frameworks (JQuery Mobile)
5. Phonegap
6. Demo

App-Downloads
(iOS, Android) zu Weihnachten
1,2 Milliarden
Zahl täglicher Android
Aktivierungen:
700.000

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)

Unterstützung HTML5 in
mobilen Browsern:

www.caniuse.com

HTML5 ~= HTML +
CSS(3) +
Javascript

HTML5 Features:
• Semantics & Markups
• Offline Storage
• File / Hardware Access
• Realtime / Communication
• Graphics / Multimedia
• CSS3 Styling

Semantics & Markup
• Elementtypen zur Strukturierung der
Webseite
• Microdata
• Microformats

Neue Tags

• <body>
<header> <aside>
<hgroup>
<h1>Page title</h1> Top links...
<h2>Page subtitle</h2> </aside>
</hgroup>
</header> <figure>
<nav> <img src="..."/>
<ul> <figcaption>Chart 1.1</figcaption>
Navigation... </figure>
</ul>
</nav>
<section> <footer>
<article> Copyright ©
<header> <time datetime="2010-11-08">2010</time>.
<h1>Title</h1> </footer>
</header>
<section> </body>
Content...
</section>
</article>
<article>

Offline Storage
• Application Cache
• Local Storage
• Web SQL
• Online / Offline Events

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:
*

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');

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);
});

Online und Offline Events

document.body.addEventListener(„offline“, function () { ...
}, false);

document.body.addEventListener(„online“, function () { ...
}, false);

Audio + Video
• Unterstützte Formate: Ogg Theora, H.264, WebM
• Browserabhängig
• Beispiel:
<audio id="audio" src="sound.mp3" controls>
</audio>
document.getElementById("audio").muted = false;

<video id="video" src="movie.webm" autoplay controls></
video>
document.getElementById("video").play();

Device Access
• Geolocation
• Camera
• Contacts

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);
}

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);
}

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);

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'); }

3D, Graphics & Effects
• Canvas
• CSS3 3D Features
• WebGL
• SVG

Javascript Frameworks
• JQuery Mobile
• Sencha Touch
• Jo
• jQTouch
• Xui
• Lawnchair
• EmbedJS

JQuery Mobile
• Touch-optimiertes Web Framework für Smartphones und
Tablets
• Auf JQuery aufgesetzt
• Unterstützt iOS, Android, Blackberry, ...

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

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

Phonegap: Unterstütze Plattformen
• iOS
• Android*
• Blackberry
• webOS!
• Symbian*
• MeeGo*
• Windows Mobile
• Windows Phone
• Samsung Bada

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

Quellen
HTML5:
Dive into HTML5: http://diveintohtml5.info/
HTML5 im Überblick: http://www.peterkroener.de/artikel/html5-im-ueberblick/
HTML5 rocks: http://www.html5rocks.com/en/

JQuery Mobile:
Homepage: http://jquerymobile.com/
Phonegap mit JQuery Mobile: http://jquerymobile.com/test/docs/pages/phonegap.html

Phonegap:
Homepage: http://phonegap.com/
Präsentationen zu Phonegap: http://phonegap.com/presentations/

Mobile Webentwicklung mit HTML5

Weitere ähnliche Inhalte

Was ist angesagt?

Ähnlich wie Mobile Webentwicklung mit HTML5

Mobile Webentwicklung mit HTML5