SlideShare ist ein Scribd-Unternehmen logo
1 von 74
Downloaden Sie, um offline zu lesen
X-Apps-Entwicklung
für iPhone, Android und Co.
              Peter Hecker

    23.11.2010 - Treffpunkt Semicolon
        der GFU Cyrus AG, Köln
Peter Hecker
• Berater
• Softwareentwickler
• Trainer

• Seit 1995 vorzugsweise und am liebsten
  Web-Technologien!
Die GFU Cyrus AG

• IT-Schulungen
• > 550 Themen
• > 70 Dozenten
Schulungen
bei der GFU Cyrus AG

• Durchführungsgarantie
• Kostenloses Rücktrittsrecht
• Qualitätsgarantie
Dieser Vortrag
„Mobile Apps 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




                                     Android
                                                Symbian
                                      26 %
                                                Android
               Symbian                          iOS
                 37 %                           RIM
                                                WinMO
                                                Linux
                                                Andere
                                         iOS
                                         17 %
                   Andere
                     Linux
                      WinMO
                    2 %
                      2 %     RIM
                        3 %
                              15 %




Quelle: http://www.gartner.com/it/page.jsp?id=1466313
Trends
 50

       44,6
37,5
              36,6


 25                        25,5
                                                        20,7
                                    17,1         16,7
12,5                                                           14,8

                                                                        7,9
                     3,5                                                       2,8
  0
        Symbian       Android              iOS          Blackberry    Windows Mobile


                             2009                2010
Mobile Apps
• Native Apps
 • Objective-C (iPhone)
 • Java (Android)
• Web-Apps
 • HTML, CSS, JavaScript (HTML5)
 • Web-Browser
WebKit - webkit.org
  • Desktop
   • Safari, Chrome, Konqueror
  • Mobile
   • iPhone, Android, PalmOS, 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
•   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
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
•   Offline Speicherung der kompletten Applikation
    •   HTML-Dateien (lokal oder remote)
    •   Bilder
    •   JavaScript
    •   CSS
•   JavaScript API für Updates
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“        •   „Die jungen Wilden“

    •   iUI                    •   Sencha Touch

    •   iWebkit                •   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; 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>
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 &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>
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://iwebkit.net/
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 &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>
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 2
• Deklarativ und programmatisch
PhoneGap
http://www.phonegap.com/
PhoneGap
         Cross-Plattform-Mobile-Framework
zur Erstellung von nativen, mobilen Anwendungen mit
              HTML, CSS 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
PhoneGap

• Single Code Base
• Standalone Web App
• Native App
‘ello wrld
Community
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!
Vielen Dank.

Weitere ähnliche Inhalte

Was ist angesagt?

Java für eingebettete Systeme
Java für eingebettete SystemeJava für eingebettete Systeme
Java für eingebettete Systeme
rdmeyer
 
Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für Entwickler
Jan Hentschel
 

Was ist angesagt? (20)

Vortragsreihe Dortmund: Unified Development Environments
Vortragsreihe Dortmund: Unified Development EnvironmentsVortragsreihe Dortmund: Unified Development Environments
Vortragsreihe Dortmund: Unified Development Environments
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
Elsholz stoll js_03_10
Elsholz stoll js_03_10Elsholz stoll js_03_10
Elsholz stoll js_03_10
 
CDI
CDICDI
CDI
 
Die Java Plattform Strategie
Die Java Plattform StrategieDie Java Plattform Strategie
Die Java Plattform Strategie
 
Java für eingebettete Systeme
Java für eingebettete SystemeJava für eingebettete Systeme
Java für eingebettete Systeme
 
Softwarequalität Entwicklung - Test - Wartung
Softwarequalität Entwicklung -  Test - WartungSoftwarequalität Entwicklung -  Test - Wartung
Softwarequalität Entwicklung - Test - Wartung
 
JavaFX goes open source
JavaFX goes open sourceJavaFX goes open source
JavaFX goes open source
 
Von Maven zu Gradle in 45 Minuten
Von Maven zu Gradle in 45 MinutenVon Maven zu Gradle in 45 Minuten
Von Maven zu Gradle in 45 Minuten
 
