1. 개발자를 위한 인터넷 익스플로러 9 플랫폼 프리뷰 3판 황리건 한국 마이크로소프트

2. IE6를 떠나며 2 Photo Courtesy AtenDesign Group - http://www.flickr.com/photos/atendesigngroup/4408393890/

3. 3

4. 4

5. 빠른 성능 똑같은 마크업 하드웨어 가속 5

6. 빠른 성능

7. 기존의 자바스크립트 엔진 Parser Interpreter ByteCode Source Code AST 7

8. 새로운 자바스크립트엔진 – “챠크라” Foreground Parser Interpreter ByteCode Source Code AST Background Native Code Background Compiler 멀티 CPU 코어 사용 8

10. 10

11. 시연 Flying Images / IE8, Chrome, FF, Opera, IE9

12. IE8 12 자바스크립트 DOM Drawing Images

13. IE9 13

14. 시연 Amazon Shelf FishIE Tank Mr. Potato Gun Flickr Images

15. window.msPerformance소개 DOM에 통합된 성능 측정 브라우저에서 상호호환 가능한 성능 측정 방식으로 제안 W3C 멤버들과의 파트너십을 통해 만들어 지는 중입니다. 아직 변경 여지가 있습니다. <script type="text/자바스크립트"> var w = window; varnavStart= w.msPerformance.timing.navigationStart+ "ms"; varnavStartTime = Date(w.msPerformance.timing.navigationStart); </script>

16. 시연 window.msPerformance

17. 똑같은 마크업

18. IE9 PP2 18

19. IE9 PP3 19

20. 사용 비율을 참고로한 API 지원 20

21. 표준 멤버로써의 활동 W3C 워킹그룹 참여 HTML5 Working Group, DOM Working Group, CSS Working Group, SVG Working Group, WebFonts Working Group W3C 테스팅 TF 참여 SVG Testing Taskforce, HTML Testing Taskforce, Accessibility Testing Taskforce 21

22. 인터넷 익스플로러 테스팅 센터 http://samples.msdn.microsoft.com/ietestcenter/ 22

23. 똑같은 마크업으로 똑같은 결과를 얻게 하기 23

24. 시연 Border Radius, IE Logo / IE9 and Other Browsers

26. 새로 추가되거나 업데이트된 DOM 강화 완전한 DOM Level 2와 DOM Level 3 지원 DOMContentLoaded 현재 페이지의 컨텐트 로딩이 끝나는 시점에 발생합니다. 복잡한 웹페이지에 UI 기능들을 추가할 때 유용합니다. DOM Traversal 요소들의 간단한 리스트를 통해 열거하는 간단한 방법입니다. 26

27. 시연 DOM Traversal Media Gallery

28. 새로 추가되거나 업데이트된 자바스크립트 APIs getElementsByClassName(class) 특정한 클래스 이름의 요소 리스트를 반환하는 HTML5 API getComputedStyle(element, pseudoElement) 요소의 계산된 스타일값을 반환하는 DOM L2 함수 document.defaultView.getComputedStyle(element, null).getPropertyValue("height"); ECMAScript 5 메소드 새로운 배열 메소드:indexOf, lastIndexOf, forEach, every, some, map, filter, reduce, reduceRight 그 밖에 계산적인 메소드와 함수들 : String.prototype.trim, Date.prototype.toISOString, Date.parse, Date.now, Array.isArray, Function.prototype.bind 28

29. 시연 GetComputedStyle, ECMAScript 5 Game, ECMAScript 5 Array

30. GPU로 강화된 HTML 30

31. GPU는 게임용?

32. GPU는 어디에나 있습니다.

33. GPU를 사용하는PC들의 Windows 체험지수 현존하는 PC에 사용되고 있는 CPU 성능은 상당히 좋은 편입니다. 4% 15% 32% 27% 12% 10% 1 2 3 4 5 6 7 8 Windows Experience Index Graphics Scores of Vista and Win7 Users

34. GPU를 이용한 HTML5

35. 새롭게 지원하는 HTML5 Canvas 자바스크립트를 통해서 2D 그래픽을 그릴 수 있도록 하는 block 요소. 드로잉 메소드 지원 : paths, boxes, circles, text and rasterized images <canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry. </canvas> <script type="text/자바스크립트"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script> 35

36. 시연 Deep Zoom, Canvas Pad

37. 새로 추가된 @font-face와 WOFF 폰트 웹페이지에 기본 폰트 외의 폰트를 사용합니다. 사이트 별로 필요한 폰트를 패키지하고 배포할 수 있도록 하는 오픈 웹 폰트 포맷을 지원합니다. @font-face선언으로 웹에서 사용할 수 있도록 설계되었습니다. 오픈타입이나 트루타입 폰트 데이터를 간단히 리패키징합니다. W3C Fonts Working Group에서 정의한 표준입니다. <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> 37

38. 시연 Web Fonts

39. HTML5 <video> HTML5 <video> 요소 산업 표준 MPEG-4/H.264 비디오 페이지에서 다른 요소들과 함께 사용 가능합니다. HTML 컨텐트, 이미지, SVG 그래픽 하드웨어 가속, GPU 기반의디코딩 속성 src – 소스 파일을 가져올 위치 autoplay – 준비되면 바로 재생할지 여부 controls – 컨트롤을 보여줄지 여부 preload – 페이지 로드에서 소스를 불러올지 여부 loop – 처음으로 다시 되돌릴지 여부 height & width – 플레이어의 가로 세로 크기 <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> 39

40. 시연 Youtube, Video Panorama

41. HTML5 <audio> HTML5 <audio>요소 산업 표준 MP3 와 AAC audio DOM으로 완전하게 스크립팅 가능합니다. Attributes src – 소스파일을 가져올 위치 autoplay – 준비됐을 때 자동으로 재생할지 여부 controls – 컨트롤들을 보여줄지 여부 preload – 페이지 로드 시에 소스를 불러올지 여부 <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> 41

42. 시연 HTML5 Audio Player + XML Playlist

43. 인터넷 익스플로러 9 정리 성능 : 새로운 자바스크립트 엔진 여러분의 최신 하드웨어를 이용해서 더 빠르게 실행되는 자바스크립트 엔진 똑같은 마크업: 여러분의 코드 그대로... 코딩에 더 많은 시간을 보내고, 디버깅에 더 적은 시간을 보내세요. 똑같은 마크업이 그대로 동작하도록 하는 건 브라우저의 몫. 하드웨어 가속 : 그리고 더 빨리 실행될꺼에요. 더 좋은 성능의 그래픽 시스템을 필요로 하는 애플리케이션이 더 잘 동작할 거에요. 43

44. 플랫폼 프리뷰 3판 : 현재 사용 가능 IE6를 업그레이드해주세요. IE8에서 개발해 보세요. IE9 플랫폼 프리뷰 3탄을 다운로드하고 설치해보세요. IE9 PP3 다운로드&데모 http://ietestdrive.com 플랫폼 프리뷰 2탄 소개 동영상 http://www.techdays.co.kr/2010spring/remix10/session1_2.html 44

45. Q&A