Designing apps in Blend (HTML)

Windows Windows Store apps can use two different kinds of markup: Extensible Application Markup Language, or XAML (pronounced "zammel"), an XML-based markup language developed by Microsoft, or Hypertext Markup Language, or HTML, the markup language commonly used to structure pages on the Worldwide Web (WWW). In conjunction with HTML, Cascading Style Sheets (CSS) provide styling for HTML pages.

For more information about creating apps using XAML, see Designing apps in Blend (XAML).

Windows Store apps and HTML

When you choose to develop Windows Store apps using HTML, you can build visually stunning user interfaces (UI) in HTML markup instead of a programming language such as JavaScript. You can create elaborate UI documents using HTML and CSS by defining elements such as controls, text, images, shapes, animation, and more.

For more information about HTML and Windows Store app development, see the Developing apps (JavaScript and HTML5) topic on the Windows Developer Center.

The relationship between HTML, CSS, and JavaScript

The HTML for any given document in Blend is stored in an .html file. When you create a new project, Blend creates three files: default.,html, which contains the markup that defines the structure of the app; default.css, which defines the appearance of the various components within the app; and default.js, which contains the JavaScript code that provides the logic and interactivity for the app.

For information about how to create HTML documents with or without JavaScript files, see Create a new project (Windows Store apps).

Because HTML is declarative, it requires the addition of code if you want to add run-time logic to your application. For example, if your application uses only HTML, you can create and animate UI elements, and configure them to respond in a limited way to user input (by using event triggers), but your application cannot perform and respond to calculations or spontaneously create new UI elements without the addition of code. The code for a HTML application is stored in a separate file from the HTML document. This separation of UI design from the underlying code enables developers and designers to work more closely together on the same project without delaying each other's progress.

When you build your project, Blend parser reads the .html, .css, and .js files for that project and reports any resulting errors. Likewise, when you open an existing project, Blend parser reads the .html, .css, and .js files that are included in your project folder and attempts to parse the elements and display the documents on the artboard in Design view. In both cases, if the parser encounters errors, the artboard is disabled, and Blend displays an error message with a link to open Code view so that you can resolve the errors. The parsing errors are also reported on the Errors tab in the Results panel.

For more information, see the following topics:

• Editing source code (Blend for Visual Studio)

• Handling errors in code (Blend for Visual Studio)

• Cascading Style Sheets

• Debugging and testing Windows Store apps

Designing a Windows Store style app

Get started by reviewing the Windows Store guide, which walks you through the essentials of writing your first app.

• Making great Windows Store apps    Learn how Windows app design principles help you create great apps.

• Planning Windows Store apps   Learn how to think about the experience you want to provide to your users.

• Designing UX for Windows Store apps   Learn how Windows app style design practices help ensure a consistent and predictable experience for your users.

• Writing code for Windows Store apps (JavaScript)   Learn what you should know before writing JavaScript code for apps.

You can also learn how to use Blend by building your own Windows Store app using HTML in Blend.

For more information, see Design your first Windows Store app (HTML).

Additional resources

Learn how to create Windows Store apps using JavaScript. From the new Start screen to new UI layout and controls, the presentation of your app is about showing off what it's great at.

• Design a UI   Learn how to create a user interface for your app.

  For more information, see Create a UI.

• Define application resources   Learn how to define your app's resources to improve maintainability and localization.

  For more information, see Define application resources.

• Respond to user interaction   Learn how to respond to touch, keyboard, mouse, and ink.

  For more information, see Respond to user interaction.

• Work with data and files   Learn how to bind data, read, write, and save to files, as well as how to manipulate XML data.

  For more information, see Work with data and files.

• Connect to peers, web, and network services   Learn how to create connected apps. A connected, or network-aware app, can use the network for a variety of purposes including RSS feeds, games, and to interact with nearby devices.

  For more information, see Connect to peers, web, and network services.

• Manage user info   Learn how to use roaming credentials, how to authenticate users with Live Services, and how to set up single sign-on.

  For more information, see Manage user info.

• Launch and resume apps   Learn how to launch, suspend, and resume your app while keeping app data safe and fresh.

  For more information, see Launch and resume apps.

• Add multimedia   Learn how to capture multimedia, play audio and video, process image files, share or stream media, and transcode multimedia.

  For more information, see Add multimedia.

• Integrate devices, printers, and screens   Learn how to support devices like printers, cameras, sensors, removable storage, and more. You can also learn how to choose the right motion and orientation sensor for your game, how to use a light sensor to adjust screen brightness, and how to detect a user's geographic location.

  For more information, see Integrate devices, printers, and screens.

• Create Windows Runtime Components   Learn about creating components (essentially DLLs) in C++, C#, or Visual Basic, and call into them in a simple and natural way from a Windows Store app using JavaScript.

  For more information, see Create Windows Runtime Components.

• Globalize your app   Learn how to use tools to debug and test your app.

  For more information, see Globalize your app.

• Make your app accessible   Learn how to create apps that are accessible to the widest possible audience, including people who have impairments or disabilities.

  For more information, see Making your app accessible.