HTML5 Development Environment

Helping Developers Efficiently Produce True Cross-Platform HTML5 Apps

Intel® HTML5 Development Environment

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.

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

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. 3 and/or other countries. *Other names and brands may be claimed as the property of others. Delivering Tools & Resources— From Development to Deployment

Intel® HTML5 Developer Zone

Tutorials, videos, documentation, forums

Intel® HTML5 Development HTML5 Playground Intel® HTML5 App Environment BETA Porter Tool BETA

Let‘s have a closer look!  http://software.intel.com/html5

4© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 4 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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 5 and/or other countries. *Other names and brands may be claimed as the property of others. Intel® HTML5 Development Environment 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

App Dev Center Intel®XDK • Intel cloud-based tools & build service for • Developer Frontend  Apple* App Store • Chrome* Browser plug-in with  Google* Play local project file storage  Windows* Store capabilities  HTML5 Web Apps • Develop offline and online • No need to download and learn Native • Windows*, OS X* Platform SDKs Intel® HTML5 Development Environment = Intel® XDK + App Dev Center

6© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 6 and/or other countries. *Other names and brands may be claimed as the property of others. What‘s New – April 2013

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. 7 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 Develop Test Deploy

App Starter Device JS Debugger Build System Project Wizard Emulator

On-Device On-Device Apple* AppStore Style Builder Hybrid Apps Google* Play* App Tester App Debugger CSS generator Windows* Store Chrome* Store Coding Editor Web Apps Facebook* Own Website

App Framework Optimized JS libs App Game App Dev Interface Optimized Canvas Intel®XDK Center

Develop, Test & Deploy True Cross-Platform HTML5 Apps Write Once, Deploy Everywhere software.intel.com/html5

8© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 8 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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 9 and/or other countries. *Other names and brands may be claimed as the property of others. 10© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 10 and/or other countries. *Other names and brands may be claimed as the property of others. http://software.intel.com/html5tools

Download Cloud Based

Intel® XDK App Dev Center Chrome Browser extension - Control Panel control panel

Frameworks/Libraries App Framework Quick-Start App Creation: App Game Interfaces App Starter Cloud Services APIs Samples Wizard App Prototyper

Editing Integrated editor or Use your own Weltmeister Integration

Testing Emulators: form factors & sensors App Debugger App Tester Build System Packages apps for store distiribution iOS, Android, Amazon, Nook, Windows 8

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 11 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Intel® XDK • Downloadable Development Front End • Chrome* Browser Plug-in  Windows*, OS X* • Java Backend  Local project file handling  Offline Development • Connects to App Dev Center

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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 12 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Intel® XDK Project Setup

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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 13 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Alternatively: Start In The Cloud

14© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 14 and/or other countries. *Other names and brands may be claimed as the property of others. App Starter Develop Test Deploy

App Starter • For website-like apps - Themes - Menu structures - pages etc.

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 15 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Continue Development With Intel® XDK

16© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 16 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Code Editor

Toggle between Emulation and Editing

Project folders with local files Code Editor with Syntax coloring

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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 17 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy App Framework - Optimized JS Libraries

• jQuery compatible APIs • • 60+ APIs Designed for mobile devices • built from ground up supporting latest CSS3 and jQMobi • light, fast, and excel on mobile devices. • takes advantage of new browser features HTML5 features • supports valid W3C CSS selectors • Using built-in browser features, makes the framework • Optimized for Android*, iOS*, BlackBerry* fast and light jQUi • Works on webkit browsers for mobile smartphones • Uses CSS3 animations, W3C • Supports fixed headers and footers for a selectors and native scrolling more native-like look & feel on iOS for a great performance

• Plug-ins power the core of jQUi $.map • Utilizes $.ui.popup  Scrolling bar lib $.is$ jQPlugins $.ui.setBackButtonStyle  CSS3 Animation lib .find $.isFunction  Popup box $.ui.setTitle  Animation sheet, etc. .addClass

App framework provides great JS performance

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 18 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Style Builder – A CSS File Generator

Let Style Builder Create Your CSS file

Tools to make your life easier…

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 19 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy App Game Interface - accelerated canvas implementation - multi channel sound - accelerated physics

 more realistic modeling and smoother gameplay  more native-like

capabilities and performance. optimized implementations for iOS*, Android*, Windows*8 App game interfaces for faster HTML5 games

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 20 and/or other countries. *Other names and brands may be claimed as the property of others.

Test

21© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 21 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Device Emulator

Select devices...

Device Emulator GPS, Accelerometer, Data Connection simulation

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 22 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy Debugging

Write

Chrome Debug Console

App debugging with Chrome* debug console

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 23 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy On-Device App Testing real screenshot from an iPhone 5*

App Dev Center

„app-lab“ app on real device, emulates App runs on Phonegap API target device

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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 24 and/or other countries. *Other names and brands may be claimed as the property of others. Develop Test Deploy On Device Debugging

Send debug messages from App to host – via internet

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 25 and/or other countries. *Other names and brands may be claimed as the property of others. Deploy

26© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 26 and/or other countries. *Other names and brands may be claimed as the property of others. Build Process Develop Test Deploy

• 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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 27 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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 28 and/or other countries. *Other names and brands may be claimed as the property of others. Have You Created an iOS* App? Your

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

Windows* Store We may have something Google* Play* for you!  Facebook* Store Chrome* Store Own Website

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 29 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

Download and test it - at no cost • Industry leading software.intel.com/html5 solution

Expands market reach for Objective-C* app developers

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 30 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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 31 and/or other countries. *Other names and brands may be claimed as the property of others. Before / After porting iOS* App HTML5 App app

32© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 32 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

© 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 33 and/or other countries. *Other names and brands may be claimed as the property of others. © 2013, Intel Corporation. All righ ts reserved. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. 34 and/or other countries. *Other names and brands may be claimed as the property of others.