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