Download as PDF, PPTX
More Related Content
Similar to Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
- 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 HTML5fit in the windows 8 platform
- 10.
- 11.
- 14. We will buildthis app
- 15. DEMO: Turn an existingHTML website into a Win 8 Store application
- 18. From HTML toWin 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 HTMLand CSS skills
- 20.
- 21.
- 22. DEMO: (re)use your htmland css skills
- 23.
- 24. WinJS Library for buildingWindows 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.
- 27. Or use yourfavorite library like jQuery, knockout, MooTools, Dojo, YUI
- 28. Dangerous scripts Microsoft doesn’tallow code injection if (isWin8) { MSApp.execUnsafeLocalFunction(function () { body.appendChild(container).appendChild(div); }); } else { body.appendChild(container).appendChild(div); }
- 29. WinJS Controls orModern UI Controls
- 30. First, you havethe standard HTML Controls <button> <input> <select> <progress> ...
- 31. Then, you haveWinJS 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.
- 33.
- 34.
- 35.
- 36.
- 37. Different states andorientations
- 38. Different states ==Different UI
- 42. Different states ==CSS3 Media Queries
- 43. Media Queries tosupport 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.
- 48.
- 49.
- 50. Contracts Every webdeveloper canchoose 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 Contractsenable integrating the Windows 8 experience into your app
- 55.
- 56.
- 57.
- 58.
- 59. Tiles Tap on tileto 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.
- 62.
- 63.
- 64.
- 66. Resources Images If we don’t remember me http://iwdrm.tumblr.com Anonymous Ostrich Klaus Delanghe