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=quot;vcardquot;>
<span class fn >Chris Wilson</span> s email:
<span class=quot;fn“>Chris Wilson</span>’s email:
<span class=quot;emailquot;>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(quot;getquot;, 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',quot;http://contoso.comquot;);
}

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=quot;1.0quot; encoding=quot;utf‐8quot; ?>
<openServiceDescription
xmlns http://www.microsoft.com/schemas/openservicedescription/1.0 >
xmlns=quot;http://www.microsoft.com/schemas/openservicedescription/1.0quot;>
<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=quot;Mapquot;>
<activityAction context=quot;selectionquot;>
<execute method=quot;get“
action=quot;http://maps.live.com/default.aspx?where1={selection}quot; />
<preview method=quot;getquot; action=quot;http://maps.live.com/geotager.aspxquot;>
<parameter name=quot;bquot; value=quot;{selection}quot; />
p { }
<parameter name=quot;cleanquot; value=quot;truequot; />
<parameter name=quot;wquot; value=quot;320quot; />
<parameter name=quot;hquot; value=quot;240quot; />
<parameter name= format value= full />
<parameter name=quot;formatquot; value=quot;fullquot; />
</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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (19)

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

Similaire à IE 8 et les standards du Web - Chris Wilson - Paris Web 2008 (20)

Plus de Association Paris-Web

Plus de Association Paris-Web (20)

Dernier

Dernier (20)

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