Category Archives: windows 8

Intel Ultrabook–First Impressions

 

One of the cool things about being in technology is that fact that you sometimes get to try stuff before it is on the market. It was cool a few years back when I was able to carry around a pre-release Windows Phone. Sometimes it doesn’t fit into exactly what I do for a living but this time it does.  I received an IvyBridge Ultrbook from Intel to review.  The reason I was excited was because it runs Windows 8, has a touch screen, and has a ton of sensors.  Although it is a prototype, it is a very slick device.

image

As you can see, it is very slimline and weighs about 3.5 pounds.  For me it hits that perfect size.  Light enough that is is not a bother to carry around but big enough that it is nice to actually develop on in short stretches.

image

It has a 13.3 multi-touch display that is just enough for my Starbucks programming sessions and the fact that it has 5 points of touch makes it great for working on and testing my Windows RT applications.  I have what I term generically other “Slim-line” laptops and for some reason most of them have a trackpad that is so sensitive that it makes it impossible to type using the keyboard.  The Intel Ultrabook’s keyboard worked great, the keys are light but have a nice tactile feel and I have not once inadvertently moved the mouse while typing, a big plus.

image

For specs, it has an Intel Core i7 , 4GB of DDR RAM and a 180 GB SSD hard drive. Two USB3 Slots, a mini-HDMI connector, a 1.5 MP WebCam,    It came preloaded with Windows 8 Release candidate but instead of wiping out the system, I decided to create a 90GB VHD and do a Boot To VHD.  I had to turn on virtualization in the Bios, but after that, it worked great.  I am sure I will reformat soon, but since I have been using the Boot To VHD in my Windows 8 Unleashed sessions, it was the fastest way to get me up and running and playing with the machine.  In addition, since this is a prototype machine, I am not really worried about running it through any benchmarks. As other reviewers have pointed out, the fan is a bit loud which can be a bit annoying but again, it’s a prototype.   What really gets me excited about working with it is the sensors that are available to me.

  • NFC
  • Accelerometer
  • Magnetometer
  • Gyroscope
  • Ambient Light Sensor
  • GPS

This will be a great machine for me to test out working with Sensors in my Windows 8 Development and I will do other posts to talk about my experiences working with them while I create Windows 8 RT applications that take advantage of them. I have already begun using VS2012 and another SDK which we will not speak of on this machine and have been very happy with performance.

Happy Programming

Daniel Egan – The Sociable Geek

<disclaimer>I received the Intel Ultrabook (pre-release) for free in the hope that I would write about it in this blog. I only recommend things I personally endorse and would otherwise recommend without further consideration. I’m disclosing this in accordance with the FTC’s Guides Concerning the Use of Endorsements and Testimonials in Advertising. I also cleared it with my employer and I made sure the agreement said that my review would be my honest opinion. This review reflects my opinion alone, and doesn’t necessarily reflect the views of my employer or anyone else.</disclaimer>



Windows Phone Windows 8 Resources

I have done this before in previous posts but I wanted to have an easy way to point developers to great resources when you are building Windows Phone or Windows 8 applications. If you ever want to get back to this page you can just go to http://bit.ly/wpw8resources  (Standing for Windows Phone Windows 8 Resources). I will add to this page often and keep building on it. In addition, I will have one set or resources going forward and will only notate when it is specific to either.

Icons

Modern UI Icons (FREE) http://modernuiicons.com/ 

Design Help

MetroGridHelper. A visual guide overlaid on your application – http://www.jeff.wilcox.name/2011/10/metrogridhelper/

MetroGrid Component for Windows Phone (Based on code above)  http://www.windowsphonegeek.com/articles/MetroGrid-component-for-Windows-Phone

Advertising

Advertising sizes available for Windows 8 using Microsoft Advertising http://msdn.microsoft.com/en-US/library/hh506361(v=msads.10).aspx

 

Transferring Phones

Free Contacts Transfer application for Nokia phones

