Als PDF, PPTX herunterladen
Hochgeladen vonGFU Cyrus AG
Cross-Apps-Entwicklung für iPhone, Android und Co.
Der Vortrag von Peter Hecker behandelt die Entwicklung mobiler Apps für verschiedene Plattformen wie iPhone, Android und Blackberry, einschließlich der Verwendung von Technologien wie Objective-C, Java und HTML5. Er erläutert die Vorteile von Frameworks wie iUI, jQtouch und PhoneGap zur Erstellung plattformübergreifender, nativer Apps mit modernen Webstandards. Zudem werden Trends im Smartphone-Markt und die Bedeutung von Webkit als dominante Browser-Engine 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, Androidund 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 CyrusAG • IT-Schulungen • > 550 Themen • > 70 Dozenten
- 4. Schulungen bei der GFUCyrus AG • Durchführungsgarantie • Kostenloses Rücktrittsrecht • Qualitätsgarantie
- 5. Dieser Vortrag „Mobile Appsfü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.
- 8.
- 9.
- 10. How all smartphoneusers see 2G users!
- 11. Weltweiter Smartphone-Verkauf 11/2010 Android Symbian 26 % Android Symbian iOS 37 % RIM WinMO Linux Andere iOS 17 % Andere Linux WinMO 2 % 2 % RIM 3 % 15 % Quelle: http://www.gartner.com/it/page.jsp?id=1466313
- 12. Trends 50 44,6 37,5 36,6 25 25,5 20,7 17,1 16,7 12,5 14,8 7,9 3,5 2,8 0 Symbian Android iOS Blackberry Windows Mobile 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 (Scalable Vector Graphics) • HTLM5 Offline Data Storage • HTML5 Audio und Video 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. WebKit - JavaScript- Demo
- 20. 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
- 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 • Scalable Vector Graphics • W3C-Standard • Definition von Vektorgrafiken mittels XML • Animationen mittels SMIL
- 26. WebKit - HTML5 Canvas • <canvas>-Element • „Virtuelle Zeichenfläche“ • Erstellung von Vektorgrafiken 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. Mobile Frameworks • „Die Klassiker“ • „Die jungen Wilden“ • iUI • Sencha Touch • iWebkit • jQuery Mobile • jQTouch Und natürlich: PhoneGap
- 30. iUI http://code.google.com/p/iui/ http://video.yahoo.com/watch/853528/3491272
- 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> <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>
- 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> <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.
- 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' }); Initialization $(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() ); }
- 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 von nativen, 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.