DaveDev

Philly Appathon Winners announced at Code Camp!

David Isbitski — Tue, 14 May 2013 18:26:42 GMT

This past weekend was another great Philly Code Camp with people from all over coming together for a day of learning and community.

This also marked the second Philly Appathon with the winners being announced during the closing ceremonies. We had five winners and an honorable mention! If you have Windows 8 be sure to check out these apps in the Windows Store using the bit.ly links below.

I know some of you ran out of time and couldn’t submit the apps to the Stores before the deadline. No worries! Stay tuned as Philly.Net will be announcing some additional contests shortly including ones for the monthly hands on labs!

- Dave

May and June begins Philly Appathon Wednesdays

David Isbitski — Tue, 23 Apr 2013 00:19:11 GMT

Updated April 29th, 2013 – Official registration links added for each week. Registration Is not required but helps us in planning the event.

What is it?

As part of the Philly Appathon contest and Keep The Cash you can get free help developing your app and time to network with your local community peers. Each workshop will include a session on app development (60 mins) as well as open lab time (2 hours). Bring your own apps to work, use one of the free starter kits we’ll cover, or just hang out for the open dialog.

When?

Every Wednesday night in the Microsoft Malvern Office from 5pm-8pm during the months of May and June

What are the session Topics?

May 1st – Tips and tricks on designing a great Windows Store App. Register Now

May 8th - Building Windows Store apps with HTML and JavaScript using the Windows 8 Game Kit. Register Now

May 11th – Philly.Net Code Camp

May 22nd – Overview of Azure Mobile Services and how you can connect your own Windows Store or Windows Phone Apps to take advantage of structured storage, authentication and push notifications. Register Now

May 29th – Developer overview of what’s new in Windows Phone 8. Register Now

June 5th - Taking advantage of the new Maps control and Camera Lens features in your Windows Phone 8 App. Register Now

June 12th – Philly.Net Hands on Labs

June 19th – Philly.Net Meeting

June 24th-26th – MADExpo Register Now

Hope to see you there!

-Dave

Announcing the Windows 8 and Windows Phone 8 Philly Appathon March 25th to May 7th

David Isbitski — Mon, 25 Mar 2013 19:31:45 GMT

Update April 3rd, 2013 – The contest is now for BOTH Windows Store and Windows Phone 8 Apps!

I am pleased to announce that Microsoft and Philly.NET are hosting another Windows Store App contest! Since the launch of Windows 8 the Windows Store as given developers the opportunity to sell their apps while using the same skills and languages they are familiar with. Since its launch the number of apps in the Store has more than quadrupled and just two months after GA, has passed the 100 million app download mark. Now is the time to get your app into the Store!

Here are the details:

Contest begins Monday, March 25^th and ends Tuesday, May 7^th.
The contest is open to all Pennsylvania and Philly.Net members
Download the free Visual Studio 2012 Express tools and build your Windows Store or Windows Phone 8 app using C#|VB/XAML, JS/HTML, or C++/XAML.
Publish your app to the Windows Store or Windows Phone Store by Tuesday, May 7^th and email the link to here.

Apps will be judged by David Isbitski (Microsoft), Rob Keiser (Philly.Net) and Bill Wolff (Philly.Net)
Criteria used for judging will include but not limited to the following:

Uniqueness
Windows Store or Windows Phone 8 Capabilities (Search and Share Contracts, Live Tiles, Notifications, etc)
Design
Longevity

In the event your app is not published by the deadline simply send the judges a video showing your app has been submitted for certification and a brief video of it running in the emulator.

Winners will be announced at Philly.Net Code Camp Saturday, May 11^th.

Prizes will be awarded as follows:

1^st Place – Lenovo IdeaPad Yoga 11
2^nd Place – Nokia Lumia 800 Windows Phone and $100 American Express Gift Card
3^rd Place - $300 American Express Gift Card
4^th Place - $200 American Express Gift Card
5^th Place - $150 American Express Gift Card

You can enter as many apps as you publish into the contest. All Windows Store and Windows Phone apps also count as entries for the Keep The Cash contest meaning everyone who publishes an app for the contest is also eligible to receive a gift card.

28 days in - Windows Store Analytics for my Balloons game

David Isbitski — Tue, 19 Mar 2013 19:06:00 GMT

