Building Awesome HTML Applications in Blend for Windows 8 Windows Azure 9/19/2018 Building Awesome HTML Applications in Blend for Windows 8 Kirupa Chinnathambi 3-002 © 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.

HTML Applications in Windows 8 Agenda Introduction (almost done!) Hello, world! HTML Applications in Windows 8 Designing for Devices Highlights Q/A

Blend + Visual Studio

Blend is optimized for visual design tasks. Visual Studio is optimized for coding and debugging.

WPF, Silverlight, Windows Phone, XAML (Windows 8), HTML (Windows 8)

(for building Windows 8 Applications) HTML (for building Windows 8 Applications)

Professional Design Tool

Expects you to know HTML and CSS. Gives you as much or as little detail as you want. Allows you to focus on the concepts and not the syntax.

Hello, world!

HTML Applications in Windows 8

Unique Style

Deep Integration with Windows

Single Page Navigation Model

Optimized for Devices

Focus on Devices

Different display sizes

Different resolution / DPIs As the resolution goes up, elements become smaller.

Different resolution / DPIs When the DPI/PPI hits a certain threshold, Windows scales all of the UI to 140% or 180% of the original size.

Highlights (1/5) Accurate design surface that runs your application’s HTML, CSS, and JavaScript. We use the same rendering engine that is used by your application at runtime.

Highlights (2/5) Clean and predictable HTML and CSS. We generate production quality markup you can proudly tell your friends about.

Highlights (3/5) Support for working with WinJS controls, fragments, and templates. Add them. Modify their properties. Style them.

Highlights (4/5) Ability to access “hard-to-reach” states at design-time. Author and style UI in areas that can only be reached by interacting with your application.

Highlights (5/5) Excellent integration with Visual Studio. Use Blend for visual design tasks. Use Visual Studio for coding and debugging.

{ web site: kirupa.com // twitter: @kirupa // facebook: kirupa }; kirupac@microsoft.com { web site: kirupa.com // twitter: @kirupa // facebook: kirupa };