Upload
trinhcong
View
224
Download
0
Embed Size (px)
Citation preview
Development for Mobile DevicesTools from Intel, Platform of Your Choice!
Sergey Lunev, Intel Corporation
HTML5 Tools Development Manager
CEE-SECR 2013
Optional: Download App Preview
Androidbit.ly/1i8VEgl
iOSbit.ly/1a3W7Bk
3
Use of HTML/CSS/JS for UI and Program Logic
CEE-SECR 2013
Hybrid Apps concept allows developers to build compelling apps utilizing their HTML5 skills…
…and these apps can be distributed in native app stores.
4
Why Hybrid HTML5 Apps?
CEE-SECR 2013
5
Hybrid HTML5 App Advantage
CEE-SECR 2013
Native Apps Advanced UI interactions Fastest performance App store distribution
SinglePlatform
PartialCapabilities
MultiplePlatforms
FullCapabilities
Hybrid HTML5 Apps Web developer skills Access to native platform App store distribution
Web Apps Web developer skills Instant updates Unrestricted distribution
6
Web vs. Hybrid vs. HTML5 Applications
CEE-SECR 2013
Web Applimited
sensor input
Hybrid Appfull
sensor input
HTML5 Appfull
device access
Runs w/o network Yes Yes Yes
Flexible Layout Yes Yes Yes
Device APIs Limited Mostly Complete
Distribution URL Native Binary URL/Binary
Cross Platform Yes Yes & No Yes
Runs in Web Browser
Yes No No
Runs in Web Runtime
No Yes Yes
TomorrowTomorrow
The HTML5 standard is evolving to include device APIs
Today Today
7
Intel® XDK – Tools for Hybrid HTML5 App Development
CEE-SECR 2013
DevelopDevelop Debug and TestDebug and Test DeployDeploy
DeviceEmulator
Cloud-BasedPackaging ToolHTML5 Editor
On-DeviceApp Tester
JS Debugger
Cordova Build“Hybrid Apps“
HTML5 Build“Web Apps“
On-DeviceApp Debugger
App FrameworkOptimized JS libs
App DesignerLayout
App Game I/FOptimized Canvas
Apple* AppStore
Google* Play*Windows* Market
Chrome* Store
Facebook*Your Website
App StarterQuick Layout
*HTML5 logo is the property of World Wide Web Consortium (W3C)
Build cross-platform HTML5 hybrid applications.
Layout and Design
8 CEE-SECR 2013 Intel® XDK Overview
9
Develop: Mobile App Design Tools
DevelopDevelop Debug and TestDebug and Test DeployDeploy
DeviceEmulator
Cloud-BasedPackaging Tool
On-DeviceApp Tester
JS Debugger
Cordova Build“Hybrid Apps“
HTML5 Build“Web Apps“
On-DeviceApp Debugger
Apple* AppStore
Google* Play*Windows* Market
Chrome* Store
Facebook*Your Website
CEE-SECR 2013 Intel® XDK Overview
Build cross-platform HTML5 hybrid applications.
HTML5 Editor
App FrameworkOptimized JS libs
App DesignerRWD Layout
App Game I/FOptimized Canvas
App StarterQuick Layout
Demo: Mobile App Design Tools
CEE-SECR 2013 Intel® XDK Overview10
Test and Debug
11 CEE-SECR 2013 Intel® XDK Overview
12
Test: Emulate and On-Device Debug
CEE-SECR 2013 Intel® XDK Overview
DevelopDevelop Debug and TestDebug and Test DeployDeploy
DeviceEmulator
Cloud-BasedPackaging Tool
On-DeviceApp Tester
JS Debugger
Cordova Build“Hybrid Apps“
HTML5 Build“Web Apps“
On-DeviceApp Debugger
Apple* AppStore
Google* Play*Windows* Market
Chrome* Store
Facebook*Your Website
HTML5 Editor
App FrameworkOptimized JS libs
App DesignerRWD Layout
App Game I/FOptimized Canvas
App StarterQuick Layout
Build cross-platform HTML5 hybrid applications.
Demo: Emulate and On-Device Debug
CEE-SECR 2013 Intel® XDK Overview13
Scan this
http://intel.ly/H7qM4o
Fingers crossed, hoping the networkdoesn’t overload!!
14
Remote Download of Notifiers Test App
2013 HTML5 DevConf Intel® XDK Overview
Package and Build
15 CEE-SECR 2013 Intel® XDK Overview
16
Deploy: Package and Build
CEE-SECR 2013 Intel® XDK Overview
DevelopDevelop Debug and TestDebug and Test DeployDeploy
DeviceEmulator
Cloud-BasedPackaging Tool
On-DeviceApp Tester
JS Debugger
Cordova Build“Hybrid Apps“
HTML5 Build“Web Apps“
On-DeviceApp Debugger
Apple* AppStore
Google* Play*Windows* Market
Chrome* Store
Facebook*Your Website
HTML5 Editor
App FrameworkOptimized JS libs
App DesignerRWD Layout
App Game I/FOptimized Canvas
App StarterQuick Layout
Build cross-platform HTML5 hybrid applications.
Demo: Package and Build
CEE-SECR 2013 Intel® XDK Overview17
Alternate Build Service Offerings
CEE-SECR 2013 Intel® XDK Overview18
Intel® XDK†Adobe*
PhoneGap* Build*Other Options
(typical)
iOS* Χ Χ ΧAndroid* Χ Χ Χ
Windows* 8 Χ
Blackberry* Χ
Tizen* Χ
Amazon* Kindle* Χ
Barnes & Nobile* Nook* Χ
FireFox* OS
Chrome* OS Χ
Web App Χ
Facebook* Χ
WebOS* Χ
Bada* Χ†Build support as of October, 2013
Related Tools
19 CEE-SECR 2013
You Have Deployed an iOS*
App...
...but you want to broaden your market reach...
…translate your application from Objective C to HTML5
20
Intel® HTML5 App Porter Tool - BETA
CEE-SECR 2013
Apple*App StoreApple*
App Store
Google*Play*
Google*Play*
Facebook* StoreChrome* StoreOwn Website
Facebook* StoreChrome* StoreOwn Website
YourApp
Windows*Store/Windows*
Phone Store
Windows*Store/Windows*
Phone Store
21
iOS* to HTML5 Translation Process
CEE-SECR 2013
Original iOS* App
Existing app source code written in Objective-C*
Existing app source code written in Objective-C*
XIB Files + Resource FilesXIB Files +
Resource Files
Translated HTML5 App
New app source code written in JavaScript
New app source code written in JavaScript
HTML + CSS + Resource Files
HTML + CSS + Resource Files
Intel® HTML5 App Porter Tool - BETA Library
Intel® HTML5 App Porter Tool - BETA Library iOS SDK StackiOS SDK Stack
HTML5 APIHTML5 APIjQuery MobilejQuery Mobile
Application Code
System and Library Code
Each XIB view is translated into editable HTML and CSS
Each .m and .c file is translated into an equivalent .js file
System API calls are translated into calls to
standard HTML5 API and other JS libraries
Additional Sources of Information
CEE-SECR 201322
software.intel.com/html5
html5dev-software.intel.com
This presentation is for informational purposes only. INTEL MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.
[BunnyPeople, Celeron, Celeron Inside, Centrino, Centrino Inside, Core Inside, i960, Intel, the Intel logo, Intel Atom, Intel Atom Inside, Intel Core, Intel Inside, the Intel Inside logo, Intel NetBurst, Intel NetMerge, Intel NetStructure, Intel SingleDriver, Intel SpeedStep, Intel Sponsors of Tomorrow., the Intel Sponsors of Tomorrow. logo, Intel StrataFlash, Intel Viiv, Intel vPro, Intel XScale, InTru, the InTru logo, InTru soundmark, Itanium, Itanium Inside, MCS, MMX, Pentium, Pentium Inside, skoool, the skoool logo, Sound Mark, The Journey Inside, vPro Inside, VTune, Xeon, and Xeon Inside] are trademarks of Intel Corporation in the U.S. and other countries.
*Other names and brands may be claimed as the property of others.
Microsoft, Windows, and the Windows logo are trademarks, or registered trademarks of Microsoft Corporation in the United States and/or other countries.
Java and all Java based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.
Bluetooth is a trademark owned by its proprietor and used by Intel Corporation under license.
Intel Corporation uses the Palm OS® Ready mark under license from Palm, Inc.
Copyright © 2013, Intel Corporation. All rights reserved.
Legal Notices
CEE-SECR 201323