X-Apps-Entwicklung für iphone, Android und Co. Peter Hecker 16.02.2011 - Bielefeld
Peter Hecker Berater Softwareentwickler Trainer Seit 1995 vorzugsweise und am liebsten Web-Technologien!
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
Schulungen bei der GFU Cyrus AG Durchführungsgarantie Kostenloses Rücktrittsrecht Qualitätsgarantie
Dieser Vortrag Mobile WebApps für iphone, Android und Co.
Bevor wir beginnen iphone vs. Android vs. BlackBerry: This is how smartphone users see each other http://9-b.it/crfsbm
iphone
Android
Blackberry
How all smartphone users see 2G users!
Weltweiter Smartphone-Verkauf 11/2010 Symbian 37 % Andere 2 Linux WinMO % 2 % 3 % RIM 15 % Android 26 % ios 17 % Symbian Android ios RIM WinMO Linux Andere Quelle: http://www.gartner.com/it/page.jsp?id=1466313
Trends 50 37,5 44,6 36,6 25 25,5 12,5 17,1 16,7 20,7 14,8 0 7,9 3,5 2,8 Symbian Android ios Blackberry Windows Mobile 2009 2010
Typen von Mobilen Apps Web Apps Native Apps Hybride Apps
In diesem Vortrag! Web Apps Native Apps Hybride Apps
Objective-C Java J2ME/C++ HTML/Javascript Java.NET
Webkit browser Webkit browser J2ME/C++ Webkit browser Webkit browser.net
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.html
WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 Canvas SVG (Scalable Vector Graphics) HTLM5 Offline Data Storage HTML5 Audio und Video Element HTML5 Geolocation API CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) AJAX (XMLHTTP-Request) / Web 2.0
WebKit - CSS3 CSS-Transitions Übergänge CSS-Animations Hardwarebeschleunigt Key-Frame-Animationen CSS-Transformations skalieren, rotieren, verzerren, versetzen, Transformations- Matrix 2D und 3D
WebKit - CSS3-Demo
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,...
WebKit - JavaScript- Demo
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
WebKit - Audio/Video/ CSS-Demo
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
WebKit - HTML5 Application Cache Cache Manifest HTML-Dateien (lokal oder remote) Bilder JavaScript CSS JavaScript API für Updates Offline Speicherung der kompletten Applikation
WebKit - HTML5 Geolocation API JavaScript-API Zugriff auf Geodaten GPS-Daten Triangulation Longitude, Latitude, Genauigkeit Nachfrage im Browser Tracking möglich
WebKit - SVG Scalable Vector Graphics W3C-Standard Definition von Vektorgrafiken mittels XML Animationen mittels SMIL
WebKit - HTML5 Canvas <canvas>-element Virtuelle Zeichenfläche Erstellung von Vektorgrafiken und Animationen Zeichnen, Bilder, Verläufe, Spiegelungen, Transparenzen, Muster Transformationen, Kompositionen JavaScript API
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
noch ein WebKit-Beispiel
Mobile Frameworks Die Klassiker iui iwebkit Die jungen Wilden Sencha Touch jquery Mobile jqtouch Und natürlich: PhoneGap
iui http://code.google.com/p/iui/ http://video.yahoo.com/watch/853528/3491272
iui Entwickelt von Joe Hewitt Kein JavaScript Erweitert Standard HTML Überschreibt Links und Formulare mit Ajax Smooth Transitions
Setup
<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; userscalable=0;"/> <link rel="apple-touch-icon" href="iui-logo-touchicon.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>
Beispiel
<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>
Ergebnis
iui Ideal für Darstellung hierarchischer Informationen Eingeschränkte Funktionalität, optimal für kleine Apps Akzeptable Geschwindigkeit Defacto-Standard für iphone
iwebkit http://snippetspace.com/
iwebkit Zielgruppe Nicht-Entwickler Einfach und minimalistisch Erweiterbar, schnell und anpassbar Plugins für Grails, Drupal, WordPress...
Setup
<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>
Beispiel
<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>
Ergebnis
iwebkit Gute Dokumentation und Beispiele Ausführliches Framework Stabil und ausgereift
jqtouch http://jqtouch.com/
jqtouch Basiert auf jquery Einfacher Setup Native Webkit-Animationen Callback Events Flexible Themen Swipe Detection Erweiterbar via jquery
Setup
<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>
Beispiel
<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' Initialization $(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() ); }
Ergebnis
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
Sencha Touch http://www.sencha.com/products/touch/
Sencha Touch JavaScript-API für mobile Anwendungen Basiert auf Web-Standards WebKit als Plattform (natürlich) Unterstützung von Themen Programmatisch
jquery Mobile http://jquerymobile.com/
jquery Mobile jquery-projekt Sehr ambitioniert jquery Mobile 1.0 Alpha 3 (04.02.2011) Deklarativ und programmatisch
PhoneGap http://www.phonegap.com/
PhoneGap Cross-Plattform-Mobile-Framework zur Erstellung von nativen, mobilen Anwendungen mit HTML5, CSS3 und JavaScript
PhoneGap Erstellt von der Firma Nitobi Open Source (MIT Lizenz) Native App-Wrapper Mehrere Plattformen
Plattformen iphone Android Blackberry webos Symbian MeeGo Windows Mobile Windows Phone Samsung Bada
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
PhoneGap Projekte www/ index.html config.xml phonegap.js
http://build.phonegap.com
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!
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
Vielen Dank.
Kontaktdaten Mail hecker@gfu.net XING https://www.xing.com/profile/peter_hecker Facebook https://www.facebook.com/peter.hecker65 Twitter @martinsfeld