Welcome to Internet Explorer 8 Damian Edwards Senior Consultant Readify Lachlan Hardy Design Engineer Atlassian

Agenda The driving principles behind Internet Explorer 8 What are web standards and why should you care? Compatibility What about innovation? WebSlices & Activities What should I do now? Questions What are we going to talk about?

The driving principles behind Internet Explorer 8

What are web standards and why should you care?

Compatibility

What about innovation?

WebSlices & Activities

What should I do now?

Questions

What are we going to talk about?

The driving principles behind IE8 Interoperability Write web pages once and have them work cross browser Compatibility Don’t break web pages that are already out there Innovation Introduce new features without effecting the first two principles

Interoperability

Write web pages once and have them work cross browser

Compatibility

Don’t break web pages that are already out there

Innovation

Introduce new features without effecting the first two principles

Web Standards Driving interoperability between browsers

Driving interoperability between browsers

The Three Layers of Web Design The bare content of a web page: text, paragraph structure, images, tabular data Defined in W3C standards like HTML 4.01 and XHTML Represented by tags with semantic, contextual meaning Content tags include: <p>, <code> <h1>, <h2>, <h3> <em>, <strong>, <cite>, <abbr> <img>, <a>, <hr> <ul>, <ol>, <dl>, <table> Structural tags include: <div> <span> Markup file should consist of mostly content & structure The Content Layer

The bare content of a web page: text, paragraph structure, images, tabular data

Defined in W3C standards like HTML 4.01 and XHTML

Represented by tags with semantic, contextual meaning

Content tags include:

<p>, <code>

<h1>, <h2>, <h3>

<em>, <strong>, <cite>, <abbr>

<img>, <a>, <hr>

<ul>, <ol>, <dl>, <table>

Structural tags include:

<div>

<span>

Markup file should consist of mostly content & structure

The Content Layer

marking up content demo

Web Standards

The Three Layers of Web Design Typography Dimensions and positioning Background images and colours Borders, outlines and bullets Media specific support for visual browsers, aural devices, printers, Braille devices, handheld devices, etc. Defined in the W3C standard CSS 2.1 The Presentation Layer

Typography

Dimensions and positioning

Background images and colours

Borders, outlines and bullets

Media specific support for visual browsers, aural devices, printers, Braille devices, handheld devices, etc.

Defined in the W3C standard CSS 2.1

The Presentation Layer

Acid2 demo

adding style with CSS demo

Web Standards

The Three Layers of Web Design ECMAscript-262 (JavaScript) Manipulation of the HTML document Defined in W3C standard DOM 1.0 Level 2 Plug-ins The Behaviour Layer

ECMAscript-262 (JavaScript)

Manipulation of the HTML document

Defined in W3C standard DOM 1.0 Level 2

Plug-ins

The Behaviour Layer

adding behaviour with JavaScript demo

does it work? demo

Compatibility Who knows what a DOCTYPE switch is? First introduced in IE5 for Mac Worked for a while… Moving forward… version targeting How do we not “break the web”

Who knows what a DOCTYPE switch is?

First introduced in IE5 for Mac

Worked for a while…

Moving forward… version targeting

How do we not “break the web”

Compatibility IE8 uses a completely new rendering engine for standards mode, this is used by default for standards mode rendering Old rendering engine (IE7) is available in both quirks and standards mode IE8 includes improvements to the DOM implementation that may break existing sites, e.g. no more document.all Use the X-UA-Compatible http-equiv meta tag to target a rendering/scripting engine mode: IE8, IE7, IE5 (IE7 quirks) This will be supported going forward so that in IE9 you can target the IE8 rendering engine (no more quirks mode!) Version Targeting

IE8 uses a completely new rendering engine for standards mode, this is used by default for standards mode rendering

Old rendering engine (IE7) is available in both quirks and standards mode

IE8 includes improvements to the DOM implementation that may break existing sites, e.g. no more document.all

Use the X-UA-Compatible http-equiv meta tag to target a rendering/scripting engine mode: IE8, IE7, IE5 (IE7 quirks)

This will be supported going forward so that in IE9 you can target the IE8 rendering engine (no more quirks mode!)

Version Targeting

version targeting demo

What about Innovation? How does it fit with web standards? Graceful degradation Progressive enhancement Extend functionality Wide adoption brings wide implementation Standardisation!

How does it fit with web standards?

Graceful degradation

Progressive enhancement

Extend functionality

Wide adoption brings wide implementation

Standardisation!

Innovations in IE8 Defines a portion of a page that’s likely to change User can subscribe to that portion Highlighted in the page and toolbar like an RSS feed Added to the favourites bar, highlighted when new content is received Two classes from hAtom microformat and an extra container <div class=&quot; hslice &quot; id=&quot;1&quot; > <p class=&quot; entry-title &quot;>item - $66.00</p> <div class=&quot; entry-content &quot;>high bidder:buyer1 … </div> </div> WebSlices

Defines a portion of a page that’s likely to change

User can subscribe to that portion

Highlighted in the page and toolbar like an RSS feed

Added to the favourites bar, highlighted when new content is received

Two classes from hAtom microformat and an extra container

<div class=&quot; hslice &quot; id=&quot;1&quot; >

<p class=&quot; entry-title &quot;>item - $66.00</p>

<div class=&quot; entry-content &quot;>high bidder:buyer1

…

</div>

</div>

WebSlices

