Windows Store Resources

Here is a really useful collection of resources for Windows 8 developers that have to do with the logistics of getting into the Windows Store. Big thanks to Chris Bowen (@chrisbowen) for making sure this information came across my inbox!

Developer registration

  • Opening a developer account: This topic explains the steps to open a Windows Store developer account. Once an account is open, developers can log into their Store Dashboard and start publishing apps.
  • About strong authentication: This topic explains how Microsoft Accounts are kept secure by requiring security proofs that use multiple forms of identification.

Publishing apps

Help with app certification

In-app purchases

Marketing materials

  • Marketing your app In addition to articles on how to create a great app listing in the Windows Store,  you can get Windows Store logos, usage specifications, and other marketing assets.

How to use the Google Maps API on Windows 8

Something that hasn’t been very well documented yet is how to implement the Google Maps API with Windows 8. There are lots of questions about how to do it, but not a lot of answers. Hopefully, this tutorial can help with that.

Before getting into the uber-exciting details, I need to thank Frank LaVigne (@tableteer) for his help. This tutorial would have never been possible without his genius. You can find Frank online at Frank’s World. I’m not a JavaScript expert and Frank was super patient while I asked him tons of questions.

NOTE: If you’re looking for a stupid-easy maps implementation, check out this blog post from G. Andrew Duthie about using Maps app that ships with Windows 8.

Out-of-the-box error

Right now, if you try to include the script for Google Maps API and add a map to the page, you’ll be met with the following error:

clip_image002

Even though you’ve included the source for the script, calling google.maps just doesn’t work. I’ve discovered there are a couple gotchas when implementing the Google Maps API. Keep reading to find out about the secret sauce for Google Maps on Windows 8.

Secret Sauce

Using an iFrame

The first ingredient for the secret sauce is to use an iFrame to display the Google Map. In the tutorial we’ll create a second html page that will have all the information for the Google Map implementation. We’ll create the iFrame in default.html in the tutorial.

Not using page control

The next ingredient in the secret sauce (that technically doesn’t go in) is the page control. For the map html page, we’ll need a map.html, map.js and map.css file. You can get all of these files bundled together by adding a page control. Do NOT do this. The page control also implements some navigation functionality that Google Maps doesn’t know what to do with. This can cause some errors having to do with width offsets that Google Maps doesn’t understand how to implement.

Ms-appx-web

The last, and possibly most important, ingredient for our secret sauce is the use of ms-appx-web in our iFrame src. Due to security restrictions of Windows 8, you can’t load external scripts out-of-the box with the Windows 8 app templates. By using ms-appx-web with our iFrame, we’re able to load locally-packaged content that runs in a web context. For more information, check out How to Reference Content on MSDN.

Tutorial

In this tutorial, we’re going to use the Google Maps API to display earthquake data from the U.S. Geological Survey. The code I’m using to access Google Maps and USGS can be found on the Google Developers Academy site, here. You can download the project here. Please see the end of the post for licensing information.

Set up

Before beginning, you’ll want to make sure your machine is all set up. To develop for Windows 8, you must be running Windows 8. You can download a 90-day evaluation copy here. In addition, you will need Visual Studio 2012 Express for Windows 8 (or higher). The Express version is a free download. You can find it here.

Start developing your Windows 8 app today. Generation App has tons of great resources for developers. Sign up today for tips, great documentation, videos and more!

Create a blank project

The first step for this tutorial is to create a New Project in Visual Studio 2012. This will be a JavaScript project based on the Blank App template. Name your project “MapTutorial.”

clip_image004

Add a map.html/css/js

Now we’ll add the html, css and js file for our map frame that will be referenced from the default.hml page.

Right-click on your project (MapTutorial) in the Solution Explorer and go to Add –> New Item.

clip_image006

Add an HTML Page and call it map.html.

clip_image008

Follow the same process to add map.js and map.css so that your Solution Explorer looks like this:

clip_image010

Add scripts

Now we want to add references to our css and js files in map.html. Open up map.html and the following in the <head> tag:

