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

December San Diego JS Meetup Trip Report

I finally got a chance to go to the San Diego JS meetup last night.  I have been wanting to go for months but I finally made it!  This was also my first chance to visit 3rdSpace.   Loved both.  Todd Bashor of The Starter’s Academy gave a great demo of using casper.js as a way of automating phantom.js sessions for testing and more.  It was very interesting. 

Of course, I also got a chance to chat with local JavaScript developers about their impressions of Microsoft both good and bad, as well as their interest in developing on the Microsoft stack.  Here is some of the feedback I received and my hopefully not too defensive sounding response.

Read the rest of this entry »

Windows 8 Installation Options Slide Deck

At the “Making Money with HTML5, CSS and JavaScript” event today, I gave a lunchtime session on the various installation options that are available with Windows 8.  If you would like a copy of my slides, you can grab them here:

Windows 8 Installation Options Screen Shot

 

Read the rest of this entry »

Windows Azure Mobile Services Demo at Windows 8 Dev Camp LA

I love the Dev Camps we have been running lately because it gives me a great opportunity to show off all the great things we are doing around Windows 8 and Windows Azure.  Case in point, at the Windows 8 Dev Camp in LA today (09/14/2012) I will be presenting on “Windows Azure Mobile Services”.

image

Windows Azure Mobile Services” makes it super simple to create a cloud back-end for your Windows 8 WinRT apps.  It provides you a way to manage data, authentication, and push notifications.  Along with that you can scale your services as your app grows in popularity!  Very cool. 

Feel free to grab my demos and slides from today, and if you haven’t gotten a chance to go through the “Windows Azure Mobile Hands-On-Labs”, give them a try!

Windows 8 Dev Camp Slides and Samples

I had a great time presenting at the Windows 8 Dev Camp today in Irvine.  You can grab my slides and samples if you want them, and get started yourself!

SlideArt

We covered tons of great topics today including:

  • Windows 8 Design
  • Windows 8 XAML/C# Project Templates
  • MessageDialog
  • Splash Screens
  • Controls
  • Navigation
  • Windows Azure Overview
  • Windows Azure Web Sites
  • Windows Azure Blob Storage
  • HttpClient in WinRT Apps
  • Shared Access Signatures and more

Grab the samples and slides and get started now by building an app in 30 Days!

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 »

“Windows 8 for Software Developers” Event

This evening I’ll be at the Microsoft Store at Fashion Valley Mall here in San Diego for the San Diego Software Industries Council “Windows 8 for Software Developers” event. 

The event is free, but registration is required.  Register Here

TitleSlide

I’ll be giving a quick presentation on Windows 8 development at the event.  You can grab a copy of my slides here

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 »

On the hunt for great Windows 8 Apps

In case you haven’t already heard, Windows 8 is coming soon. You can download it, use it, and even develop apps for it today. At this point in time the Windows Store is not open for everyone to deploy, but we are looking for the first wave of great applications which highlight the power of Metro and Windows 8, especially those developers that want to get to market first and build the awareness and brand for their applications.

In order to submit your application today you need a token which is something I can help you get.

What do you need to do to get a token? Here are the key steps:

Read the rest of this entry »