Downloaden Sie, um offline zu lesen
Hochgeladen vonPeter Hecker
Cross-Apps-Entwicklung für iPhone, Android und Co.
Das Dokument von Peter Hecker behandelt die Entwicklung von mobilen Apps für verschiedene Plattformen wie iPhone und Android, mit einem Fokus auf Web-Technologien sowie gängigen Frameworks wie PhoneGap, Sencha Touch und jQTouch. Es beinhaltet Statistiken zum Smartphone-Verkauf, die Nutzung von Webkit für moderne Web-Apps und spezifische Framework-Beispiele für die Erstellung von Anwendungen. Abschließend wird die Optimierung von Websites für mobile Endgeräte und die Relevanz mobiler Apps hervorgehoben.
Weitere ähnliche Inhalte
Ähnlich wie Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
- 1. X-Apps-Entwicklung für iPhone,Android undCo. 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 CyrusAG • IT-Schulungen • > 550 Themen • > 70 Dozenten
- 4. Schulungen bei der GFUCyrus AG • Durchführungsgarantie • Kostenloses Rücktrittsrecht • Qualitätsgarantie
- 5. DieserVortrag „Mobile Apps füriPhone,Android und Co.“
- 6. Bevor wir beginnen iPhonevs.Android vs. BlackBerry: „This is how smartphone users see each other“ http://9-b.it/cRFsbm
- 7.
- 8.
- 9.
- 10. How all smartphoneusers see 2G users!
- 11. Quelle: http://www.gartner.com/it/page.jsp?id=1466313 Weltweiter Smartphone-Verkauf11/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 iOSBlackberry 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 • NativeApps • 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.
- 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.
- 20. WebKit - HTML5 AudioundVideo • 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.
- 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 ApplicationCache • Cache Manifest • Offline Speicherung der kompletten Applikation • HTML-Dateien (lokal oder remote) • Bilder • JavaScript • CSS • JavaScript API für Updates
- 24. WebKit - HTML5 GeolocationAPI • 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 undausgereifte Browser-Engine • Mobile Marktführer setzen auf WebKit • Andere Plattformen ziehen nach • Vereinheitlichung der Entwicklung • Web-Technologien sind etabliert und beherrschbar
- 28.
- 29. • „Die Klassiker“ •iUI • iWebkit • jQTouch • „Die jungen Wilden“ • Sencha Touch • jQuery Mobile Mobile Frameworks Und natürlich: PhoneGap
- 30.
- 31. iUI • Entwickelt vonJoe Hewitt • Kein JavaScript • Erweitert Standard HTML • Überschreibt Links und Formulare mit Ajax • „Smooth Transitions“
- 32.
- 33. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iUI Demo</title> <metaname="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.
- 35. <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <aid="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>
- 36.
- 38. iUI • Ideal fürDarstellung hierarchischer Informationen • Eingeschränkte Funktionalität, optimal für „kleine“ Apps • Akzeptable Geschwindigkeit • „Defacto-Standard“ für iPhone
- 39.
- 40. iWebkit • Zielgruppe Nicht-Entwickler •Einfach und minimalistisch • Erweiterbar, schnell und anpassbar • Plugins für Grails, Drupal,WordPress...
- 41.
- 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.
- 44. <div id="topbar"> <div id="title">iWebKit</div> <divid="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.
- 47. iWebkit • Gute Dokumentationund Beispiele • Ausführliches Framework • Stabil und ausgereift
- 48.
- 49. jQTouch • Basiert aufjQuery • Einfacher Setup • Native Webkit-Animationen • Callback Events • Flexible Themen • Swipe Detection • Erweiterbar via jQuery
- 50.
- 51. <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>
- 52.
- 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.
- 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.
- 58. Sencha Touch • JavaScript-APIfür mobile Anwendungen • Basiert auf Web-Standards • WebKit als Plattform (natürlich) • Unterstützung von Themen • Programmatisch
- 60.
- 61. jQuery Mobile • jQuery-Projekt •Sehr ambitioniert • jQuery Mobile 1.0 Alpha 2 • Deklarativ und programmatisch
- 63.
- 64. PhoneGap Cross-Plattform-Mobile-Framework zur Erstellung vonnativen, mobilen Anwendungen mit HTML, CSS und JavaScript!
- 65. PhoneGap • Erstellt vonder 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 CodeBase • Standalone Web App • Native App
- 70.
- 71.
- 72.
- 73. Fazit: • Optimieren SieIhre 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.