New Platform Capabilities for Advancing Web Development

2. New Platform Capabilities for Advancing Web Development Israel Hilerio Principal Program Manager Lead 2-067

3. Windows is advancing the web by introducing new platform capabilities

4. Agenda • Commitment to the Web • What’s New in the Web Platform • Demos • Next Steps • Q & A

5. Commitment to the Web • The Web platform is an integral part of Windows • Standards allow you to create interoperable experiences between websites and applications • You can (extend your site) create immersive experiences between your websites and the Windows shell • One IE across all Microsoft devices

6. What’s New in the Web Platform • Professional Quality Video • Secure Content • Immersive Graphics • Richer User Interactions • Layout refinements • Much more

7. Professional Quality Video

8. Demo: Plug-in Free Netflix Experience

9. Media Source Extension (MSE) • What is MSE? • Specifies an HTML extension API that defines the implementation of adaptive streaming in the browser Video Element src Source buffer

10. Encrypted Media Extensions (EME) • What is EME? • Specifies an HTML extension API that defines access to DRM implementations contained in the web platform Video Element

11. Fullscreen APIs • What is it? • Web standard that enables HTML elements to take over the full screen window area.

12. TTML Simple Delivery Profile (SDP) for Closed Captions (US) • What is SDP-US? • Fully featured captioning solution for modern browsers

13. Demo: Captioning

14. Perf & Power Improvements • Diskless XHR cache mode • Audio offload for adaptive streaming Web Web Cache

15. Secure Content

16. Demo: WebCrypto APIs

17. Web Crypto API • What are Web Crypto APIs? • Web standard that defines a JS API for performing basic cryptographic operations in a web application • Most complete WebCrypto implementation on the web

18. Algorithms Supported • Key Generation • AES-CBC • AES-GCM • HMAC (SHA-1, SHA-256, SHA-384) • RSAES-PKCS1-v1_5 • RSASSA-PKCS1-v1_5 • RSA-OAEP • Encrypt/Decryption • AES-CBC • AES-GCM • RSAES-PKCS1-v1_5 • RSA-OAEP • Wrap/Unwrap • AES-KW • RSA-OAEP • AES-GCM • Import/Export Keys Formats • Raw • pkcs8 • spki • jwk

19. Immersive Graphics

20. Demo: Orbits Visualizer

21. WebGL • What is WebGL? • A web specification, based on OpenGL ES 2.0, that defines a low-level 3D graphics APIs to use on your sites • What are we delivering? • Robust, Secure, and Fast WebGL implementation that is interoperable with Chrome and Firefox

22. Secure WebGL Goal: To be the most secure platform for developing WebGL applications

23. New Canvas 2D Context APIs • Image Smoothing – create new pixelated effects • Dashed lines – drawing dashed lines • Fill rules –allows developers to choose their fill rule

24. DirectDraw Surface (DDS) Support • Use hardware more efficiently • Reduces your app load time • Background images • 87.5% less GPU memory usage • Recommended for in-package assets

25. Rich User Interactions

26. Demo: Rich Interactions

27. Rich User Interactions • Screen Orientation APIs • Lock the screen orientation of a device to a predefined mode: portrait or landscape • Device Orientation APIs • Retrieve information for the physical orientation and motion of a device • Pointer Events • Provides you an updated implementation • Perf Improvements • Hardware accelerated scrolling and zooming for mouse, keyboard, and script • Device Fix • Fix elements even when you zoom

28. Layout Refinements

29. CSS Enhancements • Flexbox • Updated prefix free implementation • Border-Image • CSS property that allows you to specify an image to declare your border style • Horizontal-Vertical text support • CSS property that allows you to mix horizontal characters into a single space in vertical writing mode

30. Demo: Border-Image and Fullscreen

31. F12 and New Layout Capabilities • No need to refresh the DOM to see dynamic changes • Support CSS shorthand • Support inline styling • CSS intellisense for properties and values • Improved workflow for editing in the CSS pane (TAB, }, Arrow keys) • Ability to search using CSS selector notation • Support for !important and @media rules • Highlight invalid CSS properties • We will be tracking #f12tools on Twitter for customer tweets on the new tools

32. Demo: CSS and F12 Features

33. Editing Enhancements • Clipboard Improvements • Able to copy/paste images from 3rd party programs • clipboardData.files • event. msConvertURL(file, “specified”, url); • New ExecCommands • Undo improvements • msBeginUndoUnit, msEndUndoUnit, and msClearUndoStack

34. Demo: Editing Features

35. Shell Integration

36. Pinned Sites Internet RSS • Live Tiles support • New Tile sizes • Support Hi Res Icons in the Favorites and Recent Site area

37. Demo: RSS Tiles for Pinned Sites

38. Key Takeaways • IE provides a standard web platform across all Microsoft devices • Available for you on IE as well as Windows store apps • Our goal is for you to reuse assets to easily build Windows store apps and use your web programming knowledge • Your sites can be more like Apps

39. Additional Resources • Related Build Presentations • 2-066 New IE Developer Tools • 2-067 New Platform Capabilities for Advancing Web Development • 3-068 Web run-time performance • 3-069 Web Compatibility and Same Markup • 3-071 Lighting up your site on Windows 8.1 • 4-072 Hyper-fast web graphics with WebGL • 4-073 Inspecting & Debugging Using IE’s New F12 Developer Tools • 3-089: Building media streaming apps and sites without plug-ins using MPEG-DASH

40. Questions? • Israel Hilerio • Israelh@Microsoft.com

41. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!