[sourcecode language="html"]
<!– map references –>
<link href="/map.css" rel="stylesheet" />
<script src="/map.js"></script>
[/sourcecode]

Now we want to add the Google Maps API script. Before the <!– map references –>add the following:

[sourcecode language="html"]
<!– Google Maps API reference –>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
</script>
[/sourcecode]

So far, so good. There is one more script we’re going to add and that’s the earthquake data we’ll be pulling from the U.S. Geological Survey. After the <!– map references –>add the following:

[sourcecode language="html"]
<!– USGS URL data source –>
<script src = "http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week">
</script>
[/sourcecode]

Your <head> tag should look like this:

[sourcecode language="html"]
<head>
<title></title>

<!– Google Maps API reference –>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
</script>

<!– mapframe references –>
<link href="/map.css" rel="stylesheet" />
<script src="/map.js"></script>

<!– USGS URL data source –>
<script src="http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week"></script>

</head>
[/sourcecode]

The last thing we’re going to do with map.html is add a div tag for where we want to display the map. Add the following div tag so the <body> looks like this:

[sourcecode language="html"]
<body>
<div id="mapdisplay"></div>
</body>
[/sourcecode]

At this point if you run your project, you should see a black page and “Content goes here” in the upper left corner.

Add logic

Now that we’ve got our project all set up, let’s add some logic to do something with the earthquake data we’re getting from USGS. I’ve made some changes to the Google Developer code to put things in the right order to work with Windows 8.

In eqfeed_callback , I’ve taken out the logic and put that into addMarkers () which is called from initialize() . In eqfeed_callback (which we need based on the USGS script), I’m saving the results into a global variable to access later. In addition, I’ve commented out setting the icon property for each point. You can uncomment it to see a different way to view the data.

Copy and paste (or write out) the following code in map.js:

[sourcecode language="javascript"]
var map;
var dataResults;

function initialize() {
map = new google.maps.Map(document.getElementById(‘mapdisplay’), {
zoom: 3,
center: new google.maps.LatLng(40, -187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
});

addMarkers();
}

eqfeed_callback = function (results) {
dataResults = results;
}

function addMarkers () {
for (var i = 0; i < dataResults.features.length; i++) {
var quake = dataResults.features[i];
var coors = quake.geometry.coordinates;
var latLong = new google.maps.LatLng(coors[1], coors[0]);
var marker = new google.maps.Marker({
position: latLong,
map: map
//icon: getCircle(earthquake.properties.mag)
});
}
}

function getCircle(magnitude) {
return {
path: google.maps.SymbolPath.CIRCLE,
fillColor: ‘red’,
fillOpacity: .2,
scale: Math.pow(2, magnitude) / Math.PI,
strokeColor: ‘white’,
strokeWeight: .5
};
}

google.maps.event.addDomListener(window, ‘load’, initialize);
[/sourcecode]

In addition, copy and paste the following code into map.css:

[sourcecode language="css"]
html, body, #mapdisplay {
margin: 0;
padding: 0;
height: 100%;
}
[/sourcecode]

At this point, if you run the project again it should still be a black screen with “Content goes here” in the upper left corner. Don’t worry, we’re going to put content in our app in the next step!

Add an iFrame

Open default.html, if it isn’t already open. In the <body> we’re going to add an iFrame that uses map.html as the source (and a header title). Add the following code so the <body> looks like this:

[sourcecode language="html"]
<body>
<h1>Google Maps API on Windows 8</h1>
<iframe id="Map" src="ms-appx-web:///map.html" style="width:100%;height:100%;"></iframe>
</body>
[/sourcecode]

Run

Now the only thing left for us to do is run the app! You can use F5 or click the green triangle (that looks like a play button) on the Visual Studio tool bar:

clip_image012

At this point you should be seeing your app with a slippy Google Map on it and map markers for where earthquakes have occurred. Yay! You now have the Google Maps API working on Windows 8!! You can download the full project from my SkyDrive.

clip_image014

Portions of this page are reproductions and modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License and Apache 2.0 License. You can find the original pages at Google Developers Academy –> Maps (—> JavaScript) –> Importing Data & Visualizing Data.