Recently, I posted a game to the Windows Store based on a course I authored for Lynda.com. The game was primarily meant as a learning tool for the course but in letting my young kids play I found it to be entertaining enough that some other parents might want to use it. It’s not a complex game by any means but if I hit my target audience right (parents of young children) it should provide enough entertainment for a while. I also tried to add additional value by making it totally free and with no ads (which I don’t believe should be in kids games and usually get blocked via parental controls regardless) .

The Windows Store gives a lot of free metrics on your apps and with it being almost a month since I published the game I thought I would share some of the numbers I’m seeing.

Some things to keep in mind:

The game is not global. I only published it to the United States, Canada, United Kingdom, Germany, Australia, Belgium, France, Ireland and Italy Stores for this release.
The game is free and has no Ads
The game is listed in the Family subcategory of the Games category

Overview

Overall, as of today after being in the Windows Store for 28 days the game has had 2,179 downloads with an average rating of 4 stars.

If we look at the details we see the usual spike that occurs when an app is new. Everyone gets this and its why it is important to make a big splash in the beginning. It’s much harder to generate awareness and excitement for your app after it has been in market for a while. These numbers were higher than I expected since my game was not featured, is from an unknown publisher, had no marketing, community or awareness around it, is in the most populated category (games) and in the fairly niche a family subcategory. The family subcategory had hundreds of games already in it and doing a search for Balloons there were several Balloons orientated games similar to my own. Yet, a couple thousand folks checked it out and as you’ll see below actually used it as well. There were also 9 people who chose to leave a review but more on that in a bit.

Adoption

There are a couple of interesting things that are going on here.

A third of the people who saw my game listed in the Store downloaded it.

We aren’t told exactly how they saw it so I am assuming it was in a search result or through the main category listing. This number was very surprising for me I did not expect for it to be that high and I can only assume it was one of two things. I hit my market correctly and the game con looked interesting. And/or it was free meaning little to know risk for the download.

Almost half of the traffic for the app comes from the Windows Store itself.

People are clicking that Windows Store icon on the start screen and looking for apps! If you’re a developer this should be a very exciting number for you.

Almost a third of the traffic came from the web via my own blog and app listing sites

We also get stats for age and gender. As you can see from the chart I hit my target audience (parents with young kids). The highest downloaded age group is 22-40 years old and then you also see higher downloads in the 41+ group (older parents and grandparents). What I got a chuckle about too is where the gender difference are highest is in the 22-40 age range with men being about a third more than women. That bar is exactly where I fit, a dad with young children and makes me feel that if I make a game for myself that appeals to me then my peer group would also follow. Another great stat to point out is that over a third of the download come from outside the United States. For the next release of the game I am going to publish to more countries and will be curious to see how these numbers change.

Usage

So we now know a little bit more about who is downloading our apps and from where. What about the longevity of our app? All apps get used less and less over time and this is one of the reasons to add new updates, features, as well as interesting gameplay. The chart below reflects the downloads chart so we can assume the people playing the game on any given day are largely made up of new users.

What is very interesting to me though is the breakdown between people using a mouse (desktop or older laptop) and people using touch (tablet or newer win8 laptop). In watching my kids play the game (like my oldest here on a Surface) I noticed it was a lot easier to get points than with a mouse. In fact, before publishing the game I upped the speed of the balloons to ensure it wasn’t to easy on tablets which trying to maintain a reasonable level of difficulty with the mouse. While I can’t be certain I believe these charts are showing me that people with tablets lose interest faster because they progress through the levels and scores much faster. In fact, one of the reviewers as we will see below gives a suggestion to this very problem.

Ratings

Out of the 9 ratings 7 people left a high score while 2 left a low score. What I appreciate here is the people who left the low score gave me feedback! Feedback that I can incorporate and fix in the next version of the game. The Windows Store also lets people revise their ratings if they decide to change it at a later date.

As I mentioned above about the usage statistics between mouse and touch the one reviewer gives a great suggestion. The game is simply too hard with a mouse and if I added a difficulty setting he/she would gladly change the rating. Since I’ve coded the game to have a global settings already for max and min balloon speeds this can easily be tweaked with a slide control in the settings. The other reviewer (while in German) points out that the music gets very annoying. Since the game started out as a learning example it only has one track. This will definitely be a feature I add in the future, whether it is to add more custom music tracks or allow the user to pick their own from their music library.

JavaScript Exceptions

The Windows ecosystem is huge with over 1,700 certified Windows 8 systems the odds that our game will encounter an error are pretty high. Or so I thought. Based on the game running on over 2,100+ PCs there was only one JavaScript exception thrown. Digging a little deeper it came from a third party JavaScript library I used and it was due to a sound file being missing. I can only assume this had to do with a corrupted Windows Store package. If you are an HTML5 GameDev this stat should be pretty impressive to you!

