Upload
martinsfeld-gmbh-co-kg
View
10
Download
2
Embed Size (px)
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.
Citation preview
X-Apps-Entwicklungfür iPhone, Android und Co.
Peter Hecker
16.02.2011 - Bielefeld
Donnerstag, 17. Februar 2011
Peter Hecker
• Berater
• Softwareentwickler
• Trainer
• Seit 1995 vorzugsweise und am liebsten Web-Technologien!
Donnerstag, 17. Februar 2011
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
Schulungenbei der GFU Cyrus AG
• Durchführungsgarantie
• Kostenloses Rücktrittsrecht
• Qualitätsgarantie
Donnerstag, 17. Februar 2011
Dieser Vortrag„Mobile WebApps für iPhone, Android und Co.“
Donnerstag, 17. Februar 2011
Bevor wir beginneniPhone vs. Android vs. BlackBerry:
„This is how smartphone users see each other“
http://9-b.it/cRFsbm
Donnerstag, 17. Februar 2011
iPhone
Donnerstag, 17. Februar 2011
Android
Donnerstag, 17. Februar 2011
Blackberry
Donnerstag, 17. Februar 2011
How all smartphone users see 2G users!
Donnerstag, 17. Februar 2011
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
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
Typen von „Mobilen Apps“
• Web Apps
• Native Apps
• Hybride Apps
Donnerstag, 17. Februar 2011
In diesem Vortrag!
•Web Apps
• Native Apps
•Hybride Apps
Donnerstag, 17. Februar 2011
Objective-C Java J2ME/C++
HTML/Javascript Java .NETDonnerstag, 17. Februar 2011
Webkit browser Webkit browser J2ME/C++
Webkit browser Webkit browser .NETDonnerstag, 17. Februar 2011
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
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
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
WebKit - CSS3-Demo
Donnerstag, 17. Februar 2011
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
WebKit - JavaScript-Demo
Donnerstag, 17. Februar 2011
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
WebKit - Audio/Video/CSS-Demo
Donnerstag, 17. Februar 2011
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
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
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
WebKit - SVG
• Scalable Vector Graphics
• W3C-Standard
• Definition von Vektorgrafiken mittels XML
• Animationen mittels SMIL
Donnerstag, 17. Februar 2011
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
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
noch ein WebKit-BeispielDonnerstag, 17. Februar 2011
• „Die Klassiker“
• iUI
• iWebkit
• jQTouch
• „Die jungen Wilden“
• Sencha Touch
• jQuery Mobile
Mobile Frameworks
Und natürlich: PhoneGap
Donnerstag, 17. Februar 2011
iUIhttp://code.google.com/p/iui/
http://video.yahoo.com/watch/853528/3491272
Donnerstag, 17. Februar 2011
iUI
• Entwickelt von Joe Hewitt
• Kein JavaScript
• Erweitert Standard HTML
• Überschreibt Links und Formulare mit Ajax
• „Smooth Transitions“
Donnerstag, 17. Februar 2011
Setup
Donnerstag, 17. Februar 2011
<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
Beispiel
Donnerstag, 17. Februar 2011
<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>
Donnerstag, 17. Februar 2011
Ergebnis
Donnerstag, 17. Februar 2011
Donnerstag, 17. Februar 2011
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
iWebkithttp://snippetspace.com/
Donnerstag, 17. Februar 2011
iWebkit
• Zielgruppe Nicht-Entwickler
• Einfach und minimalistisch
• Erweiterbar, schnell und anpassbar
• Plugins für Grails, Drupal, WordPress...
Donnerstag, 17. Februar 2011
Setup
Donnerstag, 17. Februar 2011
<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
Beispiel
Donnerstag, 17. Februar 2011
<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
Ergebnis
Donnerstag, 17. Februar 2011
Donnerstag, 17. Februar 2011
iWebkit
• Gute Dokumentation und Beispiele
• Ausführliches Framework
• Stabil und ausgereift
Donnerstag, 17. Februar 2011
Donnerstag, 17. Februar 2011
jQTouch
• Basiert auf jQuery
• Einfacher Setup
• Native Webkit-Animationen
• Callback Events
• Flexible Themen
• Swipe Detection
• Erweiterbar via jQuery
Donnerstag, 17. Februar 2011
Setup
Donnerstag, 17. Februar 2011
<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>
Donnerstag, 17. Februar 2011
Beispiel
Donnerstag, 17. Februar 2011
<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
Ergebnis
Donnerstag, 17. Februar 2011
Donnerstag, 17. Februar 2011
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
Sencha Touchhttp://www.sencha.com/products/touch/
Donnerstag, 17. Februar 2011
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
Donnerstag, 17. Februar 2011
jQuery Mobilehttp://jquerymobile.com/
Donnerstag, 17. Februar 2011
jQuery Mobile
• jQuery-Projekt
• Sehr ambitioniert
• jQuery Mobile 1.0 Alpha 3 (04.02.2011)
• Deklarativ und programmatisch
Donnerstag, 17. Februar 2011
Donnerstag, 17. Februar 2011
PhoneGaphttp://www.phonegap.com/
Donnerstag, 17. Februar 2011
PhoneGapCross-Plattform-Mobile-Framework
zur Erstellung von nativen, mobilen Anwendungen mit HTML5, CSS3 und JavaScript
Donnerstag, 17. Februar 2011
PhoneGap
• Erstellt von der Firma Nitobi
• Open Source (MIT Lizenz)
• Native App-Wrapper
• Mehrere Plattformen
Donnerstag, 17. Februar 2011
Plattformen• iPhone
• Android
• Blackberry
• webOS
• Symbian
• MeeGo
• Windows Mobile
• Windows Phone
• Samsung Bada
Donnerstag, 17. Februar 2011
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
PhoneGap Projekte
• www/
• index.html
• config.xml
• phonegap.js
Donnerstag, 17. Februar 2011
Donnerstag, 17. Februar 2011
http://build.phonegap.com
Donnerstag, 17. Februar 2011
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
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
Vielen Dank.
Donnerstag, 17. Februar 2011
Kontaktdaten• Mail
• https://www.xing.com/profile/Peter_Hecker
• https://www.facebook.com/peter.hecker65
• @martinsfeld
Donnerstag, 17. Februar 2011