http://www.markspace.com/welcomehome/nokia/



Modifying Live Tiles in a Background Process

LiveTiles_thumb7_thumb1_thumbIf you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting
  2. Working with Live Tiles Locally
  3. Rotating Live Tiles to keep interest
  4. Modifying Live Tiles in a Background Process (This Post)
  5. Using Azure and Push Notifications with Live Tiles

Continuous updating with background processes

In the previous posts we talked about the best practices for what to put on live tiles and also how to use the TileUpdateManager to change the tiles.  In this and the Using Azure and Push Notifications with Live Tiles we will discuss how to make changes to your live tiles when the user is not using your application.

As we learned in the last post, rotating your tiles is a great way to keep visual interest in your application or game but if the user is busy and does not have time to use your application for a week or two, the tiles that you updated will start to get stale quickly.  Imagine the Sports, News, or Stocks application that has week old data.  Updating your tiles with a background trigger is one way to keep it fresh.

We are going to use the same project we used for the last post. If you did not create it in the last post and want to follow along, you can create a new project create a new WideLogo (See this post to find out how).

Creating Rotating Live Tiles from a Background Trigger

1. In the Solution Explorer, right click on the Solution (NOT Project) and select Add à New Project

2. Select the Windows Runtime Component , name it TileBackground and click OK

3. The Class1.cs file from that project will open, for simplicity we will leave it named Class1 (you would want to rename this in a real project of course)

4. At the top of the Class1.cs file, add the following Using statements

using Windows.ApplicationModel.Background;using Windows.Data.Xml.Dom;using Windows.UI.Notifications;using System.Net.Http;using Windows.Data.Xml.Dom;using System.IO;

5. Next, have class one implement the IBackgroundTask interface and delete the thrown exception that is generated. When you are done, your class should look like the image

below.

image

6. Above the Run method add the follow declaration for TileUpdater

TileUpdater tileUpdater;

7. Underneath the run method, add the AddTileNotification Method.  This is the same code we have used in the other posts… only now it is going to be run in a background process.

private void AddTileNotification(string content, string tag)        {            var templateType = TileTemplateType.TileWideSmallImageAndText04;            var xml = TileUpdateManager.GetTemplateContent(templateType);

            var textNodes = xml.GetElementsByTagName("text");            textNodes[0].AppendChild(xml.CreateTextNode("A message"));            textNodes[1].AppendChild(xml.CreateTextNode(content));

            var imageNodes = xml.GetElementsByTagName("image");            var elt = (XmlElement)imageNodes[0];            elt.SetAttribute("src", "ms-appx:///_Images/Coffee03.jpg");

            var tile = new TileNotification(xml);            tile.Tag = tag;

            //tile.ExpirationTime = DateTimeOffset.Now.Add(new TimeSpan(0, 0, 20));

            tileUpdater.Update(tile);        }

 

8. Now we want to add something a little different to our project.  Since you would want to pull data from somewhere outside of your project, we will simulate this by pulling a random quote from the IHeartQuotes API to show on our tile. Add the two methods below to your class. (These are the same ones we used previously with the Yahoo API  (Since this post is about the tiles, we will not comment on the code below, we will do another post on calling REST APIs in the near future)

private async void GetData()        {

            String _url = "http://www.iheartquotes.com/api/v1/random?format=json&max_lines=2&source=joel_on_software";

            var _Result = await CallService(new Uri(_url));            if (_Result != null)                AddTileNotification(_Result.quote, "tag new");

        }

        private async Task<RootObject> CallService(Uri uri)        {            string _JsonString = string.Empty;

            // fetch from rest service            var _HttpClient = new System.Net.Http.HttpClient();            try            {                HttpResponseMessage _HttpResponse = _HttpClient.GetAsync(uri.ToString()).Result;                _HttpResponse.EnsureSuccessStatusCode();                _JsonString = await _HttpResponse.Content.ReadAsStringAsync();            }            catch (Exception ex)            {

                string test = ex.ToString();            }

            // deserialize json to objects            var _JsonBytes = Encoding.Unicode.GetBytes(_JsonString);            using (MemoryStream _MemoryStream = new MemoryStream(_JsonBytes))            {                var _JsonSerializer = new DataContractJsonSerializer(typeof(RootObject));                var _Result = (RootObject)_JsonSerializer.ReadObject(_MemoryStream);                return _Result;            }

        }

 