About Page

The last statistic I want to share has to do with my About page in the Settings Panel. In my recent post on Settings Panels I discussed how you could include content locally or call out to external website content via an iframe.

Both the Privacy Policy and the About Balloons pages in my game are hosted externally on an Azure Websites instance. Azure Websites are a free, easy way to set up some web content you want to pull into your app and you get some basic data analysis features right out of the box.

If we look at traffic for the last week (7 days is as far back currently as it will let me go) you will see I am averaging 1-3 requests a day. I could easily add some metrics to the webpages to get more information or even go through the logs but I though this number just by itself stands. I don’t think too many people were concerned about the Privacy policy and in the future it will be interesting to see how much traffic these pages get once I have game controls in here (like balloon speed).

I hope you got something out of these numbers and if you’re working on your own Windows Store app you can expect the same kind of analytics for free. Happy Coding!

-Dave

Content from DC Windows Phone 8 Jumpstart available

David Isbitski — Thu, 14 Mar 2013 15:54:37 GMT

I had a ton of fun in Washington, DC last week hanging out with the local developer crowd and talking Windows Phone 8. Can’t wait to see all the apps hit the Windows Phone Store!

I’ve posted all five session's slides here and the code we wrote here.

If you missed the event there are more coming to your town so stay tuned!

New Tablet Show Episode: David Isbitski and Andrew Smith Do Cross Platform Mobile Development with AppMobi

David Isbitski — Mon, 11 Mar 2013 20:50:01 GMT

I recently recorded an episode of The Tablet Show podcast with Carl Franklin, Richard Campbell and Andrew Smith. I’ve been a fan of Richard and Carl for years and if you haven’t check out the show yet, or their popular .Net Rocks podcast, I highly recommend it.

In this episode we chat about HTML5 Hybrid App development and what both appMobi and Intel’s new offerings can do to help developers.

You can listen to the episode online here, in iTunes here, or via any of your favorite podcasting apps.

Enjoy!

-Dave

Windows 8 Game Kit updated with Settings Panel

David Isbitski — Thu, 28 Feb 2013 19:39:35 GMT

Windows Store Setting Panel

One of the more common tasks you will be required to do in your Windows Store App is add a privacy policy. This is especially true if you have enabled certain capabilities like the WebCam. I have updated the Win8GameKit with a quick and easy example of how to add a settings panel to your own games.

What code was updated?

Inside default.js we are going to add a new function call to the base WinJS.Application namespace that will be called when the user selects the Settings Charm.

     //About and Privacy Policy Settings Charm

           WinJS.Application.onsettings = function (e) {

               e.detail.applicationcommands = {

                   "aboutSettings": { title: "About Space Cadet", href: "/html/about.html" },

                   "privacySettings": { title: "Privacy Policy", href: "/html/privacy.html" }

               };

               WinJS.UI.SettingsFlyout.populateSettings(e);

           };

If you have ever opened the Settings Panel on a Windows Store App you may have caught this event loading the panel. The magic here happens thanks to the WinJS.UI.SettingsFlyout object and by default all Windows Store Apps will have two entries automatically generated here for you. The first entry enables people to review your app and the second shows current permissions for your app (the capabilities you enabled like WebCam access).

We are going to add two more to the panel the first will give us an about page explaining our app and the second will be for a privacy policy. A new folder has been added to the root of the project called html and includes two new files about.html and privacy.html which we point to in our new function call above. These files are pretty self explanatory with the only thing worth noting is the ability to include html at run time through an iframe. I have included the iframe in the comments so if you wish to load external content simply remove the embedded html and uncomment the iframe with the source pointed to your own url.

