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

HTML5 Apps 70-480

Elevate! Electrify!

image

Jeremy Foster and I had no idea what kind of response resulted from presenting our free training course to prepare for the 70-480 exam.  For example, who knew that our shirts (purchased from the Microsoft Store the day prior) would become so popular, people contacting both of us wondering where they could buy one?

That said, the real story is in the successful outcomes of those who watched the videos and then subsequently passed the exam.  Even more impressive to me personally is that some already have apps submitted to the Windows Store!  (Do you have an app in the store? If not, consider 30,000 reasons why you should submit your app now!)

A Jump Start to the Jump Start

I want to give a Matthew Hughes in the United Kingdom recognition for his outstanding coverage of this course.  He took meticulous, detailed notes on every topic.  I have organized his blog posts below:

Part 0    Getting Started

Part 1    Semantic Markup, Forms, Media and SVG

Part 2    Cascading Style Sheets (CSS)

Part 3    Advanced Layouts and Animations

Part 4    JavaScript Core Capabilities

Part 5    Manipulating the DOM

Part 6    Advanced Topics

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

Microsoft DevRadio: CSS3 Animations

To play video, hover above and press play button.

Abstract: win8genapp30
Michael Palermo is back for an episode and shows us how to implement CSS3 animations into Windows Store apps!

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

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

Microsoft DevRadio: Media Queries

To play video, hover above and press play button.

Abstract: win8genapp30
In today’s episode Michael Palermo will show you how to manage your programs to work in different layouts via Media Queries. If you need to know how to control what needs to be done in various layouts – Portrait, landscape, snap-view, etc. this short how-to video is just for you.

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

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

CSS3 for Windows Store Apps: Animations

CSS3 has brought much goodness to the web developer community.  The feature that potentially steals the show is CSS3 Animations – which can also be used when developing applications for the Windows Store via JavaScript.

If you are not familiar with animations, the name itself is practically self-explanatory.  Animations can deliver very appealing “eye-candy” in a variety of ways including object movement, resizing, transforming, fading, style changes, and much more.  Because animations have been around awhile, there is plenty of information out there to help you get started, such as the animations topic at the IE 10 Guide for Developers and Hands On: Animations on IE Test Drive.  Our focus here is more on how to use animations in the context of writing apps for the Windows Store.

Animations Simplified

A chronic worry when developing content for the web is how our creative work will render in multiple browsers.  For example, the following CSS rules define an animation for bringing an element in from above the screen:

@-webkit-keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
@-moz-keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
@-o-keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
@keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
#message {
             position: relative;
    -webkit-animation: drop-in 1s forwards;
       -moz-animation: drop-in 1s forwards;
         -o-animation: drop-in 1s forwards;
            animation: drop-in 1s forwards;
}

All of the rules above are reduced to the following when developing apps for the Windows Store:

@keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
#message {
     position: relative;
    animation: drop-in 1s forwards;
}

Why so much reduction?  When writing Windows Store apps, we are not worried about supporting multiple browsers.  Whatever standards work for IE 10 are all we need.  Granted, if you used the previous rules with all the vendor prefixes while creating an app - no error would occur, they would just be ignored.

Playing Animations

Animations are triggered as soon as they are defined.  In the previous example, as soon as the page with the element with and ID of “message” was navigated to, the animation was triggered.  Animations can be triggered from code as well.  Consider the following example:

@keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
.animate-drop-in {
    animation: drop-in 1s forwards;
}
#message {
     position: relative;
}

The rules above introduced a slight change from what we observed previously – the animation was moved to a class named “animate-drop-in”.  Assuming the element with an ID of “message” is not defined with the new class name, the animation will not occur.  However, we can trigger the animation in code as seen here:

message.onclick = function () {
    message.classList.toggle("animate-drop-in");
}

The click event handler for the “message” element toggles the class name.  Once the app sees the element is assigned to an animation (which is what the new class does), it triggers the animation.  The toggle method of classList returns a boolean value based on whether it added (true) the class name or removed (false) it.

