© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel® HTML5 Development Environment

Helping Developers Efficiently Produce True Cross-Platform HTML5 Apps

April 2013

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Q&A – attendee questions that I did not answer in the presentation

• Q: Is source code of my app safe after uploading to the build process in the cloud? A: the „cloud“ service is running on a secure server that is only accessible to the customer and selected Intel employees.

• Q: Java poses a security risk and more and more developers want to get rid of it. Why do you have a Java backend in the Intel XDK? A: We are working on removing any use of Java in an update of XDK.

• Q: Do I still need an Apple developer license, if I build my HTML5 app and then have it packaged for Apple‘s app store in the App Dev center? A: You still need an account at the respective app store (Apple, Google, Windows) to submit your app. Submission is a separate step that you need to do manually, just like before.

• Q: Currently the Chrome browser is required on the development host for running the XDK. Will you support other browsers? A: We are planning to remove browser dependencies for the XDK. When using a browser‘s development tools (eg for debuggging) you will still need a browser.

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel is Making HTML5 Better

Intel is helping software developers around the globe to create and deploy incredible cross-platform experiences, reach more customers, reduce costs and improve time-to-market

3

Intel contributes to Open Source, Standards, and provides Tools & Resources to support HTML5

3

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Delivering Tools & Resources— From Development to Deployment

4

http://software.intel.com/html5

Intel® HTML5 Developer Zone

Intel® HTML5

Development Environment

HTML5 Playground BETA

Intel® HTML5 App Porter Tool BETA

Tutorials, videos, documentation, forums

Let‘s have a closer look!

4

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Cross Platform Tools Requirements: What App Developers Want Most

• Availability Across Platforms

• Development Speed

• Short Learning Curve

• Access To Native APIs

• Performance

• Native UI Look & Feel

Source: Vision Mobile Developer Economics 2013 http://www.visionmobile.com

5

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel® HTML5 Development Environment

6

App Dev Center

Intel®XDK

Intel® HTML5 Development Environment = Intel® XDK + App Dev Center

• Developer Frontend • Chrome* Browser plug-in with

local project file storage capabilities

• Develop offline and online • Windows*, OS X*

• Intel cloud-based tools & build service for Apple* App Store Google* Play Windows* Store HTML5 Web Apps

• No need to download and learn Native Platform SDKs

A no cost, integrated and front-to-back HTML5 App Dev Environment for True Cross-Platform Apps for multiple App Stores and form factor devices

6

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

What‘s New – April 2013

7

Windows* 8

• Build Support for Windows* 8 Store

Integrated Project Wizard

• Now fully integrated into Intel® XDK

• Graphical wizard for website-like apps

• Games/physics app framework

• Demo examples, and more...

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel® HTML5 Development Environment Intel® XDK & App Dev Center

8

Develop Test Deploy

Device Emulator

Build System

Coding Editor

On-Device App Tester

JS Debugger

Hybrid Apps

Web Apps

On-Device App Debugger

App Starter Project Wizard

App Framework Optimized JS libs

Style Builder CSS generator

App Game Interface

Optimized Canvas

App Dev Center Intel®XDK

Develop, Test & Deploy True Cross-Platform HTML5 Apps Write Once, Deploy Everywhere

software.intel.com/html5

Apple* AppStore

Google* Play*

Windows* Store

Chrome* Store

Facebook*

Own Website

8

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Platform Availability

HYBRID APPS PACKAGED FOR STORES

iOS Apple* App Store

Android* Google* Play

- Nook* Nook* Store

- Amazon* Amazon* Appstore for Android

Windows*8 Windows* Store

WEB APPS STORES

HTML5 Facebook*

HTML5 Intel® AppUpSM

HTML5 Chrome* Store

HTML5 Your Own Website!

Write ONCE – package for MULTIPLE app stores

9

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others. 10

10

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others. 11

Frameworks/Libraries App Framework

App Game Interfaces Cloud Services APIs

Build System Packages apps for store distiribution

iOS, Android, Amazon, Nook, Windows 8

Intel® XDK Chrome Browser extension - Control Panel

Quick-Start App Creation: App Starter

Samples Wizard App Prototyper

Editing Integrated editor or Use your own

Weltmeister Integration

Testing Emulators: form factors & sensors

App Debugger App Tester

http://software.intel.com/html5tools

Download Cloud Based

App Dev Center control panel

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel® XDK

Intel® XDK – an easy cross-platform app development environment, hosted in a browser

