Cross-Apps-Entwicklung für iPhone, Android und Co.
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,896 views

Kurzbeschreibung...

Kurzbeschreibung

Beschreibung: 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. Dozent: Peter Hecker, GFU Cyrus AG

Inhalt

- Einführung und Motivation
- Die WebKit-Plattform
- Überblick "mobile" Frameworks
- Zusammenfassung und Fazit

Statistics

Views

Total Views
2,896
Views on SlideShare
2,880
Embed Views
16

Actions

Likes
3
Downloads
16
Comments
0

1 Embed 16

http://www.techgig.com 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • X-Apps-Entwicklungfü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
  • Schulungenbei der GFU Cyrus AG• Durchführungsgarantie• Kostenloses Rücktrittsrecht• Qualitätsgarantie
  • Dieser Vortrag„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
  • iPhone
  • Android
  • Blackberry
  • How all smartphone users see 2G users!
  • 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
  • Trends 50 44,637,5 36,6 25 25,5 20,7 17,1 16,712,5 14,8 7,9 3,5 2,8 0 Symbian Android iOS Blackberry Windows Mobile 2009 2010
  • Mobile Apps• Native Apps • Objective-C (iPhone) • Java (Android)• Web-Apps • HTML, CSS, JavaScript (HTML5) • Web-Browser
  • WebKit - webkit.org • Desktop • Safari, Chrome, Konqueror • Mobile • iPhone, Android, PalmOS, Symbian, Blackberry OS, Samsung, Iris, Bolt, Adobe AIRhttp://www.quirksmode.org/mobile/browsers.html
  • 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
  • WebKit - CSS3• CSS-Transitions • Übergänge• CSS - Animations • Hardwarebeschleunigt • Key-Frame-Animationen• CSS-Transformations • skalieren, rotieren, verzerren, versetzen, Transformations- Matrix • 2D und 3D
  • WebKit - CSS3-Demo
  • 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, ...
  • WebKit - JavaScript- Demo
  • 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
  • WebKit - Audio/Video/ CSS-Demo
  • 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
  • WebKit - HTML5 Application Cache• Cache Manifest• Offline Speicherung der kompletten Applikation • HTML-Dateien (lokal oder remote) • Bilder • JavaScript • CSS• JavaScript API für Updates
  • WebKit - HTML5 Geolocation API• JavaScript-API• Zugriff auf Geodaten • GPS-Daten • Triangulation• Longitude, Latitude, Genauigkeit• Nachfrage im Browser• Tracking möglich
  • WebKit - SVG• Scalable Vector Graphics• W3C-Standard• Definition von Vektorgrafiken mittels XML• Animationen mittels SMIL
  • WebKit - HTML5 Canvas• <canvas>-Element• „Virtuelle Zeichenfläche“• Erstellung von Vektorgrafiken und Animationen• Zeichnen, Bilder,Verläufe, Spiegelungen, Transparenzen, Muster• Transformationen, Kompositionen• JavaScript API
  • 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
  • noch ein WebKit-Beispiel
  • Mobile Frameworks• „Die Klassiker“ • „Die jungen Wilden“ • iUI • Sencha Touch • iWebkit • jQuery Mobile • jQTouch Und natürlich: PhoneGap
  • iUI http://code.google.com/p/iui/http://video.yahoo.com/watch/853528/3491272
  • iUI• Entwickelt von Joe Hewitt• Kein JavaScript• Erweitert Standard HTML• Überschreibt Links und Formulare mit Ajax• „Smooth Transitions“
  • Setup
  • <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>
  • Beispiel
  • <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>
  • Ergebnis
  • iUI• Ideal für Darstellung hierarchischer Informationen• Eingeschränkte Funktionalität, optimal für „kleine“ Apps• Akzeptable Geschwindigkeit• „Defacto-Standard“ für iPhone
  • iWebkithttp://iwebkit.net/
  • iWebkit• Zielgruppe Nicht-Entwickler• Einfach und minimalistisch• Erweiterbar, schnell und anpassbar• Plugins für Grails, Drupal, WordPress...
  • Setup
  • <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>
  • Beispiel
  • <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" /><spanclass="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 buildingwith iWebKit 4:</p> </li> <li class="menu"><a href="list.html"> <img alt="list" src="thumbs/contacts.png" /><spanclass="name">Classic Lists</span><span class="comment">With Images</span><span class="arrow"></span></a></li>
  • Ergebnis
  • iWebkit• Gute Dokumentation und Beispiele• Ausführliches Framework• Stabil und ausgereift
  • jQTouchhttp://jqtouch.com/
  • jQTouch• Basiert auf jQuery• Einfacher Setup• Native Webkit-Animationen• Callback Events• Flexible Themen• Swipe Detection• Erweiterbar via jQuery
  • Setup
  • <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>
  • Beispiel
  • <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() ); }
  • Ergebnis
  • 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
  • Sencha Touchhttp://www.sencha.com/products/touch/
  • Sencha Touch• JavaScript-API für mobile Anwendungen• Basiert auf Web-Standards• WebKit als Plattform (natürlich)• Unterstützung von Themen• Programmatisch
  • jQuery Mobile http://jquerymobile.com/
  • jQuery Mobile• jQuery-Projekt• Sehr ambitioniert• jQuery Mobile 1.0 Alpha 2• Deklarativ und programmatisch
  • PhoneGaphttp://www.phonegap.com/
  • PhoneGap Cross-Plattform-Mobile-Frameworkzur Erstellung von nativen, mobilen Anwendungen mit HTML, CSS und JavaScript!
  • PhoneGap• Erstellt von der Firma Nitobi• Open Source (MIT Lizenz)• Native App-Wrapper• Mehrere Plattformen
  • Plattformen• iPhone• Android• Blackberry• webOS• Symbian• MeeGo• Windows Mobile• Windows Phone• Samsung Bada
  • 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
  • PhoneGap Projekte• www/ • index.html • config.xml • phonegap.js
  • PhoneGap• Single Code Base• Standalone Web App• Native App
  • ‘ello wrld
  • Community
  • http://build.phonegap.com
  • 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!
  • Vielen Dank.