One of my favorite steps in the app development lifecycle is the creation of the artwork. I'm not stellar at creating original artwork, but I definitely recognize when things look just right, and sometimes I stumble upon it. I must also have a little bit of marketing in me, because it's my constant effort to brand things.

The artwork and branding is important, because an app developer must live in a constant state of capturing the user amid so much noise. An app needs to say "here's precisely what I do and how it adds value to your life". It takes a lot of design thought and effort to cut through the noise and reach your audience.

Good messages to communicate are: clean, simple, creative, elegant, and fluid.

I'd like to walk you through my process of creating artwork for an app called Everyview. Everyview is webcam viewer that attempts to implement well the design principles of Windows 8. It's intended to feel like a breath of fresh air. There are plenty of apps for viewing web cams and it's nothing that can't be done in the browser too, but it's seldom a consolidated and elegant experience. As of this writing, Everyview is not yet published to the Windows Store, but by the time you read it, it may be. Try searching for Everyview.

My artwork for Everyview started with the creation of a symbol. The symbol had to represent every image that could possibly come through the eye of a camera and so I simply chose to represent the eye of a camera. I didn't want to make the app subject to aging by choosing a specific camera though, and I didn't want to specify a still camera or a video camera. So I created a camera lens. The icon doesn't determine absolutely that you're looking down the barrel of a DSLR, an amateur video camera, a high-end video camera, or any other specific model. It's an agnostic character of a camera.

Looking into the eye of a camera invokes a bit of a "live" feeling, as if you're on the air. I chose not to embellish the icon with a lot of gradients and or other attempts to make it look more realistic. As long as it says "camera" to the user, that's enough. I did, however, ad a lens glare that identifies it without doubt as a camera lens.

Let me show you how I created this image.

I used CorelDRAW because… well, because I always use CorelDRAW. Use your graphics package of choice, but don't restrict yourself to a bitmap editor. Creating images in a vector-based graphics package has serious benefits and will make exporting to the various required app graphic sizes a breeze. Creating images in a bitmap package will inevitable find you needing a size larger than what you designed for. I recorded a primer on using CorelDRAW and you can access it at http://aka.ms/coreldrawprimer.

Before I show you how I created that image, let me show you how I set up CorelDRAW for creating images for Windows 8. Choosing File | New in CorelDRAW by default will start you out with a document the size of a piece of paper. CorelDRAW is very good at creating artwork for print, but we're concerned here more with pixels than we are with inches, so let's change the defaults and save it for future use.

I created a preset called Win8 App that uses the base Windows resolution of 1366 x 768 pixels. I also chose a color mode of RGB since the results are to be rendered to a screen rather than a printer. When you're working with documents of a designated pixel width/height, the resolution I mostly irrelevant.

If you'd like a nice place to start, try downloading the template I created at http://codefoster.com/w8tiletemplate.

Now, with a new document, we can go about creating our camera lens graphic.

Creating the lens graphic

Create a series of concentric circles like so. You do this by creating the largest and then resizing it with the CTRL key held to resize about the object's center and hitting the right mouse button when you have your next circle to create a copy.

Use the second largest to trim the largest by clicking first the second largest and then holding shift and clicking the largest. Then hit the trim button on the toolbar. Then delete the second largest circle. Setting the fill color of all objects to black and removing the outline color should leave you with something like this…

That's nice and simple and we have only to create the lens glare, which is only slightly harder than what we've done so far.

Make another couple of circles inside the smallest. I like to give them a red outline (right click on red from the color palette) while I'm working so they're easily discerned.

When you draw an ellipse (in this case a circular ellipse) in CorelDRAW, you have an ellipse, which is different from a custom curve. Ellipses have the property that you can grab their little vertex using the shape tool and drag to reduce the ellipse to an arc. Use the shape tool (F10) to do just that and work your way to something like this…

And then use some trimming and intersecting to end up with this…

Designing the tiles

Now it's time to design yourself some tiles. At a minimum, you'll need a standard app tile (150 x 150), a small logo (30 x 30), a store logo (50 x 50), and a splash screen (620 x 300). Additionally, you can design a wide logo (310 x 150) and some additional promotional images in case the Store finds your app worthy of being featured. It's recommended that the wide logo only be used if you're going to implement a live tile.

Let's start with the main app tile. Here's what I came up with for that…

