1 / 39

2-015 WP8 HTML5/IE10 for Developers

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?.

xannon
Download Presentation

2-015 WP8 HTML5/IE10 for Developers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2-015 WP8 HTML5/IE10 for Developers Jorge Peraza & Rick Xu Program Managers Session 2-015

  2. Demo Search & Pulse

  3. 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?

  4. Why build an HTML5 app?

  5. All the cool kids are doing it!

  6. No, but really, with HTML5 you can… • Reuse your existing HTML, CSS and JavaScript skills • Reduce development costs by leveraging investments across different platforms • Can be combined with C# to gain access to the rest of the platform capabilities

  7. And momentum keeps building IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612 1 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 2015

  8. What exactly is an HTML5 app on WP8? • Windows Phone App that leverages the WebBrowser control for some or all of its functionality

  9. All great things start from the beginning • Building our first HTML5 app

  10. Internet Explorer 10 • Hardware accelerated • Built for touch • Fast even for apps! • Offline apps are a go!

  11. IE10 hardware-accelerated web platform 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 Layout* CSS Namespaces CSS OM Views CSS Regions And Exclusions* 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 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 Semantic Elements HTML5 Video And Audio JavaScript Typed Array ICC Color Profiles IndexedDB Page Visibility Pointer (Mouse, Pen, And Touch) Events* RequestAnimationFrame Navigation Timing Selectors API Level 2 SVG Filter Effects SVG, Standalone And In HTML Web Messaging Web Sockets Web Workers XHTML/XML XHR (Level 2) XHR CORS

  12. Visually attractive apps!

  13. CSS3 Effects • 2D & 3D Transforms • Transitions • Animations • Shadows • Gradients • Custom Fonts

  14. Demo • Adding a live tile to our app

  15. Built for touch

  16. Touch events Built on top of the MSPointer model Follow the familiar pattern of DOM mouse events Supports multiple touch points Requires only a few changes to existing touch sites

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

  18. Demo • Adding touch support to our app

  19. Immersive layout

  20. CSS3 for content flow • Multiple Columns • Positioned floats • Regions • Grids • Flexbox

  21. Demo • Using Flex-box to create a HTML5 start-like experience

  22. Layout Viewport Width Layout Viewport Height Visual Viewport

  23. Sizing your viewport • <META name=“viewport”/> • @-ms-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?

  24. A word on fixed positioned elements • position:fixed • Fixed positioned elements are positioned relative to the layout viewport

  25. Demo • Adding device adaptation support for our app

  26. Other helpful HTML5 features • App cache • IndexedDB • History • WebWorkers • WebSockets

  27. In a perfect world • All I would need is HTML5…

  28. 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: <WebBrowserScriptNotify=“Browser_ScriptNotify” /> • JavaScript: window.external.notify(parameter); • C#: private void Browser_ScriptNotify(object sender, NotifyEventArgs e) // use e.value to retrieve parameter

  29. But wait, there is more! • Set the default background color • webBrowser.Background=“#ffff00”; • Easily navigate backward/forward • if (webBrowser.CanNavigateBack) webBrowser.GoBack(); • if (webBrowser.CanNavigateForward) webBrowser.GoForward(); • Clear local cache and cookies • await webBrowser.ClearCookiesAsync(); • await webBrowser.ClearInternetCacheAsync(); • Load files directly from XAP • webBrowser.Navigate(new Uri("test.html", UriKind.Relative))

  30. A final thought…

  31. Yes, we are fast!

  32. In summary

  33. Provides a cross platform, rapid and cost effective way to buildbeautifulapps that are delightfulto use and interact with and immersepeople to get the most out of their content while feeling native and integratedwith Windows Phone. Window Phone 8 web platform

  34. Call to action • Download the WP8 Developer tools! • Try the new HTML5 Application template! • Build great Apps!

  35. Questions?

  36. RESOURCES • Resource Listhttp://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

  37. MIDDLEWARE • Windows Phone Toolkithttp://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

  38. COMMUNITY • User Voicehttp://wpdev.uservoice.com • Twitter - #WPDEVhttps://twitter.com/#!/search/%23wpdev

More Related