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.
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.

3,487

Published on

Folien zum Vortrag "X-Apps-Entwicklung für iPhone, Android und Co." am 16.02.2011 in Bielefeld. …

Folien zum Vortrag "X-Apps-Entwicklung für iPhone, Android und Co." am 16.02.2011 in Bielefeld.

Vorstellung von Technologien und Frameworks für die Umsetzung von mobilen WebApps und hybriden mobilen Apps.

Web-Frameworks wie iUI, iWebkit, jQTouch und jQuery Mobile erleichtern die Umsetzung mobiler WebApps. Mit Phonegap kann man solche WebApps als hybride App bereitstellen.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,487
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
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 16.02.2011 - BielefeldDonnerstag, 17. Februar 2011
  • 2. Peter Hecker • Berater • Softwareentwickler • Trainer • Seit 1995 vorzugsweise und am liebsten Web-Technologien!Donnerstag, 17. Februar 2011
  • 3. Die GFU Cyrus AG • Gründung 1980 in Köln • Schulungen, Seminare, Kurse, Training für IT und Personalentwicklung • 10 Schulungsräume • ca. 550 ThemenDonnerstag, 17. Februar 2011
  • 4. Schulungen bei der GFU Cyrus AG • Durchführungsgarantie • Kostenloses Rücktrittsrecht • QualitätsgarantieDonnerstag, 17. Februar 2011
  • 5. Dieser Vortrag „Mobile WebApps für iPhone, Android und Co.“Donnerstag, 17. Februar 2011
  • 6. Bevor wir beginnen iPhone vs. Android vs. BlackBerry: „This is how smartphone users see each other“ http://9-b.it/cRFsbmDonnerstag, 17. Februar 2011
  • 7. iPhoneDonnerstag, 17. Februar 2011
  • 8. AndroidDonnerstag, 17. Februar 2011
  • 9. BlackberryDonnerstag, 17. Februar 2011
  • 10. How all smartphone users see 2G users!Donnerstag, 17. Februar 2011
  • 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=1466313Donnerstag, 17. Februar 2011
  • 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 2010Donnerstag, 17. Februar 2011
  • 13. Typen von „Mobilen Apps“ • Web Apps • Native Apps • Hybride AppsDonnerstag, 17. Februar 2011
  • 14. In diesem Vortrag! • Web Apps • Native Apps • Hybride AppsDonnerstag, 17. Februar 2011
  • 15. Objective-C Java J2ME/C++ HTML/Javascript Java .NETDonnerstag, 17. Februar 2011
  • 16. Webkit browser Webkit browser J2ME/C++ Webkit browser Webkit browser .NETDonnerstag, 17. Februar 2011
  • 17. WebKit - webkit.org • Desktop • Safari, Chrome, Konqueror • Mobile • iPhone, Android, WebOS, Symbian, Blackberry OS, Samsung, Iris, Bolt, Adobe AIR http://www.quirksmode.org/mobile/browsers.htmlDonnerstag, 17. Februar 2011
  • 18. 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 APIDonnerstag, 17. Februar 2011
  • 19. WebKit - CSS3 • CSS-Transitions • Übergänge • CSS-Animations • Hardwarebeschleunigt • Key-Frame-Animationen • CSS-Transformations • skalieren, rotieren, verzerren, versetzen, Transformations- Matrix • 2D und 3DDonnerstag, 17. Februar 2011
  • 20. WebKit - CSS3-DemoDonnerstag, 17. Februar 2011
  • 21. 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, ...Donnerstag, 17. Februar 2011
  • 22. WebKit - JavaScript- DemoDonnerstag, 17. Februar 2011
  • 23. 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/html5Donnerstag, 17. Februar 2011
  • 24. WebKit - Audio/Video/ CSS-DemoDonnerstag, 17. Februar 2011
  • 25. 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öglichDonnerstag, 17. Februar 2011
  • 26. WebKit - HTML5 Application Cache • Cache Manifest • Offline Speicherung der kompletten Applikation • HTML-Dateien (lokal oder remote) • Bilder • JavaScript • CSS • JavaScript API für UpdatesDonnerstag, 17. Februar 2011
  • 27. WebKit - HTML5 Geolocation API • JavaScript-API • Zugriff auf Geodaten • GPS-Daten • Triangulation • Longitude, Latitude, Genauigkeit • Nachfrage im Browser • Tracking möglichDonnerstag, 17. Februar 2011
  • 28. WebKit - SVG • Scalable Vector Graphics • W3C-Standard • Definition von Vektorgrafiken mittels XML • Animationen mittels SMILDonnerstag, 17. Februar 2011
  • 29. WebKit - HTML5 Canvas • <canvas>-Element • „Virtuelle Zeichenfläche“ • Erstellung von Vektorgrafiken und Animationen • Zeichnen, Bilder,Verläufe, Spiegelungen, Transparenzen, Muster • Transformationen, Kompositionen • JavaScript APIDonnerstag, 17. Februar 2011
  • 30. WebKit • Moderne und ausgereifte Browser-Engine • Mobile Marktführer setzen auf WebKit • Andere Plattformen ziehen nach • Vereinheitlichung der Entwicklung • Web-Technologien sind etabliert und beherrschbarDonnerstag, 17. Februar 2011
  • 31. noch ein WebKit-BeispielDonnerstag, 17. Februar 2011
  • 32. Mobile Frameworks • „Die Klassiker“ • „Die jungen Wilden“ • iUI • Sencha Touch • iWebkit • jQuery Mobile • jQTouch Und natürlich: PhoneGapDonnerstag, 17. Februar 2011
  • 33. iUI http://code.google.com/p/iui/ http://video.yahoo.com/watch/853528/3491272Donnerstag, 17. Februar 2011
  • 34. iUI • Entwickelt von Joe Hewitt • Kein JavaScript • Erweitert Standard HTML • Überschreibt Links und Formulare mit Ajax • „Smooth Transitions“Donnerstag, 17. Februar 2011
  • 35. SetupDonnerstag, 17. Februar 2011
  • 36. <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>Donnerstag, 17. Februar 2011
  • 37. BeispielDonnerstag, 17. Februar 2011
  • 38. <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 &amp; 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>Donnerstag, 17. Februar 2011
  • 39. ErgebnisDonnerstag, 17. Februar 2011
  • 40. Donnerstag, 17. Februar 2011
  • 41. iUI • Ideal für Darstellung hierarchischer Informationen • Eingeschränkte Funktionalität, optimal für „kleine“ Apps • Akzeptable Geschwindigkeit • „Defacto-Standard“ für iPhoneDonnerstag, 17. Februar 2011
  • 42. iWebkit http://snippetspace.com/Donnerstag, 17. Februar 2011
  • 43. iWebkit • Zielgruppe Nicht-Entwickler • Einfach und minimalistisch • Erweiterbar, schnell und anpassbar • Plugins für Grails, Drupal, WordPress...Donnerstag, 17. Februar 2011
  • 44. SetupDonnerstag, 17. Februar 2011
  • 45. <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>Donnerstag, 17. Februar 2011
  • 46. BeispielDonnerstag, 17. Februar 2011
  • 47. <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>Donnerstag, 17. Februar 2011
  • 48. ErgebnisDonnerstag, 17. Februar 2011
  • 49. Donnerstag, 17. Februar 2011
  • 50. iWebkit • Gute Dokumentation und Beispiele • Ausführliches Framework • Stabil und ausgereiftDonnerstag, 17. Februar 2011
  • 51. Donnerstag, 17. Februar 2011
  • 52. jQTouch http://jqtouch.com/Donnerstag, 17. Februar 2011
  • 53. jQTouch • Basiert auf jQuery • Einfacher Setup • Native Webkit-Animationen • Callback Events • Flexible Themen • Swipe Detection • Erweiterbar via jQueryDonnerstag, 17. Februar 2011
  • 54. SetupDonnerstag, 17. Februar 2011
  • 55. <html> <head> <meta charset="UTF-8" /> <title>jQTouch &beta;</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>Donnerstag, 17. Februar 2011
  • 56. BeispielDonnerstag, 17. Februar 2011
  • 57. <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() ); }Donnerstag, 17. Februar 2011
  • 58. ErgebnisDonnerstag, 17. Februar 2011
  • 59. Donnerstag, 17. Februar 2011
  • 60. jQTouch • Gute Geschwindigkeit • Offline- und Standort-Unterstützung • „Smoother Transisitons and animations“ • slide, slideup, dissolve, fade, flip, pop, swap, cube • Etwas komplexer in der AnwendungDonnerstag, 17. Februar 2011
  • 61. Sencha Touch http://www.sencha.com/products/touch/Donnerstag, 17. Februar 2011
  • 62. Sencha Touch • JavaScript-API für mobile Anwendungen • Basiert auf Web-Standards • WebKit als Plattform (natürlich) • Unterstützung von Themen • ProgrammatischDonnerstag, 17. Februar 2011
  • 63. Donnerstag, 17. Februar 2011
  • 64. jQuery Mobile http://jquerymobile.com/Donnerstag, 17. Februar 2011
  • 65. jQuery Mobile • jQuery-Projekt • Sehr ambitioniert • jQuery Mobile 1.0 Alpha 3 (04.02.2011) • Deklarativ und programmatischDonnerstag, 17. Februar 2011
  • 66. Donnerstag, 17. Februar 2011
  • 67. PhoneGap http://www.phonegap.com/Donnerstag, 17. Februar 2011
  • 68. PhoneGap Cross-Plattform-Mobile-Framework zur Erstellung von nativen, mobilen Anwendungen mit HTML5, CSS3 und JavaScriptDonnerstag, 17. Februar 2011
  • 69. PhoneGap • Erstellt von der Firma Nitobi • Open Source (MIT Lizenz) • Native App-Wrapper • Mehrere PlattformenDonnerstag, 17. Februar 2011
  • 70. Plattformen • iPhone • Android • Blackberry • webOS • Symbian • MeeGo • Windows Mobile • Windows Phone • Samsung BadaDonnerstag, 17. Februar 2011
  • 71. Geräte-Fähigkeiten • Geo • Accelerometer (Beschleunigungssensor) • Kamera / Fotos • Vibration • Kontakte • SMS / Telefonie • Sound / Video • Reachability (Netzwerkerreichbarkeit) • Magnometer (Kompass) • und natürlich alle BrowserfähigkeitenDonnerstag, 17. Februar 2011
  • 72. PhoneGap Projekte • www/ • index.html • config.xml • phonegap.jsDonnerstag, 17. Februar 2011
  • 73. Donnerstag, 17. Februar 2011
  • 74. http://build.phonegap.comDonnerstag, 17. Februar 2011
  • 75. 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!Donnerstag, 17. Februar 2011
  • 76. Schulungen zum Thema • „Apps-Entwicklung für iPhone, Android und Co. - Professionelle Applikationen für WebKit-Browser mit HTML, CSS und JavaScript“ • http://www.gfu.net/s1255.html • „HTML5 - Der professionelle Einstieg in die Standardsprache des Webs“ • http://www.gfu.net/s1291.htmlDonnerstag, 17. Februar 2011
  • 77. Vielen Dank.Donnerstag, 17. Februar 2011
  • 78. Kontaktdaten • Mail • hecker@gfu.net • XING • https://www.xing.com/profile/Peter_Hecker • Facebook • https://www.facebook.com/peter.hecker65 • Twitter • @martinsfeldDonnerstag, 17. Februar 2011

×