Yesterday we had the pleasure to present at TechDays 2012, with a session named “Windows 8 for Web Developers”. The topic of the presentation was how to develop Win8 Metro applications using HTML5, JavaScript and CSS3. Thanks to all of you that attended the session – we hope you enjoyed it as much as we did! :)

Below, you find the slides and also the links to many of the resources that we used when working on the presentation material. You find the code for the final demo here:

https://github.com/gustafnk/FeedReaderTechDays2012

The links

Resource sites

Microsoft Dev Center – Metro Style Apps
http://msdn.microsoft.com/en-us/windows/apps/br229512.aspx

Build 2011 on Channel 9 (Lots of great videos!)
http://channel9.msdn.com/Events/Build/Build2011

Blog posts

Introduction to developing Metro applications in HTML5

Stephen Walter has many nice intro posts on developing Metro applications with HTML5.
http://stephenwalther.com/blog/archive/category/metro

“What’s new in the Beta”

What’s New in the Beta Metro/JS Templates for VS11
http://www.sellsbrothers.com/Posts/Details/12716

Migrating your apps from Developer Preview to Consumer Preview
http://blogs.msdn.com/b/windowsappdev/archive/2012/03/08/migrating-your-apps-from-developer-preview-to-consumer-preview.aspx

What’s changed for app developers since //build/
http://blogs.msdn.com/b/windowsappdev/archive/2012/03/01/what-s-changed-since-build-part-1.aspx
http://blogs.msdn.com/b/windowsappdev/archive/2012/03/06/what-s-changed-for-app-developers-since-build-part-2.aspx

Tutorials

Create your first Metro style app using JavaScript (This is the tutorial that we based our final demo on!)
http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx

How to cook a complete Windows 8 application with HTML5, CSS3 and JavaScript in a week
http://blogs.msdn.com/b/eternalcoding/archive/tags/windows+8/

Quickstart: adding a SemanticZoom
http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx

Technology specific posts

HTML, CSS, and JavaScript features and differences
http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx

Hands On: CSS3 Grid Layout (IE10 only)
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm

Quickstart: Using single-page navigation
http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

Security contexts
http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx

Grouping and Semantic Zoom
http://debugmode.net/2012/03/21/listview-binding-with-grouping-and-semantic-zoom-in-windows-8-javascript-metro-application/

WinJS Promises: then and done
http://www.sellsbrothers.com/Posts/Details/12717

Making HTML safer: details for toStaticHTML
http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

HTML AppBar control sample
http://code.msdn.microsoft.com/windowsapps/App-bar-sample-a57eeae9

Videos

Debugging your Metro style apps using HTML
http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-514T

Introducing the Windows libraries for JavaScript
http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-501T

Building Metro style apps using JavaScript
http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-527C

WinJS Promises #1
http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2012/04/11/winjs-promises-1.aspx

Some issues we had

Blend For Visual Studio 11 get an error
http://stackoverflow.com/questions/9760643/blend-for-visual-studio-11-get-an-error