Innovations in IE8 Contextual menu options which quickly access a service from any web page Easiest way to create a “plug-in” that exposes the services of your web site Used for “look up” and “send to” operations Described via an XML file Installed via JavaScript: <button onclick=&quot;javascript:window.external.addService('GetMap.xml')&quot;> Add Map Activity</button> Activities

Contextual menu options which quickly access a service from any web page

Easiest way to create a “plug-in” that exposes the services of your web site

Used for “look up” and “send to” operations

Described via an XML file

Installed via JavaScript: <button onclick=&quot;javascript:window.external.addService('GetMap.xml')&quot;> Add Map Activity</button>

Activities

Innovations in IE8 <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <openServiceDescription xmlns=&quot;http://www.microsoft.com/schemas/openservicedescription/1.0&quot;> <homepageUrl>http://maps.live.com</homepageUrl> <display> <name>Map with Windows Live</name> <icon>http://www.live.com/favicon.ico</icon> </display> <activity category=&quot;map&quot;> <activityAction context=&quot;selection&quot;> <preview action= &quot;http://maps.live.com/geotager.aspx&quot;> <parameter name=&quot;b&quot; value=&quot;{selection}&quot;/> <parameter name=&quot;clean&quot; value=&quot;true&quot;/> <parameter name=&quot;w&quot; value=&quot;320&quot;/> <parameter name=&quot;h&quot; value=&quot;240&quot;/> </preview> <execute action=&quot;http://maps.live.com/default.aspx&quot;> <parameter name=&quot;where1&quot; value=&quot;{selection}&quot; type=&quot;text&quot; /> </execute> </activityAction> </activity> </openServiceDescription> Sample Activity

<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <openServiceDescription xmlns=&quot;http://www.microsoft.com/schemas/openservicedescription/1.0&quot;> <homepageUrl>http://maps.live.com</homepageUrl> <display> <name>Map with Windows Live</name> <icon>http://www.live.com/favicon.ico</icon> </display> <activity category=&quot;map&quot;> <activityAction context=&quot;selection&quot;> <preview action= &quot;http://maps.live.com/geotager.aspx&quot;> <parameter name=&quot;b&quot; value=&quot;{selection}&quot;/> <parameter name=&quot;clean&quot; value=&quot;true&quot;/> <parameter name=&quot;w&quot; value=&quot;320&quot;/> <parameter name=&quot;h&quot; value=&quot;240&quot;/> </preview> <execute action=&quot;http://maps.live.com/default.aspx&quot;> <parameter name=&quot;where1&quot; value=&quot;{selection}&quot; type=&quot;text&quot; /> </execute> </activityAction> </activity> </openServiceDescription>

Sample Activity

WebSlices & Activities demo

Innovations in IE8 Vastly improved JavaScript performance Adaptive Zoom DOM: Storage, Cross Document Messaging (XDM) CSS Selectors API ARIA support Consolidated Add-on management Security improvements Loosely-Coupled IE (LCIE) e.g. tabs run out-of-process Address bar improvements Other improvements

Vastly improved JavaScript performance

Adaptive Zoom

DOM: Storage, Cross Document Messaging (XDM)

CSS Selectors API

ARIA support

Consolidated Add-on management

Security improvements

Loosely-Coupled IE (LCIE) e.g. tabs run out-of-process

Address bar improvements

Other improvements

Summary Web standards are important to interoperability Web standards apply to the three layers of web design: Content Presentation Behaviour IE8 is better adhering to web standards, Acid2 Version targeting allows for compatibility Innovation is good when done correctly WebSlices & Activities What have we seen?

Web standards are important to interoperability

Web standards apply to the three layers of web design:

Content

Presentation

Behaviour

IE8 is better adhering to web standards, Acid2

Version targeting allows for compatibility

Innovation is good when done correctly

WebSlices & Activities

What have we seen?

What should you do now? Download IE8 Beta 1 for Developers Check your websites Add version targeting if needed Update your browser detection code User agent sniffing Conditional comments Learn to use CSS 2.1 WebSlices & Activities Be prepared for lacking tooling, put pressure back on the tooling vendors via blogs, etc.

Download IE8 Beta 1 for Developers

Check your websites

Add version targeting if needed

Update your browser detection code

User agent sniffing

Conditional comments

Learn to use CSS 2.1

WebSlices & Activities

Be prepared for lacking tooling, put pressure back on the tooling vendors via blogs, etc.

Resources IE Blog: http://blogs.msdn.com/ie W3Schools: http://w3schools.com http://xhtml.com/en/css/reference PositionIsEverything: http://www.positioniseverything.net A List Apart: http://www.alistapart.com W3C Validators (X)HTML: http:// validator.w3.org CSS: http://jigsaw.w3.org/css-validator MSDN HTML & CSS reference: http://msdn.microsoft.com/en-us/library/aa155110.aspx CSS Compatibility & Internet Explorer: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

IE Blog: http://blogs.msdn.com/ie

W3Schools: http://w3schools.com

http://xhtml.com/en/css/reference

PositionIsEverything: http://www.positioniseverything.net

A List Apart: http://www.alistapart.com

W3C Validators

(X)HTML: http:// validator.w3.org

CSS: http://jigsaw.w3.org/css-validator

MSDN

HTML & CSS reference: http://msdn.microsoft.com/en-us/library/aa155110.aspx

CSS Compatibility & Internet Explorer: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

© 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. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.