4. Goal
Use your existing skills to build apps
Learn few typical features

5. IS IMPORTANT
because
the web community is big

6. IS IMPORTANT
because
There are a lot of reusable things on the internet

7. IS IMPORTANT
because
It is reusable across multiple platforms

8. IS IMPORTANT
because
it is reusable across multiple platforms
with a minimum effort

9. How does HTML5 fit in the windows 8 platform

10. Windows 8 platform

11. Windows 8 platform

14. We will build this app

15. DEMO:
Turn an existing HTML website into a Win 8
Store application

18. From HTML to Win 8 in 3 steps
1. Use your existing HTML, CSS and JavaScript skills
2. Add typical Windows 8 features like:
 Tiles
 WinJS and WinJS controls
 Portrait, landscape, snapped and filled
 Contracts
 ...
3. Deploy your app to the store

19. Use your HTML and CSS skills

20. Popular HTML Features

21. Popular CSS feature

22. DEMO:
(re)use your html and css skills

23. WinJS

24. WinJS
Library for building Windows Store apps using JavaScript
Matches the Windows Store design guidelines
Offers controls for common user experiences
Designed for touch as well as traditional input
Scales across form factors

25. WinJS Contains

27. Or use your favorite library
like
jQuery, knockout, MooTools, Dojo, YUI

28. Dangerous scripts
Microsoft doesn’t allow code injection
if (isWin8) {
MSApp.execUnsafeLocalFunction(function () {
body.appendChild(container).appendChild(div);
});
}
else {
body.appendChild(container).appendChild(div);
}

29. WinJS Controls or Modern UI Controls

30. First, you have the standard HTML Controls
<button> <input> <select> <progress> ...

31. Then, you have WinJS or Modern UI Controls
based on a <div> or <span> element
with data-win-control to specify the control
and data-win-options to set properties

32. WinJS Controls

33. WinJS Styled Controls

34. More controls

35. Demo: Application bar

36. DEMO:
Application bar

37. Different states and orientations

38. Different states == Different UI

42. Different states == CSS3 Media Queries

43. Media Queries to support different
layouts
@media screen and (-ms-view-state: fullscreen-portrait) {}
@media screen and (-ms-view-state: fullscreen-landscape) {}
@media screen and (-ms-view-state: filled) {}
@media screen and (-ms-view-state: snapped) {}

47. Demo: Snapped application

48. DEMO:
Support different orientations

49. Contracts

50. Contracts
Every webdeveloper can choose where he wants to
put the search or share functionality
Every windows developer can choose where he
wants to put the option to change the settings

54. Contracts
Contracts enable integrating the
Windows 8 experience into your app

55. Contracts

56. Demo: Share Contract

57. DEMO:
Contracts

58. Tiles

59. Tiles
Tap on tile to launch or switch an app
Static tiles
Static default tile specified in app manifest
Square and wide tile
Dynamic Tiles
Can have live updates
Based on templates

61. Templates

62. TileUpdater

63. Demo: Tiles

64. DEMO:
Tiles

66. Resources
Images
If we don’t remember me
http://iwdrm.tumblr.com
Anonymous Ostrich
Klaus Delanghe