Windows 8 für Entwickler
Windows 8 für EntwicklerWindows 8 für Entwickler
Windows 8 für Entwickler
 
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
Anforderungsanalyse - Zu Risiken und Nebenwirkungen (be-)fragen Sie Ihren Nut...
 
Softwaretests: Werkzeuge zur Automatisierung
Softwaretests: Werkzeuge zur AutomatisierungSoftwaretests: Werkzeuge zur Automatisierung
Softwaretests: Werkzeuge zur Automatisierung
 
Modularisierung - was soll das?
Modularisierung - was soll das?Modularisierung - was soll das?
Modularisierung - was soll das?
 
Regulatorics: Offside is when the referee whistles - DOAG 2018
Regulatorics: Offside is when the referee whistles - DOAG 2018Regulatorics: Offside is when the referee whistles - DOAG 2018
Regulatorics: Offside is when the referee whistles - DOAG 2018
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
 
Portale 2.0 mit Liferay
Portale 2.0 mit LiferayPortale 2.0 mit Liferay
Portale 2.0 mit Liferay
 
Agiles Backlog Management - den Überblick über agile Backlogs behalten
Agiles Backlog Management - den Überblick über agile Backlogs behaltenAgiles Backlog Management - den Überblick über agile Backlogs behalten
Agiles Backlog Management - den Überblick über agile Backlogs behalten
 
WPF UI-Development Best Practices
WPF UI-Development Best PracticesWPF UI-Development Best Practices
WPF UI-Development Best Practices
 
Codeception VisualCeption
Codeception VisualCeptionCodeception VisualCeption
Codeception VisualCeption
 

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

Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Christian Heindel
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 

Ähnlich wie Cross-Apps-Entwicklung für iPhone, Android und Co. (20)

Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
Collaboration Days 2011 - Mobile Anwendungen für SharePoint mit HTML5
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Mobile Applikationen mit iBROWS
Mobile Applikationen mit iBROWSMobile Applikationen mit iBROWS
Mobile Applikationen mit iBROWS
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 

Mehr von GFU Cyrus AG

Java Persistence 2.0
Java Persistence 2.0Java Persistence 2.0
Java Persistence 2.0
GFU Cyrus AG
 
Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...
Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...
Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...
GFU Cyrus AG
 

Mehr von GFU Cyrus AG (20)

Social Media im Unternehmen
Social Media im UnternehmenSocial Media im Unternehmen
Social Media im Unternehmen
 
Clean Code Developer
Clean Code DeveloperClean Code Developer
Clean Code Developer
 
Datenschutz bei Facebook & Co. - Wie schütze ich meine persönlichen Daten im ...
Datenschutz bei Facebook & Co. - Wie schütze ich meine persönlichen Daten im ...Datenschutz bei Facebook & Co. - Wie schütze ich meine persönlichen Daten im ...
Datenschutz bei Facebook & Co. - Wie schütze ich meine persönlichen Daten im ...
 
SharePoint 2010 - Was ist neu, was wird besser!
SharePoint 2010 - Was ist neu, was wird besser!SharePoint 2010 - Was ist neu, was wird besser!
SharePoint 2010 - Was ist neu, was wird besser!
 
Java Persistence 2.0
Java Persistence 2.0Java Persistence 2.0
Java Persistence 2.0
 
Pragmatische Einführung von IT-Servicemanagement - ITIL im Unternehmen - Erfa...
Pragmatische Einführung von IT-Servicemanagement - ITIL im Unternehmen - Erfa...Pragmatische Einführung von IT-Servicemanagement - ITIL im Unternehmen - Erfa...
Pragmatische Einführung von IT-Servicemanagement - ITIL im Unternehmen - Erfa...
 
Liferay Portal - ein Webportal für viele Unternehmensanforderungen
Liferay Portal - ein Webportal für viele UnternehmensanforderungenLiferay Portal - ein Webportal für viele Unternehmensanforderungen
Liferay Portal - ein Webportal für viele Unternehmensanforderungen
 
PostgreSQL im Produktivbetrieb
PostgreSQL im ProduktivbetriebPostgreSQL im Produktivbetrieb
PostgreSQL im Produktivbetrieb
 
Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...
Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...
Java Server Faces 2.0 - Der Standard für moderne und komponentenbasierte Weba...
 
