AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Herzlich Willkommen
zum Workshop
„Mobile Apps“
Ihr Dozent: Peter Hecker, GFU Cyrus AG
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Peter Hecker
• Seit 1986:
„Entwickler,Trainer“
• Seit 1995:
„Web-Entwicklung“
• Seit 2009:
„Mobile WebApps“
• Vorstand in der
GFU Cyrus AG
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
GFU Cyrus AG
„Ihr Partner für IT-Schulungen“
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Mobile Apps
mit HTML5, CSS3, JavaScript
und Cordova/Phonegap
Workshop auf der NRW Conf 2014
11.09.2014
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Der Workshop zeigt, wie man mit
HTML5, CSS3 und JavaScript mobile
WebApps erstellt und diese dann mit Hilfe
von Cordova / PhoneGap als Hybride
App für mehrere Plattformen bereitstellt.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Ablauf
• Teil 1: PhoneGap / Cordova
• Teil 2: Mobile Frameworks
• Teil 3: HTML5 und Co.
• Teil 4: Ihr Projekt	

/ Zeit zum Ausprobieren
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Teil 1:
PhoneGap / Cordova
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
PhoneGap
Cross-Plattform-Mobile-Framework
zur Erstellung von nativen, mobilen Anwendungen mit
HTML, CSS und JavaScript!
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
PhoneGap
• Native App-Wrapper
• Erstellt von der Firma Nitobi
• Nitobi wurde 10/2011 von Adobe gekauft
• ab 02/2012 ein Apache Projekt (Cordova)
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
PhoneGap/Cordova
http://www.phonegap.com/
http://cordova.apache.org/
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Plattformen
• Amazon
• Android
• Blackberry 10
• FireFox OS
• iPhone
• Ubuntu
• Windows Phone 7 / 8
• Windows 8
• Tizen
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
iPhone /iPhone /
iPhone 3GiPhone 3G
AccelerometerAccelerometer ✓✓
CameraCamera ✓✓
CompassCompass XXXX
ContactsContacts ✓✓
FileFile ✓✓
GeolocationGeolocation ✓✓
MediaMedia ✓✓
NetworkNetwork ✓✓
Notification (Alert)Notification (Alert) ✓✓
Notification (Sound)Notification (Sound) ✓✓
Notification (Vibration)Notification (Vibration) ✓✓
StorageStorage ✓✓
iPhone 3GSiPhone 3GS
and newerand newer
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
AndroidAndroid
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
BlackberryBlackberry
OS 6.0+OS 6.0+
✓✓
✓✓
XXXX
✓✓
✓✓
✓✓
XXXX
✓✓
✓✓
✓✓
✓✓
✓✓
BlackberryBlackberry
1010
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
WindowsWindows
Phone 8Phone 8
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
UbuntuUbuntu
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
✓✓
Firefox OSFirefox OS
✓✓
✓✓
✓✓
✓✓
XXXX
✓✓
XXXX
✓✓
✓✓
✓✓
✓✓
✓✓
Supported Features
The chart below shows which APIs are available for each device. Read more about them in our Phonegap Docs.
✓ - supported feature
AboutAbout DeveloperDeveloper CommunityCommunity AppsApps EnterpriseEnterprise  InstallInstall
W
e're
H
iring!
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Adobe® PhoneGap™ Build
Package mobile apps in the cloud.
Get started!
Home Plugins Docs Blog FAQ Support Sign in Register
Take the pain out of developing mobile apps.
Simply upload your HTML5HTML5, CSSCSS, and JavaScriptJavaScript assets to the Adobe® PhoneGap™ BuildAdobe® PhoneGap™ Build cloud service and
we do the work of compiling for you.
Take advantage of the strengths of PhoneGap.Take advantage of the strengths of PhoneGap.
Build great apps powered by open web standards. Cut down on development time by re-using your

Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Go to PhoneGap.com
The PhoneGap Developer App
Develop locally then see the changes instantly on your mobile device.
No need to re-sign, re-compile, or reinstall your app to test your code.
Access to the device APIs that aren't available in web browsers.
First, install the desktop appFirst, install the desktop app
The desktop app is a command line tool that you
need to install, using npm. An in-depth guide on how
to do this is located on the PhoneGap install page.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
http://docs.phonegap.com/
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Teil 2:
Mobile Frameworks
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Participate FAQ Legal notes & imprint
Filter frameworks by name
Looking for the right
mobile framework?
Compare all major mobile frameworks and choose
the one that fits best.
What platforms must be
supported by the framework?
iOS
Android
Windows Mobile
Windows Phone
Blackberry OS
Symbian
Platform Apache Flex
Appcelerator Titanium Mobile*
Application Craft
ChocolateChip-UI
CNET iPhone UI*
http://www.markus-falk.com/mobile-frameworks-
comparison-chart/
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Kriterien
• Technische Faktoren
• Plattformen
• Deklarativ -
Programmatisch
• UI/UX - MVC
• SPA - MPA
• Themeable
• Weitere Faktoren
• Commercial - Open
Source Software
• Community -
Hersteller
• Lizenz
• ...
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Mobile Boilerplate
http://html5boilerplate.com/mobile/
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
MOBILEMOBILE ★★ BOILERPLATEBOILERPLATE SOURCE CODE DOCS OTHER PROJECTS
A best practice baseline for
your mobile web app
Mobile Boilerplate helps you create rich, performant, and modern
mobile web apps. Kick-start your project with dozens of mobile
optimizations and helpers.
A mobile-focused app template.
★ Analytics, icons, and more
A lean, mobile-friendly HTML template;
optimized Google Analytics snippet;
placeholder touch-device icons; and several
mobile-focused tools and helpers.
★ Normalize.css and helpers
Includes Normalize.css v3 — a modern,
HTML5-ready alternative to CSS resets — and
further base styles, utilities, and media
queries.
See the CHANGELOG
Download v4.1.2
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Ratchet
http://goratchet.com/
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Ratchet Home Getting started Components Examples About GitHub project
Build mobile apps with simple HTML‚
CSS‚ and JS components.
Currently v2.0.2
Download Ratchet
StarStar 9,6879,687 TweetTweet 707 FollowFollow @goratchet@goratchet 3,406 followers
Code licensed under the MIT License and the docs are licensed under CC BY 3.0.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
jQuery Mobile
http://jquerymobile.com/
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
DemosDemos DownloadDownload API DocumentationAPI Documentation ThemesThemes ResourcesResources BlogBlog AboutAbout
Plugins Contribute Events Support jQuery Foundation
SearchSearch !
A Touch-Optimized Web
Framework
jQuery Mobile is a HTML5-based user interface system
designed to make responsive web sites and apps that are
accessible on all smartphone, tablet and desktop devices.
Download jQuery Mobile
Custom download
Latest stable
Version 1.4.3
jQuery 1.8 - 1.11 / 2.1
Developer Links
Source Code (GitHub)
jQuery Mobile Git (WIP Build)
JavaScript
CSS
Report an issue
Supported platforms
Changelogs
Upgrade Guides
Seriously cross-platform with HTML5Seriously cross-platform with HTML5
jQuery Mobile framework takes the "write less, do
more" mantra to the next level: Instead of writing
unique applications for each mobile device or OS,
the jQuery mobile framework allows you to design a
single highly-branded responsive web site or
application that will work on all popular
smartphone, tablet, and desktop platforms.
Graded Browser Support
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
MV*-Frameworks
M
C
V
Request
Response
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Helping you select an MV* framework
Download (1.2)Download (1.2) View on GitHub Blog
Introduction
Developers these days are spoiled with
choice when it comes to selecting an
MV* framework for structuring and
organizing their JavaScript web apps.
Backbone, Ember, AngularJS... the list of
new and stable solutions continues to
grow, but just how do you decide on
which to use in a sea of so many options?
To help solve this problem, we created
TodoMVC - a project which offers the
same Todo application implemented using
MV* concepts in most of the popular
JavaScript MV* frameworks of today.
JavaScript Apps
Backbone.js RR
AngularJS RR
Ember.js RR
KnockoutJS RR
Dojo RR
YUI RR
Agility.js RR
Knockback.js RR
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Teil 3:
HTML5 und Co.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
HTML5 compatibility on mobile and tablet browsers with testing on real devices
Feature
Safari
iOS
Android
Browser
Google
Chrome
Amazon
Silk
BlackBerry
Browser
Nokia Browser
Internet
Explorer
O
M
Platform iPhone,
iPad
Phones &
Tablet
Android
4.0+
Kindle
Fire
Phones Tablet MeeGo
- N9
Symbian Windows
Phone
Windows
8.x
A
S
Versions tested 3.2 to
7.0
1.5 to 4.3 18 to 33b 1.0 to 2.0 5.0 to
7.1
10 to
10.2b
1.0 to
2.1
1.2 ^3 to
BelleFP2
9 to 10 10 to 11 1
Application
Cache
W3C API
Offline package
installation.
2.1+ 6.0+ Belle
FP2+
10+
Web storage
W3C API
Persistent and session
storage.
2.0+ 6.0+ Belle
FP2+
Web SQL
storage
W3C API (inactive)
Persistent SQLite
storage.
2.0+ 6.0+ Belle
FP2+
IndexedDB
W3C API
Agnostic database
system (replacement
for Web SQL)
2.0+ 10+
Geolocation
W3C API
Geolocation & tracking
using GPS, cells or Wi-
Fi.
2.0+ 2.0+ 6.0+ Belle+
Multimedia
W3C API
Video & Audio Players
2.3+ 7.0+ Belle+
Web Workers
W3C API
Threading and
background process
5.0+ 2.0+ 6.0+ 10+
TweetTweet
6,249 3.5043.7k
LikeLike
http://mobilehtml5.org/Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Ein paar HTML5-
Module
• Geolocation-API
• Canvas
• Lokale Datenhaltung
• Kommunikation
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Geolocation-API
• Aktuelle Position auslesen
• Positionswechsel erfassen
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Geolocation API Specification
W3C Recommendation 24 October 2013
This Version:
http://www.w3.org/TR/2013/REC-geolocation-API-20131024/
Latest Published Version:
http://www.w3.org/TR/geolocation-API/
Latest Editor's Draft:
http://dev.w3.org/geo/api/spec-source.html
Previous version:
http://www.w3.org/TR/2012/PR-geolocation-API-20120510/
Editor:
Andrei Popescu, Google, Inc
Please refer to the errata for this document, which may include some normative corrections.
See also translations.
Copyright © 2008-2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.
Abstract
This specification defines an API that provides scripted access to geographical location information associated with the hosting
device.
Status of This Document
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A
list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at
http://www.w3.org/TR/.
This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, andSonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Canvas
• Ursprünglich entwickelt von Apple als Bestandteil
des Webkit entwickelt, ist es später von der
WHATWG standardisiert worden
• Canvas umfasst einen in HTML-Code mit Höhen-
und Breiten-Attributen definierten Bereich, in den
gezeichnet werden kann.
• Innerhalb von JavaScript stehen 2D-
Zeichenfunktionen zurVerfügung, die dynamisch
erzeugte Zeicheninhalte innerhalb des Canvas-
Bereichs gestatten
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
HTML Canvas 2D Context
W3C Candidate Recommendation 21 August 2014
This Version:
http://www.w3.org/TR/2014/CR-2dcontext-20140821/
Latest Published Version:
http://www.w3.org/TR/2dcontext/
Latest Editor's Draft:
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas_CR/
Previous Version:
http://www.w3.org/TR/2014/WD-2dcontext-20140520/
Editors:
W3C:
Rik Cabanier, Adobe Systems, Inc.
Jatinder Mann, Microsoft Corporation
Jay Munro, Microsoft Corporation
Tom Wiltzius, Google, Inc.
WHATWG:
Ian Hickson, Google, Inc.
Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.
Abstract
This specification defines the 2D Context for the HTML canvas element. The 2D Context provides objects, methods, and properties
to draw and manipulate graphics on a canvas drawing surface.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Lokale Datenhaltung
• Web Storage
• Web SQL Database
• Indexed Database API
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Web Storage
W3C Recommendation 30 July 2013
This Version:
http://www.w3.org/TR/2013/REC-webstorage-20130730/
Latest Published Version:
http://www.w3.org/TR/webstorage/
Latest Editor's Draft:
http://dev.w3.org/html5/webstorage/
Previous Versions:
http://www.w3.org/TR/2013/PR-webstorage-20130409/
http://www.w3.org/TR/2011/CR-webstorage-20111208/
http://www.w3.org/TR/2011/WD-webstorage-20111025/
http://www.w3.org/TR/2011/WD-webstorage-20110901/
http://www.w3.org/TR/2011/WD-webstorage-20110208/
http://www.w3.org/TR/2009/WD-webstorage-20091222/
http://www.w3.org/TR/2009/WD-webstorage-20091029/
http://www.w3.org/TR/2009/WD-webstorage-20090423/
Editor:
Ian Hickson, Google, Inc.
Please refer to the errata for this document, which may include some normative corrections.
See also translations.
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.
The bulk of the text of this specification is also available in the WHATWG Web Applications 1.0 specification, under a license that permits reuse of the specification text.
Abstract
This specification defines an API for persistent data storage of key-value pair data in Web clients.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Web SQL Database
W3C Working Group Note 18 November 2010
This Version:
http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/
Latest Published Version:
http://www.w3.org/TR/webdatabase/
Latest Editor's Draft:
http://dev.w3.org/html5/webdatabase/
Previous Versions:
http://www.w3.org/TR/2009/WD-webdatabase-20091222/
http://www.w3.org/TR/2009/WD-webdatabase-20091029/
http://www.w3.org/TR/2009/WD-webstorage-20090423/
Editors:
Ian Hickson, Google, Inc.
Copyright © 2010 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
Abstract
This specification defines an API for storing data in databases that can be queried using a variant of SQL.
Status of This Document
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Indexed Database API
W3C Candidate Recommendation 04 July 2013
This version:
http://www.w3.org/TR/2013/CR-IndexedDB-20130704/
Latest published version:
http://www.w3.org/TR/IndexedDB/
Latest editor's draft:
http://dvcs.w3.org/hg/IndexedDB/raw-file/default/Overview.html
Previous version:
http://www.w3.org/TR/2013/WD-IndexedDB-20130516/
Editors:
Nikunj Mehta, Invited Expert
Jonas Sicking, Mozilla
Eliot Graff, Microsoft
Andrei Popescu, Google
Jeremy Orlow, Google
Joshua Bell, Google
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.
Abstract
This document defines APIs for a database of records holding simple values and hierarchical objects. Each record consists of a key and
Moreover, the database maintains indexes over records it stores. An application developer directly uses an API to locate records either
using an index. A query language can be layered on this API. An indexed database can be implemented using a persistent B-tree data s
Status of This Document
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list o
publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Kommunikation
• XMLHttpRequest (XHR)
• WebSockets
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
XMLHttpRequest Level 2
W3C Working Draft 17 January 2012
This Version:
http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/
Latest Version:
http://www.w3.org/TR/XMLHttpRequest/
Latest Editor Draft:
http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html
Previous Versions:
http://www.w3.org/TR/2011/WD-XMLHttpRequest2-20110816/
http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/
http://www.w3.org/TR/2009/WD-XMLHttpRequest2-20090820/
http://www.w3.org/TR/2008/WD-XMLHttpRequest2-20080930/
http://www.w3.org/TR/2008/WD-XMLHttpRequest2-20080225/
http://www.w3.org/TR/2007/WD-XMLHttpRequest-20071026/
http://www.w3.org/TR/2007/WD-XMLHttpRequest-20070618/
http://www.w3.org/TR/2007/WD-XMLHttpRequest-20070227/
http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060927/
http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060619/
http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/
Editor:
Anne van Kesteren (Opera Software ASA) <annevk@opera.com>
Copyright © 2012 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
Abstract
The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a
server.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
The WebSocket API
W3C Candidate Recommendation 20 September 2012
This Version:
http://www.w3.org/TR/2012/CR-websockets-20120920/
Latest Published Version:
http://www.w3.org/TR/websockets/
Latest Editor's Draft:
http://dev.w3.org/html5/websockets/
Previous Versions:
http://www.w3.org/TR/2012/WD-websockets-20120809/
http://www.w3.org/TR/2012/WD-websockets-20120524/
http://www.w3.org/TR/2011/CR-websockets-20111208/
http://www.w3.org/TR/2011/WD-websockets-20110929/
http://www.w3.org/TR/2011/WD-websockets-20110419/
http://www.w3.org/TR/2009/WD-websockets-20090423/
http://www.w3.org/TR/2009/WD-websockets-20091029/
Editor:
Ian Hickson, Google, Inc.
Copyright © 2012 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
The bulk of the text of this specification is also available in the WHATWG Web Applications 1.0 specification, under a license that permits reuse of the specification text.
Abstract
This specification defines an API that enables Web pages to use the WebSocket protocol (defined by the IETF) for two-way
communication with a remote host.
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Teil 4:
Ihr Projekt / Zeit zum
Ausprobieren
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Das war‘s:
Sonntag, 14. September 14
AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Vielen Dank!
Peter Hecker
E-Mail: peter@gfu.net
Sonntag, 14. September 14

NRWConf - Workshop Mobile Apps