2-015 WP8 HTML5/IE10 for DevelopersJorge Peraza & Rick XuProgram ManagersSession 2-015

Demo Search & Pulse

Why choose HTML5?What exactly is an HTML5

app on Windows Phone?How can I build one?Can I integrate it deeply into the platform?

What are we going to talk about?

Why build an HTML5 app?

All the cool kids are doing it!

No, but really, with HTML5 you can…Reuse your existing HTML, CSS and JavaScript skillsReduce development costs by leveraging investments across different platformsCan be combined with C# to gain access to the rest of the platform capabilities

And momentum keeps building1 Billion mobile devices with modern browsers in 2013

2 Million Web developers in 2013

79% of Mobile app developers are exploring HTML5

80% of Mobile Apps will use HTML5 by 2015IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612

Windows Phone App that leverages the WebBrowser control for some or all of its functionality

What exactly is an HTML5 app on WP8?

Building our first HTML5 appDrag picture to placeholder or click icon to add

All great things start from the beginning

Hardware accelerated

Built for touch

Fast even for apps!

Offline apps are a go!

Internet Explorer 10

IE10 hardware-accelerated web platformCSS 2D TransformsCSS 3D TransformsCSS AnimationsCSS Backgrounds & BordersCSS ColorCSS Device Adaptation*CSS Flexbox*CSS FontsCSS Grid*CSS Image Values (Gradients)CSS Media QueriesCSS Multi-Column Layout*CSS NamespacesCSS OM ViewsCSS Regions And Exclusions*CSS Selectors

CSS TransitionsCSS Values And UnitsData URIDOM Element TraversalDOM HTMLDOM Level 3 CoreDOM Level 3 EventsDOM StyleDOM Traversal And RangeDOMParser And XMLSerializerECMAScript 5FormdataHTML5 Application CacheHTML5 Async ScriptsHTML5 BlobBuilderHTML5 CanvasHTML5 Drag And Drop

HTML5 Forms And ValidationHTML5 GeolocationHTML5 History APIHTML5 ParserHTML5 SandboxHTML5 SelectionHTML5 Semantic ElementsHTML5 Video And AudioJavaScript Typed ArrayICC Color ProfilesIndexedDBPage VisibilityPointer (Mouse, Pen, And Touch) Events*RequestAnimationFrameNavigation TimingSelectors API Level 2

SVG Filter EffectsSVG, Standalone And In HTMLWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXHR (Level 2)XHR CORS

Visually attractive apps!

2D & 3D Transforms

Transitions

Animations

Shadows

Gradients

Custom Fonts

CSS3 Effects

Adding a live tile to our app

Demo

Built for touch

Touch eventsBuilt on top of the MSPointer modelFollow the familiar pattern of DOM mouse eventsSupports multiple touch pointsRequires only a few changes to existing touch sites

Gesture eventsEasy to capture gestures over a single or multiple elements on the DOMRecognizes pan and pinch with inertia!Gives developers access to the Windows Phone 8 “touch language”Allows multiple gestures to be recognized concurrently

Adding touch support to our app

Demo

Immersive layout

Multiple Columns

Positioned floats

Regions

Grids

Flexbox

CSS3 for content flow

Using Flex-box to create a HTML5 start-like experience

Demo

Layout Viewport WidthLa

yout

Vie

wpor

t Hei

ght

Visual Viewport

Defines the initial size of the layout viewport in CSS pixels

Beware of using device-width and be prepared to adapt your layout… RWD Anyone?

<META name=“viewport”/>

@-ms-viewport

Sizing your viewport

Fixed positioned elements are positioned relative to the layout viewport

position:fixed

A word on fixed positioned elements

Adding device adaptation support for our app

Demo

App cacheIndexedDBHistoryWebWorkersWebSockets

Other helpful HTML5 features

All I would need is HTML5…

In a perfect world

When we need more, XAML to the rescue!Use InvokeScript to call JavaScript functions from host (C#)

webBrowser.InvokeScript(“myFunction", “myArg1”);webBrowser.InvokeScript(“eval”, “document.body.offsetHeight.toString()”);webBrowser.InvokeScript(“execScript”, myScript.ToString());

Use ScriptNotify to call host (C#) from JavaScript async

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

But wait, there is more!Set the default background color

webBrowser.Background=“#ffff00”;

Easily navigate backward/forwardif (webBrowser.CanNavigateBack) webBrowser.GoBack();if (webBrowser.CanNavigateForward) webBrowser.GoForward();

Clear local cache and cookiesawait webBrowser.ClearCookiesAsync();await webBrowser.ClearInternetCacheAsync();

Load files directly from XAPwebBrowser.Navigate(new Uri("test.html", UriKind.Relative))

A final thought…

Yes, we are fast!

IE10 (WP8) H T ML5 App (WP8) iPho ne 5 Sa fa r i i Phone 5 H T ML5 App 0

500

1000

1500

2000

2500

3000

3500

4000

Sunspider 0.9.1 ScoreLower is better

In summary

Window Phone 8 web platform

Provides a cross platform, rapid and cost effective wayto build beautiful apps that are delightful to use and interact withand immerse people to get the most out of their contentwhile feeling native and integrated with Windows Phone.

Download the WP8 Developer tools!

Try the new HTML5 Application template!

Build great Apps!

Call to action

Questions?

RESOURCESResource List

http://wpdev.ms/phonedevres

Certification Requirementshttp://wpdev.ms/certreq

“How To” Indexhttp://wpdev.ms/howtos

Official Sampleshttp://wpdev.ms/officialsamples

Forumshttp://wpdev.ms/ahforum

Supporthttp://wpdev.ms/devsupport

JW on Metro Design for Devshttp://wpdev.ms/thejeffonmetro

MIDDLEWAREWindows Phone Toolkit

http://silverlight.codeplex.com

Little Watson, (in Northern Lights toolkit)http://northernlights.codeplex.com

Tombstone Helperhttp://tombstonehelper.codeplex.com

Your Last About Dialoghttp://ylad.codeplex.com

Notify Property Weaverhttp://visualstudiogallery.msdn.microsoft.com/bd351303-db8c-4771-9b22-5e51524fccd3

Coding 4 Fun Toolkithttp://coding4fun.codeplex.com

WP App Site Templatehttp://wp7appsite.codeplex.com

COMMUNITYUser Voice

http://wpdev.uservoice.com

Twitter - #WPDEVhttps://twitter.com/#!/search/%23wpdev

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.