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

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

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

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

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

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

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

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

10. Focus on Devices

11. Different Display Sizes

12. Different Orientations

13. Different Layouts / View States

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

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

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

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

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

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

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

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

24. Contact Me kirupac@microsoft.com
Feel free to contact me if you have any questions:

25. DEV Track Resources
Visual Studio Home Page ::
Somasegar’s Blog ::
Jason Zander’s Blog ::
Facebook ::
Twitter ::

26. Resources Learning TechNet http://northamerica.msteched.com
Connect. Share. Discuss.
Microsoft Certification & Training Resources
TechNet
Resources for IT Professionals
Resources for Developers

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

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

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

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