Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet: Einführung und Motivation, Die WebKit-Plattform, Überblick "mobile" Frameworks, Zusammenfassung und Fazit

1. X-Apps-Entwicklung
für iPhone,Android und Co.
Peter Hecker
23.11.2010 - Treffpunkt Semicolon
der GFU Cyrus AG, Köln

2. Peter Hecker
• Berater
• Softwareentwickler
• Trainer
• Seit 1995 vorzugsweise und am liebsten
Web-Technologien!

3. Die GFU Cyrus AG
• IT-Schulungen
• > 550 Themen
• > 70 Dozenten

4. Schulungen
bei der GFU Cyrus AG
• Durchführungsgarantie
• Kostenloses Rücktrittsrecht
• Qualitätsgarantie

5. DieserVortrag
„Mobile Apps für iPhone,Android und Co.“

6. Bevor wir beginnen
iPhone vs.Android vs. BlackBerry:
„This is how smartphone users see each other“
http://9-b.it/cRFsbm

7. iPhone

8. Android

9. Blackberry

10. How all smartphone users
see 2G users!

11. Quelle: http://www.gartner.com/it/page.jsp?id=1466313
Weltweiter Smartphone-Verkauf 11/2010
Andere
2 %
Linux
2 %
WinMO
3 % RIM
15 %
iOS
17 %
Android
26 %
Symbian
37 %
Symbian
Android
iOS
RIM
WinMO
Linux
Andere

12. 0
12,5
25
37,5
50
Symbian Android iOS Blackberry Windows Mobile
2,8
14,8
16,7
25,5
36,6
7,9
20,7
17,1
3,5
44,6
Trends
2009 2010

13. Mobile Apps
• Native Apps
• Objective-C (iPhone)
• Java (Android)
• Web-Apps
• HTML, CSS, JavaScript (HTML5)
• Web-Browser

14. WebKit - webkit.org
• Desktop
• Safari, Chrome, Konqueror
• Mobile
• iPhone,Android, PalmOS, Symbian,
Blackberry OS, Samsung, Iris, Bolt,Adobe
AIR
http://www.quirksmode.org/mobile/browsers.html

15. WebKit - Features
• HTML 4.01 / teilweise HTML 5
• XHTML 1.0 / 1.1
• CSS 2.1 vollständig und CSS 3 teilweise
• JavaScript 1.4 (inkl. kompletter DOM-Unterstützung)
• AJAX (XMLHTTP-Request) / Web 2.0
• Canvas
• SVG (ScalableVector Graphics)
• HTLM5 Offline Data Storage
• HTML5 Audio undVideo Element
• HTML5 Geolocation API

16. WebKit - CSS3
• CSS-Transitions
• Übergänge
• CSS - Animations
• Hardwarebeschleunigt
• Key-Frame-Animationen
• CSS-Transformations
• skalieren, rotieren, verzerren, versetzen,Transformations-
Matrix
• 2D und 3D

17. WebKit - CSS3-Demo

18. WebKit - JavaScript
• Multi-Touch-Events
• Erkennung der Finger
• Gestures-Events
• Erkennung der Finger
• Unterscheidung der Finger
• Für beliebige Zeile definierbar
• Damit beliebige UI-Gesten möglich
• Drag&Drop,Vergrößern, Bewegen, Slide, ...

19. WebKit - JavaScript-
Demo

20. WebKit - HTML5
Audio undVideo
• Einbetten von Medien mittels HTML5
<audio> und <video> Tags
• Media-Events
• Abspiel-Oberfläche anpassbar
• „Fallback“ wenn HTML5 nicht verfügbar
• Flash
• Java (Ogg, ...)
• http://www.youtube.com/html5

21. WebKit - Audio/Video/
CSS-Demo

22. WebKit - HTML5
Datenbanken
• HTML5 clientseitige Datenbankspeicher
• vollständige, transaktionale SQLite
Datenbank auf dem Client
• Asynchrones Datenbank-Handling
• API per JavaScript ansprechbar
• Update mit Online-Datenbank möglich