If needed, you can respond to three events related to animations.  Here is the syntax for defining the handlers for each:

// animation started
message.addEventListener("animationstart", function (arg) { });

// animation iteration completed
// applies only when animation-iteration-count > 1
message.addEventListener("animationiteration", function (arg) { });

// animation ended
message.addEventListener("animationend", function (arg) { });

The above event handlers are handy and can allow a chain of complex animations.  For example, in the event handler for when an animation ends, you can add code to trigger a completely new animation.

Animations vs. Transitions

A close relative to animations is CSS3 Transitions, and those are covered in another post entitled CSS3 for Windows Store Apps: Transitions.  Since both of these technologies offer “animation” as the effect, you might wonder when to use one or the other.  With that in mind, take the following in consideration when trying to decide which is best:

Animations
  • Effect is played as soon as animation is defined, or programmatically
  • Multiple stages are possible, allowing more complex animations
Transitions
  • Effect is triggered when a targeted property value changes, usually due to a state change such as when a :hover is defined.  A targeted property value changed in code will also trigger a transition.
  • Syntax is much simpler, thus, effect is usually simpler than what can be done with animations.

Another point to think about is what the intent of each technology is.  Transitions (as the name implies) are really intended to provide a nice visual effect when something is changing state.  Animations can be used for anything pertaining to the logic of the application.

With Great Power…

Animations offer a great way to enhance the user experience.  However, too much of a good thing can become an annoyance. So be judicious with your implementations of animations.

It is an exciting time to be a developer with web skills.  Harness what you know and use it to great some great applications for the Windows Store.  Be sure to take advantage of all the resources available at Generation App!

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

CSS3 for Windows Store Apps: Transitions

CSS3-LogoWindows 8 brings in a new era of opportunity for the web developer/designer in that applications in the Windows Store can be written with “web” technologies such as HTML5, JavaScript, and CSS3. Creating a compelling user experience is an important aspect of a successful app, and CSS3 is a fantastic way to reach that objective.  This post will specifically address a great way to enable fast and fluid interactions in your app by using CSS3 Transitions.

If you haven’t been using transitions or know what they even do, then let’s start with a quick description:  Transitions allow content on the screen to change from one visual state to another in a gradual, animated way.  To learn more about the basics of transitions, check out the Transitions topic at the IE 10 Guide for Developers, and play with the Hands On: transitions on IE Test Drive.  The focus here will assume you know the fundamentals of transitions and want to how to use them when developing apps for the Windows Store.

Transitions from Web to App

Will you need to define transitions differently for apps than for web pages?  Technically, the answer is no. But you may not need to work so hard. For example, consider the following CSS rule:

.transit {
  -webkit-transition: all 0.4s;  
     -moz-transition: all 0.4s; 
       -o-transition: all 0.4s;  
          transition: all 0.4s; 
}

When developing for the web, we worry about web things – such as supporting multiple browsers. This is not a worry when developing an app for the Windows Store. This means you don’t have to riddle your CSS with all the vendor prefixes as seen above.  Therefore the above rule is reduced and far more simple to read and manage as seen here:

.transit {
   transition: all 0.4s; 
}

When a transition is defined, it specifies what properties are targeted for animation and for how long.  In the example above, the all keyword means all animatable properties.  A transition is triggered when any targeted property value changes. A common scenario where values are changed is when using CSS pseudo classes such as :active, :checked, :disabled, :enabled, :focus, :hover, :invalid, and :valid are in play.  Hovering is one of the most common uses of transitions, as seen here:

.box {
   background-color: #FFFFFF;
         transition: background-color 1s;
}

.box:hover {
   background-color: #FF0000;
}

The above example fades from white to red and smoothly back again when hovering.  Although hover effects are appealing, keep in mind that Windows 8 is an operating system designed to fully embrace touch screen devices.  Hovering works well with a mouse, but not with a finger.  One possible way to deal with this is seen here:

.box {
   background-color: #FFFFFF;
         transition: background-color 1s;
}

.box:hover, .box:active {
   background-color: #FF0000;
}


The subtle change above is adding the :active pseudo class if the targeted element is pressed down.  This may not be practical in some circumstances, but it at least involves use touch devices when using you app.

Transitions in View States

Another way transitions are triggered is by use of media queries.  Windows 8 applications can run in multiple layouts, and media queries can respond to layout changes by responding to the view state.  Here is an example of a style sheet shell with media queries for each supported view state:

/* shared css rules go here */

/* media queries for adapting to layout changes */
@media (-ms-view-state: filled) { }
@media (-ms-view-state: fullscreen-landscape) { }
@media (-ms-view-state: fullscreen-portrait) { }
@media (-ms-view-state: snapped) { }

It is useful to know that transitions can be triggered by layout changes because proper use of them can enhance the fluidity of the application.  For example, a switch to a snapped layout might require a change in font size.  With just a subtle transition, you can get the effect of a graceful move to snapped view and back.  This is demonstrated in the following CSS rules:

.subheader {
     /* recommended subheader size */
     font-size : 20pt;
    font-family: 'Segoe UI Light';
          color: rgba(255,255,255,1.0);

     /* subtle shrink|grow effect */
     transition: font-size ease 0.3s;
}

@media (-ms-view-state: snapped) {
    .subheader {
        /* recommended subheader size for snapped */
        font-size: 11pt;
    }
}

When the rules are implemented above, a switch in the application to a snapped position will create a simple shrink effect.  When switching out of snapped view, the text quickly grows.  Careful use and experimentation can lead to a polished user experience.

Transitions in Code

While changes to targeted properties of a transition can be defined in the CSS rules, another way to make property changes programmatically through JavaScript.

Transitions are always timed.  One way to interact with a transition in code is to respond to the transitionend event when it is complete.  To demonstrate, first look at the following CSS rule:

.demo-transition-end {
    transition: all 4s;
}

.demo-transition-end:active {
        background-color: #FF0000;
               transform: rotate(360deg);
}

Now here is an example of code that responds to an element on the page that is the target of a CSS transition rule above:

var box = document.querySelector("#box");
box.addEventListener("transitionend",
    function (args) {
        if (args.elapsedTime < 4) {
            box.innerText = "Keep Pressing!";
        }
    }
);

In the code above, an anonymous function is used as the event handler when the transition ends.  Note that the argument supplied to the function has an elapsedTime property, allowing you to determine how long the transition lasted.  Because the transition is triggered by the :active pseudo class, it will only reach 4 seconds if the user continues to press down on the element.  The code above detects the user let go too soon, and changes the text of the element to encourage the user to keep pressing.

To continue with this example, a new class rule will be added:

.vanish {
    transition-delay: 1s;
           transform: scale(0.01);
             opacity: 0.01;
}

Now an else clause will be added to the event handler, so that the complete code now looks like this:

var box = document.querySelector("#box");
box.addEventListener("transitionend",
    function (args) {
        if (args.elapsedTime < 4) {
            box.innerText = "Keep Pressing!";
        } else {
            box.innerText = "Let Go...";
            box.classList.add("vanish");
        }
    }
);

The code now responds if the transition reached a full 4 seconds.  If that happens, it changes the text of the element to “Let Go…”.  It also calls on the element’s classList property, and adds a new class named vanish.  The addition of the class rule will invoke another transition that will make the element shrink and disappear in 1 second.

The classList property allows you to easily change the the state of the class attribute, which will invoke a transition if any targeted property values change.  You can use classList for adding, removing, inspecting, or toggling class names in the attribute.  You can also simply change any of the elements style property values directly to also invoke a transition.

Transitions Beyond