Obviously, the tile incorporates the symbol we just created, but I also add a stylized app title below that. I chose a fairly bold font, condensed it, used different colors for the words and even shoved them together and created a little notch. Little design choices like this are somewhat arbitrary, but will end up becoming your brand and how people recognize your app. Finally, I added a soft gradient behind the entire title. You have to be careful with gradients in modern apps, but a shallow, gray gradient here seems to add a sort of dreamy, modern, cloud feel to the app.

Next, I'll elaborate a bit on the standard logo design when creating the wide logo and the splash screen which I tend to make rather similar. Here's what I came up with.

Now with more horizontal space than vertical, we stretch the brand elements out left to right and I like to add a little subtitle that describes without a doubt what the purpose of the app is – it's a webcam viewer. Like the notched v in view, I notch the E with the camera lens and keep all of the graphics tight and bold.

The last step is the creation of the store and small logos.

The Store logo

The store logo is used for your apps dedicated detail page in the Windows Store. It's common practice to just shrink the app tile down from 150 pixels to 50 and call it good, but that's unfortunate because it's rare that the app's main tile will look so good at this size. Take a look at the Bing app's Store logo captured from its page in the Store…

You want this image to be even simpler than the main app tile, to use most of the 50 x 50 pixel space, and to have a transparent background.

For my Everyview app, I stuck to the basic, original symbol. In CorelDRAW if you want to render something out a certain size even if the elements inside don't quite fill up that size, you just create a bounding rectangle the size you want and then give it no fill and no outline. I have rendered this bounding box orange below for visibility only. To export this image, you simple set the bounding box's outline color to none (invisible), select the entire group (bounding box and symbol together), and then export (CTRL + E) it.

Here's how that would be rendered, however.

Notice a few things about this:

• The image has been rendered to pixels custom made for the export size chosen (it could be rendered absolutely huge and would still look great)
• The bounding box is not visible, yet it is responsible for the overall size and shape of the exported image
• The background is transparent (designated by the checkerboard pattern) but the lens glare is always white
• The transparency is 24-bit which means it has various levels of transparency around the edges to make it blend perfectly with the background
• There is a little bit of space around each edge of the symbol
• The symbol is large enough to capture all the quality we can in this restricted space

The small logo

The small logo is used to represent your app when the user semantically zooms out of their start screen. Try it and see.

You can use the exact same techniques to create the small logo as you did for the Store logo. The small logo (30 x 30 pixels) is even smaller than the store logo (50 x 50 pixels) so it becomes that much more important to be intentional about simplifying your image.

That's as far as I'll take this for now. Of course, you would continue your design effort into the app itself so that the entire effort is unified and consistent.

I'd like to point out one of the advantages to Microsoft design principles that ends up being highlighted by the content of this article. No part of the splash screen or the tiles or even the app itself are contributed to by Windows. The entire space falls under the responsibility of whoever wears the design hat in your organization (even if you are your organization and you wear all the hats!). The app tiles as well as the app's main design surface because a truly empty canvas and 100% of the pixels are there to deliver your brand, deliver your functionality, and delight your user.

Have fun with this. It's fun stuff for sure.

In case you haven't heard, Microsoft has an incentive going on right now where any app you create, you can get $100 for. That's not bad considering how easy it is to make an app. Well, not all apps are easy. Some apps take quite a substantial bit of time, but if you're just trying to get a good app into the Windows Store quickly (like say for $100!) there are some tricks you should know. There's a template at w8templates.codeplex.com, for instance, that you can customize with a few search terms and RSS feeds and in a matter of minutes, you've got a data and media rich app all about the topic of your choice.

I just made an app using this template. It's called The Sailing App. One of the tasks you'll have to complete if you go down this road is to create your own graphics for the app tiles, splash screen, etc. Well, I don't know about you, but I'm a big fan of CorelDRAW, so I made a template and I'm posting it here for you. By the way, if you'd like your very own free copy of CorelDRAW X6 Essentials, just join a ZERO260 event. We're giving them away.

Here's that template. Have fun!

App Tiles Template.cdr (39 kb)

I received a question that I'd like to turn into a blog post for the benefit of the masses. I've gotten this question a number of times in the past.

Is it possible to do push notifications to all users/only a specific user/only a specific set of users?

The answer to all three questions is yes.