about.html

    <!doctype HTML>

    <html>

        <head>

            <title>About settings flyout</title>

            <link href="/css/settings.css" rel="stylesheet" />

        </head>

        <body>

            <!-- BEGINSETTINGSFLYOUT -->

            <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="About Space Cadet settings flyout" data-win-options="{settingsCommandId:'aboutSettings',width:'wide'}">

                <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->

                <div class="win-ui-dark win-header" style="background-color:#001E4E"> <!-- Background color reflects app's personality -->

                    <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>

                    <div class="win-label">About Space Cadet</div>

                    </div>

                <div class="win-content">

                    <div class="win-settings-section">

                        <div id="aboutSpaceCadet">

                        <!--<iframe src="http://insertyourdoman/insertyourhtml.html" width="566" height="600"/>-->

                        Space Cadet is a completely free game for educational and entertainment purposes only.  The code for this game is open source and available at <a href="http://win8gamekit.codeplex.com" target="_blank" >Win8gamekit.codeplex.com</a><p>

                        For more information about my other free games, apps and developer starter kits check out <a href="http://blogs.msdn.com/davedev/" target="_blank" >my blog</a> on MSDN.<p>

                        Other Apps from DaveDev Productions:<br />

                        <ul>

                            <li>Balloons (<a href="http://bit.ly/balloonswin8" target="_blank" >Windows Store</a>)</li>

                            <li>DoodlePad (<a href="http://www.windowsphone.com/s?appid=aded583e-cadc-df11-a844-00237de2db9e" target="_blank" >Windows Phone</a>)</li>

                            <li>DoodlePad Free (<a href="http://www.windowsphone.com/s?appid=5188a4a4-421c-e011-9264-00237de2db9e" target="_blank" >Windows Phone</a>)</li>

                        </ul>

                        </div>

                    </div>

                </div>

            </div>

            <!-- ENDSETTINGSFLYOUT -->

        </body>

    </html>

privacy.html

    <!doctype HTML>

    <html>

        <head>

            <title>Legal notices settings flyout</title>

            <link href="/css/settings.css" rel="stylesheet" />

        </head>

        <body>

            <!-- BEGINSETTINGSFLYOUT -->

            <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Legal notices settings flyout" data-win-options="{settingsCommandId:'privacySettings',width:'wide'}">

                <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->

                <div class="win-ui-dark win-header" style="background-color:#001E4E"> <!-- Background color reflects app's personality -->

                    <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>

                    <div class="win-label">Privacy Policy</div>

                    </div>

                <div class="win-content">

                    <div class="win-settings-section">

                        <div id="privacyPolicy">

                         <!--<iframe src="http://insertyourdoman/insertyourhtml.html" width="566" height="600"/>-->

                         This privacy policy governs your use of the software application Space Cadet ("Application") for mobile devices that was created by DaveDev Productions.

                         The Application is for educational and entertainment purposes only and does not share any information about you or the location of your mobile device.  

                         The only Internet operation performed by the Application is via the "Share Charm" invoked by you.  In this instance your Score, Level and Name will be shared to another Windows Store Application you specify.

                        </div>

                    </div>

                </div>

            </div>

            <!-- ENDSETTINGSFLYOUT -->

        </body>

    </html>

Since the Settings Panel content is html you can also style it to your liking using CSS. You will see the background color has been set inside the div in each html. I also created a settings.css file to show how you can change font size across all of the Settings pages very quickly.

settings.css

    body {

        font-size: 22px;

    }

Settings Panel

Now that we have set up the calls to generate new Settings panel items simply hit Windows-I (settings) or go over to the Charms (Windows-C) and select Settings. At this point the WinJS.UI.SettingsFlyout will handle the event and populate our two new entries for About and Privacy as seen below.

One item worth pointing out is these pages themselves are running in an iframe so in the About screen, for example, if I click on one of the urls it would attempt to load the page into the same frame. Simply using the same techniques you would in a browser to open a new windows with target=”_blank” will open up a browser instead of inside the Settings panel.

That’s it! With just a few lines of code your game now has an About screen and complies with Privacy settings thanks to a new Privacy Policy.

Where to download the code

The main Codeplex release has been updated with the changes. You can grab the latest release Win8GameKit-Feb2013 or simply browse the Source Code for the changes.

The GitHub Win8GameKit repository has also been updated if you prefer to follow the project there.

The UTF-8 file encoding test detected the following errors in Windows App Cert Kit

David Isbitski — Wed, 27 Feb 2013 21:58:17 GMT

If you are getting this error message when running the Windows App Certification Kit you most likely are using a JavaScript file from the Web that has been encoded differently. One of the great things about being a Web Developer targeting the Windows Store is you can utilize a lot of the JavaScript Libraries that you are currently using for your Web apps. According to Wikipedia UTF-8 has become the dominant character encoding for the World-Wide Web, accounting for more than half of all Web pages. If you are using an older JavaScript library that was not encoded as UTF-8 you can potentially hit some performance loss due to bytecode caching.

The good news is this is easy to fix. If you have been in the Windows world for a while you most likely have used Notepad as a way to strip out any formatting before pasting text into another program. Notepad can be used in much the same way here for encoding your JavaScript file. Simply open up the file and save it as UTF-8 as seen below.