Wieviel Web2.0 braucht Ihr Unternehmen?
Wieviel Web2.0 braucht Ihr Unternehmen?Wieviel Web2.0 braucht Ihr Unternehmen?
Wieviel Web2.0 braucht Ihr Unternehmen?
 
Das Java-Spring-Framework in der Praxis
Das Java-Spring-Framework in der PraxisDas Java-Spring-Framework in der Praxis
Das Java-Spring-Framework in der Praxis
 
Agile Geschäftsprozeßanalyse OOA/D am Beispiel einer Seminarverwaltung
Agile Geschäftsprozeßanalyse OOA/D am Beispiel einer SeminarverwaltungAgile Geschäftsprozeßanalyse OOA/D am Beispiel einer Seminarverwaltung
Agile Geschäftsprozeßanalyse OOA/D am Beispiel einer Seminarverwaltung
 
Wissensmanagement bei Volkswagen
Wissensmanagement bei VolkswagenWissensmanagement bei Volkswagen
Wissensmanagement bei Volkswagen
 
Professionelle Anforderungsanalyse am Beispiel einer Java-Anwendung zur Betri...
Professionelle Anforderungsanalyse am Beispiel einer Java-Anwendung zur Betri...Professionelle Anforderungsanalyse am Beispiel einer Java-Anwendung zur Betri...
Professionelle Anforderungsanalyse am Beispiel einer Java-Anwendung zur Betri...
 
