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

Chris WilsonChris WilsonIE Platform ArchitectMicrosoftMicrosoft

1

Compatibility vs InteroperabilityCompatibility vs. InteroperabilityWhat’s new in IE8O t iti f SitOpportunities for Site owners

Discussion

More info: http://blogs.msdn.com/ie

2

PredictabilityPredictabilityProgramming Powerg gPerformance

3

Work as expectedWork 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) expectWe can t tell if authors (and tools) expect standards, or if they expect past behavior

IE8’s “Best standards” is default for InternetB t th till t ll th b t “ ldBut authors can still tell the browser to use “old rendering” using an HTTP header or <meta>A thors choose to pgrade hen the ’re readAuthors choose to upgrade when they’re ready

P di t bilit t d d tPredictability means standards supportComplete standards – not just “good enough”

5

IE8 goal: complete CSS 2.1 complianceg p pBeta 2 implements every CSS2.1 property

New layout engineGreat typographic foundationDesigned with CSS 2.1 in handClear principles: compliance & interopNo more hasLayouty

6

The web needs interoperabilityThe web needs interoperabilityThe best way to get interoperability: comprehensive unbiased test suitescomprehensive unbiased test suites

Contributing our tests to the W3Cg>3200 tests contributedValidates (or corrects) our interpretationValidates (or corrects) our interpretationGoal: a complete, objective test suite

7

Improved HTML interoperabilityImproved HTML interoperability<object> and forms support, e.g.

Improved DOM complianceFixed attribute odditiesFixed attribute odditiesMany other changes – see IEBlog

DOM bj t t bilitDOM object mutabilitygetters and setters on DOM objectsg 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 eventIE updates the address bar and back buttonIE updates the address bar and back buttonAllows copy & paste of “Ajax URLs”

10

CSS Selector APIW3C Web Applications WG draft standard.querySelectorAll() – returns a StaticNodeList*

S l t () t th fi t hild l t.querySelector() – returns the first child elementAPIs can be called on Document or Element50x faster than Javascript tree traversal50x 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">[email protected]</span> </div>

var vcard; var name; var email;// G b ll d i th d t// Grab all vcards in the documentvar vcards = document.querySelectorAll(‘.vcard’);for (vcard in vcards) {

name = vcard.querySelector(‘.fn’);

11

q y ( );email = vcard.querySelector(‘.email’);

}

Web applications need local storageWeb applications need local storageCookies, UserData control

HTML5 adds the Storage interfaceHTML5 adds the Storage interfacesessionStorage (tab/session specific)localStorage (shared)Key/value string pairs10MB per domain, 100MB total

12

Network connectivity is transientNetwork connectivity is transientHTML5 adds online/offline eventsA d t t i di tAnd a state indicator

<!‐‐ Add handlers for online/offline events ‐‐><body ononline=“go_online()”

onoffline “go offline()”>;onoffline=“go_offline()”>;

// Find out if browser is online// Find out if browser is onlineonline = window.navigator.onLine;

13

The most interesting web applications mashThe most interesting web applications mash up data and components across domains

Without restrictions this is unsafeWithout restrictions, this is unsafeSo 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 partyProxying on the server side

Complicated, slower and costly.

14

Cross domain requests require mutualCross domain requests require mutual consent between the webpage and serverXDomainRequest (XDR)XDomainRequest (XDR)

Your app creates a XDomainRequest objectXDR opens a connection and requests data, sending Access Control HTTP header

S t W3C W b A WG A C t lSupports W3C Web Apps WG Access ControlXDR object gives your app the data IFF server responds with Access Control Allowedresponds with Access Control AllowedXDR is always anonymous (no cookies/auth)

15

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

16

Some scenarios want more of a “sandbox”Some scenarios want more of a sandboxFrames are used for this today….

but they need to add limited communication…but they need to add limited communicationAgain, both sides need to opt in to be “safe”tM / f HTML5postMessage/onmessage from HTML5

function postToIframe()function postToIframe(){

document.onmessage = receiver; // message handlervar ff = document.getElementsByTagName('iframe')[0];g y g ( )[ ];ff.contentWindow.postMessage('Hello',"http://contoso.com");

}

17

Often the “data” passed across domainOften the data passed across domain is HTML or JavaScript code, not text

