Home > Articles > Programming > Windows Programming

  • Print
  • + Share This
From the author of HTML5

HTML5

Microsoft makes it easy to build Windows 8 Metro applications using HTML5. These applications will look and feel like any other Metro application; there is no easy way to tell a C# or C++ XAML application apart from an HTML5/WinJS one just by running it. The templates for HTML5 applications include default CSS3 and JavaScript files that make it easy to adhere to the Metro look and feel as well as handle inputs and touch in a consistent fashion. It is also extremely easy to consume web-based content and render it using the HTML5 application templates.

The following example defines the UI for a simple HTML5 Metro application. Notice that the markup is not only familiar, but fully compliant and just as easily could have been used to define a web page:

<!DOCTYPE html> 
<html> 

<head>
     <meta charset="utf-8">
     <title>Hello, World!</title>
     <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
     <script src="//Microsoft.WinJS.0.6/js/base.js"></script>

     <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
     <link href="/css/default.css" rel="stylesheet">
     <script src="/js/default.js"></script> 
</head> 
<body><div id="helloText" /></body> 

</html>

Blend for Visual Studio 11 fully supports designing HTML5/CSS3 UIs[md]even if the UI is generated using JavaScript. This is because the new version of Blend hosts an actual web browser that allows for real-time editing of content. You can tweak the HTML5 markup, CSS3 style sheet, or JavaScript source code and see the results immediately on the Blend design surface. Blend also supports advanced features like jQuery selectors to easily apply styles and behaviors to elements in the design surface.

  • + Share This
  • 🔖 Save To Your Account