Building Awesome Metro style HTML apps in Blend 2/5/2019 2:29 PM DEV368 Building Awesome Metro style HTML apps in Blend Kirupa Chinnathambi Program Manager Microsoft Corporation © 2007 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.

Agenda Intro to Blend and Visual Studio Building two applications from scratch Designing for devices My favorite 5 features! Q/A

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

What is Blend? Blend is a professional design tool for building applications visually.

For the purposes of this talk… Blend is a professional design tool for building your Metro style HTML applications visually.

A 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.

A basic introduction to Blend and its HTML features Hello, world! A basic introduction to Blend and its HTML features

SWAGWATCH A deeper look at Blend’s data, layout, control editing, and styling features.

Focus on Devices

Different Display Sizes

Different Orientations

Different Layouts / View States

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.

A look at making your application device friendly using Blend moodlamp A look at making your application device friendly using Blend

Highlights (1/5) Accurate design surface that runs your app’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.

Contact Me kirupac@microsoft.com Feel free to contact me if you have any questions: kirupac@microsoft.com http://www.kirupa.com http://www.twitter.com/kirupa http://www.facebook.com/kirupa

DEV Track Resources Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-us Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/ Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/ Facebook :: http://www.facebook.com/visualstudio Twitter :: http://twitter.com/#!/visualstudio

Resources Learning TechNet http://northamerica.msteched.com Connect. Share. Discuss. http://northamerica.msteched.com Microsoft Certification & Training Resources www.microsoft.com/learning TechNet Resources for IT Professionals http://microsoft.com/technet Resources for Developers http://microsoft.com/msdn

Complete an evaluation on CommNet and enter to win! Required Slide Complete an evaluation on CommNet and enter to win!

MS Tag Scan the Tag to evaluate this session now on myTechEd Mobile

2/5/2019 2:29 PM © 2012 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. © 2009 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.

2/5/2019 2:29 PM © 2009 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.