1 / 24

Lighting up in Windows: f rom w ebsites to apps

Lighting up in Windows: f rom w ebsites to apps. Justin Garrett, Senior Product Manager Can Comertoglu, Senior Business Development Manager 3-137. Agenda. What’s possible in IE10 5 cross-browser tips with IE 4 ways to light-up in Windows 8. Internet Explorer 10. More web standards

heriberto
Télécharger la présentation

Lighting up in Windows: f rom w ebsites to apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lighting up in Windows: from websites to apps Justin Garrett, Senior Product Manager Can Comertoglu, Senior Business Development Manager 3-137

  2. Agenda • What’s possible in IE10 • 5 cross-browser tips with IE • 4 ways to light-up in Windows 8

  3. Internet Explorer 10 More web standards with HTML5 New developer tools Built for touch in Windows 8

  4. IE9 hardware-accelerated platform CSS 2D Transforms CSS Backgrounds & Borders CSS Color CSS Fonts CSS Media Queries CSS Namespaces CSS OM Views CSS Selectors CSS Values and Units Data URI DOM Element Traversal DOM HTML DOM Level 3 Core DOM Level 3 Events DOM Style DOM Traversal and Range DOMParser and XMLSerializer ECMAScript 5 HTML5 Canvas HTML5 Geolocation HTML5 Selection HTML5 semantic elements HTML5 video and audio ICC Color Profiles Selectors API Level 2 SVG, standalone and in HTML XHTML/XML

  5. IE10 hardware-accelerated platform CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Backgrounds & Borders CSS Color CSS Flexbox CSS Fonts CSS Grid CSS Hyphenation CSS Image Values (Gradients) CSS Media Queries CSS multi-column Layout CSS Namespaces CSS OM Views CSS Positioned Floats (Exclusions) CSS Selectors CSS Transitions CSS Values and Units Data URI DOM Element Traversal DOM HTML DOM Level 3 Core DOM Level 3 Events DOM Style DOM Traversal and Range DOMParser and XMLSerializer ECMAScript 5 File Reader API File Saving FormData HTML5 Application Cache HTML5 async HTML5 BlobBuilder HTML5 Canvas HTML5 Drag and drop HTML5 Forms and Validation HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript Typed Array ICC Color Profiles IndexedDB Page Visibility Pointer (Mouse, Pen, and Touch) Events RequestAnimationFrame Navigation Timing Selectors API Level 2 SVG Filter Effects SVG, standalone and in HTML Web Messaging Web Sockets Web Workers XHTML/XML XMLHttpRequest (Level 2) XMLHttpRequest CORS

  6. The web ecosystem… • 55% • …is still where the most users spend their time in Windows 8

  7. The web ecosystem… • 55% • …means mobile http://www.businessinsider.com/state-of-internet-slides-2012

  8. 5 cross-browser tips with IE

  9. Write cross-browser code Do This… …To get this • Declare <!DOCTYPE html> • Code with HTML5 & CSS3 • Implement feature detection • Upgrade your frameworks • One cross-browser standard • Use the technologies you want • Less time testing browsers • Small pain, big gain

  10. Use Compat Inspector • 30% better page load performance in IE10 through Standards Mode • Compat Inspector+ Fiddler = automatic old markup detection

  11. Unplug your site • Faster, more consistent, more secure user experience for rich media: Feature detect plug-in free: Fallback gracefully: <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />

  12. Be device independent • Media queries & listeners+ Viewport + CSS Grid / Flexbox / Multi-column

  13. Build the basics for touch • Make sure your site works without a mouse • Do not hide behavior behind Hover • Configure your default touch experiences: -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;

  14. demos Atari Arcade Contre Jour Pulse.me t.msn.com

  15. 4ways to light-up in Windows 8

  16. Pinning in Windows Pinning features • Put your site brand on a tile right next to apps on the Windows 8 Start Screen • High resolution tile icon using PNG image • Update your users with tile notifications even when not browsing Benefits to your business • Increased brand exposure on Windows 8 PCs • When users pin your site, they visit it more often, spend more time and go deeper(15 to 45% more engagement on average on top sites) • Live notifications remind your users of deals, social updates, breaking news which increases repeat visits <metaname="msapplication-TileImage"content="logo.png"/> <metaname="msapplication-TileColor"content="#123456"/>

  17. Share charm in Windows Share features • Lights up with Facebook’s Open Graph • Users can share rich, well structured content with their apps • Your site is integrated with the common sharingexperience in Windows Benefits to your business • Draw in new users through linking back shared content • Control how your data is shared via Open Graph • Less need to manage social network plug-ins on your site <metaname="title"content="{SiteTitle}"/> <metaname="description"content="{Site Description}"/> <metaproperty="og:image"content="{image_link}"/>

  18. Flip ahead & Snap Features • Easier for touch navigation on small screens • Flip-ahead, directed forward or “next page” browsing with single swipe • Responsive design = Windows Snap Benefits to your business • Extend the touch-first Windows experienceto your site • Take advantage of flip-ahead to streamlinenavigation • Increase on-site time by providing anoptimized snap view

  19. Connecting your site to your app App bridge features • Drive app adoption from website • Pass contextual information to your app • Build customized notification for amplified messaging Benefits to your business • Turns site visitors into residents • Data flows seamlessly between website and app • Partner websites can launch your application with site specific data <meta name="msApplication-ID“ content="microsoft.build.App"/> <meta name="msApplication-PackageFamilyName“ content="microsoft.build_ID"/>

  20. demos BuildMyPinnedSite.com CNN.com Clipboard.com Inrixtraffic.com

  21. Wrap up • Write cross-browser code • Create device independent sites (and apps) • Be closer to your users in Windows 8

  22. Get deeper on the tech • //Deep dive into WinJS - Josh Williams/ • //Casual games with HTML5 – Giorgio Sardo/ • //Don’t break the web - Rey Bango/

  23. Resources • Develop: http://msdn.microsoft.com/ie • Demos and code: http://ietestdrive.com • Build a tile: http://buildmypinnedsite.com Please submit session evals by using the Build Windows 8 app or at http://aka.ms/BuildSessions

More Related