Your SlideShare is downloading. ×
0
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Use html5 to build what you want, where you want it

536

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
536
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Goal Use your existing skills to build apps Learn few typical features
  2. IS IMPORTANT becausethe web community is big
  3. IS IMPORTANT becauseThere are a lot of reusable things on the internet
  4. IS IMPORTANT becauseIt is reusable across multiple platforms
  5. IS IMPORTANT becauseit is reusable across multiple platformswith a minimum effort
  6. How does HTML5 fit in the windows 8 platform
  7. Windows 8 platform
  8. Windows 8 platform
  9. We will build this app
  10. DEMO:Turn an existing HTML website into a Win 8Store application
  11. From HTML to Win 8 in 3 steps1. Use your existing HTML, CSS and JavaScript skills2. Add typical Windows 8 features like:  Tiles  WinJS and WinJS controls  Portrait, landscape, snapped and filled  Contracts  ...3. Deploy your app to the store
  12. Use your HTML and CSS skills
  13. Popular HTML Features
  14. Popular CSS feature
  15. DEMO:(re)use your html and css skills
  16. WinJS
  17. WinJSLibrary 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
  18. WinJS Contains
  19. Or use your favorite library like jQuery, knockout, MooTools, Dojo, YUI
  20. Dangerous scriptsMicrosoft doesn’t allow code injection if (isWin8) { MSApp.execUnsafeLocalFunction(function () { body.appendChild(container).appendChild(div); }); } else { body.appendChild(container).appendChild(div); }
  21. WinJS Controls or Modern UI Controls
  22. First, you have the standard HTML Controls<button> <input> <select> <progress> ...
  23. Then, you have WinJS or Modern UI Controlsbased on a <div> or <span> elementwith data-win-control to specify the controland data-win-options to set properties
  24. WinJS Controls
  25. WinJS Styled Controls
  26. More controls
  27. Demo: Application bar
  28. DEMO:Application bar
  29. Different states and orientations
  30. Different states == Different UI
  31. Different states == CSS3 Media Queries
  32. Media Queries to support differentlayouts @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) {}
  33. Demo: Snapped application
  34. DEMO:Support different orientations
  35. Contracts
  36. ContractsEvery webdeveloper can choose where he wants toput the search or share functionalityEvery windows developer can choose where hewants to put the option to change the settings
  37. Contracts Contracts enable integrating the Windows 8 experience into your app
  38. Contracts
  39. Demo: Share Contract
  40. DEMO:Contracts
  41. Tiles
  42. TilesTap on tile to launch or switch an appStatic tiles Static default tile specified in app manifest Square and wide tileDynamic Tiles Can have live updates Based on templates
  43. Templates
  44. TileUpdater
  45. Demo: Tiles
  46. DEMO:Tiles
  47. ResourcesImages If we don’t remember me http://iwdrm.tumblr.comAnonymous Ostrich Klaus Delanghe

×