The document discusses new features in HTML5 including media elements like <video> and <audio>, the <canvas> element for drawing graphics, and SVG for vector graphics. It outlines IE9's support for HTML5 specifications and how it will provide an interoperable and high performance experience for HTML5 features through GPU acceleration and standardized markup and JavaScript implementations.

1. HTML5 - thefutureforthe Web - and IE9 Wilson Pais wpais@microsoft.com Gabriel Klestorny t-gakles@microsoft.com

2. The HTML5 Web:Graphically- and Media-Rich Evolution of the Web The AJAX Web: JavaScript + DOM + Asynchronous Requests Web “2.0” The Content Web: HTML & CSS Web “1.0”

3. A Browser Decomposed

4. HTML introduction Basis for any webpage Web evolution  HTML evolution 4

5. HTML5: What’s in it for me 5

6. HTML5: New media elements and APIs <video> tag Example: <video src=“video.mp4” controls /> <audio> tag Example: <audio src=“sample.wav” /> 6

7. Rich Media Integration—Without Plugins 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 GPU-based implementation capable of maintaining 60fps full-screen at full HD resolution Supports both DXVA and full hardware video decoders HTML5 <audio> element Industry-standard MP3 and AAC audio <video width="800" height="450" src="myvideo.mp4" autoplay> No video for you</video>

8. HTML5: New media elements and APIs <canvas> tag Example: <canvas id=“my_canvas” width=100 height=100 /> <script> varmy_canvas = document.getElementById(“my_canvas”); if (my_canvas.getContext) context = my_canvas.getContext("2d"); // draw </script> 8

9. HTML5: Semantic markup New elements: <section>, <header>, <article>, <nav>, … 9

10. HTML5: Semantic markup Deprecated elements: <font>, <center>, <frame> 10

11. HTML5: SVG (Vector Graphics) <svg> element Example: <svg> <rect x=0 y=0 width=100 height=100 fill="red" /> <rect x=100 y=0 width=100 height=100 fill="green" /> <rect x=0 y=100 width=100 height=100 fill="blue" /> <rect x=100 y=100 width=100 height=100 fill="yellow" /> </svg> 11

12. HTML5: Forms improvements Input element types: Tel, search, url, email, date, number, range, color New form functions: Autofocus, multiple files upload 12

13. HTML5: Related technologies overview CSS3 SVG WebFonts 13

14. IE9 support for HTML5 IE9 HTML5 GPU Acceleration Same Markup Performance Platform Preview 14

15. Top Objectives of Internet Explorer 9 Interoperable HTML5 Markup Interpret the same HTML and CSS markup the same way Run the same JavaScript the same way GPU-powered HTML5 Graphics and Media HTML5 demands a high-performance graphics subsystem Across-the-board High Performance HTML5 JavaScript execution Page layout Page display

16. Internet Explorer 9 Platform Preview

17. Flying Images – One Animation IE8 IE9 17

18. CallToAction Followthestandardon W3C. Microsoft isparticipating as a co-chair of HTML Working Group Try Internet Explorer 9 PlatformPreview Check demos on http://ietestdrive.com Wait and try IE 9 Beta – More newsthisweek ! More info: http://blogs.msdn.com/ie

19. ¡THANKS! ¡GRACIAS! Wilson Pais wpais@microsoft.com Gabriel Klestorny t-gakles@microsoft.com

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

21. AdditionalSlidesjustforreference

22. Markup and Programming Model in Internet Explorer Platform Preview

23. SVG in Internet Explorer Platform Preview

24. GPU-Powered HTML5