Als PDF, PPTX herunterladen
Hochgeladen vonPeter Hecker
Cross-Apps-Entwicklung für iPhone, Android und Co.
Der Vortrag behandelt die Entwicklung von mobilen Anwendungen für iPhone und Android unter Verwendung von Web-Technologien. Es werden verschiedene Frameworks wie iUI, iwebkit, jQTouch und PhoneGap vorgestellt, die die Entwicklung vereinfachen und die Implementierung von nativen und web-basierten Apps ermöglichen. Abschließend wird empfohlen, mobile Anwendungen mit HTML, CSS und JavaScript zu erstellen, insbesondere durch den Einsatz von jQTouch und PhoneGap.
Weitere ähnliche Inhalte
Ähnlich wie Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
- 1. Cross-Apps-Entwicklung für iPhone,Android undCo. Peter Hecker 28.05.2010 - dotnet Cologne 2010 Freitag, 28. Mai 2010
- 2. Peter Hecker • Berater •Softwareentwickler • Trainer • Seit 1995 vorzugsweise und am liebsten Web-Technologien! Freitag, 28. Mai 2010
- 3. Die GFU CyrusAG • IT-Schulungen • > 550 Themen • > 70 Dozenten Freitag, 28. Mai 2010
- 4. Schulungen bei der GFU •Durchführungsgarantie • Kostenloses Rücktrittsrecht • Qualitätsgarantie Freitag, 28. Mai 2010
- 5. DieserVortrag „Mobile Apps“ am Beispieleiner ASP.NET-Anwendung Freitag, 28. Mai 2010
- 6. 2 %2 %3 % 7 % 39 % 47 % Der Mobile Markt iPhoneOS Android RIM OS webOS Windows Mobile Andere Quelle: http://metrics.admob.com/ Freitag, 28. Mai 2010
- 7. Mobile Apps • NativeApps • Objective-C (iPhone) • Java (Android) • Web-Apps • HTML, CSS, JavaScript • Web-Browser Freitag, 28. Mai 2010
- 8. WebKit - webkit.org •Desktop • Safari, Chrome, Konqueror • Mobile • iPhone,Android, Palm Pre, Symbian, Samsung, Iris, Bolt http://www.quirksmode.org/mobile/browsers.html Freitag, 28. Mai 2010
- 9. WebKit • Moderne undausgereifte Browser-Engine • Mobile Marktführer setzen auf WebKit • Andere Plattformen ziehen nach • Vereinheitlichung der Entwicklung • Web-Technologien sind etabliert und beherrschbar Freitag, 28. Mai 2010
- 10. • iUI • iWebkit •jQTouch • PhoneGap Mobile Frameworks Freitag, 28. Mai 2010
- 11.
- 12. iUI • Entwickelt vonJoe Hewitt • Kein JavaScript • Erweitert Standard HTML • Überschreibt Links und Formulare mit Ajax • „Smooth Transitions“ Freitag, 28. Mai 2010
- 13.
- 14. <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> Freitag, 28. Mai 2010
- 15.
- 16. <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> Freitag, 28. Mai 2010
- 17.
- 18. Freitag, 28. Mai2010
- 19. iUI • Ideal fürDarstellung hierarchischer Informationen • Eingeschränkte Funktionalität, optimal für „kleine“ Apps • Akzeptable Geschwindigkeit • „Defacto-Standard“ für iPhone Freitag, 28. Mai 2010
- 20.
- 21. iWebkit • Zielgruppe Nicht-Entwickler •Einfach und minimalistisch • Erweiterbar, schnell und anpassbar • Plugins für Grails, Drupal,WordPress... Freitag, 28. Mai 2010
- 22.
- 23. <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> Freitag, 28. Mai 2010
- 24.
- 25. <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> Freitag, 28. Mai 2010
- 26.
- 27. Freitag, 28. Mai2010
- 28. iWebkit • Gute Dokumentationund Beispiele • Ausführliches Framework • Stabil und ausgereift Freitag, 28. Mai 2010
- 29.
- 30. jQTouch • Basiert aufjQuery • Einfacher Setup • Native Webkit-Animationen • Callback Events • Flexible Themen • Swipe Detection • Erweiterbar via jQuery Freitag, 28. Mai 2010
- 31.
- 32. <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> Freitag, 28. Mai 2010
- 33.
- 34. <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 Freitag, 28. Mai 2010
- 35.
- 36. Freitag, 28. Mai2010
- 37. 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 Freitag, 28. Mai 2010
- 38.
- 39. PhoneGap Cross-Plattform-Mobile-Framework zur Erstellung vonnativen, mobilen Anwendungen mit HTML, CSS und JavaScript! Freitag, 28. Mai 2010
- 40. PhoneGap • Erstellt vonder Firma Nitobi • Open Source (MIT Lizenz) • Native App-Wrapper • Mehrere Plattformen Freitag, 28. Mai 2010
- 41. Betriebssysteme • iPhone • Android •Blackberry • Palm • Symbian • Maemo • Windows Mobile Freitag, 28. Mai 2010
- 42. 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 Freitag, 28. Mai 2010
- 43. PhoneGap • Single CodeBase • Standalone Web App • Native App Freitag, 28. Mai 2010
- 44.
- 45. World Cup Schedule Freitag,28. Mai 2010
- 46. 1. Beispiel „iPhon(e)ifizierung“ mitiWebkit Freitag, 28. Mai 2010
- 47. 2. Beispiel „Mobil(e)isierung“ mitjQTouch Freitag, 28. Mai 2010
- 48. 3. Beispiel „App(si)sierung“ mitPhoneGap Freitag, 28. Mai 2010
- 49. Fazit: „Wenn Ihre mobileAnwendung mit HTML, CSS und JavaScript umgesetzt werden kann, dann können und sollten Sie dies auch tun.“ „Nutzen Sie jQTouch und PhoneGap!“ Freitag, 28. Mai 2010
- 50. Vielen Dank. Freitag, 28.Mai 2010