If you prefer to remain within Visual Studio you can also change the encoding of the file by opening the file and then selecting “Save with Encoding”.

You will get a bunch of options here so be sure to select Unicode (UTF-8 with signature).

When you are prompted to replace the file simply say Yes and you should be all set.

Congrats! When you next run the Windows App Cert Kit you will see file encoding has passed getting you one step closer to completing technical certification on the Windows Store.

Building a Windows Store Game Using HTML and JavaScript available from Lynda.com

David Isbitski — Tue, 26 Feb 2013 00:11:27 GMT

Building a Windows Store Game Using HTML and JavaScript

I am proud to announce my first course with Lynda.com is now available for viewing! The course runs a little over two hours in length, includes complete source code, and step-by-step labs for each chapter. I’ve never been a fan of having to spend hours going through an SDK and the intent of this course is to learn from example. I move you from having no tools installed on your machine to a complete game you can then download and modify as you wish. In fact, I published the game created in the course to the Windows Store recently so if you have a Windows 8 machine be sure to check it out.

Via Lynda.com course summary…

Write your first Windows Store app with HTML5, JavaScript, and CSS. In this course, author David Isbitski shows how to use these technologies to build a game engine that runs on Microsoft devices and desktops. First, learn about the Microsoft web stack and the capabilities offered in HTML5—the foundation of your app. The course then covers each step of the build in detail, from designing the game interface and setting up a game loop to adding support for multiple screen sizes and touch interaction, incorporating music and sound effects, and accessing data from the camera and accelerometer. Along the way, discover how to personalize the look of your game with CSS3.

Topics include:

Setting up your Visual Studio 2012 development environment

Using JavaScript with WinJS

Laying out the interface with Canvas

Creating a game loop

Adding a menu

Supporting snapped, filled, and full-screen modes

Working with the Touch API

Playing music

Creating a scoring and leveling system

Working with the Application Bar

Accessing the camera and accelerometer

Debugging and deploying your application

Running on an ecosystem of Windows devices

Part of what I tackle in the course is getting the game to run across all of the various Windows 8 devices consumers can now buy. Multi-Touch, Mouse, Pen, tablet sizes screens, laptop screens all the way up to 80” Multi-Touch screens the game will run on all of them. It was fairly simple to code the game in a way where it scales up or down no reworking needed for each device. All Windows apps automatically scale up based on a formula of your current screen size and resolution. You can include multiple sources for your images that are rendered at different resolutions. This includes not only in game graphics but also the images used on the Windows Store, the Live Tile as well as the icons for search or sharing.

The result is a game that can run on older desktop hardware with a keyboard and mouse. Here is a photo of my five year old playing Balloons on my older Vista era desktop with a keyboard and mouse. Yes my office is that messy but isn’t a mess a sign of a great thinker? <smile>

Not to be outdone by her sistser my eight year old decided she wanted to check it out on our Surface. I get a kick out of her using all ten fingers when I tell her it supports multitouch.

Or, it can be run on an 80” Multi-Touch Windows 8 Screen! I had fun watching my friend Dani try and pop the balloons quick enough.

If you have a Windows 8 device you can download the app for free from the Windows Store here.

If you are not currently a Lynda.com subscriber they also offer a 7 Day trial to the entire library here. I hope you enjoy the course as much as I did creating it!

-Dave

This package was deployed for development or authoring mode error in Windows App Cert Kit

David Isbitski — Thu, 21 Feb 2013 00:43:31 GMT

If you are getting this error message when running the Windows App Certification Kit don’t panic!

This package was deployed for development or authoring mode. Uninstall the package and re-install it normally.

This means you have a Windows Store app written in JavaScript that you deployed locally through Visual Studio instead of as a package. In order to properly test a JavaScript Windows Store app the Byte code generation should be able to complete successfully. In order to enable this the package must be installed normally as follows:

In Visual Studio 2012 select the Project, right click, open the Store Menu and choose Create App Packages. If you are using the Express version of Visual Studio 2012 you will have a Store Menu on your Visual Studio Menu already.

Select the option to not upload to the Windows Store. This will create a local package you can use for testing on your own machine or give to other developers to test.

Choose all of the defaults and then open the folder to the generated binaries with the link it provides.

You will want to run the provided PowerShell script (.ps1 extension) and follow the prompts. This will install the package locally into your Windows Store App location and apply the generated developer certificate.

Congrats! You can now run the WACK Tool successfully as well as other developers who may want to test your app for you.