2 fBeta 2 has two ways to make this safe:Native Javascript Object Notation (JSON)Native Javascript Object Notation (JSON) enables safe transfer of JS object datatoSafeHTML() allows any HTML to betoSafeHTML() – allows any HTML to be “sanitized” (removes “active content”)

18

Unlocking Web 2 0 with W3C ARIAUnlocking Web 2.0 with W3C ARIAARIA enables accessible web 2.0 appsARIA l t t d ti blARIA roles, states, and properties enable assistive technology (e.g. screenreaders)

Improved Zoom Experiencep p

19

Hardcore focus on performancepWe focus on “real-world” performanceMANY changes post beta2 to improve perfMANY changes post-beta2 to improve perf

JavaScript improvementsFaster native JavaScript operationsBetter GC, Faster DOM object lookups, j pPre-parser doesn’t block at script tags

Network perf is frequently the problemNetwork perf is frequently the problemConnections increased to 6 (2 on modems)

20

CSS/HTML/Javascript debugger “in the box!”

Debug and profile JavaScriptExecution control (breakpoints step into etc )Execution control (breakpoints, step into, etc.)Variable inspection (watches, locals, etc.)Immediate windowImmediate windowNew profiler lets you examine perf of your code

D b CSS d HTMLDebug CSS and HTMLView and trace effective stylesView layout (box model) infoView layout (box model) infoEdit HTML and CSS live – with save to file!Change browser mode & document mode

21

g

Users already use lots of web servicesUsers already use lots of web servicesMaps: Windows Live, Yahoo, MapQuestBlogs: Facebook, MySpace, BloggerEmail: 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" ?> <openServiceDescriptionxmlns="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>

25

</openServiceDescription>

//check if service is already installed//check if service is already installedwindow.external.IsServiceInstalled

(http://maps.live.com/livemaps.xml);(http://maps.live.com/livemaps.xml);

//if false, display button to add service// f f , p ywindow.external.AddService

(http://maps.live.com/liveMaps.xml) ;

26

Users monitor lots of content on the webUsers monitor lots of content on the webAuctions, 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 the current item is the important one

They’re not “the page,” so not always updated

27

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

28

hAtom Microformat describes a feed & itemshAtom Microformat describes a feed & itemsWebSlice builds on hAtom

hAt t t ti t thAtom can represent static contentWebSlice is dynamic content

Webslice reuses properties on hAtomAdds optional properties for subscribingp p p g

ttl – time-to-live valuefeedurl – alternative path to get updatesendtime – When the feed item is no longer relevant

Can be applied to an hAtom

29

The Windows Feeds Platform now supportsThe Windows Feeds Platform now supports both feeds and WebSlices

Converts WebSlice HTML to Atom feedConverts WebSlice HTML to Atom feedAccessible by Feed APISaniti es content (no script)Sanitizes content (no script)

Feeds Platform adds Authentication SupportHTTP-based Authentication (Basic & Digest)HTTP based Authentication (Basic & Digest)Basic auth via SSLUses saved creds for background download

30

Uses saved creds for background download

Multi-tiered systemMulti tiered systemReport a Webpage Problem Tool IE B t NIE Beta Newsgroup (http://go.microsoft.com/fwlink/?LinkId=110585)P bli V t IE8 T h B t bPublic Votes on IE8 Tech Beta bugsIE8 Tech Beta – committed bug filersAutomated Customer Feedback

31

IE8 Beta2 for Windows XP & Windows Vistahttp://www microsoft com/ie/ie8http://www.microsoft.com/ie/ie8

Please, test your web content and apps!Use X-UA-Compatible as a toolpMove the web toward standards content

We want your feedback!Visit the IEBlog & Developer Center for moreVisit the IEBlog & Developer Center for more

32

When are you going to ship?When are you going to ship?When it’s ready. We will have a public Release Candidate build – a “final” buildCandidate build a final build.

Are you adding SVG/XHTML/? to IE8?IE8 B t 2 ti ll l tf l tIE8 Beta 2 was essentially platform-complete

Why aren’t you supporting SVG/XHTML/?We know these are important. They didn’t make this release.

33

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

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.

[email protected]

34

p p g y y p pMICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Date post:	10-Dec-2014
Category:	Technology
Upload:	association-paris-web
View:	4,087 times
Download:	0 times

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

Technology