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.