Archives For CSS3

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!

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…

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.

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…

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…

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.

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.

I recently announced the release of two Windows 8 templates on GitHub.  This article will go through a technical overview of the Windows 8 Finder App Template and how to get started with it.

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 visually display on a map. If no point of interest data set is available, it is accompanied by a backend NodeJS server which allows the importing of data which can be used to feed the Windows 8 application.

In Part 1 of this article we will go through the Windows 8 Finder Template and set it up to consume various feeds to display on a map. In Part 2, I’ll cover the backend NodeJS server and how to get started with that. Continue Reading…

win8logo-11324441

For the past month we have been busy putting together some Windows 8 templates to help developers build apps for Windows 8 faster. With the help of Barranger, I have built out two Windows 8 templates with each having a companion backend server.

If you are a regular reader of my blog, your will know that almost everything I do is .NET C#/XAML development.  For these templates, I decided to go the HTML5/CSS/JavaScript route and use WinJS for Windows 8 client apps. On the backend decided to use NodeJS on Windows Azure with a MongoDB data store on MongoLab.

So what templates are being released?

Finder App Template

The Windows 8 Finder App 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.

screenshot_02152013_022850

In the template, we have included some pre-defined point of interest feeds. If those are not exactly what you are looking for, you have the option to use the optional backend NodeJS server which allows the importing of data which can then be used to feed the Windows 8 application.

Both the Windows 8 Finder Template source code and NodeJS Finder App Server source code can be found on GitHub.

Hero App Template

The Windows 8 Hero App Template is a template developed to allow developers to quickly and easily create an application to collect certain information while out in the field on a Windows 8 device. For example, if a developer wanted to create an app to allow people to submit information on roads needing pothole repairs, the Hero App Template is a good starting point.  The Hero App Template is a derivative of the Windows 8 Finder App Template described above.

screenshot_02152013_024300

The Hero App Server is a required component and essentially provides a server to collect submitted data and feed the data back to users. It is a branch from the Finder App Server so is similar but adds more functionality.

Both the Windows 8 Hero App Template and NodeJS Hero App Server source code can be found on GitHub.

What’s Next?

So feel free to download and start playing with them and share any feedback.  I’ll be following up next with quick start guides on both templates and how to get up and running.