Grenzüberschreitende Geschäftsprozesse mit Microsoft SharePoint und BizTalk
Grenzüberschreitende Geschäftsprozesse mit Microsoft SharePoint und BizTalkGrenzüberschreitende Geschäftsprozesse mit Microsoft SharePoint und BizTalk
Grenzüberschreitende Geschäftsprozesse mit Microsoft SharePoint und BizTalk
 
Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...
Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...
Projekt! - Toll - Ein Anderer Macht`s! - Voraussetzungen für eine erfolgreich...
 
Standardsoftware in der Versicherungsbranche - Betrachtung eines Paradigmenwe...
Standardsoftware in der Versicherungsbranche - Betrachtung eines Paradigmenwe...Standardsoftware in der Versicherungsbranche - Betrachtung eines Paradigmenwe...
Standardsoftware in der Versicherungsbranche - Betrachtung eines Paradigmenwe...
 
E-Learning mit Moodle
E-Learning mit MoodleE-Learning mit Moodle
E-Learning mit Moodle
 
LINQ - Einheitlicher Datenzugriff in .NET
LINQ - Einheitlicher Datenzugriff in .NETLINQ - Einheitlicher Datenzugriff in .NET
LINQ - Einheitlicher Datenzugriff in .NET
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 

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

  • 1. X-Apps-Entwicklung für iPhone, Android und Co. Peter Hecker 23.11.2010 - Treffpunkt Semicolon der GFU Cyrus AG, Köln
  • 2. Peter Hecker • Berater • Softwareentwickler • Trainer • Seit 1995 vorzugsweise und am liebsten Web-Technologien!
  • 3. Die GFU Cyrus AG • IT-Schulungen • > 550 Themen • > 70 Dozenten
  • 4. Schulungen bei der GFU Cyrus AG • Durchführungsgarantie • Kostenloses Rücktrittsrecht • Qualitätsgarantie
  • 5. Dieser Vortrag „Mobile Apps für iPhone, Android und Co.“
  • 6. Bevor wir beginnen iPhone vs. Android vs. BlackBerry: „This is how smartphone users see each other“ http://9-b.it/cRFsbm
  • 10. How all smartphone users see 2G users!
  • 11. Weltweiter Smartphone-Verkauf 11/2010 Android Symbian 26 % Android Symbian iOS 37 % RIM WinMO Linux Andere iOS 17 % Andere Linux WinMO 2 % 2 % RIM 3 % 15 % Quelle: http://www.gartner.com/it/page.jsp?id=1466313
  • 12. Trends 50 44,6 37,5 36,6 25 25,5 20,7 17,1 16,7 12,5 14,8 7,9 3,5 2,8 0 Symbian Android iOS Blackberry Windows Mobile 2009 2010
  • 13. Mobile Apps • Native Apps • Objective-C (iPhone) • Java (Android) • Web-Apps • HTML, CSS, JavaScript (HTML5) • Web-Browser
  • 14. WebKit - webkit.org • Desktop • Safari, Chrome, Konqueror • Mobile • iPhone, Android, PalmOS, Symbian, Blackberry OS, Samsung, Iris, Bolt, Adobe AIR http://www.quirksmode.org/mobile/browsers.html
  • 15. 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
  • 16. WebKit - CSS3 • CSS-Transitions • Übergänge • CSS - Animations • Hardwarebeschleunigt • Key-Frame-Animationen • CSS-Transformations • skalieren, rotieren, verzerren, versetzen, Transformations- Matrix • 2D und 3D
  • 18. 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, ...
  • 20. 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
  • 22. 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
  • 23. WebKit - HTML5 Application Cache • Cache Manifest • Offline Speicherung der kompletten Applikation • HTML-Dateien (lokal oder remote) • Bilder • JavaScript • CSS • JavaScript API für Updates
  • 24. WebKit - HTML5 Geolocation API • JavaScript-API • Zugriff auf Geodaten • GPS-Daten • Triangulation • Longitude, Latitude, Genauigkeit • Nachfrage im Browser • Tracking möglich
  • 25. WebKit - SVG • Scalable Vector Graphics • W3C-Standard • Definition von Vektorgrafiken mittels XML • Animationen mittels SMIL
  • 26. WebKit - HTML5 Canvas • <canvas>-Element • „Virtuelle Zeichenfläche“ • Erstellung von Vektorgrafiken und Animationen • Zeichnen, Bilder,Verläufe, Spiegelungen, Transparenzen, Muster • Transformationen, Kompositionen • JavaScript API
  • 27. 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
  • 29. Mobile Frameworks • „Die Klassiker“ • „Die jungen Wilden“ • iUI • Sencha Touch • iWebkit • jQuery Mobile • jQTouch Und natürlich: PhoneGap
  • 30. iUI http://code.google.com/p/iui/ http://video.yahoo.com/watch/853528/3491272
  • 31. iUI • Entwickelt von Joe Hewitt • Kein JavaScript • Erweitert Standard HTML • Überschreibt Links und Formulare mit Ajax • „Smooth Transitions“
  • 32. Setup
  • 33. <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>
  • 35. <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>
  • 37.
  • 38. iUI • Ideal für Darstellung hierarchischer Informationen • Eingeschränkte Funktionalität, optimal für „kleine“ Apps • Akzeptable Geschwindigkeit • „Defacto-Standard“ für iPhone
  • 40. iWebkit • Zielgruppe Nicht-Entwickler • Einfach und minimalistisch • Erweiterbar, schnell und anpassbar • Plugins für Grails, Drupal, WordPress...
  • 41. Setup
  • 42. <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>
  • 44. <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>
  • 46.
  • 47. iWebkit • Gute Dokumentation und Beispiele • Ausführliches Framework • Stabil und ausgereift
  • 49. jQTouch • Basiert auf jQuery • Einfacher Setup • Native Webkit-Animationen • Callback Events • Flexible Themen • Swipe Detection • Erweiterbar via jQuery
  • 50. Setup
  • 51. <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>
  • 53. <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() ); }
  • 55.
  • 56. 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
  • 58. Sencha Touch • JavaScript-API für mobile Anwendungen • Basiert auf Web-Standards • WebKit als Plattform (natürlich) • Unterstützung von Themen • Programmatisch
  • 59.
  • 61. jQuery Mobile • jQuery-Projekt • Sehr ambitioniert • jQuery Mobile 1.0 Alpha 2 • Deklarativ und programmatisch
  • 62.
  • 64. PhoneGap Cross-Plattform-Mobile-Framework zur Erstellung von nativen, mobilen Anwendungen mit HTML, CSS und JavaScript!
  • 65. PhoneGap • Erstellt von der Firma Nitobi • Open Source (MIT Lizenz) • Native App-Wrapper • Mehrere Plattformen
  • 66. Plattformen • iPhone • Android • Blackberry • webOS • Symbian • MeeGo • Windows Mobile • Windows Phone • Samsung Bada
  • 67. 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
  • 68. PhoneGap Projekte • www/ • index.html • config.xml • phonegap.js
  • 69. PhoneGap • Single Code Base • Standalone Web App • Native App
  • 73. 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!