Ie9 dev overview (300) beta
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,113
On Slideshare
1,112
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 1

http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Internet Explorer 9: Developer Overview
    Beta
    Presenter Name
    Presenter Title
  • 2. Agenda
    2
    History and Evolution
    Fast
    Clean
    Interoperable
  • 3. History and Evolution
  • 4. 4
  • 5. 5
  • 6. 6
  • 7. 7
  • 8. 8
  • 9. All-Around Fast
  • 10. 10
    Multi-System Performance
  • 11. WebKitSunSpider JavaScript Benchmark Results
    11
  • 12. The JavaScript Engine
    12
    Foreground
    Source Code
    Parser
    AST
    Interpreter
    ByteCode
  • 13. Foreground
    Source Code
    Parser
    AST
    Interpreter
    ByteCode
    New JavaScript Engine – “Chakra”
    13
    Background Compiler
    Native Code
    Background
    Compiled JavaScript
    In The Background
    Using Multiple Cores
  • 14. Flying Images
    Demo
  • 15. Flying Images – One Animation
    15
    IE8
    IE9
  • 16. Using The Full Power of Your PC
    16
  • 17. Everyone Has a GPU
    17
  • 18. 1
    2
    3
    4
    5
    6
    7
    8
    Windows Experience Index Results - GPU
    18
    15%
    32%
    27%
    10%
    4%
    12%
    Windows Experience Index
    Graphics Scores of Vista and Win7 Users
  • 19. window.msPerformance
    19
    A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance
    <script type="text/javascript">
    var w = window;
    varnavStart= w.msPerformance.timing.navigationStart+ "ms";
    varnavStartTime = Date(w.msPerformance.timing.navigationStart);
    </script>
  • 20. With a focus on your sites
    Clean
  • 21. 21
  • 22. 22
  • 23. 23
  • 24. Pinning Demo
  • 25. Getting Started with Pinned Sites
    Pinned Site mode requires no changes to your site
    Enhance your Pinned Site
    25
    Providecustom information
    Addthe site as a Pinned Site programmatically
    Customizethe icon
    DefineJump List tasks
    Add additional Jump List items in a custom list
    Showthumbbarbuttons
  • 26. Customize Your Pinned Site
    26
    <meta name="application-name" content="Site Name" />
    <meta name="msapplication-tooltip"
    content="Start the Pinned Site" />
    <meta name="msapplication-starturl"
    content="http://example.com/start.htm" />
    Use meta elements to provide specific information
  • 27. Programmatically Pinning Your Site
    27
    if (window.external.msIsSiteMode) {
    if (window.external.msIsSiteMode()) {
    // we are already in site mode
    }
    else {
    // add site to the Programs menu
    window.external.msAddSiteMode()
    }
    }
  • 28. Adding Icon Overlays
    28
    window.external.msSiteModeSetIconOverlay(
    'http://host/overlay1.ico','Overlay 1');
    window.external.msSiteModeClearIconOverlay();
    Provide users with notifications or progress updates
  • 29. Adding Jump Lists
    29
    <meta name="msapplication-task"
    content="name=Task 1;action-uri=http://host/Page1.htm;
    icon-uri=http://host/icon1.ico"/>
    <meta name="msapplication-task"
    content="name=Task 2;action-uri=http://host2/Page2.htm;
    icon-uri=http://host2/icon2.ico"/>
    Windows 7 integration
  • 30. With the same markup
    Interoperable
  • 31. Web API Usage
    7000 top sites
    7000
    Number of sites
    0
    API (by rank)
    1
    50
    700
    31
  • 32. Working With Standards Bodies
    32
    Member of many W3C Working Groups
    Leading the W3C HTML5 Testing Task Force
    The HTML Working Group
    40 W3C Member Organizations
    411 group participants
    280 invited experts
    9 mailing lists
    ~4000 emails on public-html
  • 33. Defining Same Markup
    33
  • 34. Internet Explorer Testing Center
    34
    http://samples.msdn.microsoft.com/ietestcenter/
  • 35. HTML5: A Quick Overview
    35
    Commonly used to refer to modern open web standardslike HTML5, CSS3, and more.
    Adds new rich media and graphics support (canvas, video, audio, inline SVG…)
    Standardizes behavior for browser vendors, enabling same markup.
    The W3C HTML5 specification is still a draft, it’s over 1100 pages and keeps evolving.
  • 36. GPU-Powered HTML5 Means…
    36
    Canvas
    CSS3 Media Queries
    SVG 1.1 2nd Edition, Full
    Web Fonts
    CSS3 Backgrounds & Borders Module
    Hardware Accelerated <video>
    CSS3 Color Models
    RGBA, HSLA, Opacity
    Hardware Accelerated <audio>
  • 37. How To Use The Following Deep Dive Slides
    The following slides allow you to dive into different developer features.
    Depending on the amount of time and audience, you may want to show fewer slides and do more demo.
    37
  • 38. <canvas id="myCanvas" width="200" height="200">
    Your browser doesn’t support Canvas, sorry.
    </canvas>
    <script type="text/javascript">
    var example = document.getElementById("myCanvas");
    var context = example.getContext("2d");
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect(30, 30, 50, 50);
    </script>
    Canvas
    A block element that allows developers to draw 2d graphics using JavaScript
    Methods for drawing include: paths, boxes, circles, text and rasterized images
    38
  • 39. Create and draw 2D vector graphics using XML
    Vector images are composed of shapes instead of pixels
    Based on the SVG 1.1 2nd Edition Full specification
    Support for:
    Full DOM access to SVG elements
    Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views
    Scalable Vector Graphics (SVG)
    39
    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect fill="red" x="20" y="20" width="100" height="75" />
    <rect fill="blue" x="50" y="50" width="100" height="75" />
    </svg>
  • 40. HTML5 <video>
    Support for the HTML5 <video> element
    Industry-standard MPEG-4/H.264 video
    Video can be composited with anything else on the page
    HTML content, images, SVG graphics
    Hardware accelerated, GPU-based decoding
    Attributes
    src – specifies the location to pull the source file
    autoplay – if present starts playing as soon as it’s ready
    controls – if present displays controls
    preload – if present loads source at page load
    loop – if present loops back to the beginning of the video
    height & width – specifies the height & width of the player
    40
    <video src="video.mp4" id="videoTag" width="640px" height="360px">
    <!-- Only shown when browser doesn’t support video -->
    <!-- You Could Embed Flash or Silverlight Video Here -->
    </video>
  • 41. 41
    <audio src="audio.mp3" id="audioTag" autoplay controls>
    <!-- Only shown when browser doesn’t support audio -->
    <!-- You could embed Flash or Silverlight audio here -->
    </video>
    HTML5 <audio>
    Support for the HTML5 <audio> element
    Industry-standard MP3 and AAC audio
    Fully scriptable via the DOM
    Attributes
    src – specifies the location to pull the source file
    autoplay – if present starts playing as soon as it’s ready
    controls – if present displays controls
    preload – if present loads source at page load
  • 42. 42
    <style type="text/css">
    @font-face {
    font-family:MyFontName;
    src: url('FontFile.woff');
    }
    </style>
    <div style="font: 24pt MyFontName, sans-serif;">
    This will render using MyFontName in FontFile.woff
    </div>
    WOFF Fonts & @font-face
    No longer limited to the “web safe” font list!
    Web Open Font Format allows you to package and deliver fonts as needed, per site
    Designed for web use with the @font-face declaration
    A simple repackaging of OpenType or TrueType font data
    From the W3C Fonts Working Group
  • 43. CSS3 Media Queries
    Selectively style page based on properties of the media
    43
    <link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“ text/css" />
    <link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" />
    <link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
  • 44. 44
    div.top {
    background-color: rgba(0, 0, 0, 0.5);
    color: azure;
    }
    div.bottom {
    background-color: hlsa(0, 0%, 0%, 0.5);
    color: cornsilk;
    }
    CSS3 Colors
    CSS3 Color
    Alpha color with rgba() and hsla() color functions
    Transparency control with the opacity property
    CSS3 Color Keywords
    Full support for CSS3 color keywords
    Can be used with any property that takes the color property
  • 45. 45
    CSS3 Backgrounds & Borders
    CSS3 Backgrounds and Borders
    Round corners with the border-radius property
    Multiple background images per element
    box-shadow property on block elements
    div {
    border-radius: 152px 304px 228px 152px;
    border-style: double;
    border-width: 42px;
    padding: 12px;
    }
  • 46. DOM and JavaScript Features
    Full DOM Level 2 and Level 3 Event Support
    addEventListener
    DOMContentLoaded
    New ECMAScript 5 Features
    DOM Traversal and Range
    DOM Style
    DOM Core
    HTML5 and XHTML Parsing Enhancements
    getComputedStyle(element, pseudoElement)
    getSelection()
    getElementsByClassName(class)
    46
  • 47. F12 Developer Tools
    A built in, visual interface to the Document Object Model
    Fast experimentation
    New for Internet Explorer 9
    Network inspection
    UA String Picker
    Console Tab
    SVG Support
    47
  • 48. Internet Explorer 9
    48
    All-around Fast
    Clean,
    with a focus on your websites
    Interoperable with same markup
    Uses the full power of your
    PC to provide GPU
    powered HTML5 and
    platform enhancements
    including Chakra, the
    new JavaScript
    engine.
    A clean, streamlined,
    speedier interface that
    puts the focus on your
    sites, rather than the
    browser.
    Improved standards
    support to enable
    “same markup”
    across browsers.
  • 49. Internet Explorer 9 Beta: Now Available
    Migrate your applications off Internet Explorer 6
    Develop for standards first!
    Download and install the Internet Explorer 9 Beta
    and test your site!
    Learn more at…
    http://msdn.com/ie
    49
  • 50. Questions