SlideShare ist ein Scribd-Unternehmen logo

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

Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet: Einführung und Motivation, Die WebKit-Plattform, Überblick "mobile" Frameworks, Zusammenfassung und Fazit

1 von 74
Downloaden Sie, um offline zu lesen
X-Apps-Entwicklung
für iPhone,Android und Co.
Peter Hecker
23.11.2010 - Treffpunkt Semicolon
der GFU Cyrus AG, Köln
Peter Hecker
• Berater
• Softwareentwickler
• Trainer
• Seit 1995 vorzugsweise und am liebsten
Web-Technologien!
Die GFU Cyrus AG
• IT-Schulungen
• > 550 Themen
• > 70 Dozenten
Schulungen
bei der GFU Cyrus AG
• Durchführungsgarantie
• Kostenloses Rücktrittsrecht
• Qualitätsgarantie
DieserVortrag
„Mobile Apps für iPhone,Android und Co.“
Bevor wir beginnen
iPhone vs.Android vs. BlackBerry:
„This is how smartphone users see each other“
http://9-b.it/cRFsbm

Recomendados

jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seitendie.agilen GmbH
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidBjörn Wibben
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
USING ADAPTIVE MODELING TO VALIDATE CRE
USING ADAPTIVE MODELING TO VALIDATE CREUSING ADAPTIVE MODELING TO VALIDATE CRE
USING ADAPTIVE MODELING TO VALIDATE CREJames Rollins
 

Más contenido relacionado

Destacado

I am sharing my Experience I had with DAMS…
I am sharing my Experience I had with DAMS…I am sharing my Experience I had with DAMS…
I am sharing my Experience I had with DAMS…anindyanandi40
 
Darienne grey - Resume
Darienne grey - ResumeDarienne grey - Resume
Darienne grey - ResumeDarienne Grey
 
Previo 1 comercio electronico
Previo 1 comercio electronicoPrevio 1 comercio electronico
Previo 1 comercio electronicoyurdleygamez31
 
Asia Kolisnichenko_FutureMediaLab_11122015
Asia Kolisnichenko_FutureMediaLab_11122015Asia Kolisnichenko_FutureMediaLab_11122015
Asia Kolisnichenko_FutureMediaLab_11122015Asia Kolisnichenko
 
How to Enter the Federal Market Quickly
How to Enter the Federal Market QuicklyHow to Enter the Federal Market Quickly
How to Enter the Federal Market QuicklyZweigWhite
 
Rockwood Fellowship Evaluation 2012
Rockwood Fellowship Evaluation 2012Rockwood Fellowship Evaluation 2012
Rockwood Fellowship Evaluation 2012stacykono
 
Roxann matric certificate
Roxann matric certificateRoxann matric certificate
Roxann matric certificateRoxann Ristow
 
Informativo como agir em caso de incendio
Informativo como agir em caso de incendioInformativo como agir em caso de incendio
Informativo como agir em caso de incendioJosiane Costa
 

Destacado (16)

I am sharing my Experience I had with DAMS…
I am sharing my Experience I had with DAMS…I am sharing my Experience I had with DAMS…
I am sharing my Experience I had with DAMS…
 
Darienne grey - Resume
Darienne grey - ResumeDarienne grey - Resume
Darienne grey - Resume
 
Previo 1 comercio electronico
Previo 1 comercio electronicoPrevio 1 comercio electronico
Previo 1 comercio electronico
 
IYSP DOCUMENTS
IYSP DOCUMENTSIYSP DOCUMENTS
IYSP DOCUMENTS
 
Psit tense
Psit tensePsit tense
Psit tense
 
Asia Kolisnichenko_FutureMediaLab_11122015
Asia Kolisnichenko_FutureMediaLab_11122015Asia Kolisnichenko_FutureMediaLab_11122015
Asia Kolisnichenko_FutureMediaLab_11122015
 
How to Enter the Federal Market Quickly
How to Enter the Federal Market QuicklyHow to Enter the Federal Market Quickly
How to Enter the Federal Market Quickly
 
Tso torg
Tso torgTso torg
Tso torg
 
Rockwood Fellowship Evaluation 2012
Rockwood Fellowship Evaluation 2012Rockwood Fellowship Evaluation 2012
Rockwood Fellowship Evaluation 2012
 
揀選
揀選揀選
揀選
 
Lesson1 ex presprog
Lesson1 ex presprogLesson1 ex presprog
Lesson1 ex presprog
 
Inversion=ahorro
Inversion=ahorroInversion=ahorro
Inversion=ahorro
 
Roxann matric certificate
Roxann matric certificateRoxann matric certificate
Roxann matric certificate
 
Batik
BatikBatik
Batik
 
Informativo como agir em caso de incendio
Informativo como agir em caso de incendioInformativo como agir em caso de incendio
Informativo como agir em caso de incendio
 
Past tense
Past tensePast tense
Past tense
 

Ähnlich wie Cross-Apps-Entwicklung für iPhone, Android und Co.

Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.GFU Cyrus AG
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)Christian Heindel
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)die.agilen GmbH
 
Case Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-AppCase Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-AppFLYACTS GmbH
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileBenjamin Schmid
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als CacheDaniel Fisher
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa SuitePredrag61
 
Webcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die CloudWebcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die CloudQUIBIQ Hamburg
 

Ähnlich wie Cross-Apps-Entwicklung für iPhone, Android und Co. (20)

Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Case Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-AppCase Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-App
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
 
Webcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die CloudWebcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die Cloud
 

Mehr von Peter Hecker

Vom Framework zur App - Ein Blick in das React-Ökosystem
Vom Framework zur App - Ein Blick in das React-ÖkosystemVom Framework zur App - Ein Blick in das React-Ökosystem
Vom Framework zur App - Ein Blick in das React-ÖkosystemPeter Hecker
 
Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...
Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...
Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...Peter Hecker
 
TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...
TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...
TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...Peter Hecker
 
AngularJS für .NET-Entwickler
AngularJS für .NET-EntwicklerAngularJS für .NET-Entwickler
AngularJS für .NET-EntwicklerPeter Hecker
 
Cross Plattform Apps mit Visual Studio und Apache Cordova
Cross Plattform Apps mit Visual Studio und Apache CordovaCross Plattform Apps mit Visual Studio und Apache Cordova
Cross Plattform Apps mit Visual Studio und Apache CordovaPeter Hecker
 
NRWConf - Workshop Mobile Apps
NRWConf - Workshop Mobile AppsNRWConf - Workshop Mobile Apps
NRWConf - Workshop Mobile AppsPeter Hecker
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...Peter Hecker
 
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...Peter Hecker
 
Mobile Websites und (Web)-Apps mit jQuery Mobile
Mobile Websites und (Web)-Apps mit jQuery MobileMobile Websites und (Web)-Apps mit jQuery Mobile
Mobile Websites und (Web)-Apps mit jQuery MobilePeter Hecker
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
 
Internet Marketing
Internet MarketingInternet Marketing
Internet MarketingPeter Hecker
 

Mehr von Peter Hecker (14)

Vom Framework zur App - Ein Blick in das React-Ökosystem
Vom Framework zur App - Ein Blick in das React-ÖkosystemVom Framework zur App - Ein Blick in das React-Ökosystem
Vom Framework zur App - Ein Blick in das React-Ökosystem
 
Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...
Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...
Was darf’s denn sein: Angular, React, Vue.js – Über Frontend-Entwicklung im J...
 
TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...
TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...
TypeScript - Gut genug für große Anwendungen? Oder nur Brückentechnologie für...
 
AngularJS für .NET-Entwickler
AngularJS für .NET-EntwicklerAngularJS für .NET-Entwickler
AngularJS für .NET-Entwickler
 
Cross Plattform Apps mit Visual Studio und Apache Cordova
Cross Plattform Apps mit Visual Studio und Apache CordovaCross Plattform Apps mit Visual Studio und Apache Cordova
Cross Plattform Apps mit Visual Studio und Apache Cordova
 
NRWConf - Workshop Mobile Apps
NRWConf - Workshop Mobile AppsNRWConf - Workshop Mobile Apps
NRWConf - Workshop Mobile Apps
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
 
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
 
Mobile Websites und (Web)-Apps mit jQuery Mobile
Mobile Websites und (Web)-Apps mit jQuery MobileMobile Websites und (Web)-Apps mit jQuery Mobile
Mobile Websites und (Web)-Apps mit jQuery Mobile
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Internet Marketing
Internet MarketingInternet Marketing
Internet Marketing
 
.NET und jetzt!
.NET und jetzt!.NET und jetzt!
.NET und jetzt!
 

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

  • 1. X-Apps-Entwicklung für iPhone,Android und 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 Cyrus AG • IT-Schulungen • > 550 Themen • > 70 Dozenten
  • 4. Schulungen bei der GFU Cyrus AG • Durchführungsgarantie • Kostenloses Rücktrittsrecht • Qualitätsgarantie
  • 5. DieserVortrag „Mobile Apps fü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
  • 10. How all smartphone users see 2G users!
  • 11. 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
  • 12. 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
  • 13. Mobile Apps • Native Apps • 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
  • 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, ...
  • 20. 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
  • 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 • 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 und ausgereifte Browser-Engine • Mobile Marktführer setzen auf WebKit • Andere Plattformen ziehen nach • Vereinheitlichung der Entwicklung • Web-Technologien sind etabliert und beherrschbar
  • 29. • „Die Klassiker“ • iUI • iWebkit • jQTouch • „Die jungen Wilden“ • Sencha Touch • jQuery Mobile Mobile Frameworks Und natürlich: PhoneGap
  • 31. iUI • Entwickelt von Joe Hewitt • Kein JavaScript • Erweitert Standard HTML • Überschreibt Links und Formulare mit Ajax • „Smooth Transitions“
  • 32. Setup
  • 33. <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>
  • 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 &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>
  • 38. iUI • Ideal für Darstellung hierarchischer Informationen • Eingeschränkte Funktionalität, optimal für „kleine“ Apps • Akzeptable Geschwindigkeit • „Defacto-Standard“ für iPhone
  • 40. iWebkit • Zielgruppe Nicht-Entwickler • Einfach und minimalistisch • Erweiterbar, schnell und anpassbar • Plugins für Grails, Drupal,WordPress...
  • 41. Setup
  • 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>
  • 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>
  • 47. iWebkit • Gute Dokumentation und Beispiele • Ausführliches Framework • Stabil und ausgereift
  • 49. jQTouch • Basiert auf jQuery • Einfacher Setup • Native Webkit-Animationen • Callback Events • Flexible Themen • Swipe Detection • Erweiterbar via jQuery
  • 50. Setup
  • 51. <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>
  • 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
  • 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
  • 58. Sencha Touch • JavaScript-API für mobile Anwendungen • Basiert auf Web-Standards • WebKit als Plattform (natürlich) • Unterstützung von Themen • Programmatisch
  • 61. jQuery Mobile • jQuery-Projekt • Sehr ambitioniert • jQuery Mobile 1.0 Alpha 2 • Deklarativ und programmatisch
  • 64. PhoneGap Cross-Plattform-Mobile-Framework zur Erstellung von nativen, mobilen Anwendungen mit HTML, CSS und JavaScript!
  • 65. PhoneGap • Erstellt von der 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 Code Base • Standalone Web App • Native App
  • 73. 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!