Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS

Editor's Notes

• #3: DO NOT brush over this slide. Pure Imagination is as much a social event as it is a technical event. Get people talking and sharing. Remind them of this and encourage them to LIKE the page or follow on twitter if they haven’t done so already. Ensure that they use the right hashtag when tweeting. Also clarify that in the FB address, it is “pee-eye” on “pee-elle”.
• #4: Fill in your session code. Your track owner will provide this to you. The final hashtag should look like #[track][code] #Win8PI. Eg. #DES1 #Win8PI.
• #5: Windows reimaginedFor consumers, for developers
• #8: [Speak to bullets as presented above]Analytics DetailsKey pivots:Audience demographics (age, gender, country)Device class (tablet, laptop, etc.)Paid vs. FreeKey MeasuresVol. of apps (download and submissions)Top grossingTop AppsRatingsReviewsApp quality (hangs, crashes)App performance (relative to category/sub-category)Referrals (how did people discover your app?)
• #9: Windows is, by far, the largest platform in the world. There are over a billion Window PCs in current use, including 500m Windows 7 devices as of last December. In fact, over the last two years, there have been more Windows licenses sold than Android, iOS and Macs combined.Every Windows 7 PC can run Windows 8Most Windows licenses are sold with a new PCThis is a huge developer opportunity..
• #10: We are everywhere.Mention localization. You can capitalize on that and make a lot more money. NOTE: YOU MUST READ THIS BLOG POST FOR YOUR LOCAL DETAILS http://blogs.msdn.com/b/windowsstore/archive/2012/01/05/global-reach.aspx Buy from 231 markets.. 45 market-specific app catalog..sLocal pricing in 40 markets *** Developer payments in 51 markets.. Is not in slide, keep it relevant to locale **
• #12: You are here !! The focus will be HTML/JS… Click… But do remember WInRT is helping.. And is available to provide infrastructure.. We will see a little bit of WinRT in action in some demos
• #13: Talking Track:IE10 is the next step in hardware-accelerated standards with 33 new standards supported (3x more than IE9). It’s easier to design your site layout including flexbox, grid, animations, and transitionsDrag and drop, forms, and FileAPI make the web feel more like native applicationsSandbox, IndexedDB and a new set of Performance APIs help you build faster, more secure sites with large data setsChanges between IE9 to IE10 also demonstrate how standards-based technologies evolve:WebSockets is a great example of this, which delivers real-time notifications and updates in the browser. The spec has made significant progress in the past months in working groups like the W3C. Microsoft tests and vets specs like WebSockets in our HTML5 Labs and has contributed over 456 new test cases since IE9 launch. In this case, WebSockets was stabilized and recommended to the Internet Engineering Steering Group for final approval. It was included into IE10 through our platform previewsLinks:List of IE10 supported standards (http://msdn.microsoft.com/en-us/library/ie/hh673549(v=vs.85).aspx)Site-ready web sockets (http://blogs.msdn.com/b/ie/archive/2011/09/15/site-ready-websockets.aspx)HTML5 Labs (http://html5labs.interoperabilitybridges.com/)IE Testing Center (http://samples.msdn.microsoft.com/ietestcenter/)
• #16: Now we can get into the details.. Again, since the platform is HTML you can take advantage of the HTML DOM elements.. WinJS has CSS that customizes the look & feel of standard DOM elements to match the Windows personality..
• #17: Don’t forget to mention these are optimized too.. We have ensured the library is all independent animation.. Also, explain to the users that if they need their own animations for their own controls, they can still use the core animations for their own controls.. Use the default
• #18: Become familiar with these by running the animation demo first.
• #19: 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..
• #21: Your app can be displayed in any of the following sizes:Snapped: 320x768 (a minimum of 1366x768 is required to support snapped view)Full screen landscape / filled: minimum 1024x768Full screen portrait: minimum 768x1024Although there are an infinite number of supported sizes, it is important to verify your application in the most common application dimensions, namely:1024px by 768px1366px by 768px
• #22: As screen’s pixel density increase, UI elements will get smallerTo maintain consistent physical sizes of UI elements for touchability and readability, the system automatically scales UI up by 1.4x or 1.8x based on DPI & resolution
• #23: Inside of windows 8 we have the ability to make a more immersive app. And visual studio helps by giving us templates for a single page application.The application starts on the default.html page. This page has a container called contenthost. On page navigation instead of switching to a page, the application inserts the new page data into the contentHost container.This creates a fast and smooth experience, and allows scripts and data to be shared across pages.
• #24: We want to start our project using the Navigation App project template. You can find the Navigation App template under “javascript” in the New Project menu The template will give you an empty application to transfer the existing html5 game into.This will allow us to easily build out the different sections of our app
• #25: Porting your game is as easy as dropping your game assets into your new Visual Studio project. For YetiBowl we created a separate folder called GameLibrary to hold all of our game specific code.NOTE: if you did the live preview you used a blank up, but here we are preparing to add new features that can only be done inside an app, so we are using navigation to build different pages.
• #26: To add another page to the application:In the solution explorer, right click the pages folder and select New Folder. Name it “game.html”Right click the game folder and select Add > New Item.Select Page Control and use the name “game.html” and hit AddThis will generate three files: “game.html”, “game.js” and “game.css”Game.html will be document that your game canvas will liveFor this application we want to give the user the ability to add there own customized hikers to the game.We can repeat these steps to add a few pages for adding and editing hikers
• #27: Inside the package.appxmanifest file is where you will want to define your logos, names, splash screens and other key features of your app.Your app will not pass store certification unless you have customized the data in this file.NOTE: if you did the demo build on the app, you may not need to get into many details here, if not, besure you walk through requirements for logos, splashscreen etc..
• #28: WinJS is a library that visual studio adds for you to your windows 8 projects. Although it’s not a necessary component for an app, it provides you will many helpful APIs and utilities.
• #29: Were still using web technologies inside the app, so we are still using hyperlinks, but we want them to navigate in between our pages instead of to different websites.We want to override the links normal behavior and use WinJS.Navigation instead. We can do this by binding a click event to all links and calling “WinJS.Navigation.navigate”Now links load there content into our default.html page
• #30: This method is helpful to define blocks of script that you want to execute per page.This function is what we use to trigger the startgame() method, when a user navigates to the game page in the ready event.
• #31: One of our advanced features in this game, is the ability to customize your hikers. Hikers are saved as local data.We need to create a global list of hikers that we can display, add/edit and then use as a data source for our in game hiker characters. First we're going to create a WinJS.Binding.List and populate it with some default hikers.
• #32: This function allows you to create your own namespace as a way of organizing your code.To be able to access your methods or data objects from external sources (buttons in the DOM or other classes), it needs to have a public name space.This is another features that we get for free with “WinJS”
• #33: Now that we have our hikers data structure, we want to display our list of hikers using the WinJS.UI.ListView like this.
• #34: Using this binding list we can create a WinJS.UI.ListView in hikers.htmlWe pass in a few options to the controlitemDataSource: this tells the control where its data source comes fromitemTemplate: the template that should be rendered for each item (we will create this next)
• #35: the “win-data-bind” attribute lets you bind data from each item to DOM properties in template elements.
• #36: Inside the pagename.js file that is loaded when this file is linked to, a simple method called “WinJS.UI.processAll()” is called.This reviews the page and executes the templates, in this case building the views from the data object.
• #37: Using CSS you can change the template to look however you like
• #45: The shift in focus is crucial – it means that the users, instead of remembering how to use the software, are remembering the content – the news story they read about, the social updates from their friends, the products they are shopping for.
• #47: Windows 8 is about putting the app on the center stage. Content is the heart of any experience, and everything else are only tools to let you consume and interact with your contentIt’s important to think about how to leverage this real estate and place content first, so that users can actually be immersed in the things they love.Where does chrome come from? LayoutCommandsNavigationLet’s look at how we handle these in a Content first world
• #48: The app bar can give contextual commands to your ListView control.We will add our app bar to hikers.html
• #49: To add a command to the AppBar is simple
• #50: - id: this sets the id attribute - label: the text under the command - icon: the icon style
• #51: Attaching events to commands can be done with addEventListener
• #59: As the speaker of the session, we’ll depend on you encourage folks to submit their session evaluation. It is in the best interest of both you and the Pure Imagination team to get the details. For you, to know how your content and presentation skills landed, and for the Pure Imagination team to see which sessions did well for repeats and which sessions may need tweaking for future presentations.To facilitate getting the data, Pure Imagination is using Poll Everywhere. Since it is an external company, this slide must be shown to attendees and virtual followers. You can summarize verbally by saying “I’m required to show this to you. The gist is that for your evals, Pure Imagination is using a service called Poll Everywhere and as part of submitting your eval, there is absolutely no collection of personal information, etc.”
• #60: Fill in the URL with your session code. Your track owner will provide this to you. The final URL should look like w8pi.ca/[track][code]eval. Eg. W8pi.ca/des1eval. For aesthetic purposes, do not include “http://” at the beginning of the URL.