Cross-Apps-Entwicklung für iPhone, Android und Co.
-
Upload
peter-hecker -
Category
Mobile
-
view
110 -
download
0
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
Schulungenbei der GFU
• Durchführungsgarantie
• Kostenloses Rücktrittsrecht
• Qualitätsgarantie
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
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
<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
<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 & 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
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
iWebkit
• Zielgruppe Nicht-Entwickler
• Einfach und minimalistisch
• Erweiterbar, schnell und anpassbar
• Plugins für Grails, Drupal, WordPress...
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
<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
iWebkit
• Gute Dokumentation und Beispiele
• Ausführliches Framework
• Stabil und ausgereift
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
<html> <head> <meta charset="UTF-8" /> <title>jQTouch β</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
<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
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
http://www.phonegap.com/apps
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