New IE9 Developer Content on MSDN


As we’ve discussed
many

times
on this
blog
, Internet Explorer 9 provides developers powerful new capabilities
with the same HTML, CSS, and JavaScript used for other browsers. In addition to
improving the product in an effort to make Web developers’ lives easier, we’ve also
strived to improve the developer content provided on MSDN.

The Internet Explorer developer content team writes and maintains all of the content
you see in the “HTML
and CSS
” and “Internet
Explorer Development
” nodes on the MSDN library, plus the
Internet Explorer Developer Center
. As we do with the product, we
listen to your feedback on how to improve and have taken a new approach with the
release of Internet Explorer 9.

We’d like to take this opportunity to point out some highlights of the new content
we’ve been working on, along with an explanation of our approach to documentation
for Internet Explorer 9 and how it’s different from what we’ve done for prior releases.
This post also provides links to the various types of developer content available
to help you quickly find the content most helpful to you.

A New Content Philosophy

We are trying a different content philosophy. Using scenario-based
samples and tutorials
built around real-world Web development, we highlight
how developers can use modern standards and the new features in Internet Explorer
9. Each section presents one or more developer scenarios, followed by a number of
sub-tasks designed to achieve a specific goal, such as creating an elegant Web design
that uses rounded corners or a page that plays audio without an external add-on.
This is a deliberate attempt to add value beyond our feature-based documentation.

We hope you will find the newer content engaging in the way it follows the thought
process through the tasks that accomplish development in the real world.

Samples and Tutorials

alt="Screen shot of SVG Friction Gears example" src="http://ie.microsoft.com/testdrive/ieblog/2011/May/05_NewIE9DeveloperContentonMSDN_1.jpg" />
For example,
this tutorial
walks you through creating SVG “friction gears.” The sample
is a creative use of HTML5 graphics animation. The documents that accompany the
sample provide complete step-by-step tutorials, starting with the simple rotation
of a square and ending with a seventeen-gear example (with audio).

Screen shot of SVG Bouncing Bubbles example src="http://ie.microsoft.com/testdrive/ieblog/2011/May/05_NewIE9DeveloperContentonMSDN_2.png" />The
Intermediate SVG Animation
tutorial demonstrates collision detection
and the physics of the motion of balls in an arena, starting with a single ball
bouncing off one wall, proceeding to interactions that are more complicated, building
to a circular arena with many objects bouncing off one another.

These are just some of the recent samples. There are many more. And an SVG-based
video game will be covered in Advanced SVG Animation, coming up in our next update.
Visit the
IE9 Samples and Tutorials
section frequently to see newly added
scenarios pertaining to these key areas and more:

  • CSS3:
    Adding elegance to a Web design by rounding corners, adding drop shadows, creating
    stylish buttons, and using advanced typography.
  • Debugging
    and Troubleshooting Your Web page
    : Using the Internet Explorer 9 F12 developer
    tools to find solutions to problems.
  • Enabling
    Standards Support
    : Using Web standards effectively.
  • Geolocation:
    Tailoring the user experience according to the user’s geographical location.
  • HTML5
    Audio and Video
    : Embedding audio and video in a Web page.
  • HTML5
    Graphics
    : Choosing between Canvas and SVG based on the graphics requirements
    of a Web page, designing a game, adding photo effects, and creating animation.
  • Pinned
    Sites
    : Integrating a Web site with the Windows 7 desktop.

Content You Can Count On

Of course, content other than scenario-based tutorials is also available. If you
want the complete API reference, use the more traditional documentation, available
for JavaScript and C++ here:

For a single place to learn about every new feature in IE9, use the
Internet Explorer 9 Guide for Developers
which we updated with every Platform
Preview release since PPB1 of IE9 in March of 2010. If you’re interested in IE10,
the IE10 Platform Preview
1 Developer’s Guide
offers an exhaustive list of what is available in IE10
Platform Preview 1. It contains CSS3 Flexible Box, CSS3 Gradients, ECMAScript5 strict
mode, and more.

If you are looking for the latest pointers to IE developer news and downloads, the
Internet Explorer Developer Center
is your best stop. Check out these sub-sites on the IE9 developer center:

Finally, the
Windows Internet Explorer Standards Support documentation
details variations,
clarifications, and extensions to relevant final approved Web standards supported
by Internet Explorer, and it has been kept updated for IE9.

