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

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

3.
3<br />

4.
4<br />

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

6.
빠른 성능<br />

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

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

9.

10.
10<br />

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

12.
IE8<br />12<br />자바스크립트<br />DOM<br />Drawing Images<br />

13.
IE9<br />13<br />

14.
시연<br />Amazon Shelf<br />FishIE Tank<br />Mr. Potato Gun<br />Flickr Images<br />

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

16.
시연<br />window.msPerformance<br />

17.
똑같은 마크업<br />

18.
IE9 PP2<br />18<br />

19.
IE9 PP3<br />19<br />

20.
사용 비율을 참고로한 API 지원<br />20<br />

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

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

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

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

25.

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

27.
시연<br />DOM Traversal Media Gallery<br />

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

29.
시연<br />GetComputedStyle, ECMAScript 5 Game, ECMAScript 5 Array<br />

30.
GPU로 강화된 HTML<br />30<br />

31.
GPU는 게임용?<br />

32.
GPU는 어디에나 있습니다.<br />

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

34.
GPU를 이용한 HTML5<br />

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

36.
시연<br />Deep Zoom, Canvas Pad<br />

37.
새로 추가된 @font-face와 WOFF 폰트<br />웹페이지에 기본 폰트 외의 폰트를 사용합니다.<br />사이트 별로 필요한 폰트를 패키지하고 배포할 수 있도록 하는 오픈 웹 폰트 포맷을 지원합니다. <br />@font-face선언으로 웹에서 사용할 수 있도록 설계되었습니다. <br />오픈타입이나 트루타입 폰트 데이터를 간단히 리패키징합니다.<br />W3C Fonts Working Group에서 정의한 표준입니다.<br /><style type="text/css"><br /> @font-face {<br />font-family:MyFontName;<br />src: url('FontFile.woff');<br /> } <br /></style><br /><div style="font: 24pt MyFontName, sans-serif;"><br /> This will render using MyFontName in FontFile.woff<br /></div><br />37<br />

38.
시연<br />Web Fonts<br />

39.
HTML5 <video><br />HTML5 <video> 요소<br />산업 표준 MPEG-4/H.264 비디오<br />페이지에서 다른 요소들과 함께 사용 가능합니다.<br />HTML 컨텐트, 이미지, SVG 그래픽<br />하드웨어 가속, GPU 기반의디코딩<br />속성<br />src – 소스 파일을 가져올 위치<br />autoplay – 준비되면 바로 재생할지 여부<br />controls – 컨트롤을 보여줄지 여부<br />preload – 페이지 로드에서 소스를 불러올지 여부<br />loop – 처음으로 다시 되돌릴지 여부<br />height & width – 플레이어의 가로 세로 크기<br /><video src="video.mp4" id="videoTag" width="640px" height="360px"><br /> <!-- Only shown when browser doesn’t support video --><br /> <!-- You Could Embed Flash or Silverlight Video Here --><br /></video><br />39<br />

40.
시연<br />Youtube, Video Panorama<br />

41.
HTML5 <audio><br />HTML5 <audio>요소<br />산업 표준 MP3 와 AAC audio<br />DOM으로 완전하게 스크립팅 가능합니다.<br />Attributes<br />src – 소스파일을 가져올 위치<br />autoplay – 준비됐을 때 자동으로 재생할지 여부<br />controls – 컨트롤들을 보여줄지 여부<br />preload – 페이지 로드 시에 소스를 불러올지 여부<br /><audio src="audio.mp3" id="audioTag"autoplay controls><br /> <!-- Only shown when browser doesn’t support audio --><br /> <!-- You could embed Flash or Silverlight audio here --><br /></video><br />41<br />

42.
시연<br />HTML5 Audio Player + XML Playlist<br />

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

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

45.
Q&A<br />