REMIX10에서 있었던 HTML5와 IE9 세션 발표자료입니다.

2. HTML5와 Internet Explore 9 황리건 UX Evangelist Microsoft Corporation

3. Welcome Internet Explorer 9 웹 플랫폼의 최우선 목표 한벌로 두루 쓰는 HTML5 마크업 똑같은 HTML과 CSS 마크업을 똑같은 방식으로 해석하기 똑같은 자바스크립트를 똑같은 방식으로 실행하기 GPU를 사용하는 HTML5 그래픽과 미디어 HTML5은 높은 성능을 갖춘 그래픽 하부시스템을 요구합니다. 전반에 걸쳐 높은 성능의 HTML5 지원 JavaScript execution Page layout Page display

4. The HTML5 Web:그래픽 & 리치미디어 웹의 진화 The AJAX Web: 자바스크립트+ DOM+비동기 요청 Web “2.0” The Content Web: HTML & CSS Web “1.0”

5. 브라우저 동작 원리 5

6. 새로운 자바스트립트 엔진, Chakra 6

7. ACID3 Test 7

8. CSS3 Selectors Test 8

9. 9

10. 한벌로 두루 쓰는 HTML5 마크업 똑같은 HTML, CSS, 자바스크립트를 똑같은 방식으로 해석하기

11. 한벌로 두루 쓰는 HTML5 마크업 HTML, CSS, 자바스크립트를 똑같은 방식으로 해석 항상 경쟁 우위의 차이는 존재할 수 밖에 없습니다. 표준의 진화 서로 다른 체계를 따라 브라우저 구현 핵심 플랫폼만은 반드시 상호운용 가능해야 합니다.

13. 13

14. 데모 시연 DOM Events, DOMContentLoaded, getElementsByClassName

15. IE9가 지원하는마크업 언어 HTML5 다른 스펙들과의 접점에서의 대응 방식을 정의합니다. 알려지지 않은 요소들(unknown elements)의 파싱 Inline SVG XHTML/XML 엄격하고, Fail-Fast한파싱은 개발자들이 에러를 빨리 찾을 수 있도록 도와줍니다. 사용자 정의 엘리먼트를 안전하게 사용할 수 있도록 네임스페이스를 제공합니다. 브라우저 외부 처리하는 것이 더 쉽습니다. SVG 독립 실행가능한 XML 기반 문서 (.svg file) XHTML 문서 안에 포함시키기 HTML5 문서 안에 포함시키기

16. 알려지지 않은 요소들의 파싱 스타일 적용 Children 구조 16

17. 17 기존의 SVG 방식

18. Inline SVG 18

19. CSS 기반 구조 CSS3 Selectors 더 적은 스크립트와 간단한 마크업으로 더 많은 것을 할 수 있게 해줍니다. CSS3 Namespaces XHTML 문서에서 네임스페이스를 사용할 수 있는 스타일 요소

20. 데모 시연 CSS3 Selectors, T-shirt Designer

21. IE9 프로그래밍 모델 웹 플랫폼의 핵심 부분은 DOM을 다루는데 사용됩니다. DOM Core DOM Events DOM Style DOM HTML DOM Range HTML5 Selection

22. 데모 시연 DOM Style, DOM Range& HTML Selection

23. 마크업과 프로그래밍 모델 : IE Platform Preview

24. GPU를 사용한HTML5 그래픽

25. GPU를 사용하는 HTML5 그래픽과 미디어 HTML5의 그래픽적 풍부함은 높은 성능을 갖춘 그래픽 하부 시스템을 요구합니다. GPU를 쓰게 됨으로써, 알파채널 블렌딩과 같은 기능들이 높은 성능으로 구현되는 것이 가능하고, 부드러운 애니메이션과 비디오 재생을 위해 필요한 프레임수를 제공하고, 다른 시스템들이 더 빠르게 실행될 수 있도록 CPU 부하를 줄여줍니다.

26. GPU를 이용한 HTML5

27. Rich Graphics: HTML5의 기초 그래픽적으로 풍부한 스타일링 향상된 이미지 지원 확대축소 가능한 벡터 그래픽 미디어 요소 일관된 고화질과 고성능을 제공하기 위해, IE9은 윈도우7의 GPU그래픽 기능에 기반하고 있습니다.

28. CSS3로 그래픽적으로 풍부한 스타일링 CSS3 Colors 알파 컬러, rgba()와hsla() 함수 투명도 조절, opacity 속성 CSS3 Backgrounds and Borders 둥근 모서리, border-radius 속성 하나의 요소에 다수의 배경 이미지 적용 Block 요소에 box-shadow 속성

29. 데모 시연 Border Radius, CSS3 Media Queries

30. 향상된 이미지 지원 ICC 버전4와 버전2 컬러 프로필 내장 컬러 프로필이 있는 이미지를 올바르게 표현해줍니다. 새로운 JPEG XR 포맷 JPG 보다 높은 압축률 같은 사이즈로 더 높은 퀄리티 같은 퀄리티로 더 적은 용량 JPEG XR도무손실 압축을 지원합니다 고해상도의 원본 사진을 주고 받는데 유용합니다. TIFF 이미지 포맷 무손실 이미지, 흑백 이미지, 문서와 팩스 스캔 이미지 등으로 유명한 포맷입니다. 30

31. 31

32. 데모 시연 Color Profiles, Image Support

33. 확대/축소 가능한 벡터 그래픽 마크업과 DOM 기반의 그래픽 : SVG 1.1 “View source”에서 간결함 —쉽게 배울 수 있다 쉬운 서버 사이드 생성—XML 형식 쉬운 클라이언트 사이드 디버깅—DOM으로 해석 널리 쓰이는 그래픽 프로그램들을 지원 쉬운 HTML5 통합 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rectfill="blue" x="50" y="50" width="100" height="75" /> </svg>

34. SVG : Internet Explorer Platform Preview

35. Demos Tweet Cloud, Real World Diagram, Org Charts, Biz Charts, Atlas zureEuropawahl

36. 리치 미디어 통합—플러그인 없이 HTML5 <video> 요소 업계 표준의 MPEG-4/H.264 비디오 페이지의 어떤 요소와도 조합해서 쓸 수 있습니다. HTML 컨텐츠, 이미지, SVG 그래픽 풀HD 해상도의 풀스크린 모드에서 60fps를 유지하는 GPU 기반의 구현가능 DXVA와 풀 하드웨어 비디오 디코더를 모두 지원 HTML5 <audio> 요소 업계 표준인 MP3와 AAC 오디오 <video width="800" height="450" src="myvideo.mp4" autoplay> No video for you</video>

37. 비디오 데모 Video

38. 38

39. 비디오 데모 Network Monitoring

40. 8주 마다 한번씩 선보이는 IE9 플랫폼 프리뷰 다운로드 www.IETestDrive.com 가장 빠른 IE9 정보(영문) http://blogs.msdn.com/ie 무엇이든 물어보세요. 황리건 @HRG

41. © 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.