WP8 HTML5/IE10 for Developers

51
[email protected] http://facebook.com/pham.nguyenit

description

 

Transcript of WP8 HTML5/IE10 for Developers

Page 2: WP8 HTML5/IE10 for Developers
Page 3: WP8 HTML5/IE10 for Developers
Page 4: WP8 HTML5/IE10 for Developers

IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612

Page 5: WP8 HTML5/IE10 for Developers
Page 6: WP8 HTML5/IE10 for Developers
Page 7: WP8 HTML5/IE10 for Developers
Page 8: WP8 HTML5/IE10 for Developers
Page 9: WP8 HTML5/IE10 for Developers
Page 10: WP8 HTML5/IE10 for Developers
Page 11: WP8 HTML5/IE10 for Developers
Page 12: WP8 HTML5/IE10 for Developers
Page 13: WP8 HTML5/IE10 for Developers
Page 14: WP8 HTML5/IE10 for Developers
Page 15: WP8 HTML5/IE10 for Developers
Page 16: WP8 HTML5/IE10 for Developers

CSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Device Adaptation*

CSS Flexbox*

CSS Fonts

CSS Grid*

CSS Image Values

(Gradients)

CSS Media Queries

CSS Multi-Column

CSS Namespaces

CSS OM Views

CSS Regions And

CSS Selectors

CSS Transitions

CSS Values And Units

Data URI

DOM Element Traversal

DOM HTML

DOM Level 3 Core

DOM Level 3 Events

DOM Style

DOM Traversal And Range

DOMParser And XMLSerializer

ECMAScript 5

Formdata

HTML5 Application Cache

HTML5 Async Scripts

HTML5 BlobBuilder

HTML5 Canvas

HTML5 Drag And Drop

HTML5 Forms And

Validation

HTML5 Geolocation

HTML5 Parser

HTML5 Sandbox

HTML5 Selection

HTML5 Semantic Elements

HTML5 Video And Audio

JavaScript Typed Arr

ICC Color Profiles

IndexedDB

Page Visibility

Pointer (Mouse, Pen, And

Touch) Events*

RequestAnimationFrame

Navigation Ti

Selectors API Level 2

SVG Filter Effects

SVG, Standalone And In HTML

Web Messaging

XHTML/XML

Page 17: WP8 HTML5/IE10 for Developers
Page 18: WP8 HTML5/IE10 for Developers
Page 19: WP8 HTML5/IE10 for Developers
Page 20: WP8 HTML5/IE10 for Developers
Page 21: WP8 HTML5/IE10 for Developers
Page 22: WP8 HTML5/IE10 for Developers
Page 23: WP8 HTML5/IE10 for Developers
Page 24: WP8 HTML5/IE10 for Developers
Page 25: WP8 HTML5/IE10 for Developers
Page 26: WP8 HTML5/IE10 for Developers
Page 27: WP8 HTML5/IE10 for Developers
Page 28: WP8 HTML5/IE10 for Developers
Page 29: WP8 HTML5/IE10 for Developers
Page 30: WP8 HTML5/IE10 for Developers
Page 31: WP8 HTML5/IE10 for Developers
Page 32: WP8 HTML5/IE10 for Developers
Page 33: WP8 HTML5/IE10 for Developers

webBrowser.InvokeScript(“myFunction", “myArg1”);

webBrowser.InvokeScript(“eval”, “document.body.offsetHeight.toString()”);

webBrowser.InvokeScript(“execScript”, myScript.ToString());

XAML: <WebBrowser ScriptNotify=“Browser_ScriptNotify” />

JavaScript: window.external.notify(parameter);

C#: private void Browser_ScriptNotify(object sender, NotifyEventArgs e)

// use e.value to retrieve parameter

Page 34: WP8 HTML5/IE10 for Developers

OnScriptNotify(object s, NotifyEventArgs e)

{

var metaData = e.Value;

if (metaData == ”captureImage”)

CaptureImage();

}

void CaptureImage

{

// captures the image using the Camera API

var path = CaptureImageFromCamera();

browser.NotifyScript(”captureImageCallback”,

new[] { path });

}

Javascript:

// pass request meta data to hostwindow.external.notify(”captureImage”);

Javascript:

// host calls back with the image path

function captureImageCallback(args) {

var img = document.getElementId(”x”);

img.src = args;

}

Page 35: WP8 HTML5/IE10 for Developers

webBrowser.Background=“#ffff00”;

if (webBrowser.CanNavigateBack) webBrowser.GoBack();

if (webBrowser.CanNavigateForward) webBrowser.GoForward();

await webBrowser.ClearCookiesAsync();

await webBrowser.ClearInternetCacheAsync();

webBrowser.Navigate(new Uri("test.html", UriKind.Relative))

Page 36: WP8 HTML5/IE10 for Developers
Page 37: WP8 HTML5/IE10 for Developers

• Perform one way operations(WP7)

• Invoke Javascript callback methods

Page 38: WP8 HTML5/IE10 for Developers
Page 39: WP8 HTML5/IE10 for Developers
Page 40: WP8 HTML5/IE10 for Developers

0

500

1000

1500

2000

2500

3000

3500

4000

I E 1 0 ( W P 8 ) H T M L 5 A P P ( W P 8 ) I P H O N E 5 S A F A R I I P H O N E 5 H T M L 5 A P P

SUNSPIDER 0.9.1 SCORE

LOWER IS BETTER

Page 41: WP8 HTML5/IE10 for Developers
Page 42: WP8 HTML5/IE10 for Developers

FREE

Page 43: WP8 HTML5/IE10 for Developers
Page 44: WP8 HTML5/IE10 for Developers
Page 45: WP8 HTML5/IE10 for Developers
Page 46: WP8 HTML5/IE10 for Developers
Page 47: WP8 HTML5/IE10 for Developers

cross platform rapid cost effective

build beautiful delightful

immerse

integrated

Page 48: WP8 HTML5/IE10 for Developers
Page 49: WP8 HTML5/IE10 for Developers

http://phamnguyen.info

Page 50: WP8 HTML5/IE10 for Developers

http://wpdev.ms/phonedevres

http://wpdev.ms/certreq

http://wpdev.ms/howtos

http://wpdev.ms/officialsamples

http://wpdev.ms/ahforum

http://wpdev.ms/devsupport

Page 51: WP8 HTML5/IE10 for Developers