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

78
X-Apps-Entwicklung für iPhone, Android und Co. Peter Hecker 16.02.2011 - Bielefeld Donnerstag, 17. Februar 2011

description

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.

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

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

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

Peter Hecker

16.02.2011 - Bielefeld

Donnerstag, 17. Februar 2011

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

Peter Hecker

• Berater

• Softwareentwickler

• Trainer

• Seit 1995 vorzugsweise und am liebsten Web-Technologien!

Donnerstag, 17. Februar 2011

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

Die GFU Cyrus AG

• Gründung 1980 in Köln

• Schulungen, Seminare, Kurse, Training für IT und Personalentwicklung

• 10 Schulungsräume

• ca. 550 Themen

Donnerstag, 17. Februar 2011

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

Schulungenbei der GFU Cyrus AG

• Durchführungsgarantie

• Kostenloses Rücktrittsrecht

• Qualitätsgarantie

Donnerstag, 17. Februar 2011

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

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

Donnerstag, 17. Februar 2011

Page 6: X-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

Donnerstag, 17. Februar 2011

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

iPhone

Donnerstag, 17. Februar 2011

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

Android

Donnerstag, 17. Februar 2011

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

Blackberry

Donnerstag, 17. Februar 2011

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

How all smartphone users see 2G users!

Donnerstag, 17. Februar 2011

Page 11: X-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

Donnerstag, 17. Februar 2011

Page 12: X-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

Donnerstag, 17. Februar 2011

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

Typen von „Mobilen Apps“

• Web Apps

• Native Apps

• Hybride Apps

Donnerstag, 17. Februar 2011

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

In diesem Vortrag!

•Web Apps

• Native Apps

•Hybride Apps

Donnerstag, 17. Februar 2011

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

Objective-C Java J2ME/C++

HTML/Javascript Java .NETDonnerstag, 17. Februar 2011

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

Webkit browser Webkit browser J2ME/C++

Webkit browser Webkit browser .NETDonnerstag, 17. Februar 2011

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

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

Page 18: X-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

Donnerstag, 17. Februar 2011

Page 19: X-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

Donnerstag, 17. Februar 2011

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

WebKit - CSS3-Demo

Donnerstag, 17. Februar 2011

Page 21: X-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, ...

Donnerstag, 17. Februar 2011

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

WebKit - JavaScript-Demo

Donnerstag, 17. Februar 2011

Page 23: X-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

Donnerstag, 17. Februar 2011

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

WebKit - Audio/Video/CSS-Demo

Donnerstag, 17. Februar 2011

Page 25: X-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

Donnerstag, 17. Februar 2011

Page 26: X-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

Donnerstag, 17. Februar 2011

Page 27: X-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

Donnerstag, 17. Februar 2011

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

WebKit - SVG

• Scalable Vector Graphics

• W3C-Standard

• Definition von Vektorgrafiken mittels XML

• Animationen mittels SMIL

Donnerstag, 17. Februar 2011

Page 29: X-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

Donnerstag, 17. Februar 2011

Page 30: X-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

Donnerstag, 17. Februar 2011

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

noch ein WebKit-BeispielDonnerstag, 17. Februar 2011

Page 32: X-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

Donnerstag, 17. Februar 2011

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

iUIhttp://code.google.com/p/iui/

http://video.yahoo.com/watch/853528/3491272

Donnerstag, 17. Februar 2011

Page 34: X-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“

Donnerstag, 17. Februar 2011

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

Setup

Donnerstag, 17. Februar 2011

Page 36: X-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>

Donnerstag, 17. Februar 2011

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

Beispiel

Donnerstag, 17. Februar 2011

Page 38: X-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>

Donnerstag, 17. Februar 2011

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

Ergebnis

Donnerstag, 17. Februar 2011

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

Donnerstag, 17. Februar 2011

Page 41: X-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

Donnerstag, 17. Februar 2011

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

iWebkithttp://snippetspace.com/

Donnerstag, 17. Februar 2011

Page 43: X-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...

Donnerstag, 17. Februar 2011

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

Setup

Donnerstag, 17. Februar 2011

Page 45: X-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>

Donnerstag, 17. Februar 2011

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

Beispiel

Donnerstag, 17. Februar 2011

Page 47: X-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>

Donnerstag, 17. Februar 2011

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

Ergebnis

Donnerstag, 17. Februar 2011

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

Donnerstag, 17. Februar 2011

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

iWebkit

• Gute Dokumentation und Beispiele

• Ausführliches Framework

• Stabil und ausgereift

Donnerstag, 17. Februar 2011

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

Donnerstag, 17. Februar 2011

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

jQTouchhttp://jqtouch.com/

Donnerstag, 17. Februar 2011

Page 53: X-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

Donnerstag, 17. Februar 2011

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

Setup

Donnerstag, 17. Februar 2011

Page 55: X-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>

Donnerstag, 17. Februar 2011

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

Beispiel

Donnerstag, 17. Februar 2011

Page 57: X-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

Donnerstag, 17. Februar 2011

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

Ergebnis

Donnerstag, 17. Februar 2011

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

Donnerstag, 17. Februar 2011

Page 60: X-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

Donnerstag, 17. Februar 2011

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

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

Donnerstag, 17. Februar 2011

Page 62: X-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

Donnerstag, 17. Februar 2011

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

Donnerstag, 17. Februar 2011

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

jQuery Mobilehttp://jquerymobile.com/

Donnerstag, 17. Februar 2011

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

jQuery Mobile

• jQuery-Projekt

• Sehr ambitioniert

• jQuery Mobile 1.0 Alpha 3 (04.02.2011)

• Deklarativ und programmatisch

Donnerstag, 17. Februar 2011

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

Donnerstag, 17. Februar 2011

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

PhoneGaphttp://www.phonegap.com/

Donnerstag, 17. Februar 2011

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

PhoneGapCross-Plattform-Mobile-Framework

zur Erstellung von nativen, mobilen Anwendungen mit HTML5, CSS3 und JavaScript

Donnerstag, 17. Februar 2011

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

PhoneGap

• Erstellt von der Firma Nitobi

• Open Source (MIT Lizenz)

• Native App-Wrapper

• Mehrere Plattformen

Donnerstag, 17. Februar 2011

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

Plattformen• iPhone

• Android

• Blackberry

• webOS

• Symbian

• MeeGo

• Windows Mobile

• Windows Phone

• Samsung Bada

Donnerstag, 17. Februar 2011

Page 71: X-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

Donnerstag, 17. Februar 2011

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

PhoneGap Projekte

• www/

• index.html

• config.xml

• phonegap.js

Donnerstag, 17. Februar 2011

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

Donnerstag, 17. Februar 2011

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

http://build.phonegap.com

Donnerstag, 17. Februar 2011

Page 75: X-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!

Donnerstag, 17. Februar 2011

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

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

Donnerstag, 17. Februar 2011

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

Vielen Dank.

Donnerstag, 17. Februar 2011

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

Kontaktdaten• Mail

[email protected]

• XING

• https://www.xing.com/profile/Peter_Hecker

• Facebook

• https://www.facebook.com/peter.hecker65

• Twitter

• @martinsfeld

Donnerstag, 17. Februar 2011