23. WebKit - HTML5
Application Cache
• Cache Manifest
• Offline Speicherung der kompletten Applikation
• HTML-Dateien (lokal oder remote)
• Bilder
• JavaScript
• CSS
• JavaScript API für Updates

24. WebKit - HTML5
Geolocation API
• JavaScript-API
• Zugriff auf Geodaten
• GPS-Daten
• Triangulation
• Longitude, Latitude, Genauigkeit
• Nachfrage im Browser
• Tracking möglich

25. WebKit - SVG
• ScalableVector Graphics
• W3C-Standard
• Definition von
Vektorgrafiken mittels
XML
• Animationen mittels
SMIL

26. WebKit - HTML5
Canvas
• <canvas>-Element
• „Virtuelle Zeichenfläche“
• Erstellung vonVektorgrafiken und Animationen
• Zeichnen, Bilder,Verläufe, Spiegelungen,
Transparenzen, Muster
• Transformationen, Kompositionen
• JavaScript API

27. WebKit
• Moderne und ausgereifte Browser-Engine
• Mobile Marktführer setzen auf WebKit
• Andere Plattformen ziehen nach
• Vereinheitlichung der Entwicklung
• Web-Technologien sind etabliert und
beherrschbar

28. noch ein WebKit-Beispiel

29. • „Die Klassiker“
• iUI
• iWebkit
• jQTouch
• „Die jungen Wilden“
• Sencha Touch
• jQuery Mobile
Mobile Frameworks
Und natürlich: PhoneGap

30. iUI
http://code.google.com/p/iui/
http://video.yahoo.com/watch/853528/3491272

31. iUI
• Entwickelt von Joe Hewitt
• Kein JavaScript
• Erweitert Standard HTML
• Überschreibt Links und Formulare mit Ajax
• „Smooth Transitions“

32. Setup

33. <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iUI Demo</title>
<meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=1.0; user-
scalable=0;"/>
<link rel="apple-touch-icon" href="iui-logo-touch-
icon.png" />
<meta name="apple-touch-fullscreen" content="YES" />
<style type="text/css" media="screen">
@import "iui.css";
</style>
<script type="application/x-javascript"
src="iui.js"></script>
</head>

34. Beispiel

35. <body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="#searchForm">Search</a>
</div>
<ul id="home" title="Music" selected="true">
<li><a href="#artists">Artists</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="stats.php">Stats</a></li>
<li><a href="http://code.google.com/p/iui/"
target="_self">About</a></li>
<li>Nothing</li>
</ul>
<ul id="artists" title="Artists">
<li class="group">B</li>
<li><a href="#TheBeatles">The Beatles</a></li>
<li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li>
<li class="group">C</li>
<li><a href="#CrowdedHouse">Crowded House</a></li>
<li class="group">J</li>
<li><a href="#JennyLewis">Jenny Lewis</a></li>
<li><a href="#JohnMayer">John Mayer</a></li>
<li class="group">Z</li>
<li><a href="#Zero7">Zero 7</a></li>
</ul>

36. Ergebnis

38. iUI
• Ideal für Darstellung hierarchischer
Informationen
• Eingeschränkte Funktionalität, optimal für
„kleine“ Apps
• Akzeptable Geschwindigkeit
• „Defacto-Standard“ für iPhone

39. iWebkit
http://iwebkit.net/

40. iWebkit
• Zielgruppe Nicht-Entwickler
• Einfach und minimalistisch
• Erweiterbar, schnell und anpassbar
• Plugins für Grails, Drupal,WordPress...

41. Setup

42. <head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="index,follow" name="robots" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link href="pics/homescreen.png" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667,
user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>

43. Beispiel

44. <div id="topbar">
<div id="title">iWebKit</div>
<div id="leftbutton">
<a href="http://iwebkit.net">PC website</a>
</div>
</div>
<div id="content">
<ul class="pageitem">
<li class="textbox"><span class="header">Welcome</
span><p>Welcome to the iWebKit 4 Demo site!</p>
</li>
<li class="menu"><a href="changelog.html">
<img alt="changelog" src="thumbs/start.png" /><span
class="name">What’s New?</span><span class="arrow"></span></a></li>
</ul>
<span class="graytitle">Features</span>
<ul class="pageitem">
<li class="textbox">
<p>Here are some examples of things you can achieve building
with iWebKit 4:</p>
</li>
<li class="menu"><a href="list.html">
<img alt="list" src="thumbs/contacts.png" /><span
class="name">Classic Lists</span><span class="comment">With Images</
span><span class="arrow"></span></a></li>

