IE 8 et les standards du Web - Chris Wilson - Paris Web 2008

Chris Wilson IE Platform Architect Microsoft 1

Compatibility vs Interoperability vs. What’s new in IE8 O t iti f Sit Opportunities for Site owners Discussion More info: http://blogs.msdn.com/ie 2

Predictability Programming Power g g Performance 3

Work as expected (i.e. follow the standard and be interoperable)? Work as expected (i.e. do what you used to and be compatible)? 4

We can t tell if authors (and tools) expect can't standards, or if they expect past behavior IE8’s “Best standards” is default for Internet But th B t authors can still t ll th b till tell the browser t use “ ld to “old rendering” using an HTTP header or <meta> A thors choose to upgrade when the ’re read Authors pgrade hen they’re ready Predictability P di t bilit means standards support t d d t Complete standards – not just “good enough” 5

IE8 goal: complete CSS 2.1 compliance g p p Beta 2 implements every CSS2.1 property New layout engine Great typographic foundation Designed with CSS 2.1 in hand Clear principles: compliance & interop No more hasLayout y 6

The web needs interoperability The best way to get interoperability: comprehensive unbiased test suites g Contributing our tests to the W3C >3200 tests contributed Validates (or corrects) our interpretation Goal: a complete, objective test suite 7

Improved HTML interoperability <object> and forms support, e.g. Improved DOM compliance Fixed attribute oddities Many other changes – see IEBlog DOM object mutability bj t t bilit g getters and setters on DOM objects j 8

Surprise! The IE6-era web app platform isn’t complete. 9

, Set Window.location.hash, IE does the rest IE fires an window.onhashchange event IE updates the address bar and back button Allows copy & paste of “Ajax URLs” 10

CSS Selector API W3C Web Applications WG draft standard .querySelectorAll() – returns a StaticNodeList* .querySelector() – returns the first child element S l t () t th fi t hild l t APIs can be called on Document or Element 50x faster than Javascript tree traversal <div class=\"vcard\"> <span class fn >Chris Wilson</span> s email: <span class=\"fn“>Chris Wilson</span>’s email: <span class=\"email\">cwilso@microsoft.com</span> </div> var vcard; var name; var email; // Grab all vcards i th d // G b ll d in the documentt var vcards = document.querySelectorAll(‘.vcard’); for (vcard in vcards) { name = vcard.querySelector(‘.fn’); q y ( ); email = vcard.querySelector(‘.email’); } 11

Web applications need local storage Cookies, UserData control HTML5 adds the Storage interface sessionStorage (tab/session specific) localStorage (shared) Key/value string pairs 10MB per domain, 100MB total 12

Network connectivity is transient HTML5 adds online/offline events And A d a state i di t t t indicator <!‐‐ Add handlers for online/offline events ‐‐> <body ononline=“go_online()” onoffline=“go_offline()”>; onoffline “go offline()”>; // Find out if browser is online online = window.navigator.onLine; 13

The most interesting web applications mash up data and components across domains Without restrictions, this is unsafe restrictions So today, XHR is restricted to Same Origin You can circumvent this by: Using script (not restricted to SOP) Can be dangerous, if you don’t trust the third party Proxying on the server side Complicated, slower and costly. 14

Cross domain requests require mutual consent between the webpage and server XDomainRequest (XDR) Your app creates a XDomainRequest object XDR opens a connection and requests data, sending Access Control HTTP header Supports W3C Web Apps WG Access Control S t W bA A C t l XDR object gives your app the data IFF server responds with Access Control Allowed XDR is always anonymous (no cookies/auth) 15

// 1. Create XDR object var xdr = new XDomainRequest(); // 2. hook up callback for data xdr.onload = readData(); (); // 3. Set‐up connection to an XDR server xdr.open(\"get\", www.contoso.com/xdr.htm); // // 4. Send async request to server S d t t xdr.send(); // 5. Retrieve text in callback (changeState()) // 5 Retrieve text in callback (changeState()) xdr.responseText 16

