Windows Phone & HTML5 Sample App Summary

I recently wrote a four part article about how to build a simple count down timer app using HTML5 and Windows Phone.  The articles covered getting started with HTML5 and Windows Phone, multiple resolutions, using the WebBrowser control to ‘talk’ to web page and finally getting ready for Windows Phone Store certification.

Here is the result of the articles.

finalImage

Here is a list of the articles available for easy reference

  1. XBoxReveal HTML5 Windows Phone Sample
  2. XBoxReveal HTML5 Windows Phone Sample: Multiple Resolutions
  3. XBoxReveal HTML5 Windows Phone Sample: WebBrowser Control
  4. XBoxReveal HTML5 Windows Phone Sample: Store Certification

As for the source code, if you want to run it yourself you can download the #xboxreveal source code from GitHub.

Hope it was useful and please leave comments or questions!

XBoxReveal HTML5 Windows Phone Sample: Store Certification

In this final article of the XBoxReveal HTML5 Windows Phone sample, I’ll be going through some of the things you need to do as a developer to get ready for Windows Store Certification.

If you have not read the previous articles, here is a list for some background

  1. XBoxReveal HTML5 Windows Phone Sample
  2. XBoxReveal HTML5 Windows Phone Sample: Multiple Resolutions
  3. XBoxReveal HTML5 Windows Phone Sample: WebBrowser Control

Getting Ready for Store

The first thing you want to do to get ready for Windows Phone Store certification is read the App Certification Requirements for Windows Phone article on MSDN.  Lucky for the people who don’t like going through the entire document (like me 🙂 the Windows Phone SDK comes with a Store Test Kit to help go through the cert process.

wp-testkit

Continue reading XBoxReveal HTML5 Windows Phone Sample: Store Certification

XBoxReveal HTML5 Windows Phone Sample: WebBrowser Control

In this third installment of the Windows Phone HTML5 XBox Reveal sample, we’ll look at fixing the horizontal and vertical scrolling of the index.html

Here are the first articles available if you have not read them yet for some background

  1. HTML5 & Windows Phone: XBox Reveal Sample
  2. HTML5 & Windows Phone: Multiple Resolutions

Usually using CSS you would fix horizontal scrolling by setting the following meta tag in your HTML page.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Unfortunately this does not work within our app. But fortunately for us, there is a fix to this but does take a little extra work.

Continue reading XBoxReveal HTML5 Windows Phone Sample: WebBrowser Control

XBoxReveal HTML5 Windows Phone Sample

Over the past few months we have been doing a lot of Windows 8 development but using HTML5 and JavaScript instead of C# and XAML. Unfortunately Windows Phone does not have built in support for WinJS but what it does have the latest IE 10 browser on board plus we have the WebBrowser control available.

Recently, with the XBox announcement, we decided to build out a Windows Phone app that counts down to the reveal date which looks as follows. We have the app in certification as of May 3 2013 (submitted April 30), but is still going through the process. As I don’t expect it to pass because of the XBox logo usage, decided to make a tutorial out of it. But for all those enthusiast (and developers), you can grab the source and install on your Windows Phone.

1-720p

Continue reading XBoxReveal HTML5 Windows Phone Sample

Windows 8 HTML/JavaScript Sessions at DevTeach

DevTeach is coming to Toronto May 27-31st and I’ll be doing a couple of session on developing Windows 8 apps using HTML5 and JavaScript

Designing Windows Store HTML5/JavaScript Apps Using Blend and Visual Studio

Embrace the Windows 8 design principles by taking full advantage of the rich feature sets offered by both Blend and Visual Studio. Learn how to start from scratch and have a fully functioning (and visually appealing!) application that highlights how to work with styles, controls, data sources, layout, CSS3 transitions, web services, and many other features that help you create a better user experience with greater productivity.

JavaScript, HTML, and Windows Store Apps

In this talk we’ll cover the basics of creating a Windows Store app experience using HTML and JavaScript, including the Windows Library for JavaScript (WinJS). Topics will include how to leverage your existing HTML and JavaScript skills, how to integrate Windows 8 personality and contracts into your app, and how Microsoft Visual Studio 2012 provides tools to make this easy and fast.

There are also a bunch of other sessions on Agile, Architecture, Mobile, Cloud Computing, SQL and other topics by some great speakers so be sure to register for DevTeach and attend!

Building Windows 8 Apps with HTML5 & JavaScript

Recently I was asked to do a webcast on Building Windows 8 Apps with HTML5 & JavaScript as part of the Developer Movement Web Camp.

WEBC1_Custom

Here is a list of some of the content covered:

Throughout some of the demos, I showed the Contoso Cookbook.  The original download for Contoso Cookbook which goes through a lot of concepts is available in the Windows 8 Camp in a Box.

Here is a list of the links used for some of the demos and links to source code

  1. Demo 1
    1. Windows 8 HTML5 Platform
    2. 3D Transforms
    3. CSS3 Grid Layouts
  2. Demo 2
    1. Touch Effects
    2. Touch Effects in Windows 8 Source Code
  3. Demo 3 – Contoso Cookbook
  4. Demo 4 – Windows 8 Twitter Search App
  5. Demo 5 – Animation Library Sample

Here is the video which is hosted on the Channel 9 site and be sure to check out all the other Developer Movement Web Camp presentations including my other one A Lap Around Windows 8 Development for HTML Developers.

A Lap Around Windows 8 Development for HTML Developers

labWin8

During the  Developer Movement Web Camp I presented on Building Windows 8 Apps with HTML5 & JavaScript and as a deeper dive, I also presented Lap Around HTML Development for Windows 8 where I covered the features of WinJS and some of the WinJS Controls in more details. Here is a list of some of the topics covered:

  1.  WinJS Promises
  2. WinJS Animation Library
  3. Camera Capture in Windows 8
  4. Windows.Devices.Sensors
  5. MSPointer in WinJS
  6. WinJS Tiles & Notifications
  7. Windows Push Notification Service
  8. WinJS Contracts

A lot of the demos where off the MSDN sample site and listed here for easy download

  1. Demo 1,6,8,9 – Contoso Cookbook
  2. Demo 2 – Controls
    1. HTML Essential Controls
    2. ListView Essential Samples
  3. Demo 3 – Animation Library Sample
  4. Demo 4
    1. Camera Capture UI Sample
    2. Media Capture Sample
  5. Demo 5 – Canvas Paint Sample
  6. Demo 7 – App Tiles & Badges Sample

Throughout some of the demos, I showed the Contoso Cookbook.  The original download for Contoso Cookbook which goes through a lot of concepts is available in the Windows 8 Camp in a Box.

Here is the video which is hosted on the Channel 9 site and be sure to check out all the other Developer Movement Web Camp presentations.

Quick Start Guide to Windows 8 Finder Template Backend Server

I recently released two Windows 8 templates on GitHub with an accompanying quick start guide for the Finder App Template. This article will go through the optional NodeJS backend server and how to get started with it and connect it to the Windows 8 template.

Introduction

The Windows 8 Finder Template is a template developed to allow developers to quickly and easily create a location based type application for the Windows 8 store.  It allows a developer to easily pull existing point of interest data into the app to display on a map. If no point of interest data is available, it is accompanied by a backend server which allows the importing of data which can be used to feed the Windows 8 application.

In Part 1 of this article we went through the Windows 8 template and set it up to consume various feeds to display on a map.

In this part, we will go through some of the features of the NodeJS backend server and how to connect to the Windows Finder App Template.

NOTE: the backend server is optional and not required for the Windows 8 Finder App Template. Continue reading Quick Start Guide to Windows 8 Finder Template Backend Server