New Platform Capabilities for Advancing Web DevelopmentIsrael HilerioPrincipal Program Manager Lead2-067

Windows is advancing the web by introducing new platform capabilities

• Commitment to the Web• What’s New in the Web

Platform• Demos• Next Steps• Q & A

Agenda

• 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

Commitment to the Web

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

Professional Quality Video

Demo: Plug-in Free Netflix Experience

Media Source Extension (MSE)What is MSE?• Specifies an HTML extension API that defines the implementation of

adaptive streaming in the browser

VideoElement

src

Source

Buffer Audio

Source

Buffer Video

Media SourceSource buffer

Encrypted Media Extensions (EME)What is EME?• Specifies an HTML extension API that defines access to DRM

implementations contained in the web platform

msneedkey

MSMediaKeys

MediaKeySession

VideoElement

Fullscreen APIsWhat is it?• Web standard that enables HTML elements to take over the full

screen window area.

What is SDP-US?• Fully featured captioning solution for modern browsers

TTML Simple Delivery Profile (SDP) for Closed Captions (US)

Demo: Captioning

Perf & Power Improvements• Diskless XHR cache mode• Audio offload for adaptive streaming

Web

Cache

Web

Secure Content

Demo: WebCrypto APIs

Web Crypto APIWhat 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

Key Generation• AES-CBC• AES-GCM• HMAC (SHA-1, SHA-256, SHA-

384)• RSAES-PKCS1-v1_5• RSASSA-PKCS1-v1_5• RSA-OAEPEncrypt/Decryption• AES-CBC• AES-GCM• RSAES-PKCS1-v1_5• RSA-OAEP

Algorithms SupportedWrap/Unwrap• AES-KW• RSA-OAEP• AES-GCMImport/Export Keys Formats• Raw• pkcs8• spki• jwk

Immersive Graphics

Demo: Orbits Visualizer

WebGLWhat is WebGL?• A web specification, based on OpenGL ES 2.0, that defines a low-level 3D

graphics APIs to use on your sitesWhat are we delivering?• Robust, Secure, and Fast WebGL implementation that is interoperable

with Chrome and Firefox

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

• Image Smoothing – create new pixelated effects• Dashed lines – drawing dashed lines• Fill rules –allows developers to choose their fill rule

New Canvas 2D Context APIs

• Use hardware more efficiently• Reduces your app load time• Background images• 87.5% less GPU memory

usage• Recommended for in-

package assets

DirectDraw Surface (DDS) Support

Rich User Interactions

Demo: Rich Interactions

Rich User InteractionsScreen Orientation APIs• Lock the screen orientation of a device to a predefined mode: portrait or

landscapeDevice Orientation APIs• Retrieve information for the physical orientation and motion of a devicePointer Events• Provides you an updated implementationPerf Improvements• Hardware accelerated scrolling and zooming for mouse, keyboard, and

scriptDevice Fix• Fix elements even when you zoom

Layout Refinements

Flexbox• Updated prefix free

implementationBorder-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

CSS Enhancements

Demo: Border-Image and Fullscreen

• 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

F12 and New Layout Capabilities

Demo: CSS and F12 Features

Editing EnhancementsClipboard 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

Demo: Editing Features

Shell Integration

Pinned Sites• Live Tiles support• New Tile sizes• Support Hi Res Icons in

the Favorites and Recent Site area

Internet

RSS

Demo: RSS Tiles for Pinned Sites

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

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

Additional Resources

Questions?

Israel HilerioIsraelh@Microsoft.com

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

© 2013 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.