Fans of CSS3 transitions will enjoy knowing that such powers are easily tapped when developing Windows Store apps with JavaScript.  You should also be aware that the WinJS.UI.Animation API contains methods for transitioning content as well.

Have fun coding, and be sure to benefit from all the resources available to you at Generation App!

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

Sneak Peek at CSS3 Course

Here is a sneak peek of my latest course at Pluralsight regarding CSS3:

[click here for a listing of all my courses at Pluralsight]

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

CSS3 Target Trick

In my previous post regarding a CSS Hover Trick, I was challenged in the twitter universe to do something similar with images, but with the click event.  Could this be done without JavaScript?  But of course.  What makes this possible is use of two CSS3 selectors:not, :target. This will not work in older browsers, so check out how to do feature detection in this post on detecting CSS3 selectors.

The code found below will make images appear based on what anchor tag was clicked without using  any JavaScript!  Here are screen captures to demonstrate the desired behaviors:

csstarget00
No anchor tags have been clicked

 

csstarget01
First anchor tag clicked

 

csstarget02
Second anchor tag clicked

 

csstarget03
Third anchor tag clicked
Shameless self promotion

 

Here is the code to make it all work!  To reproduce in your own environment, simply replace the images with your own!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS Target</title>
    <style>
        #csstarget ul { 
            margin:             0;
            padding:            0; 
        }        
        #csstarget li {
            list-style-type:    none;
            display:            inline;
            margin-right:       2em;  
        }
        img {
            width:              8em;
            height:             8em;
        }
        #images {
            padding:            3em;
        }
        
        /* hide unselected targets */
        #images img:not(:target) {
            display:            none;
        }
        /* display selected target */
        :target {
            display:            inherit;
        }
    </style>
</head>
<body>
    <article id="csstarget">
        <h1>CSS Target Trick</h1>
        <p>Click on any word to reveal an image...</p>
        <ul>
            <li><a href="#img01">CSS3</a></li>
            <li><a href="#img02">HTML5</a></li>
            <li><a href="#img03">Palermo4</a></li>
        </ul>
        <div id="images">  
            <img id="img01" src="images/css3logo.png" />
            <img id="img02" src="images/html5.png" />
            <img id="img03" src="images/palermo4_bw.png" />
        </div>

    </article>
</body>
</html>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
6
2012
css // css3 // code // javascript

CSS3 Colors–HSLA to RGBA

In my previous post on CSS3 Colors – RGBA vs. HSLA, I provided a script to easily convert RGB to HSL using inputs/outputs friendly to CSS3.  In this post, I provide the reverse script – converting from HSL to RGB.  The trailing “A” means Alpha (scale of opacity), and requires no conversion.

// elsewhere in script use this way:
// var result = Palermozr.hslToRgb(0,0,100);
// result.R // Red
// result.G // Green
// result.B // Blue
var Palermozr = (function () {
    function hslToRgb(h, s, l) {
        h /= 360; s /= 100; l /= 100;
        var r, g, b;
        if (s == 0) {
            r = g = b = l;
        } else {
            var l2 = l < 0.5 ? l * (1 + s) : (l + s) - (s * l);
            var l1 = (2 * l) - l2;
            r = hueToRgb(l1, l2, (h + (1 / 3)));
            g = hueToRgb(l1, l2, h);
            b = hueToRgb(l1, l2, (h - (1 / 3)));
        }
        r = Math.round(255 * r);
        g = Math.round(255 * g);
        b = Math.round(255 * b);
        return { R: r, G: g, B: b };
    }
    // helper function used above
    function hueToRgb(l1, l2, h) {
        if (h < 0) h += 1;
        if (h > 1) h -= 1;
        if (h < 1 / 6) return (l1 + (l2 - l1) * 6 * h);
        if (h < 1 / 2) return l2;
        if (h < 2 / 3) return (l1 + (l2 - l1) * ((2 / 3) - h) * 6);
        return l1;
    }

    return {
        hslToRgb: hslToRgb
    };
})();
    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