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

50
Cross-Apps-Entwicklung für iPhone, Android und Co. Peter Hecker 28.05.2010 - dotnet Cologne 2010 Freitag, 28. Mai 2010

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

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

Peter Hecker

28.05.2010 - dotnet Cologne 2010

Freitag, 28. Mai 2010

Peter Hecker

• Berater

• Softwareentwickler

• Trainer

• Seit 1995 vorzugsweise und am liebsten Web-Technologien!

Freitag, 28. Mai 2010

Die GFU Cyrus AG

• IT-Schulungen

• > 550 Themen

• > 70 Dozenten

Freitag, 28. Mai 2010

Schulungenbei der GFU

• Durchführungsgarantie

• Kostenloses Rücktrittsrecht

• Qualitätsgarantie

Freitag, 28. Mai 2010

Dieser Vortrag„Mobile Apps“

am Beispiel einer ASP.NET-Anwendung

Freitag, 28. Mai 2010

2 %2 %3 %7 %

39 %

47 %

Der Mobile Markt

iPhone OSAndroidRIM OSwebOSWindows MobileAndere

Quelle: http://metrics.admob.com/

Freitag, 28. Mai 2010

Mobile Apps• Native Apps

• Objective-C (iPhone)

• Java (Android)

• Web-Apps

• HTML, CSS, JavaScript

• Web-Browser

Freitag, 28. Mai 2010

WebKit - webkit.org

• Desktop

• Safari, Chrome, Konqueror

• Mobile

• iPhone, Android, Palm Pre, Symbian, Samsung, Iris, Bolt

http://www.quirksmode.org/mobile/browsers.htmlFreitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

• iUI

• iWebkit

• jQTouch

• PhoneGap

Mobile Frameworks

Freitag, 28. Mai 2010

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

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

Freitag, 28. Mai 2010

iUI

• Entwickelt von Joe Hewitt

• Kein JavaScript

• Erweitert Standard HTML

• Überschreibt Links und Formulare mit Ajax

• „Smooth Transitions“

Freitag, 28. Mai 2010

Setup

Freitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

Beispiel

Freitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

Ergebnis

Freitag, 28. Mai 2010

Freitag, 28. Mai 2010

iUI

• Ideal für Darstellung hierarchischer Informationen

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

• Akzeptable Geschwindigkeit

• „Defacto-Standard“ für iPhone

Freitag, 28. Mai 2010

iWebkithttp://iwebkit.net/

Freitag, 28. Mai 2010

iWebkit

• Zielgruppe Nicht-Entwickler

• Einfach und minimalistisch

• Erweiterbar, schnell und anpassbar

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

Freitag, 28. Mai 2010

Setup

Freitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

Beispiel

Freitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

Ergebnis

Freitag, 28. Mai 2010

Freitag, 28. Mai 2010

iWebkit

• Gute Dokumentation und Beispiele

• Ausführliches Framework

• Stabil und ausgereift

Freitag, 28. Mai 2010

jQTouchhttp://jqtouch.com/

Freitag, 28. Mai 2010

jQTouch

• Basiert auf jQuery

• Einfacher Setup

• Native Webkit-Animationen

• Callback Events

• Flexible Themen

• Swipe Detection

• Erweiterbar via jQuery

Freitag, 28. Mai 2010

Setup

Freitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

Beispiel

Freitag, 28. Mai 2010

<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

Freitag, 28. Mai 2010

Ergebnis

Freitag, 28. Mai 2010

Freitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

PhoneGaphttp://www.phonegap.com/

http://docs.google.com/present/view?id=d99cqmc_287tnrdw4f6

Freitag, 28. Mai 2010

PhoneGapCross-Plattform-Mobile-Framework

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

Freitag, 28. Mai 2010

PhoneGap

• Erstellt von der Firma Nitobi

• Open Source (MIT Lizenz)

• Native App-Wrapper

• Mehrere Plattformen

Freitag, 28. Mai 2010

Betriebssysteme

• iPhone

• Android

• Blackberry

• Palm

• Symbian

• Maemo

• Windows Mobile

Freitag, 28. Mai 2010

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

Freitag, 28. Mai 2010

PhoneGap

• Single Code Base

• Standalone Web App

• Native App

Freitag, 28. Mai 2010

http://www.phonegap.com/apps

Freitag, 28. Mai 2010

World Cup Schedule

Freitag, 28. Mai 2010

1. Beispiel„iPhon(e)ifizierung“ mit iWebkit

Freitag, 28. Mai 2010

2. Beispiel„Mobil(e)isierung“ mit jQTouch

Freitag, 28. Mai 2010

3. Beispiel„App(si)sierung“ mit PhoneGap

Freitag, 28. Mai 2010

Fazit:„Wenn Ihre mobile Anwendung mit HTML, CSS und

JavaScript umgesetzt werden kann, dann können und sollten Sie dies auch tun.“

„Nutzen Sie jQTouch und PhoneGap!“

Freitag, 28. Mai 2010

Vielen Dank.

Freitag, 28. Mai 2010