9. Next, we want to add the code we want to run in the Run method. Add the following code INSIDE the Run(IBackgroundTaskInstance taskInstance) method.

BackgroundTaskDeferral deferral = taskInstance.GetDeferral();

            tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();            tileUpdater.EnableNotificationQueue(true);

            AddTileNotification("Hey Everyone... Whats up", "tag1");            AddTileNotification("Come see the new coffee shops", "tag2");            AddTileNotification("I need caffine", "tag3");            AddTileNotification("I drink coffee therfore I live", "tag4");            AddTileNotification("Caffine Drip please", "tag5");

            GetData();            deferral.Complete();

 

10. Now all we have left is to add the class that the json that is returned will be deserialized into. We once again used json2csharp.com to create a class. Add the code BELOW Class1 inside the Namespace bracket. (We could have put this in a separate file but will do this for simplicity.

public sealed class RootObject{    public string json_class { get; set; }    public IList<string> tags { get; set; }    public string quote { get; set; }    public string link { get; set; }    public string source { get; set; }}

 

That completes the project that will run in the background with the trigger is fired.

Call your background trigger from your application.

Now we are going to set up our project to allow background triggers and call the trigger from our project.

1. Right click on the References folder in your windows 8 project and click on Add Reference.

2. When the Reference Manager comes up, Select Solution and Projects on the left and click on the TileBackground project, and then click on OK

image

3. Now, double click on Package_appmanifest in the solution exploer and open it to the Declarations Tab

4. From the Available Declarations dropdown select Background Tasks

5. Click on ADD

image

6. Under Properties (on this page) check the Timer Task, and add the text TileBackground.Class1 to the EntryPoint section (This is the Namespace and Class for our

background process which we just referenced)

image

7. Now click on the Application UI tab (should have a red x next to it) and scroll down to the Notification section.

8. Change the Lock screen notification dropdown to Badge

9. Change the Badge logo to Assets\<TheNameOfYourLogo>.png

YOU WILL NEED TO CREATE THIS IMAGE.  Please see this post on how to modify an image.  The image size will need to be 24 X 24. The name of your logo may be different, obviously change this to what you named your logo.

image

10. Open up App.xaml.cs (from solution explorer) and add the following using statement to the top of the file.

using Windows.ApplicationModel.Background;

 

SPECIAL NOTE :  We are placing this in the App.xaml.cs file for simplicity.  This may or may not be where you want to launch your background task. Other options are the OnNavigatedTo method of your first page.

11. Now add the RegisterBackgroundTasks() method to the class. This calls the BackgroundTaskBuilder and adds our trigger to the OS.

private void RegisterBackgroundTasks()        {            BackgroundTaskBuilder builder = new BackgroundTaskBuilder();

            // Friendly string name identifying the background task            builder.Name = "BackgroundLiveTiles";            // Class name             builder.TaskEntryPoint = "TileBackground.Class1";

            IBackgroundTrigger trigger = new TimeTrigger(15, true);            builder.SetTrigger(trigger);            IBackgroundCondition condition = new SystemCondition(SystemConditionType.InternetAvailable);            builder.AddCondition(condition);

            IBackgroundTaskRegistration task = builder.Register();

            //YOu have the option of implementing these events to do something upon completion            //task.Progress += task_Progress;            //task.Completed += task_Completed;        }

NOTE: Make sure you named your project and class with the same case sensitivity as I instructed, TileBackground.Class1 , if you did not you will need to change it in the code above. Since it is just a string you will NOT get an error here.

12. Finally, make a call to the RegisterBackgroundTasks() method inside the OnLaunched()

Method as shown below.

image

That is all that is needed to set up our trigger to change out live tile in the background while we are not running.

How to Run your background trigger during debug.

Now we are going to show you how you can get your trigger to run while you are debugging your application.

1. Build and run the project

2. While the project is still running, switch back to Visual Studio

3. From the Suspend dropdown menu (if you set everything up correctly) you will see your

background process trigger. Select this and it will fire your trigger.

image

If you don’t see this toolbar, in Visual Studio, go to View –> Toolbars and make sure Debug and Debug Location are checked.

4. If you now look at your tile on the start page, it should show you rotating quotes, including one from the quotes service as below. (Quotes will vary)

image

 

That’s it for this post, in the next post we will show you how to use Azure and Push notifications to accomplish this same thing.

Happy Programming

Daniel Egan – The Sociable Geek

 

 



Rotating Live Tiles to keep interest

LiveTiles_thumb7_thumb1If you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting
  2. Working with Live Tiles Locally
  3. Rotating Live Tiles to keep interest (This Post)
  4. Modifying Live Tiles in a Background Process
  5. Using Azure and Push Notifications with Live Tiles

Change the Scenery

In addition to inviting them into your application, you want to make sure that the information on your live tile does not become static. While it may engage them once, fresh content is important to keep them engaged.  You can rotate up to 5 different tiles at a time. To begin, we will use the project we created in the last post (if you don’t have that, you can create a new project and follow along)

This time we will be adding the code that goes behind the Rotate Tiles button.

image

Double click on the Rotate Tiles button to get to the button click handler. Add the following code inside the click handler.

AddTileNotification("Title 1", "This is the message for number 1","1");AddTileNotification("Title 2", "This is the message for number 2", "2");AddTileNotification("Title 3", "This is the message for number 3", "3");AddTileNotification("Title 4", "This is the message for number 4", "4");AddTileNotification("Title 5", "This is the message for number 5", "5");

 

For now, you will get an error stating that AddTileNotification does not exist.  We will add that shortly.  First add the following declaration to the top of your class.

TileUpdater tileUpdater;

 

Now in the constructor add the following code

tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();tileUpdater.EnableNotificationQueue(true);

 

This will new up an instance of the TileUpdateManager and will enable notification queuing.

Now lets add the AddTileNotification method.

private void AddTileNotification(string title, string message, string tag){    var templateType = TileTemplateType.TileWideSmallImageAndText04;    var xml = TileUpdateManager.GetTemplateContent(templateType);

    var textNodes = xml.GetElementsByTagName("text");    textNodes[0].AppendChild(xml.CreateTextNode(title));    textNodes[1].AppendChild(xml.CreateTextNode(message));

    //IMPORTANT if the image is not found, this update will fail SILENTLY    var imageNodes = xml.GetElementsByTagName("image");    var elt = (XmlElement)imageNodes[0];    elt.SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");

    var tile = new TileNotification(xml);    tile.Tag = tag;    tileUpdater.Update(tile);

}

 

Since we already covered most of this code in the previous post (http://thesociablegeek.com/windows-8/livetiles/working-with-live-tiles-locally/) we will just discuss what is different

DON’T PAST THIS CODE.. IT IS ALL ABOVE, THIS IS JUST FOR DISCUSSION

If  we look at the method signature we can see that we are taking in a title, message, and a tag,

private void AddTileNotification(string title, string message, string tag)

 

The title and message will be used to hydrate the xml we are using for the tile (again see last post for more detail).  Since you are only able to rotate 5 tiles at any given time, the tag property allows us to have a reference to the tile we want to replace.  If you don’t use the tag property, it will replace the first tile that was added (FIFO). You can see where we apply the tag here

tile.Tag = tag;

 

If you run the project and click the Rotate Tiles button, you can see that it will rotate through all of the tiles we created. If you want to replace a tile, add another button to the form and add the following to its button click handler.

AddTileNotification("Title 6", "This is the message for number 6", "2");
This will replace the second tile (tagged as 2) with this tile.
That’s all there is to it, there is of course added complexity if you want to create different types of tiles (which you can). You would just need to modify your method to take into account the different Tile Types and adjust the needed data accordingly.
In the next post, we we look at how you can do all of this from a background process so that changes can be made while the user is not using the program.
Happy Programming,
Daniel Egan – The Sociable Geek


Working with Live Tiles Locally

 

LiveTiles_thumb7If you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting
  2. Working with Live Tiles Locally (This Post)
  3. Rotating Live Tiles to keep interest
  4. Modifying Live Tiles in a Background Process
  5. Using Azure and Push Notifications with Live Tiles

Working with the TileUpdateManager

To show you the concepts of working with tile locally, we will be using a very simple application which consists of a simple form and two buttons.

image

In the Change Tile button click we will add the following code. First we want to make a reference to the template we would like to use for our tile.

var templateType = TileTemplateType.TileWideSmallImageAndText04;
var xml = TileUpdateManager.GetTemplateContent(templateType);

You will need to add the following using statement to the top of your page.

using Windows.UI.Notifications;

So what is the content we are grabbing with the TileUpdateManager? Its an XML document. In order to see what the tile we are working with looks like, place your cursor under TileTemplateType and hit the F1 key on your keyboard. This will bring you to the TileTemplateType enumeration documentation.  http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype(v=win.10).aspx

as you can see from the code, we have chosen to use TileWideSmallImageAndText04 for our tile.  If we look on the page, you can get a reference image for what will be rendered.

image

This is helpful but since the tile utilizes XML to render the tile, we need to know the XML Representation of this tile. If you scroll up to the top of the TileTemlplateType enumeration page we referenced above you will see a link to the Tile Template Catalog which will bring you here http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx.  If we search for our TileWideSmallImageAndText04 you will see the image along with the XML representation of that image.

image

We can see that this tile has one Image element and two text elements, so in order to modify them we need to get a reference to those nodes.  Add the following code below the template code you just pasted (in the button click)

var textNodes = xml.GetElementsByTagName("text");textNodes[0].AppendChild(xml.CreateTextNode("A message"));textNodes[1].AppendChild(xml.CreateTextNode("This text should wrap on max 3 lines, see if this fits on the tile!"));
The following code looks for any  xml nodes in our template that are named “text”.  Since we know from the template that there are two, we just add the text we want to show to each of those nodes as shown above.
We also need to find and modify the Image node in the XML.
var imageNodes = xml.GetElementsByTagName("image");var elt = (XmlElement)imageNodes[0];elt.SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");
And since we are using XmlElement we need to add the following using statement
using Windows.Data.Xml.Dom;

 

Just like the text elements, we know there is only one image node so we set its “src” to an image we have in our project.
IMPORTANT NOTE:  If it does not find the image, the WHOLE thing will fail silently. I repeat, it will fail SILENTLY, so you will not  get an error, it will just not show up.
Now we use the TileUpdateManager to update the tile to the xml we just specified.
var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();var tile = new TileNotification(xml);tileUpdater.Update(tile);

 

Before this will work, since we are using a Wide layout, we need a Wide Logo.  Right click on the Logo.png found in your Assets folder and select OpenWith.
From the list select Paint (or another graphics program of you choice)
image
When paint opens, click on the resize button and set the size to 310 X150 (in pixels) while unchecking the “Maintain aspect ratio” checkbox.
paint
Save the image back into the Assets folder and call it WideLogo.png.
widelogo
Make sure you include it in your project (Click show all files, right click on WideLogo.png and select include in project)
image
Next, double click on your Package_appmanifest file in your Solution Explorer and modify the WideLogo section to point to your image.
image
Run your project and click on the button.  When it completes, return to your start screen.  Your live tile should show you the image and two text nodes you inserted.
image
As talked about in our last post, you would want to repeat this for a small tile layout so that you still can get a dynamic tile even when it is small.
That is it for basic tiles.  In the next post, we will talk about how to rotate 5 different tiles to keep your users interested.
Happy Programing
Daniel Egan – The Sociable Geek


Creating a live tile that is engaging and inviting

LiveTilesIf you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting (This Post)
  2. Working with Live Tiles Locally
  3. Rotating Live Tiles to keep interst
  4. Modifying Live Tiles in a Background Process
  5. Using Azure and Push Notifications with Live Tiles

 

Getting the Shelf Space

image

In almost every business endeavor, placement is key.  Take a supermarket for instance, if you walk through the aisles, you will notice that the “Big Brands” are located on the shelves that are eye-level.  This is the prime placement for consumers. As a shopper, your eyes will naturally go to this level and a majority of you will buy the items located there. This is the same for any of the app store / marketplaces for your devices.  Most consumers will buy one of the top 25 apps in any of the lists (eye level).

This  holds true for placement on your Windows 8 start screen.  You are more than likely to use applications or games that are on the initial view of your start screen.  And since the consumer is the one that decides on this placement, as opposed to the supermarket, there is no way you can pay to be in this prime real estate.  To be in this space, you must Engage, Invite, or Entertain the user.

image

Give them just enough

Although technically speaking, when you include an image for your tile when you create your project, it is not LIVE unless you make it live.  In the next post, Working With Live Tiles Locally,  we will discuss the HOW to add data to your tile, in this post, we are going to discuss the WHAT you should put on your live tile.  The dictionary defines Engage as : To attract and hold the attention of; engross.   So to attract the attention of the user, you first need to decide which tile template you would like to use. There are 45 different types, which you can find here http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype(v=VS.85).aspx

image

The layout you select depends on the information you want to deliver. From a full image, to all text and 43 more layouts in between, you have the ability to customize it as you see fit.

Your live tile should say “Click Me”. Not in the literal sense of course, but the information you give the user should float on the line of giving them enough information to pique their interest, but not too much so that they never go inside your application.

image Take the Weather application for example, if we look at its Live Tile we can see the temperature, whether or not it is going to rain, if it is cloudy, and the highs and lows for the day.  Unless I need a weeklong forecast or the weather in a location I may be traveling to, I will not be going into the Weather application too often.

image

On the other hand, the News application shows me a picture with just the title of a story. If that story piques my interest, then it serves the purpose of engaging, and Inviting me back into the application.  It is a fine line between the two of them, so be aware of how much information you a presenting on your tile.

 

SPECIAL NOTE:  The user must go into your application at least once in order to see the “LIVE” tile. Otherwise they will only see the image that you packaged with your application. This is because the application needs to run at least once to be able to call the tile API either locally or from push notifications.

Change the Scenery

In addition to inviting them into your application, you want to make sure that the information on your live tile does not become static. While it may engage them once, fresh content is important to keep them engaged.  You can rotate up to 5 different tiles at a time.

For games, you will want to remind them to keep playing the game.  You can remind them of games in progress, achievements they have won, or if it is a turn by turn game, you can alert them that it is now their turn.  For example, Minesweeper below shows the last achievement I obtained. This could also be used to show the next level to try for.

ms1ms2ms3

Solitaire, on the other hand, shows the user’s percentage of wins and losses. Although I would be careful with this one, since it might discourage a bad player from having the live tile on their main start screen, thus removing you from the prime real estate. This goes for leaderboards as well. If a player is not in the top 10, do they really want to see who is?  Individual high scores and achievements are better motivators, you can even entice them by adding text to the tile like “Come and try to beat your high score of :” <High Score Here>.  Remember, this is your chance to be creative.

Sol1Sol2Sol3

I think the CW application, on the other hand, does a great job of giving relevant information to the user. This not only helps them with driving people into the application, but also reminds them to turn on their TV and watch the program.

CW1cw2

For the CW application, it is quite easy to decide what to show.  If someone downloads the application, it can probably be assumed that they watch the channel, but for something like the sports application, it may be hard to pinpoint the interest of the user (Unless you ask for it).  In that case, having multiple tiles show different information lets you capture a wide array of interests. You have the ability to rotate up to five different tiles.Sports1Sports2Sports3

You will notice in the sports application, it rotates between and image and just text.  That transition from text to image is an eye-catcher. If you are looking at the screen you can’t help but notice it. Keep that in mind while you are designing your tile.

I like to describe the Windows 8 Start Screen as a Glanceable Architecture.  Be careful to make sure that your information can be viewed at a glance.  As you can see below, two of the live tiles do it right, but the third one is a mess. Not only does it have an image of text (???) but the text below it is an almost unreadable URL.  Be bold in your live tiles. Give as much impact in as little text as possible.  The image should draw them to read the text.

Other1SU2SU3

The one thing that might not be apparent in all of the examples above, is that they ROTATE.  This is important, the rotation causes change, and the change draws the eye. But subtlety is the key. We are not talking about the glitter fueled pages of the old MySpace, but gracefully attracting the attention of the user.

Size Matters

If you looked at the chart of the 45 different templates available, you saw that there were two standard sizes. a 150 X 150 Logo and a 310 X 150 Wide Logo.

size1size2size3

As we just noted above, if the user places you in the beginning of their start screen, you want to take advantage of this by presenting as much information as possible. By default, if you include a Wide Logo in your application by providing an image in your application_manifest file, when your application or game is installed, it will place the Wide Logo on the start screen (at the end).

image

The wider tile allows you to show more information. It is equally important to understand that the user has the ability to change the default live tile to the smaller live tile, in addition to turning off the live tile or unpinning it completely.

image

It is up to you as the developer to make sure that you create live content for the tiles in BOTH sizes.  As you can see in the images below, the Solitaire game continues to change the image, although they decided to drop the statistics. This most likely is due to the smaller real estate, which makes the amount of data they wanted to show difficult to read.  Remember, you want them to be able to see it in a glance.

smallsol1smallsol2smallsol3

In contrast, the StumbleUpon application did not implement a smaller live tile, while the CW did, showing the next important show.

image

 

Update From the background

To achieve the fluidity that comes from constantly changing information on your live tile, it is highly recommended that you update your live tile from outside your application. In other words, change the tile while the user is NOT using your application or game, to GET them to use your application or game.  In the next few posts in this series, I will show you how to do this.

Happy Programing

Daniel Egan – The  Sociable Geek



Install Windows 8 From USB

If you want to install the Windows 8 Developer Preview from a USB, you can follow the instructions below.

 

Download the Windows 7 USB/DVD Download Tool [USB Download Tool]

 Download Windows 8 Developer Preview from Windows Developer Center. Make sure you are downloading the iso image.  If you are not sure  if your processor is 32-bit or 64-bit ready, getthe 32-bit .iso file.

Insert a USB drive into your computer. (It must have 8GB or greater storage capacity ).

Install the Windows 7 USB Download tool you downloaded from the MS Store

 

image

 

Launch Windows 7 USB/DVD Download Tool you installed.

When it launches select the ISO file you downloaded earlier by clicking on “Browse”.

 

 

image

Select the USB Drive you inserted earlier. It must be 8GB or over and everything will be erased.

 

image

 

image

 

Let it run its course….

 

image

 

Once the tool is done, you will need to restart your PC with the USB plugged in.

On start up, you will need to enter the BIOS utility of your computer and boot from the USB. This is different for different computers.  If you need help, just do a  search for Entering Bios for your specific PC.  In BIOS you need to make USB one of the bootable drives.

Once booted from the USB drive; follow on-screen instructions to install Windows 8 Developer Preview.