Increased Support for Localized Content

For the first time in the history of Internet Explorer developer content, the samples
and tutorials were made simultaneously available in 8 languages, concurrently with
these IE9 RC and RTW releases :
German
,
Spanish
,
French
, Korean,
Portuguese
(Brazil), Russian,
Chinese
(Simplified), and
Japanese
, allowing us to more effectively support a broader global developer
audience.

And, like the conceptual content, we’ve published localized versions of the Developer
Guide: French, href="http://msdn.microsoft.com/de-de/ie/ff468705.aspx">German,
Spanish
, Portuguese
(Brazil), Chinese
(Simplified), Chinese
(Traditional), Korean,
Italian,
Russian
, and Japanese.

Your Feedback Helps Us

We hope you find our content informative and useful for your needs. We welcome your
feedback. Please feel free to comment on this blog post, or if you have specific
feedback about any of our MSDN content, look for the “Feedback” link at the bottom
of the page. Click it, and you’ll have the opportunity to comment on the usefulness
of each topic that we’ve written. We read everything that’s submitted and act on
it.

—Internet Explorer Developer Content Contributors

Comments (14)

  1. sunil mittal says:

    Very good post, It is really nice  to see what we can do in HTML5 with javascript.

  2. Paul Irish says:

    Nice!  Excellent work on all this and I agree this is a great approach to covering some of the newer, more shiny things.

    Two suggestions though. 1) .NET 3.0 Framework doesnt really belong at the top of these pages. 2) Syntax highlighting for all code samples!

    Cheers

  3. IEx says:

    IE8 had a great user interface and inferior engine. IE9 has a great engine and inferior interface. I'll keep IE8 until IE10 comes out. Hopefully, it will get both things right. MS ignored all the complaints about the user interface during the beta and RC releases.

    Now they see the result of their behaviour.

  4. IE9 says:

    I love the IE9 interface. A vast improvement over IE8.

    IE9 is a great base to build off of for IE10+.

    IE10 can concentrate more on things like more spell checking, modernizing option menus, etc.

  5. Esben says:

    I also love the IE9 interface. Much better than IE8!

  6. RP says:

    I'm puzzled as to why you'd bother putting a "(Brazil)" after Portuguese – presumably it is similar enough to Portuguese (Portugal) that Portuguese (Portugal) speakers will still read it, after all.  You're surely not intending to produce two different Portuguese translations?  If you are, will there be English (UK)?

  7. Tom says:

    Great job! Please do not forget to implement HTML5 webworkers.

  8. Typhoon87 says:

    Every page should have an added date and a last updated date.

  9. Bruce says:

    While the examples are great, the friction gears can be done much easier via SMIL animation as part of the SVG spec supported by the other browsers.  Will IE10 support SVG animation?

  10. ieblog says:

    @RP: We do actually ship two different localizations of Portuguese: one for Portugal and one for Brazil.

  11. NumbStill says:

    Can someone take a look at this RTL issue?

    This is really ridiculous. Invisible borders on RTL pages.

    connect.microsoft.com/…/interoperability-issue-invisible-borders

  12. wendy says:

    im glad to see that some attention has been paid to MSDN documentation however i see that absolutely nothing has been done to clean up the existing mess of "dhtml" code, specs and samples to adhere to anything close to the specs.

    in particular there are many samples that do not explicitly indicate that they do not adhere to a spec or that the code sample includes IE only API calls which should not be endorsed by anyone.

    what is the ETA on fixing MSDN so that it isnt full of errors, mis-guided examples and direct avoidance of total spec violations?!

  13. marek says:

    Although I agree that script based animation give more control and has much wider potential, for many and many tasks and non-programmers is declarative animation more than sufficient and what they are really looking for. Please, implement SMIL for (not only) SVG content as well…

  14. Mike McGrath says:

    For a more cross-browser friendly animation I suggest the SVG code be embedded rather than written inline. I have thrown together a version of the Two Gears SVG animation (example 5) at mike-mcgrath.net/…/twogears.html that separates HTML, SVG, JavaScript, and CSS into individual files. This version runs in Internet Explorer 9, Firefox 4, Google Chrome 11, Safari 5, and Opera 11.