Building beautiful and interactive apps with HTML5 & CSS3 9/14/2018 12:08 AM PLAT-381T Building beautiful and interactive apps with HTML5 & CSS3 Ted Johnson Partner Program Manager Lead, Internet Explorer Microsoft Corporation © 2010 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.

Beautiful web → Beautiful apps

Agenda What’s new for graphics in Windows 8 web platform Metro style apps using HTML Internet Explorer 10 Demo “hands-on” examples of CSS3 features SVG filter effects HTML5 canvas

Windows Core OS Services Metro style Apps Desktop Apps View XAML HTML / CSS HTML JavaScript Model Controller C C++ C# VB JavaScript (Chakra) C C++ C# VB WinRT APIs Communication & Data Graphics & Media Devices & Printing System Services Application Model Internet Explorer Win32 .NET / SL Core Windows Core OS Services

These features work identically in Internet Explorer 10 and Metro style apps using HTML.

CSS3 Features

CSS3 graphics effects Transparency Round corners Shadows color specification with alpha, opacity property Round corners border-radius Shadows box-shadow, text-shadow Background gradients linear, radial Typography Web Open Font Format (WOFF) fonts

demo CSS3 Graphics Effects 9/14/2018 12:08 AM © 2010 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.

CSS3 2D & 3D transforms Display-time transformations of any HTML content transforms do not affect layout 2D Transforms translate, scale, rotate, skew 3D Transforms translate, scale, rotate, skew in X, Y & Z perspective

demo CSS3 2D & 3D Transforms 9/14/2018 12:08 AM © 2010 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.

CSS3 transitions & animations smooth animation of CSS properties from old to new value can be used with CSS pseudo-classes such as :hover Animations keyframe-based definition of a set of CSS property changes allows richer animations than CSS Transitions event model allows complex use in combination with script

CSS3 Transitions & Animations 9/14/2018 12:08 AM demo CSS3 Transitions & Animations © 2010 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.

CSS3 multi-column layout Any HTML block element can be made multi-column controls for number of columns, column width, column gaps, … break-before, no-break control Hyphenation needed when columns get narrow Full justification

CSS3 Multi-column Layout 9/14/2018 12:08 AM demo CSS3 Multi-column Layout © 2010 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.

SVG Features

SVG filter effects Collection of pre-defined image filters Apply to any SVG content SVG content can be embedded in HTML5 Hardware-accelerated implementation

demo SVG Filter Effects 9/14/2018 12:08 AM © 2010 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.

HTML5 <canvas>

HTML5 <canvas> HTML5 <canvas> is a bitmap with an API think “GDI drawing to a bitmap DC” Drawing capabilities line, rectangle, text string, image, path fill style, line style, line cap, gradients opacity, shadow, and composition mode 2D transformation matrix direct pixel-manipulation Hardware-accelerated implementation

demo HTML5 <canvas> 9/14/2018 12:08 AM © 2010 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.

Putting It Together

Putting it together

Making it beautiful Transparency Border-radius Box-shadow Text-shadow Gradients Web fonts 2D Transforms 3D Transforms Transitions & Animations Multi-column Layout SVG Filter Effects HTML5 Canvas

These features work identically in Internet Explorer 10 and Metro style apps using HTML.

Related sessions [PLAT-382T] What's new with HTML5, Javascript, and CSS3 [PLAT-873T] Designing Metro style apps using CSS3 [PLAT-376T] Building offline access in Metro style apps and websites using HTML5 [PLAT-386T] 50 performance tricks to make your Metro style apps and sites using HTML5 faster [PLAT-770T] Create cool image effects with Direct2D

Further reading and documentation Internet Explorer Test Drive site http://ietestdrive.com/ Internet Explorer Engineering Team Blog http://blogs.msdn.com/b/ie/ W3C CSS Specifications and Drafts http://www.w3.org/Style/CSS/ How to draw on an HTML5 Canvas http://go.microsoft.com/fwlink/?LinkId=227692&clcid=0x409 Building your first Metro style app with JavaScript http://go.microsoft.com/fwlink/?LinkId=227644&clcid=0x409

thank you Feedback and questions http://forums.dev.windows.com Session feedback http://bldw.in/SessionFeedback

9/14/2018 12:08 AM © 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. © 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.