X-Apps-Entwicklung für iPhone,Android und Co.
72
X-Apps-Entwicklung für iPhone, Android und Co. Peter Hecker 23.11.2010 - Treffpunkt Semicolon der GFU Cyrus AG, Köln 1
-
Upload
martinsfeld-gmbh-co-kg -
Category
Documents
-
view
1.850 -
download
0
description
Vortrag zum Thema Cross-App-Entwicklung von HMTL5-Anwendungen für iPhone, Android und Co. Vorstellung von Frameworks für die mobile Web-Entwicklung.
Transcript of X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklungfür iPhone, Android und Co.
Peter Hecker
23.11.2010 - Treffpunkt Semicolon der GFU Cyrus AG, Köln
1
Peter Hecker
• Berater
• Softwareentwickler
• Trainer
• Seit 1995 vorzugsweise und am liebsten Web-Technologien!
2
Dieser Vortrag„Mobile Apps für iPhone, Android und Co.“
3
Bevor wir beginneniPhone vs. Android vs. BlackBerry:
„This is how smartphone users see each other“
http://9-b.it/cRFsbm
4
iPhone
5
Android
6
Blackberry
7
How all smartphone users see 2G users!
8
Quelle: http://www.gartner.com/it/page.jsp?id=1466313
Weltweiter Smartphone-Verkauf 11/2010
Andere2 %Linux2 %WinMO
3 % RIM15 %
iOS17 %
Android26 %
Symbian37 %
SymbianAndroidiOSRIMWinMOLinuxAndere
9
0
12,5
25
37,5
50
Symbian Android iOS Blackberry Windows Mobile2,8
14,816,7
25,5
36,6
7,9
20,717,1
3,5
44,6
Trends
2009 2010
10
Mobile Apps
• Native Apps
• Objective-C (iPhone)
• Java (Android)
• Web-Apps
• HTML, CSS, JavaScript (HTML5)
• Web-Browser
11
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.html12
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 (Scalable Vector Graphics)
• HTLM5 Offline Data Storage
• HTML5 Audio und Video Element
• HTML5 Geolocation API
13
WebKit - CSS3• CSS-Transitions
• Übergänge
• CSS - Animations
• Hardwarebeschleunigt
• Key-Frame-Animationen
• CSS-Transformations
• skalieren, rotieren, verzerren, versetzen, Transformations-Matrix
• 2D und 3D
14
WebKit - CSS3-Demo
15
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, ...
16
WebKit - JavaScript-Demo
17
WebKit - HTML5 Audio und Video
• 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
18
WebKit - Audio/Video/CSS-Demo
19
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
20
WebKit - HTML5 Application Cache
• Cache Manifest
• Offline Speicherung der kompletten Applikation
• HTML-Dateien (lokal oder remote)
• Bilder
• JavaScript
• CSS
• JavaScript API für Updates
21
WebKit - HTML5 Geolocation API
• JavaScript-API
• Zugriff auf Geodaten
• GPS-Daten
• Triangulation
• Longitude, Latitude, Genauigkeit
• Nachfrage im Browser
• Tracking möglich
22
WebKit - SVG
• Scalable Vector Graphics
• W3C-Standard
• Definition von Vektorgrafiken mittels XML
• Animationen mittels SMIL
23
WebKit - HTML5 Canvas
• <canvas>-Element
• „Virtuelle Zeichenfläche“
• Erstellung von Vektorgrafiken und Animationen
• Zeichnen, Bilder, Verläufe, Spiegelungen, Transparenzen, Muster
• Transformationen, Kompositionen
• JavaScript API
24
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
25
noch ein WebKit-Beispiel26
• „Die Klassiker“
• iUI
• iWebkit
• jQTouch
• „Die jungen Wilden“
• Sencha Touch
• jQuery Mobile
Mobile Frameworks
Und natürlich: PhoneGap
27
iUIhttp://code.google.com/p/iui/
http://video.yahoo.com/watch/853528/3491272
28
iUI
• Entwickelt von Joe Hewitt
• Kein JavaScript
• Erweitert Standard HTML
• Überschreibt Links und Formulare mit Ajax
• „Smooth Transitions“
29
Setup
30
<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>
31
Beispiel
32
<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 & 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>
33
Ergebnis
34
35
iUI
• Ideal für Darstellung hierarchischer Informationen
• Eingeschränkte Funktionalität, optimal für „kleine“ Apps
• Akzeptable Geschwindigkeit
• „Defacto-Standard“ für iPhone
36
iWebkit
• Zielgruppe Nicht-Entwickler
• Einfach und minimalistisch
• Erweiterbar, schnell und anpassbar
• Plugins für Grails, Drupal, WordPress...
38
Setup
39
<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>
40
Beispiel
41
<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>
42
Ergebnis
43
44
iWebkit
• Gute Dokumentation und Beispiele
• Ausführliches Framework
• Stabil und ausgereift
45
jQTouch
• Basiert auf jQuery
• Einfacher Setup
• Native Webkit-Animationen
• Callback Events
• Flexible Themen
• Swipe Detection
• Erweiterbar via jQuery
47
Setup
48
<html> <head> <meta charset="UTF-8" /> <title>jQTouch β</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>
49
Beispiel
50
<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
51
Ergebnis
52
53
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
54
Sencha Touchhttp://www.sencha.com/products/touch/
55
Sencha Touch
• JavaScript-API für mobile Anwendungen
• Basiert auf Web-Standards
• WebKit als Plattform (natürlich)
• Unterstützung von Themen
• Programmatisch
56
57
jQuery Mobilehttp://jquerymobile.com/
58
jQuery Mobile
• jQuery-Projekt
• Sehr ambitioniert
• jQuery Mobile 1.0 Alpha 2
• Deklarativ und programmatisch
59
60
PhoneGapCross-Plattform-Mobile-Framework
zur Erstellung von nativen, mobilen Anwendungen mit HTML, CSS und JavaScript!
62
PhoneGap
• Erstellt von der Firma Nitobi
• Open Source (MIT Lizenz)
• Native App-Wrapper
• Mehrere Plattformen
63
Plattformen• iPhone
• Android
• Blackberry
• webOS
• Symbian
• MeeGo
• Windows Mobile
• Windows Phone
• Samsung Bada
64
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
65
PhoneGap Projekte
• www/
• index.html
• config.xml
• phonegap.js
66
PhoneGap
• Single Code Base
• Standalone Web App
• Native App
67
‘ello wrld
68
Community
69
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!
71
Vielen Dank.Kontakt:
twitter.com/martinsfeld
72