Push notifications are performed by Microsoft's Windows Notification Service (WNS). It's a server in the cloud somewhere, so obviously if it's going to send a push notification to a user's device, it's going to have to have some identifying information. Specifically, it needs to know the unique device and the unique user. A device can be used by multiple users and users can use multiple devices, so the combination of the two is essential. This identification is handled by something called a channel URI.

Your app gets a channel URI from the Windows API. Your app says (usually right when your app starts) "Hey, Windows, can I have a new channel URI?" Windows comes back to the app with a channel URI that is good for 30 days. From that point on, you (the app developer) is responsible for storing that channel URI value and later retrieving it to communicate with that specific user/device.

So, to answer this question, we need to talk about the recommended strategy for managing these channel URIs. Fundamentally, you need to store the channel URI along with an optional association with the user (assuming you've authenticated the user and have an ID) and an optional association with the current device (assuming you've generated a device identifier). As long as you have stored this association, you'll be able to target your user, your user's device, or the combination thereof.

Here's how I recommend you do it (roughly).

The first time your app starts, you generate a device ID (a GUID) and store it in local storage (not roaming!). Look for this ID on each app start and don't regenerate it if one already exists.

Each time your app starts, request a new channel URI. They're good for 30 days, but you don't want to implement reuse logic when there's no reason. Fetching a new channel URI is an easy and cheap operation.

Each time your app starts, authenticate your user.

