• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Internet Explorer 8 for Developers by Christian Thilmany
 

Internet Explorer 8 for Developers by Christian Thilmany

on

  • 5,064 views

Internet Explorer 8 for Developers

Internet Explorer 8 for Developers

Statistics

Views

Total Views
5,064
Views on SlideShare
5,053
Embed Views
11

Actions

Likes
1
Downloads
61
Comments
1

1 Embed 11

http://www.slideshare.net 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

  • Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Internet Explorer 8 for Developers by Christian Thilmany Internet Explorer 8 for Developers by Christian Thilmany Presentation Transcript

  • Christian Thilmany [email_address] blogs.flyover18.com/christhi
  • Internet Explorer 8
    • Standards Interoperability Improvements
    • CSS 2.1, HTML 4.01, HTML 5 DOM Storage, etc.
    • Multiple rendering modes support, Acid2 test passes!
    • New Features
    • Accelerators / Activities
    • WebSlices
    • Visual Search
    • Favorites bar
    • AJAX Improvements
    • Automatic crash recovery
    • Security Features
    • Platform Enhancements
    • Performance improvements
    • Developer tools
  • Versioning and IE Modes
    • Compatibility Modes
    • IE8 Standard (default) – CSS 2.1-compliant
    • IE7 Emulation – backward compatibility with IE7
    • IE5 Compatible – IE5 rendering behavior
    • Mode Switches (Opt-in)
    • HTTP header: X-UA-Compatible: IE=7
      • For example, Web.Config in IIS7:
        • <httpProtocol>
        • <customHeaders>
        • <clear />
        • <add name=&quot;X-UA-Compatible&quot; value=&quot;IE=7&quot; />
        • </customHeaders>
        • </httpProtocol>
    • JavaScript: document.documentMode
    • Meta tag: <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=7&quot;>
  • Demo
  • Accelerators / Activities
    • Contextual Menu Options
    • Based on content selection
    • “ look up” & “send to” external services
    • In-place content preview
    • Implementation
    • OpenService Activity XML descriptor
    • http://www.microsoft.com/schemas/openservicedescription/1.0
    • HTTP GET/POST
    • JavaScript integration
    • window.external.AddService() & IsServiceInstalled()
    • Sample XML descriptor
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
    • <os:openServiceDescription xmlns:os=&quot;http://www.microsoft.com/schemas/openservicedescription/1.0&quot;>
    • <os:homepageUrl>http://maps.live.com</os:homepageUrl>
    • <os:display>
    • <os:name>Map with Live Maps</os:name>
    • <os:icon> http://www.live.com/favicon.ico</os:icon>
    • </os:display>
    • <os:activity category=&quot;map&quot;>
    • <os:activityAction context=&quot;selection&quot; >
    • <os:preview action=&quot;http://maps.live.com/geotager.aspx?b={selection}&clean=true&w=320&h=240&quot;></os:preview>
    • <os:execute action=&quot;http://maps.live.com/default.aspx&quot;><parameter name=“w1&quot; value=&quot;{selection}&quot; /></os:execute>
    • </os:activityAction>
    • </os:activity>
    • </os:openServiceDescription>
  • OpenService Format
    • <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?>
    • <os:openServiceDescription xmlns:os=&quot;http://www.microsoft.com/schemas/openservicedescription/1.0&quot;>
    • <os:homepageUrl>http://maps.live.com</os:homepageUrl>
    • <os:display>
    • <os:name>Map with Live Maps</os:name>
    • <os:icon>http://maps.live.com/favicon.ico</os:icon>
    • </os:display>
    • <os:activity category=&quot;Map&quot;>
    • <os:activityAction context=&quot;selection&quot;>
    • <os:execute method=&quot;get“ action=&quot;http://maps.live.com/default.aspx?where1={selection}&quot; />
    • <os:preview method=&quot;get&quot; action=&quot;http://maps.live.com/geotager.aspx&quot;>
    • <os:parameter name=&quot;b&quot; value=&quot;{selection}&quot; />
    • <os:parameter name=&quot;clean&quot; value=&quot;true&quot; />
    • <os:parameter name=&quot;w&quot; value=&quot;320&quot; />
    • <os:parameter name=&quot;h&quot; value=&quot;240&quot; />
    • <os:parameter name=&quot;format&quot; value=&quot;full&quot; />
    • </os:preview>
    • </os:activityAction>
    • </os:activity>
    • </os:openServiceDescription>
  • Deploying Accelerators
    • //check if service is already installed
    • window.external.IsServiceInstalled
    • (http://maps.live.com/livemaps.xml);
    • //if false, display button to add service
    • window.external.AddService
    • (http://maps.live.com/liveMaps.xml) ;
  • Web Slices
    • Page Content Subscription
    • RSS-based subscriptions to portions of a Web page
    • Favorites Bar with update notification
    • Content-hover discovery
    • In-place content preview
    • Implementation
    • Enabled by adding HTML annotations
    • hAtom Microformat and Web Slice format
    • Refresh interval configurable
    • Sample HTML Annotations
    • WebSlice at “<url>#1”
      • <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>
  • Web Slice Format
    • hAtom Microformat describes a feed & items
    • Web Slice builds on hAtom
      • hAtom can represent static content
      • Web Slice is dynamic content
    • Web Slice reuses properties on hAtom
      • Adds optional properties for subscribing
        • 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
  • WebSlices and Feeds
    • The Windows Feeds Platform now supports both feeds and Web Slices
      • Converts Web Slice HTML to Atom feed
      • Accessible by Feed API
      • Sanitizes content (no script)
    • Feeds Platform adds Authentication Support
      • HTTP-based Authentication (Basic & Digest)
      • Basic auth via SSL
      • Uses saved creds for background download
      • Cookie Auth preferred approach
  • Demo
  • AJAX Enhancements
    • AJAX Navigation
    • Back/forward stack navigation w/ AJAX apps
    • Treats window.location.hash updates like navigations/saves document URL
    • Fires hashChanged events
    • Compliant w/ W3C HTML5 working draft
    • DOM Storage
    • Key/value pair data
    • Each domain has 10MB local storage (default), 100MB total
    • Mitigate network loss scenarios
            • var storage = window.globalStorage[<url>];
            • //or, var storage = sessionStorage[<url>];
            • storage.begin();
            • storage.setItem(&quot;John&quot;,&quot;Public&quot;);
            • storage.setItem(“Jane”, “Public”);
            • storage.commit();
            • var cptname = storage.getItem(&quot;John&quot;);
            • storage.removeItem(&quot;John&quot;)
  • Integrating Ajax with Navigation
    • 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”
  • AJAX Enhancements
    • Networking
    • Network state event notifications
      • Online/Offline Methods and Events Handlers
    • Up to 6 concurrent connections per host in broadband
      • 2 still in narrow-band
    • XMLHTTPRequest enhancements
      • Added method timeout – Added event handler ontimeout
    • Cross-Domain Communication
    • Cross-domain Request (XDR)
      • XDomainRequest API – new XDomainRequest();
      • Anonymous requests by default
    • Cross-document Messaging (XDM) APIs
      • Communicate across multiple iFrames (from different domains)
      • Send with window.postMessage() API
      • Receive with document.onmessage event handler
      • Compliant w/ W3C HTML5 working draft
  • The Network isn't Always There
    • Network connectivity is transient
      • HTML5 adds online/offline events
      • And a state indicator
    <!-- Add handlers for online/offline events --> <body ononline=“go_online()” onoffline=“go_offline()”>; // Find out if browser is online online = window.navigator.onLine;
  • Demo
  • Developer Tools
    • Built-In Developer Tools
    • Dynamic toggling of rendering modes
    • 3 modes – HTML, CSS, JavaScript
    • HTML & CSS Explorer
    • Exposes internal representation of DOM tree and CSS styles
    • Real-time editing and rendering
    • Element-based style explorer
    • CSS file-based view in CSS mode
  • Developer Tools
    • JavaScript Debugger
    • Execution control
      • Source code line and context-based breakpoints
      • Step into, over, out, continue; break all (pause)
    • Variable Inspection
      • Scope sensitive (local, global, etc.)
      • Set watch variables
    • Call Stack Manipulation
      • Dynamic call stack traversal
    • Custom Script Execution
      • Immediate tab
  • Demo
  • Optimizing for Performance
    • Jscript improvements
      • DOM object look ups are much faster
      • Circular references are garbage collected
      • Faster native JavaScript operations
        • function call performance (lazy ‘this’ evaluation, lazy GC init)
        • string methods (string concat, replace, slice, splice)
        • array methods (concat, sort)
        • read, write, and delete Object methods
        • garbage collection algorithm
        • communication layer between DOM and JScript
  • Predictable Experience for Users
    • Security is key
      • Domain is highlighted in address bar
      • Improved Manage Add-On experience
    • Improved ActiveX
      • Per-user ActiveX installs, without admin
      • Per-site ActiveX controls
      • DEP/NX code execution prevention
  • Predictable Experience for Users
    • Compatibility is also key
      • Users’ sites and apps must continue to work with a new browser version
      • The browser needs to “just work”
    • Reliability
      • IE8 is resilient to crashes in tabs
      • We decouple the frame from the tabs
      • Non-crashing tabs are recovered!
  • Timeline Mar 5 th , 2008 August, 2008 December, 2008 Beta 1 Beta 2 Release
    • Platform Support
    • Windows Vista SP1; x64 and x86
    • Windows XP SP2, SP3
    • Windows Server 2008 x64 and x86
    • Windows Server 2003 SP2 x64 and x86
    • Memory Requirements
    • Windows Vista – 512MB
    • Windows XP – 64MB
    • Windows Server 2008 – 512MB
    • Windows Server 2003 – 64MB x86; 128MB x64
  • Resources
    • Internet Explorer 8
    • IE8 Home – http://www.microsoft.com/ie8/
    • IE8 beta 2 download – http://go.microsoft.com/fwlink/?LinkID=111416
    • IE8 Activities Guide – http://go.microsoft.com/fwlink/?LinkID=99193
    • IE8 Readiness Toolkit – http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/default.htm
    • IE8 whitepapers – http://code.msdn.microsoft.com/ie8whitepapers
    • IE8 VPC (WinXP sp2) – http://go.microsoft.com/fwlink/?LinkID=70868
    • IE8 new features HOLs – http://code.msdn.microsoft.com/iemix08labs
    • Defining Document Compatibility – http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
    • WebSlice Format Specification – http://msdn.microsoft.com/en-us/library/cc304073(VS.85).aspx
    • WebSlice Samples
    • eBay – http://ie8.ebay.com
    • Facebook Status Updates – http://www.facebook.com
    • Taobao – http://ie8.taobao.com
    • Netease – http://ie8.163.com
    • StumbleUpon – http://www.stumbleupon.com/ie8/
    • MSN SlideShow – http://www.msn.com/rss/ie8_slideshow.aspx
    • Feedback
    • Report Web Page Problem Add-on – http://go.microsoft.com/fwlink/?LinkId=110518
    • IE team blog – http://blogs.msdn.com/ie/
    • IE developer forum – http://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=923&SiteID=1
    • IE8 beta newsgroup – http://go.microsoft.com/fwlink/?LinkId=110585
  • [email_address] blogs.flyover18.com/christhi © 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. Thank you
  • The Mashup Dilemma
    • The most interesting web applications mash up data and components across domains
      • Without restrictions, this is unsafe
      • 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.
  • Cross-Domain Requests
    • Cross domain requests require mutual consent between the webpage and server
    • A new object – XDomainRequest (XDR)
      • Your app creates a XDomainRequest object
      • XDR opens a connection and requests data, sending HTTP header XDomainRequest: 1
      • XDR object gives your app the data IF server responds with XDomainRequestAllowed
        • An ASP page just needs this: Response.AppendHeader(&quot;XDomainRequestAllowed&quot;,&quot;1&quot;);
      • XDR is always anonymous (no cookies/auth)
  • Code Sample: It's easy to get data cross domain using XDR
    • // 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;get&quot;, www.contoso.com/xdr.htm);
    • // 4. Send async request to server
    • xdr.send();
    • // 5. Retrieve text in callback (changeState())
    • xdr.responseText
  • Cross-Document Messaging
    • Some scenarios want more of a “sandbox”
      • Frames are used for this today….
      • … but they need to add limited communication
      • Again, both sides need to opt in to be “safe”
    • postMessage / onmessage from HTML5
       function postToIframe()    {       document.onmessage = receiver; // message handler       var ff = document.getElementsByTagName('iframe')[0];       ff.contentWindow.postMessage('Hello',&quot; http://contoso.com &quot;);    }
  • Predictable Programming Model
    • hasAttribute(“attrName”) (on Element)
      • Supports “unspecified” attributes
      • Case comparisons for HTML are case-insensitive
      • Getters/setters behave consistently (return strings)
    • ownerElement, contentDocument, and more
    • getElementById() no longer includes ‘name’d elements
    • Dynamic radio buttons and checkboxes now work properly
    • getAttribute(for/style/class/[boolean]) fixed
    • Boolean attributes properly returned
    • HTML collections fixed
    • Operation Aborted parsing error relegated to script error