NRWConf - Workshop Mobile Apps

AlleRechteliegenbeiPeterHecker.Vervielfältigungistnichterlaubt.
Herzlich Willkommen
zum Workshop
„Mobile Apps“
Ihr Dozent: Peter Hecker, GFU Cyrus AG
Sonntag, 14. September 14

Peter Hecker
• Seit 1986:
„Entwickler,Trainer“
• Seit 1995:
„Web-Entwicklung“
• Seit 2009:
„Mobile WebApps“
• Vorstand in der
GFU Cyrus AG

GFU Cyrus AG
„Ihr Partner für IT-Schulungen“

Mobile Apps
mit HTML5, CSS3, JavaScript
und Cordova/Phonegap
Workshop auf der NRW Conf 2014
11.09.2014

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.

Ablauf
• Teil 1: PhoneGap / Cordova
• Teil 2: Mobile Frameworks
• Teil 3: HTML5 und Co.
• Teil 4: Ihr Projekt

/ Zeit zum Ausprobieren

Teil 1:
PhoneGap / Cordova

PhoneGap
Cross-Plattform-Mobile-Framework
zur Erstellung von nativen, mobilen Anwendungen mit
HTML, CSS und JavaScript!

PhoneGap
• Native App-Wrapper
• Erstellt von der Firma Nitobi
• Nitobi wurde 10/2011 von Adobe gekauft
• ab 02/2012 ein Apache Projekt (Cordova)

PhoneGap/Cordova
http://www.phonegap.com/
http://cordova.apache.org/

Plattformen
• Amazon
• Android
• Blackberry 10
• FireFox OS
• iPhone
• Ubuntu
• Windows Phone 7 / 8
• Windows 8
• Tizen

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!

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


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.

http://docs.phonegap.com/

Teil 2:
Mobile Frameworks

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/

Kriterien
• Technische Faktoren
• Plattformen
• Deklarativ -
Programmatisch
• UI/UX - MVC
• SPA - MPA
• Themeable
• Weitere Faktoren
• Commercial - Open
Source Software
• Community -
Hersteller
• Lizenz
• ...

Mobile Boilerplate
http://html5boilerplate.com/mobile/

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

Ratchet
http://goratchet.com/

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.

jQuery Mobile
http://jquerymobile.com/

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

MV*-Frameworks
M
C
V
Request
Response

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

Teil 3:
HTML5 und Co.

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

Ein paar HTML5-
Module
• Geolocation-API
• Canvas
• Lokale Datenhaltung
• Kommunikation

Geolocation-API
• Aktuelle Position auslesen
• Positionswechsel erfassen

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

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 deﬁnierten Bereich, in den
gezeichnet werden kann.
• Innerhalb von JavaScript stehen 2D-
Zeichenfunktionen zurVerfügung, die dynamisch
erzeugte Zeicheninhalte innerhalb des Canvas-
Bereichs gestatten

HTML Canvas 2D Context
W3C Candidate Recommendation 21 August 2014
This Version:
http://www.w3.org/TR/2014/CR-2dcontext-20140821/
http://www.w3.org/TR/2dcontext/
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 speciﬁcation deﬁnes 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.

Lokale Datenhaltung
• Web Storage
• Web SQL Database
• Indexed Database API

Web Storage
W3C Recommendation 30 July 2013
This Version:
http://www.w3.org/TR/2013/REC-webstorage-20130730/
http://www.w3.org/TR/webstorage/
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/
Editor:
Please refer to the errata for this document, which may include some normative corrections.
See also translations.
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.

Web SQL Database
W3C Working Group Note 18 November 2010
This Version:
http://www.w3.org/TR/2010/NOTE-webdatabase-20101118/
http://www.w3.org/TR/webdatabase/
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/
Editors:
Copyright © 2010 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
Abstract
This speciﬁcation deﬁnes an API for storing data in databases that can be queried using a variant of SQL.

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-ﬁle/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
Abstract
This document deﬁnes 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
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/.

Kommunikation
• XMLHttpRequest (XHR)
• WebSockets

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/
Editor:
Anne van Kesteren (Opera Software ASA) <annevk@opera.com>
Abstract
The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a
server.

The WebSocket API
W3C Candidate Recommendation 20 September 2012
This Version:
http://www.w3.org/TR/2012/CR-websockets-20120920/
http://www.w3.org/TR/websockets/
http://dev.w3.org/html5/websockets/
Previous Versions:
http://www.w3.org/TR/2012/WD-websockets-20120809/
http://www.w3.org/TR/2011/CR-websockets-20111208/
Editor:
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.

Teil 4:
Ihr Projekt / Zeit zum
Ausprobieren

Das war‘s:

Vielen Dank!
Peter Hecker
E-Mail: peter@gfu.net

NRWConf - Workshop Mobile Apps

More Related Content

What's hot

Viewers also liked

Similar to NRWConf - Workshop Mobile Apps

More from Peter Hecker

NRWConf - Workshop Mobile Apps