X-Apps-Entwicklung für iPhone,Android und Co.

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!

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

Schulungenbei der GFU Cyrus AG

• Durchführungsgarantie

• Kostenloses Rücktrittsrecht

• Qualitätsgarantie

Dieser Vortrag„Mobile WebApps für iPhone, Android und Co.“

Bevor wir beginneniPhone 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!

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

Weltweiter Smartphone-Verkauf 11/2010

Andere2 %Linux2 %WinMO

3 % RIM15 %

iOS17 %

Android26 %

Symbian37 %

SymbianAndroidiOSRIMWinMOLinuxAndere

Symbian Android iOS Blackberry Windows Mobile2,8

14,816,7

20,717,1

Trends

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 .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

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-BeispielDonnerstag, 17. Februar 2011

• „Die Klassiker“

• iUI

• iWebkit

• jQTouch

• „Die jungen Wilden“

• Sencha Touch

• jQuery Mobile

Mobile Frameworks

Und natürlich: PhoneGap

iUIhttp://code.google.com/p/iui/

http://video.yahoo.com/watch/853528/3491272

• Entwickelt von Joe Hewitt

• Kein JavaScript

• Erweitert Standard HTML

• Überschreibt Links und Formulare mit Ajax

• „Smooth Transitions“

</style>

</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

• Ideal für Darstellung hierarchischer Informationen

• Eingeschränkte Funktionalität, optimal für „kleine“ Apps

• Akzeptable Geschwindigkeit

• „Defacto-Standard“ für iPhone

iWebkithttp://snippetspace.com/

iWebkit

• Zielgruppe Nicht-Entwickler

• Einfach und minimalistisch

• Erweiterbar, schnell und anpassbar

• Plugins für Grails, Drupal, WordPress...

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

jQTouchhttp://jqtouch.com/

jQTouch

• Basiert auf jQuery

• Einfacher Setup

• Native Webkit-Animationen

• Callback Events

• Flexible Themen

• Swipe Detection

• Erweiterbar via jQuery

<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

Initialization

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 Touchhttp://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 Mobilehttp://jquerymobile.com/

jQuery Mobile

• jQuery-Projekt

• Sehr ambitioniert

• jQuery Mobile 1.0 Alpha 3 (04.02.2011)

• Deklarativ und programmatisch

PhoneGaphttp://www.phonegap.com/

PhoneGapCross-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

• 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

X-Apps-Entwicklung für iPhone,Android und Co.

Technology

Transcript of X-Apps-Entwicklung für iPhone,Android und Co.

Connect2Home-App€¦ · Connect2Home App für das iPhone _____ 3 4. Connect2Home App für Android _____ 15 5. Problembehandlung _____ 29 Änderungen bei allen Angaben und Abbildungen

Nachhaltige Gewerbegebiete – Gut für die Biodiversität, attraktiv für Unternehmen

Logitech Harmony Linkimages.harmonyremote.com/MyHarmony/Manuals/HarmonyLink/...Die Harmony Link ermöglicht Ihnen die Verwendung Ihres Apple (iPhone, iPad oder iPod Touch) oder Android-Mobilgeräts

Professionelle Voice- Recorder-App · • Für iPhone und Android* Weitere Informationen finden Sie unter: Philips Mobile Server • Vor-Ort-Webserver-Lösung • Bietet die Möglichkeit,

Das HTC One mini - handyflash · Erstmalige Einrichtung des neuen Telefons 12 Inhalte von einem Android Telefon übertragen 13 Inhalte von einem iPhone übertragen 14 Übertragen

Systemfeld - Profil Markus Schwarz - Java, Core Media, iPhone, iPad, Android, ObjectiveC

Preisliste 2019 · rer App (iPhone und Android) eingesehen werden. Download unter „Montebello“. Firmenportrait 3 Montebello AG, Kies- und Betonwerk, 7504 Pontresina 081 / 838

iPad und Android analysiert und mit dem Suchverhalten der ... · PDF fileAndroid iPhone Computer Android iPhone Computer Android iPhone Computer Android iPhone Computer 0,5 0,4% 0

Apps mit HTML5 und CSS3 - content.schweitzer-online.decontent.schweitzer-online.de/static/catalog_manager/live/media_files… · Apps mit HTML5 und CSS3 für iPad, iPhone und Android.

iPhone & Android | Deutsch - Siilo€¦ · iPhone & Android | Deutsch . Sicher Chatten mit Kollegen Fallbesprechungen Medizinischer Messenger. Practice medicine together. Laden Sie

Das Kunden- management mit der persönlichen Note · für Ersatzteile) durch Techniker im Außendienst, per Tablet, iPad oder Smartphone (Windows Phone, iPhone, Android Phone) Vernetzte

Android, iPhone & Co.: die schöne neue Welt der mobilen ... · Android, iPhone & Co.: die schöne neue Welt der mobilen Anwendungen Vortrag GI Regionalgruppe Paderborn, 13. September

Mindbox mobile Apps für iPhone, iPad und Android

Kapitel 7 - wien.gv.at · PDF filekostenlose EULE-App für iPhone, Android und ... ner annähernd 4.000 m² großen Fläche ist ein ... schem Trinkwasser, die Abwasserentsorgung

Mediadaten Digital 2016 · Seite 2 | 15.01.2016 Sky Go Das Sky Programm überall entdecken: Im Web, auf iPad, iPhone und unterstützten Android Geräten. Das Sky Lieblingsprogramm

Attraktive Funktionen von Widex Evoke in Verbindung mit ...€¦ · RC-Dex iPhone ab iPhone 5S iPhone 4S — Android- Smartphone ab 6.0.1 und Bluetooth 4.14 — Android: älter als

PICTAR ONE/ONE PLUS Kameragriff - produktinfo.conrad.com · iPhone/Android Camera Grip Pictar One Plus PTONEBS40 7290107830812 119,99 MYMIGGÖ PICTAR ONE KAMERAGRIFF Kompatibel mit:

Apple und die Umwelt - iPhone - produktinfo.conrad.com · In diesem Handbuch wird iOS 8.4 für folgende Geräte beschrieben: iPhone 6 iPhone 6 Plus iPhone 5s iPhone 5c iPhone 5 iPhone

Quick-Einstieg Leitfaden - Network Butler · • Mobiltelefon oder Tablet mit Android System oder IPhone • Lizenz-Nummer und eigene Partnernummer (kommen per E-Mail nach Anmeldung)

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

Connect2Home-App€¦ · Connect2Home App für das iPhone ___ 3 4. Connect2Home App für Android _ 15 5. Problembehandlung ___ 29 Änderungen bei allen Angaben und Abbildungen