building html5 apps for cross platform mobile

36
Building HTML5 apps for cross platform mobile Dave Voyles Sr. Tech Evangelist @DaveVoyles

Upload: dave-voyles

Post on 15-Jan-2015

223 views

Category:

Technology


5 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Building html5 apps for cross platform mobile

Building HTML5 apps for cross platform mobileDave VoylesSr. Tech Evangelist@DaveVoyles

Page 2: Building html5 apps for cross platform mobile

Advanced HTML5: Diving into the Canvas TagDave VoylesSr. Tech Evangelist | Microsoft@DaveVoyles@gdiphilly

Page 3: Building html5 apps for cross platform mobile

Welcome!Who are you?

What do you hope to get out of this class?

Icebreaker: What is your favorite TV show or video game of the 90s?

Page 4: Building html5 apps for cross platform mobile

About MePreviously a Sr. Engineer on the Xbox team at Comcast

Have been working in the games industry for nearly 5 years

I’m a recent transplant from Long Island, NY.

Page 5: Building html5 apps for cross platform mobile

What we’ll cover

• Tools for writing HTML5 apps• Frameworks that can be used• Advanced HTML5 features (webGL)

Page 6: Building html5 apps for cross platform mobile

What to expect

• Some of it may be over your head - Ask questions! Even I don’t know it all

• This is a high-level overview of a complicated subject

• You’ll learn about the various tools you can use to write cross platform applications

Page 7: Building html5 apps for cross platform mobile

Many Tools of the trade• Intel XDK• PhoneGap• App Builder• Cordova

Page 8: Building html5 apps for cross platform mobile

How does Cordova work?

Page 9: Building html5 apps for cross platform mobile
Page 10: Building html5 apps for cross platform mobile

Popular JavaScript Libraries:

• jQuery• jQuery Mobile• AngularJS• Ember.js• Knockout.JS• Bootstrap• Modernizer

Page 11: Building html5 apps for cross platform mobile

If it has a browser, it can run these apps*

* For the most part

Page 12: Building html5 apps for cross platform mobile

Plugins?

Page 13: Building html5 apps for cross platform mobile

Apache Cordova is that it provides access to native device capabilities not available to simple web apps via “plugins.”

They provide JavaScript APIs that can access native code and device capabilities on multiple platforms.

Page 14: Building html5 apps for cross platform mobile
Page 15: Building html5 apps for cross platform mobile

So which tool is best?

Page 16: Building html5 apps for cross platform mobile

PhoneGap Build

Page 17: Building html5 apps for cross platform mobile
Page 18: Building html5 apps for cross platform mobile

Build

• Support multiple platforms (iOS, Android™, Windows® Phone, webOS, BlackBerry)

• Compiles the projects for you• All code is stored in the cloud

Page 19: Building html5 apps for cross platform mobile

Build

Page 20: Building html5 apps for cross platform mobile

Build

How do I get started with PhoneGap Build?

Simply upload your web assets - a ZIP file of HTML, CSS and JavaScript, or a single index.html file - to PhoneGap Build, point us to your Git or SVN repository. PG Buld will compile & package for you. In minutes, you’ll receive the download URLs for all mobile platforms.

Page 21: Building html5 apps for cross platform mobile

Intel XDK

Page 22: Building html5 apps for cross platform mobile
Page 23: Building html5 apps for cross platform mobile

Publish to many app stores, across many form factors easily:

• Apple App Store• Google Play• Windows Store• Tizen App Store• Nook Store (Android)• Amazon Store (Android)• Chrome Store (web app)• Facebook Store (web app)

Page 24: Building html5 apps for cross platform mobile
Page 25: Building html5 apps for cross platform mobile

Telerik App Builder

Page 26: Building html5 apps for cross platform mobile
Page 27: Building html5 apps for cross platform mobile

You don’t need a Mac to deploy to iOS, when using Telerik App Builder!

Page 28: Building html5 apps for cross platform mobile
Page 29: Building html5 apps for cross platform mobile

Cordova (Visual Studio)

Page 30: Building html5 apps for cross platform mobile
Page 31: Building html5 apps for cross platform mobile

Are there other options?

Page 32: Building html5 apps for cross platform mobile
Page 33: Building html5 apps for cross platform mobile
Page 36: Building html5 apps for cross platform mobile

Questions? Comments?

Survey: http://bit.ly/gdi-canvas