Some scenarios want more of a “sandbox” sandbox Frames are used for this today…. …but they need to add limited communication but Again, both sides need to opt in to be “safe” postMessage/onmessage f tM / from HTML5 function postToIframe() { document.onmessage = receiver; // message handler var ff = document.getElementsByTagName('iframe')[0]; g y g ( )[ ]; ff.contentWindow.postMessage('Hello',\"http://contoso.com\"); } 17

Often the “data” passed across domain data is HTML or JavaScript code, not text Beta 2 has two ways to make this safe: f Native Javascript Object Notation (JSON) enables safe transfer of JS object data toSafeHTML() – allows any HTML to be “sanitized” (removes “active content”) 18

Unlocking Web 2 0 with W3C ARIA 2.0 ARIA enables accessible web 2.0 apps ARIA roles, states, and properties enable l t t d ti bl assistive technology (e.g. screenreaders) Improved Zoom Experience p p 19

Hardcore focus on performance p We focus on “real-world” performance MANY changes post-beta2 to improve perf post beta2 JavaScript improvements Faster native JavaScript operations Better GC, Faster DOM object lookups , j p Pre-parser doesn’t block at script tags Network perf is frequently the problem Connections increased to 6 (2 on modems) 20

CSS/HTML/Javascript debugger “in the box!” Debug and profile JavaScript Execution control (breakpoints step into etc ) (breakpoints, into, etc.) Variable inspection (watches, locals, etc.) Immediate window New profiler lets you examine perf of your code D b CSS and HTML Debug d View and trace effective styles View layout (box model) info Edit HTML and CSS live – with save to file! Change browser mode & document mode g 21

Users already use lots of web services Maps: Windows Live, Yahoo, MapQuest Blogs: Facebook, MySpace, Blogger , , Email: Hotmail, Yahoo, Gmail Productivity: Translate, Search, Dictionary But this is a manual process! p 22

Accelerators connect users to their existing services, from anywhere they may go on the web Easy for web publishers to implement (no client code) 23

http://www.paris-web.fr/2008/-Lieux- 24

<?xml version=\"1.0\" encoding=\"utf‐8\" ?> <openServiceDescription xmlns http://www.microsoft.com/schemas/openservicedescription/1.0 > xmlns=\"http://www.microsoft.com/schemas/openservicedescription/1.0\"> <homepageUrl>http://maps.live.com</homepageUrl> <display> <name>Map with Live Maps</name> <icon>http://maps.live.com/favicon.ico</icon> <icon>http://maps live com/favicon ico</icon> </display> <activity category=\"Map\"> <activityAction context=\"selection\"> <execute method=\"get“ action=\"http://maps.live.com/default.aspx?where1={selection}\" /> <preview method=\"get\" action=\"http://maps.live.com/geotager.aspx\"> <parameter name=\"b\" value=\"{selection}\" /> p { } <parameter name=\"clean\" value=\"true\" /> <parameter name=\"w\" value=\"320\" /> <parameter name=\"h\" value=\"240\" /> <parameter name= format value= full /> <parameter name=\"format\" value=\"full\" /> </preview> </activityAction> </activity> </openServiceDescription> 25

//check if service is already installed window.external.IsServiceInstalled (http://maps.live.com/livemaps.xml); // f f //if false, display button to add service , p y window.external.AddService (http://maps.live.com/liveMaps.xml) ; 26

Users monitor lots of content on the web Auctions, weather condition, top news story... But this is also a manual process! Navigate to page, check price – rinse & repeat Feeds can be used for this scenario… …but the current item is the important one but They’re not “the page,” so not always updated 27

WebSlices enable publishers to mark up “subscribe-able” parts of web pages, allowing you to monitor your favorite dynamic pieces of the web 28

hAtom Microformat describes a feed & items WebSlice builds on hAtom hAt t t ti t t hAtom can represent static content WebSlice is dynamic content Webslice reuses properties on hAtom Adds optional p p p properties for subscribing g ttl – time-to-live value feedurl – alternative path to get updates endtime – When the feed item is no longer relevant Can be applied to an hAtom 29

The Windows Feeds Platform now supports both feeds and WebSlices Converts WebSlice HTML to Atom feed Accessible by Feed API Sanitizes Saniti es content (no script) Feeds Platform adds Authentication Support HTTP based HTTP-based Authentication (Basic & Digest) Basic auth via SSL Uses saved creds for background download 30

Multi tiered Multi-tiered system Report a Webpage Problem Tool IE Beta Newsgroup B t N (http://go.microsoft.com/fwlink/?LinkId=110585) Public Votes P bli V t on IE8 Tech Beta bugs T hB t b IE8 Tech Beta – committed bug filers Automated Customer Feedback 31

IE8 Beta2 for Windows XP & Windows Vista http://www.microsoft.com/ie/ie8 http://www microsoft com/ie/ie8 Please, test your web content and apps! Use X-UA-Compatible as a tool p Move the web toward standards content We want your feedback! Visit the IEBlog & Developer Center for more 32

When are you going to ship? When it’s ready. We will have a public Release Candidate build – a “final” build final build. Are you adding SVG/XHTML/? to IE8? IE8 Beta 2 was essentially platform-complete B t ti ll l tf l t Why aren’t you supporting SVG/XHTML/? We know these are important. They didn’t make this release. 33

Chris.Wilson@microsoft.com Chris Wilson@microsoft com © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market p conditions, it should not be interpreted to be a commitment on the p of Microsoft, and Microsoft cannot g part y guarantee the accuracy of any information provided after the date of this p y p presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. 34

IE 8 et les standards du Web - Chris Wilson - Paris Web 2008

0 comments

Notes on slide 1

2 Favorites & 1 Event