Windows AzureConf

azureconf-logo[1]

On November 14, 2012, Microsoft will be hosting Windows AzureConf, a free event for the Windows Azure community. This event will feature a keynote presentation by Scott Guthrie, along with numerous sessions executed by Windows Azure community members. Streamed live for an online audience on Channel 9, the event will allow you to see how developers just like you are using Windows Azure to develop applications on the best cloud platform in the industry. Community members from all over the world will join Scott in the Channel 9 studios to present their own inventions and experiences. Whether you’re just learning Windows Azure or you’ve already achieved success on the platform, you won’t want to miss this special event.

New to Windows Azure?  Want to get ready for the Windows Azure Conf? Sign up for a free Windows Azure account here.  In under 5 minutes you’ll have access to a comprehensive set of services for building Mobile, Web, and scalable multi-tier applications in the cloud.

Links & Resources

Windows Azure Training Kit
@WindowsAzure on Twitter
Windows Azure on Facebook
Subscribe to the Windows Azure Newsletter

iOS –> Winodws 8 Dev Resources

iOS_developers

Windows 8 is a completely reimagined Windows. You can code once and have a great app experience that scales across devices from tablets to all-in-one PCs, from 10″ to 27″ screen sizes. The new Windows Store provides flexibility for selling your app and higher profit potential than the Apple App Store – with an 80% revenue share when you reach $25,000 USD or more in total sales. Unlike Cocoa Touch, which only use Objective-C, the Windows Runtime gives you the flexibility to build native apps using C#, C++ and JavaScript. It’s easy to get started on Windows 8.

You can get started by heading to the Windows Store home page and clicking on the iOS Developers link on the navigation menu. Or you can use the convenient links below :).

One great way to target multiple platforms is to use a framework that will let you keep one code base that will work on different devices. Check out some of our cross-platform partners:

Get 30 days of tips, tricks and resources for Windows 8 development by signing up for 30 to Launch!

Register now for Wowzapp 2012!!

MS 12_262_Logo_tagline

Be part of the app revolution

Join thousands of developers worldwide, November 9-11, 2012, for Wowzapp the worldwide hackathon for Windows and build apps for the next generation of Windows.

There will be dozens of event venues from college campuses to Microsoft offices, all buzzing with energy, music, free food and more. New venues being added daily – check back to find the event near you.

Expert help, free resources

Microsoft app experts, developers and trainers will be available to assist your learning and coding.

Get the app

Download the Wowzapp app (created by students!) to use throughout the weekend. You can post questions for other Wowzapp attendees, stream tech talks happening at other locations and score points through the app to compete against other attendees!

WOWZAPP_Email_Signature_Zombie_Large

Locations in East Region

Wowzapp is happening all over the world in 100+ locations. Here in East Region there are several events being held. They don’t all start at the same time, so be sure to click through to the registration page.

Getting Started

Get Windows 8

Remember, to program for Windows 8 you have to have Windows 8. You can buy Windows 8 online from the Microsoft Store, download a 90-day Windows 8 RTM evaluation or download it through an MSDN or DreamSpark Premium subscription.

Get the Development Tools

Don’t forget to grab a copy of the free development tools! You can download Visual Studio 2012 Express for Windows 8 for free or download one of the full versions if you have an MSDN or DreamSpark subscription. You can also sign up for a 90-day trial of Windows Azure if you plan on using cloud services for your app.

Start Learning

Jumpstart your Windows 8 development skills so you can hit the ground running at Wowzapp!

  • Windows 8 30 to Launch – Tips, tricks and resources to take your app from idea to store.
  • Programming Windows 8 Apps with HTML, CSS, and JavaScript – I blogged about this free Microsoft Press ebook that provides comprehensive coverage of programming for Windows 8 Apps, by Microsoft’s Kraig Brockschmidt.  This book is about writing WinRT apps using HTML5, CSS3, and JavaScript.
  • HTML5 Game Starter Kit for Windows 8 – with the HTML5 Starter kit, how-to instructional video, along with the step by step guide, users will be able to set up a new Windows 8 game project with ease. This content was developed by Petri Tapio Wilhelmsen (@petriw) who also has a great blog.

