New Platform Capabilities for Advancing Web Development - PowerPoint Presentation

Slide1
Slide2

New Platform Capabilities for Advancing Web Development

Israel

Hilerio

Principal Program Manager Lead

2-067Slide3

Windows is advancing the web by introducing new platform capabilitiesSlide4

Commitment to the Web

What’s New in the Web Platform

Demos

Next StepsQ & A

AgendaSlide5

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 WebSlide6

What’s New in the Web Platform

Professional Quality Video

Secure Content

Immersive Graphics

Richer User InteractionsLayout refinements

Much moreSlide7

Professional Quality VideoSlide8

Demo: Plug-in Free Netflix ExperienceSlide9

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 bufferSlide10

Encrypted Media Extensions (EME)What is EME?

Specifies an HTML extension API

that defines access

to DRM implementations contained in the web platform

Video

ElementSlide11

Fullscreen APIs

What is it?

Web

standard that enables HTML elements to take over the full screen window area.Slide12

What is SDP-US?

Fully

featured captioning solution for modern

browsersTTML

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

Demo: CaptioningSlide14

Perf & Power Improvements

Diskless XHR cache mode

Audio offload for adaptive streaming

Web

Cache

WebSlide15

Secure ContentSlide16

Demo: WebCrypto

APIsSlide17

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 webSlide18

Key GenerationAES-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

Algorithms Supported

Wrap/Unwrap

AES-KW

RSA-OAEP

AES-GCMImport/Export Keys FormatsRawpkcs8

spkijwkSlide19

Immersive GraphicsSlide20

Demo: Orbits VisualizerSlide21

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 FirefoxSlide22

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

WebGL

applicationsSlide23

Image Smoothing – create new pixelated effects

Dashed lines –

d

rawing dashed linesFill rules –allows

developers to choose their fill ruleNew Canvas 2D Context APIsSlide24

Use hardware more efficiently

Reduces your app load time

Background images

87.5% less GPU memory usageRecommended for in-package assets

DirectDraw Surface (DDS) SupportSlide25

Rich User InteractionsSlide26

Demo: Rich InteractionsSlide27

Rich User InteractionsScreen 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 EventsProvides you an updated

implementation

Perf

Improvements

Hardware accelerated scrolling and zooming for mouse, keyboard, and script

Device Fix

Fix elements even when you zoomSlide28

Layout RefinementsSlide29

Flexbox

Updated prefix free implementation

Border-Image

CSS property that allows you to specify an image to declare your border styleHorizontal-Vertical text support

CSS property that allows you to mix horizontal characters into a single space in

vertical writing mode

CSS EnhancementsSlide30

Demo: Border-Image and FullscreenSlide31

No need to refresh the DOM to see dynamic changes

Support CSS shorthand

Support inline styling

CSS intellisense

for properties and valuesImproved 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

propertiesWe

will be tracking #f12tools on Twitter for customer tweets on the new tools

F12 and New Layout CapabilitiesSlide32

Demo: CSS and F12 FeaturesSlide33

Editing EnhancementsClipboard Improvements

Able to copy/paste images from 3

rd

party programsclipboardData.filesevent. msConvertURL(file, “specified”,

url);New ExecCommands

Undo improvements

msBeginUndoUnit

,

msEndUndoUnit

, and msClearUndoStackSlide34

Demo: Editing FeaturesSlide35

Shell IntegrationSlide36

Pinned Sites

Live Tiles support

New Tile sizes

Support Hi Res Icons in the Favorites and Recent Site area

Internet

RSSSlide37

Demo: RSS Tiles for Pinned SitesSlide38

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 AppsSlide39

Related Build Presentations

2-066

New IE Developer Tools

2-067 New Platform Capabilities for Advancing Web Development3-068

Web run-time performance3-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 ResourcesSlide40

Questions?

Israel Hilerio

Israelh@Microsoft.comSlide41

Evaluate this session

Scan this QR code

to evaluate this session and be automatically entered in a

drawing

to

win

a

prize!

Required Slide

*delete this box when your slide is finalized

Your MS Tag will be inserted here during the final scrub. Slide42