45. Ergebnis

47. iWebkit
• Gute Dokumentation und Beispiele
• Ausführliches Framework
• Stabil und ausgereift

48. jQTouch
http://jqtouch.com/

49. jQTouch
• Basiert auf jQuery
• Einfacher Setup
• Native Webkit-Animationen
• Callback Events
• Flexible Themen
• Swipe Detection
• Erweiterbar via jQuery

50. Setup

51. <html>
<head>
<meta charset="UTF-8" />
<title>jQTouch &beta;</title>
<style type="text/css" media="screen">
@import "jqtouch.min.css";
</style>
<style type="text/css" media="screen">
@import "themes/apple/theme.min.css";
</style>
<script src="jquery.1.3.2.min.js" type="text/javascript">
</script>
<script src="jqtouch.min.js" type="text/javascript">
</script>

52. Beispiel

53. <link rel="stylesheet" href="clock.css" type="text/css" media="screen"
charset="utf-8" />
<script type="text/javascript" charset="utf-8">
$.jQTouch({
icon: 'icon.png',
startupScreen: 'img/startup.png'
});
$(function(){
function addClock(label, tz){
var html = '';
html += '<div>'
html += '<div class="clock">'
html += '<div class="hour"></div>'
html += '<div class="min"></div>'
html += '<div class="sec"></div>'
html += '</div>'
html += '<div class="city">GMT</div>'
html += '<div class="time">Time</div>'
html += '</div>'
var insert = $(html);
$('#clocks').append(
insert.data('tz_offset', tz).find('.city').html(label).end()
);
}
Initialization

54. Ergebnis

56. jQTouch
• Gute Geschwindigkeit
• Offline- und Standort-Unterstützung
• „Smoother Transisitons and animations“
• slide, slideup, dissolve, fade, flip, pop,
swap, cube
• Etwas komplexer in der Anwendung

57. Sencha Touch
http://www.sencha.com/products/touch/

58. Sencha Touch
• JavaScript-API für mobile Anwendungen
• Basiert auf Web-Standards
• WebKit als Plattform (natürlich)
• Unterstützung von Themen
• Programmatisch

60. jQuery Mobile
http://jquerymobile.com/

61. jQuery Mobile
• jQuery-Projekt
• Sehr ambitioniert
• jQuery Mobile 1.0 Alpha 2
• Deklarativ und programmatisch

63. PhoneGap
http://www.phonegap.com/

64. PhoneGap
Cross-Plattform-Mobile-Framework
zur Erstellung von nativen, mobilen Anwendungen mit
HTML, CSS und JavaScript!

65. PhoneGap
• Erstellt von der Firma Nitobi
• Open Source (MIT Lizenz)
• Native App-Wrapper
• Mehrere Plattformen

66. Plattformen
• iPhone
• Android
• Blackberry
• webOS
• Symbian
• MeeGo
• Windows Mobile
• Windows Phone
• Samsung Bada

67. Geräte-Fähigkeiten
• Geo
• Accelerometer (Beschleunigungssensor)
• Kamera / Fotos
• Vibration
• Kontakte
• SMS / Telefonie
• Sound /Video
• Reachability (Netzwerkerreichbarkeit)
• Magnometer (Kompass)
• und natürlich alle Browserfähigkeiten

68. PhoneGap Projekte
• www/
• index.html
• config.xml
• phonegap.js

69. PhoneGap
• Single Code Base
• Standalone Web App
• Native App

70. ‘ello wrld

71. Community

72. http://build.phonegap.com

73. Fazit:
• Optimieren Sie Ihre Website für mobile
Endgeräte
• Prüfen Sie den Mehrwert einer mobilen
Anwendung mit HTML, CSS und JavaScript
• Nutzen Sie in der Entwicklung ein mobiles
Framework und natürlich PhoneGap!

74. Vielen Dank.