Building Windows 8 Apps using HTML5, CSS3 and JavaScript

When it comes to Windows 8 apps, I have to admit, I’ve been more of a C#/XAML kind of guy.  However, lately, I’ve been looking into a number of the HTML5 based game tools (like Scirra’s Construct 2) and figured that I ought to learn a little more about building Windows 8 apps using HTML5 and JavaScript. 

I’ve been building web apps on various platforms going back to the first web server for windows written by Bob Denny (Any other VB CGI devs out there?), so HTML is second nature to me.  JavaScript?  Well, not so much, but I’ve done my fair share.  What I found out when I started digging into HTML5/JS dev for Windows 8 though was that I liked it a lot more than I expected to.  If fact, it’s pretty darn cool. 

You can take your existing HTML5/CSS3/JS skills to create first class apps in Windows 8. Not BROWSER based apps.  Windows 8 apps. You can package them up, and sell them in the Windows Store, and make real money with them.  Cool! 

I’ve had the privilege over the past month to present what I have learned about Windows 8 HTML5/JS apps to the San Diego HTML5, and the San Diego JS meetups.  If you happened to miss either of those, or just want to see why I am excited about it in general you can:

Get the free “Programming Windows 8 Apps with HTML, CSS, and JavaScript” eBook by Kraig Brockschmidt

Grab a copy of my slides and demos

Watch a YouTube video of my presentation

San Diego HTML5 Meetup Resources

I’m presenting at the San Diego HTML5 Meetup tonight talking about creating Windows 8 apps using HTML5, CSS3, and JavaScript.  If you want a copy of my slides and demos, you can grab them here:

image

Also, if you are looking for a copy of the free book by Kraig Brockschmidt, here’s the link: http://aka.ms/pw8a

And don’t forget to check out Scirra’s Construct 2!

Metro Style Apps Control Initialization in XAML/C# & HTML5/JS

Overview

Version: This article is being written on 06/21/2012 using Windows 8 Release Preview as a reference. 

In Windows 8 Metro Style apps you have a number of choices for your markup and programming languages  You can choose the XAML markup language with C#, VB.NET or even C++.  You now also have the choice of using HTML5 as your markup language along with JavaScript as the programming language. Both XAML and HTML5 provide a way for you to define object instances in a declarative way. 

When creating Metro Style apps with XAML, we declare instances of objects defined in the family of Windows.UI.Xaml.Controls namespaces, as well as some others.  These namespaces are provided as part of the WIndows API for Metro Style apps, They are included with the Windows SDK which is automatically referenced by the Visual Studio project templates.

When creating HTML5/JS Metro Style apps, you can use the HTML5 markup to define either standard HTML5 elements (div,span,input,button, etc).  These standard HTML5 elements are the EXACT same elements you would use in a browser based application. With HTML5/JS Metro Style apps can also declare control instances from the WinJS.UI namespaces provided by the Windows API for Metro Style apps (AppBar, Flyout, ViewBox, etc), . the project templates provided with Visual Studio automatically reference the “WinJS” library.  This library is provided with the Windows 8 SDK (C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Microsoft.WinJS.1.0.RC\1.0\).  The WinJS library is made up of a number of individual JavaScript files, but one in particular (ui.js) includes control definitions for the JavaScript WinJS.UI namespace.  These controls provided features similar to those provided in the Windows.UI.Xaml.Controls namespace used by XAML developers.

 

Read the rest of this entry »

Converting “Cut the Rope” to an HTML5/JS game

In my HTML5/JS game journey today, I ran across a great article on how the Microsoft IE, Pixel Lab, and ZeptoLab teams ported the “Cut the Rope” application from an iOS app over to an HTML5/JS app.

 

Read the rest of this entry »

Getting started with Windows 8 Metro Style HTML5/JS Games…

I spent a fair amount of time over the past few months working with Windows Phone games using XNA.  With Windows 8, we now have the option of creating metro style games using HTML5/JS.  My recent history has focused more on XAML/C# apps using mostly Silverlight.  Although I have been working with HTML and the web since the beginning I’m not a very experienced JavaScript developer, and this will be my first attempt at creating Windows 8 Metro Style HTML5/JS apps of any kind.

I have a problem of wanting to blog things only after I have figured them out.  This time, I’m going to try a different approach and blog as I go.  That means I’ll probably have to correct myself at some point in the future.  But if you want to learn along with me, then you’ll have to experience the bumps and sharp turns with me as well. 

For this blog post I am just going to list links off to the resources I am using as I go through the learning process.  From my initial review, I think I will start looking at creating an HTML5/JS game using the “JavaScript and HTML5 touch game sample” from Microsoft.  Once I have completed that, I plan to start over using “EaselJS” which is part of the “CreateJS” suite.

Read the rest of this entry »