2-015 wp8 html5/ie10 for developers
DESCRIPTION
2-015 WP8 HTML5/IE10 for Developers. Jorge Peraza & Rick Xu Program Managers Session 2-015. Demo Search & Pulse. What are we going to talk about?. 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?. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/1.jpg)
2-015 WP8 HTML5/IE10 for DevelopersJorge Peraza & Rick XuProgram ManagersSession 2-015
![Page 2: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/2.jpg)
Demo Search & Pulse
![Page 3: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/3.jpg)
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?
![Page 4: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/4.jpg)
Why build an HTML5 app?
![Page 5: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/5.jpg)
All the cool kids are doing it!
![Page 6: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/6.jpg)
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
![Page 7: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/7.jpg)
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
![Page 8: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/8.jpg)
Windows Phone App that leverages the WebBrowser control for some or all of its functionality
What exactly is an HTML5 app on WP8?
![Page 9: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/9.jpg)
Building our first HTML5 appDrag picture to placeholder or click icon to add
All great things start from the beginning
![Page 10: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/10.jpg)
Hardware accelerated
Built for touch
Fast even for apps!
Offline apps are a go!
Internet Explorer 10
![Page 11: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/11.jpg)
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
![Page 12: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/12.jpg)
Visually attractive apps!
![Page 13: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/13.jpg)
2D & 3D Transforms
Transitions
Animations
Shadows
Gradients
Custom Fonts
CSS3 Effects
![Page 14: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/14.jpg)
Adding a live tile to our app
Demo
![Page 15: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/15.jpg)
Built for touch
![Page 16: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/16.jpg)
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
![Page 17: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/17.jpg)
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
![Page 18: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/18.jpg)
Adding touch support to our app
Demo
![Page 19: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/19.jpg)
Immersive layout
![Page 20: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/20.jpg)
Multiple Columns
Positioned floats
Regions
Grids
Flexbox
CSS3 for content flow
![Page 21: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/21.jpg)
Using Flex-box to create a HTML5 start-like experience
Demo
![Page 22: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/22.jpg)
Layout Viewport WidthLa
yout
Vie
wpor
t Hei
ght
Visual Viewport
![Page 23: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/23.jpg)
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
![Page 24: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/24.jpg)
Fixed positioned elements are positioned relative to the layout viewport
position:fixed
A word on fixed positioned elements
![Page 25: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/25.jpg)
Adding device adaptation support for our app
Demo
![Page 26: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/26.jpg)
App cacheIndexedDBHistoryWebWorkersWebSockets
Other helpful HTML5 features
![Page 27: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/27.jpg)
All I would need is HTML5…
In a perfect world
![Page 28: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/28.jpg)
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
![Page 29: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/29.jpg)
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))
![Page 30: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/30.jpg)
A final thought…
![Page 31: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/31.jpg)
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
![Page 32: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/32.jpg)
In summary
![Page 33: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/33.jpg)
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.
![Page 34: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/34.jpg)
Download the WP8 Developer tools!
Try the new HTML5 Application template!
Build great Apps!
Call to action
![Page 35: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/35.jpg)
Questions?
![Page 36: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/36.jpg)
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
![Page 37: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/37.jpg)
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
![Page 38: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/38.jpg)
COMMUNITYUser Voice
http://wpdev.uservoice.com
Twitter - #WPDEVhttps://twitter.com/#!/search/%23wpdev
![Page 39: 2-015 WP8 HTML5/IE10 for Developers](https://reader035.vdocuments.mx/reader035/viewer/2022062501/56815e60550346895dccdaa2/html5/thumbnails/39.jpg)
© 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.