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

74
X-Apps-Entwicklung für iPhone, Android und Co. Peter Hecker 23.11.2010 - Treffpunkt Semicolon der GFU Cyrus AG, Köln

description

KurzbeschreibungBeschreibung: 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 AGInhalt- Einführung und Motivation- Die WebKit-Plattform- Überblick "mobile" Frameworks- Zusammenfassung und Fazit

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

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

X-Apps-Entwicklungfür iPhone, Android und Co.

Peter Hecker

23.11.2010 - Treffpunkt Semicolon der GFU Cyrus AG, Köln

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

Peter Hecker

• Berater

• Softwareentwickler

• Trainer

• Seit 1995 vorzugsweise und am liebsten Web-Technologien!

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

Die GFU Cyrus AG

• IT-Schulungen

• > 550 Themen

• > 70 Dozenten

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

Schulungenbei der GFU Cyrus AG

• Durchführungsgarantie

• Kostenloses Rücktrittsrecht

• Qualitätsgarantie

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

Dieser Vortrag„Mobile Apps für iPhone, Android und Co.“

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

Bevor wir beginneniPhone vs. Android vs. BlackBerry:

„This is how smartphone users see each other“

http://9-b.it/cRFsbm

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

iPhone

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

Android

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

Blackberry

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

How all smartphone users see 2G users!

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

Quelle: http://www.gartner.com/it/page.jsp?id=1466313

Weltweiter Smartphone-Verkauf 11/2010

Andere2 %Linux2 %WinMO

3 % RIM15 %

iOS17 %

Android26 %

Symbian37 %

SymbianAndroidiOSRIMWinMOLinuxAndere

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

0

12,5

25

37,5

50

Symbian Android iOS Blackberry Windows Mobile2,8

14,816,7

25,5

36,6

7,9

20,717,1

3,5

44,6

Trends

2009 2010

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

Mobile Apps

• Native Apps

• Objective-C (iPhone)

• Java (Android)

• Web-Apps

• HTML, CSS, JavaScript (HTML5)

• Web-Browser

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

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

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

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

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

WebKit - CSS3• CSS-Transitions

• Übergänge

• CSS - Animations

• Hardwarebeschleunigt

• Key-Frame-Animationen

• CSS-Transformations

• skalieren, rotieren, verzerren, versetzen, Transformations-Matrix

• 2D und 3D

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

WebKit - CSS3-Demo

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

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

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

WebKit - JavaScript-Demo

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

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

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

WebKit - Audio/Video/CSS-Demo

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

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

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

WebKit - HTML5 Application Cache

• Cache Manifest

• Offline Speicherung der kompletten Applikation

• HTML-Dateien (lokal oder remote)

• Bilder

• JavaScript

• CSS

• JavaScript API für Updates

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

WebKit - HTML5 Geolocation API

• JavaScript-API

• Zugriff auf Geodaten

• GPS-Daten

• Triangulation

• Longitude, Latitude, Genauigkeit

• Nachfrage im Browser

• Tracking möglich

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

WebKit - SVG

• Scalable Vector Graphics

• W3C-Standard

• Definition von Vektorgrafiken mittels XML

• Animationen mittels SMIL

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

WebKit - HTML5 Canvas

• <canvas>-Element

• „Virtuelle Zeichenfläche“

• Erstellung von Vektorgrafiken und Animationen

• Zeichnen, Bilder, Verläufe, Spiegelungen, Transparenzen, Muster

• Transformationen, Kompositionen

• JavaScript API

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

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

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

noch ein WebKit-Beispiel

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

• „Die Klassiker“

• iUI

• iWebkit

• jQTouch

• „Die jungen Wilden“

• Sencha Touch

• jQuery Mobile

Mobile Frameworks

Und natürlich: PhoneGap

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

iUI

• Entwickelt von Joe Hewitt

• Kein JavaScript

• Erweitert Standard HTML

• Überschreibt Links und Formulare mit Ajax

• „Smooth Transitions“

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

Setup

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

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

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

Beispiel

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

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

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

Ergebnis

Page 37: Cross-Apps-Entwicklung für iPhone, Android und Co.
Page 38: Cross-Apps-Entwicklung für iPhone, Android und Co.

iUI

• Ideal für Darstellung hierarchischer Informationen

• Eingeschränkte Funktionalität, optimal für „kleine“ Apps

• Akzeptable Geschwindigkeit

• „Defacto-Standard“ für iPhone

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

iWebkithttp://iwebkit.net/

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

iWebkit

• Zielgruppe Nicht-Entwickler

• Einfach und minimalistisch

• Erweiterbar, schnell und anpassbar

• Plugins für Grails, Drupal, WordPress...

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

Setup

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

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

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

Beispiel

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

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

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

Ergebnis

Page 46: Cross-Apps-Entwicklung für iPhone, Android und Co.
Page 47: Cross-Apps-Entwicklung für iPhone, Android und Co.

iWebkit

• Gute Dokumentation und Beispiele

• Ausführliches Framework

• Stabil und ausgereift

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

jQTouchhttp://jqtouch.com/

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

jQTouch

• Basiert auf jQuery

• Einfacher Setup

• Native Webkit-Animationen

• Callback Events

• Flexible Themen

• Swipe Detection

• Erweiterbar via jQuery

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

Setup

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

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

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

Beispiel

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

<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

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

Ergebnis

Page 55: Cross-Apps-Entwicklung für iPhone, Android und Co.
Page 56: Cross-Apps-Entwicklung für iPhone, Android und Co.

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

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

Sencha Touchhttp://www.sencha.com/products/touch/

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

Sencha Touch

• JavaScript-API für mobile Anwendungen

• Basiert auf Web-Standards

• WebKit als Plattform (natürlich)

• Unterstützung von Themen

• Programmatisch

Page 59: Cross-Apps-Entwicklung für iPhone, Android und Co.
Page 61: Cross-Apps-Entwicklung für iPhone, Android und Co.

jQuery Mobile

• jQuery-Projekt

• Sehr ambitioniert

• jQuery Mobile 1.0 Alpha 2

• Deklarativ und programmatisch

Page 62: Cross-Apps-Entwicklung für iPhone, Android und Co.
Page 63: Cross-Apps-Entwicklung für iPhone, Android und Co.

PhoneGaphttp://www.phonegap.com/

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

PhoneGapCross-Plattform-Mobile-Framework

zur Erstellung von nativen, mobilen Anwendungen mit HTML, CSS und JavaScript!

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

PhoneGap

• Erstellt von der Firma Nitobi

• Open Source (MIT Lizenz)

• Native App-Wrapper

• Mehrere Plattformen

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

Plattformen• iPhone

• Android

• Blackberry

• webOS

• Symbian

• MeeGo

• Windows Mobile

• Windows Phone

• Samsung Bada

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

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

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

PhoneGap Projekte

• www/

• index.html

• config.xml

• phonegap.js

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

PhoneGap

• Single Code Base

• Standalone Web App

• Native App

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

‘ello wrld

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

Community

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

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!

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

Vielen Dank.