2-015 WP8 HTML5/IE10 for Developers

2-015 WP8 HTML5/IE10 for Developers

2-015 WP8 HTML5/IE10 for DevelopersJorge Peraza & Rick XuProgram ManagersSession 2-01511/1/2012Windows Azure1 2011 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.Demo Search & PulseBuild 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/20122Why 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?3Why build an HTML5 app?All the cool kids are doing it!Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/20125No, but really, with HTML5 you canReuse 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

6And 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=prUS234806127Windows Phone App that leverages the WebBrowser control for some or all of its functionalityWhat exactly is an HTML5 app on WP8?Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/20128Building our first HTML5 appAll great things start from the beginning

Hardware accelerated

Built for touch

Fast even for apps!

Offline apps are a go!

Internet Explorer 1010IE10 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 SelectorsCSS 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 DropHTML5 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 2SVG Filter EffectsSVG, Standalone And In HTMLWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXHR (Level 2)XHR CORS11Visually attractive apps!

2D & 3D Transforms

Transitions

Animations

Shadows

Gradients

Custom FontsCSS3 Effects

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/201213Adding a live tile to our appDemo Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/201214Built for touch

Touch eventsBuilt 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

16Gesture eventsEasy 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

17Adding touch support to our appDemo Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/201218Immersive layoutMultiple Columns

Positioned floats

Regions

Grids

FlexboxCSS3 for content flow

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/201220Using Flex-box to create a HTML5 start-like experienceDemo Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.11/1/201221

Layout Viewport WidthLayout Viewport Height

Visual Viewport

Build 2012 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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 Corporati