Free ebook: Programming Windows 8 Apps

 win8programmingProgramming Windows 8 Apps with HTML, CSS, and JavaScript has been completed and is now available as a free ebook download from Microsoft Press.

“This free ebook provides comprehensive coverage of the platform for Windows Store apps. Since its second preview in August, we’ve added the remaining chapters on live tiles, notifications, background tasks, background transfers, networking, devices, printing, WinRT components, accessibility, localization, and the Windows Store itself. The final ebook contains 17 chapters. And of course all of the earlier chapters have also been reviewed and refined—over 800 pages in total, along with new and updated companion content!”

Click through to get the download and the companion content.

Start developing your Windows 8 app today. Generation App has tons of great resources for developers. Sign up today for tips, great documentation, videos and more!

Windows Phone 8 Theme Colors (HEX & RGB)

If you read my last blog post, you know the Windows Phone 8 SDK is out! Yay! Along with the new SDK, there are some new theme colors. Below you’ll find a summary of the new colors in HEX and RGB values. Usually I put the HEX & RGB values in a table, but I’m just going to list them out. No worries though, they’re still copy/paste-able :D (Need Windows 8 colors? Get the HEX codes here.)

Windows Phone 8 app resources will be coming soon to Generation App! In the meantime, why don’t you get started on a Windows 8 companion app?

winpho8colors

Lime: #A4C400; RGB(164, 196, 0)

Green: #60A917; RGB(96, 169, 23)

Emerald: #008A00; RGB(0, 138, 0)

Teal: #00ABA9; RGB(0, 171, 169)

Cyan: #1BA1E2; RGB(27, 161, 226)

Cobalt: #0050EF; RGB(0, 80, 239)

Indigo: #6A00FF; RGB(106, 0, 255)

Violet: #AA00FF; RGB(170, 0, 255)

Pink: #F472D0; RGB(244, 114, 208)

Magenta: #D80073; RGB(216, 0, 115)

Crimson: #A20025; RGB(162, 0, 37)

Red: #E51400; RGB(229, 20, 0)

Orange: #FA6800; RGB(250, 104, 0)

Amber: #F0A30A; RGB(240, 163, 10)

Yellow: #E3C800; RGB(227, 200, 0)

Brown: #825A2C; RGB(130, 90, 44)

Olive: #6D8764; RGB(109, 135, 100)

Steel: #647687; RGB(100, 118, 135)

Mauve: #76608A; RGB(118, 96, 138)

Taupe: #87794E; RGB(135, 121, 78)

Announcing Windows Phone 8

home_hero2

Earlier today, Windows Phone SDK 8.0 was announced at Build!

The SDK includes development support for Windows Phone 8, support for C++ games and apps, an updated emulator for Windows Phone 8, Windows Phone support for Visual Studio 2012 (both 7 and 8), and is easier to port apps between Windows 8 and Windows Phone 8.  Developers who don’t have Visual Studio can use the Visual Studio 2012 Express for Windows Phone to create their apps.  If a developer has Visual Studio 2012 Professional, Premium, or Ultimate; it will add the Windows Phone development projects to their IDE.

Developer Offer

From the Windows Phone Developer Blog: (click through for the full announcement)

Windows Phone 8 is out, the tools are available, and devices are about to be released—it’s time to get coding. As an added incentive, for the next 8 days individual developers can register for a Dev Center account for just $8 (a 92 percent savings). Please note because this is a very limited time offer. You’ll be charged $99 USD or equivalent in your local currency, and we’ll refund the difference in the next 30 to 45 days. Watch for more details on Dev Center soon.

10 Reasons to Look at Windows Phone 8

1.         New Windows Phone developers can bring their existing skills to start creating apps right away.  Use XAML/.NET to write apps or DirectX/C++ to create games for Windows Phone.

2.         Tie Windows Phone apps with web services to create outstanding experiences with Visual Studio Professional or higher with the Windows Phone add-in.

3.         Reduce development time for multi-platform games by using C++.

