Using Blend to Design HTML5 Windows 8 Application (Part I): Overview and Hello World
Are you looking for a HTML5/CSS authoring tool on Windows 8? Blend is the tool.
Blend helps simplify design tasks by providing an accurate design surface and powerful tools that let you visually create and edit HTML and CSS. It gives you great tools to create, edit and diagnose CSS, supporting some of the latest CSS standards, including CSS Grid, Gradients, Transitions, and media queries. It also is designed to handle app UX that makes heavy use of JavaScript to dynamically create and manipulate DOM elements. Using Interactive Mode you can even interact with the app on the design surface and bring it into states that are not reachable via markup at all.
In this blog series, you will get an overview of Blend and the great features it provides for allowing you to build great Windows applications. This blog series will help you better understand the following:
- · How to use Blend to visually style a grid-based Metro style app
- · How to use Blend in Interactive Mode to style a run-time state
- · How to use Blend to visually style a Metro style app in a variety of views and orientations
Some of the features in Blend
- Visual design – Visually edit HTML, CSS, and Metro style controls. What you see in Blend is what users will see in Windows 8 Release Preview.
- Interactive Mode – Design your app in states that would otherwise be available only at run time, without having to endlessly compile and run.
- App building – Drag and drop Metro style controls onto the design surface, set their properties, and style them.
- Powerful code generation – When you add a new style or element to an app, Blend takes care of all the syntax and generates concise, reliable, predictable code.
- Debugging – Visual Studio can debug JavaScript, but only Blend lets you visually debug HTML and CSS. The Winning Properties virtual rule shows you the CSS cascade for any element. The Computed Values virtual rule shows you how Windows 8 will compute CSS property values for each element. The Live DOM panel updates to display run-time changes.
Install Blend
Blend is now included in Visual Studio 2012, including the free Express for Windows 8 version for authoring Win 8 store apps. With one fast download and install you get VS for your coding-centric tasks and Blend for visual authoring.
Before you install Blend , first you need to install Windows 8 on your system. You must run Blend on Windows 8 to develop Windows 8 store style apps. If you are running Blend on Windows 7, you can't develop Windows 8 style apps.
You can download the free Visual Studio 2012 Express for Windows 8, which includes Blend, or free trial versions of Visual Studio 2012 with Blend today. Visual Studio 2012 and Blend can also be downloaded from MSDN today if you’re an MSDN Subscriber.
Difference between Windows 8 app vs Web App
A Windows 8 store style app built using HTML5, CSS3 and JavaScript, uses the same technology that a web site uses. However, a Windows 8 style app is not deployed page-by-page from a web server. Instead, it is installed locally on the user's computer. Like any native Windows application, a Metro style app built using HTML has direct access to the underlying platform and is able to share information with other applications.
First Hello World Application
A classic hello world example is always good to get start with. You will Learn the basics of the Blend UI and how to start working with the content creation and styling features you have available. This demo is from Kirupa Chinnathambi at BlendInsider
More Blogs
In the next two blogs, we will be demonstrate how to create a lightweight, dynamic version of the memory game Windows 8 style application using HTML5/CSS3.
Using Blend to Design HTML5 Windows 8 Application (Part II): Style, Layout and Grid