1. Windows 8 and Metro-AppsWindows 8 App using HTML5 and JavaScript Ankur MishraChristian Moser Zhlke 2011

2. Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 3. Windows 8?Metro-Style Apps fr Windows82/9/2013Christian MoserWindows 8 App Using HTML5 and JavaScript | Ankur Mishra Zhlke 2011 4. Desktop : Starts in a few seconds ! New Task Manager ! Improved Copy ! Explorer Ribbon ! "Factory Reset" and? Refresh function ! Internet Explorer 10 ! Automatic synchronization? Into the Cloud (Sky Drive) !Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 5. Metro UI Metro-Style Apps fr Windows 8 2/9/2013 Christian Moser Zhlke 2011 6. Metro DesktopThe new lock screen 7. Examples of Metro Style Apps 8. The Metro Design Principles : Pride in craftsmanshipA good user experience comes only with a cleancraft in all disciplines Be fast and fluidApps are responsive, intuitive, touch-optimized andsmooth.. Authentically DigitalConnected, dynamic, active, strong colors, moves Do more with lessContent instead of chrome, to be good atsomethingWindows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 9. Interaction with the Metro desktop Charms (The 5 major system functions,Task switching Are always available)Appear when the fingersis wiped from the touch-edge.App-BarsWindows 8 App Using HTML5 and JavaScript | Ankur Mishra2/9/2013 Zhlke 2011 10. Variations that would support every app :Snapped and full screen Horizontal and Vertical screen sizes ResolutionsWindows 8 App Using HTML5 and JavaScript | Ankur Mishra2/9/2013 Zhlke 2011 11. Layout Grid :A consistentLayout Grid providesconsistent Appearance. Visual Studio 12 providesReady-made templates for this.Windows 8 App Using HTML5 and JavaScript | Ankur Mishra2/9/2013 Zhlke 2011 12. Contracts Applications interact via "Contracts" with each other Without knowingeach other. Each application can offer contracts that make sense to use. Windows 8 supports three contracts: Share (Push Content) Picker (Pull Content) Search (Find Content)Windows 8 App Using HTML5 and JavaScript | Ankur Mishra2/9/2013 Zhlke 2011 13. Live Tiles Icons are outdated, static, boring and offer little benefit. Live Tiles are alive, personally, appealing to date and informative Apps can content as secondary tiles with "deep link" to the desktop set(weather stations, friends, important share prices, ...)Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 14. Cloud-Integration The user logs in once a Windows Live Users with Windows Each Metro Style app gets in the cloud storage for user settings and smallercontent. Therefore, settings can be easily synchronized between multiple computers. Begins to read an ebook and need to get away ... ... The book opens on the right sideWindows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 15. What makes a good Metro App1. Appears completely in the Metro-style design.2. Feels fast and fluid3. Supports scaling, snapping and alignment in a meaningful way.4. Implement meaningful Contracts (Search, Share, Picker).5. Provides valuable information on their live tile.6. Always feel connected, current and alive.7. Large power of the cloud for data synchronization.Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 16. Metro Style Apps : Metro-Style Apps fr Windows 8 2/9/2013 Christian Moser Zhlke 2011 17. Windows Runtime (WinRT)Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 18. Language Projection Metro-style apps can be written equivalent in C + +, C #, VB or JSC# var fp = new FileOpenPicker(); var result = await fp.PickSingeFileAsync(); C++ auto fp = Windows::Storage::Pickers::FileOpenPicker(); auto result = fp->PickSingeFileAsync(); JavaScript var fp = new Windows.Storage.Pickers.FileOpenPicker; fp.pickSingleFileAsync().then();Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 19. Windows Store App.Lets Try !!Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 20. Metro-Style Controls Christian Moser Zhlke 2011 21. Windows 8 brings a number of newcontrols : WebView (without problems AirSpace) ListView / GridView / FlipView / Jump View (with "semantic zoom") Media player with controls Toggleswitch Extended TextBox Progress ringWindows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 22. Comparison of Desktop and Metro :Metro Apps Desktop SoftwareMain input medium TouchMouse / KeyboardUI-Style Metro WindowsRuntime WinRT (Win32) .NET/SL/Win32DistributionWindows StoreDownload WebseiteInstallation .appx Package MSISystem Access Only about WinRTFull accessConclusion Business applications will continue to be primarily mouse andkeyboard-based and based on WPF / SL / HTML or C + +.Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 23. Windows StoreChristian Moser Zhlke 2011 24. Navigation im Windows Store 1. Store Home : List of all categories of good, popular apps. (Can not be bought)2.Second View :Possibilities with allthe apps, Categoryand filter. 3. Application DetailWindows 8 App Using HTML5 and JavaScript | Ankur Mishra2/9/2013 Zhlke 2011 25. Application details :ReviewsFeedback from customers, Through the app.Without buying,Try !!.Used resourcesWindows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 26. Licensing models :* After Certification. The store supports Metro Style Apps and ordinaryWin32 (desktop) apps. Licenses are per user (account). Please be roamedautomatically. Microsoft earned 30% Apps are downloaded 10 times more often if theyoffer a trial 10% of the trials will be purchased later "In-App" purchasesWindows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 27. Wenn die App im Store ist The Developer Dashboard lists, All apps.1. Vorbereitung 2. Submission 3. Nutzungsstatistik 4. Crash-DataWindows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 Zhlke 2011 28. For more Ping me :@er_ankur_mishra/ankurmishrayugalankur.mishra@uen.inankur.mishra@studentpartner.comwww.ankurmishra.in | www.Go4Every.com | www.blog.uen.inWindows 8 App Using HTML5 and JavaScript | Ankur Mishra2/9/2013 Zhlke 2011