Welcome to IE8 - Integrating Your Site With Internet Explorer 8

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 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

Web Standards
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

marking up content demo

Web Standards

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

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”

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

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!

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=" hslice " id="1" >
<p class=" entry-title ">item - $66.00</p>
<div class=" entry-content ">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="javascript:window.external.addService('GetMap.xml')"> Add Map Activity</button>
Activities

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

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
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
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

© 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.

http://log.lachstock.com.au	64
http://lachstock.com.au	12
http://feeds.feedburner.com	1

Welcome to IE8 - Integrating Your Site With Internet Explorer 8

by Lachlan Hardy on May 23, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 77

Statistics

Welcome to IE8 - Integrating Your Site With Internet Explorer 8 — Presentation Transcript