Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Windows 8 & HTML5: friends with benefitsDevTeach Montreal – 2012-12-11Frédéric HarperTechnical Evangelist @ Microsoft Cana...
WINDOWS 8
Windows reimagined
Great experience across all hardware
Content Before Chrome
demo
MORE WEB STANDARDS
IE9 hardware-accelerated platform CSS 2D Transforms           Data URI                      HTML5 Canvas CSS Backgrounds &...
IE10 hardware-accelerated platform CSS 2D Transforms           DOM HTML                      HTML5 Selection              ...
Popular CSS3 features in Windows 8
demo
Popular HTML5  features in  Windows 8
demo
From IE10 web app to Windows app• Minor API differences       http://msdn.microsoft.com/en-us/library/windows/apps/hh70040...
Context in HTML/JS Windows apps       Feature                   Local context            Web context       Windows Run-tim...
TOOLS
demo
WINJS
Windows Library for JavaScript (WinJS)
WinJS
WinJS controls                                                                 DatePicker                SettingsFlyoutLis...
demo
Prefer your own library? Go ahead!• Adhere to the Windows UI and personality• Understand our web context & sandboxing mode...
Ready to create the next app phenomenon?The Developer Movement is giving you the chance!    DeveloperMovement.ca/APPS
About• Publish awesome Windows apps• And collect points every step of the way to redeem great rewards  like a pair of Mons...
QuestionsFrédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
Upcoming SlideShare
Loading in …5
×

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

450 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Windows 8 & HTML5: friends with benefitsDevTeach Montreal – 2012-12-11Frédéric HarperTechnical Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net
  2. 2. WINDOWS 8
  3. 3. Windows reimagined
  4. 4. Great experience across all hardware
  5. 5. Content Before Chrome
  6. 6. demo
  7. 7. MORE WEB STANDARDS
  8. 8. 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
  9. 9. 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
  10. 10. Popular CSS3 features in Windows 8
  11. 11. demo
  12. 12. Popular HTML5 features in Windows 8
  13. 13. demo
  14. 14. 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]
  15. 15. 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.
  16. 16. TOOLS
  17. 17. demo
  18. 18. WINJS
  19. 19. Windows Library for JavaScript (WinJS)
  20. 20. WinJS
  21. 21. WinJS controls DatePicker SettingsFlyoutListview SemanticZoom Semantic Zoom Menu Flipview Flyout RatingSlide does not include all WinJS controls (App Bar, Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
  22. 22. demo
  23. 23. Prefer your own library? Go ahead!• Adhere to the Windows UI and personality• Understand our web context & sandboxing model• Mix & match works fine
  24. 24. Ready to create the next app phenomenon?The Developer Movement is giving you the chance! DeveloperMovement.ca/APPS
  25. 25. 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
  26. 26. QuestionsFrédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net

×