Aug
16
2013

Start Developing for Windows (8.1) Store Apps using HTML5

jumpstartstudioWhen Windows 8 was first introduced, a huge opportunity opened up for web developers.  How so?  Anyone with HTML, CSS, and JavaScript skills could now apply such skills to developing apps, not just sites.  This is due to Microsoft supporting the development of WinRT apps with either C++, .NET, and/or JavaScript.  How different is it from writing a web site vs. an app?  If you are a web developer and you want to find out, be sure to look at the DevRadio episodes on developing for Windows 8 in half the time (4 minute videos) or the comprehensive “jump start” training series on HTML5 for Windows 8.  Moving onward, it will be assumed you already have a degree of experience with developing apps for Windows 8 using HTML5, and you are interested in what’s new or changed.

With Windows 8.1, consumers will enjoy a richer, more interactive experience. Correspondingly, the  APIs have been updated, providing developers either new or easier ways of doing things. A listing of the API deltas can be found at the Windows Dev Center for Windows Store apps.  Our focus right now is not to do a tedious overview of everything new.  Rather, we will look at what you need to do to get ramped up with some highlighted features as quick as possible.

Developer Requirements

To get started, you will need to install Windows 8.1 (preview is available for download) and Visual Studio 2013 (preview is available for download).  You should also highly consider registering at the App Builder site for relevant resources.

Visual Studio 2013 Updates

Creating a new project with Visual Studio 2013 is much like it was with Visual Studio 2012.  Consider the following screen capture of the “New Project” dialogue box:

vs13_new_project

First point of interest is a new template type named “Hub App” which allows for a hierarchical system of navigation. The template uses a new Hub control, and you can learn more about it if you download the Hub control sample. Regardless of which template type used though, let’s examine some core changes. 

WinJS 2.0

The source page of HTML files now target Windows 8.1, as indicated by the references to WinJS 2.0 as seen here:

<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0.Preview/css/ui-light.css" 
     rel="stylesheet" /> <script src="//Microsoft.WinJS.2.0.Preview/js/base.js"></script> <script src="//Microsoft.WinJS.2.0.Preview/js/ui.js"></script>

You will also see this visually in the solution explorer view.  When expanded, it is easy to see the resources being requested as seen here:

vs13_ref

Note that when you open a project created for Windows 8, Visual Studio 2013 will prompt you to determine if the project should now target Windows 8.1

Editor Enhancements

A pleasant enhancement to the JavaScript editor is the automatic completion of code blocks when typing the left side of the block.  For example, when typing a left brace { , the editor will pair it with a right brace } and auto-format along the way.  Other pairings include parenthesis, brackets, and quotation marks (single or double).

The editor will also highlight identifiers when selected.  For example, if a variable is declared with the name isAwesome, notice how the editor will highlight where else it is used:

vs13_id

Tiles

One more quick change to be aware of is found in the package.appxmanifest file.  When opening in Visual Studio 2013, you will find the Application UI tab where you can configure the images used for your apps tiles.  However, notice the new options as seen here:

vs13_logos

These new options introduce both a larger and smaller tile.  You should support these new tile sizes so that users of Windows 8.1 can easily organize their Start screen.  The example below shows the 70x70 in upper left, 150x150 in upper middle, 310x150 in the lower left, and the 310x310 on the right:

What Next?

So much could be next.  To some degree that will depend on the type of app you are developing.  The information covered so far is to enable a quick start to the development process.  By setting up the required environment and understanding a few of the changes in Visual Studio 2013, you can start coding as usual.  Look for deeper looks at specific features in the near future!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
2
2012

Feature Detection Script for CSS3 Selectors

If you are a serious HTML5|CSS3 developer, you have undoubtedly come across the amazing resource known as Modernizr.  Modernizr is an amazing suite of script functions that enable feature detection to provide intelligent rendering across the multiple browsers that do or don’t support the desired feature.

Recently I was in need of a specific feature detection in CSS3 that I realized was not in the latest version of Modernizr – the ability to detect support for CSS3 Selectors.  Some examples of new CSS3 selectors include:  ::selection, :root, :target, :not, :checked, :empty … just to name a few. With necessity being the mother of invention, I took it upon myself to create the script needed to do the job. 

Here is the script, and I look forward to any feedback Smile

// elsewhere in script use this way:  
// var result = Palermozr.isSelectorSupported(":root");
var Palermozr = (function () {
    function isSelectorSupported(anySelector) {
        var newStyle = document.createElement("style"),
                cssRule = anySelector + "{}",
                isSupported = false,
                styles,
                rules,
                selectorText;
        newStyle.type = "text\/css";
        if (newStyle.styleSheet) {
            styles = newStyle.styleSheet;
            if (styles.cssText) {
                styles.cssText = cssRule;
                if (styles.rules) {
                    rules = styles.rules;
                    if (rules[0].selectorText) {
                        selectorText = rules[0].selectorText.toLowerCase();
                        isSupported = selectorText.indexOf("unknown") < 0;
                    }
                }
            }
        } else {
            newStyle.appendChild(document.createTextNode(cssRule));
            document.body.appendChild(newStyle);
            isSupported = !!newStyle.sheet.cssRules.length;
            document.body.removeChild(newStyle);
        }
        return isSupported;
    }
    return {
        isSelectorSupported: isSelectorSupported
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
29
2011
css3 // html5 // script

What is the SSS in HTML5?

html5This will be the first of a series of blog posts to help someone new to HTML5 development.  The first item to address is:  What is meant by the term HTML5?  I like to think of it as “Triple S” or SSS.

  • Source
  • Style
  • Script

Source refers to the HTML markup itself, the tags.

Style refers to the inline styles and/or modules from CSS3.

Script refers to the development aspect of HTML5 with Javascript.

For an introduction to these terms in slightly more detail, please read the first article I co-authored with Daniel Egan.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML