2. I’m a Web developer, I don’t know (atall) Microsoft technologies. I already developed an HTML5 web page. I want to create the Windows 8 app of my page.
3. My existing web page: home.dollon.net
4. Compatible with all last browsers on PC andtablets.Works with HTML5 and CSS3 features,knockout.js, jQuery, less (and node.js web service)
6. So now, please Microsoft, where is the rightbutton click“Transform this website as a metro style app for Windows8”?
7. It does not exist. And it’s normal.Because you are working for a specific kind of tabletwith native call (new API, new controls…) and NEWdesign style (metro).You are not designing a web page. You are developing anative app.
8. 9 things to migrate your HTML5 app on Windows 8 environment.
9. 0 – which kind of tools I need?* *this point is not included on the counter ☺
11. 1 - what is a package?
12. a package is a ZIP file Don’t forget to obfuscate your code It’s the ‘executable’ of your project It contains everything (HTML, JS, Manifest..)After installation, the app is located here c:Program FilesWindowsApps
13. You can use PowerShell to deploy it And all packages are signed with certificates
14. 2 – what happens in runtime?
16. Process state transitions A user App is launch an Suspended Terminated running appAn app gets 5 secondes to handle suspend and isnotified when it has been resumedApp is not notified before a termination caused bylow resources
17. 3 – Differences between Metro style app And traditional HTML5 web page
18. ALL*HTML5/CSS3 features are supported *if IE10 “trident” layout engine support it
20. Native APIs DOM Events Namespaces Controls Enumerations No Java, Silverlight, Flash and other embedded componentsSome ActiveX controls are disabled
22. And you have to know thatseriouslyROCKS!
23. This isn’t just a container like PhoneGap It doesn’t run in a browser
24. REUSE THE SAME CODE Just to see if it works ☺
25. 4 – what is WinRT?
26. Windows RT != WinRT (Windows RT is the Windows 8 version for ARM)
27. WinRT Resides directly on the top of the kernel just like the Win32 APIWinRT APIs are written in unmanaged C++and designed to be object-oriented
28. 5 – what is WinJS?
29. WinJS is the orange layer
30. A language projection exists for .NET and C++ too
31. Windows library for JS Helpers Animations Templates Styles App Model Data Binding Controls Navigation
34. Built-in ControlsMetro-UI Styles Touch enabled Native CustomizableAll basic controls Controls Same in XAML
35. AppBarUseful to bring up commandson demandDon’t forget to use Charmsfor some entry points
36. MODIFY THE APP With Windows 8 controls
37. 7 – Multiple Views and Resolutions
38. The principal screen can be at minimum1024x768It exists widescreen (1366x768+)Two other modes: snapview and portait
39. Use three kind of image size (100%,140% and 180%).Depending on the resolutions, imagesare loaded automaticallyImage.jpg Image.scale-180.jpg
40. Use of CSS media queries
41. MODIFY THE APP Screens
42. 7 – Use Contracts
43. Share to export the current contentSearch to find contentFile Picker to allow user to access content fromoutsideSettings to configure the app
44. MODIFY THE APP Contracts
45. 8 – Use Tiles
46. Tiles is the “link” to open your appIt could be a “secondary tiles”Can provide a lot of information (icons,notifications, counter)
47. MODIFY THE APP With Tiles and Splash
48. 9 – Debugging and Performances
50. A Metro style app using HTML5 is more than a web page …
52. Further optimizationsDefer some initialization to after the splash screen Start network downloads after initialization Delay loading databasesConsolidate small JS files that are related into larger filesIf you need more time, use an extended splash screen
54. On suspend, free resources that are easy to recreate Use media content from the user at the screen resolution Tune your app launch time to create great firstimpressions Keep your app alive by minimizing your memory footprint Be responsive, don’t block the UI thread
57. Debugging with BlendUnderstand your CSS with the Winning Rule and Show SetProperties modeDebug device-state issues with the Platform and StylesPanesCatch grid layout issuesFind parser-generated elements with the Live DOMDiagnose post-interaction problems with Interactive Mode
58. 10 – Deployment But no info now, it still not possible to publish app
60. ConclusionSkydrive with all samples / slides / videos: http://sdrv.ms/KsoFUq Webcast of this session on YouTube:
61. Q&A(Don’t hesitate togive us feedbacks ontwitter @juliendollon/ @soumow)