4.         Port existing OpenGL games to DirectX to take advantage of existing game libraries and logic with minimal alterations.

5.         Get clean web based game rendering with the improved HTML5 & JavaScript support in the IE10 web browser control.

6.         Fine tune your users’ experiences by taking advantage of Blend for Visual Studio 2012.

7.         Simulate the real world when testing your apps and games with the Windows Phone Emulator.

8.         Find CPU and memory issues faster with the Profiler.

9.         Minimize app certification time by using the pre-test for Windows Phone Store technical certification with Test Kit.

10.        Develop apps using Visual Studio 2012, one of the most productive integrated development environments (IDE) for turning ideas into software.

I’m super excited about Windows Phone 8 to be out and I can’t wait to see the great apps targeting all the new feature. If you have any questions, let me know!

Windows 8 Workshops

I’ll be at the Tyson’s Corner Microsoft Store for a Windows 8 Workshop on Game Development on November 2nd. This is part of a larger series at the Microsoft Store that’s all about Windows 8 development.

Here’s more info:

With the launch of Windows 8 just a couple of weeks away, we want to make it even easier for you to create an awesome app or game. We’re partnering with retail stores across the United States to bring you a 4-week workshops series designed to help you build a great Windows Store app.

The next series event is Friday, November 2nd, from 6pm-9pm, at the Microsoft Store in Tyson’s Corner, VA, with a session on game development for Windows Store apps.

This session will be presented by Microsoft Technical Evangelist Ed Donahue. Want to know more about Ed? Check out her blog at http://www.creepyed.com/, and follow her on twitter.

Windows 8 Game Development

Did you know that games are the most popular downloads by consumers on mobile devices? This workshops will provide you an overview of all the different ways that you can build a game for Windows 8 and help you get started building your game. You can bring your own code or start from scratch.  Get your game on and build the next great game in our Hands-On-Lab. Register here.

win8wrkshpseries

We’ll be cycling through the series twice. Below are the session descriptions and dates. For any questions, please email Microsoft Technical Evangelist G. Andrew Duthie here. I hope to see you there!

Windows 8 UX Design (Oct. 19th, Nov. 30th)

Windows 8 marks the next step in the evolution of the Modern UI design. Through the bold use of color, typography, and motion, Windows 8 App design style brings a fresh new approach to the user experience. But before you can build a beautiful app, you need to decide what your app will be “best at”, and select your features. You’ll also have the opportunity to practice what you have learned in the Hands-On-Lab.

Windows 8 Game Development (Nov. 2nd, Dec. 7th)

Did you know that games are the most popular downloads by consumers on mobile devices? This workshops will provide you an overview of all the different ways that you can build a game for Windows 8 and help you get started building your game. You can bring your own code or start from scratch.  Get your game on and build the next great game in our Hands-On-Lab.

Windows 8 App Development (Nov. 9th, Dec. 14th)

Learn how you can use your development skills to create money-making apps that run on Windows 8 and other popular mobile platforms using popular cross platform app frameworks. By developing a cross platform code base you will makes it possible to deliver gorgeous, fast, native apps for all major platforms quickly. Bring your code and your creativity and get started building the next great app in our Hands-On-Lab.

Monetization and Store Certification (Nov. 16th, Dec. 21st)

You’ve written the greatest game or the next big app. Ok what do you do now? You need to get the app in the store and start making money. This workshops will cover how to submit your app to the Windows 8 store and teach you all the different methods for making money with your apps and games on Windows 8 including free with Ads, free with in-app purchases, try and buy and paid.

8 Days Until Windows 8!!

There are 8 days until Windows 8, the biggest developer opportunity. Ever. Each day there will be some great events happening to get you excited and ready.

Happening today

Thursday, October 18 at 4pm PST there will be a special webcast to answer questions about how to get an app or game into the Windows Store. Our Windows 8 Technical Evangelist team will be live, online to answer questions and available for 1:1 conversations after the webcast. Register here.

 

Start developing your Windows 8 app today. Generation App has tons of great resources for developers. Sign up today for tips, great documentation, videos and more!