Your SlideShare is downloading. ×
0
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
X-Apps-Entwicklung für iPhone,Android und Co.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

X-Apps-Entwicklung für iPhone,Android und Co.

1,897

Published on

Vortrag zum Thema Cross-App-Entwicklung von HMTL5-Anwendungen für iPhone, Android und Co. Vorstellung von Frameworks für die mobile Web-Entwicklung.

Vortrag zum Thema Cross-App-Entwicklung von HMTL5-Anwendungen für iPhone, Android und Co. Vorstellung von Frameworks für die mobile Web-Entwicklung.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,897
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. X-Apps-Entwicklung für iPhone,Android und Co. Peter Hecker 23.11.2010 - Treffpunkt Semicolon der GFU Cyrus AG, Köln 1
  • 2. Peter Hecker • Berater • Softwareentwickler • Trainer • Seit 1995 vorzugsweise und am liebsten Web-Technologien! 2
  • 3. DieserVortrag „Mobile Apps für iPhone,Android und Co.“ 3
  • 4. Bevor wir beginnen iPhone vs.Android vs. BlackBerry: „This is how smartphone users see each other“ http://9-b.it/cRFsbm 4
  • 5. iPhone 5
  • 6. Android 6
  • 7. Blackberry 7
  • 8. How all smartphone users see 2G users! 8
  • 9. 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 9
  • 10. 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 10
  • 11. Mobile Apps • Native Apps • Objective-C (iPhone) • Java (Android) • Web-Apps • HTML, CSS, JavaScript (HTML5) • Web-Browser 11
  • 12. 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 12
  • 13. 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 13
  • 14. WebKit - CSS3 • CSS-Transitions • Übergänge • CSS - Animations • Hardwarebeschleunigt • Key-Frame-Animationen • CSS-Transformations • skalieren, rotieren, verzerren, versetzen,Transformations- Matrix • 2D und 3D 14
  • 15. WebKit - CSS3-Demo 15
  • 16. 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
  • 17. WebKit - JavaScript- Demo 17
  • 18. 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 18
  • 19. WebKit - Audio/Video/ CSS-Demo 19
  • 20. 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
  • 21. 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
  • 22. WebKit - HTML5 Geolocation API • JavaScript-API • Zugriff auf Geodaten • GPS-Daten • Triangulation • Longitude, Latitude, Genauigkeit • Nachfrage im Browser • Tracking möglich 22
  • 23. WebKit - SVG • ScalableVector Graphics • W3C-Standard • Definition von Vektorgrafiken mittels XML • Animationen mittels SMIL 23
  • 24. WebKit - HTML5 Canvas • <canvas>-Element • „Virtuelle Zeichenfläche“ • Erstellung vonVektorgrafiken und Animationen • Zeichnen, Bilder,Verläufe, Spiegelungen, Transparenzen, Muster • Transformationen, Kompositionen • JavaScript API 24
  • 25. 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
  • 26. noch ein WebKit-Beispiel 26
  • 27. • „Die Klassiker“ • iUI • iWebkit • jQTouch • „Die jungen Wilden“ • Sencha Touch • jQuery Mobile Mobile Frameworks Und natürlich: PhoneGap 27
  • 28. iUI http://code.google.com/p/iui/ http://video.yahoo.com/watch/853528/3491272 28
  • 29. iUI • Entwickelt von Joe Hewitt • Kein JavaScript • Erweitert Standard HTML • Überschreibt Links und Formulare mit Ajax • „Smooth Transitions“ 29
  • 30. Setup 30
  • 31. <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
  • 32. Beispiel 32
  • 33. <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
  • 34. Ergebnis 34
  • 35. 35
  • 36. iUI • Ideal für Darstellung hierarchischer Informationen • Eingeschränkte Funktionalität, optimal für „kleine“ Apps • Akzeptable Geschwindigkeit • „Defacto-Standard“ für iPhone 36
  • 37. iWebkit http://iwebkit.net/ 37
  • 38. iWebkit • Zielgruppe Nicht-Entwickler • Einfach und minimalistisch • Erweiterbar, schnell und anpassbar • Plugins für Grails, Drupal,WordPress... 38
  • 39. Setup 39
  • 40. <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
  • 41. Beispiel 41
  • 42. <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
  • 43. Ergebnis 43
  • 44. 44
  • 45. iWebkit • Gute Dokumentation und Beispiele • Ausführliches Framework • Stabil und ausgereift 45
  • 46. jQTouch http://jqtouch.com/ 46
  • 47. jQTouch • Basiert auf jQuery • Einfacher Setup • Native Webkit-Animationen • Callback Events • Flexible Themen • Swipe Detection • Erweiterbar via jQuery 47
  • 48. Setup 48
  • 49. <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
  • 50. Beispiel 50
  • 51. <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
  • 52. Ergebnis 52
  • 53. 53
  • 54. 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
  • 55. Sencha Touch http://www.sencha.com/products/touch/ 55
  • 56. Sencha Touch • JavaScript-API für mobile Anwendungen • Basiert auf Web-Standards • WebKit als Plattform (natürlich) • Unterstützung von Themen • Programmatisch 56
  • 57. 57
  • 58. jQuery Mobile http://jquerymobile.com/ 58
  • 59. jQuery Mobile • jQuery-Projekt • Sehr ambitioniert • jQuery Mobile 1.0 Alpha 2 • Deklarativ und programmatisch 59
  • 60. 60
  • 61. PhoneGap http://www.phonegap.com/ 61
  • 62. PhoneGap Cross-Plattform-Mobile-Framework zur Erstellung von nativen, mobilen Anwendungen mit HTML, CSS und JavaScript! 62
  • 63. PhoneGap • Erstellt von der Firma Nitobi • Open Source (MIT Lizenz) • Native App-Wrapper • Mehrere Plattformen 63
  • 64. Plattformen • iPhone • Android • Blackberry • webOS • Symbian • MeeGo • Windows Mobile • Windows Phone • Samsung Bada 64
  • 65. 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
  • 66. PhoneGap Projekte • www/ • index.html • config.xml • phonegap.js 66
  • 67. PhoneGap • Single Code Base • Standalone Web App • Native App 67
  • 68. ‘ello wrld 68
  • 69. Community 69
  • 70. http://build.phonegap.com 70
  • 71. 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
  • 72. Vielen Dank. Kontakt: twitter.com/martinsfeld 72

×