DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits

Editor's Notes

• #4: “Let’s talk Windows. We like to talk of Windows 8 as Windows reimagined with a new start screen, unified input across touch, mouse and keyboard but preserving all the great work that we did in Windows 7”.Makes Windows 7 even better --- Everything that runs on Windows 7 still runs on Windows 8 (in the same architecture)Reimagines Windows from chipset to experiencenew range of capabilities, scenarios and form factors
• #5: and one key point I want to make is that we don’t see Windows 8 as a slate OS or a tablet OS. We see it as a unifying OS. Spanning different kinds of devices and we’ve done a tonne of work to make that happen.
• #6: 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.
• #8: Content before Chrome is a core principle to Metro-styled design
• #9: 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
• #11: 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
• #12: One or more of these, bold is preferred. CSS CSS Hands-on:http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/Grid system: http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default.htmlGradient Editorhttp://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
• #14: Talking Track:IE9 was a first step towards modern web standards. Our approach was to build on a stable, site-ready technologies that developers could confidently use including HTML5 Canvas, Video/Audio, SVG, and Geolocation.IE9 also introduced the concept of a faster browser through hardware acceleration. It’s the idea that a browser can take full advantage of modern PC hardware (like a graphics card or GPU) to deliver web performance that is a good as native apps in Windows. Developers needs only write their sites with web standards to take advantage of it.Links:Site-ready web standards (http://blogs.msdn.com/b/ie/archive/2011/06/29/site-ready-html5-second-ie10-platform-preview-available-for-developers.aspx)Hardware acceleration (http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx)
• #15: 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/)
• #17: One or more of these, bold is preferred. CSS CSS Hands-on:http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/Grid system: http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default.htmlGradient Editorhttp://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
• #19: Choose two or three of the many demos we have on the IE 10 testdrive site. Try to end up on a high/graphical note.. Like the touch demo..Ecmascript5http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlFormshttp://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlTouchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects/Web workershttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html
• #20: 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.
• #23: File New Project in Visual Studio Intellisense on Javascript.. Demonstrate Simulator Demonstrate DOM explorer using the simulator.. Set a breakpoint in the Debugger … a good place for this is the navigated event in navigator.js Open Javascript console .. Now type vardlg = new Windows.UI.Popups.MessageDialog("test") ; dlg.showAsync().then ( function () {} ) ; Comment out that this is the same text we used earlier.. Notice the javascript syntax in showAsync.. Tease the audience.. Will this work? Injecting a statement? Open Contoso Recipes in Blend .. Make sure this is a copy for this session. You don’t want your changes preservedDemonstrate how blend uses live data … Explain the solution is data driven, yet it is all showing. Style something, demonstrating that blend is great for styling.. Drag a control somewhere into layout..
• #25: Demonstratecontoso recipes application Show the use of the module pattern in javascript… Show the use of a promise.. Show the navigation Show the WinJS.application object To see all of these, it is trivial to do a search on the solution for //DEMO:WinJS and you will be able to see areas to set breakpoints for discussion..
• #26: 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..
• #30: Explain that what you are going to see is HTML5 and CSS3 and most of this is equally applicable to IE and Windows 8… Talk about being able to build great apps by leveraging the skills
• #31: Explain that what you are going to see is HTML5 and CSS3 and most of this is equally applicable to IE and Windows 8… Talk about being able to build great apps by leveraging the skills