Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with benefits


Published on

What would you say if I told you that you can use your actual HTML, CSS, and JavaScript skills to create an amazing Windows 8 application? That all the lovely features that you like so much about HTML5, can be used to create your next masterpiece? That you can use the magical JavaScript libraries you use everyday to get in the game more quickly? Be honest, you would say that I'm crazy... Maybe, or maybe not, only the attendees to this session will know!

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • This partnership has been designed to make developers some money…
  • This is big money .. Big money… Use an example of the math to make it stick… In the apple model, if you had $1M in sales, you would get $700K If on Windows, that would be $17.5K + 780K… == 87.K difference.. If you sold five 10 millions, the difference is $997500 … Making 10 M in revenue is not that hard given there is 500M users!!! At a price of $4.99, you would need to sell to less than 0.5% of the Windows customer base to make $10M..
  • THIS SLIDE DESERVES A LOT OF TIME… Discuss it by scenarios… Use examples:Existing commerce:Ebay can use their existing commerce system… from within their app and all the revenue of that transaction goes to Ebay.. A company like the Telegraph in the UK Ad supported is easy. Pick your favorite scenario.. Use Wordament if needed; they are in the store and they have a fake adTrials is easy.. In-App Purchases is very innovative.. You can get purchases that expire over time, for example “renting a book” for a week… or using the Premium subscription of animoto for a week and then going back to the basic subscription…
  • ** read the article in the link** Based on our lessons from Windows Phone, apps with trials get 70x more downloads.. And the conversion rate is pretty high (and quick, usually within hours a few hours ) … at 70x more downloads and a 10% conversion you end up with more revenue..
  • Emphasize strongly that their choice has to meet store policies and certification..
  • Position Visual studio as the ‘best of breed tool’ for developers among any tool out there. Position Blend as the best WYSIWYG interactive designer. They are complimentary, developers will need both.
  • Navigating from a web context page to a local context page is not allowed by default, but MSApp.addPublicLocalApplicationUrienables it.//This must be called from the local contextMSApp.addPublicLocalApplicationUri("ms-appx:///localpage.html");Declaring a Content URI in Visual studio will give a website access to geolocation, clipboard, indexed db, appcache, etc. Automatic filtering prevents script injection into DOM elements. For example, setting innerHTML, outerHTML, document.write, DOMParser.parseFromString.. Etc.. If you really trust what you are bringing in, you can use MSApp.execUnsafeLocalFunction or WinJS.Utilities.setInnerHTMLUnsafe, setOuterHTMLUnsafe, and insertAdjacentHTMLUnsafe are wrappers for calling DOM methods that would otherwise strip out risky content.
  • If you prefer to use your own library, you can. As long as your app is compliant with SDK, you will be fine.. At build, we explicitly wrote a sample (finance) using jQuery… It works very well.. If you are bringing your own library, here is the advise that I can give you:Mix & Match works fine. WinJS does a lot of things well, such as simplifying the object model, wrappers for file system, implementing the promise pattern, etc.. Use WinJS for all of that.. Use your favorite library for everything else, but do try to adhere to the Windows UI and the Windows personality. Your users will appreciate it if you do..
  • Call to action: Design your snap view to be useful so users will want to keep you on screenFor a content provider – lists/grids, then this is about relaying out.For other apps, think about the scenarios that are valuable and useful in the snapped view: Tile puzzle and Word Hunt are both great examples. They almost feel more tailored in snapped view. Example of leveraging the snapped view: In Word Hunt, in addition to the game board, provide a word list with links to definitions. Tapping on it will open the browser in filled.
  • Toronto User groups workshop - 2013-03-10 - HTML5 & Windows 8, friends with benefits

    1. 1. Content love
    2. 2. Windows Phone Developer blog, March 2011
    3. 3. // get current productvar currentProduct = Windows.ApplicationModel.Store.CurrentProduct;// get the license informationvar licenseInformation = currentProduct.licenseInformation;// check to see if the user has an active non-trial licenseif (licenseInformation.isTrial) { // user has trial version of the application // prompt them to purchase before so we can enable full functionalitycurrentProduct.requestProductPurchaseAsync().then( function () { // Purchase succeeded });}
    4. 4. // can’t do in-app purchase in trial mode, must convert firstif (!appLicensingInformation.isTrial) { //load the listings with all the products currentApp.loadListingInformationAsync().then( function (listing) { //lookup a specific product var product1 = listing.productListings.lookup("product1"); if (!product1.isActive) { // purchase currentApp.requestProductPurchaseAsync("product1").then( enableProduct1 ); } });
    5. 5. 1 2 3
    6. 6. The development tools are FREE!If you use a higher SKU, it just works!
    7. 7. demo
    8. 8. Feature Local context Web context Windows Run-time Yes No Windows Library for Yes No Javascript External script references No Yes Cross-domain XHR Yes No requests Automatic filtering for Yes No script injection on DOMThere are ways to communicate across contexts, ways to give websites access to some web standardsfeatures and ways to skip automatic filtering within a function.
    9. 9. demo
    10. 10. DatePicker SettingsFlyoutListview SemanticZoom Semantic Zoom Menu Flipview Flyout RatingSlide does not include all WinJS controls (App Bar, Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
    11. 11. <!– Step1: declare control --><div id=‚list‛ data-win-control="WinJS.UI.ListView"data-win-options="{ selectionMode: none }"></div>/* Step 2: Call WinJS.UI.processAll() *//* Step 3: Use the control */document.getElementById(‘list’).winControl.addEventListener(‘selectionchanged’, onSelChanged );
    12. 12. { /* Re-arrange and hide/show content */
    13. 13. demo
    14. 14. demo
    15. 15. MetroPress Free Open Source HTML5 Windows 8 template for WordpressSelf-hosted Windows 8 Easy to use & secret sauce & included Made by IdeaNotion
    16. 16. Ready to create the next app phenomenon?
    17. 17. Rewards examples – more on
    18. 18. Points structure