Page 0: Page 1: Page 2: HTML5와 Internet Explore 9 Page 3: Welcome Internet Explorer 9 웹 플랫폼의 최우선 목표 • 한벌로 두루 쓰는 HTML5 마크업 • 똑같은 HTML과 CSS 마크업을 똑같은 방식으로 해석하기 • 똑같은 자바스크립트를 똑같은 방식으로 실행하기 • GPU를 사용하는 HTML5 그래픽과 미디어 • 젂반에 걸쳐 높은 성능의 HTML5 지원 • JavaScript execution • Page layout • Page display • HTML5은 높은 성능을 갖춘 그래픽 하부시스템을 요구합니다. Page 4: 웹의 진화 The HTML5 Web: 그래픽 & 리치미디어 Web “2.0” The AJAX Web: 자바스크립트+ DOM+비동기 요청 Web “1.0” The Content Web: HTML & CSS Page 5: 브라우저 동작 원리 HTML CSS Script XHTML Input streams Parsed “DOM” HTML Objects Display Tree Layout Display Edits Script CSS Properties Events Animates Animation Timer 5 Page 6: 새로운 자바스트립트 엔진, Chakra 6 Page 7: ACID3 Test 7 Page 8: CSS3 Selectors Test 8 Page 9: 9 Page 10: 한벌로 두루 쓰는 HTML5 마크업 똑같은 HTML, CSS, 자바스크립트를 똑같은 방식으로 해석하기 Page 11: 한벌로 두루 쓰는 HTML5 마크업 HTML, CSS, 자바스크립트를 똑같은 방식으로 해석 • 항상 경쟁 우위의 차이는 존재할 수 밖에 없습니다. • 표준의 진화 • 서로 다른 체계를 따라 브라우저 구현 • 핵심 플랫폼만은 반드시 상호운용 가능해야 합니다. Page 12: 상위 7000여 사이트의 API 사용현황 8000 7000 6000 5000 4000 3000 2000 1000 0 1 51 101 151 201 251 301 351 401 451 501 551 601 651 701 사이트 수 API (사용 빈도에 따른 순위) API indexOf getElementById addEventListener getComputedStyle 순위 1 13 27 62 사용하는 사이트 비율 94% 80% 65% 26% Page 13: 13 Page 14: 데모 시연 DOM Events, DOMContentLoaded, getElementsByClassName Page 15: IE9가 지원하는 마크업 언어 • HTML5 • 다른 스펙들과의 접점에서의 대응 방식을 정의합니다. • 알려지지 않은 요소들(unknown elements)의 파싱 • Inline SVG • XHTML/XML • 엄격하고, Fail-Fast한 파싱은 개발자들이 에러를 빨리 찾을 수 있도록 도와줍니다. • 사용자 정의 엘리먼트를 안젂하게 사용할 수 있도록 네임스페이스를 제공합니다. • 브라우저 외부 처리하는 것이 더 쉽습니다. • SVG • 독립 실행가능한 XML 기반 문서 (.svg file) • XHTML 문서 안에 포함시키기 • HTML5 문서 안에 포함시키기 Page 16: 알려지지 않은 요소들의 파싱 • 스타일 적용 • Children 구조 16 Page 17: 기존의 SVG 방식 17 Page 18: Inline SVG 18 Page 19: CSS 기반 구조 • CSS3 Selectors • 더 적은 스크립트와 간단한 마크업으로 더 많은 것을 할 수 있게 해줍니다. • CSS3 Namespaces • XHTML 문서에서 네임스페이스를 사용할 수 있는 스타일 요소 Page 20: 데모 시연 CSS3 Selectors, T-shirt Designer Page 21: IE9 프로그래밍 모델 • 웹 플랫폼의 핵심 부분은 DOM을 다루는데 사용됩니다. • DOM Core • DOM Events • DOM Style • DOM HTML • DOM Range • HTML5 Selection Page 22: 데모 시연 DOM Style, DOM Range & HTML Selection Page 23: 마크업과 프로그래밍 모델 : IE Platform Preview Category Markup CSS 기반 구조 DOM Feature Inline SVG in HTML XHTML/XML CSS3 Selectors CSS3 Namespaces Core v1         v2         Events Style Range HTML5 Selection Page 24: GPU를 사용한 HTML5 그래픽 Page 25: GPU를 사용하는 HTML5 그래픽과 미디어 HTML5의 그래픽적 풍부함은 높은 성능을 갖춘 그래픽 하부 시스템을 요구합니다. • GPU를 쓰게 됨으로써, • 알파채널 블렌딩과 같은 기능들이 높은 성능으로 구현되는 것이 가능하고, • 부드러운 애니메이션과 비디오 재생을 위해 필요한 프레임수를 제공하고, • 다른 시스템들이 더 빠르게 실행될 수 있도록 CPU 부하를 줄여줍니다. Page 26: GPU를 이용한 HTML5 퍼포먼스 향상 자바스크립트 실행 DOM 인터랙션과 레이아웃 GPU 파워를 이용한 렌더링 크로스 브라우저 상호운용성 그래픽 기능 HTML5 마크업 CSS3 마크업 DOM 프로그래밍 알파 컬러 & 투명도 라운드 코너 & 멀티 백그라운드 HTML5에 통합된 SVG 그래픽 미디어 기능 <video> 요소 MPEG-4/H.264코덱 <audio> 요소 MP3/AAC코덱 <img> JPEG-XR, 컬러 프로필 Page 27: Rich Graphics: HTML5의 기초 • • • • 그래픽적으로 풍부한 스타일링 향상된 이미지 지원 확대축소 가능한 벡터 그래픽 미디어 요소 일관된 고화질과 고성능을 제공하기 위해, IE9은 윈도우7의 GPU 그래픽 기능에 기반하고 있습니다. Page 28: CSS3로 그래픽적으로 풍부한 스타일링 • CSS3 Colors • 알파 컬러, rgba()와 hsla() 함수 • 투명도 조젃, opacity 속성 • 둥근 모서리, border-radius 속성 • 하나의 요소에 다수의 배경 이미지 적용 • Block 요소에 box-shadow 속성 • CSS3 Backgrounds and Borders Page 29: 데모 시연 Border Radius, CSS3 Media Queries Page 30: 향상된 이미지 지원 • ICC 버젂4와 버젂 2 컬러 프로필 • 내장 컬러 프로필이 있는 이미지를 올바르게 표현해줍니다. • 새로운 JPEG XR 포맷 • JPG 보다 높은 압축률 • 같은 사이즈로 더 높은 퀄리티 • 같은 퀄리티로 더 적은 용량 • JPEG XR도 무손실 압축을 지원합니다 • 고해상도의 원본 사진을 주고 받는데 유용합니다. • TIFF 이미지 포맷 • 무손실 이미지, 흑백 이미지, 문서와 팩스 스캔 이미지 등으로 유명한 포맷입니다. 30 Page 31: 31 Page 32: 데모 시연 Color Profiles, Image Support Page 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" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg> Page 34: SVG : Internet Explorer Platform Preview SVG Feature Document Structure Basic Shapes Paths Text v1         v2            Transforms Painting, Filling, Color Scripting Styling Gradients and Patterns Clipping and Masking Markers and Symbols Page 35: Demos Tweet Cloud, Real World Diagram, Org Charts, Biz Charts, Atlas zure Europawahl Page 36: 리치 미디어 통합—플러그인 없이 • HTML5 <video> 요소 • 업계 표준의 MPEG-4/H.264 비디오 • 페이지의 어떤 요소와도 조합해서 쓸 수 있습니다. • 풀HD 해상도의 풀스크린 모드에서 60fps를 유지하는 GPU 기반의 구현 가능 • DXVA와 풀 하드웨어 비디오 디코더를 모두 지원 • HTML 컨텐츠, 이미지, SVG 그래픽 • HTML5 <audio> 요소 • 업계 표준인 MP3와 AAC 오디오 <video width="800" height="450" src="myvideo.mp4" autoplay> No video for you</video> Page 37: 비디오 데모 Video Page 38: 38 Page 39: 비디오 데모 Network Monitoring Page 40: 8주 마다 한번씩 선보이는 IE9 플랫폼 프리뷰 다운로드 www.IETestDrive.com 가장 빠른 IE9 정보(영문) http://blogs.msdn.com/ie 무엇이든 물어보세요. 황리건 @HRG Page 41: Page 42: