DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
•Download as PPTX, PDF•
0 likes•315 views
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
Similar to DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits (20)
More from Frédéric Harper
More from Frédéric Harper (20)
Recently uploaded
Recently uploaded (20)
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
- 1. Windows 8 & HTML5: friends with benefits DevTeach Montreal – 2012-12-11 Frédéric Harper Technical Evangelist @ Microsoft Canada @fharper | outofcomfortzone.net
- 2. WINDOWS 8
- 4. Great experience across all hardware
- 11. demo
- 13. IE9 hardware-accelerated platform CSS 2D Transforms Data URI HTML5 Canvas CSS Backgrounds & Borders DOM Element Traversal HTML5 Geolocation CSS Color DOM HTML HTML5 Selection CSS Fonts DOM Level 3 Core HTML5 semantic elements CSS Media Queries DOM Level 3 Events HTML5 video and audio CSS Namespaces DOM Style ICC Color Profiles CSS OM Views DOM Traversal and Range Selectors API Level 2 CSS Selectors DOMParser and XMLSerializer SVG, standalone and in HTML CSS Values and Units ECMAScript 5 XHTML/XML
- 14. IE10 hardware-accelerated platform CSS 2D Transforms DOM HTML HTML5 Selection DOM Level 3 Core HTML5 semantic elements DOM Level 3 Events CSS Backgrounds & Borders DOM Style HTML5 video and audio CSS Color DOM Traversal and Range DOMParser and XMLSerializer ICC Color Profiles CSS Fonts ECMAScript 5 CSS Media Queries Selectors API Level 2 CSS Namespaces CSS OM Views HTML5 Canvas SVG, standalone and in HTML Web Messaging CSS Selectors HTML5 Geolocation CSS Values and Units XHTML/XML Data URI DOM Element Traversal
- 15. Popular CSS3 features in Windows 8
- 16. demo
- 17. Popular HTML5 features in Windows 8
- 18. demo
- 19. From IE10 web app to Windows app • Minor API differences http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx • Different host No plug-ins in Windows apps Trust level differences (local and web context) http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx • UX [recommended] • Windows 8 features [recommended]
- 20. Context in HTML/JS Windows apps Feature Local context Web context Windows Run-time Yes No Windows Library for Yes No Javascript External script No Yes references Cross-domain XHR Yes No requests Automatic filtering for Yes No script injection on DOM There are ways to communicate across contexts, ways to give websites access to some web standards features and ways to skip automatic filtering within a function.
- 21. TOOLS
- 22. demo
- 23. WINJS
- 24. Windows Library for JavaScript (WinJS)
- 25. WinJS
- 26. WinJS controls DatePicker SettingsFlyout Listview SemanticZoom Semantic Zoom Menu Flipview Flyout Rating Slide does not include all WinJS controls (App Bar, Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
- 27. demo
- 28. Prefer your own library? Go ahead! • Adhere to the Windows UI and personality • Understand our web context & sandboxing model • Mix & match works fine
- 31. Ready to create the next app phenomenon? The Developer Movement is giving you the chance! DeveloperMovement.ca/APPS
- 32. About • Publish awesome Windows apps • And collect points every step of the way to redeem great rewards like a pair of Monster Headphones and much more! Victory is only an app away. It’s time to make yours the next big thing! Join The Developer Movement now! DeveloperMovement.ca/APPS
Editor's Notes
- “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
- 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.
- 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.
- Content before Chrome is a core principle to Metro-styled design
- 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
- 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
- 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
- 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)
- 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/)
- 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
- 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
- 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.
- 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..
- 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..
- 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..
- 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
- 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