Store the channel, user, and device IDs in Azure Mobile Services (or another service if you're okay with not using the coolest backend service on the planet) in tables. For ultimate flexibility, create three independent tables and use foreign keys to keep the relationships. For ultimate ease where you can assume one user has one device and one channel (at a time), store them all in the users table.

You may, obviously, have other information in the users table about when they last logged in, where they live, what type of user they are, or whatever. You can filter the users table any which way you want and you then have a great list of channel URIs to do push notifications to. You can actually use Azure Mobile Services to do filter the table, loop the results, and perform the push very easily.

For a complete example on how to do this, download codeSHOW (codeshow.codeplex.com) and check out the WAMS push demo. You can see the code and run the app and see the results as well.

Happy notifying!

Hello. I wrote a little book (my first actually) called CSS for Windows 8 App Development published by Apress. It's available at aka.ms/cssbook. All of the code listings from the book are available in a Windows 8 app that I have created, and you can download all of the source code for this app at cssbookcode.codeplex.com. The code is not polished yet as the book is still in alpha, but it should build and run and you're welcome to take a look as early as you like. Thanks for reading my book. I wish you lots of fun and success in developing apps for Windows 8.

Of course now that you've seen my post title, you're going to have the Bee Gees stuck in your head for the foreseeable future. Sorry about that. I'm actually not talking about the song at all, but rather about getting your Windows 8 app to tell the system that something happening and it should not go to sleep.

You have to use good judgment here for obvious reasons. Keeping your users system alive is obviously going to peg their battery and may disappoint. Often times, however, it's exactly the functionality the user wants. Who wants to start a video and then have the system lock 5 minutes in?

The app I'm working on that this applies to is called CamView (http://aka.ms/camviewapp). It shows a web cam, and my wife and I use it to keep an eye on our 10 months old son as he sleeps. When we bring him up on the big screen TV, we don't want the system to lock. We want it to stay alive. So there's our use case and the solution is simple. I'll show the implementation in JavaScript of course, but the C# is practically identical.

First of all, I add this in my default.js page outside of the immediate function so it's available to my entire app.

var app = WinJS.Application;

Then on the page that shows the webcam image I do this…

app.dispRequest = new Windows.System.Display.DisplayRequest;

This line takes advantage of the dynamic nature of JavaScript and adds the dispRequest property to the app object though it didn't exist before. It then instantiates the dispRequest to a new instance of the DisplayRequest from the Windows namespace.

In the page's ready method, then, I can call…

app.dispRequest.requestActive();

Which will tell Windows that my app is currently doing something that should block the default locking behavior and stay alive.

The "being a good citizen" part starts here. You've told Windows when to stay alive, but you also need to tell Windows when you're done staying alive. You would do this anytime the user leaves the screen with video, anytime the video stops or pauses, or generally anytime you can. My webcam view page doesn't have any kind of stop or pause, so I'm just disabling the requestActive as soon as the user navigates away from the page. I put that in the unload event for my Page object, and it goes like this…

unload: function() {
    app.dispRequest.releaseRequest();
}

It's yet another simple task that helps add up to great user experience. It's a matter of sweating the small stuff and considering every little nuance of your app that might delight the user. Now let's hope I make my millions off of CamView so I can retire.

If you attended the Gen Appathon in Redmond last week and attended the Windows 8 Design 101 breakout session lead by Valentina and Christina, you know that they promised slides, and here they are: http://www.slideshare.net/valeaseattle/windows-8-design-101

A big thanks to both Valentina and Christina for delivering excellent design content at a time when good design is more important than ever.

I’d like to provide a somewhat comprehensive resource of resources. If you are looking for help, looking for support, or looking for some camaraderie in your fight to get an app in the store and claim your fame and fortune, then look no further.

My whole job is staying plugged in with you – the developer community. Some work for large organizations as a cog. Others are at start ups and your pretty much the whole machine. Whether you’re a contributor, though, or going it alone, you can’t go it alone. You need good involvement in your local developer community. I have prepared a lot of course material, presentation outlines, and book content, and I learn a lot in the process. So volunteer to present at a local user group even if it’s a bit daunting. If all you do is fight one fire at a time at work using what you already know then you may not stretch or stretch quickly enough. You may not be as agile as you can be.

Resources

• Official Developer Forums on the Dev Center
  http://social.msdn.microsoft.com/Forums/en-US/category/windowsapps
  These forums are frequented by Microsoft experts, so you’re likely to get some good answers to your tough questions.
• Stack Overflow
  [windows-8] and [winjs] tags: http://stackoverflow.com/questions/tagged/windows-8+winjs
  Everyone knows that Stack Overflow rocks and that most of us are more tuned in to our SO reputation points than our boss’s annual review. There are a growing number of Windows 8 devs hanging out at SO asking and answering great questions.
• Meetup
  http://www.meetup.com/find/?keywords=windows+8
  If there’s not already a Meetup in your area that focuses on Windows 8 development than by all means – start one!
• Developer Camps and Workshops
  http://www.devcamps.ms/windows
  It’s always better in person. These Microsoft events will spring up pretty frequently in your area, and they’re usually free so keep an open eye.
• Blogs
  http://codefoster.com
  Windows 8 app developer blog
  Windows Store for developers blog
  Building Windows 8 blog

That’s it for now. Keep plugged in. Keep coding!

If you’re interested in learning how to write apps for Windows 8 but don’t want to leave your desk to do it, then I have just the thing for you. They’re called HOLOs. That’s a Hands-On Lab Online. It goes like this.

First, you register and then when the event comes around, you log in and are hooked up with a Live Meeting to a presenter and a bunch of other attendees and also with a Hyper-V session to a Windows 8 virtual machine with all of the course work ready to go. You listen to the presenter for a while, and then you run through the labs with the instructor right there and ready to help when you raise your virtual hand.

There are sessions on a myriad of Windows 8 related subjects including…

• Creating a Windows 8 App
• Orientation, Snapping, and Semantic Zoom
• Searching and Sharing
• The Windows Store
• Application Bars and Media Capture
• Settings and Preferences

And each of those subjects has separate, dedicated online sessions for C# and JavaScript.

Go register now to save your spot. I created a short URL to a search of all of the HOLOs being offered – http://aka.ms/holo.

I’m going to be presenting a number of the JavaScript courses, so I’ll see you online!

Thanks to all of the attendees of our Windows 8 2-day Camp and Hackathon last week!

It was an exhausting but excited couple of days and some attendees left with Samsung Series 7 slates, an XBox console, a bunch of XBox games, and more.

The Windows 8 content from day 1 will be available soon on Channel 9. Until then, I promised that I would upload the content from my session and the content from Bart De Smet’s session on Reactive Extensions.

My Content - Windows 8 Contracts

My session was an introduction to integrating the Windows 8 experience into your app by implementing the Windows 8 contracts. We looked at Search, Share, Settings, the FilePicker, and PlayTo. The code is extremely simple and intended to get you in the door. Let me know if you have any questions…

 CFContractDemos.zip (40.04 kb)

Bart De Smet’s Content – Reactive Extensions

Bart De Smet was a guest presenter on day 2 on the topic of Reactive Extensions. He presented mostly JavaScript examples, but the content below includes all of the .NET examples as well. If you’re not familiar with Reactive Extensions, I think you should get acquainted, and Bart’s slides are very well made and helpful in coming to an understanding.

Reactive Extensions.zip (6.53 mb)