Develop Test Deploy

12

• Downloadable Development Front End

• Chrome* Browser Plug-in Windows*, OS X*

• Java Backend Local project file

handling

Offline Development

• Connects to App Dev Center

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel® XDK Project Setup

Where do you want to go? WebApp, Hybrid App, Game… just click

13

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Alternatively: Start In The Cloud

14

14

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

App Starter • For website-like

apps

- Themes

- Menu structures

- pages etc.

App Starter

15

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Continue Development With Intel® XDK

16

16

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Code Editor

The Intel® XDK Is The Face For The HTML5 App Developer

Code Editor with

Syntax coloring

Project folders

with local files

Toggle between

Emulation and

Editing

17

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

App Framework - Optimized JS Libraries

App framework provides great JS performance

• Designed for mobile devices supporting latest CSS3 and HTML5 features

• Using built-in browser features, makes the framework fast and light

• Uses CSS3 animations, W3C selectors and native scrolling on iOS for a great performance

jQMobi

• jQuery compatible APIs • 60+ APIs • built from ground up • light, fast, and excel on mobile devices. • takes advantage of new browser features • supports valid W3C CSS selectors

jQUi • Optimized for Android*, iOS*, BlackBerry* • Works on webkit browsers for mobile

smartphones • Supports fixed headers and footers for a

more native-like look & feel

jQPlugins

• Plug-ins power the core of jQUi • Utilizes

Scrolling bar lib CSS3 Animation lib Popup box Animation sheet, etc.

$.is$ $.map

$.isFunction .find

.addClass

$.ui.popup

$.ui.setBackButtonStyle

$.ui.setTitle

18

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Style Builder – A CSS File Generator

Tools to make your life easier…

Let Style Builder Create Your CSS

file

19

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

App Game Interface - accelerated canvas

implementation - multi channel sound - accelerated physics

more realistic modeling

and smoother gameplay more native-like

capabilities and performance.

App game interfaces for faster HTML5 games

optimized implementations for iOS*, Android*, Windows*8

20

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Test

21 21

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Device Emulator

Device Emulator

GPS, Accelerometer,

Data Connection

simulation

Select devices...

Develop Test Deploy

22

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Debugging

Write

Chrome Debug Console

App debugging with Chrome* debug console

23

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

App Dev Center

On-Device App Testing

„app-lab“ app

on real device,

emulates

Phonegap API App runs on

target device

On-device app preview – no need to go through Apple* App Store or Google* Play for testing

24

real screenshot from an iPhone 5*

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

On Device Debugging

Send debug messages from App to host – via internet

25

Develop Test Deploy

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Deploy

26 26

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Build Process

• Upload Project With Intel® XDK to App Dev Center

• Select Target Platform and Build App – one by one

No need to download and learn native platform SDKs to create Apps Apple* App Store, Google* Play, Windows* Store

Build process for HYBRID and WEB apps - in the cloud

Develop Test Deploy

27

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel® HTML5 App Porter Tool Helping iOS* Developers Broaden Their

Market Reach Through HTML5

28

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Have You Created an iOS* App?

...and you want to broaden your market reach, by extending your iOS* app to other platforms?

We may have something for you!

Apple* App Store

Google* Play*

Facebook* Store Chrome* Store Own Website

Windows* Store

29

Your

App

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Intel® HTML5 App Porter Tool iOS* App to HTML5 App Converter

• Minimizes porting effort to generic HTML5

• Clean 1-to-1 source code conversion, incl. comments

• Indicates source code that needs manual translation

• Even 80% API match helps to reduce porting efforts

• Industry leading solution

Expands market reach for Objective-C* app developers

Download and test it - at no cost software.intel.com/html5

30

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

App Is Now Ready For Next Steps

Automatic Translation is

done

Now it‘s up

To you to

finishing

the porting

Clearly indicates which parts need to be converted manually

31

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Before / After porting

iOS* App

app

32

HTML5 App

32

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others.

Summary

• Intel is making HTML5 better through Open Source Contributions, Standards, Tools & Resources

• At no cost, Intel provides a complete, integrated HTML5 development environment to support true cross-platform apps

• Intel® HTML5 App Porter Tool - Beta helps to broaden the market reach for existing iOS* apps by converting them to HTML5 cross-platform

Register and start building your HTML5 app today!

http://software.intel.com/html5

33

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S.

and/or other countries. *Other names and brands may be claimed as the property of others. 34